@castlabs/ui 7.17.0 → 7.18.0

package/dist/{select-disabled.c5e07724.svg → select-disabled.1065ea4c.svg}

@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#cfc8c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>

package/dist/select-disabled.dark.1065ea4c.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>

package/dist/select.dark.efd5244b.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#CFC8C8' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.17.0",
+  "version": "7.18.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,15 +42,15 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.60.0"
+    "@rollup/rollup-linux-x64-gnu": "4.60.1"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
     "@types/jsdom": "28.0.1",
-    "@types/node": "25.5.0",
+    "@types/node": "25.5.2",
     "@vitejs/plugin-vue": "6.0.5",
-    "@vitest/eslint-plugin": "1.6.13",
+    "@vitest/eslint-plugin": "1.6.14",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.7.0",
     "@vue/test-utils": "2.4.6",
@@ -65,19 +65,19 @@
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "npm-run-all": "4.1.5",
-    "sass": "1.98.0",
+    "sass": "1.99.0",
     "stylelint-config-sass-guidelines": "13.0.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "40.0.0",
     "stylelint-order": "8.1.1",
     "stylelint-scss": "7.0.0",
     "typescript": "5.9.3",
-    "vite": "8.0.3",
-    "vitest": "4.1.1",
+    "vite": "8.0.5",
+    "vitest": "4.1.2",
     "vue-tsc": "3.2.6",
-    "vue": "3.5.31"
+    "vue": "3.5.32"
   },
   "overrides": {
     "glob": "^13"

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

@@ -40,7 +40,7 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
     color: var(--cl-color-text);
   }
 
