@castlabs/ui 7.5.1 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.5.1",
+  "version": "7.6.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -67,15 +67,15 @@
     "gulp": "5.0.1",
     "jsdom": "27.2.0",
     "npm-run-all": "4.1.5",
-    "sass": "1.94.1",
+    "sass": "1.94.2",
     "stylelint-config-sass-guidelines": "12.1.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "39.0.1",
     "stylelint-order": "7.0.0",
     "stylelint-scss": "6.12.1",
     "typescript": "5.9.3",
-    "vite": "7.2.2",
-    "vitest": "4.0.10",
+    "vite": "7.2.4",
+    "vitest": "4.0.12",
     "vue-tsc": "3.1.4",
     "vue": "3.5.24"
   }

package/src/components/ClDropdown/style.scss

@@ -9,8 +9,7 @@
 @use '../../styles/global' as *;
 
 $dropdown-border: 0.125rem; // a 2px border to add so there is space for the outline
-$dropdown-color-chevron: rgba($color-ci-white, 0.5);
-$dropdown-color-chevron-bright: rgba($color-ci-clay, 0.5);
+$dropdown-color-chevron: $color-ci-clay;
 $dropdown-line-height: 1.25;
 
 .cl-dropdown {
@@ -44,7 +43,7 @@ $dropdown-line-height: 1.25;
       align-items: center;
       background-color: var(--cl-color-background);
       box-shadow: -8px 0 4px var(--cl-color-background);
-      color: $dropdown-color-chevron-bright;
+      color: $dropdown-color-chevron;
       display: flex;
       font-size: px(18);
       height: calc(100% - 8px);

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

@@ -11,8 +11,11 @@
 $sidenav-color-separator: rgba(#fff, 0.25);
 
 $sidenav-color-account: $color-ci-night;
-$sidenav-color-organization: #313644; // color.adjust($sidenav-color-account, $lightness: 5%);
-$sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness: 10%);
+$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;
 
 @mixin cl-nav-fadeout($color) {
   overflow: hidden;
@@ -36,8 +39,9 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   // --- drawer ----------------------------------------------------------------
 
   .cl-nav-drawer {
-    #{'--cl-color-background'}: $color-ci-eggshell;
-    #{'--cl-color-text'}: $color-ci-night;
+    #{'--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);
   }
@@ -184,7 +188,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   div.cl-nav-organization,
   a.cl-nav-organization {
     min-height: 3.25rem;
-    padding: 0 $spacing-small $spacing-tiny;
+    padding: $spacing-micro $spacing-small $spacing-micro + $spacing-tiny;
     position: relative;
 
     &::after {
@@ -297,10 +301,16 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     position: relative;
     width: 100%;
 
+    @include media-breakpoint-up(md) {
+      // reduce nav item heigt a bit on larger screens
+      padding-bottom: $spacing-tiny - px(1);
+      padding-top: $spacing-tiny - px(1);
+    }
+
     .cl-nav-item-info {
       @extend %cl-p-small;
 
-      color: $color-ci-ash;
+      color: $sidenav-color-text-minor;
       letter-spacing: 0.025em;
       line-height: 1.4;
       margin-top: px(3);
@@ -348,6 +358,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   }
 
   .cl-dropdown {
+    // service drawer
     #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-background'}: $sidenav-color-app;
     #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
@@ -372,11 +383,15 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     + .cl-dropdown-arrow {
       background-color: $sidenav-color-app;
     }
+
+    .cl-subentry {
+      color: $color-ci-clay;
+    }
   }
 
   .cl-nav-separator {
     // -------------------------------------------------------
-    background-color: $color-ci-clay;
+    background-color: $color-ci-steel;
     border: 0;
     height: $brand-line-width;
     margin: $spacing-small 0;

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

@@ -46,12 +46,4 @@
       }
     }
   }
-
-  // tr:nth-child(even) .cl-td-links {
-  //   background-color: transparent;
-  // }
-  //
-  // tr:nth-child(odd) .cl-td-links {
-  //   background-color: var(--cl-color-highlight);
-  // }
 }

package/src/styles/abstracts/button.scss

@@ -71,7 +71,7 @@
     background-color: var(--cl-color-background) !important;
     border-color: var(--cl-color-border) !important;
     color: var(--cl-color-text) !important;
-    opacity: var(--cl-opacity-active);
+    outline: 0 !important;
 
     &.cl-color-transparent {
       background-color: $color-ci-eggshell;
@@ -80,7 +80,7 @@
     }
   }
 
