@castlabs/ui 7.7.0 → 7.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.7.0",
+  "version": "7.9.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-steel;
+    color: var(--cl-color-icon);
     left: -$alert-indent;
     position: absolute;
     text-align: center;
@@ -88,7 +88,7 @@
       &::after {
         @include cl-fontawesome($icon);
 
-        color: $color-ci-steel;
+        color: var(--cl-color-icon);
         left: -$alert-indent;
         position: absolute;
         text-align: left;

package/src/components/ClCard/style.scss

@@ -10,6 +10,7 @@
 
 .card {
   @extend %cl-card;
+  @include cl-colors-admin;
 
   &[class^='col-'] {
     padding: 0;

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

@@ -27,6 +27,15 @@
     + .valid-feedback {
       display: none;
     }
+
+    .cl-color-brick & {
+      border-color: $color-ci-eggshell !important;
+
+      &::selection {
+        background: $color-ci-eggshell;
+        color: $color-error;
+      }
+    }
   }
 
   // --- disabled fields -------------------------------------------------------

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

@@ -54,8 +54,8 @@
     }
 
     &::placeholder {
-      color: $color-ci-clay;
-      opacity: 1;
+      color: var(--cl-color-text); // , .5); // $color-ci-clay;
+      opacity: 0.5;
       overflow: visible;
     }
   }

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

@@ -59,7 +59,7 @@
     margin-top: $spacing-micro;
 
     &::before {
-      color: $color-ci-steel;
+      color: var(--cl-color-icon);
       content: '\f05a';
       display: inline-block;
       font-family: 'Font Awesome 5 Free';
@@ -77,6 +77,21 @@
       color: $color-error; // fontawesome
       content: '\f057';
     }
