@castlabs/ui 7.0.11 → 7.2.0

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
@@ -37,14 +43,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,
@@ -192,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(
@@ -229,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(
@@ -266,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(
@@ -304,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(
@@ -331,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(
@@ -358,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(
@@ -385,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(
@@ -412,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(
@@ -439,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);
@@ -459,12 +458,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 20px);
   font-size: px(16);
-  line-height: 1;
+  line-height: 1.4;
   margin-top: $spacing-small;
   padding: $spacing-small;
+  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
 
@@ -17,6 +19,7 @@
   @extend %cl-color-night-outline;
 }
 
+.cl-color-primary,
 .cl-color-red {
   @extend %cl-color-red;
 }
@@ -29,6 +32,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/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

@@ -0,0 +1,13 @@
+////
+/// @group layout
+/// @access public
+////
+
+// 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 --------------------------------------------------------------------
@@ -183,12 +189,10 @@ main {
 
   // --- code & monospace --------------------------------------------------------
 
-  pre,
   kbd,
   code,
   samp {
     @extend %cl-p-pre;
-    @include cl-color-focus-outline;
 
     color: var(--cl-color-text);
   }
@@ -199,7 +203,8 @@ main {
   }
 
   pre {
-    padding: $spacing-tiny;
+    @extend %cl-p-pre-box;
+    @include cl-color-focus-outline;
 
     code {
       padding: 0;
@@ -216,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,89 +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/app';
-@import 'layout/animation';
-@import 'layout/color';
-@import 'layout/grid';
-@import 'layout/helper';
-@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';