@castlabs/ui 7.1.0 → 7.2.1

package/package.json

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

@@ -5,6 +5,8 @@
 
 // This is our version of Bootstrap alerts.
 
+@use '../../styles/global' as *;
+
 .alert {
   @extend %cl-p-small;
   @extend %spacing-small;

package/src/components/ClBadge/style.scss

@@ -5,7 +5,8 @@
 
 // This file adds & customizes bootstrap's cards.
 
-@import 'style.variables';
+@use '../../styles/global' as *;
+@use 'style.variables' as *;
 
 @mixin cl-unlink {
   text-decoration: none;

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

@@ -1,3 +1,5 @@
+@use '../../styles/global' as *;
+
 $badge-color-fg: $color-ci-white;
 $badge-color-bg: $color-dark;
 $badge-padding: px(4) px(8);

package/src/components/ClBlockquote/style.scss

@@ -0,0 +1,13 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file define our blockquotes.
+
+@use '../../styles/global' as *;
+@use 'style.variables' as *;
+
+blockquote {
+  @extend %cl-blockquote;
+}

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

@@ -0,0 +1,15 @@
+////
+/// @group components
+/// @access public
+////
+
+@use '../../styles/global' as *;
+
+// This file define our (bullet) lists. They use fontawesome icons as bullets.
+
+%cl-blockquote {
+  @include cl-accent;
+
+  border-left: $bar-ui-width solid var(--cl-color-accent);
+  padding-left: calc($spacing-indent - $bar-ui-width);
+}

package/src/components/ClButton/style.scss

@@ -5,7 +5,9 @@
 
 // This file adds & customizes bootstrap's buttons.
 
-// @import 'bootstrap/scss/buttons';
+@use '../../styles/global' as *;
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 .btn {
   @extend %cl-p-nav;
@@ -21,9 +23,9 @@
 
   &:disabled,
   &.disabled {
-    background-color: transparent; // sass-lint:disable-line no-important
-    border-color: $color-disabled; // sass-lint:disable-line no-important
-    color: $color-disabled; // sass-lint:disable-line no-important
+    background-color: var(--cl-color-disabled-background);
+    border-color: var(--cl-color-disabled-border);
+    color: var(--cl-color-disabled-text);
     cursor: not-allowed;
     opacity: 1 !important; // sass-lint:disable-line no-important
     pointer-events: initial;

package/src/components/ClCard/style.scss

@@ -5,7 +5,8 @@
 
 // This file adds & customizes bootstrap's cards.
 
-@import 'style.variables';
+@use '../../styles/global' as *;
+@use 'style.variables' as *;
 
 .card {
   @extend %cl-card;

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

@@ -3,6 +3,8 @@
 /// @access public
 ////
 
+@use '../../styles/global' as *;
+
 // This file adds & customizes bootstrap's cards.
 
 $card-spacing: $spacing-medium;

package/src/components/ClDropdown/style.scss

@@ -6,6 +6,8 @@
 // A custom dropdown / drawer element based on <detail> and <summary>. No JS needed.
 // Only to be used in the sidenav, as for main content we use collapsible cards in v7+.
 
+@use '../../styles/global' as *;
+
 $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);

package/src/components/ClDropzone/style.scss

@@ -1,3 +1,5 @@
+@use '../../styles/global' as *;
+
 .cl-dropzone {
   border: px(2) dashed $color-ci-clay;
   border-radius: $brand-border-radius;

package/src/components/ClFooter/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines castlabs footers.
 
+@use '../../styles/global' as *;
+
 .cl-footer {
   @extend %cl-p-small;
 

package/src/components/ClHighlight/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines .cl-highlight modifiers for various components
 
+@use '../../styles/global' as *;
+
 $highlight-background: $color-ci-sand;
 
 .cl-highlight {

package/src/components/ClIcon/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines / tweaks our icons. They are based on FontAwesome v5.
 
+@use '../../styles/global' as *;
+
 // --- generic helper classes --------------------------------------------------
 
 .fa-small,
@@ -26,12 +28,6 @@
 
 // --- Castlabs (SVG) icons ----------------------------------------------------
 
-$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);
-
 .cl-img-huge {
   height: $asset-img-huge;
   width: $asset-img-huge;

package/src/components/ClIconotron/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines our icon + text component.
 
+@use '../../styles/global' as *;
+
 .cl-container-iconotron {
   .col-12 {
     display: flex;

package/src/components/ClList/style.scss

@@ -5,14 +5,15 @@
 
 // This file define our (bullet) lists. They use fontawesome icons as bullets.
 
-@import 'style.variables';
+@use '../../styles/global' as *;
+@use 'style.variables' as *;
 
 // --- regular lists -----------------------------------------------------------
 
 main {
   // apply style to typical html elements only in <main>, so it does not interfer with header/footer
   ul {
-    margin: $spacing-small 0 0 $list-indent;
+    margin: $spacing-small 0 0 $spacing-indent;
     padding: 0;
 
     li {

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

@@ -5,7 +5,7 @@
 
 // This file define our (bullet) lists. They use fontawesome icons as bullets.
 
-$list-indent: $spacing-large;
+@use '../../styles/global' as *;
 
 %cl-list {
   @include cl-accent;
@@ -20,11 +20,11 @@ $list-indent: $spacing-large;
       @include cl-fontawesome('\f054'); // chevron
 
       color: var(--cl-color-accent);
-      margin-left: -$list-indent;
+      margin-left: -$spacing-indent;
       margin-top: 0.175em;
       position: absolute;
       text-align: center;
-      width: $list-indent;
+      width: $spacing-indent;
     }
 
     > ul {

package/src/components/ClListGroup/style.scss

@@ -6,4 +6,6 @@
 // This file adds & customizes bootstrap's list groups. They structure same-of-kind
 // stuff in a table-like manner but without having the bulky table look.
 
-@import 'bootstrap/scss/list-group';
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
+
+@use '../../styles/global' as *;

package/src/components/ClPagination/style.scss

@@ -5,7 +5,9 @@
 
 // This file adds & customizes bootstrap's paginators.
 
-@import 'bootstrap/scss/pagination';
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
+
+@use '../../styles/global' as *;
 
 .pagination {
   @extend %cl-p-nav;

package/src/components/ClProgress/style.scss

@@ -5,7 +5,13 @@
 
 // This is our version of Bootstrap progress.
 
-@import 'bootstrap/scss/progress';
+// @forward 'bootstrap/scss/functions';
+// @forward 'bootstrap/scss/variables';
+
+@use '../../styles/global' as *;
+@use 'sass:math';
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 .progress {
   @extend %cl-color-sky;

package/src/components/ClScrollbar/style.scss

@@ -5,7 +5,8 @@
 
 // This file adds & customizes the simplebar scrollbar.
 
-@import 'simplebar/dist/simplebar.min';
+@use 'simplebar/dist/simplebar.min';
+@use '../../styles/global' as *;
 
 // --- scrollbar ---------------------------------------------------------------
 .simplebar-scrollbar::before {

package/src/components/ClSpinner/style.scss

@@ -1,3 +1,5 @@
+@use '../../styles/global' as *;
+
 .cl-spinner {
   @extend %cl-p-medium;
   @extend %spacing-small;

package/src/components/ClTabs/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines castlabs' navigation tabs
 
+@use '../../styles/global' as *;
+
 .cl-tabs {
   > ul {
     display: flex;

package/src/components/ClToggle/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines castlabs toggle/checkboxes.
 
+@use '../../styles/global' as *;
+
 .cl-toggle-checkbox {
   @include cl-button-focus-outline;
 

package/src/components/ClTooltip/style.scss

@@ -5,7 +5,9 @@
 
 // This file adds & customizes bootstrap's tooltips.
 
-@import 'bootstrap/scss/tooltip';
+@use '../../styles/global' as *;
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 .cl-tooltip {
   #{'--bs-tooltip-bg'}: var(--cl-color-background);

package/src/components/ClWizard/style.scss

@@ -5,6 +5,8 @@
 
 // This file adds our *-*-*-* wizard progress indicator.
 
+@use '../../styles/global' as *;
+
 .cl-wizard-steps {
   $wizard-li-spacing: $spacing-small;
   $wizard-offset-indicator: -1em;

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

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-form {
   // --- field invalidation ----------------------------------------------------
 

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

@@ -5,7 +5,12 @@
 
 // This file defines castlabs' checkboxes and radio buttons
 
-@import 'bootstrap/scss/forms/form-check';
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
+
+@use '../../../styles/global' as *;
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 $form-check-background: $color-ci-eggshell;
 
@@ -31,7 +36,7 @@ $form-check-background: $color-ci-eggshell;
 
       &:checked {
         background-color: $color-selected;
-        background-image: url('#{$castlabs-ui-asset-prefix}/assets/bs/checked.svg?no-inline');
+        background-image: url('#{$cl-url-prefix}checked.svg#{$cl-url-postfix}');
         border: 0;
       }
 

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

@@ -5,6 +5,8 @@
 
 // This file defines castlabs' <input> fields.
 
+@use '../../../styles/global' as *;
+
 .cl-form {
   [type='file'] {
     @extend %form-field-box;

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

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-form {
   .input-group {
     align-items: center;

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

@@ -5,6 +5,8 @@
 
 // This file defines castlabs' <input> fields.
 
+@use '../../../styles/global' as *;
+
 .cl-form {
   input,
   textarea {

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

@@ -5,7 +5,12 @@
 
 // This file defines castlabs <select> boxes.
 
-@import 'bootstrap/scss/forms/form-select';
+$cl-url-prefix: '' !default;
+$cl-url-postfix: '' !default;
+
+@use '../../../styles/global' as *;
+
+// note: bootstrap library parts are imported in vendors/bootstrap.scss
 
 .cl-form {
   label + select {
@@ -18,8 +23,7 @@
 
     @include cl-form-focus;
 
-    background-image:
-      url('#{$castlabs-ui-asset-prefix}/assets/bs/select.svg?no-inline'), none, none;
+    background-image: url('#{$cl-url-prefix}select.svg#{$cl-url-postfix}'), none, none;
     display: block;
 
     &.cl-field-sans {
@@ -32,8 +36,7 @@
 
     &:disabled,
     &.disabled {
-      background-image:
-        url('#{$castlabs-ui-asset-prefix}/assets/bs/select-disabled.svg?no-inline'), none, none;
+      background-image: url('#{$cl-url-prefix}select-disabled.svg#{$cl-url-postfix}'), none, none;
     }
   }
 

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

@@ -5,6 +5,8 @@
 
 // This file defines castlabs' <fieldset>s.
 
+@use '../../../styles/global' as *;
+
 .cl-form {
   fieldset {
     padding-bottom: $spacing-micro;

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

@@ -5,6 +5,8 @@
 
 // This file defines castlabs' <form>s & labels (both titles and info/error texts).
 
+@use '../../../styles/global' as *;
+
 .cl-form {
   // --- basic form layout -----------------------------------------------------
 

package/src/components/modal/ClModal/style.scss

@@ -5,6 +5,9 @@
 
 // This file adds & customizes bootstrap's modals.
 
+@use '../../../styles/global' as *;
+@use '../../ClCard/style.variables' as *;
+
 .modal {
   @extend %cl-color-eggshell;
   @include spacing-before(0);

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

@@ -6,6 +6,7 @@
 // This file defines how the stuff inside the sidenav drawer looks like.
 
 @use 'sass:color';
+@use '../../../../styles/global' as *;
 
 $sidenav-background: $color-ci-eggshell;
 $sidenav-color-text: $color-ci-night;

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

@@ -3,6 +3,8 @@
 /// @access public
 ////
 
+@use '../../../../styles/global' as *;
+
 .cl-nav-side {
   // --- menu items ------------------------------------------------------------
 

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

@@ -6,10 +6,7 @@
 // This file defines our sidenav. It does not define the sidenav's content inside
 // the drawer, only how the drawer operates/opens/closes.
 
-$sidenav-width-open: 18rem;
-$sidenav-width-closed: 0;
-$sidenav-z-index: $layer-z-sidenav;
-$sidenav-breakpoint: xl;
+@use '../../../styles/global' as *;
 
 .cl-nav-side {
   @include spacing-before(0);

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

@@ -5,6 +5,11 @@
 
 // This file defines our top-nav
 
+@use 'sass:math';
+@use '../../../styles/global' as *;
+
+$sidenav-z-index: $layer-z-sidenav;
+
 .cl-nav-top {
   // first/top line in content area
   @extend %section-padding;
@@ -90,10 +95,7 @@
 // add & customize bootstrap navbar
 // -----------------------------------------------------------------------------
 
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 @mixin navbar-expand {
   .nav-link {

package/src/components/section/ClSectionForm/style.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-section-form {
   border-bottom: $brand-line-width solid $color-ci-clay;
   border-top: $brand-line-width solid $color-ci-clay;

package/src/components/section/ClSectionHeadline/style.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/global' as *;
+
 .cl-section-dark .cl-headline-help-icon,
 .cl-section-primary .cl-headline-help-icon,
 .cl-section-secondary .cl-headline-help-icon {

package/src/components/section/ClSectionMainSide/style.scss

@@ -5,6 +5,8 @@
 
 // This file defines a type of section with a 8-4 layout (main + side area)
 
+@use '../../../styles/global' as *;
+
 .cl-section-main-side {
   padding-top: 0;
 

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

@@ -5,7 +5,8 @@
 
 // This defines Castlabs data-driven tables.
 
-@import 'style.variables';
+@use '../../../styles/global' as *;
+@use './style.variables' as *;
 
 .cl-table-scroll {
   display: block;

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

@@ -3,11 +3,12 @@
 /// @access public
 ////
 
+@use '../../../styles/global' as *;
+
 // This defines Castlabs data-driven tables.
 $table-padding-vertical: 0.5rem;
 $table-padding-horizontal: 0.5rem;
 $table-icon-size: 2rem;
-$table-responsive: sm;
 $table-lineheight: 1.2em;
 
 %cl-table-data {
@@ -80,7 +81,7 @@ $table-lineheight: 1.2em;
 
   // --- responsive phone tables -----------------------------------------------
 
-  @include media-breakpoint-down($table-responsive) {
+  @include media-breakpoint-down($grid-table-responsive) {
     &:not(.cl-table-nonresponsive) {
       td,
       th {

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

@@ -1,8 +1,10 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-td-actions {
     overflow-wrap: unset;
 
-    @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/Audit/style.scss

@@ -1,8 +1,10 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-th-audit {
     @extend %cl-p-label;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         display: none;
       }
@@ -15,7 +17,7 @@
     text-align: center;
     width: 0.9em;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         display: none;
       }

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

@@ -1,9 +1,11 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-td-boolean {
     overflow-wrap: unset;
     text-align: center;
 
-    @include media-breakpoint-down($table-responsive) {
+    @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         text-align: left;
       }

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

@@ -1,3 +1,5 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
   .cl-th-checkbox {
     @extend %cl-p-label;

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

@@ -1,3 +1,6 @@
+@use '../../../../styles/global' as *;
+@use '../../ClTable/style.variables' as *;
+
 .cl-table-data {
   .cl-td-code {
     @include typography-font(
@@ -9,7 +12,7 @@
       80%
     );
 
-    @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/Currency/style.scss

@@ -1,5 +1,7 @@
+@use '../../../../styles/global' as *;
+
 .cl-table-data {
-  @include media-breakpoint-up($table-responsive) {
+  @include media-breakpoint-up($grid-table-responsive) {
     .cl-th-currency,
     .cl-td-currency {
       overflow-wrap: unset;