@castlabs/ui 7.2.1 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.2.1",
+  "version": "7.4.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;
@@ -108,6 +111,7 @@
 
       background-color: transparent;
       border: 0;
+      border-radius: $brand-border-radius-minor;
       display: inline-block;
       font-weight: 500;
       line-height: 1;

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

@@ -43,16 +43,23 @@
     overflow: hidden;
     padding: px(7) $spacing-medium;
   }
+
+  &.cl-color-sea {
+    @extend %cl-color-sea;
+  }
+}
+
+a.btn {
+  text-decoration: none !important;
 }
 
 .cl-btn-quickaction {
   @extend %cl-a-btn;
 
-  @include typography-link($color-text, $color-ci-red, 0);
-  @include cl-color-focus-outline(var(--cl-color-focus), 2px);
+  @include typography-link-invisible;
 
+  background-color: transparent;
   border: 0;
-  border-radius: 0;
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;
@@ -60,7 +67,7 @@
   padding: 0;
 
   &:not(:hover) {
-    opacity: 0.25;
+    color: $color-ci-steel;
   }
 }
 

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

@@ -53,7 +53,7 @@ $card-spacing-tight: $spacing-small;
   }
 
   a:not(.btn) {
-    @include typography-link(var(--cl-color-link), var(--cl-color-hover));
+    @include typography-link;
 
     display: inline-block;
   }

package/src/components/ClDropdown/style.scss

@@ -94,7 +94,6 @@ $dropdown-line-height: 1.25;
     letter-spacing: 0;
     line-height: 1.4;
     margin-top: 0;
-    opacity: $color-hover-opacity;
   }
 
   &-tiny {
@@ -166,7 +165,7 @@ div.cl-dropdown summary {
 .cl-dropdown-item {
   @extend %cl-p-nav;
 
-  @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+  @include typography-link(var(--cl-color-text), var(--cl-color-text), transparent, transparent);
   @include cl-color-focus-outline;
 
   display: block;
@@ -186,7 +185,6 @@ div.cl-dropdown summary {
     font-weight: 500;
     letter-spacing: 0;
     margin-top: 0;
-    opacity: $color-hover-opacity;
   }
 
   > span,

package/src/components/ClFooter/style.scss

@@ -14,8 +14,7 @@
   padding-top: $spacing-small;
 
   a {
-    @include typography-link(var(--cl-color-text), $color-ci-red, 0);
-    @include cl-color-focus-outline(var(--cl-color-focus), 2px);
+    @include typography-link-invisible;
 
     &:hover {
       text-decoration: underline;

package/src/components/ClIconotron/style.scss

@@ -78,6 +78,6 @@
   }
 
   a {
-    @include typography-link($color-text, rgba($color-text, $color-hover-opacity));
+    @include typography-link;
   }
 }

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

@@ -35,15 +35,15 @@ $form-check-background: $color-ci-eggshell;
       margin-top: 0.2em;
 
       &:checked {
-        background-color: $color-selected;
+        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,
@@ -60,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 {
@@ -72,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

@@ -20,6 +20,7 @@
       margin: 0;
       overflow: hidden;
       padding: 0;
+      position: absolute;
       width: 0;
     }
 
@@ -39,8 +40,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 {
@@ -62,11 +63,12 @@
   .cl-file-companion {
     @extend %spacing-micro;
     @extend %form-field-box;
-    @extend %form-field-typography-sans;
+    @extend %form-field-typography-monospace;
 
     @include cl-form-focus;
 
     letter-spacing: 0;
+    line-height: 1.6;
     text-transform: none;
   }
 }

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
           }
         }
       }
@@ -60,7 +60,7 @@
       @extend %form-field-box;
       @extend %form-field-typography-monospace;
 
-      background-color: $color-ci-clay;
+      background-color: $color-ci-haze;
       height: 100%;
       line-height: inherit;
       white-space: nowrap;

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/modal/ClModal/style.scss

@@ -23,7 +23,7 @@
   z-index: $layer-z-modal;
 
   a {
-    @include typography-link(var(--cl-color-link), $color-ci-ash);
+    @include typography-link;
 
     display: inline-block;
   }
@@ -113,7 +113,7 @@
 
     .modal-help,
     .cl-modal-help {
-      @include typography-link(var(--cl-color-text), $color-ci-ash);
+      @include typography-link-invisible;
 
       display: inline-block;
       line-height: 1;

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 -----------------------------------------------------------
@@ -85,7 +84,12 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     padding: 0 $spacing-small;
 
     a {
-      @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+      @include typography-link(
+        var(--cl-color-text),
+        var(--cl-color-text),
+        transparent,
+        transparent
+      );
       @include cl-color-focus-outline(var(--cl-color-focus), 0);
 
       line-height: 1;
@@ -245,7 +249,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;
         }
       }
 
@@ -266,7 +270,10 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     @extend %cl-p-label;
 
     color: var(--cl-color-accent);
+    font-family: $typography-monospace-font-list;
+    letter-spacing: 0.05em;
     margin: $spacing-medium $spacing-small $spacing-tiny;
+    text-transform: uppercase;
 
     hr + & {
       margin-top: $spacing-tiny;
@@ -277,7 +284,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), transparent, transparent);
     @include cl-color-focus-outline;
 
     display: inline-block;
