@tedi-design-system/core 2.0.0

package/_typography.scss

@@ -0,0 +1,220 @@
+@use 'mixins';
+
+$headings: (h1, h2, h3, h4, h5, h6);
+
+// Mixin for heading styles
+@mixin heading-styles($level) {
+  @include mixins.responsive-styles(font-size, heading-#{$level}-size, $exclude: tablet);
+  @include mixins.responsive-styles(font-weight, heading-#{$level}-weight, $exclude: tablet);
+  @include mixins.responsive-styles(line-height, heading-#{$level}-line-height, $exclude: tablet);
+}
+
+@each $level in $headings {
+  #{$level},
+  .#{$level},
+  .tedi-#{$level},
+  .text-#{$level},
+  .tedi-text--#{$level} {
+    @include heading-styles($level);
+  }
+}
+
+.tedi-text {
+  @each $level in $headings {
+    &--#{$level} {
+      @include heading-styles($level);
+    }
+  }
+
+  &--default {
+    color: var(--general-text-primary);
+
+    @include mixins.responsive-styles(font-family, family-primary, $exclude: tablet);
+    @include mixins.responsive-styles(font-size, body-regular-size, $exclude: tablet);
+    @include mixins.responsive-styles(font-weight, body-regular-weight, $exclude: tablet);
+    @include mixins.responsive-styles(line-height, body-regular-line-height, $exclude: tablet);
+  }
+
+  &--small {
+    @include mixins.responsive-styles(font-size, body-small-regular-size, $exclude: tablet);
+    @include mixins.responsive-styles(font-weight, body-small-regular-weight, $exclude: tablet);
+    @include mixins.responsive-styles(line-height, body-small-regular-line-height, $exclude: tablet);
+  }
+}
+
+.text-subtitle {
+  text-transform: uppercase;
+
+  @include mixins.responsive-styles(font-size, heading-subtitle-regular-size, $exclude: tablet);
+  @include mixins.responsive-styles(font-weight, heading-subtitle-regular-weight, $exclude: tablet);
+  @include mixins.responsive-styles(line-height, heading-subtitle-regular-line-height, $exclude: tablet);
+
+  &.text-small {
+    @include mixins.responsive-styles(font-size, heading-subtitle-small-size, $exclude: tablet);
+    @include mixins.responsive-styles(font-weight, heading-subtitle-small-weight, $exclude: tablet);
+    @include mixins.responsive-styles(line-height, heading-subtitle-small-line-height, $exclude: tablet);
+  }
+}
+
+label {
+  color: var(--general-text-secondary);
+
+  @include mixins.responsive-styles(line-height, body-regular-line-height);
+}
+
+.text-normal {
+  color: var(--general-text-primary);
+
+  @include mixins.responsive-styles(font-family, family-primary, $exclude: tablet);
+  @include mixins.responsive-styles(font-size, body-regular-size, $exclude: tablet);
+  @include mixins.responsive-styles(font-weight, body-regular-weight, $exclude: tablet);
+  @include mixins.responsive-styles(line-height, body-regular-line-height, $exclude: tablet);
+}
+
+small,
+.text-small {
+  @include mixins.responsive-styles(font-size, body-small-regular-size, $exclude: tablet);
+  @include mixins.responsive-styles(font-weight, body-small-regular-weight, $exclude: tablet);
+  @include mixins.responsive-styles(line-height, body-small-regular-line-height, $exclude: tablet);
+}
+
+@each $color,
+  $var
+    in (
+      'default': var(--general-text-primary),
+      'primary': var(--general-text-primary),
+      'secondary': var(--general-text-secondary),
+      'tertiary': var(--general-text-tertiary),
+      'white': var(--general-text-white),
+      'disabled': var(--general-text-disabled),
+      'brand': var(--general-text-brand),
+      'success': var(--general-status-success-text),
+      'warning': var(--general-status-warning-text),
+      'danger': var(--general-status-danger-text),
+      'info': var(--general-status-info-text),
+      'neutral': var(--general-status-neutral-text)
+    )
+{
+  .tedi-text--#{$color} {
+    color: $var;
+  }
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-break-all {
+  word-break: break-all;
+}
+
+.text-break-word {
+  word-break: break-word;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.text-capitalize-first::first-letter {
+  text-transform: capitalize;
+}
+
+.text-break-spaces {
+  white-space: break-spaces;
+}
+
+.text-inline-block {
+  display: inline-block;
+}
+
+.text-inline {
+  display: inline;
+}
+
+b,
+strong,
+.text-bold {
+  font-weight: 700;
+}
+
+.text-thin {
+  font-weight: 300;
+}
+
+i,
+.text-italic {
+  font-style: italic;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-line-normal {
+  line-height: normal;
+}
+
+.text-line-condensed {
+  line-height: 1;
+}
+
+.text-default {
+  color: var(--general-text-primary);
+}
+
+.text-primary {
+  color: var(--general-text-brand);
+
+  @include mixins.print-grayscale;
+}
+
+.text-muted {
+  color: var(--general-text-secondary);
+}
+
+.text-subtle {
+  color: var(--general-text-tertiary);
+}
+
+.text-disabled {
+  color: var(--general-text-disabled);
+}
+
+.text-inverted {
+  color: var(--general-text-white);
+}
+
+.text-positive {
+  color: var(--general-status-success-text);
+
+  @include mixins.print-grayscale;
+}
+
+.text-important {
+  color: var(--general-status-danger-text);
+
+  @include mixins.print-grayscale;
+}
+
+.text-warning {
+  color: var(--general-status-warning-text);
+
+  @include mixins.print-grayscale;
+}

package/bootstrap-utility/_breakpoints.scss

@@ -0,0 +1,136 @@
+@use 'sass:map';
+@use '../variables/bootstrap-variables' as vars;
+
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+
+  @if not $n {
+    @error 'breakpoint `#{$name}` not found in `#{$breakpoints}`';
+  }
+
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
+  $min: map.get($breakpoints, $name);
+
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
+  $max: map.get($breakpoints, $name);
+
+  @return if($max and $max > 0, $max - 0.02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max: breakpoint-max($next);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($next, $breakpoints) {
+      @content;
+    }
+  }
+}

package/bootstrap-utility/_grid.scss

@@ -0,0 +1,167 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../variables/bootstrap-variables' as vars;
+@use './breakpoints' as breakpoints;
+@use './utilities' as utils;
+@use './utilities-api' as utilsApi;
+
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-row($gutter: vars.$grid-gutter-width) {
+  --#{vars.$variable-prefix}gutter-x: #{$gutter};
+  --#{vars.$variable-prefix}gutter-y: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
+  margin-top: calc(-1 * var(--#{vars.$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-0.5 * var(--#{vars.$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-0.5 * var(--#{vars.$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
+}
+
+@mixin make-col-ready() {
+  // Add box sizing if only the grid is loaded
+  box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we set the width
+  // later on to override this initial width.
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+  padding-right: calc(var(--#{vars.$variable-prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{vars.$variable-prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
+  margin-top: var(--#{vars.$variable-prefix}gutter-y);
+}
+
+@mixin make-col($size: false, $columns: vars.$grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: math.percentage(math.div($size, $columns));
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+@mixin make-col-offset($size, $columns: vars.$grid-columns) {
+  $num: math.div($size, $columns);
+
+  margin-left: if($num == 0, 0, math.percentage($num));
+}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    width: math.div(100%, $count);
+  }
+}
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns(
+  $columns: vars.$grid-columns,
+  $gutter: vars.$grid-gutter-width,
+  $breakpoints: vars.$grid-breakpoints
+) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+
+      .row-cols#{$infix}-auto > * {
+        @include make-col-auto;
+      }
+
+      @if vars.$grid-row-columns > 0 {
+        @for $i from 1 through vars.$grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto;
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not($infix == '' and $i == 0) {
+            // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+
+      // Gutters
+      //
+      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
+      @each $key, $value in vars.$gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          --#{vars.$variable-prefix}gutter-x: #{$value};
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          --#{vars.$variable-prefix}gutter-y: #{$value};
+        }
+      }
+    }
+  }
+}
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: vars.$grid-breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, $breakpoints);
+
+    @include breakpoints.media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

package/bootstrap-utility/_mixin-utilities.scss

@@ -0,0 +1,95 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use '../variables/bootstrap-variables' as vars;
+
+// Utility generator
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
+  $values: map.get($utility, values);
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
+    $values: list.zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map.get($utility, property);
+
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == 'string' {
+      $properties: list.append((), $properties);
+    }
+
+    // Use custom class if present
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
+    $property-class: if($property-class == null, '', $property-class);
+
+    // State params to generate pseudo-classes
+    $state: if(map.has-key($utility, state), map.get($utility, state), ());
+    $infix: if($property-class == '' and str-slice($infix, 1, 1) == '-', str-slice($infix, 2), $infix);
+
+    // Don't prefix if value key is null (eg. with shadow class)
+    $property-class-modifier: if($key, if($property-class == '' and $infix == '', '', '-') + $key, '');
+
+    @if map.get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      } @else {
+        $value: rfs-fluid-value($value);
+      }
+    }
+
+    $is-css-var: map.get($utility, css-var);
+    $is-local-vars: map.get($utility, local-vars);
+    $is-rtl: map.get($utility, rtl);
+
+    @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$variable-prefix}#{$property-class}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$variable-prefix}#{$property-class}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $value in $is-local-vars {
+                --#{$variable-prefix}#{$local-var}: #{$value};
+              }
+            }
+
+            // stylelint-disable-next-line annotation-no-unknown
+            #{$property}: $value if(vars.$enable-important-utilities, !important, null);
+          }
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              // stylelint-disable-next-line annotation-no-unknown
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+      }
+
+      @if $is-rtl == false {
+        /* rtl:end:remove */
+      }
+    }
+  }
+}

package/bootstrap-utility/_utilities-api.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../variables/bootstrap-variables' as vars;
+@use './mixin-utilities' as mixins;
+@use './breakpoints' as breakpoints;
+@use './utilities' as utilities;
+
+// Loop over each breakpoint
+@each $breakpoint in map.keys(vars.$grid-breakpoints) {
+  // Generate media query if needed
+  @include breakpoints.media-breakpoint-up($breakpoint) {
+    $infix: breakpoints.breakpoint-infix($breakpoint, vars.$grid-breakpoints);
+
+    // Loop over each utility property
+    @each $key, $utility in utilities.$utilities {
+      // The utility can be disabled with `false`, thus check if the utility is a map first
+      // Only proceed if responsive media queries are enabled or if it's the base media query
+      @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
+        @include mixins.generate-utility($utility, $infix);
+      }
+    }
+  }
+}