-  &:active {
-    outline: 0 !important;
+  &:hover:active {
+    opacity: var(--cl-opacity-active) !important;
   }
 }

package/src/styles/abstracts/color.scss

@@ -13,8 +13,11 @@ $color-ci-red: #fa423c; // rgba(250, 66, 60, 1)
 $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: #2c303c; // rgba(38, 42, 53, 1); // interim color for sidenav
-$color-ci-night-3: #333742; // rgba(38, 42, 53, 1); // interim color for sidenav
+
+$color-ci-night-2: #333947;
+$color-ci-night-3: #3c4253;
+$color-ci-night-4: #454c5f;
+
 $color-ci-clay: #cfc8c8; // rgba(207, 200, 200, 1);
 $color-ci-ash: #6d5e5e; // rgba(109, 94, 94, 1);
 $color-ci-berry: #6e1c3b; // rgba(110, 28, 59, 1);
@@ -174,7 +177,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-link;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-hover'}: $color-hover;
@@ -192,7 +194,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-disabled-background'}: transparent;
@@ -206,7 +207,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-eggshell;
   #{'--cl-color-line'}: $color-ci-eggshell;
   #{'--cl-color-accent'}: $color-ci-eggshell;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
@@ -216,7 +216,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-ci-night;
   #{'--cl-color-accent'}: $color-ci-night;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-night;
   #{'--cl-color-focus'}: $color-ci-night;
 }
@@ -234,7 +233,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-red;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-red;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-red;
   #{'--cl-color-disabled-background'}: transparent;
@@ -262,7 +260,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-accent;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-night;
 }
@@ -344,14 +341,16 @@ $color-opacity-active: 0.8;
 }
 
 %cl-color-transparent {
-  @extend %cl-color-text-light;
-
   #{'--cl-color-background'}: transparent;
-  #{'--cl-color-border'}: $color-ci-eggshell;
+  #{'--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-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-color-disabled {
@@ -360,7 +359,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-disabled;
   #{'--cl-color-line'}: $color-disabled;
   #{'--cl-color-accent'}: $color-disabled;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-eggshell;
 }
@@ -371,7 +369,6 @@ $color-opacity-active: 0.8;
   #{'--cl-color-text'}: $color-ci-ash;
   #{'--cl-color-line'}: $color-line;
   #{'--cl-color-accent'}: $color-ci-ash;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: inherit;
   #{'--cl-color-focus'}: $color-ci-ash;
 }
@@ -379,7 +376,6 @@ $color-opacity-active: 0.8;
 %cl-color-none {
   #{'--cl-color-background'}: transparent;
   #{'--cl-color-border'}: transparent;
-  #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
   #{'--cl-color-disabled-background'}: transparent;

package/src/styles/layout/color.scss

@@ -14,7 +14,6 @@
   @extend %cl-color-root;
 }
 
-.cl-color-tertiary
 .cl-color-outline-text, // legacy name
 .cl-color-night-outline {
   @extend %cl-color-night-outline;
@@ -32,11 +31,6 @@
   @extend %cl-color-sky;
 }
 
-.cl-color-primary {
-  @extend %cl-color-sea;
-}
-
-.cl-color-secondary,
 .cl-color-black,
 .cl-color-text, // legacy name
 .cl-color-dark, // legacy name
@@ -86,6 +80,24 @@
   @extend %cl-color-none;
 }
 
+// -----------------------------------------------------------------------------
+
+// primary/secondary/tertiary button colors
+
+.btn {
+  &.cl-color-primary {
+    @extend %cl-color-sea;
+  }
+
+  &.cl-color-secondary {
+    @extend %cl-color-night;
+  }
+
+  &.cl-color-tertiary {
+    @extend %cl-color-transparent;
+  }
+}
+
 .cl-color-red,
 .cl-color-sky,
 .cl-color-ash,
@@ -96,17 +108,17 @@
 .cl-color-dark,
 .cl-color-night {
   // on dark backgrounds secondary buttons need to be light
-  .cl-color-secondary {
+  .btn.cl-color-secondary {
     @extend %cl-color-eggshell;
   }
 
   // on dark backgrounds secondary buttons need to be outlined
-  .cl-color-tertiary {
+  .btn.cl-color-tertiary {
     @extend %cl-color-transparent;
   }
 }
 
-// ----------------------------------------------
+// -----------------------------------------------------------------------------
 
 a,
 span,