@castlabs/ui 7.6.1 → 7.7.0

package/package.json

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

@@ -117,6 +117,7 @@
       line-height: 1;
       padding: 0;
       text-decoration: underline;
+      text-decoration-thickness: px(1);
     }
   }
 }

package/src/components/ClBadge/style.scss

@@ -14,6 +14,7 @@
   &:hover {
     color: var(--cl-color-text);
     text-decoration: underline;
+    text-decoration-thickness: px(1);
   }
 }
 

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

@@ -1,7 +1,5 @@
 @use '../../styles/global' as *;
 
-// $badge-color-fg: $color-ci-white;
-// $badge-color-bg: $color-dark;
 $badge-padding: px(4) px(8);
 $badge-min-height: 1.642857143em; // 23px @ 14pt
 
@@ -12,9 +10,14 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
 }
 
 %cl-badge {
-  @include cl-colors-secondary;
+  @include cl-colors-ci;
+  @include cl-colors-admin;
   @extend %cl-p-tag;
 
+  #{'--cl-color-background'}: $color-ci-steel;
+  #{'--cl-color-border'}: $color-ci-steel;
+  #{'--cl-color-text'}: $color-ci-eggshell;
+  #{'--cl-color-accent'}: $color-ci-eggshell;
   background-color: var(--cl-color-background);
   border: $brand-line-width solid var(--cl-color-border);
   border-radius: $brand-border-radius;
@@ -26,14 +29,6 @@ $badge-min-height: 1.642857143em; // 23px @ 14pt
   text-transform: uppercase;
   white-space: nowrap;
 
-  &:not([class*='cl-color-']) {
-    // default color
-    #{'--cl-color-background'}: $color-ci-steel;
-    #{'--cl-color-border'}: $color-ci-steel;
-    #{'--cl-color-text'}: $color-ci-eggshell;
-    #{'--cl-color-accent'}: $color-ci-eggshell;
-  }
-
   &.cl-badge-sm {
     @include cl-badge-small;
   }

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

@@ -169,8 +169,7 @@ $card-spacing-tight: $spacing-small;
   }
 
   &.cl-card-max {
-    height: 100%; // cards in responsive grid colums should have full height
-    margin-top: 0;
+    height: calc(100% - $spacing-small); // cards in responsive grid colums should have full height
   }
 
   + .card {

package/src/components/ClFooter/style.scss

@@ -18,6 +18,7 @@
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: px(1);
     }
   }
 }

package/src/components/ClPagination/style.scss

