@castlabs/ui 6.0.2 → 7.0.0

package/src/components/text/ClLinkExternal/style.scss

@@ -9,24 +9,24 @@
 .cl-p a,
 main a {
   // default for body
-  @extend %cl-a-default;
-}
-
-.cl-a-primary a:not(.btn),
-.cl-a-secondary a.cl-a-primary:not(.btn),
-.cl-a-text a.cl-a-primary:not(.btn),
-.cl-a-transparent a.cl-a-primary:not(.btn),
-a.cl-a-primary:not(.btn) {
-  @extend %cl-a-primary;
-}
-
-.cl-a-secondary a:not(.btn),
-.cl-a-primary a.cl-a-secondary:not(.btn),
-.cl-a-text a.cl-a-secondary:not(.btn),
-.cl-a-transparent a.cl-a-secondary:not(.btn),
-a.cl-a-secondary:not(.btn) {
-  @extend %cl-a-secondary;
-}
+  @extend %cl-a;
+}
+
+// .cl-a-primary a:not(.btn),
+// .cl-a-secondary a.cl-a-primary:not(.btn),
+// .cl-a-text a.cl-a-primary:not(.btn),
+// .cl-a-transparent a.cl-a-primary:not(.btn),
+// a.cl-a-primary:not(.btn) {
+//   @extend %cl-a-primary;
+// }
+//
+// .cl-a-secondary a:not(.btn),
+// .cl-a-primary a.cl-a-secondary:not(.btn),
+// .cl-a-text a.cl-a-secondary:not(.btn),
+// .cl-a-transparent a.cl-a-secondary:not(.btn),
+// a.cl-a-secondary:not(.btn) {
+//   @extend %cl-a-secondary;
+// }
 
 .cl-a-text a:not(.btn),
 .cl-a-primary a.cl-a-text:not(.btn),
