@castlabs/ui 7.2.1 → 7.4.0

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

@@ -30,46 +30,51 @@ main a {
 //   @extend %cl-a-secondary;
 // }
 
-.cl-a-text a:not(.btn),
-.cl-a-primary a.cl-a-text:not(.btn),
-.cl-a-secondary a.cl-a-text:not(.btn),
-.cl-a-transparent a.cl-a-text:not(.btn),
-a.cl-a-text:not(.btn) {
-  @extend %cl-a-text;
-}
+// .cl-a-text a:not(.btn),
+// .cl-a-primary a.cl-a-text:not(.btn),
+// .cl-a-secondary a.cl-a-text:not(.btn),
+// .cl-a-transparent a.cl-a-text:not(.btn),
+// a.cl-a-text:not(.btn) {
+//   @extend %cl-a-text;
+// }
 
-.cl-a-transparent a:not(.btn),
-.cl-a-primary a.cl-a-transparent:not(.btn),
-.cl-a-secondary a.cl-a-transparent:not(.btn),
-.cl-a-text a.cl-a-transparent:not(.btn),
-a.cl-a-transparent:not(.btn) {
-  @extend %cl-a-transparent;
-}
+// .cl-a-transparent a:not(.btn),
+// .cl-a-primary a.cl-a-transparent:not(.btn),
+// .cl-a-secondary a.cl-a-transparent:not(.btn),
+// .cl-a-text a.cl-a-transparent:not(.btn),
+// a.cl-a-transparent:not(.btn) {
+//   @extend %cl-a-transparent;
+// }
 
-.cl-a-none a:not(.btn),
-.cl-a-primary a.cl-a-none:not(.btn),
-.cl-a-secondary a.cl-a-none:not(.btn),
-.cl-a-text a.cl-a-none:not(.btn),
-a.cl-a-none:not(.btn) {
-  @extend %cl-a-none;
-}
+// .cl-a-none a:not(.btn),
+// .cl-a-primary a.cl-a-none:not(.btn),
+// .cl-a-secondary a.cl-a-none:not(.btn),
+// .cl-a-text a.cl-a-none:not(.btn),
+// a.cl-a-none:not(.btn) {
+//   @extend %cl-a-none;
+// }
 
 .cl-a-btn {
-  // a link that is more an embedded button
+  // a link that is more an embedded button, e.g. in table actions
   @extend %cl-a-btn;
 }
 
+.cl-a-primary {
+  // primary link among many, usually table actions
+  font-weight: 700;
+}
+
 .cl-a-quickaction {
   @extend %cl-a-btn;
-  @extend %cl-a-transparent;
   @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 
+  background-color: transparent;
   border-radius: 0;
   margin-left: $spacing-tiny;
   text-decoration: none;
 
   &:not(:hover) {
-    color: $color-ci-clay;
+    color: $color-ci-steel;
   }
 }
 
@@ -90,7 +95,7 @@ a.cl-a-none:not(.btn) {
 
 .cl-a-lock,
 .cl-span-lock {
-  @include cl-fontawesome-before('\f023', -0.15em, 0.8em, -0.15em);
+  @include cl-fontawesome-before('\f023', $color-ci-steel, -0.15em, 0.8em, -0.15em);
 
   &::before {
     font-weight: 900;
@@ -99,7 +104,7 @@ a.cl-a-none:not(.btn) {
 
 .cl-a-spinner,
 .cl-span-spinner {
-  @include cl-fontawesome-before('\f110', -0.2em, 0.8em, -0.1em);
+  @include cl-fontawesome-before('\f110', $color-ci-steel, -0.2em, 0.8em, -0.1em);
 
   &::before {
     animation: cl-a-spin 2s linear infinite;
@@ -108,44 +113,47 @@ a.cl-a-none:not(.btn) {
   }
 }
 
+span.cl-a-disabled,
+span.cl-span-disabled,
 span.cl-a-lock,
 span.cl-span-lock,
 span.cl-a-spinner,
 span.cl-span-spinner {
   @extend %cl-a; // make it look like a link
 
-  pointer-events: none; // disable hover effects
-  text-decoration: underline;
+  &:hover {
+    cursor: not-allowed;
+  }
 }
 
 .cl-a-pdf {
-  @include cl-fontawesome-before('\f1c1', 0.1em);
+  @include cl-fontawesome-before('\f1c1', $color-ci-steel, 0.1em);
 }
 
 .cl-a-image {
-  @include cl-fontawesome-before('\f1c5', 0.1em);
+  @include cl-fontawesome-before('\f1c5', $color-ci-steel, 0.1em);
 }
 
 .cl-a-video {
-  @include cl-fontawesome-before('\f1c8', 0.1em);
+  @include cl-fontawesome-before('\f1c8', $color-ci-steel, 0.1em);
 }
 
 .cl-a-file {
-  @include cl-fontawesome-before('\f15c', 0.1em);
+  @include cl-fontawesome-before('\f15c', $color-ci-steel, 0.1em);
 }
 
 .cl-a-zip {
-  @include cl-fontawesome-before('\f1c6', 0.1em);
+  @include cl-fontawesome-before('\f1c6', $color-ci-steel, 0.1em);
 }
 
 // --- ::after icons -------------------------------------------------------------
 
 .cl-a-email {
-  @include cl-fontawesome-after('\f0e0', 0.2em, 0.8em);
+  @include cl-fontawesome-after('\f0e0', $color-ci-steel, 0.2em, 0.8em);
 }
 
 .cl-a-external {
-  @include cl-fontawesome-after('\f35d', 0.2em, 0.75em, -0.15em);
+  @include cl-fontawesome-after('\f35d', $color-ci-steel, 0.2em, 0.75em, -0.15em);
 
   &::after {
     font-weight: 900;

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

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f005');
 
+    line-height: 0.5;
     margin-right: 0.2em;
     top: -0.04em;
   }

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

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f02b');
 
+    line-height: 0.5;
     margin-right: $spacing-micro;
     top: 0.05em;
   }

package/src/styles/abstracts/app.scss

@@ -9,7 +9,9 @@
 @use './tools' as *;
 
 $brand-border-radius: px(20);
-$brand-line-width: px(1);
+$brand-border-radius-minor: px(2.5); // for tiny things like focus borders
+$brand-line-width: 1px;
+$brand-bar-width: px(4);
 
 $grid-spacing: $spacing-small;
 

package/src/styles/abstracts/color.scss

@@ -19,47 +19,40 @@ $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-backdrop: rgba($color-ci-night, 0.5);
+
+// secondary palette
+$color-ci-brick: #ba4f4f; // #A34040;
+$color-ci-honey: #dc9404;
+$color-ci-leaf: #53965d; // #43894E;
+$color-ci-sea: #5d9dd1; // #5D9FC0; // #3F81A2; 5d9dd1
+$color-ci-orchid: #b271bf;
+$color-ci-steel: #a0a0a0;
+$color-ci-haze: #eeece6;
 $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-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-ash;
-
-// additional non-official colors
-$color-ci-green: #338450;
-$color-ci-orange: #eca72c; // fec671; //f18f01;
-
-$color-hover-opacity: 0.75;
-
-$color-positive: $color-ci-night;
-$color-negative: $color-ci-sky;
-$color-neutral: $color-ci-night;
+// aliases
+$color-primary: $color-ci-sea;
+$color-secondary: $color-ci-night;
 
-$color-attention: $color-ci-sky;
-$color-disabled: $color-ci-clay;
+$color-positive: $color-ci-leaf;
+$color-negative: $color-ci-brick;
+$color-neutral: $color-ci-night;
+$color-error: $color-ci-brick; // error color
+$color-focus: $color-ci-sea;
+$color-link: $color-ci-steel; // links/underlines on eggshell background
+$color-hover: $color-ci-red;
+$color-disabled: $color-ci-steel; // $color-ci-clay;
 
 $color-text: $color-ci-night;
 $color-selected: $color-ci-red;
 $color-accent: $color-ci-petrol;
-$color-focus: $color-ci-petrol;
 $color-background: $color-ci-white;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
 $color-line: $color-ci-clay;
-$color-line-focus: $color-ci-clay;
-
-$bar-ui-width: px(4);
 
 @mixin cl-color-focus-outline-raw($color: var(--cl-color-focus), $offset: -3px) {
   box-shadow: none; // disable BS outlines
@@ -132,20 +125,46 @@ $bar-ui-width: px(4);
   }
 }
 
+@mixin cl-colors-secondary {
+  &.cl-color-brick {
+    @extend %cl-color-brick;
+  }
+
+  &.cl-color-leaf {
+    @extend %cl-color-leaf;
+  }
+
+  &.cl-color-sea {
+    @extend %cl-color-sea;
+  }
+
+  &.cl-color-honey {
+    @extend %cl-color-honey;
+  }
+
+  &.cl-color-orchid {
+    @extend %cl-color-orchid;
+  }
+
+  &.cl-color-steel {
+    @extend %cl-color-steel;
+  }
+}
+
 %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-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: $color-link;
   #{'--cl-color-active'}: $color-ci-berry;
-  #{'--cl-color-hover'}: $color-ci-red;
+  #{'--cl-color-hover'}: $color-hover;
   #{'--cl-color-focus'}: $color-ci-night;
-  #{'--cl-color-disabled-background'}: $color-ci-clay;
-  #{'--cl-color-disabled-border'}: $color-ci-clay;
+  #{'--cl-color-disabled-background'}: $color-disabled;
+  #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-ci-eggshell;
 }
 
@@ -154,19 +173,18 @@ $bar-ui-width: px(4);
   #{'--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-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-disabled-background'}: transparent;
-  #{'--cl-color-disabled-border'}: $color-ci-clay;
-  #{'--cl-color-disabled-text'}: $color-ci-clay;
+  #{'--cl-color-disabled-border'}: $color-disabled;
+  #{'--cl-color-disabled-text'}: $color-disabled;
 }
 
-%cl-color-red {
-  #{'--cl-color-background'}: $color-ci-red;
-  #{'--cl-color-border'}: $color-ci-red;
+%cl-color-text-light {
+  // for backgrounds that require 'white' text
   #{'--cl-color-text'}: $color-ci-eggshell;
   #{'--cl-color-line'}: $color-ci-eggshell;
   #{'--cl-color-accent'}: $color-ci-eggshell;
@@ -175,105 +193,147 @@ $bar-ui-width: px(4);
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
+%cl-color-text-dark {
+  // for backgrounds that require 'black' text
+  #{'--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-focus'}: $color-ci-night;
+}
+
+%cl-color-red {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-red;
+  #{'--cl-color-border'}: $color-ci-red;
+}
+
 %cl-color-red-outline {
   #{'--cl-color-border'}: $color-ci-red;
   #{'--cl-color-text'}: $color-ci-red;
-  #{'--cl-color-line'}: $color-ci-clay;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-red;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-red;
   #{'--cl-color-disabled-background'}: transparent;
-  #{'--cl-color-disabled-border'}: $color-ci-clay;
-  #{'--cl-color-disabled-text'}: $color-ci-clay;
+  #{'--cl-color-disabled-border'}: $color-disabled;
+  #{'--cl-color-disabled-text'}: $color-disabled;
 }
 
 %cl-color-sky {
+  @extend %cl-color-text-dark;
+
   #{'--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-focus'}: $color-ci-night;
 }
 
 %cl-color-night {
+  @extend %cl-color-text-light;
+
   #{'--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-focus'}: $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-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
-%cl-color-clay {
-  #{'--cl-color-background'}: $color-ci-clay;
-  #{'--cl-color-border'}: $color-ci-clay;
+%cl-color-eggshell-alternate {
+  #{'--cl-color-background'}: $color-ci-haze;
+  #{'--cl-color-border'}: $color-ci-haze;
   #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
 
+%cl-color-clay {
+  @extend %cl-color-text-dark;
+
+  #{'--cl-color-background'}: $color-ci-clay;
+  #{'--cl-color-border'}: $color-ci-clay;
+}
+
 %cl-color-ash {
+  @extend %cl-color-text-light;
+
   #{'--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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-petrol {
+  @extend %cl-color-text-light;
+
   #{'--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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-berry {
+  @extend %cl-color-text-light;
+
   #{'--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-focus'}: $color-ci-eggshell;
+}
+
+%cl-color-brick {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-brick;
+  #{'--cl-color-border'}: $color-ci-brick;
+}
+
+%cl-color-honey {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-honey;
+  #{'--cl-color-border'}: $color-ci-honey;
+}
+
+%cl-color-leaf {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-leaf;
+  #{'--cl-color-border'}: $color-ci-leaf;
+}
+
+%cl-color-sea {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-sea;
+  #{'--cl-color-border'}: $color-ci-sea;
+}
+
+%cl-color-orchid {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-orchid;
+  #{'--cl-color-border'}: $color-ci-orchid;
+}
+
+%cl-color-steel {
+  @extend %cl-color-text-light;
+
+  #{'--cl-color-background'}: $color-ci-steel;
+  #{'--cl-color-border'}: $color-ci-steel;
 }
 
 %cl-color-transparent {
+  @extend %cl-color-text-light;
+
   #{'--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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-disabled {
@@ -283,7 +343,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-line'}: $color-disabled;
   #{'--cl-color-accent'}: $color-disabled;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: $color-disabled;
+  #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
@@ -294,7 +354,7 @@ $bar-ui-width: px(4);
   #{'--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-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-ash;
 }
 
@@ -305,5 +365,3 @@ $bar-ui-width: px(4);
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
-
-// ----------------------------------------------

package/src/styles/abstracts/fontawesome.scss

@@ -19,14 +19,15 @@
 /// Add a fontawesome icon ::after an element.
 ///
 /// @example scss
-///   @include cl-fontawesome-after('\f2bd', 0, .5em, .25em);
+///   @include cl-fontawesome-after('\f2bd', #a0a0a0, 0, .5em, .25em);
 ///
 /// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $color Color of icon. Defaults to inherent/no set color.
 /// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
 /// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
 /// @param {value} $top Optional vertical offset (em). Defaults to 0.
 /// @output ::after element.
-@mixin cl-fontawesome-after($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+@mixin cl-fontawesome-after($codepoint, $color: inherit, $offset: 0, $scale: 1em, $top: 0) {
   $cl-fontawesome-box: 1em;
 
   margin-right: $cl-fontawesome-box;
@@ -34,7 +35,7 @@
 
   &::after {
     @include cl-fontawesome($codepoint);
-
+    @include set-property-if-not(color, inherit, $color);
     @include set-property-if-not(font-size, 1em, $scale);
 
     font-weight: 400;
@@ -43,19 +44,24 @@
     top: $top;
     width: 0;
   }
+
+  &:hover::after {
+    color: inherit;
+  }
 }
 
 /// Add a fontawesome icon ::before an element.
 ///
 /// @example scss
-///   @include cl-fontawesome-before('\f2bd', 0, .5em, .25em);
+///   @include cl-fontawesome-before('\f2bd', #a0a0a0, 0, .5em, .25em);
 ///
 /// @param {value} $codepoint UTF8 codepoint.
+/// @param {value} $color Color of icon. Defaults to inherent/no set color.
 /// @param {value} $offset Optional horizontal offset (em). Defaults to 0.
 /// @param {value} $scale Optinal icon scale (font-size) of the icon. Defaults to 1.
 /// @param {value} $top Optional vertical offset (em). Defaults to 0.
 /// @output ::before element.
-@mixin cl-fontawesome-before($codepoint, $offset: 0, $scale: 1em, $top: 0) {
+@mixin cl-fontawesome-before($codepoint, $color: inherit, $offset: 0, $scale: 1em, $top: 0) {
   $cl-fontawesome-box: 1em;
 
   margin-left: $cl-fontawesome-box;
@@ -63,7 +69,7 @@
 
   &::before {
     @include cl-fontawesome($codepoint);
-
+    @include set-property-if-not(color, inherit, $color);
     @include set-property-if-not(font-size, 1em, $scale);
 
     font-weight: 400;
@@ -73,6 +79,10 @@
     top: $top;
     width: 0;
   }
+
+  &:hover::before {
+    color: inherit;
+  }
 }
 
 @mixin cl-fontawesome-postfix($codepoint) {
@@ -81,7 +91,7 @@
   &::after {
     @include cl-fontawesome($codepoint);
 
-    color: $color-ci-clay;
+    color: $color-ci-steel;
     font-weight: 400;
     left: 0.2em;
     position: relative;

package/src/styles/abstracts/form.scss

@@ -29,7 +29,8 @@ $form-spacing-label-input: px(2);
 
   &:disabled,
   &.disabled {
-    background-color: $color-ci-white;
+    background-color: $color-ci-haze;
+    border-color: $color-disabled;
   }
 }
 
@@ -48,17 +49,20 @@ $form-spacing-label-input: px(2);
     400,
     $form-field-fontsize,
     $form-field-line-height,
-    0.025em,
-    80%
+    0.025em
   );
 }
 
 @mixin cl-form-focus-embed {
-  border-color: $color-ci-berry !important;
+  border-color: $color-focus !important;
   box-shadow: none;
-  box-shadow: 0 0 0 1px $color-ci-berry inset;
-  color: var(--cl-color-text);
+  color: var(--cl-color-text) !important;
   outline: none;
+
+  &::selection {
+    background: $color-focus;
+    color: $color-ci-eggshell;
+  }
 }
 
 @mixin cl-form-focus {