@castlabs/ui 7.1.0 → 7.2.0

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 {

package/src/styles/assets/fontawesome.scss

@@ -1,2 +1,4 @@
-@import '../../fonts/FontAwesome5/FontAwesome5';
-@import './fontawesome.variables';
+$cl-folder-prefix: '@' !default;
+@use '../../fonts/FontAwesome5/FontAwesome5' with (
+  $cl-folder-prefix: $cl-folder-prefix
+);

package/src/styles/assets/logo.scss

@@ -3,9 +3,13 @@
 /// @access public
 ////
 
+@use '../global' as *;
+
+$cl-folder-prefix: '@' !default;
+
 .cl-asset-logo,
 .cl-asset-logo-night {
-  background-image: url('#{$castlabs-ui-asset-prefix}/assets/castlabs-logo.svg?no-inline');
+  background-image: url('#{$cl-folder-prefix}/assets/castlabs-logo.svg?no-inline');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -18,7 +22,7 @@
 }
 
 .cl-asset-logo-eggshell {
-  background-image: url('#{$castlabs-ui-asset-prefix}/assets/castlabs-logo-eggshell.svg?no-inline');
+  background-image: url('#{$cl-folder-prefix}/assets/castlabs-logo-eggshell.svg?no-inline');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;

package/src/styles/layout/animation.scss

@@ -3,6 +3,8 @@
 /// @access public
 ////
 
+@use '../global' as *;
+
 // This file defines animations and transitions used in this app.
 
 // --- flash up text, e.g. after copy ------------------------------------------

package/src/styles/layout/app.scss

@@ -5,6 +5,8 @@
 
 // This file defines classes most of our app will need for landing page handling
 
+@use '../global' as *;
+
 .cl-app {
   height: 100%;
 }

package/src/styles/layout/color.scss

@@ -5,6 +5,8 @@
 
 // Basic/generic color classes.
 
+@use '../global' as *;
+
 // note: order of selectors in this file are important. do not move colors around or
 // .cl-color-* overrides might not work
 

package/src/styles/layout/grid.scss

@@ -5,8 +5,9 @@
 
 // This file defines our page grid. It is mostly based on bootstrap but with a few tweaks.
 
-@import 'bootstrap/scss/bootstrap-grid';
-@import 'grid.variables';
+@use '../global' as *;
+
+// hint: see also vendors/bootstrap.scss for the actual Bootstrap imports
 
 // bootstrap uses a narrow container for sm, but we prefer full-width instead
 @include media-breakpoint-only(sm) {
@@ -72,8 +73,6 @@
 
 // -----------------------------------------------------------------------------
 
-$grid-spacing: $spacing-small;
-
 section {
   padding-bottom: $spacing-small;
   padding-top: 0; // first element usually will add the rest.

package/src/styles/layout/helper.scss

@@ -5,6 +5,9 @@
 
 // This file defines various helper classes for easy css style access.
 
+@use '../global' as *;
+@use 'sass:math';
+
 .cl-nowrap {
   text-wrap: nowrap;
 }

package/src/styles/layout/scrollbar.scss

@@ -5,6 +5,8 @@
 
 // This file defines tweaks scrollbars for rounded boxes and uses our CI colors.
 
+@use '../global' as *;
+
 main,
 .cl-section {
   scrollbar-color: $color-ci-clay transparent;

package/src/styles/layout/section.scss

@@ -5,15 +5,7 @@
 
 // This file defines how we structure pages with <section class="cl-section">s.
 
-%section-padding {
-  padding-left: $spacing-tiny;
-  padding-right: $spacing-tiny;
-
-  @include media-breakpoint-up(sm) {
-    padding-left: $spacing-medium;
-    padding-right: $spacing-medium;
-  }
-}
+@use '../global' as *;
 
 .cl-section {
   @extend %section-padding;

package/src/styles/layout/spacing.scss

@@ -5,6 +5,8 @@
 
 // This file contains spacing elements and helpers.
 
+@use '../global' as *;
+
 // We move all margins to the top of entities. This makes it soo much easier
 // to use the + selector for fine-tuning situation specific spacings later on.
 
@@ -123,11 +125,8 @@ main {
 }
 
 // remove margins for divs in certain flexbox variants
-%cl-grid-flex-centered,
 .cl-grid-flex-centered {
-  > * {
-    @include spacing-before(0);
-  }
+  @extend %cl-grid-flex-centered;
 }
 
 // -----------------------------------------------------------------------------

package/src/styles/layout/typography.scss

@@ -5,15 +5,21 @@
 
 // This file defines our basic typography rules.
 
-@import 'typography.variables';
+$cl-folder-prefix: '@' !default;
+
+@use '../global' as *;
 
 // conditionally import fonts so themes can omit them
-@import '../../fonts/DMMono/DMMono';
-@import '../../fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap';
+@use '../../fonts/DMMono/DMMono' with (
+  $cl-folder-prefix: $cl-folder-prefix
+);
+@use '../../fonts/NonNaturalGroteskInktrap/NonNaturalGroteskInktrap' with (
+  $cl-folder-prefix: $cl-folder-prefix
+);
 $castlabs-ui-fonts: true !default;
 @if $castlabs-ui-fonts {
-  @include NonNaturalGroteskInktrap;
-  @include DMMono;
+  @include NonNaturalGroteskInktrap.NonNaturalGroteskInktrap;
+  @include DMMono.DMMono;
 }
 
 // --- text --------------------------------------------------------------------
@@ -215,16 +221,11 @@ main {
 
   // --- block quotes ----------------------------------------------------------
 
-  blockquote {
-    @include cl-accent;
-
-    border-left: $bar-ui-width solid var(--cl-color-accent);
-    padding-left: calc($list-indent - $bar-ui-width);
-  }
+  // see ClBlockquote
 
   // --- lists -------------------------------------------------------------------
 
-  // see Lists.scss
+  // see ClList
 }
 
 // --- ruler -------------------------------------------------------------------

package/src/styles/ui.scss

@@ -4,90 +4,101 @@
 ////
 
 // This file is the root for this lib's stylesheet and will include all others.
+// It is not to be used in Vue.js projects, but any other web frameworks that
+// want to pull in our styles via a .scss file.
 
-// Hint: Component-specific rules go into the vue components folders impored below.
+$castlabs-ui-asset-prefix: '.' !default;
 
-@use 'sass:math';
+@use 'vendors/bootstrap'; // must go first
 
-$castlabs-ui-asset-prefix: '..' !default;
+@use 'layout/animation';
+@use 'layout/app';
+@use 'layout/color';
+@use 'layout/grid';
+@use 'layout/helper';
+@use 'layout/scrollbar';
+@use 'layout/section';
+@use 'layout/spacing';
+@use 'layout/typography' with (
+  $cl-folder-prefix: $castlabs-ui-asset-prefix
+);
 
-@import 'bootstrap/scss/bootstrap-reboot';
-@import 'bootstrap/scss/helpers/ratio';
-@import 'assets/logo';
-@import 'assets/fontawesome';
-@import 'global';
+@use 'assets/logo' with (
+  $cl-folder-prefix: $castlabs-ui-asset-prefix
+);
+@use 'assets/fontawesome' with (
+  $cl-folder-prefix: $castlabs-ui-asset-prefix
+);
 
-@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';
+@use '../components/ClAlert/style' as *;
+@use '../components/ClBadge/style' as *;
+@use '../components/ClBlockquote/style' as *;
+@use '../components/ClButton/style' as *;
+@use '../components/ClCard/style' as *;
+@use '../components/ClDropdown/style' as *;
+@use '../components/ClDropzone/style' as *;
+@use '../components/ClFooter/style' as *;
+@use '../components/ClHighlight/style' as *;
+@use '../components/ClIcon/style' as *;
+@use '../components/ClIconotron/style' as *;
+@use '../components/ClList/style' as *;
+@use '../components/ClListGroup/style' as *;
+@use '../components/ClPagination/style' as *;
+@use '../components/ClProgress/style' as *;
+@use '../components/ClScrollbar/style' as *;
+@use '../components/ClSpinner/style' as *;
+@use '../components/ClTabs/style' as *;
+@use '../components/ClToggle/style' as *;
+@use '../components/ClTooltip/style' as *;
+@use '../components/ClWizard/style' as *;
+@use '../components/form/ClField/style' as *;
+@use '../components/form/ClFieldCheck/style' as * with (
+  $cl-folder-prefix: $castlabs-ui-asset-prefix
+);
+@use '../components/form/ClFieldFile/style' as *;
+@use '../components/form/ClFieldGroup/style' as *;
+@use '../components/form/ClFieldInput/style' as *;
+@use '../components/form/ClFieldSelect/style' as *;
+@use '../components/form/ClFieldSet/style' as *;
+@use '../components/form/ClForm/style' as *;
+@use '../components/modal/ClModal/style' as *;
+@use '../components/navigation/ClNavSide/ClNavDrawer/style' as *;
+@use '../components/navigation/ClNavSide/ClNavSideMenu/style' as *;
+@use '../components/navigation/ClNavSide/style' as *;
+@use '../components/navigation/ClNavTop/style' as *;
+@use '../components/section/ClSectionForm/style' as *;
+@use '../components/section/ClSectionHeadline/style' as *;
+@use '../components/section/ClSectionMainSide/style' as *;
+@use '../components/table/ClTable/style' as *;
+@use '../components/table/ClTableCel/Actions/style' as *;
+@use '../components/table/ClTableCel/Audit/style' as *;
+@use '../components/table/ClTableCel/Boolean/style' as *;
+@use '../components/table/ClTableCel/Checkbox/style' as *;
+@use '../components/table/ClTableCel/Code/style' as *;
+@use '../components/table/ClTableCel/Currency/style' as *;
+@use '../components/table/ClTableCel/Date/style' as *;
+@use '../components/table/ClTableCel/ID/style' as *;
+@use '../components/table/ClTableCel/Links/style' as *;
+@use '../components/table/ClTableCel/style' as *;
+@use '../components/table/ClTableFootChecked/style' as *;
+@use '../components/table/ClTableHead/style' as *;
+@use '../components/text/ClCopy/style' as *;
+@use '../components/text/ClHashtag/style' as *;
+@use '../components/text/ClLinkExternal/style' as *;
+@use '../components/text/ClOrg/style' as *;
+@use '../components/text/ClPlan/style' as *;
+@use '../components/text/ClRole/style' as *;
+@use '../components/widget/ClBackCancelOk/style' as *;
+@use '../components/widget/ClCookieBanner/style' as *;
+@use '../components/widget/ClPage/style' as *;
 
-// Vue components
-@import '../components/ClAlert/style';
-@import '../components/ClBadge/style';
-@import '../components/ClButton/style';
-@import '../components/ClCard/style';
-@import '../components/ClDropdown/style';
-@import '../components/ClDropzone/style';
-@import '../components/ClFooter/style';
-@import '../components/ClHighlight/style';
-@import '../components/ClIcon/style';
-@import '../components/ClIconotron/style';
-@import '../components/ClList/style';
-@import '../components/ClListGroup/style';
-@import '../components/ClPagination/style';
-@import '../components/ClProgress/style';
-@import '../components/ClScrollbar/style';
-@import '../components/ClSpinner/style';
-@import '../components/ClTabs/style';
-@import '../components/ClToggle/style';
-@import '../components/ClTooltip/style';
-@import '../components/ClWizard/style';
-@import '../components/form/ClField/style';
-@import '../components/form/ClFieldCheck/style';
-@import '../components/form/ClFieldFile/style';
-@import '../components/form/ClFieldGroup/style';
-@import '../components/form/ClFieldInput/style';
-@import '../components/form/ClFieldSelect/style';
-@import '../components/form/ClFieldSet/style';
-@import '../components/form/ClForm/style';
-@import '../components/modal/ClModal/style';
-@import '../components/navigation/ClNavSide/ClNavDrawer/style';
-@import '../components/navigation/ClNavSide/ClNavSideMenu/style';
-@import '../components/navigation/ClNavSide/style';
-@import '../components/navigation/ClNavTop/style';
-@import '../components/section/ClSectionForm/style';
-@import '../components/section/ClSectionHeadline/style';
-@import '../components/section/ClSectionMainSide/style';
-@import '../components/table/ClTable/style';
-@import '../components/table/ClTableCel/Actions/style';
-@import '../components/table/ClTableCel/Audit/style';
-@import '../components/table/ClTableCel/Boolean/style';
-@import '../components/table/ClTableCel/Checkbox/style';
-@import '../components/table/ClTableCel/Code/style';
-@import '../components/table/ClTableCel/Currency/style';
-@import '../components/table/ClTableCel/Date/style';
-@import '../components/table/ClTableCel/ID/style';
-@import '../components/table/ClTableCel/Links/style';
-@import '../components/table/ClTableCel/style';
-@import '../components/table/ClTableFootChecked/style';
-@import '../components/table/ClTableHead/style';
-@import '../components/text/ClCopy/style';
-@import '../components/text/ClHashtag/style';
-@import '../components/text/ClLinkExternal/style';
-@import '../components/text/ClOrg/style';
-@import '../components/text/ClPlan/style';
-@import '../components/text/ClRole/style';
-@import '../components/widget/ClBackCancelOk/style';
-@import '../components/widget/ClCookieBanner/style';
-@import '../components/widget/ClPage/style';
+html {
+  font-size: 16px; // root font size
+}
 
-// --- globals -----------------------------------------------------------------
+body {
+  font-size: 20px;
+}
 
 .cl-hidden {
   visibility: hidden;

package/src/styles/vendors/bootstrap.scss

@@ -3,26 +3,26 @@
 /// @access public
 ////
 
-// This file will define/override variables used by bootstrap to customize it
-// to our needs.
+// This file includes our (partial) bootstrap & fixes.
+// Boottrap 5.x isnt @use-ready yet, we have to fallback to imports:
 
-$primary: $color-ci-red;
+// hint: see also abstracts/grid.scss for some bootstrap fallback code
 
-$border-radius: 3px;
-$border-radius-sm: $border-radius;
-$border-radius-lg: $border-radius;
+@import 'bootstrap/scss/bootstrap-reboot';
 
-$btn-focus-width: px(2);
+p {
+  margin-bottom: 0;
+}
 
-$input-btn-focus-color: $color-ci-sky;
-
-$transition-base: all 0.1s ease-in-out;
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
+@import 'bootstrap/scss/bootstrap-grid';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/forms/form-check';
+@import 'bootstrap/scss/forms/form-select';
+@import 'bootstrap/scss/helpers/ratio';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/pagination';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/transitions';

package/src/styles/abstracts/brand.scss

@@ -1,9 +0,0 @@
-////
-/// @group themes
-/// @access public
-////
-
-// global brand settings/values
-
-$brand-border-radius: px(20);
-$brand-line-width: px(1);

package/src/styles/abstracts/layer.scss

@@ -1,10 +0,0 @@
-////
-/// @group themes
-/// @access public
-////
-
-// Layering / z-index of app
-
-$layer-z-modal: 2000;
-$layer-z-sidenav: 1000;
-$layer-z-content: 0;

package/src/styles/vendors/castlabs.scss

@@ -1,17 +0,0 @@
-.cl-theme-v2 {
-  .cl-section-primary.cl-section-tight {
-    background-color: $color-ci-eggshell;
-
-    h1 {
-      color: $color-ci-night;
-    }
-  }
-
-  .cl-nav-top {
-    border-bottom: $brand-line-width solid $color-ci-red;
-
-    .col-12 {
-      height: calc(3rem - $brand-line-width) !important; // sass-lint:disable-line no-important
-    }
-  }
-}