@castlabs/ui 7.0.1 → 7.0.3

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 {
@@ -215,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;
       }
 
@@ -228,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;
 
@@ -246,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;
       }
     }
 
@@ -271,7 +274,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;
@@ -301,7 +304,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     }
 
     &:hover {
-      background-color: var(--cl-color-highlight);
+      color: $color-ci-red;
     }
 
     &.active {
@@ -335,6 +338,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);
 
@@ -345,7 +349,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/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/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/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

@@ -60,12 +60,14 @@ 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;
 
   &: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/components/form.variables.scss

@@ -33,18 +33,18 @@ $form-spacing-label-input: px(2);
   @include typography-font($typography-monospace-font-list, 400, px(17), 1.59em, 0.025em, 80%);
 }
 
-@mixin form-focus-embed {
-  background-color: var(--cl-color-highlight);
-  border-color: $color-focus;
+@mixin cl-form-focus-embed {
+  @include cl-button-focus-outline; // additional inner outline
+
+  border-color: $color-focus !important;
   box-shadow: none;
   color: $color-focus;
-  outline: 0;
 }
 
-@mixin form-focus {
+@mixin cl-form-focus {
   &:focus,
   &:focus:first-child,
   &:focus:last-child {
-    @include form-focus-embed;
+    @include cl-form-focus-embed;
   }
 }

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), 2px);
 }
 
 @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), 2px);
 }
 
 %cl-a-text {

package/src/styles/vendors/castlabs.scss

@@ -1,17 +1,17 @@
 .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;
     }
   }
 
   .cl-nav-top {
-    border-bottom: 2px solid $color-ci-red;
+    border-bottom: $brand-line-width solid $color-ci-red;
 
     .col-12 {
-      height: calc(3rem - 2px) !important; // sass-lint:disable-line no-important
+      height: calc(3rem - $brand-line-width) !important; // sass-lint:disable-line no-important
     }
   }
 }