@castlabs/ui 7.0.1 → 7.0.2

package/package.json

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

@@ -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,
@@ -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;
@@ -55,19 +55,23 @@ $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);
   }
 }
 
@@ -131,6 +135,7 @@ $bar-ui-width: px(4);
   #{'--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 {
@@ -142,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 {
@@ -152,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 {
@@ -161,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 {
@@ -171,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 {
@@ -181,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 {
@@ -191,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 {
@@ -201,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 {
@@ -211,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 {
@@ -221,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 {
@@ -231,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 {
@@ -241,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 {
@@ -251,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 {
@@ -261,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 {
@@ -268,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/typography.scss

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

package/src/styles/layout/typography.variables.scss

@@ -92,7 +92,7 @@ $typography-monospace-line-height: 1.375;
 
 @mixin typography-link-invisible {
   @include typography-link(inherit, inherit, 0);
-  @include cl-color-focus-outline($color-text, 1px);
+  @include cl-color-focus-outline(var(--cl-color-focus), 1px);
 }
 
 @mixin cl-btn-a($line-height-px) {
@@ -129,7 +129,7 @@ $typography-monospace-line-height: 1.375;
 
 %cl-a {
   @include typography-link(var(--cl-color-link), $color-ci-red);
-  @include cl-color-focus-outline(var(--cl-color-link), 1px);
+  @include cl-color-focus-outline(var(--cl-color-focus), 1px);
 }
 
 %cl-a-text {

package/src/styles/vendors/castlabs.scss

@@ -1,9 +1,9 @@
 .cl-theme-v2 {
   .cl-section-primary.cl-section-tight {
-    background-color: $color-ci-haze;
+    background-color: $color-ci-eggshell;
 
     h1 {
-      color: $color-ci-dusk;
+      color: $color-ci-night;
     }
   }