@castlabs/ui 7.2.0 → 7.3.0

package/package.json

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

package/src/components/ClAlert/style.scss

@@ -19,7 +19,7 @@
   &::after {
     @include cl-fontawesome('\f05a');
 
-    color: $color-ci-clay;
+    color: $color-ci-steel;
     left: -$alert-indent;
     position: absolute;
     text-align: center;
@@ -34,15 +34,17 @@
   }
 
   &.cl-alert-danger {
+    color: $color-error;
+
     &::after {
-      color: $color-attention;
+      color: $color-error;
       content: '\f057';
     }
   }
 
   &.cl-alert-warning {
     &::after {
-      color: $color-ci-petrol;
+      color: $color-ci-honey;
       content: '\f06a';
     }
   }
@@ -61,6 +63,7 @@
 
   &.cl-alert-check {
     &::after {
+      color: $color-ci-leaf;
       content: '\f058';
     }
   }
@@ -85,7 +88,7 @@
       &::after {
         @include cl-fontawesome($icon);
 
-        color: $color-ci-clay;
+        color: $color-ci-steel;
         left: -$alert-indent;
         position: absolute;
         text-align: left;

package/src/components/ClBadge/style.variables.scss

@@ -1,7 +1,7 @@
 @use '../../styles/global' as *;
 
-$badge-color-fg: $color-ci-white;
-$badge-color-bg: $color-dark;
+// $badge-color-fg: $color-ci-white;
+// $badge-color-bg: $color-dark;
 $badge-padding: px(4) px(8);
 $badge-min-height: 1.642857143em; // 23px @ 14pt
 
@@ -12,6 +12,7 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
 }
 
 %cl-badge {
+  @include cl-colors-secondary;
   @extend %cl-p-tag;
 
   background-color: var(--cl-color-background);
@@ -26,10 +27,11 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
   white-space: nowrap;
 
   &:not([class*='cl-color-']) {
-    #{'--cl-color-background'}: $color-ci-clay;
-    #{'--cl-color-border'}: $color-ci-clay;
-    #{'--cl-color-text'}: $color-ci-night;
-    #{'--cl-color-accent'}: $color-ci-night;
+    // default color
+    #{'--cl-color-background'}: $color-ci-steel;
+    #{'--cl-color-border'}: $color-ci-steel;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-accent'}: $color-ci-eggshell;
   }
 
   &.cl-badge-sm {

package/src/components/ClBlockquote/style.variables.scss

@@ -10,6 +10,6 @@
 %cl-blockquote {
   @include cl-accent;
 
-  border-left: $bar-ui-width solid var(--cl-color-accent);
-  padding-left: calc($spacing-indent - $bar-ui-width);
+  border-left: $brand-bar-width solid var(--cl-color-accent);
+  padding-left: calc($spacing-indent - $brand-bar-width);
 }

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;
@@ -43,6 +43,10 @@
     overflow: hidden;
     padding: px(7) $spacing-medium;
   }
+
+  &.cl-color-sea {
+    @extend %cl-color-sea;
+  }
 }
 
 .cl-btn-quickaction {
@@ -60,7 +64,7 @@
   padding: 0;
 
   &:not(:hover) {
-    opacity: 0.25;
+    color: $color-ci-steel;
   }
 }
 

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

