@castlabs/ui 7.1.0 → 7.2.1

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

@@ -1,9 +1,11 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-td-date {
     overflow-wrap: break-word;
     width: 9.5em;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         width: 100%;
       }

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

@@ -1,3 +1,6 @@
+@use '../../../../styles/global' as *;
+@use '../../ClTable/style.variables' as *;
+
 .cl-table-data {
   .cl-td-id,
   .cl-td-uuid {
@@ -13,7 +16,7 @@
     overflow-wrap: unset;
     width: 2.5em;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         width: 100%;
       }

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-th-links {
     @extend %cl-p-label;
@@ -7,7 +9,7 @@
     right: 0;
     text-align: end;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         display: none;
       }
@@ -38,7 +40,7 @@
       }
     }
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         text-align: end;
       }

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

@@ -1,6 +1,7 @@
 // styles that apply to all types of table cels
 
-@import 'style.variables';
+@use '../../../styles/global' as *;
+@use 'style.variables' as *;
 
 .cl-table-data {
   @extend %cl-table-data-cel;

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

@@ -1,5 +1,8 @@
 // styles that apply to all types of table cels
 
+@use '../ClTable/style.variables' as *;
+@use '../../../styles/global' as *;
+
 %cl-table-data-cel {
   td {
     @include typography-font($typography-sans-font-list, 400, px(16), $table-lineheight);

package/src/components/table/ClTableFootChecked/style.scss

@@ -1,2 +1,4 @@
+@use '../../../styles/global' as *;
+
 .cl-table-foot-checked {
 }

package/src/components/table/ClTableHead/style.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-table-head {
   white-space: nowrap;
 
@@ -31,7 +33,7 @@
 
 .cl-table-data {
   th {
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         width: 100%;
       }

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

@@ -3,6 +3,8 @@
 /// @access public
 ////
 
+@use '../../../styles/global' as *;
+
 .cl-copy {
   @include cl-fontawesome-postfix('\f0c5');
 

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

@@ -5,6 +5,9 @@
 
 // This file defines custom hashtag styles.
 
+@use '../../../styles/global' as *;
+@use '../../ClBadge/style.variables' as *;
+
 .cl-hashtag {
   @extend %cl-badge;
   @include cl-badge-small;

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

@@ -5,6 +5,8 @@
 
 // This file defines variants for hyperlinks.
 
+@use '../../../styles/global' as *;
+
 .cl-a,
 .cl-p a,
 main a {

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

@@ -5,6 +5,8 @@
 
 // This file defines custom org lables.
 
+@use '../../../styles/global' as *;
+
 .cl-org {
   font-weight: 700;
 

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

@@ -5,6 +5,9 @@
 
 // This file defines custom plan styles.
 
+@use '../../../styles/global' as *;
+@use '../../ClBadge/style.variables' as *;
+
 .cl-plan {
   @extend %cl-badge;
   @include cl-badge-small;

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

@@ -5,6 +5,9 @@
 
 // This file defines custom role styles.
 
+@use '../../../styles/global' as *;
+@use '../../ClBadge/style.variables' as *;
+
 .cl-role {
   @extend %cl-badge;
   @include cl-badge-small;

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

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-back-cancel-ok {
   padding-top: 0;
 

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

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-cookie-banner {
   bottom: $spacing-large;
   // box-shadow: 1px 1px 2px 1px $color-black-25a;

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

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-page-spinner {
   align-items: center;
   display: flex;

package/src/styles/_global.scss

@@ -6,54 +6,15 @@
 // This file defines all global variables and helper functions/mixins. It MUST
 // NOT not output any css, as it will be included by every Vue component.
 
-@use 'sass:math';
-
-// -----------------------------------------------------------------------------
-
-@import 'abstracts/tools';
-@import 'abstracts/brand';
-@import 'abstracts/color';
-@import 'abstracts/layer';
-@import 'abstracts/spacing';
-@import 'vendors/bootstrap';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'assets/fontawesome.variables';
-@import 'layout/typography.variables';
-@import 'layout/grid.variables';
-@import 'components/button.variables';
-@import 'components/form.variables';
-@import '../components/ClList/style.variables';
-@import '../components/table/ClTable/style.variables';
-@import '../components/table/ClTableCel/style.variables';
-@import '../components/ClCard/style.variables';
-@import 'vendors/castlabs';
-
-// --- spacings ----------------------------------------------------------------
-
-%spacing-huge {
-  margin-top: $spacing-huge;
-}
-
-%spacing-large {
-  margin-top: $spacing-large;
-}
-
-%spacing-medium {
-  margin-top: $spacing-medium;
-}
-
-%spacing-small {
-  margin-top: $spacing-small;
-}
-
-%spacing-tiny {
-  margin-top: $spacing-tiny;
-}
-
-%spacing-micro {
-  margin-top: $spacing-micro;
-}
-
-%spacing-none {
-  margin-top: 0;
-}
+@forward 'abstracts/app';
+@forward 'abstracts/button';
+@forward 'abstracts/color';
+@forward 'abstracts/fontawesome';
+@forward 'abstracts/form';
+@forward 'abstracts/grid';
+@forward 'abstracts/responsive';
+@forward 'abstracts/spacing';
+@forward 'abstracts/tools';
+@forward 'abstracts/typography';
+
+// $castlabs-ui-asset-prefix: '@' !default;

package/src/styles/abstracts/app.scss

@@ -0,0 +1,23 @@
+////
+/// @group themes
+/// @access public
+////
+
+// global brand settings/values
+
+@use './spacing' as *;
+@use './tools' as *;
+
+$brand-border-radius: px(20);
+$brand-line-width: px(1);
+
+$grid-spacing: $spacing-small;
+
+$layer-z-modal: 2000;
+$layer-z-sidenav: 1000;
+$layer-z-content: 0;
+
+$sidenav-width-open: 18rem;
+$sidenav-width-closed: 0;
+$sidenav-z-index: $layer-z-sidenav;
+$sidenav-breakpoint: xl;

package/src/styles/{components/button.variables.scss → abstracts/button.scss}

@@ -3,6 +3,11 @@
 /// @access public
 ////
 
+@use './app' as *;
+@use './color' as *;
+@use './spacing' as *;
+@use './tools' as *;
+
 @mixin cl-button {
   background-image: none;
   border-radius: $brand-border-radius;
@@ -78,12 +83,3 @@
     outline: 0 !important;
   }
 }
-
-@mixin cl-button-focus-outline() {
-  .btn-check:focus-visible + &,
-  &:focus-visible {
-    @include cl-color-focus-outline;
-
-    box-shadow: none;
-  }
-}

package/src/styles/abstracts/color.scss

@@ -5,6 +5,8 @@
 
 // Basic/generic color values.
 
+@use './tools' as *;
+
 $color-black-50a: rgb(0 0 0 / 50%);
 
 $color-ci-red: #fa423c; // rgba(250, 66, 60, 1)
@@ -72,6 +74,15 @@ $bar-ui-width: px(4);
   }
 }
 
+@mixin cl-button-focus-outline() {
+  .btn-check:focus-visible + &,
+  &:focus-visible {
+    @include cl-color-focus-outline;
+
+    box-shadow: none;
+  }
+}
+
 @mixin cl-accent() {
   &.cl-accent-red,
   .cl-accent-red {
@@ -133,6 +144,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-hover'}: $color-ci-red;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-disabled-background'}: $color-ci-clay;
+  #{'--cl-color-disabled-border'}: $color-ci-clay;
+  #{'--cl-color-disabled-text'}: $color-ci-eggshell;
 }
 
 %cl-color-night-outline {
@@ -145,6 +159,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
   #{'--cl-color-focus'}: $color-ci-night;
+  #{'--cl-color-disabled-background'}: transparent;
+  #{'--cl-color-disabled-border'}: $color-ci-clay;
+  #{'--cl-color-disabled-text'}: $color-ci-clay;
 }
 
 %cl-color-red {
@@ -166,6 +183,9 @@ $bar-ui-width: px(4);
   #{'--cl-color-highlight'}: rgba(#fff, 0.85);
   #{'--cl-color-link'}: $color-ci-berry;
   #{'--cl-color-focus'}: $color-ci-red;
+  #{'--cl-color-disabled-background'}: transparent;
+  #{'--cl-color-disabled-border'}: $color-ci-clay;
+  #{'--cl-color-disabled-text'}: $color-ci-clay;
 }
 
 %cl-color-sky {

package/src/styles/{assets/fontawesome.variables.scss → abstracts/fontawesome.scss}

@@ -1,3 +1,6 @@
+@use './color' as *;
+@use './tools' as *;
+
 /// Add a fontawesome icon via codepoint.
 ///
 /// @example scss

package/src/styles/{components/form.variables.scss → abstracts/form.scss}

@@ -5,6 +5,12 @@
 
 // This file defines form/input field variables
 
+@use './app' as *;
+@use './color' as *;
+@use './spacing' as *;
+@use './tools' as *;
+@use './typography' as *;
+
 $form-field-fontsize: px(16);
 $form-field-line-height: 1.375;
 $form-field-min-height: px(36);

package/src/styles/{layout/grid.variables.scss → abstracts/grid.scss}

@@ -1,8 +1,15 @@
 ////
-/// @group layout
+/// @group vendors
 /// @access public
 ////
 
+// This file will define/override variables used by bootstrap to customize it
+// to our needs.
+
+@use 'sass:math';
+
+@use './spacing' as *;
+
 @mixin grid-margins($spacing) {
   padding-bottom: math.div($spacing, 2);
   padding-top: math.div($spacing, 2);

package/src/styles/abstracts/responsive.scss

@@ -0,0 +1,84 @@
+////
+/// @group vendors
+/// @access public
+////
+
+// This file will define/override variables used by bootstrap to customize it
+// to our needs.
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
+
+@use 'sass:map';
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+
+$grid-table-responsive: sm;
+
+@function breakpoint-min($breakpoint) {
+  $min: map.get($grid-breakpoints, $breakpoint);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($breakpoint) {
+  $max: map.get($grid-breakpoints, $breakpoint);
+  @return if($max and $max > 0, $max - 0.02, null);
+}
+
+@function breakpoint-next($breakpoint, $breakpoint-names: map.keys($grid-breakpoints)) {
+  $n: index($breakpoint-names, $breakpoint);
+  @if not $n {
+    @error 'breakpoint `#{$breakpoint}` not found in `#{$grid-breakpoints}`';
+  }
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+@mixin media-breakpoint-up($breakpoint) {
+  $min: breakpoint-min($breakpoint);
+  @if $min {
+    // stylelint-disable-next-line media-query-no-invalid
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-down($breakpoint) {
+  $max: breakpoint-max($breakpoint);
+  @if $max {
+    // stylelint-disable-next-line media-query-no-invalid
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-only($breakpoint) {
+  $min: breakpoint-min($breakpoint);
+  $next: breakpoint-next($breakpoint);
+  $max: breakpoint-max($next);
+
+  @if $min != null and $max != null {
+    // stylelint-disable-next-line media-query-no-invalid
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($breakpoint) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($next) {
+      @content;
+    }
+  }
+}

package/src/styles/abstracts/spacing.scss

@@ -5,6 +5,9 @@
 
 // Our global spacing values.
 
+@use './responsive' as *;
+@use './tools' as *;
+
 $spacing-none: px(0);
 $spacing-micro: px(4);
 $spacing-tiny: px(8);
@@ -13,6 +16,8 @@ $spacing-medium: px(24);
 $spacing-large: px(32);
 $spacing-huge: px(48);
 
+$spacing-indent: $spacing-large; // uniform indent for lists, blockquotes, ...
+
 $header-nav-height: px(40);
 
 @mixin spacing-before-auto($value) {
@@ -32,3 +37,49 @@ $header-nav-height: px(40);
     margin-top: $margin-top;
   }
 }
+
+%section-padding {
+  padding-left: $spacing-tiny;
+  padding-right: $spacing-tiny;
+
+  @include media-breakpoint-up(sm) {
+    padding-left: $spacing-medium;
+    padding-right: $spacing-medium;
+  }
+}
+
+%cl-grid-flex-centered {
+  > * {
+    @include spacing-before(0);
+  }
+}
+
+// --- spacings ----------------------------------------------------------------
+
+%spacing-huge {
+  margin-top: $spacing-huge;
+}
+
+%spacing-large {
+  margin-top: $spacing-large;
+}
+
+%spacing-medium {
+  margin-top: $spacing-medium;
+}
+
+%spacing-small {
+  margin-top: $spacing-small;
+}
+
+%spacing-tiny {
+  margin-top: $spacing-tiny;
+}
+
+%spacing-micro {
+  margin-top: $spacing-micro;
+}
+
+%spacing-none {
+  margin-top: 0;
+}

package/src/styles/abstracts/tools.scss

@@ -5,6 +5,12 @@
 
 @use 'sass:math';
 
+$asset-img-huge: px(192);
+$asset-img-large: px(128);
+$asset-img-medium: px(96);
+$asset-img-small: px(64);
+$asset-img-tiny: px(32);
+
 /// Convert a px-length to rems. Will stick with pixels
 /// for small sizes. Based on 16px root font size.
 ///

package/src/styles/{layout/typography.variables.scss → abstracts/typography.scss}

@@ -5,6 +5,12 @@
 
 // This file defines our basic typography rules.
 
+@use './app' as *;
+@use './color' as *;
+@use './spacing' as *;
+@use './tools' as *;
+@use 'sass:meta';
+
 // h1 (deco): 100
 // h2 48
 // h3 40
@@ -184,7 +190,7 @@ $typography-responsive-scale: 0.8;
     @include cl-btn-a(34);
   }
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -221,7 +227,7 @@ $typography-responsive-scale: 0.8;
     @include cl-btn-a(34);
   }
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -258,7 +264,7 @@ $typography-responsive-scale: 0.8;
     @include cl-btn-a(27);
   }
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -296,7 +302,7 @@ $typography-responsive-scale: 0.8;
     @include cl-btn-a(21);
   }
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -323,7 +329,7 @@ $typography-responsive-scale: 0.8;
     -0.1em
   );
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -350,7 +356,7 @@ $typography-responsive-scale: 0.8;
     -0.1em
   );
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -377,7 +383,7 @@ $typography-responsive-scale: 0.8;
     -0.1em
   );
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -404,7 +410,7 @@ $typography-responsive-scale: 0.8;
     -0.1em
   );
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       @include typography-font(
@@ -431,8 +437,9 @@ $typography-responsive-scale: 0.8;
   @extend %cl-p-medium;
 
   font-size: px(16);
+  font-weight: 500;
 
-  @if mixin-exists('media-breakpoint-only') {
+  @if meta.mixin-exists('media-breakpoint-only') {
     // we might be used without bootstrap
     @include media-breakpoint-only(xs) {
       font-size: px(16 * $typography-responsive-scale);
@@ -454,12 +461,12 @@ $typography-responsive-scale: 0.8;
 
   border: $brand-line-width solid var(--cl-color-text);
   border-radius: $brand-border-radius;
-  clip-path: inset(0 round 19px);
+  clip-path: inset(0 round 20px);
   font-size: px(16);
   line-height: 1.4;
   margin-top: $spacing-small;
   padding: $spacing-small;
-  padding-bottom: 1.01rem; // fix for overlapping scrollbar
+  padding-bottom: 0.95rem; // fix for overlapping scrollbar/clip
 }
 
 %cl-p-tag {