@castlabs/ui 7.0.10 → 7.1.0

package/package.json

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

@@ -108,7 +108,7 @@
       border: 0;
       display: inline-block;
       font-weight: 500;
-      line-height: 1em;
+      line-height: 1;
       padding: 0;
       text-decoration: underline;
     }

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

@@ -2,7 +2,6 @@ $badge-color-fg: $color-ci-white;
 $badge-color-bg: $color-dark;
 $badge-padding: px(4) px(8);
 $badge-min-height: 1.642857143em; // 23px @ 14pt
-$badge-baseline-shift: 0.055555em; // 1px @ 14pt
 
 @mixin cl-badge-small {
   font-size: px(12);
@@ -19,7 +18,7 @@ $badge-baseline-shift: 0.055555em; // 1px @ 14pt
   color: var(--cl-color-text);
   display: inline-block;
   letter-spacing: 0;
-  line-height: 1em;
+  line-height: 1;
   padding: px(5) px(16);
   text-transform: uppercase;
   white-space: nowrap;
@@ -36,7 +35,7 @@ $badge-baseline-shift: 0.055555em; // 1px @ 14pt
   }
 
   i {
-    line-height: 0.75em;
+    line-height: 0.75;
     margin-right: $spacing-micro;
   }
 }
@@ -44,7 +43,9 @@ $badge-baseline-shift: 0.055555em; // 1px @ 14pt
 %cl-badge-derived {
   @extend %cl-badge;
 
+  background-color: transparent;
   border: 0;
+  box-shadow: 0 0 0 $brand-line-width $color-ci-clay inset;
   content: ' ';
   padding: 0 0 0 $spacing-tiny;
 
@@ -62,8 +63,9 @@ $badge-baseline-shift: 0.055555em; // 1px @ 14pt
   &::before {
     @include cl-fontawesome('\f064');
 
+    color: $color-ci-clay;
     font-size: 0.95em;
-    line-height: 0.75em;
+    line-height: 0.75;
     position: relative;
     top: 0;
     transform: scale(0.75) scaleY(-1) translate(-0.4em, -0.025em);

package/src/components/ClButton/style.scss

@@ -36,11 +36,10 @@
   &.btn-sm {
     font-size: px(14);
     font-weight: 700; // repeat as @include overrides
-    line-height: 1em; // repeat as @include overrides
+    line-height: 1; // repeat as @include overrides
     opacity: 1;
     overflow: hidden;
-    padding: typography-sans-baselineshift($spacing-tiny, px(14)) $spacing-medium
-      typography-sans-baselineunshift($spacing-tiny, px(14));
+    padding: px(7) $spacing-medium;
   }
 }
 

package/src/components/ClCard/style.scss

@@ -44,7 +44,7 @@ details.card {
       color: $color-ci-red !important;
     }
 
-    &:focus {
+    &:focus-visible {
       @include cl-color-focus-outline;
 
       border-radius: $brand-border-radius;

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

@@ -112,7 +112,7 @@ $card-spacing-tight: $spacing-small;
   }
 
   .card-footer {
-    line-height: 0.5em;
+    line-height: 0.5;
   }
 
   > .list-group {
@@ -179,8 +179,7 @@ $card-spacing-tight: $spacing-small;
 
 %cl-tight {
   .card-header {
-    padding: typography-sans-baselineshift($card-spacing-tight * 0.75, px(16)) $card-spacing-tight
-      typography-sans-baselineunshift($card-spacing-tight * 0.75, px(16));
+    padding: $card-spacing-tight * 0.75 $card-spacing-tight;
   }
 
   .card-body {

package/src/components/ClDropdown/style.scss

@@ -9,7 +9,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-clay, 0.5);
-$dropdown-line-height: 1.25em;
+$dropdown-line-height: 1.25;
 
 .cl-dropdown {
   position: relative;
@@ -90,7 +90,7 @@ $dropdown-line-height: 1.25em;
     font-size: px(14);
     font-weight: 500;
     letter-spacing: 0;
-    line-height: 1.4em;
+    line-height: 1.4;
     margin-top: 0;
     opacity: $color-hover-opacity;
   }

package/src/components/ClList/style.scss

@@ -83,6 +83,10 @@ main {
   }
 }
 
+ol.cl-list {
+  @extend %cl-list-number;
+}
+
 // --- definition lists --------------------------------------------------------
 
 .cl-dl {

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

@@ -88,6 +88,26 @@ $list-indent: $spacing-large;
   }
 }
 
+%cl-list-number {
+  counter-reset: item;
+
+  li {
+    margin-left: -$spacing-micro;
+
+    &::before {
+      @extend %cl-p-pre;
+
+      color: var(--cl-color-accent);
+      content: counter(item) '.';
+      counter-increment: item;
+      font-size: px(16);
+      font-weight: 700;
+      margin-right: $spacing-micro;
+      position: static;
+      text-align: end;
+    }
+  }
+}
 // -----------------------------------------------------------------------------
 
 $list-dt-width: 14rem;

package/src/components/ClPagination/style.scss

@@ -30,9 +30,13 @@
     border-radius: $brand-border-radius !important; // overrule BS
     font-size: px(14);
     font-weight: 500;
-    line-height: px(18);
+    line-height: 1.25;
     min-width: 36px;
     padding: $spacing-tiny;
+
+    &:focus {
+      box-shadow: none;
+    }
   }
 
   .page-item {

package/src/components/ClTabs/style.scss

@@ -34,6 +34,7 @@
     label {
       @extend %cl-p-form-label;
 
+      border-radius: $brand-border-radius * 0.75; // only for focus outlines
       cursor: pointer;
       margin: 0 $spacing-micro;
       min-width: $spacing-huge * 2 + $spacing-tiny * 2;
@@ -73,7 +74,7 @@
   }
 
   @for $i from 1 through 16 {
-    .cl-tab-#{$i}:focus ~ ul {
+    .cl-tab-#{$i}:focus-visible ~ ul {
       .cl-tab-#{$i} label {
         @include cl-color-focus-outline-raw;
       }

package/src/components/ClToggle/style.scss

@@ -34,7 +34,7 @@
     }
   }
 
