@castlabs/ui 7.3.0 → 7.4.0

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) {

package/src/styles/abstracts/form.scss

@@ -49,8 +49,7 @@ $form-spacing-label-input: px(2);
     400,
     $form-field-fontsize,
     $form-field-line-height,
-    0.025em,
-    80%
+    0.025em
   );
 }
 
@@ -64,12 +63,6 @@ $form-spacing-label-input: px(2);
     background: $color-focus;
     color: $color-ci-eggshell;
   }
-
-  // border-color: $color-ci-berry !important;
-  // box-shadow: none;
-  // box-shadow: 0 0 0 1px $color-ci-berry inset;
-  // color: var(--cl-color-text);
-  // outline: none;
 }
 
 @mixin cl-form-focus {

package/src/styles/abstracts/typography.scss

@@ -16,8 +16,8 @@
 // h3 40
 // h4 32
 // body xl: 32 700
-// body lg: 24 700
-// body md: 20 400/700
+// body lg: 24 400 -> 22 in admin
+// body md: 20 400/700 -> 18 in admin
 // body sm: 14 400/700
 // button: 18 700
 // navigation: 16 400/700
@@ -74,11 +74,28 @@ $typography-monospace-line-height: 1.375;
   }
 }
 
-@mixin typography-link($color: inherit, $color-hover: $color, $underline: 1) {
+@mixin typography-link(
+  $color: inherit,
+  $color-hover: var(--cl-color-hover),
+  $color-underline: var(--cl-color-link),
+  $color-underline-hover: $color-hover
+) {
   color: $color;
   display: inline;
+  text-decoration: underline $color-underline;
+
+  &:hover {
+    color: $color-hover;
+    cursor: pointer;
+    text-decoration: underline $color-underline-hover;
+  }
+}
 
-  @if $underline <= 0 {
+@mixin typography-link-legacy($color: inherit, $color-hover: $color, $underline: 1) {
+  color: $color;
+  display: inline;
+
+  @if $underline == transprarent {
     text-decoration: none;
   }
 
@@ -89,8 +106,10 @@ $typography-monospace-line-height: 1.375;
 }
 
 @mixin typography-link-invisible {
-  @include typography-link(inherit, inherit, 0);
+  @include typography-link(var(--cl-color-text), $color-ci-red, transparent, $color-ci-red);
   @include cl-color-focus-outline(var(--cl-color-focus), 2px);
+
+  border-radius: $brand-border-radius-minor;
 }
 
 @mixin cl-btn-a($line-height-px) {
@@ -112,7 +131,6 @@ $typography-monospace-line-height: 1.375;
   outline-offset: -2px;
   padding: 0;
   text-align: inherit;
-  text-decoration: underline;
   vertical-align: inherit;
 
   &:focus-visible {
@@ -131,25 +149,13 @@ $typography-monospace-line-height: 1.375;
 }
 
 %cl-a {
-  @include typography-link(var(--cl-color-link), $color-ci-red);
+  @include typography-link;
   @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 }
 
-%cl-a-text {
-  @include typography-link(var(--cl-color-text), $color-ci-ash);
-}
-
-%cl-a-transparent {
-  @include typography-link(var(--cl-color-text), $color-ci-ash);
-}
-
-%cl-a-none {
-  @include typography-link(var(--cl-color-text), $color-ci-ash);
-}
-
 %cl-a-btn {
   // a link that is more an embedded button
-  @extend %cl-a-text;
+  @include typography-link;
 
   background-color: transparent;
   border: 0;
@@ -177,7 +183,7 @@ $typography-responsive-scale: 0.8;
     px(32),
     px(32 * $typography-sans-line-height),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -199,7 +205,7 @@ $typography-responsive-scale: 0.8;
         px(32 * $typography-responsive-scale),
         px(32 * $typography-responsive-scale * $typography-sans-line-height),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -207,14 +213,16 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-p-large {
-  // body lg: 24 700
+  // body lg: 21 400
+  $font-size: 22;
+
   @include typography-font(
     $typography-sans-font-list,
     400,
-    px(24),
-    px(24 * $typography-sans-line-height),
+    px($font-size),
+    px(30),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -233,10 +241,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         400,
-        px(24 * $typography-responsive-scale),
-        px(24 * $typography-responsive-scale * $typography-sans-line-height),
+        px($font-size * $typography-responsive-scale),
+        px(30 * $typography-responsive-scale),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -244,14 +252,16 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-p-medium {
-  // body md: 20 400/700
+  // body md: 18 400/700
+  $font-size: 17;
+
   @include typography-font(
     $typography-sans-font-list,
     400,
-    px(20),
-    px(20 * $typography-sans-line-height),
-    0.01em,
-    100,
+    px($font-size),
+    px(25),
+    0,
+    100%,
     -0.1em
   );
 
@@ -270,10 +280,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         400,
-        px(20 * $typography-responsive-scale),
-        px(20 * $typography-responsive-scale * $typography-sans-line-height),
-        0.01em,
-        100,
+        px($font-size * $typography-responsive-scale),
+        px(25 * $typography-responsive-scale),
+        0,
+        100%,
         -0.1em
       );
     }
@@ -289,7 +299,7 @@ $typography-responsive-scale: 0.8;
     px(14),
     px(14 * $typography-sans-line-height),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -311,7 +321,7 @@ $typography-responsive-scale: 0.8;
         px(14 * $typography-responsive-scale),
         px(14 * $typography-responsive-scale * $typography-sans-line-height),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -319,13 +329,16 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-h0 {
+  // for use in blogs/WP
+  $font-size: 100;
+
   @include typography-font(
     $typography-sans-font-list,
     700,
-    px(100),
-    px(100 * $typography-sans-line-height),
+    px($font-size),
+    px($font-size * $typography-sans-line-height),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -335,10 +348,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         700,
-        px(100 * $typography-responsive-scale),
-        px(100 * $typography-responsive-scale * $typography-sans-line-height),
+        px($font-size * $typography-responsive-scale),
+        px($font-size * $typography-responsive-scale * $typography-sans-line-height),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -346,13 +359,15 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-h1 {
+  $font-size: 36;
+
   @include typography-font(
     $typography-sans-font-list,
     700,
-    px(48),
-    px(48 * 1.1),
+    px($font-size),
+    px($font-size * 1.1),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -362,10 +377,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         700,
-        px(48 * $typography-responsive-scale),
-        px(48 * $typography-responsive-scale * 1.1),
+        px($font-size * $typography-responsive-scale),
+        px($font-size * $typography-responsive-scale * 1.1),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -373,13 +388,15 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-h2 {
+  $font-size: 30;
+
   @include typography-font(
     $typography-sans-font-list,
     700,
-    px(40),
-    px(40 * 1.1),
+    px($font-size),
+    px($font-size * 1.1),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -389,10 +406,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         700,
-        px(40 * $typography-responsive-scale),
-        px(40 * $typography-responsive-scale * 1.1),
+        px($font-size * $typography-responsive-scale),
+        px($font-size * $typography-responsive-scale * 1.1),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -400,13 +417,15 @@ $typography-responsive-scale: 0.8;
 }
 
 %cl-h3 {
+  $font-size: 24;
+
   @include typography-font(
     $typography-sans-font-list,
     700,
-    px(32),
-    px(32 * 1.1),
+    px($font-size),
+    px($font-size * 1.1),
     0.01em,
-    100,
+    100%,
     -0.1em
   );
 
@@ -416,10 +435,10 @@ $typography-responsive-scale: 0.8;
       @include typography-font(
         $typography-sans-font-list,
         700,
-        px(32 * $typography-responsive-scale),
-        px(32 * $typography-responsive-scale * 1.1),
+        px($font-size * $typography-responsive-scale),
+        px($font-size * $typography-responsive-scale * 1.1),
         0.01em,
-        100,
+        100%,
         -0.1em
       );
     }
@@ -462,7 +481,7 @@ $typography-responsive-scale: 0.8;
   border: $brand-line-width solid var(--cl-color-text);
   border-radius: $brand-border-radius;
   clip-path: inset(0 round 20px);
-  font-size: px(16);
+  font-size: px(15);
   line-height: 1.4;
   margin-top: $spacing-small;
   padding: $spacing-small;

package/src/styles/layout/color.scss

@@ -125,17 +125,22 @@
   #{'--cl-color-text'}: $color-ci-brick;
 }
 
+.cl-color-text-honey {
+  #{'--cl-color-text'}: $color-ci-honey;
+}
+
+.cl-color-text-leaf {
+  #{'--cl-color-text'}: $color-ci-leaf;
+}
+
 .cl-color-text-sea {
   #{'--cl-color-text'}: $color-ci-sea;
 }
 
+.cl-color-text-orchid {
+  #{'--cl-color-text'}: $color-ci-orchid;
+}
+
 .cl-color-text-steel {
   #{'--cl-color-text'}: $color-ci-steel;
 }
-
-// --- admin/secondary colors -------------------------------------------
-
-//
-// .cl-color-haze {
-//   @extend %cl-color-haze;
-// }

package/src/styles/layout/typography.scss

@@ -239,7 +239,7 @@ hr {
   @include spacing-before-auto($typography-hr-spacing);
 
   border: 0;
-  border-bottom: $brand-line-width solid var(--cl-color-text);
+  border-bottom: $brand-line-width solid var(--cl-color-line);
   margin-bottom: $typography-hr-spacing;
   opacity: 1;