@castlabs/ui 7.5.0 → 7.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.5.0",
+  "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/ClButton/style.scss

@@ -23,9 +23,9 @@
 
   &:disabled,
   &.disabled {
-    background-color: var(--cl-color-disabled-background);
-    border-color: var(--cl-color-disabled-border);
-    color: var(--cl-color-disabled-text);
+    background-color: var(--cl-color-disabled-background) !important;
+    border-color: var(--cl-color-disabled-border) !important;
+    color: var(--cl-color-disabled-text) !important;
     cursor: not-allowed;
     opacity: 1 !important; // sass-lint:disable-line no-important
     pointer-events: initial;
@@ -60,14 +60,20 @@ a.btn {
 
   background-color: transparent;
   border: 0;
+  color: var(--cl-color-text);
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;
   min-width: 0;
   padding: 0;
 
-  &:not(:hover) {
-    color: $color-ci-steel;
+  &:not(:hover, [class*='cl-color-']) {
+    #{'--cl-color-text'}: $color-ci-steel;
+  }
+
+  &.disabled,
+  &:disabled {
+    visibility: hidden;
   }
 }
 

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

@@ -21,7 +21,7 @@ $cl-url-postfix: '' !default;
     @extend %form-field-box;
     @extend %form-field-typography-monospace;
 
-    @include cl-form-focus;
+    @include cl-form-focus(true);
 
     background-image: url('#{$cl-url-prefix}select.svg#{$cl-url-postfix}'), none, none;
     display: block;

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

@@ -10,10 +10,6 @@
 .cl-section-main-side {
   padding-top: 0;
 
-  // .cl-section-primary + & { // first one right below header
-  //   padding-top: $spacing-small;
-  // }
-
   .row > [class^='col-'] {
     margin-top: $spacing-small * 2;
   }

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/components/text/ClLinkExternal/style.scss

@@ -14,46 +14,6 @@ main a {
   @extend %cl-a;
 }
 
-// .cl-a-primary a:not(.btn),
-// .cl-a-secondary a.cl-a-primary:not(.btn),
-// .cl-a-text a.cl-a-primary:not(.btn),
-// .cl-a-transparent a.cl-a-primary:not(.btn),
-// a.cl-a-primary:not(.btn) {
-//   @extend %cl-a-primary;
-// }
-//
-// .cl-a-secondary a:not(.btn),
-// .cl-a-primary a.cl-a-secondary:not(.btn),
-// .cl-a-text a.cl-a-secondary:not(.btn),
-// .cl-a-transparent a.cl-a-secondary:not(.btn),
-// a.cl-a-secondary:not(.btn) {
-//   @extend %cl-a-secondary;
-// }
-
-// .cl-a-text a:not(.btn),
-// .cl-a-primary a.cl-a-text:not(.btn),
-// .cl-a-secondary a.cl-a-text:not(.btn),
-// .cl-a-transparent a.cl-a-text:not(.btn),
-// a.cl-a-text:not(.btn) {
-//   @extend %cl-a-text;
-// }
-
-// .cl-a-transparent a:not(.btn),
-// .cl-a-primary a.cl-a-transparent:not(.btn),
-// .cl-a-secondary a.cl-a-transparent:not(.btn),
-// .cl-a-text a.cl-a-transparent:not(.btn),
-// a.cl-a-transparent:not(.btn) {
-//   @extend %cl-a-transparent;
-// }
-
-// .cl-a-none a:not(.btn),
-// .cl-a-primary a.cl-a-none:not(.btn),
-// .cl-a-secondary a.cl-a-none:not(.btn),
-// .cl-a-text a.cl-a-none:not(.btn),
-// a.cl-a-none:not(.btn) {
-//   @extend %cl-a-none;
-// }
-
 .cl-a-btn {
   // a link that is more an embedded button, e.g. in table actions
   @extend %cl-a-btn;
@@ -70,11 +30,17 @@ main a {
 
   background-color: transparent;
   border-radius: 0;
+  color: var(--cl-color-text);
   margin-left: $spacing-tiny;
   text-decoration: none;
 
-  &:not(:hover) {
-    color: $color-ci-steel;
+  &:not(:hover, [class*='cl-color-']) {
+    #{'--cl-color-text'}: $color-ci-steel;
+  }
+
+  &.disabled,
+  &:disabled {
+    visibility: hidden;
   }
 }
 

package/src/styles/abstracts/button.scss

@@ -68,9 +68,10 @@
   &.active,
   .show > &.dropdown-toggle {
     // .dropdown-toggle is for topnav
-    background-color: var(--cl-color-text);
-    border-color: var(--cl-color-background);
-    color: var(--cl-color-background);
+    background-color: var(--cl-color-background) !important;
+    border-color: var(--cl-color-border) !important;
+    color: var(--cl-color-text) !important;
+    outline: 0 !important;
 
     &.cl-color-transparent {
       background-color: $color-ci-eggshell;
@@ -79,7 +80,7 @@
     }
   }
 
-  &:active {
-    outline: 0 !important;
+  &:hover:active {
+    opacity: var(--cl-opacity-active) !important;
   }
 }

package/src/styles/abstracts/color.scss

@@ -53,6 +53,7 @@ $color-background: $color-ci-white;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
 $color-line: $color-ci-clay;
+$color-opacity-active: 0.8;
 
 @mixin cl-color-focus-outline-raw($color: var(--cl-color-focus), $offset: -3px) {
   box-shadow: none; // disable BS outlines
@@ -173,7 +174,6 @@ $color-line: $color-ci-clay;
   #{'--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;
@@ -181,6 +181,7 @@ $color-line: $color-ci-clay;
   #{'--cl-color-disabled-background'}: $color-disabled;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-ci-eggshell;
+  #{'--cl-opacity-active'}: $color-opacity-active;
 }
 
 %cl-color-night-outline {
@@ -190,12 +191,12 @@ $color-line: $color-ci-clay;
   #{'--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;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-disabled;
+  #{'--cl-opacity-active'}: $color-opacity-active * 0.9;
 }
 
 %cl-color-text-light {
@@ -203,7 +204,6 @@ $color-line: $color-ci-clay;
   #{'--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;
 }
@@ -213,7 +213,6 @@ $color-line: $color-ci-clay;
   #{'--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;
 }
@@ -223,6 +222,7 @@ $color-line: $color-ci-clay;
 
   #{'--cl-color-background'}: $color-ci-red;
   #{'--cl-color-border'}: $color-ci-red;
+  #{'--cl-opacity-active'}: $color-opacity-active;
 }
 
 %cl-color-red-outline {
@@ -230,7 +230,6 @@ $color-line: $color-ci-clay;
   #{'--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;
@@ -258,7 +257,6 @@ $color-line: $color-ci-clay;
   #{'--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;
 }
@@ -340,10 +338,16 @@ $color-line: $color-ci-clay;
 }
 
 %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 {
@@ -352,7 +356,6 @@ $color-line: $color-ci-clay;
   #{'--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;
 }
@@ -363,7 +366,6 @@ $color-line: $color-ci-clay;
   #{'--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;
 }
@@ -371,7 +373,9 @@ $color-line: $color-ci-clay;
 %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;
+  #{'--cl-color-disabled-border'}: transparent;
+  #{'--cl-color-disabled-text'}: $color-disabled;
 }