-  &:focus + .cl-badge {
+  &:focus-visible + .cl-badge {
     @include cl-color-focus-outline-raw;
   }
 

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

@@ -18,6 +18,8 @@ $form-check-background: $color-ci-eggshell;
   }
 
   .form-check-input {
+    @include no-focus;
+
     margin-left: -$spacing-medium;
     margin-right: $spacing-micro;
     margin-top: 0.25em;
@@ -64,7 +66,7 @@ $form-check-background: $color-ci-eggshell;
       }
     }
 
-    &:focus {
+    &:focus-visible {
       @include cl-color-focus-outline($color-selected, 2px);
     }
 

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

@@ -21,13 +21,13 @@
       width: 0;
     }
 
-    &:focus + .cl-file-companion {
+    &:focus-visible + .cl-file-companion {
       @include cl-form-focus-embed();
       @include cl-color-focus-outline-raw;
     }
 
-    &[invalid]:focus + .cl-file-companion,
-    &.invalid:focus + .cl-file-companion {
+    &[invalid]:focus-visible + .cl-file-companion,
+    &.invalid:focus-visible + .cl-file-companion {
       border-color: $color-ci-clay;
     }
 

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

@@ -36,9 +36,9 @@
           &: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
+            &:focus-visible,
+            &.invalid:focus-visible {
+              box-shadow: 0 0 0 1px $color-ci-berry inset !important;
             }
           }
 

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

@@ -110,7 +110,7 @@
       width: $spacing-medium;
     }
 
-    &:focus {
+    &:focus-visible {
       @include cl-color-focus-outline(var(--cl-color-focus), 2px);
     }
   }

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

@@ -282,7 +282,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
     display: inline-block;
     font-weight: 500;
     letter-spacing: 0.025em;
-    line-height: 1.5em;
+    line-height: 1.5;
     padding: $spacing-tiny $spacing-small;
     position: relative;
     width: 100%;