@@ -93,7 +93,7 @@
 }
 
 .cl-pagination-autosize {
-  // for use by simple code that can't hide bubbles by itself
+  // for use by simple code that can’t hide bubbles by itself
   // will hide all but the first, last and +/-5 bubbles around the .active one
   .page-item {
     display: none;

package/src/components/ClProgress/style.scss

@@ -14,7 +14,7 @@
 // hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 .progress {
-  @extend %cl-color-sky;
+  @extend %cl-color-petrol;
 
   background-color: $color-ci-clay;
   border-radius: $brand-border-radius;

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

@@ -31,17 +31,28 @@
 
   // --- disabled fields -------------------------------------------------------
 
+  .form-label:has(+ [disabled], + .disabled),
   .form-label.disabled,
   .valid-feedback.disabled {
     color: $color-disabled;
   }
 
   textarea[disabled],
+  textarea.disabled,
   input[disabled],
-  select[disabled] {
+  input.disabled,
+  select[disabled],
+  select.disabled {
     background-color: $color-ci-haze;
     color: $color-disabled;
     cursor: not-allowed;
+
+    + .invalid-feedback,
+    + .valid-feedback,
+    + .invalid-feedback + .valid-feedback,
+    + .valid-feedback + .invalid-feedback {
+      color: $color-disabled;
+    }
   }
 
   select[disabled] {

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

@@ -37,14 +37,9 @@
           // trick to share one ][ border between 2 inputs
           &:not(.btn) {
             border-left-width: 0;
-
-            &:focus-visible,
-            &.invalid:focus-visible {
-              box-shadow: 0 0 0 1px $color-ci-berry inset !important;
-            }
           }
 
-          &.invalid {
+          &:not(:focus, :focus-visible).invalid {
             box-shadow: -$brand-line-width 0 0 $color-error !important; // sass-lint:disable-line no-important
           }
         }
@@ -117,6 +112,21 @@
 
         &:not(.btn) {
           border-right-color: $color-ci-clay;
+
+          &:has(+ :focus),
+          &:has(+ :focus-visible),
+          &:has(+ p + :focus),
+          &:has(+ p + :focus-visible),
+          &:has(+ p + p + :focus),
+          &:has(+ p + p + :focus-visible),
+          &:has(+ .invalid:focus),
+          &:has(+ [invalid]:focus-visible),
+          &:has(+ p + .invalid:focus),
+          &:has(+ p + [invalid]:focus-visible),
+          &:has(+ p + p + .invalid:focus),
+          &:has(+ p + p + [invalid]:focus-visible) {
+            border-right-color: $color-focus !important;
+          }
         }
       }
     }

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

@@ -38,7 +38,7 @@
     @extend %form-field-box;
     @extend %form-field-typography-monospace;
 
-    @include cl-form-focus;
+    @include cl-form-focus(true);
 
     &.form-control-plaintext {
       background-color: transparent;

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

@@ -1,9 +1,18 @@
 @use '../../../../styles/global' as *;
+@use '../../ClTable/style.variables' as *;
 
 .cl-table-data {
   @include media-breakpoint-up($grid-table-responsive) {
     .cl-th-currency,
     .cl-td-currency {
+      @include typography-font(
+        $typography-monospace-font-list,
+        400,
+        px(14),
+        $table-lineheight * 1.066666667,
+        0.025em
+      );
+
       overflow-wrap: unset;
       text-align: end;
     }

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

@@ -0,0 +1,16 @@
+@use '../../../../styles/global' as *;
+@use '../../ClTable/style.variables' as *;
+
+.cl-table-data {
+  @include media-breakpoint-up($grid-table-responsive) {
+    .cl-td-time {
+      @include typography-font(
+        $typography-monospace-font-list,
+        400,
+        px(14),
+        $table-lineheight * 1.066666667,
+        0.025em
+      );
+    }
+  }
+}

package/src/components/text/ClCopy/style.scss

@@ -20,9 +20,11 @@
   &:hover * {
     color: $color-hover;
     text-decoration-color: $color-hover;
+    text-decoration-thickness: px(1);
   }
 }
 
 .cl-copy-text {
   text-decoration: underline;
+  text-decoration-thickness: px(1);
 }

package/src/components/text/ClLinkExternal/style.scss

@@ -15,7 +15,7 @@ main a {
 }
 
 .cl-a-btn {
-  // a link that is more an embedded button, e.g. in table actions
+  // a link that’s more an embedded button, e.g. in table actions
   @extend %cl-a-btn;
 }
 

package/src/styles/abstracts/color.scss

@@ -144,7 +144,41 @@ $color-opacity-active: 0.8;
   }
 }
 
-@mixin cl-colors-secondary {
+@mixin cl-colors-ci {
+  &.cl-color-night {
+    @extend %cl-color-night;
+  }
+
+  &.cl-color-eggshell {
+    @extend %cl-color-eggshell;
+  }
+
+  &.cl-color-red {
+    @extend %cl-color-red;
+  }
+
+  &.cl-color-sky {
+    @extend %cl-color-sky;
+  }
+
+  &.cl-color-berry {
+    @extend %cl-color-berry;
+  }
+
+  &.cl-color-petrol {
+    @extend %cl-color-petrol;
+  }
+
+  &.cl-color-ash {
+    @extend %cl-color-ash;
+  }
+
+  &.cl-color-clay {
+    @extend %cl-color-clay;
+  }
+}
+
+@mixin cl-colors-admin {
   &.cl-color-brick {
     @extend %cl-color-brick;
   }

package/src/styles/abstracts/typography.scss

@@ -83,6 +83,7 @@ $typography-monospace-line-height: 1.375;
   color: $color;
   display: inline;
   text-decoration: underline $color-underline;
+  text-decoration-thickness: px(1);
 
   &:hover {
     color: $color-hover;
@@ -162,7 +163,7 @@ $typography-monospace-line-height: 1.375;
 }
 
 %cl-a-btn {
-  // a link that is more an embedded button
+  // a link that’s more an embedded button
   @include typography-link;
 
   background-color: transparent;
@@ -488,7 +489,7 @@ $typography-responsive-scale: 0.8;
 
   border: $brand-line-width solid var(--cl-color-text);
   border-radius: $brand-border-radius;
-  clip-path: inset(0 round 20px);
+  clip-path: inset(-1px round 22px);
   font-size: px(15);
   line-height: 1.4;
   margin-top: $spacing-small;

package/src/styles/layout/color.scss

@@ -126,6 +126,7 @@ div {
   &[class*='cl-color-text-'] {
     color: var(--cl-color-text);
     text-decoration-color: var(--cl-color-text);
+    text-decoration-thickness: px(1);
   }
 }
 

package/src/styles/layout/grid.scss

@@ -92,7 +92,7 @@ main {
     #{'--bs-gutter-x'}: $grid-spacing;
 
     > [class^='col-'] {
-      margin-top: $grid-spacing; // columns add top padding as first content line won't
+      margin-top: $grid-spacing; // columns add top padding as first content line won’t
     }
   }
 }

package/src/styles/layout/helper.scss

@@ -45,6 +45,10 @@
   opacity: 0.5;
 }
 
+.cl-strong {
+  font-weight: 700;
+}
+
 h1.cl-faded,
 .cl-h1.cl-faded,
 h2.cl-faded,
@@ -83,6 +87,8 @@ h6.cl-faded,
   width: auto;
 }
 
+// --- alignment ---------------------------------------------------------------
+
 .cl-text-start,
 .text-start {
   text-align: left;
@@ -98,18 +104,129 @@ h6.cl-faded,
   text-align: right;
 }
 
-.cl-flex-center-center, // deprecated v5 class
-.cl-align-center-center {
-  align-items: center;
+%cl-align {
   display: flex;
   height: 100%;
-  justify-content: center;
   width: 100%;
 }
 
-.cl-flex-bottom, // deprecated v5 class
-.cl-align-bottom {
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
+:not(td) {
+  &.cl-flex-center-center, // deprecated v5 class
+  &.cl-align-center-center {
+    @extend %cl-align;
+
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.cl-align-center-left {
+    @extend %cl-align;
+
+    align-items: center;
+    justify-content: start;
+  }
+
+  &.cl-align-center-right {
+    @extend %cl-align;
+
+    align-items: center;
+    justify-content: end;
+  }
+
+  &.cl-align-top-left {
+    @extend %cl-align;
+
+    align-items: start;
+    justify-content: start;
+  }
+
+  &.cl-align-top-center {
+    @extend %cl-align;
+
+    align-items: start;
+    justify-content: center;
+  }
+
+  &.cl-align-top-right {
+    @extend %cl-align;
+
+    align-items: start;
+    justify-content: end;
+  }
+
+  &.cl-align-bottom-left {
+    @extend %cl-align;
+
+    align-items: end;
+    justify-content: start;
+  }
+
+  &.cl-align-bottom-center {
+    @extend %cl-align;
+
+    align-items: end;
+    justify-content: center;
+  }
+
+  &.cl-align-bottom-right {
+    @extend %cl-align;
+
+    align-items: end;
+    justify-content: end;
+  }
+
+  &.cl-flex-bottom, // deprecated v5 class
+  &.cl-align-bottom {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+}
+
+td {
+  &.cl-flex-center-center, // deprecated v5 class
+  &.cl-align-center-center {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  &.cl-align-center-left {
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  &.cl-align-center-right {
+    text-align: end;
+    vertical-align: middle;
+  }
+
+  &.cl-align-top-left {
+    text-align: start;
+    vertical-align: top;
+  }
+
+  &.cl-align-top-center {
+    text-align: center;
+    vertical-align: top;
+  }
+
+  &.cl-align-top-right {
+    text-align: end;
+    vertical-align: top;
+  }
+
+  &.cl-align-bottom-left {
+    text-align: start;
+    vertical-align: bottom;
+  }
+
+  &.cl-align-bottom-center {
+    text-align: center;
+    vertical-align: bottom;
+  }
+
+  &.cl-align-bottom-right {
+    text-align: end;
+    vertical-align: bottom;
+  }
 }

package/src/styles/ui.scss

@@ -88,6 +88,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/table/ClTableCel/ID/style' as *;
 @use '../components/table/ClTableCel/Links/style' as *;
 @use '../components/table/ClTableCel/style' as *;
+@use '../components/table/ClTableCel/Time/style' as *;
 @use '../components/table/ClTableFootChecked/style' as *;
 @use '../components/table/ClTableHead/style' as *;
 @use '../components/text/ClCopy/style' as *;

package/types/index.d.ts

@@ -136,6 +136,7 @@ export function clMatch (string: string, expression?: string, caseSensitive?: bo
 
 // --- utils/vitest ------------------------------------------------------------
 
+export const FLECTIONS: RegExp[]
 export function clGetAllComponents(): object
 export function clGetAllPlugins(): [{ install: (app: any) => void }]
 export function clPatch (source: any, patches: any): object