@castlabs/ui 7.2.0 → 7.3.0

package/src/styles/abstracts/color.scss

@@ -24,42 +24,51 @@ $color-ci-white: $color-ci-eggshell;
 $color-ci-sand: #fdf5cf;
 $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-primary: $color-ci-sea;
+$color-secondary: $color-ci-night;
+
 // 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;
+// $color-primary: $color-ci-red;
+// $color-secondary: $color-ci-night;
+// $color-ci-blue: $color-ci-sea;
+// $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-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-positive: $color-ci-leaf;
+$color-negative: $color-ci-brick;
 $color-neutral: $color-ci-night;
 
-$color-attention: $color-ci-sky;
-$color-disabled: $color-ci-clay;
+$color-error: $color-ci-brick; // error color
+$color-focus: $color-ci-sea;
+$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,6 +141,32 @@ $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;
@@ -140,10 +175,13 @@ $bar-ui-width: px(4);
   #{'--cl-color-line'}: $color-ci-clay;
   #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: inherit; // $color-ci-berry;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-hover'}: $color-ci-red;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-disabled-background'}: $color-disabled;
+  #{'--cl-color-disabled-border'}: $color-disabled;
+  #{'--cl-color-disabled-text'}: $color-ci-eggshell;
 }
 
 %cl-color-night-outline {
@@ -154,51 +192,65 @@ $bar-ui-width: px(4);
   #{'--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-link'}: inherit; // $color-ci-berry;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-disabled-background'}: transparent;
+  #{'--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;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-link'}: inherit;
   #{'--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'}: inherit;
+  #{'--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-accent'}: $color-ci-red;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
-  #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-link'}: inherit; // $color-ci-berry;
   #{'--cl-color-focus'}: $color-ci-red;
+  #{'--cl-color-disabled-background'}: transparent;
+  #{'--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 {
@@ -208,63 +260,96 @@ $bar-ui-width: px(4);
   #{'--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-link'}: inherit; // $color-ci-berry;
   #{'--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-ci-clay;
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
-  #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-link'}: inherit; // $color-ci-berry;
   #{'--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 {
@@ -274,7 +359,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; // $color-disabled;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
@@ -285,7 +370,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; // $color-ci-ash;
   #{'--cl-color-focus'}: $color-ci-ash;
 }
 
@@ -296,5 +381,3 @@ $bar-ui-width: px(4);
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
-
-// ----------------------------------------------

package/src/styles/abstracts/fontawesome.scss

@@ -81,7 +81,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;
   }
 }
 
@@ -54,11 +55,21 @@ $form-spacing-label-input: px(2);
 }
 
 @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;
+  }
+
+  // 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/assets/logo.scss

@@ -5,11 +5,12 @@
 
 @use '../global' as *;
 
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 .cl-asset-logo,
 .cl-asset-logo-night {
-  background-image: url('#{$cl-folder-prefix}/assets/castlabs-logo.svg?no-inline');
+  background-image: url('#{$cl-url-prefix}castlabs-logo.svg#{$cl-url-postfix}');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -22,7 +23,7 @@ $cl-folder-prefix: '@' !default;
 }
 
 .cl-asset-logo-eggshell {
-  background-image: url('#{$cl-folder-prefix}/assets/castlabs-logo-eggshell.svg?no-inline');
+  background-image: url('#{$cl-url-prefix}castlabs-logo-eggshell.svg#{$cl-url-postfix}');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

package/src/styles/fonts/DMMono/index.scss

@@ -0,0 +1,41 @@
+$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/src/{fonts/FontAwesome5/FontAwesome5.scss → styles/fonts/FontAwesome5/index.scss}

@@ -1,4 +1,5 @@
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 /*!
  * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
@@ -6087,8 +6088,7 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$cl-folder-prefix}/fonts/FontAwesome5/fa-brands-400.woff2?no-inline')
-    format('woff2');
+  src: url('#{$cl-url-prefix}fa-brands-400.woff2#{$cl-url-postfix}') format('woff2');
 }
 
 .fab {
@@ -6101,8 +6101,7 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$cl-folder-prefix}/fonts/FontAwesome5/fa-regular-400.woff2?no-inline')
-    format('woff2');
+  src: url('#{$cl-url-prefix}fa-regular-400.woff2#{$cl-url-postfix}') format('woff2');
 }
 
 .far {
@@ -6115,8 +6114,7 @@ readers do not read off random characters that represent icons */
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
-  src: url('#{$cl-folder-prefix}/fonts/FontAwesome5/fa-solid-900.woff2?no-inline')
-    format('woff2');
+  src: url('#{$cl-url-prefix}fa-solid-900.woff2#{$cl-url-postfix}') format('woff2');
 }
 
 .fa,