@@ -10,7 +10,13 @@
 
   [invalid],
   .invalid {
-    border-color: $color-attention !important;
+    border-color: $color-error !important;
+    color: $color-error;
+
+    &::selection {
+      background: $color-error;
+      color: $color-ci-eggshell;
+    }
 
     + * + .invalid-feedback,
     + .invalid-feedback {
@@ -33,6 +39,7 @@
   textarea[disabled],
   input[disabled],
   select[disabled] {
+    background-color: $color-ci-haze;
     color: $color-disabled;
     cursor: not-allowed;
   }

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 *;
 
@@ -34,15 +35,15 @@ $form-check-background: $color-ci-eggshell;
       margin-top: 0.2em;
 
       &:checked {
-        background-color: $color-selected;
-        background-image: url('#{$cl-folder-prefix}/assets/bs/checked.svg?no-inline');
+        background-color: $color-ci-night;
+        background-image: url('#{$cl-url-prefix}checked.svg#{$cl-url-postfix}');
         border: 0;
       }
 
       &:indeterminate {
-        background-color: $color-selected;
+        background-color: $color-ci-night;
         background-image: none;
-        border-color: $color-selected;
+        border-color: $color-ci-night;
         box-shadow: 0 0 0 px(2) $form-check-background inset !important;
 
         &:disabled,
@@ -59,9 +60,9 @@ $form-check-background: $color-ci-eggshell;
       margin-top: 0.2em;
 
       &:checked {
-        background-color: $color-selected;
+        background-color: $color-ci-night;
         background-image: none; // remove BS dot
-        border-color: $color-selected;
+        border-color: $color-ci-night;
 
         &.disabled,
         &:disabled {
@@ -71,7 +72,7 @@ $form-check-background: $color-ci-eggshell;
     }
 
     &:focus-visible {
-      @include cl-color-focus-outline($color-selected, 2px);
+      @include cl-color-focus-outline($color-ci-night, 2px);
     }
 
     &.disabled,

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

@@ -39,8 +39,8 @@
 
     &[invalid] + .cl-file-companion,
     &.invalid + .cl-file-companion {
-      border-color: $color-attention;
-      color: $color-attention;
+      border-color: $color-error;
+      color: $color-error;
 
       + * + .invalid-feedback,
       + .invalid-feedback {

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

@@ -45,7 +45,7 @@
           }
 
           &.invalid {
-            box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
+            box-shadow: -$brand-line-width 0 0 $color-error !important; // sass-lint:disable-line no-important
           }
         }
       }

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/components/form/ClForm/style.scss

@@ -59,7 +59,7 @@
     margin-top: $spacing-micro;
 
     &::before {
-      color: $color-ci-clay;
+      color: $color-ci-steel;
       content: '\f05a';
       display: inline-block;
       font-family: 'Font Awesome 5 Free';
@@ -70,11 +70,11 @@
   }
 
   .invalid-feedback {
-    // color: $color-attention;
+    color: $color-error;
     display: none;
 
     &::before {
-      color: $color-attention;
+      color: $color-error; // fontawesome
       content: '\f057';
     }
   }

package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss

@@ -8,9 +8,6 @@
 @use 'sass:color';
 @use '../../../../styles/global' as *;
 
-$sidenav-background: $color-ci-eggshell;
-$sidenav-color-text: $color-ci-night;
-$sidenav-color-background: $color-ci-eggshell;
 $sidenav-color-separator: rgba(#fff, 0.25);
 
 $sidenav-color-account: $color-ci-night;
@@ -39,8 +36,10 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   // --- drawer ----------------------------------------------------------------
 
   .cl-nav-drawer {
-    background-color: $sidenav-color-background;
-    color: $sidenav-color-text;
+    #{'--cl-color-background'}: $color-ci-eggshell;
+    #{'--cl-color-text'}: $color-ci-night;
+    background-color: var(--cl-color-background);
+    color: var(--cl-color-text);
   }
 
   // --- meta/common -----------------------------------------------------------
@@ -245,7 +244,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
           position: absolute;
           right: 0;
           top: 0;
-          width: $bar-ui-width;
+          width: $brand-bar-width;
         }
       }
 
@@ -277,7 +276,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     // ------------------------------------------------------------
     @extend %cl-p-nav;
 
-    @include typography-link($sidenav-color-text, $sidenav-color-text, 0);
+    @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
     @include cl-color-focus-outline;
 
     display: inline-block;
@@ -314,7 +313,6 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     &.active {
       @include typography-link($color-ci-red, $color-ci-red, 0);
 
-      // color: $color-ci-red;
       display: inline-block;
       padding: $spacing-tiny $spacing-small;
       position: relative;
@@ -328,7 +326,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
         position: absolute;
         right: 0;
         top: 0;
-        width: $bar-ui-width;
+        width: $brand-bar-width;
       }
     }
 

package/src/components/navigation/ClNavTop/style.scss

@@ -166,7 +166,7 @@ $sidenav-z-index: $layer-z-sidenav;
       position: absolute;
       right: 0;
       top: 0;
-      width: $bar-ui-width;
+      width: $brand-bar-width;
     }
   }
 }

package/src/components/section/ClSectionForm/style.scss

@@ -1,8 +1,7 @@
 @use '../../../styles/global' as *;
 
 .cl-section-form {
-  border-bottom: $brand-line-width solid $color-ci-clay;
-  border-top: $brand-line-width solid $color-ci-clay;
+  background-color: $color-ci-haze;
   padding-top: $spacing-tiny;
 
   &,

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

@@ -69,7 +69,7 @@ a.cl-a-none:not(.btn) {
   text-decoration: none;
 
   &:not(:hover) {
-    color: $color-ci-clay;
+    color: $color-ci-steel;
   }
 }
 

package/src/styles/abstracts/app.scss

@@ -9,7 +9,8 @@
 @use './tools' as *;
 
 $brand-border-radius: px(20);
-$brand-line-width: px(1);
+$brand-line-width: 1px;
+$brand-bar-width: px(4);
 
 $grid-spacing: $spacing-small;