@castlabs/ui 7.0.2 → 7.0.4

package/dist/checked.f00b2c85.svg

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

package/dist/select-disabled.c5e07724.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/dist/select.10c23108.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#262a35' 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.0.2",
+  "version": "7.0.4",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

package/src/assets/bs/checked.svg

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

package/src/assets/bs/select-disabled.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/src/assets/bs/select.svg

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

package/src/components/ClAlert/style.scss

@@ -36,10 +36,6 @@
       color: $color-attention;
       content: '\f057';
     }
-
-    a {
-      color: $color-attention;
-    }
   }
 
   &.cl-alert-warning {

package/src/components/ClButton/style.scss

@@ -14,7 +14,7 @@
   @include cl-button-focus-outline;
 
   &.cl-btn-icon {
-    min-width: 2.1em;
+    min-width: 2em;
     padding-left: 0;
     padding-right: 0;
   }
@@ -48,8 +48,10 @@
   @extend %cl-a-btn;
 
   @include typography-link($color-text, $color-ci-red, 0);
+  @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 
   border: 0;
+  border-radius: 0;
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;

package/src/components/ClDropdown/style.scss

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

package/src/components/ClDropzone/style.scss

@@ -2,7 +2,7 @@
   border: px(2) dashed $color-ci-clay;
   border-radius: $brand-border-radius;
   cursor: pointer;
-  padding: $spacing-tiny;
+  padding: $spacing-tiny $spacing-small;
   text-align: center;
 
   i {

package/src/components/ClFooter/style.scss

@@ -13,6 +13,7 @@
 
   a {
     @include typography-link(var(--cl-color-text), $color-ci-red, 0);
+    @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 
     &:hover {
       text-decoration: underline;

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

@@ -94,9 +94,8 @@ $list-dt-width: 14rem;
 
 %cl-dl {
   dt {
-    @extend %cl-p-form-label;
-
     display: block;
+    font-weight: 500;
   }
 
   dd {

package/src/components/ClTabs/style.scss

@@ -16,7 +16,7 @@
     text-align: center;
 
     li {
-      border-bottom: $brand-line-width solid $color-line;
+      border-bottom: $brand-line-width solid var(--cl-color-text);
       display: inline-block;
       flex-grow: 1;
       margin: 0 $spacing-micro;

package/src/components/ClTooltip/style.scss

@@ -28,4 +28,48 @@
       color: var(--cl-color-text);
     }
   }
+
+  &.cl-tooltip-primary, // deprecated legacy name
+  &.cl-tooltip-red {
+    #{'--cl-color-background'}: $color-ci-red;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+  }
+
+  &.cl-tooltip-secondary, // deprecated legacy name
+  &.cl-tooltip-sky {
+    #{'--cl-color-background'}: $color-ci-sky;
+    #{'--cl-color-text'}: $color-ci-night;
+  }
+
+  &.cl-tooltip-dark, // deprecated legacy name
+  &.cl-tooltip-night {
+    #{'--cl-color-background'}: $color-ci-night;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+  }
+
+  &.cl-tooltip-light, // deprecated legacy name
+  &.cl-tooltip-clay {
+    #{'--cl-color-background'}: $color-ci-clay;
+    #{'--cl-color-text'}: $color-ci-night;
+  }
+
+  &.cl-tooltip-eggshell {
+    #{'--cl-color-background'}: $color-ci-eggshell;
+    #{'--cl-color-text'}: $color-ci-night;
+  }
+
+  &.cl-tooltip-ash {
+    #{'--cl-color-background'}: $color-ci-ash;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+  }
+
+  &.cl-tooltip-berry {
+    #{'--cl-color-background'}: $color-ci-berry;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+  }
+
+  &.cl-tooltip-petrol {
+    #{'--cl-color-background'}: $color-ci-petrol;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+  }
 }

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

@@ -8,8 +8,7 @@
 
   [invalid],
   .invalid {
-    border-color: $color-attention;
-    // color: $color-attention;
+    border-color: $color-attention !important;
 
     + * + .invalid-feedback,
     + .invalid-feedback {

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

@@ -17,10 +17,6 @@ $form-check-background: $color-ci-eggshell;
     margin-top: $spacing-tiny + $spacing-micro;
   }
 
-  .form-check-label {
-    padding-top: px(1);
-  }
-
   .form-check-input {
     margin-left: -$spacing-medium;
     margin-right: $spacing-micro;
@@ -29,9 +25,11 @@ $form-check-background: $color-ci-eggshell;
     &[type='checkbox'] {
       border: $form-field-border;
       border-radius: px(4);
+      margin-top: 0.2em;
 
       &:checked {
         background-color: $color-selected;
+        background-image: url('#{$castlabs-ui-asset-prefix}/assets/bs/checked.svg?no-inline');
         border: 0;
       }
 
@@ -52,6 +50,7 @@ $form-check-background: $color-ci-eggshell;
 
     &[type='radio'] {
       border: $form-field-border;
+      margin-top: 0.2em;
 
       &:checked {
         background-color: $color-selected;

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

@@ -10,7 +10,7 @@
     @extend %form-field-box;
     @extend %form-field-typography-sans;
 
-    @include form-focus;
+    @include cl-form-focus;
 
     &.cl-file {
       border: 0;
@@ -22,7 +22,7 @@
     }
 
     &:focus + .cl-file-companion {
-      @include form-focus-embed();
+      @include cl-form-focus-embed();
       @include cl-color-focus-outline-raw;
     }
 
@@ -62,7 +62,7 @@
     @extend %form-field-box;
     @extend %form-field-typography-sans;
 
-    @include form-focus;
+    @include cl-form-focus;
 
     letter-spacing: 0;
     text-transform: none;

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

@@ -30,19 +30,21 @@
         z-index: 1; // needed so the focused element's border is always on top
       }
 
-      &:not(.btn) + * {
-        // trick to share one ][ border between 2 inputs
-        &:not(.btn) {
-          border-left-width: 0;
-
-          &:focus,
-          &.invalid:focus {
-            box-shadow: -$brand-line-width 0 0 $color-focus !important; // sass-lint:disable-line no-important
+      @include media-breakpoint-up(sm) {
+        &:not(.btn) + * {
+          // trick to share one ][ border between 2 inputs
+          &:not(.btn) {
+            border-left-width: 0;
+
+            &:focus,
+            &.invalid:focus {
+              box-shadow: -$brand-line-width 0 0 $color-focus !important; // sass-lint:disable-line no-important
+            }
           }
-        }
 
-        &.invalid {
-          box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
+          &.invalid {
+            box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
+          }
         }
       }
     }
@@ -62,38 +64,58 @@
       width: auto;
     }
 
-    // --- un-round left sides ------------------------------------------------------
-    .input-group-text .form-control {
-      border-bottom-left-radius: $brand-border-radius;
-      border-top-left-radius: $brand-border-radius;
-    }
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
 
-    .input-group-text + .form-control,
-    .form-control + .form-control,
-    .form-control + p + .form-control,
-    .form-control + p + p + .form-control {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
+      > * {
+        width: 100% !important;
 
-    // --- un-round right sides ------------------------------------------------------
-    .input-group-text:first-child,
-    .form-control:first-child {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-    }
+        &:not(:first-child) {
+          margin-top: $spacing-tiny;
+        }
 
-    .form-control + .form-control,
-    .form-control + p + .form-control,
-    .form-control + p + p + .form-control {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+        &.btn {
+          font-size: 0.75em;
+          margin-left: 0 !important;
+        }
+      }
     }
 
-    > .cl-last-child,
-    > :last-child {
-      border-bottom-right-radius: $brand-border-radius !important;
-      border-top-right-radius: $brand-border-radius !important;
+    @include media-breakpoint-up(sm) {
+      > .input-group-text,
+      > .form-control {
+        border-radius: 0;
+
+        &:first-of-type {
+          border-bottom-left-radius: $brand-border-radius;
+          border-top-left-radius: $brand-border-radius;
+        }
+
+        &:last-of-type {
+          border-bottom-right-radius: $brand-border-radius;
+          border-top-right-radius: $brand-border-radius;
+        }
+      }
+
+      .input-group-text + .form-control,
+      .form-control + .form-control,
+      .form-control + p + .form-control,
+      .form-control + p + p + .form-control {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+
+      .input-group-text:has(+ .form-control),
+      .form-control:has(+ .form-control),
+      .form-control:has(+ p + .form-control),
+      .form-control:has(+ p + p + .form-control) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+
+        &:not(.btn) {
+          border-right-color: $color-ci-clay;
+        }
+      }
     }
   }
 }

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

@@ -36,7 +36,7 @@
     @extend %form-field-box;
     @extend %form-field-typography-monospace;
 
-    @include form-focus;
+    @include cl-form-focus;
 
     &.form-control-plaintext {
       background-color: transparent;
@@ -79,7 +79,6 @@
 
   [type='range'] {
     $color-bullet: $color-ci-night;
-    $color-bullet-focus: $color-ci-berry;
 
     appearance: none;
     background: $color-ci-clay;
@@ -110,13 +109,7 @@
     }
 
     &:focus {
-      &::-webkit-slider-thumb {
-        background: $color-bullet-focus;
-      }
-
-      &::-moz-range-thumb {
-        background: $color-bullet-focus;
-      }
+      @include cl-color-focus-outline(var(--cl-color-focus), 2px);
     }
   }
 }

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

@@ -16,8 +16,10 @@
     @extend %form-field-box;
     @extend %form-field-typography-monospace;
 
-    @include form-focus;
+    @include cl-form-focus;
 
+    background-image:
+      url('#{$castlabs-ui-asset-prefix}/assets/bs/select.svg?no-inline'), none, none;
     display: block;
 
     &.cl-field-sans {
@@ -27,6 +29,12 @@
     &.cl-field-monospace {
       @extend %form-field-typography-monospace;
     }
+
+    &:disabled,
+    &.disabled {
+      background-image:
+        url('#{$castlabs-ui-asset-prefix}/assets/bs/select-disabled.svg?no-inline'), none, none;
+    }
   }
 
   .input-group {

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

@@ -217,7 +217,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
       padding-bottom: $spacing-tiny;
 
       summary {
-        border-bottom: 2px solid $color-ci-clay;
+        border-bottom: $brand-line-width solid $sidenav-color-separator;
         margin-bottom: $spacing-tiny;
       }
 
@@ -230,6 +230,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     .cl-dropdown-item {
       @include cl-color-focus-outline(var(--cl-color-text));
 
+      color: var(--cl-color-text);
       line-height: 1;
       padding: $spacing-small;
 
@@ -248,7 +249,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
       }
 
       &:hover:not(.active) {
-        background-color: $color-ci-night;
+        background-color: $color-ci-red;
       }
     }
 
@@ -261,11 +262,14 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
 
   .cl-nav-label {
     // -----------------------------------------------------------
-    @extend %cl-p-tag;
+    @extend %cl-p-label;
 
-    color: inherit !important; // sass-lint:disable-line no-important
-    margin-bottom: $spacing-tiny;
-    margin-left: $spacing-small;
+    color: var(--cl-color-accent);
+    margin: $spacing-medium $spacing-small $spacing-tiny;
+
+    hr + & {
+      margin-top: $spacing-tiny;
+    }
   }
 
   .cl-nav-item {
@@ -303,7 +307,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     }
 
     &:hover {
-      background-color: var(--cl-color-highlight);
+      color: $color-ci-red;
     }
 
     &.active {
@@ -348,7 +352,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
 
     &[open] {
       summary {
-        border-bottom: 1px solid $sidenav-color-separator;
+        border-bottom: $brand-line-width solid $sidenav-color-separator;
       }
     }
 

package/src/components/table/ClTable/style.variables.scss

@@ -136,19 +136,7 @@ $table-lineheight: 1.2em;
 }
 
 %cl-table-data-light {
-  tbody {
-    tr {
-      &:nth-child(odd) td {
-        background-color: $color-ci-eggshell;
-      }
-    }
-  }
-
-  tr:nth-child(odd) .cl-td-links {
-    background-color: $color-ci-eggshell;
-  }
-
-  tr:nth-child(even) .cl-td-links {
-    background-color: var(--cl-color-highlight);
+  tbody tr td {
+    background-color: var(--cl-color-background);
   }
 }

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

@@ -60,7 +60,9 @@ a.cl-a-none:not(.btn) {
 .cl-a-quickaction {
   @extend %cl-a-btn;
   @extend %cl-a-transparent;
+  @include cl-color-focus-outline(var(--cl-color-focus), 2px);
 
+  border-radius: 0;
   margin-left: $spacing-tiny;
   text-decoration: none;
 

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

@@ -1,3 +1,7 @@
 .cl-back-cancel-ok {
   padding-top: 0;
+
+  + .cl-section {
+    margin-top: 0;
+  }
 }

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

@@ -7,11 +7,6 @@
   transform: translate(-50%);
   z-index: $layer-z-sidenav;
 
-  .cl-asset-cookie {
-    font-size: 2em;
-    margin-top: $spacing-small;
-  }
-
   .btn {
     display: inline !important; // sass-lint:disable-line no-important
     width: 8rem !important; // sass-lint:disable-line no-important

package/src/fonts/DMMono/DMMono.scss

@@ -2,35 +2,38 @@
   font-family: 'DM Mono';
   font-style: normal;
   font-weight: 300;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300.woff2?no-inline') format('woff2');
 }
 @font-face {
   font-family: 'DM Mono';
   font-style: italic;
   font-weight: 300;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300italic.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_300italic.woff2?no-inline')
+    format('woff2');
 }
 @font-face {
   font-family: 'DM Mono';
   font-style: normal;
   font-weight: 400;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400.woff2?no-inline') format('woff2');
 }
 @font-face {
   font-family: 'DM Mono';
   font-style: italic;
   font-weight: 400;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400italic.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_400italic.woff2?no-inline')
+    format('woff2');
 }
 @font-face {
   font-family: 'DM Mono';
   font-style: normal;
   font-weight: 500;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500.woff2?no-inline') format('woff2');
 }
 @font-face {
   font-family: 'DM Mono';
   font-style: italic;
   font-weight: 500;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500italic.woff2') format('woff2');
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/DMMono/DM_Mono_500italic.woff2?no-inline')
+    format('woff2');
 }

package/src/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap.scss

@@ -2,20 +2,20 @@
   font-family: NonNaturalGroteskInktrap;
   font-style: normal;
   font-weight: 400;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Regular.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Regular.woff2?no-inline')
     format('woff2');
 }
 @font-face {
   font-family: NonNaturalGroteskInktrap;
   font-style: normal;
   font-weight: 500;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Medium.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Medium.woff2?no-inline')
     format('woff2');
 }
 @font-face {
   font-family: NonNaturalGroteskInktrap;
   font-style: normal;
   font-weight: 700;
-  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Bold.woff2')
+  src: url('#{$castlabs-ui-asset-prefix}/fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap-Bold.woff2?no-inline')
     format('woff2');
 }