@@ -312,9 +319,8 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     }
 
     &.active {
-      @include typography-link($color-ci-red, $color-ci-red, 0);
+      @include typography-link($color-ci-red, $color-ci-red, transparent, transparent);
 
-      // color: $color-ci-red;
       display: inline-block;
       padding: $spacing-tiny $spacing-small;
       position: relative;
@@ -328,7 +334,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

@@ -72,6 +72,7 @@ $sidenav-z-index: $layer-z-sidenav;
   .cl-logo {
     align-items: center;
     display: flex;
+    font-size: $header-nav-height * 0.5; // logo scales 2x
 
     span {
       @extend %cl-p-label;
@@ -166,7 +167,7 @@ $sidenav-z-index: $layer-z-sidenav;
       position: absolute;
       right: 0;
       top: 0;
-      width: $bar-ui-width;
+      width: $brand-bar-width;
     }
   }
 }
@@ -201,16 +202,10 @@ $navbar-item-spacing: $spacing-medium;
     line-height: 1;
     margin: 0;
     padding: 0.5em 0;
-
-    .cl-asset-logo,
-    .cl-asset-logo-eggshell {
-      height: 2.5 * 1em;
-      width: 2.5 * 2.95em;
-    }
   }
 
   .nav-link {
-    @include typography-link($color-text, $color-ci-night, 0);
+    @include typography-link(var(--cl-color-text), var(--cl-color-text), transparent, transparent);
 
     display: block;
     font-weight: 500;

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/section/ClSectionHeadline/style.scss

@@ -3,7 +3,7 @@
 .cl-section-dark .cl-headline-help-icon,
 .cl-section-primary .cl-headline-help-icon,
 .cl-section-secondary .cl-headline-help-icon {
-  @include typography-link(rgba($color-ci-white, 0.5), $color-ci-white, 0);
+  @include typography-link-invisible;
 
   font-size: 0.5em;
   line-height: 1;

package/src/components/table/ClTableCel/ID/style.scss

@@ -7,10 +7,9 @@
     @include typography-font(
       $typography-monospace-font-list,
       400,
-      px(15),
+      px(14),
       $table-lineheight * 1.066666667,
-      0.025em,
-      80%
+      0.025em
     );
 
     overflow-wrap: unset;

package/src/components/table/ClTableCel/Links/style.scss

@@ -22,9 +22,9 @@
     right: 0;
     white-space: nowrap;
 
-    a:not(.cl-a-primary) {
-      @extend %cl-a-text;
-    }
+    // a {
+    //   @extend %cl-a-text;
+    // }
 
     :not(:first-child) {
       margin-left: $spacing-tiny;

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

@@ -14,14 +14,15 @@
   &::after {
     font-size: 0.75em;
   }
+
+  &:hover,
+  &:hover::after,
+  &:hover * {
+    color: $color-hover;
+    text-decoration-color: $color-hover;
+  }
 }
 
 .cl-copy-text {
-  @extend %cl-a-text;
-
   text-decoration: underline;
 }
-
-.cl-copy-transparent {
-  @extend %cl-a-transparent;
-}

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

@@ -15,6 +15,7 @@
   &::before {
     @include cl-fontawesome('\f292');
 
+    line-height: 0.5;
     margin-right: 0.2em;
     top: 0.015em;
   }