@castlabs/ui 7.8.0 → 7.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.8.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/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/layout/meta.scss

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

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