package/src/{fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap.scss → styles/fonts/NonNaturalGroteskInktrap/index.scss}

@@ -1,6 +1,7 @@
 // stylelint-disable at-rule-descriptor-value-no-unknown
 
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 $non-natural-ascent-override: 100%;
 $non-natural-descent-override: 40%;
@@ -12,7 +13,7 @@ $non-natural-descent-override: 40%;
     font-family: NonNaturalGroteskInktrap;
     font-style: normal;
     font-weight: 400;
-    src: url('#{$cl-folder-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Regular.woff2?no-inline')
+    src: url('#{$cl-url-prefix}NonNaturalGroteskInktrap-Regular.woff2#{$cl-url-postfix}')
       format('woff2');
   }
   @font-face {
@@ -21,7 +22,7 @@ $non-natural-descent-override: 40%;
     font-family: NonNaturalGroteskInktrap;
     font-style: normal;
     font-weight: 500;
-    src: url('#{$cl-folder-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Medium.woff2?no-inline')
+    src: url('#{$cl-url-prefix}NonNaturalGroteskInktrap-Medium.woff2#{$cl-url-postfix}')
       format('woff2');
   }
   @font-face {
@@ -30,7 +31,7 @@ $non-natural-descent-override: 40%;
     font-family: NonNaturalGroteskInktrap;
     font-style: normal;
     font-weight: 700;
-    src: url('#{$cl-folder-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Bold.woff2?no-inline')
+    src: url('#{$cl-url-prefix}NonNaturalGroteskInktrap-Bold.woff2#{$cl-url-postfix}')
       format('woff2');
   }
 }

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,22 @@
 .cl-color-text-none {
   #{'--cl-color-text'}: transparent;
 }
+
+.cl-color-text-brick {
+  #{'--cl-color-text'}: $color-ci-brick;
+}
+
+.cl-color-text-sea {
+  #{'--cl-color-text'}: $color-ci-sea;
+}
+
+.cl-color-text-steel {
+  #{'--cl-color-text'}: $color-ci-steel;
+}
+
+// --- admin/secondary colors -------------------------------------------
+
+//
+// .cl-color-haze {
+//   @extend %cl-color-haze;
+// }

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

@@ -5,16 +5,19 @@
 
 // This file defines our basic typography rules.
 
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 @use '../global' as *;
 
 // conditionally import fonts so themes can omit them
-@use '../../fonts/DMMono/DMMono' with (
-  $cl-folder-prefix: $cl-folder-prefix
+@use '../fonts/DMMono' with (
+  $cl-url-prefix: '#{$cl-url-prefix}DMMono/',
+  $cl-url-postfix: $cl-url-postfix
 );
-@use '../../fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap' with (
-  $cl-folder-prefix: $cl-folder-prefix
+@use '../fonts/NonNaturalGroteskInktrap' with (
+  $cl-url-prefix: '#{$cl-url-prefix}NonNaturalGroteskInktrap/',
+  $cl-url-postfix: $cl-url-postfix
 );
 $castlabs-ui-fonts: true !default;
 @if $castlabs-ui-fonts {