@castlabs/ui 7.5.1 → 7.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.5.1",
+  "version": "7.5.2",
   "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/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

@@ -174,7 +174,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 +191,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 +204,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 +213,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 +230,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 +257,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 +338,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 +356,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 +366,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 +373,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,