style and compatibility update

app/static/sass/components/_base-colors.scss

@@ -0,0 +1,84 @@
+.primary-color {
+  background-color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color-border {
+  border-color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color-text {
+  color: map-get($base-color-palette, "primary") !important;
+}
+
+.primary-color.lighten {
+  background-color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color-border.border-lighten {
+  border-color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color-text.text-lighten {
+  color: map-get($base-color-palette, "primary-light") !important;
+}
+
+.primary-color.darken {
+  background-color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.primary-color-border.border-darken {
+  border-color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.primary-color-text.text-darken {
+  color: map-get($base-color-palette, "primary-dark") !important;
+}
+
+.secondary-color {
+  background-color: map-get($base-color-palette, "secondary") !important;
+}
+
+.secondary-color-border {
+  border-color: map-get($base-color-palette, "secondary") !important;
+}
+
+.secondary-color-text {
+  color: map-get($base-color-palette, "secondary") !important;
+}
+
+.success-color {
+  background-color: map-get($base-color-palette, "success") !important;
+}
+
+.success-color-border {
+  border-color: map-get($base-color-palette, "success") !important;
+}
+
+.success-color-text {
+  color: map-get($base-color-palette, "success") !important;
+}
+
+.error-color {
+  background-color: map-get($base-color-palette, "error") !important;
+}
+
+.error-color-border {
+  border-color: map-get($base-color-palette, "error") !important;
+}
+
+.error-color-text {
+  color: map-get($base-color-palette, "error") !important;
+}
+
+.link-color {
+  background-color: map-get($base-color-palette, "link") !important;
+}
+
+.link-color-border {
+  border-color: map-get($base-color-palette, "link") !important;
+}
+
+.link-color-text {
+  color: map-get($base-color-palette, "link") !important;
+}
+

app/static/sass/components/_clearfix.scss

@@ -0,0 +1,5 @@
+.clearfix::after {
+  clear: both;
+  content: "";
+  display: block;
+}

app/static/sass/components/_corpus-status-color.scss

@@ -0,0 +1,13 @@
+@each $corpus-status, $corpus-status-color in $corpus-status-color-palette {
+  .corpus-status-color[data-corpus-status="#{$corpus-status}"] {
+    background-color: $corpus-status-color !important;
+  }
+
+  .corpus-status-color-border[data-corpus-status="#{$corpus-status}"] {
+    border-color: $corpus-status-color !important;
+  }
+
+  .corpus-status-color-text[data-corpus-status="#{$corpus-status}"] {
+    color: $corpus-status-color !important;
+  }
+}

app/static/sass/components/_helpers.scss

@@ -0,0 +1,11 @@
+.clickable {
+  cursor: pointer !important;
+}
+
+.show-if-only-child:not(:only-child) {
+  display: none !important;
+}
+
+[draggable="true"] {
+  cursor: move !important;
+}

app/static/sass/components/_job-status-color.scss

@@ -0,0 +1,13 @@
+@each $job-status, $job-status-color in $job-status-color-palette {
+  .job-status-color[data-job-status="#{$job-status}"] {
+    background-color: $job-status-color !important;
+  }
+
+  .job-status-color-border[data-job-status="#{$job-status}"] {
+    border-color: $job-status-color !important;
+  }
+
+  .job-status-color-text[data-job-status="#{$job-status}"] {
+    color: $job-status-color !important;
+  }
+}

app/static/sass/components/_placeholder.scss

@@ -0,0 +1,4 @@
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}

app/static/sass/components/_s-attr-color.scss

@@ -0,0 +1,19 @@
+@each $s-attr, $s-attr-color-palette in $s-attr-color-palettes {
+  @each $s-attr-value, $s-attr-value-color in $s-attr-color-palette {
+    .s-attr-color[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+
+    .s-attr-color-text[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+
+    .s-attr-color-border[data-s-attr="#{$s-attr}"][data-s-attr-value="#{$s-attr-value}"] {
+      background-color: $s-attr-value-color !important;
+    }
+  }
+}
+
+.s-attr .p-attr {
+  background-color: inherit;
+}

app/static/sass/components/_service-color.scss

@@ -0,0 +1,40 @@
+@each $service, $color-palette in $service-color-palettes {
+  .service-color[data-service="#{$service}"],
+  [data-service="#{$service}"] .service-color[data-service="inherit"] {
+    background-color: map-get($color-palette, "base") !important;
+
+    &.darken {
+      background-color: map-get($color-palette, "darken") !important;
+    }
+
+    &.lighten {
+      background-color: map-get($color-palette, "lighten") !important;
+    }
+  }
+
+  .service-color-border[data-service="#{$service}"],
+  [data-service="#{$service}"] .service-color-border[data-service="inherit"] {
+    border-color: map-get($color-palette, "base") !important;
+
+    &.border-darken {
+      border-color: map-get($color-palette, "darken") !important;
+    }
+
+    &.border-lighten {
+      border-color: map-get($color-palette, "lighten") !important;
+    }
+  }
+
+  .service-color-text[data-service="#{$service}"],
+  [data-service="#{$service}"] .service-color-text[data-service="inherit"] {
+    color: map-get($color-palette, "base") !important;
+
+    &.text-darken {
+      color: map-get($color-palette, "darken") !important;
+    }
+
+    &.text-lighten {
+      color: map-get($color-palette, "lighten") !important;
+    }
+  }
+}

app/static/sass/components/_service-icon.scss

@@ -0,0 +1,6 @@
+@each $service, $letter in $service-icon-letters {
+  .nopaque-icons.service-icons[data-service="#{$service}"]:empty::before,
+  [data-service="#{$service}"] .nopaque-icons.service-icons[data-service="inherit"]:empty::before {
+    content: "#{$letter}";
+  }
+}

app/static/sass/components/_spacing.scss

@@ -0,0 +1,27 @@
+@each $spacing-shortcut-name, $spacing-shortcut-value in $spacing-shortcuts {
+  @each $spacing-name, $spacing-value in $spacing-values {
+    // All directions
+    .#{$spacing-shortcut-value}-#{$spacing-name} {
+      #{$spacing-shortcut-name}: $spacing-value !important;
+    }
+
+    // Horizontal axis
+    .#{$spacing-shortcut-value}x-#{$spacing-name} {
+      #{$spacing-shortcut-name}-left: $spacing-value !important;
+      #{$spacing-shortcut-name}-right: $spacing-value !important;
+    }
+
+    // Vertical axis
+    .#{$spacing-shortcut-value}y-#{$spacing-name} {
+      #{$spacing-shortcut-name}-top: $spacing-value !important;
+      #{$spacing-shortcut-name}-bottom: $spacing-value !important;
+    }
+
+    // Cardinal directions
+    @each $spacing-direction-name, $spacing-direction-value in $spacing-directions {
+      .#{$spacing-shortcut-value}#{$spacing-direction-value}-#{$spacing-name} {
+        #{$spacing-shortcut-name}-#{$spacing-direction-name}: $spacing-value !important;
+      }
+    }
+  }
+}

app/static/sass/components/_status-spinner.scss

@@ -0,0 +1,9 @@
+/*
+ * changes preoloader size etc. to fit visually better with the chip status
+ * indicator of jobs
+ */
+.status-spinner {
+  margin-bottom: -10px;
+  width: 30px !important;
+  height: 30px !important;
+}

app/static/sass/components/_status-text.scss

@@ -0,0 +1,12 @@
+.corpus-status-text,
+.job-status-text {
+  text-transform: lowercase;
+}
+
+.corpus-status-text[data-corpus-status]:empty::before {
+  content: attr(data-corpus-status);
+}
+
+.job-status-text[data-job-status]:empty::before {
+  content: attr(data-job-status);
+}