@@ -292,7 +292,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
 
       color: $color-ci-ash;
       letter-spacing: 0.025em;
-      line-height: 1.4em;
+      line-height: 1.4;
       margin-top: px(3);
 
       + .cl-nav-item-info {

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

@@ -76,7 +76,7 @@
     }
 
     i {
-      line-height: px(20);
+      line-height: 1.25;
     }
 
     a {
@@ -188,7 +188,7 @@ $navbar-item-spacing: $spacing-medium;
     padding: 0;
 
     &:active,
-    &:focus {
+    &:focus-visible {
       border: 0;
       box-shadow: none;
     }

package/src/fonts/FontAwesome5/FontAwesome5.scss

@@ -19,7 +19,7 @@
 
 .fa-lg {
   font-size: 1.33333em;
-  line-height: 0.75em;
+  line-height: 0.75;
   vertical-align: -0.0667em;
 }
 
@@ -195,7 +195,7 @@
 .fa-stack {
   display: inline-block;
   height: 2em;
-  line-height: 2em;
+  line-height: 2;
   position: relative;
   vertical-align: middle;
   width: 2.5em;

package/src/styles/_global.scss

@@ -57,16 +57,3 @@
 %spacing-none {
   margin-top: 0;
 }
-
-// --- other -------------------------------------------------------------------
-
-@mixin focus-glow-embed($color) {
-  box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); // sass-lint:disable-line no-color-literals
-  outline: 0;
-}
-
-@mixin focus-glow($color) {
-  &:focus {
-    @include focus-glow-embed($color);
-  }
-}

package/src/styles/abstracts/color.scss

@@ -50,7 +50,7 @@ $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-focus: $color-ci-petrol;
 $color-background: $color-ci-white;
 $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different colors
 
@@ -67,9 +67,7 @@ $bar-ui-width: px(4);
 }
 
 @mixin cl-color-focus-outline($color: var(--cl-color-focus), $offset: -3px) {
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
+  &:focus-visible {
     @include cl-color-focus-outline-raw($color, $offset);
   }
 }
@@ -134,7 +132,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-focus'}: $color-ci-night;
 }
 
 %cl-color-night-outline {
@@ -146,7 +144,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-focus'}: $color-ci-night;
 }
 
 %cl-color-red {
@@ -157,7 +155,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-red-outline {
@@ -167,7 +165,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-focus'}: $color-ci-red;
 }
 
 %cl-color-sky {
@@ -178,7 +176,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-focus'}: $color-ci-night;
 }
 
 %cl-color-night {
@@ -189,7 +187,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-eggshell {
@@ -200,7 +198,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-focus'}: $color-ci-night;
 }
 
 %cl-color-clay {
@@ -211,7 +209,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-focus'}: $color-ci-night;
 }
 
 %cl-color-ash {
@@ -222,7 +220,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-petrol {
@@ -233,7 +231,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-berry {
@@ -244,7 +242,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-transparent {
@@ -255,7 +253,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-disabled {
@@ -266,7 +264,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-focus'}: $color-ci-eggshell;
 }
 
 %cl-color-faded {
@@ -277,7 +275,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-focus'}: $color-ci-ash;
 }
 
 %cl-color-none {
@@ -285,7 +283,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);
+  #{'--cl-color-focus'}: $color-ci-eggshell;
 }
 
 // ----------------------------------------------

package/src/styles/abstracts/spacing.scss

@@ -14,7 +14,6 @@ $spacing-large: px(32);
 $spacing-huge: px(48);
 
 $header-nav-height: px(40);
-$header-headline-height: px(80);
 
 @mixin spacing-before-auto($value) {
   margin-bottom: 0;

package/src/styles/abstracts/tools.scss

@@ -33,3 +33,10 @@
     #{$property}: $new-value;
   }
 }
+
+@mixin no-focus {
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+}

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

@@ -10,11 +10,10 @@
   display: inline-block;
   font-size: px(18);
   font-weight: 700; // repeat as @include overrides
-  line-height: 1em; // repeat as @include overrides
+  line-height: 1; // repeat as @include overrides
   opacity: 1;
   overflow: hidden;
-  padding: typography-sans-baselineshift($spacing-tiny, px(18)) $spacing-large
-    typography-sans-baselineunshift($spacing-tiny, px(18));
+  padding: $spacing-tiny $spacing-large;
   text-align: center;
   text-decoration: none;
   transition: opacity 0.15s;
@@ -52,8 +51,8 @@
   }
 
   // our focus (tab'ed) buttons look the same but are outlined
-  .btn-check:focus + &,
-  &:focus {
+  .btn-check:focus-visible + &,
+  &:focus-visible {
     background-color: var(--cl-color-background);
     border-color: var(--cl-color-border);
     color: var(--cl-color-text);
@@ -75,15 +74,14 @@
     }
   }
 
-  &:active,
-  &:active:focus {
+  &:active {
     outline: 0 !important;
   }
 }
 
 @mixin cl-button-focus-outline() {
-  .btn-check:focus + &,
-  &:focus {
+  .btn-check:focus-visible + &,
+  &:focus-visible {
     @include cl-color-focus-outline;
 
     box-shadow: none;

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

@@ -6,7 +6,7 @@
 // This file defines form/input field variables
 
 $form-field-fontsize: px(16);
-$form-field-line-height: px(22);
+$form-field-line-height: 1.375;
 $form-field-min-height: px(36);
 $form-field-border-color: $color-ci-ash;
 $form-field-border: $brand-line-width solid $form-field-border-color;
@@ -48,17 +48,17 @@ $form-spacing-label-input: px(2);
 }
 
 @mixin cl-form-focus-embed {
-  @include cl-button-focus-outline; // additional inner outline
-
-  border-color: $color-focus !important;
+  border-color: $color-ci-berry !important;
   box-shadow: none;
-  color: $color-focus;
+  box-shadow: 0 0 0 1px $color-ci-berry inset;
+  color: var(--cl-color-text);
+  outline: none;
 }
 
 @mixin cl-form-focus {
-  &:focus,
-  &:focus:first-child,
-  &:focus:last-child {
+  &:focus-visible,
+  &:focus-visible:first-child,
+  &:focus-visible:last-child {
     @include cl-form-focus-embed;
   }
 }

package/src/styles/layout/color.scss

@@ -17,6 +17,7 @@
   @extend %cl-color-night-outline;
 }
 
+.cl-color-primary,
 .cl-color-red {
   @extend %cl-color-red;
 }
@@ -29,6 +30,7 @@
   @extend %cl-color-sky;
 }
 
+.cl-color-secondary,
 .cl-color-black,
 .cl-color-text, // legacy name
 .cl-color-dark, // legacy name

package/src/styles/layout/scrollbar.scss

@@ -0,0 +1,11 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines tweaks scrollbars for rounded boxes and uses our CI colors.
+
+main,
+.cl-section {
+  scrollbar-color: $color-ci-clay transparent;
+}

package/src/styles/layout/spacing.scss

@@ -173,7 +173,7 @@ main {
 }
 
 @mixin spacing-box-x($spacing) {
-  line-height: 1em;
+  line-height: 1;
 
   > *,
   > *:first-child {

package/src/styles/layout/typography.scss

@@ -183,12 +183,10 @@ main {
 
   // --- code & monospace --------------------------------------------------------
 
-  pre,
   kbd,
   code,
   samp {
     @extend %cl-p-pre;
-    @include cl-color-focus-outline;
 
     color: var(--cl-color-text);
   }
@@ -199,7 +197,8 @@ main {
   }
 
   pre {
-    padding: $spacing-tiny;
+    @extend %cl-p-pre-box;
+    @include cl-color-focus-outline;
 
     code {
       padding: 0;
@@ -280,6 +279,6 @@ hr {
 // --- text select -------------------------------------------------------------
 
 ::selection {
-  background: $color-ci-night;
+  background: $color-ci-berry;
   color: $color-ci-white;
 }