@castlabs/ui 7.2.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/src/components/ClButton/style.scss

@@ -23,9 +23,9 @@
 
   &:disabled,
   &.disabled {
-    background-color: transparent; // sass-lint:disable-line no-important
-    border-color: $color-disabled; // sass-lint:disable-line no-important
-    color: $color-disabled; // sass-lint:disable-line no-important
+    background-color: var(--cl-color-disabled-background);
+    border-color: var(--cl-color-disabled-border);
+    color: var(--cl-color-disabled-text);
     cursor: not-allowed;
     opacity: 1 !important; // sass-lint:disable-line no-important
     pointer-events: initial;

package/src/components/form/ClFieldCheck/style.scss

@@ -5,7 +5,8 @@
 
 // This file defines castlabs' checkboxes and radio buttons
 
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 @use '../../../styles/global' as *;
 
@@ -35,7 +36,7 @@ $form-check-background: $color-ci-eggshell;
 
       &:checked {
         background-color: $color-selected;
-        background-image: url('#{$cl-folder-prefix}/assets/bs/checked.svg?no-inline');
+        background-image: url('#{$cl-url-prefix}checked.svg#{$cl-url-postfix}');
         border: 0;
       }
 

package/src/components/form/ClFieldSelect/style.scss

@@ -5,7 +5,8 @@
 
 // This file defines castlabs <select> boxes.
 
-$cl-folder-prefix: '@' !default;
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
 
 @use '../../../styles/global' as *;
 
@@ -22,8 +23,7 @@ $cl-folder-prefix: '@' !default;
 
     @include cl-form-focus;
 
-    background-image:
-      url('#{$cl-folder-prefix}/assets/bs/select.svg?no-inline'), none, none;
+    background-image: url('#{$cl-url-prefix}select.svg#{$cl-url-postfix}'), none, none;
     display: block;
 
     &.cl-field-sans {
@@ -36,8 +36,7 @@ $cl-folder-prefix: '@' !default;
 
     &:disabled,
     &.disabled {
-      background-image:
-        url('#{$cl-folder-prefix}/assets/bs/select-disabled.svg?no-inline'), none, none;
+      background-image: url('#{$cl-url-prefix}select-disabled.svg#{$cl-url-postfix}'), none, none;
     }
   }
 

package/src/styles/abstracts/color.scss

@@ -144,6 +144,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-hover'}: $color-ci-red;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-disabled-background'}: $color-ci-clay;
+  #{'--cl-color-disabled-border'}: $color-ci-clay;
+  #{'--cl-color-disabled-text'}: $color-ci-eggshell;
 }
 
 %cl-color-night-outline {
@@ -156,6 +159,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
   #{'--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-red {
@@ -177,6 +183,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
   #{'--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-sky {

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');
+  }
+}