@@ -62,6 +62,7 @@ a.cl-a-none:not(.btn) {
   @extend %cl-a-transparent;
 
   margin-left: $spacing-tiny;
+  text-decoration: none;
 
   &:not(:hover) {
     color: $color-ci-silver;
@@ -107,9 +108,10 @@ span.cl-a-lock,
 span.cl-span-lock,
 span.cl-a-spinner,
 span.cl-span-spinner {
-  @extend %cl-a-default; // make it look like a link
+  @extend %cl-a; // make it look like a link
 
   pointer-events: none; // disable hover effects
+  text-decoration: underline;
 }
 
 .cl-a-pdf {

package/src/components/text/ClOrg/style.scss

@@ -5,22 +5,8 @@
 
 // This file defines custom org lables.
 
-.cl-org-name {
-  // deprecated
-  font-weight: 600;
-
-  i {
-    color: $color-ci-cloud;
-    display: inline;
-  }
-
-  .cl-p-large & {
-    font-weight: 500;
-  }
-}
-
 .cl-org {
-  font-weight: 600;
+  font-weight: 700;
 
   &::before {
     box-sizing: border-box;
@@ -33,8 +19,4 @@
     margin-right: $spacing-micro;
     text-rendering: auto;
   }
-
-  .cl-p-large & {
-    font-weight: 500;
-  }
 }

package/src/components/text/ClPlan/style.scss

@@ -5,32 +5,14 @@
 
 // This file defines custom plan styles.
 
-[class^='cl-plan'],
-[class*=' cl-plan'] {
-  &:not(.cl-plan-derived) {
-    @extend %cl-badge;
+.cl-plan {
+  @extend %cl-badge;
+  @include cl-badge-small;
 
-    &::before {
-      @include cl-fontawesome('\f005');
+  &::before {
+    @include cl-fontawesome('\f005');
 
-      margin-right: 0.2em;
-      top: -0.04em;
-    }
-  }
-}
-
-a[class^='cl-plan'],
-a[class*=' cl-plan'] {
-  @include typography-links($badge-color-fg, rgba($badge-color-fg, $color-hover-opacity), 0);
-
-  display: inline-block !important;
-}
-
-.cl-plan-derived {
-  @extend %cl-badge-derived;
-
-  + [class^='cl-plan'],
-  + [class*=' cl-plan'] {
-    margin-left: -1.66em;
+    margin-right: 0.2em;
+    top: -0.04em;
   }
 }

package/src/components/text/ClRole/style.scss

@@ -5,32 +5,14 @@
 
 // This file defines custom role styles.
 
-[class^='cl-role'],
-[class*=' cl-role'] {
-  &:not(.cl-role-derived) {
-    @extend %cl-badge;
+.cl-role {
+  @extend %cl-badge;
+  @include cl-badge-small;
 
-    &::before {
-      @include cl-fontawesome('\f02b');
+  &::before {
+    @include cl-fontawesome('\f02b');
 
-      margin-right: 0.2em;
-      top: 0.05em;
-    }
-  }
-}
-
-a[class^='cl-role'],
-a[class*=' cl-role'] {
-  @include typography-links($badge-color-fg, rgba($badge-color-fg, $color-hover-opacity), 0);
-
-  display: inline-block !important;
-}
-
-.cl-role-derived {
-  @extend %cl-badge-derived;
-
-  + [class^='cl-role'],
-  + [class*=' cl-role'] {
-    margin-left: -1.66em;
+    margin-right: $spacing-micro;
+    top: 0.05em;
   }
 }

package/src/components/widget/ClCookieBanner/style.scss

@@ -1,6 +1,6 @@
 .cl-cookie-banner {
   bottom: $spacing-large;
-  box-shadow: 1px 1px 2px 1px $color-black-25a;
+  // box-shadow: 1px 1px 2px 1px $color-black-25a;
   left: 50%;
   opacity: 1;
   position: fixed;
@@ -17,6 +17,10 @@
     width: 8rem !important; // sass-lint:disable-line no-important
   }
 
+  .card-body {
+    padding: $spacing-small;
+  }
+
   @include media-breakpoint-up(md) {
     width: 640px;
   }

package/src/fonts/DMMono/DMMono.scss

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 300;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 400;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: italic;
+  font-weight: 500;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500italic.woff2') format('woff2');
+}

package/src/fonts/FontAwesome5/FontAwesome5.scss

@@ -6061,7 +6061,7 @@ readers do not read off random characters that represent icons */
 
 .sr-only {
   border: 0;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0, 0, 0, 0); /* stylelint-disable-line property-no-deprecated */
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -6072,7 +6072,7 @@ readers do not read off random characters that represent icons */
 
 .sr-only-focusable:active,
 .sr-only-focusable:focus {
-  clip: auto;
+  clip: auto; /* stylelint-disable-line property-no-deprecated */
   height: auto;
   margin: 0;
   overflow: visible;

package/src/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap.scss

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: NonNaturalGroteskInktrap;
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Regular.woff2')
+    format('woff2');
+}
+@font-face {
+  font-family: NonNaturalGroteskInktrap;
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Medium.woff2')
+    format('woff2');
+}
+@font-face {
+  font-family: NonNaturalGroteskInktrap;
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Bold.woff2')
+    format('woff2');
+}

package/src/styles/_global.scss

@@ -11,11 +11,13 @@
 // -----------------------------------------------------------------------------
 
 @import 'abstracts/tools';
+@import 'abstracts/brand';
 @import 'abstracts/color';
 @import 'abstracts/layer';
 @import 'abstracts/spacing';
 @import 'vendors/bootstrap';
 @import 'bootstrap/scss/mixins/breakpoints';
+@import 'assets/fontawesome.variables';
 @import 'layout/typography.variables';
 @import 'layout/grid.variables';
 @import 'components/button.variables';

package/src/styles/abstracts/brand.scss

@@ -0,0 +1,9 @@
+////
+/// @group themes
+/// @access public
+////
+
+// global brand settings/values
+
+$brand-border-radius: px(20);
+$brand-line-width: px(1);

package/src/styles/abstracts/color.scss

@@ -5,123 +5,268 @@
 
 // Basic/generic color values.
 
-$color-white-100: rgb(255 255 255 / 100%);
-$color-white-95a: rgb(255 255 255 / 95%);
-$color-white-90a: rgb(255 255 255 / 90%);
-$color-white-85a: rgb(255 255 255 / 85%);
-$color-white-80a: rgb(255 255 255 / 80%);
-$color-white-75a: rgb(255 255 255 / 75%);
-$color-white-70a: rgb(255 255 255 / 70%);
-$color-white-65a: rgb(255 255 255 / 65%);
-$color-white-60a: rgb(255 255 255 / 60%);
-$color-white-55a: rgb(255 255 255 / 55%);
-$color-white-50a: rgb(255 255 255 / 50%);
-$color-white-45a: rgb(255 255 255 / 45%);
-$color-white-40a: rgb(255 255 255 / 40%);
-$color-white-35a: rgb(255 255 255 / 35%);
-$color-white-30a: rgb(255 255 255 / 30%);
-$color-white-25a: rgb(255 255 255 / 25%);
-$color-white-20a: rgb(255 255 255 / 20%);
-$color-white-15a: rgb(255 255 255 / 15%);
-$color-white-10a: rgb(255 255 255 / 10%);
-$color-white-05a: rgb(255 255 255 / 5%);
-
-$color-gray-95: #0d0d0d;
-$color-gray-90: #1a1a1a;
-$color-gray-85: #262626;
-$color-gray-80: #333;
-$color-gray-75: #404040;
-$color-gray-70: #4d4d4d;
-$color-gray-65: #595959;
-$color-gray-60: #666;
-$color-gray-55: #737373;
-$color-gray-50: #808080;
-$color-gray-45: #8c8c8c;
-$color-gray-40: #999;
-$color-gray-35: #a6a6a6;
-$color-gray-30: #b3b3b3;
-$color-gray-25: #c0c0c0;
-$color-gray-20: #ccc;
-$color-gray-15: #d9d9d9;
-$color-gray-10: #e6e6e6;
-$color-gray-05: #f2f2f2;
-
-$color-black-100: rgb(0 0 0 / 100%);
-$color-black-95a: rgb(0 0 0 / 95%);
-$color-black-90a: rgb(0 0 0 / 90%);
-$color-black-85a: rgb(0 0 0 / 85%);
-$color-black-80a: rgb(0 0 0 / 80%);
-$color-black-75a: rgb(0 0 0 / 75%);
-$color-black-70a: rgb(0 0 0 / 70%);
-$color-black-65a: rgb(0 0 0 / 65%);
-$color-black-60a: rgb(0 0 0 / 60%);
-$color-black-55a: rgb(0 0 0 / 55%);
 $color-black-50a: rgb(0 0 0 / 50%);
-$color-black-45a: rgb(0 0 0 / 45%);
-$color-black-40a: rgb(0 0 0 / 40%);
-$color-black-35a: rgb(0 0 0 / 35%);
-$color-black-30a: rgb(0 0 0 / 30%);
-$color-black-25a: rgb(0 0 0 / 25%);
-$color-black-20a: rgb(0 0 0 / 20%);
-$color-black-15a: rgb(0 0 0 / 15%);
-$color-black-10a: rgb(0 0 0 / 10%);
-$color-black-05a: rgb(0 0 0 / 5%);
-
-$color-ci-red: #fa423c;
-$color-ci-blue: #71c0ff; // was #0474dc;
-$color-ci-night: #262a35;
-$color-ci-dusk: $color-gray-75;
-$color-ci-dim: $color-gray-65;
-$color-ci-cloud: #757371;
-$color-ci-silver: #b0b3b6; // ~ $color-gray-30
-$color-ci-smoke: #dad6d6; // ~ $color-gray-15
-$color-ci-haze: #f6f5f5; // ~ $color-gray-05
-$color-ci-white: $color-white-100;
-$color-ci-sand: #fdf5cf;
-
-$color-ci-green: #3fa261; //2a7a5c;  // not used - AA contrast rating
-$color-ci-orange: #e6a707; // fec671; //f18f01;
-$color-ci-magenta: #802392;
-// $color-ci-violet: #805d93; // not used
-// $color-ci-orange: #ffba08; // not used
-// $color-ci-green: #4cb944; // not used
 
-$color-ui-milk: rgb(255 255 255 / 90%);
+$color-ci-red: #fa423c; // rgba(250, 66, 60, 1)
+$color-ci-sky: #71c0ff; // rgba(113, 192, 255, 1)
+$color-ci-eggshell: #fbf9f2; // rgba(251, 249, 242, 1);
+$color-ci-night: #262a35; // rgba(38, 42, 53, 1);
+$color-ci-night-2: #2c303c; // rgba(38, 42, 53, 1); // interim color for sidenav
+$color-ci-night-3: #333742; // rgba(38, 42, 53, 1); // interim color for sidenav
+$color-ci-clay: #cfc8c8; // rgba(207, 200, 200, 1);
+$color-ci-ash: #6d5e5e; // rgba(109, 94, 94, 1);
+$color-ci-berry: #6e1c3b; // rgba(110, 28, 59, 1);
+$color-ci-petrol: #096174; // rgba(9, 97, 116, 1);
+$color-ci-black: $color-ci-night;
+$color-ci-white: $color-ci-eggshell;
+$color-ci-sand: #fdf5cf;
+$color-ci-backdrop: rgba($color-ci-night, 0.5);
 
+// legacy color mappings
 $color-primary: $color-ci-red;
-$color-secondary: $color-ci-blue;
+$color-secondary: $color-ci-sky;
+$color-ci-blue: $color-ci-sky;
+$color-ci-dusk: $color-ci-night;
+$color-ci-dim: $color-ci-ash;
+$color-ci-cloud: $color-ci-ash;
+$color-ci-silver: $color-ci-clay;
+$color-ci-smoke: $color-ci-clay;
+$color-ci-haze: $color-ci-eggshell;
 $color-dark: $color-ci-cloud;
 
+$color-ci-green: #8cd867; //2a7a5c;
+$color-ci-orange: #d1ac00; // fec671; //f18f01;
+// $color-ci-magenta: #802392; -> used by sphinx
+// $color-ci-violet: #805d93; // not used
+
 $color-hover-opacity: 0.75;
 
-$color-positive: $color-ci-dim;
-$color-negative: $color-ci-blue;
-$color-neutral: $color-ci-dim;
+$color-positive: $color-ci-night;
+$color-negative: $color-ci-sky;
+$color-neutral: $color-ci-night;
 
-$color-attention: $color-ci-blue;
+$color-attention: $color-ci-sky;
+$color-disabled: $color-ci-clay;
 
-$color-text: $color-ci-dim;
-$color-background: $color-white-100;
+$color-text: $color-ci-night;
+$color-selected: $color-ci-red;
+$color-focus: $color-ci-night;
+$color-background: $color-ci-white;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
 $color-line: $color-ci-smoke;
 $color-line-focus: $color-ci-silver;
 
-$color-shadow: $color-black-20a;
-$color-shadow-3d: 1px 1px 2px $color-black-25a;
-$border-ui-radius: 3px;
 $bar-ui-width: px(4);
 
-@mixin color-shadow-3d {
-  border-radius: $border-ui-radius;
-  box-shadow: $color-shadow-3d;
-  overflow: hidden;
-}
-
-@mixin color-focus-outline($color: $color-text, $offset: -2px) {
-  &:focus {
+@mixin cl-color-focus-outline($color: $color-ci-ash, $offset: -2px) {
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    box-shadow: none; // disable BS outlines
     outline: 1px dashed $color;
     outline-offset: $offset;
     z-index: 100;
   }
 }
+
+@mixin cl-accent() {
+  &.cl-accent-red,
+  .cl-accent-red {
+    #{'--cl-color-accent'}: $color-ci-red;
+  }
+
+  &.cl-accent-sky,
+  .cl-accent-sky {
+    #{'--cl-color-accent'}: $color-ci-sky;
+  }
+
+  &.cl-accent-night,
+  .cl-accent-night {
+    #{'--cl-color-accent'}: $color-ci-night;
+  }
+
+  &.cl-accent-eggshell,
+  .cl-accent-eggshell {
+    #{'--cl-color-accent'}: $color-ci-eggshell;
+  }
+
+  &.cl-accent-clay,
+  .cl-accent-clay {
+    #{'--cl-color-accent'}: $color-ci-clay;
+  }
+
+  &.cl-accent-ash,
+  .cl-accent-ash {
+    #{'--cl-color-accent'}: $color-ci-ash;
+  }
+
+  &.cl-accent-petrol,
+  .cl-accent-petrol {
+    #{'--cl-color-accent'}: $color-ci-petrol;
+  }
+
+  &.cl-accent-berry,
+  .cl-accent-berry {
+    #{'--cl-color-accent'}: $color-ci-berry;
+  }
+
+  &.cl-accent-none,
+  .cl-accent-none,
+  &.cl-accent-transparent,
+  .cl-accent-transparent {
+    #{'--cl-color-accent'}: transparent;
+  }
+}
+
+%cl-color-root {
+  // default colors = outline-night
+  #{'--cl-color-background'}: $color-ci-eggshell;
+  #{'--cl-color-border'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-accent'}: $color-ci-petrol;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
+  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-active'}: $color-ci-berry;
+  #{'--cl-color-hover'}: $color-ci-red;
+}
+
+%cl-color-night-outline {
+  // order is important: must be first!
+  #{'--cl-color-background'}: $color-ci-eggshell;
+  #{'--cl-color-border'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
+  #{'--cl-color-link'}: $color-ci-berry;
+}
+
+%cl-color-red {
+  #{'--cl-color-background'}: $color-ci-red;
+  #{'--cl-color-border'}: $color-ci-red;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-red-outline {
+  #{'--cl-color-border'}: $color-ci-red;
+  #{'--cl-color-text'}: $color-ci-red;
+  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-accent'}: $color-ci-red;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
+  #{'--cl-color-link'}: $color-ci-berry;
+}
+
+%cl-color-sky {
+  #{'--cl-color-background'}: $color-ci-sky;
+  #{'--cl-color-border'}: $color-ci-sky;
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-night;
+  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-night;
+}
+
+%cl-color-night {
+  #{'--cl-color-background'}: $color-ci-night;
+  #{'--cl-color-border'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-eggshell {
+  #{'--cl-color-background'}: $color-ci-eggshell;
+  #{'--cl-color-border'}: $color-ci-eggshell;
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-berry;
+}
+
+%cl-color-clay {
+  #{'--cl-color-background'}: $color-ci-clay;
+  #{'--cl-color-border'}: $color-ci-clay;
+  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-night;
+  #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-night;
+}
+
+%cl-color-ash {
+  #{'--cl-color-background'}: $color-ci-ash;
+  #{'--cl-color-border'}: $color-ci-ash;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-petrol {
+  #{'--cl-color-background'}: $color-ci-petrol;
+  #{'--cl-color-border'}: $color-ci-petrol;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-berry {
+  #{'--cl-color-background'}: $color-ci-berry;
+  #{'--cl-color-border'}: $color-ci-berry;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-transparent {
+  #{'--cl-color-background'}: transparent;
+  #{'--cl-color-border'}: $color-ci-eggshell;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+%cl-color-disabled {
+  #{'--cl-color-background'}: transparent;
+  #{'--cl-color-border'}: $color-disabled;
+  #{'--cl-color-text'}: $color-disabled;
+  #{'--cl-color-line'}: $color-disabled;
+  #{'--cl-color-accent'}: $color-disabled;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-disabled;
+}
+
+%cl-color-faded {
+  #{'--cl-color-background'}: transparent;
+  #{'--cl-color-border'}: $color-ci-ash;
+  #{'--cl-color-text'}: $color-ci-ash;
+  #{'--cl-color-line'}: $color-ci-ash;
+  #{'--cl-color-accent'}: $color-ci-ash;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-ash;
+}
+
+%cl-color-none {
+  #{'--cl-color-background'}: transparent;
+  #{'--cl-color-border'}: transparent;
+  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
+  #{'--cl-color-link'}: $color-ci-eggshell;
+}
+
+// ----------------------------------------------