+
+    .cl-color-petrol &,
+    .cl-color-red &,
+    .cl-color-berry & {
+      color: $color-ci-eggshell;
+    }
+
+    .cl-color-brick &,
+    .cl-color-orchid & {
+      color: $color-ci-eggshell;
+
+      &::before {
+        color: $color-ci-eggshell; // fontawesome
+      }
+    }
   }
 
   .valid-feedback.valid-feedback-none {

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

@@ -13,12 +13,18 @@ $sidenav-z-index: $layer-z-sidenav;
 .cl-nav-top {
   // first/top line in content area
   @extend %section-padding;
-  @extend %cl-color-night;
 
   @include spacing-before(0);
 
-  background-color: $color-ci-night;
-  color: $color-ci-eggshell;
+  @include cl-colors-ci;
+  @include cl-colors-admin;
+
+  &:not([class*='cl-color-']) {
+    @extend %cl-color-night;
+  }
+
+  background-color: var(--cl-color-background);
+  color: var(--cl-color-text);
 
   .row {
     #{'--bs-gutter-x'}: $grid-spacing;
@@ -51,7 +57,7 @@ $sidenav-z-index: $layer-z-sidenav;
   .cl-path {
     @extend %cl-p-label;
 
-    color: $color-ci-eggshell;
+    color: var(--cl-color-text);
     flex-grow: 99;
     letter-spacing: 0;
     margin: 0;

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

@@ -1,7 +1,6 @@
 @use '../../../styles/global' as *;
 
 .cl-section-form {
-  background-color: $color-ci-haze;
   padding-top: $spacing-tiny;
 
   &,

package/src/styles/abstracts/color.scss

@@ -206,52 +206,63 @@ $color-opacity-active: 0.8;
 
 %cl-color-root {
   // default colors = outline-night
-  #{'--cl-color-background'}: $color-ci-eggshell;
-  #{'--cl-color-border'}: $color-ci-night;
-  #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
-  #{'--cl-color-link'}: $color-link;
   #{'--cl-color-active'}: $color-ci-berry;
-  #{'--cl-color-hover'}: $color-hover;
-  #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-background'}: $color-ci-eggshell;
+  #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-disabled-background'}: $color-disabled;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-hover'}: $color-hover;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-ash;
+  #{'--cl-color-line'}: $color-line;
+  #{'--cl-color-icon'}: $color-ci-steel;
+  #{'--cl-color-link'}: $color-link;
+  #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-opacity-active'}: $color-opacity-active;
 }
 
 %cl-color-night-outline {
   // order is important: must be first!
+  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-night;
-  #{'--cl-color-text'}: $color-ci-night;
-  #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-accent;
-  #{'--cl-color-link'}: inherit;
-  #{'--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-focus'}: $color-ci-night;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-ash;
+  #{'--cl-color-line'}: $color-line;
+  #{'--cl-color-link'}: inherit;
+  #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-opacity-active'}: $color-opacity-active * 0.9;
 }
 
 %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-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
+  #{'--cl-color-icon'}: $color-ci-eggshell;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-eggshell;
+  #{'--cl-color-line'}: $color-ci-eggshell;
+  #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-text'}: $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-link'}: $color-ci-night;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-icon'}: $color-ci-night;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-night;
+  #{'--cl-color-line'}: $color-ci-night;
+  #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-night;
 }
 
 %cl-color-red {
@@ -263,15 +274,17 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-red-outline {
-  #{'--cl-color-border'}: $color-ci-red;
-  #{'--cl-color-text'}: $color-ci-red;
-  #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-red;
-  #{'--cl-color-link'}: inherit;
-  #{'--cl-color-focus'}: $color-ci-red;
+  #{'--cl-color-border'}: $color-ci-red;
   #{'--cl-color-disabled-background'}: transparent;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-disabled;
+  #{'--cl-color-focus'}: $color-ci-red;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-ash;
+  #{'--cl-color-line'}: $color-line;
+  #{'--cl-color-link'}: inherit;
+  #{'--cl-color-text'}: $color-ci-red;
 }
 
 %cl-color-sky {
@@ -279,6 +292,7 @@ $color-opacity-active: 0.8;
 
   #{'--cl-color-background'}: $color-ci-sky;
   #{'--cl-color-border'}: $color-ci-sky;
+  #{'--cl-color-input-background'}: $color-ci-eggshell;
 }
 
 %cl-color-night {
@@ -289,19 +303,22 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-eggshell {
+  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-eggshell;
-  #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-ash;
   #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-link'}: inherit;
-  #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-text'}: $color-ci-night;
 }
 
 %cl-color-haze {
   @extend %cl-color-night-outline;
 
   #{'--cl-color-background'}: $color-ci-haze;
+  #{'--cl-color-input-background'}: $color-ci-eggshell;
 }
 
 %cl-color-clay {
@@ -309,6 +326,7 @@ $color-opacity-active: 0.8;
 
   #{'--cl-color-background'}: $color-ci-clay;
   #{'--cl-color-border'}: $color-ci-clay;
+  #{'--cl-color-input-background'}: $color-ci-eggshell;
 }
 
 %cl-color-ash {
@@ -375,44 +393,50 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-transparent {
+  #{'--cl-color-accent'}: var(--cl-color-text);
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: var(--cl-color-text);
   #{'--cl-color-disabled-background'}: transparent;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-disabled;
-  #{'--cl-opacity-active'}: $color-opacity-active * 0.9;
+  #{'--cl-color-focus'}: var(--cl-color-text);
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: var(--cl-color-text);
   #{'--cl-color-line'}: var(--cl-color-text);
-  #{'--cl-color-accent'}: var(--cl-color-text);
   #{'--cl-color-link'}: var(--cl-color-text);
-  #{'--cl-color-focus'}: var(--cl-color-text);
+  #{'--cl-opacity-active'}: $color-opacity-active * 0.9;
 }
 
 %cl-color-disabled {
+  #{'--cl-color-accent'}: $color-disabled;
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: $color-disabled;
-  #{'--cl-color-text'}: $color-disabled;
+  #{'--cl-color-focus'}: $color-ci-eggshell;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-disabled;
   #{'--cl-color-line'}: $color-disabled;
-  #{'--cl-color-accent'}: $color-disabled;
   #{'--cl-color-link'}: inherit;
-  #{'--cl-color-focus'}: $color-ci-eggshell;
+  #{'--cl-color-text'}: $color-disabled;
 }
 
 %cl-color-faded {
+  #{'--cl-color-accent'}: $color-ci-ash;
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: $color-ci-ash;
-  #{'--cl-color-text'}: $color-ci-ash;
+  #{'--cl-color-focus'}: $color-ci-ash;
+  #{'--cl-color-input-background'}: transparent;
+  #{'--cl-color-input-border'}: $color-ci-ash;
   #{'--cl-color-line'}: $color-line;
-  #{'--cl-color-accent'}: $color-ci-ash;
   #{'--cl-color-link'}: inherit;
-  #{'--cl-color-focus'}: $color-ci-ash;
+  #{'--cl-color-text'}: $color-ci-ash;
 }
 
 %cl-color-none {
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: transparent;
-  #{'--cl-color-link'}: $color-ci-eggshell;
-  #{'--cl-color-focus'}: $color-ci-eggshell;
   #{'--cl-color-disabled-background'}: transparent;
   #{'--cl-color-disabled-border'}: transparent;
   #{'--cl-color-disabled-text'}: $color-disabled;
+  #{'--cl-color-focus'}: $color-ci-eggshell;
+  #{'--cl-color-link'}: $color-ci-eggshell;
 }

package/src/styles/abstracts/form.scss

@@ -14,22 +14,21 @@
 $form-field-fontsize: px(16);
 $form-field-line-height: 1.375;
 $form-field-min-height: px(36);
-$form-field-border-color: $color-ci-ash;
-$form-field-border: $brand-line-width solid $form-field-border-color;
+$form-field-border: $brand-line-width solid var(--cl-color-input-border);
 $form-spacing-label-input: px(2);
 
 %form-field-box {
-  background-color: $color-ci-white;
+  background-color: var(--cl-color-input-background);
   border: $form-field-border;
   border-radius: $brand-border-radius;
-  color: $color-text;
+  color: var(--cl-color-text);
   min-height: $form-field-min-height;
   padding: $spacing-micro - 0.0625rem $spacing-tiny + $spacing-micro; // remove .0625rem=1px border each
   width: 100%;
 
   &:disabled,
   &.disabled {
-    background-color: $color-ci-haze;
+    background-color: var(--cl-color-input-background);
     border-color: $color-disabled;
   }
 }

package/src/styles/assets/logo.scss

@@ -43,3 +43,19 @@ a:hover {
     background-image: none;
   }
 }
+
+.cl-nav-top {
+  // pick proper night/eggshell version based on nav background
+  [class*='cl-asset-logo'] {
+    background-image: url('#{$cl-url-prefix}castlabs-logo-eggshell.svg#{$cl-url-postfix}');
+  }
+
+  &.cl-color-eggshell,
+  &.cl-color-haze,
+  &.cl-color-clay,
+  &.cl-color-sky {
+    [class*='cl-asset-logo'] {
+      background-image: url('#{$cl-url-prefix}castlabs-logo.svg#{$cl-url-postfix}');
+    }
+  }
+}

package/src/styles/layout/meta.scss

@@ -0,0 +1,3 @@
+:root {
+  #{'--cl-version'}: 'v7.9.0';
+}

package/src/styles/ui.scss

@@ -17,6 +17,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use 'layout/color';
 @use 'layout/grid';
 @use 'layout/helper';
+@use 'layout/meta';
 @use 'layout/scrollbar';
 @use 'layout/section';
 @use 'layout/spacing';

package/types/index.d.ts

@@ -17,6 +17,7 @@ export const ClInfo: DefineComponent
 export const ClMockRouterLink: DefineComponent
 export const ClModal: DefineComponent
 export const ClModalConfirm: DefineComponent
+export const ClModalForm: DefineComponent
 export const ClModalOk: DefineComponent
 export const ClNavSide: DefineComponent
 export const ClNavTop: DefineComponent
@@ -163,3 +164,26 @@ export const NAV: {
   WM: ClService
   VTK: ClService
 }
+
+// --- utils/const ----------------------------------------------------------------
+
+export const CONST: {
+  COLOR: {
+    ASH: string,
+    BERRY: string,
+    BRICK: string,
+    CLAY: string,
+    EGGSHELL: string,
+    HAZE: string,
+    HONEY: string,
+    LEAF: string,
+    NIGHT: string,
+    ORCHID: string,
+    PETROL: string,
+    RED: string,
+    SAND: string,
+    SEA: string,
+    SKY: string,
+    STEEL: string
+  }
+}