@castlabs/ui 7.0.1 → 7.0.3

package/package.json

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

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

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

@@ -44,17 +44,19 @@ $badge-baseline-shift: 0.055555em; // 1px @ 14pt
 %cl-badge-derived {
   @extend %cl-badge;
 
+  border: 0;
   content: ' ';
-  padding-left: $spacing-tiny;
-  padding-right: 0;
-  width: 3em;
+  padding: 0 0 0 $spacing-tiny;
 
-  + * {
-    margin-left: -1.75em;
+  > .cl-badge {
+    margin-left: -1em;
   }
 
-  &.cl-badge-sm + * {
-    margin-left: -2em;
+  > .cl-badge.cl-badge-sm,
+  > .cl-plan,
+  > .cl-role,
+  > .cl-hashtag {
+    margin-left: -1.25em;
   }
 
   &::before {

package/src/components/ClButton/style.scss

@@ -11,7 +11,7 @@
   @extend %cl-p-nav;
   @include cl-button;
   @include cl-button-color;
-  @include cl-button-focus-outline(var(--cl-color-text));
+  @include cl-button-focus-outline;
 
   &.cl-btn-icon {
     min-width: 2.1em;
@@ -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;
@@ -68,7 +70,7 @@
 
 .cl-btn-ghost {
   // an accessible, invisible button that can trigger clicks
-  @include cl-button-focus-outline($color-text);
+  @include cl-button-focus-outline;
 
   background: transparent;
   border: 0;
@@ -129,7 +131,7 @@
 
 // --- responsive tweaks -------------------------------------------------------
 
-.btn:not(.cl-btn-quickaction) {
+.btn:not([class*='cl-btn-']) {
   @include media-breakpoint-down(sm) {
     width: 100%;
   }

package/src/components/ClCard/style.scss

@@ -46,6 +46,7 @@ details.card {
 
     &:focus {
       @include cl-color-focus-outline;
+
       border-radius: $brand-border-radius;
     }
   }

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

@@ -197,7 +197,7 @@ $card-spacing-tight: $spacing-small;
 
   .card-header {
     @extend %cl-h4;
-    @include cl-button-focus-outline(var(--cl-color-text));
+    @include cl-button-focus-outline;
 
     color: var(--cl-color-text);
   }

package/src/components/ClDropdown/style.scss

@@ -8,7 +8,7 @@
 
 $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-silver, 0.5);
+$dropdown-color-chevron-bright: rgba($color-ci-clay, 0.5);
 $dropdown-line-height: 1.25em;
 
 .cl-dropdown {
@@ -22,7 +22,7 @@ $dropdown-line-height: 1.25em;
   summary {
     @extend %cl-p-nav;
 
-    @include cl-color-focus-outline(var(--cl-color-text));
+    @include cl-color-focus-outline;
 
     border: $dropdown-border solid var(--cl-color-background); // border need so that outline is not behind ::after
     color: var(--cl-color-text);
@@ -44,12 +44,13 @@ $dropdown-line-height: 1.25em;
       box-shadow: -8px 0 4px var(--cl-color-background);
       color: $dropdown-color-chevron-bright;
       display: flex;
-      height: 100%;
+      font-size: px(18);
+      height: calc(100% - 8px);
       justify-content: flex-start;
       position: absolute;
-      right: 0;
-      top: 0;
-      width: $spacing-small * 2;
+      right: 4px;
+      top: 4px;
+      width: calc($spacing-small * 2 - 2px);
     }
 
     > span,
@@ -76,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 {
@@ -144,7 +145,7 @@ div.cl-dropdown summary {
 }
 
 .cl-dropdown-arrow {
-  background-color: $color-ci-haze;
+  background-color: $color-ci-eggshell;
   content: '';
   display: inline-block;
   height: 1rem;
@@ -164,7 +165,7 @@ div.cl-dropdown summary {
   @extend %cl-p-nav;
 
   @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
-  @include cl-color-focus-outline(var(--cl-color-text));
+  @include cl-color-focus-outline;
 
   display: block;
   line-height: $dropdown-line-height;

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/ClPagination/style.scss

@@ -25,7 +25,7 @@
   .page-link {
     @include cl-button;
     @include cl-button-color;
-    @include cl-button-focus-outline(var(--cl-color-text));
+    @include cl-button-focus-outline;
 
     border-radius: $brand-border-radius !important; // overrule BS
     font-size: px(14);

package/src/components/ClTabs/style.scss

@@ -73,6 +73,12 @@
   }
 
   @for $i from 1 through 16 {
+    .cl-tab-#{$i}:focus ~ ul {
+      .cl-tab-#{$i} label {
+        @include cl-color-focus-outline-raw;
+      }
+    }
+
     .cl-tab-#{$i}:checked ~ ul {
       .cl-tab-#{$i} {
         border-color: $color-selected;

package/src/components/ClToggle/style.scss

@@ -6,7 +6,7 @@
 // This file defines castlabs toggle/checkboxes.
 
 .cl-toggle-checkbox {
-  @include cl-button-focus-outline(var(--cl-color-text));
+  @include cl-button-focus-outline;
 
   // hide checkbox but keep it tab-able
   display: inline-block;
@@ -34,9 +34,14 @@
     }
   }
 
+  &:focus + .cl-badge {
+    @include cl-color-focus-outline-raw;
+  }
+
   &:not(:checked) + .cl-badge {
     background-color: transparent;
     color: var(--cl-color-background);
+    #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 
     i:nth-of-type(1) {
       display: none;

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,6 +25,7 @@ $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;
@@ -52,6 +49,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,12 +22,13 @@
     }
 
     &:focus + .cl-file-companion {
-      @include form-focus-embed();
+      @include cl-form-focus-embed();
+      @include cl-color-focus-outline-raw;
     }
 
     &[invalid]:focus + .cl-file-companion,
     &.invalid:focus + .cl-file-companion {
-      border-color: $color-ci-silver;
+      border-color: $color-ci-clay;
     }
 
     .form-label + & {
@@ -61,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,7 +16,7 @@
     @extend %form-field-box;
     @extend %form-field-typography-monospace;
 
-    @include form-focus;
+    @include cl-form-focus;
 
     display: block;
 

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

@@ -57,7 +57,7 @@
     margin-top: $spacing-micro;
 
     &::before {
-      color: $color-ci-silver;
+      color: $color-ci-clay;
       content: '\f05a';
       display: inline-block;
       font-family: 'Font Awesome 5 Free';

package/src/components/modal/ClModal/style.scss

@@ -13,7 +13,7 @@
   display: none;
   height: 100vh;
   left: 0;
-  padding: 2rem 0;
+  padding: 2rem $spacing-tiny;
   position: fixed;
   top: 0;
   width: 100%;