@castlabs/ui 7.0.0 → 7.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",

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;
@@ -68,7 +68,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 +129,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

@@ -30,17 +30,24 @@ details.card {
       align-items: center;
       background-color: var(--cl-color-background);
       box-shadow: -8px 0 4px var(--cl-color-background);
-      color: $color-ci-silver;
+      color: $color-ci-clay;
       display: flex;
-      height: 100%;
+      height: 80%;
       justify-content: flex-start;
       position: absolute;
       right: $card-spacing;
-      top: 0;
+      top: 10%;
+    }
+
+    &:hover,
+    &:hover::after {
+      color: $color-ci-red !important;
     }
 
     &:focus {
       @include cl-color-focus-outline;
+
+      border-radius: $brand-border-radius;
     }
   }
 

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

@@ -11,7 +11,6 @@ $card-spacing-tight: $spacing-small;
 %cl-card {
   @extend %cl-color-night-outline;
 
-  #{'--cl-color-accent'}: $color-ci-petrol;
   background-color: transparent;
   background-position: center;
   background-size: cover;
@@ -42,6 +41,15 @@ $card-spacing-tight: $spacing-small;
     }
   }
 
+  &:not([class*='cl-color-']) {
+    #{'--cl-color-accent'}: $color-accent;
+  }
+
+  &.cl-color-red-outline:not([class*='cl-color-text-']) {
+    #{'--cl-color-text'}: $color-ci-night;
+    #{'--cl-color-accent'}: $color-accent;
+  }
+
   a:not(.btn) {
     @include typography-link(var(--cl-color-link), var(--cl-color-hover));
 
@@ -52,10 +60,6 @@ $card-spacing-tight: $spacing-small;
     color: var(--cl-color-text) !important;
   }
 
