@castlabs/ui 7.0.11 → 7.1.0

package/package.json

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

package/src/components/ClButton/style.scss

@@ -39,8 +39,7 @@
     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.variables.scss

@@ -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/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/styles/components/button.variables.scss

@@ -13,8 +13,7 @@
   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;

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

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

@@ -37,14 +37,6 @@ $typography-monospace-line-height: 1.375;
 
 // --- helpers -----------------------------------------------------------------
 
-@function typography-sans-baselineshift($value, $base) {
-  @return $value;
-}
-
-@function typography-sans-baselineunshift($value, $base) {
-  @return $value;
-}
-
 @mixin typography-font(
   $font-family: $typography-sans-font-list,
   $font-weight: 400,
@@ -459,12 +451,15 @@ $typography-responsive-scale: 0.8;
 
 %cl-p-pre-box {
   @extend %cl-p-pre;
-  border-radius: $brand-border-radius;
+
   border: $brand-line-width solid var(--cl-color-text);
+  border-radius: $brand-border-radius;
+  clip-path: inset(0 round 19px);
   font-size: px(16);
-  line-height: 1;
+  line-height: 1.4;
   margin-top: $spacing-small;
   padding: $spacing-small;
+  padding-bottom: 1.01rem; // fix for overlapping scrollbar
 }
 
 %cl-p-tag {

package/src/styles/ui.scss

@@ -17,11 +17,12 @@ $castlabs-ui-asset-prefix: '..' !default;
 @import 'assets/fontawesome';
 @import 'global';
 
-@import 'layout/app';
 @import 'layout/animation';
+@import 'layout/app';
 @import 'layout/color';
 @import 'layout/grid';
 @import 'layout/helper';
+@import 'layout/scrollbar';
 @import 'layout/section';
 @import 'layout/spacing';
 @import 'layout/typography';