package/src/styles/abstracts/form.scss

@@ -39,7 +39,8 @@ $form-spacing-label-input: px(2);
     $typography-sans-font-list,
     400,
     $form-field-fontsize,
-    $form-field-line-height
+    $form-field-line-height,
+    0
   );
 }
 
@@ -49,7 +50,7 @@ $form-spacing-label-input: px(2);
     400,
     $form-field-fontsize,
     $form-field-line-height,
-    0.025em
+    0
   );
 }
 
@@ -65,10 +66,19 @@ $form-spacing-label-input: px(2);
   }
 }
 
-@mixin cl-form-focus {
+@mixin cl-form-focus($focus: false) {
   &:focus-visible,
   &:focus-visible:first-child,
   &:focus-visible:last-child {
     @include cl-form-focus-embed;
   }
+
+  @if $focus == true {
+    // sometimes we need to undo Bootstrap too
+    &:focus,
+    &:focus:first-child,
+    &:focus:last-child {
+      @include cl-form-focus-embed;
+    }
+  }
 }

package/src/styles/abstracts/typography.scss

@@ -75,7 +75,7 @@ $typography-monospace-line-height: 1.375;
 }
 
 @mixin typography-link(
-  $color: inherit,
+  $color: var(--cl-color-text),
   $color-hover: var(--cl-color-hover),
   $color-underline: var(--cl-color-link),
   $color-underline-hover: $color-hover
@@ -146,6 +146,14 @@ $typography-monospace-line-height: 1.375;
     background-color: transparent;
     color: var(--cl-color-hover);
   }