-  &:not([class*='cl-color-']) {
+  &:not([class*=' cl-color-']) {
     // default badge color
     #{'--cl-color-background'}: $color-ci-steel;
     #{'--cl-color-border'}: $color-ci-steel;

package/src/components/ClButton/style.scss

@@ -47,6 +47,24 @@
   &.cl-color-sea {
     @extend %cl-color-sea;
   }
+
+  &.cl-color-primary {
+    background-color: $color-ci-sea;
+    border-color: $color-ci-sea;
+    color: $color-ci-eggshell;
+  }
+
+  &.cl-color-secondary {
+    background-color: var(--cl-color-text);
+    border-color: var(--cl-color-text);
+    color: var(--cl-color-text-inverted);
+  }
+
+  &.cl-color-tertiary {
+    background-color: transparent;
+    border-color: var(--cl-color-text);
+    color: var(--cl-color-text);
+  }
 }
 
 a.btn {

package/src/components/ClDropdown/style.scss

@@ -78,7 +78,7 @@ $dropdown-line-height: 1.25;
     padding-bottom: $spacing-tiny;
 
     summary {
-      border-bottom: $brand-line-width solid $color-ci-white;
+      border-bottom: $brand-line-width solid $color-ci-eggshell;
       margin-bottom: $spacing-tiny;
 
       &::after {

package/src/components/ClDropzone/style.scss

@@ -8,7 +8,7 @@
   text-align: center;
 
   i {
-    color: $color-ci-berry;
+    color: $color-ci-steel;
     margin-right: $spacing-tiny;
   }
 

package/src/components/ClHighlight/style.scss

@@ -7,10 +7,8 @@
 
 @use '../../styles/global' as *;
 
-$highlight-background: $color-ci-sand;
-
 .cl-highlight {
-  background-color: $highlight-background;
+  background-color: var(--cl-color-highlight);
 }
 
 .card-body,
@@ -18,6 +16,6 @@ $highlight-background: $color-ci-sand;
 td,
 tr {
   &.cl-highlight {
-    background-color: $highlight-background !important; // sass-lint:disable-line no-important
+    background-color: var(--cl-color-highlight) !important; // sass-lint:disable-line no-important
   }
 }

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

@@ -65,6 +65,11 @@
     content: '\f00d';
   }
 
+  &.cl-list-moon li::before,
+  li.cl-list-moon::before {
+    content: '\f186';
+  }
+
   &.cl-list-plus li::before,
   li.cl-list-plus::before {
     content: '\f067';

package/src/components/ClPagination/style.scss

@@ -11,7 +11,6 @@
 
 .pagination {
   @extend %cl-p-nav;
-  @extend %cl-color-night-outline;
 
   font-family: $typography-monospace-font-list;
   justify-content: center;
@@ -26,7 +25,7 @@
 
   .page-link {
     @include cl-button;
-    @include cl-button-color;
+    @include cl-button-color(false);
     @include cl-button-focus-outline;
 
     border-radius: $brand-border-radius !important; // overrule BS
@@ -54,7 +53,7 @@
 
     &.disabled {
       @include cl-button;
-      @include cl-button-color;
+      @include cl-button-color(false);
       @extend %cl-color-disabled;
 
       border-radius: $brand-border-radius !important; // overrule BS

package/src/components/ClToggle/style.scss

@@ -21,7 +21,7 @@
     padding-right: 0.75em;
     text-transform: none;
 
-    &:not([class*='cl-color-']) {
+    &:not([class*=' cl-color-']) {
       @extend %cl-color-night;
     }
   }

package/src/components/ClWizard/style.scss

@@ -10,9 +10,9 @@
 .cl-wizard-steps {
   $wizard-li-spacing: $spacing-small;
   $wizard-offset-indicator: -1em;
-  $wizard-color-done: $color-ci-night;
+  $wizard-color-done: var(--cl-color-text);
   $wizard-color-active: $color-ci-red;
-  $wizard-color-todo: $color-ci-night;
+  $wizard-color-todo: var(--cl-color-text);
 
   display: flex;
   flex-direction: row;
@@ -26,7 +26,7 @@
   li {
     @extend %cl-p-small;
 
-    color: $color-text;
+    color: var(--cl-color-text);
     display: inline-block;
     font-weight: 700;
     margin: 0 $wizard-li-spacing;
@@ -111,7 +111,7 @@
         }
 
         &::after {
-          background-color: $color-ci-eggshell;
+          background-color: var(--cl-color-text-inverted);
           border-color: $wizard-color-todo;
         }
       }

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

@@ -52,7 +52,7 @@
   input.disabled,
   select[disabled],
   select.disabled {
-    background-color: $color-ci-haze;
+    background-color: var(--cl-color-background-haze);
     color: $color-disabled;
     cursor: not-allowed;
 

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

@@ -25,54 +25,69 @@ $form-check-background: $color-ci-eggshell;
   .form-check-input {
     @include no-focus;
 
+    $color-empty: var(--cl-color-input-background);
+    $color-checked: var(--cl-color-text);
+
     margin-left: -$spacing-medium;
     margin-right: $spacing-micro;
     margin-top: 0.25em;
 
     &[type='checkbox'] {
+      background-color: $color-empty;
       border: $form-field-border;
       border-radius: px(4);
       margin-top: 0.2em;
 
       &:checked {
-        background-color: $color-ci-night;
+        background-color: $color-checked;
         background-image: url('#{$cl-url-prefix}checked.svg#{$cl-url-postfix}');
         border: 0;
       }
 
+      &:disabled,
+      &.disabled {
+        background-color: $color-ci-haze;
+      }
+
       &:indeterminate {
-        background-color: $color-ci-night;
+        background-color: $color-checked;
         background-image: none;
-        border-color: $color-ci-night;
-        box-shadow: 0 0 0 px(2) $form-check-background inset !important;
+        border-color: $color-checked;
+        box-shadow: 0 0 0 px(2) $color-empty inset;
 
         &:disabled,
         &.disabled {
           background-color: $color-disabled;
           border-color: $color-disabled;
-          box-shadow: 0 0 0 px(2) $form-check-background inset !important;
+          box-shadow: 0 0 0 px(2) $color-empty inset;
         }
       }
     }
 
     &[type='radio'] {
+      background-color: $color-empty;
       border: $form-field-border;
       margin-top: 0.2em;
 
       &:checked {
-        background-color: $color-ci-night;
+        background-color: $color-checked;
         background-image: none; // remove BS dot
-        border-color: $color-ci-night;
+        border-color: $color-checked;
 
         &.disabled,
         &:disabled {
           border-color: $color-disabled;
         }
       }
+
+      &:disabled,
+      &.disabled {
+        background-color: $color-ci-haze;
+      }
     }
 
     &:focus-visible {
-      @include cl-color-focus-outline($color-ci-night, 2px);
+      @include cl-color-focus-outline(var(--cl-color-text), 2px);
     }
 
     &.disabled,

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

@@ -55,7 +55,7 @@
       @extend %form-field-box;
       @extend %form-field-typography-monospace;
 
-      background-color: $color-ci-haze;
+      background-color: var(--cl-color-background-haze);
       height: 100%;
       line-height: inherit;
       white-space: nowrap;

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

@@ -82,10 +82,11 @@
   }
 
   [type='range'] {
-    $color-bullet: $color-ci-night;
+    $color-bar: $color-ci-clay;
+    $color-bullet: var(--cl-color-text);
 
     appearance: none;
-    background: $color-ci-clay;
+    background: $color-bar;
     border-radius: $brand-border-radius;
     height: $spacing-tiny;
     outline: 0;

package/src/components/modal/ClModal/style.scss

@@ -72,7 +72,9 @@
     background-color: var(--cl-color-background);
     border: 0;
     border-radius: $brand-border-radius;
-    box-shadow: 0 0 4rem $color-black-50a;
+    box-shadow:
+      inset 0 0 0 1px var(--cl-color-border),
+      0 0 4rem $color-black-50a;
     color: var(--cl-color-text);
     display: flex;
     flex-direction: column;

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

@@ -13,9 +13,9 @@ $sidenav-color-separator: rgba(#fff, 0.25);
 $sidenav-color-account: $color-ci-night;
 $sidenav-color-organization: $color-ci-night-2;
 $sidenav-color-app: $color-ci-night-3;
-$sidenav-color: $color-ci-haze;
-$sidenav-color-text: $color-ci-night;
-$sidenav-color-text-minor: $color-ci-ash;
+$sidenav-color: var(--cl-color-background-haze);
+$sidenav-color-text: var(--cl-color-text);
+$sidenav-color-text-minor: var(--cl-color-text-faded);
 
 @mixin cl-nav-fadeout($color) {
   overflow: hidden;
@@ -40,8 +40,6 @@ $sidenav-color-text-minor: $color-ci-ash;
 
   .cl-nav-drawer {
     #{'--cl-color-background'}: $sidenav-color;
-    #{'--cl-color-text'}: $sidenav-color-text;
-    #{'--cl-color-accent'}: $color-ci-petrol;
     background-color: var(--cl-color-background);
     color: var(--cl-color-text);
   }

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

@@ -0,0 +1,44 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines our sidenav. It does not define the sidenav's content inside
+// the drawer, only how the drawer operates/opens/closes.
+
+@use '../../../../styles/global' as *;
+
+.cl-nav-item-theme-light,
+.cl-nav-item-theme-dark {
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+body:has(#cl-mode-dark:checked) {
+  .cl-nav-item-theme-light {
+    display: none;
+  }
+}
+
+body:not(:has(#cl-mode-dark:checked)) {
+  .cl-nav-item-theme-dark {
+    display: none;
+  }
+}
+
+#cl-nav-organization,
+#cl-nav-services,
+.cl-dropdown,
+.cl-dropdown-arrow {
+  + .cl-nav-item-theme-light,
+  + .cl-nav-item-theme-dark,
+  + * + .cl-nav-item-theme-light,
+  + * + .cl-nav-item-theme-dark,
+  + * + * + .cl-nav-item-theme-light,
+  + * + * + .cl-nav-item-theme-dark {
+    margin-top: $spacing-small;
+  }
+}

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

@@ -114,6 +114,10 @@ $sidenav-z-index: $layer-z-sidenav;
       line-height: 0.5;
       padding: 0;
     }
+
+    + .cl-path {
+      text-align: center; // no-nav version
+    }
   }
 }
 
@@ -175,7 +179,7 @@ $sidenav-z-index: $layer-z-sidenav;
   }
 
   .active {
-    background: $color-ci-white;
+    background: $color-ci-eggshell;
     position: relative;
 
     a,

package/src/components/widget/ClPage/style.scss

@@ -60,7 +60,7 @@
   }
 
   th {
-    background: $color-ci-haze !important;
+    background: var(--cl-color-background-haze) !important;
     position: sticky;
     top: 0;
     z-index: 1;

package/src/styles/_global.scss

@@ -17,4 +17,5 @@
 @forward 'abstracts/tools';
 @forward 'abstracts/typography';
 
+@forward 'themes/dark.variables.scss';
 // $castlabs-ui-asset-prefix: '@' !default;

package/src/styles/abstracts/button.scss

@@ -42,7 +42,7 @@
 }
 
 // custom colors for bootstrap buttons
-@mixin cl-button-color() {
+@mixin cl-button-color($defaultColors: true) {
   background-color: var(--cl-color-background);
   border: $brand-line-width solid var(--cl-color-border);
   color: var(--cl-color-text);
@@ -83,4 +83,13 @@
   &:hover:active {
     opacity: var(--cl-opacity-active) !important;
   }
+
+  @if $defaultColors == true {
+    &:not([class*=' cl-color-']) {
+      // default button color
+      #{'--cl-color-background'}: $color-ci-sea;
+      #{'--cl-color-text'}: $color-ci-eggshell;
+      #{'--cl-color-border'}: $color-ci-sea;
+    }
+  }
 }

package/src/styles/abstracts/color.scss

@@ -14,7 +14,7 @@ $color-ci-sky: #71c0ff; // rgba(113, 192, 255, 1)
 $color-ci-eggshell: #fbf9f2; // rgba(251, 249, 242, 1);
 $color-ci-night: #262a35; // rgba(38, 42, 53, 1);
 
-$color-ci-night-2: #333947;
+$color-ci-night-2: #333947; // also night-haze
 $color-ci-night-3: #3c4253;
 $color-ci-night-4: #454c5f;
 
@@ -32,6 +32,7 @@ $color-ci-sea: #5d9dd1; // #5D9FC0; // #3F81A2; 5d9dd1
 $color-ci-orchid: #b271bf;
 $color-ci-steel: #a0a0a0;
 $color-ci-haze: #eeece6;
+$color-ci-haze-dark: $color-ci-night-2;
 $color-ci-black: $color-ci-night;
 $color-ci-white: $color-ci-eggshell;
 $color-ci-sand: #fdf5cf;
@@ -52,7 +53,7 @@ $color-disabled: $color-ci-steel; // $color-ci-clay;
 $color-text: $color-ci-night;
 $color-selected: $color-ci-red;
 $color-accent: $color-ci-petrol;
-$color-background: $color-ci-white;
+$color-background: $color-ci-eggshell;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
 $color-line: $color-ci-clay;
@@ -136,6 +137,11 @@ $color-opacity-active: 0.8;
     #{'--cl-color-accent'}: $color-ci-leaf;
   }
 
+  &.cl-accent-steel,
+  .cl-accent-steel {
+    #{'--cl-color-accent'}: $color-ci-steel;
+  }
+
   &.cl-accent-none,
   .cl-accent-none,
   &.cl-accent-transparent,
@@ -176,6 +182,14 @@ $color-opacity-active: 0.8;
   &.cl-color-clay {
     @extend %cl-color-clay;
   }
+
+  &.cl-color-transparent {
+    @extend %cl-color-transparent;
+  }
+
+  &.cl-color-none {
+    @extend %cl-color-none;
+  }
 }
 
 @mixin cl-colors-admin {
@@ -204,24 +218,42 @@ $color-opacity-active: 0.8;
   }
 }
 
+/* @mixin cl-colors-named {
+  &.cl-color-primary {
+    @extend %cl-color-sea;
+  }
+
+  &.cl-color-secondary {
+    @extend %cl-color-night;
+  }
+
+  &.cl-color-tertiary {
+    @extend %cl-color-transparent;
+  }
+} */
+
 %cl-color-root {
   // default colors = outline-night
   #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-background'}: $color-ci-eggshell;
+  #{'--cl-color-background-haze'}: $color-ci-haze;
   #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-code'}: $color-ci-petrol;
   #{'--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-highlight'}: $color-ci-sand;
   #{'--cl-color-hover'}: $color-hover;
+  #{'--cl-color-icon'}: $color-ci-steel;
   #{'--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-color-text-faded'}: $color-ci-ash;
+  #{'--cl-color-text-inverted'}: $color-ci-eggshell;
   #{'--cl-opacity-active'}: $color-opacity-active;
 }
 
@@ -239,6 +271,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-text-inverted'}: $color-ci-eggshell;
   #{'--cl-opacity-active'}: $color-opacity-active * 0.9;
 }
 
@@ -253,6 +286,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-line'}: $color-ci-eggshell;
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-text-inverted'}: $color-ci-night;
 }
 
 %cl-color-text-dark {
@@ -266,6 +300,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-line'}: $color-ci-night;
   #{'--cl-color-link'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
+  #{'--cl-color-text-inverted'}: $color-ci-eggshell;
 }
 
 %cl-color-red {
@@ -306,21 +341,21 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-eggshell {
+  @extend %cl-color-text-dark;
+
   #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-eggshell;
-  #{'--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-color-haze {
-  @extend %cl-color-night-outline;
+  @extend %cl-color-text-dark;
 
-  #{'--cl-color-background'}: $color-ci-haze;
+  #{'--cl-color-border'}: var(--cl-color-background-haze);
+  #{'--cl-color-background'}: var(--cl-color-background-haze);
   #{'--cl-color-input-background'}: $color-ci-eggshell;
 }
 
@@ -423,15 +458,17 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-faded {
-  #{'--cl-color-accent'}: $color-ci-ash;
+  $color-faded: $color-ci-steel;
+
+  #{'--cl-color-accent'}: $color-faded;
   #{'--cl-color-background'}: transparent;
-  #{'--cl-color-border'}: $color-ci-ash;
-  #{'--cl-color-focus'}: $color-ci-ash;
+  #{'--cl-color-border'}: $color-faded;
+  #{'--cl-color-focus'}: $color-faded;
   #{'--cl-color-input-background'}: transparent;
-  #{'--cl-color-input-border'}: $color-ci-ash;
+  #{'--cl-color-input-border'}: $color-faded;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-link'}: inherit;
-  #{'--cl-color-text'}: $color-ci-ash;
+  #{'--cl-color-text'}: $color-faded;
 }
 
 %cl-color-none {

package/src/styles/abstracts/typography.scss

@@ -117,6 +117,7 @@ $typography-monospace-line-height: 1.375;
   // button styled as regular link
   @extend %cl-a;
 
+  background-color: transparent;
   background-position: left bottom 0.25em; // depends on underline
   background-repeat: no-repeat;
   background-size: 100% 1px;
@@ -139,6 +140,7 @@ $typography-monospace-line-height: 1.375;
   }
 
   &:hover {
+    background-color: transparent;
     color: var(--cl-color-hover);
     opacity: inherit;
   }
@@ -487,7 +489,7 @@ $typography-responsive-scale: 0.8;
 %cl-p-pre-box {
   @extend %cl-p-pre;
 
-  background-color: $color-ci-haze;
+  background-color: var(--cl-color-background-haze);
   border-radius: $brand-border-radius;
   clip-path: inset(0 round $brand-border-radius);
   font-size: px(15);