-  .btn {
-    width: 100%;
-  }
-
   &.cl-card-oversized {
     @include media-breakpoint-up(sm) {
       margin-left: -$card-spacing;
@@ -71,6 +75,12 @@ $card-spacing-tight: $spacing-small;
     padding: calc($card-spacing - $brand-line-width);
   }
 
+  .card-footer {
+    .btn {
+      width: 100%;
+    }
+  }
+
   form.card-body {
     margin-top: 0;
   }
@@ -187,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,
@@ -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/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/form/ClFieldFile/style.scss

@@ -23,11 +23,12 @@
 
     &:focus + .cl-file-companion {
       @include 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 + & {

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%;

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

@@ -68,13 +68,13 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     // ------------------------------------------------------------
     @extend %cl-p-nav;
 
-    $background: $sidenav-color-account;
-    $foreground: $color-ci-eggshell;
-
+    #{'--cl-color-background'}: $sidenav-color-account;
+    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
     align-items: center;
-    background-color: $background;
+    background-color: var(--cl-color-background);
     border-bottom: 0;
-    color: $foreground;
+    color: var(--cl-color-text);
     display: flex;
     flex-direction: row;
     font-weight: 500;
@@ -84,15 +84,15 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     padding: 0 $spacing-small;
 
     a {
-      @include typography-link($foreground, $foreground, 0);
-      @include cl-color-focus-outline($foreground);
+      @include typography-link(var(--cl-color-text), var(--cl-color-text), 0);
+      @include cl-color-focus-outline(var(--cl-color-focus), 0);
 
       line-height: 1;
       padding-bottom: 0;
 
       &:first-of-type {
         // the username
-        @include cl-nav-fadeout($background);
+        @include cl-nav-fadeout(var(--cl-color-background));
 
         margin-right: $spacing-micro;
         width: 100%;
@@ -101,7 +101,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
           // user icon
           @include cl-fontawesome('\f2bd');
 
-          color: $color-ci-haze;
+          color: var(--cl-color-text);
           font-size: px(22);
           line-height: 1;
           margin-right: $spacing-tiny;
@@ -120,6 +120,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   details.cl-nav-organization {
     #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-background'}: $sidenav-color-organization;
+    #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
     background-color: var(--cl-color-background);
     color: var(--cl-color-text);
     display: block;
@@ -187,11 +188,12 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
       box-shadow: -8px 0 4px var(--cl-color-background);
       color: $color-ci-clay;
       display: flex;
-      height: calc(100% - 4px);
+      font-size: px(18);
+      height: calc(100% - 8px); // give room for focus outline
       justify-content: flex-start;
       position: absolute;
       right: 4px;
-      top: 2px;
+      top: 4px;
       width: calc($spacing-small * 2 - 2px);
     }
 
@@ -203,7 +205,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   }
 
   a.cl-nav-organization {
-    @include cl-color-focus-outline($color-ci-eggshell);
+    @include cl-color-focus-outline;
   }
 
   details.cl-nav-organization {
@@ -271,7 +273,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     @extend %cl-p-nav;
 
     @include typography-link($sidenav-color-text, $sidenav-color-text, 0);
-    @include cl-color-focus-outline($sidenav-color-text);
+    @include cl-color-focus-outline;
 
     display: inline-block;
     font-weight: 500;
@@ -335,6 +337,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
   .cl-dropdown {
     #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-background'}: $sidenav-color-app;
+    #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
     background-color: var(--cl-color-background);
     color: var(--cl-color-text);
 

package/src/components/navigation/ClNavTop/style.scss

@@ -8,6 +8,7 @@
 .cl-nav-top {
   // first/top line in content area
   @extend %section-padding;
+  @extend %cl-color-night;
 
   @include spacing-before(0);
 
@@ -156,7 +157,7 @@
 
     &::after {
       // we use a block item, not a border, so content does not jump
-      background-color: $color-ci-silver;
+      background-color: $color-ci-clay;
       content: '';
       display: block;
       height: 100%;

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

@@ -10,7 +10,7 @@
   }
 
   .cl-td-audit {
-    color: $color-ci-silver;
+    color: $color-ci-clay;
     overflow-wrap: unset;
     text-align: center;
     width: 0.9em;

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

@@ -10,7 +10,7 @@
     }
 
     .fa-minus::before {
-      color: $color-ci-silver;
+      color: $color-ci-clay;
     }
   }
 }

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

@@ -65,7 +65,7 @@ a.cl-a-none:not(.btn) {
   text-decoration: none;
 
   &:not(:hover) {
-    color: $color-ci-silver;
+    color: $color-ci-clay;
   }
 }
 

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

@@ -29,8 +29,15 @@
     width: calc(100% - $spacing-small);
 
     .card-body {
-      padding-left: 0;
-      padding-right: 0;
+      padding-left: $spacing-small;
+      padding-right: $spacing-small;
+
+      .cl-spacing-box.text-center {
+        > * {
+          margin-left: $spacing-tiny;
+          margin-right: $spacing-tiny;
+        }
+      }
     }
   }
 

package/src/styles/abstracts/color.scss

@@ -32,7 +32,7 @@ $color-ci-cloud: $color-ci-ash;
 $color-ci-silver: $color-ci-clay;
 $color-ci-smoke: $color-ci-clay;
 $color-ci-haze: $color-ci-eggshell;
-$color-dark: $color-ci-cloud;
+$color-dark: $color-ci-ash;
 
 $color-ci-green: #8cd867; //2a7a5c;
 $color-ci-orange: #d1ac00; // fec671; //f18f01;
@@ -50,23 +50,28 @@ $color-disabled: $color-ci-clay;
 
 $color-text: $color-ci-night;
 $color-selected: $color-ci-red;
+$color-accent: $color-ci-petrol;
 $color-focus: $color-ci-night;
 $color-background: $color-ci-white;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
-$color-line: $color-ci-smoke;
-$color-line-focus: $color-ci-silver;
+$color-line: $color-ci-clay;
+$color-line-focus: $color-ci-clay;
 
 $bar-ui-width: px(4);
 
-@mixin cl-color-focus-outline($color: $color-ci-ash, $offset: -2px) {
+@mixin cl-color-focus-outline-raw($color: var(--cl-color-focus), $offset: -3px) {
+  box-shadow: none; // disable BS outlines
+  outline: 1px dashed $color;
+  outline-offset: $offset;
+  z-index: 100;
+}
+
+@mixin cl-color-focus-outline($color: var(--cl-color-focus), $offset: -3px) {
   &:focus,
   &:focus-visible,
   &:focus-within {
-    box-shadow: none; // disable BS outlines
-    outline: 1px dashed $color;
-    outline-offset: $offset;
-    z-index: 100;
+    @include cl-color-focus-outline-raw($color, $offset);
   }
 }
 
@@ -103,7 +108,7 @@ $bar-ui-width: px(4);
 
   &.cl-accent-petrol,
   .cl-accent-petrol {
-    #{'--cl-color-accent'}: $color-ci-petrol;
+    #{'--cl-color-accent'}: $color-accent;
   }
 
   &.cl-accent-berry,
@@ -125,11 +130,12 @@ $bar-ui-width: px(4);
   #{'--cl-color-border'}: $color-ci-night;
   #{'--cl-color-text'}: $color-ci-night;
   #{'--cl-color-line'}: $color-ci-clay;
-  #{'--cl-color-accent'}: $color-ci-petrol;
+  #{'--cl-color-accent'}: $color-accent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-hover'}: $color-ci-red;
+  #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 }
 
 %cl-color-night-outline {
@@ -141,6 +147,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 }
 
 %cl-color-red {
@@ -151,6 +158,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-red-outline {
@@ -160,6 +168,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-red;
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-focus'}: rgba($color-ci-red, 0.5);
 }
 
 %cl-color-sky {
@@ -170,6 +179,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 }
 
 %cl-color-night {
@@ -180,6 +190,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-eggshell {
@@ -190,6 +201,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-berry;
+  #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 }
 
 %cl-color-clay {
@@ -200,6 +212,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-night;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-night;
+  #{'--cl-color-focus'}: rgba($color-ci-night, 0.5);
 }
 
 %cl-color-ash {
@@ -210,6 +223,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-petrol {
@@ -220,6 +234,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-berry {
@@ -230,6 +245,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-transparent {
@@ -240,6 +256,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-eggshell;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-disabled {
@@ -250,6 +267,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-disabled;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-disabled;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 %cl-color-faded {
@@ -260,6 +278,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-accent'}: $color-ci-ash;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-ash;
+  #{'--cl-color-focus'}: rgba($color-ci-ash, 0.5);
 }
 
 %cl-color-none {
@@ -267,6 +286,7 @@ $bar-ui-width: px(4);
   #{'--cl-color-border'}: transparent;
   #{'--cl-color-highlight'}: rgba(#fff, 0.1);
   #{'--cl-color-link'}: $color-ci-eggshell;
+  #{'--cl-color-focus'}: rgba($color-ci-eggshell, 0.75);
 }
 
 // ----------------------------------------------

package/src/styles/components/button.variables.scss

@@ -81,10 +81,10 @@
   }
 }
 
-@mixin cl-button-focus-outline($color) {
+@mixin cl-button-focus-outline() {
   .btn-check:focus + &,
   &:focus {
-    @include cl-color-focus-outline($color, -3px);
+    @include cl-color-focus-outline;
 
     box-shadow: none;
   }

package/src/styles/layout/helper.scss

@@ -44,6 +44,17 @@ h6.cl-faded,
   }
 }
 
+@for $i from 0 through 10 {
+  .cl-w-#{$i * 10} {
+    width: $i * 10;
+  }
+}
+
+.cl-w-auto,
+.cl-width-auto {
+  width: auto;
+}
+
 .cl-text-start,
 .text-start {
   text-align: left;

package/src/styles/layout/spacing.scss

@@ -179,6 +179,7 @@ main {
   > *:first-child {
     display: inline-block;
     margin: $spacing $spacing 0 0;
+    vertical-align: text-bottom;
 
     @include media-breakpoint-down(sm) {
       // buttons are 100% width on sm

package/src/styles/layout/typography.scss

@@ -189,6 +189,7 @@ main {
   code,
   samp {
     @extend %cl-p-pre;
+    @include cl-color-focus-outline;
 
     color: var(--cl-color-text);
   }