+
+  &.disabled,
+  &:disabled {
+    background-color: transparent;
+    color: var(--cl-color-text);
+    cursor: text;
+    text-decoration: none;
+  }
 }
 
 %cl-a {

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,7 +80,45 @@
   @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,
+.cl-color-petrol,
+.cl-color-berry,
+.cl-color-black,
+.cl-color-text,
+.cl-color-dark,
+.cl-color-night {
+  // on dark backgrounds secondary buttons need to be light
+  .btn.cl-color-secondary {
+    @extend %cl-color-eggshell;
+  }
+
+  // on dark backgrounds secondary buttons need to be outlined
+  .btn.cl-color-tertiary {
+    @extend %cl-color-transparent;
+  }
+}
+
+// -----------------------------------------------------------------------------
 
 a,
 span,
@@ -99,10 +131,12 @@ div {
 
 .cl-color-text-red {
   #{'--cl-color-text'}: $color-ci-red;
+  #{'--cl-color-link'}: $color-ci-red;
 }
 
 .cl-color-text-sky {
   #{'--cl-color-text'}: $color-ci-sky;
+  #{'--cl-color-link'}: $color-ci-sky;
 }
 
 .cl-color-text-night {
@@ -121,40 +155,50 @@ div {
 
 .cl-color-text-ash {
   #{'--cl-color-text'}: $color-ci-ash;
+  #{'--cl-color-link'}: $color-ci-ash;
 }
 
 .cl-color-text-petrol {
   #{'--cl-color-text'}: $color-ci-petrol;
+  #{'--cl-color-link'}: $color-ci-petrol;
 }
 
 .cl-color-text-berry {
   #{'--cl-color-text'}: $color-ci-berry;
+  #{'--cl-color-link'}: $color-ci-berry;
 }
 
 .cl-color-text-none {
   #{'--cl-color-text'}: transparent;
+  #{'--cl-color-link'}: transparent;
 }
 
 .cl-color-text-brick {
   #{'--cl-color-text'}: $color-ci-brick;
+  #{'--cl-color-link'}: $color-ci-brick;
 }
 
 .cl-color-text-honey {
   #{'--cl-color-text'}: $color-ci-honey;
+  #{'--cl-color-link'}: $color-ci-honey;
 }
 
 .cl-color-text-leaf {
   #{'--cl-color-text'}: $color-ci-leaf;
+  #{'--cl-color-link'}: $color-ci-leaf;
 }
 
 .cl-color-text-sea {
   #{'--cl-color-text'}: $color-ci-sea;
+  #{'--cl-color-link'}: $color-ci-sea;
 }
 
 .cl-color-text-orchid {
   #{'--cl-color-text'}: $color-ci-orchid;
+  #{'--cl-color-link'}: $color-ci-orchid;
 }
 
 .cl-color-text-steel {
   #{'--cl-color-text'}: $color-ci-steel;
+  #{'--cl-color-link'}: $color-ci-steel;
 }

package/src/styles/layout/helper.scss

@@ -74,7 +74,7 @@ h6.cl-faded,
 
 @for $i from 0 through 10 {
   .cl-w-#{$i * 10} {
-    width: $i * 10;
+    width: $i * 10%;
   }
 }
 

package/src/styles/layout/section.scss

@@ -23,17 +23,11 @@
   &.cl-color-petrol + &.cl-color-petrol,
   &.cl-color-berry + &.cl-color-berry {
     @include media-breakpoint-up(sm) {
-      margin-top: $spacing-small * -3;
+      margin-top: $spacing-small * -2.5;
     }
   }
 }
 
-// .cl-section:not(.cl-color-red):not(.cl-color-sky):not(.cl-color-night):not(.cl-color-eggshell):not(.cl-color-clay):not(.cl-color-ash):not(.cl-color-petrol):not(.cl-color-berry) + .cl-section:not(.cl-color-red):not(.cl-color-sky):not(.cl-color-night):not(.cl-color-eggshell):not(.cl-color-clay):not(.cl-color-ash):not(.cl-color-petrol):not(.cl-color-berry) {
-//    @include media-breakpoint-up(sm) {
-//      margin-top: $spacing-small * -3;
-//    }
-// }
-
 // pre-2005 legacy mappings
 .cl-section-regular {
   @extend %section-padding;