@castlabs/ui 7.2.1 → 7.4.0

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

@@ -19,7 +19,6 @@
   @extend %cl-color-night-outline;
 }
 
-.cl-color-primary,
 .cl-color-red {
   @extend %cl-color-red;
 }
@@ -32,6 +31,10 @@
   @extend %cl-color-sky;
 }
 
+.cl-color-primary {
+  @extend %cl-color-sea;
+}
+
 .cl-color-secondary,
 .cl-color-black,
 .cl-color-text, // legacy name
@@ -117,3 +120,27 @@
 .cl-color-text-none {
   #{'--cl-color-text'}: transparent;
 }
+
+.cl-color-text-brick {
+  #{'--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;
+}

package/src/styles/layout/helper.scss

@@ -16,6 +16,19 @@
   border-radius: $brand-border-radius;
 }
 
+.cl-hidden {
+  visibility: hidden;
+}
+
+.cl-cursor-pointer,
+.cl-cursor-link {
+  cursor: pointer;
+}
+
+.cl-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cl-faded {
   opacity: 0.5;
 }

package/src/styles/layout/section.scss

@@ -71,9 +71,12 @@
 .cl-section-light,
 .cl-section-alternate {
   @extend %section-padding;
+  @extend %cl-color-eggshell-alternate;
 
-  border-bottom: $brand-line-width solid $color-ci-clay;
-  border-top: $brand-line-width solid $color-ci-clay;
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
+  // border-bottom: $brand-line-width solid $color-ci-clay;
+  // border-top: $brand-line-width solid $color-ci-clay;
 }
 
 main {

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;
 

package/src/styles/ui.scss

@@ -107,15 +107,3 @@ html {
 body {
   font-size: 20px;
 }
-
-.cl-hidden {
-  visibility: hidden;
-}
-
-.cl-cursor-link {
-  cursor: pointer;
-}
-
-.cl-cursor-not-allowed {
-  cursor: not-allowed;
-}

package/dist/assets/DMMono/index.scss

@@ -1,41 +0,0 @@
-$cl-url-prefix: '' !default;
-$cl-url-postfix: '' !default;
-
-@mixin DMMono {
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 300;
-    src: url('#{$cl-url-prefix}DM_Mono_300.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 300;
-    src: url('#{$cl-url-prefix}DM_Mono_300italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 400;
-    src: url('#{$cl-url-prefix}DM_Mono_400.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 400;
-    src: url('#{$cl-url-prefix}DM_Mono_400italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: normal;
-    font-weight: 500;
-    src: url('#{$cl-url-prefix}DM_Mono_500.woff2#{$cl-url-postfix}') format('woff2');
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    font-style: italic;
-    font-weight: 500;
-    src: url('#{$cl-url-prefix}DM_Mono_500italic.woff2#{$cl-url-postfix}') format('woff2');
-  }
-}

package/dist/assets/FontAwesome5/LICENSE.txt

@@ -1,34 +0,0 @@
-Font Awesome Free License
--------------------------
-
-Font Awesome Free is free, open source, and GPL friendly. You can use it for
-commercial projects, open source projects, or really almost whatever you want.
-Full Font Awesome Free license: https://fontawesome.com/license/free.
-
-# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
-In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
-packaged as SVG and JS file types.
-
-# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
-In the Font Awesome Free download, the SIL OFL license applies to all icons
-packaged as web and desktop font files.
-
-# Code: MIT License (https://opensource.org/licenses/MIT)
-In the Font Awesome Free download, the MIT license applies to all non-font and
-non-icon files.
-
-# Attribution
-Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
-Awesome Free files already contain embedded comments with sufficient
-attribution, so you shouldn't need to do anything additional when using these
-files normally.
-
-We've kept attribution comments terse, so we ask that you do not actively work
-to remove them from files, especially code. They're a great way for folks to
-learn about Font Awesome.
-
-# Brand Icons
-All brand icons are trademarks of their respective owners. The use of these
-trademarks does not indicate endorsement of the trademark holder by Font
-Awesome, nor vice versa. **Please do not use brand logos for any purpose except
-to represent the company, product, or service to which they refer.**