@central-design-system/components 2.30.0 → 3.0.0-alpha.0

package/src/scss/modules/grid/_mixins.scss

@@ -0,0 +1,307 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+/// Contents of the mixins
+// * Grid
+// * Columns
+// * Rows
+// * No gutter
+// * Hang
+// * Functions
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-width`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @cds/grid
+@mixin -make-container($breakpoints: $grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include -set-largest-breakpoint($breakpoints);
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map.get($prev-breakpoint, margin);
+
+      @if $prev-margin != $margin {
+        @include cds-breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
+        }
+      } @else {
+        @include cds-breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
+        }
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @cds/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: -last-map-item($breakpoints);
+  max-width: map.get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @cds/grid
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include cds-breakpoint($name) {
+      max-width: map.get($value, width);
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// Columns
+// -----------------------------------------------------------------------------
+
+/// Used to initialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @param {Number} $collapsed-gutter [$grid-gutter-condensed] - The condensed mode gutter
+/// @access private
+/// @group @cds/grid
+@mixin -make-col-ready($gutter: $grid-gutter, $condensed-gutter: $grid-gutter-condensed) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: ($gutter * 0.5);
+  padding-left: ($gutter * 0.5);
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each side.
+  .#{$prefix}-row-condensed &,
+  .#{$prefix}-grid-condensed & {
+    padding-right: ($condensed-gutter * 0.5);
+    padding-left: ($condensed-gutter * 0.5);
+  }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}-row-narrow &,
+  .#{$prefix}-grid-narrow & {
+    padding-right: ($gutter * 0.5);
+    padding-left: 0;
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @cds/grid
+@mixin -make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @cds/grid
+@mixin -make-col-offset($span, $columns) {
+  $offset: 0;
+  $offset: math.div($span, $columns);
+
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: math.percentage($offset);
+  }
+}
+
+/// Create a column order for a given span and column count.
+/// @param {Number} $span - The number of columns the order should cover
+/// @access private
+/// @group @cds/grid
+@mixin -make-col-order($span) {
+  order: $span;
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @access private
+/// @group @cds/grid
+@mixin -make-grid-columns($breakpoints: $grid-breakpoints, $gutter: $grid-gutter) {
+  .#{$prefix}-col {
+    @include -make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}-col#{$infix}-#{$i} {
+        @include -make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}-col#{$infix},
+    .#{$prefix}-col#{$infix}-auto {
+      @include -make-col-ready($gutter);
+    }
+
+    @include cds-breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}-col,
+      .#{$prefix}-col#{$infix} {
+        max-width: 100%;
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+
+      .#{$prefix}-col-auto,
+      .#{$prefix}-col#{$infix}-auto {
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+        flex: 1 0 0;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}-col#{$infix}-#{$i} {
+          @include -make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}-offset#{$infix}-#{$i} {
+            @include -make-col-offset($i, $columns);
+          }
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}-order#{$infix}-#{$i} {
+            @include -make-col-order($i);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @cds/grid
+@mixin -make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
+}
+
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter-{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+/// @group @cds/grid
+@mixin -no-gutter {
+  .#{$prefix}-no-gutter,
+  .#{$prefix}-row.#{$prefix}-no-gutter [class*='#{$prefix}-col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}-no-gutter--start,
+  .#{$prefix}-row.#{$prefix}-no-gutter--start [class*='#{$prefix}-col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}-no-gutter--end,
+  .#{$prefix}-row.#{$prefix}-no-gutter--end [class*='#{$prefix}-col'] {
+    padding-right: 0;
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}-hang--start {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}-hang--end {
+    padding-right: $gutter * 0.5;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Functions
+// -----------------------------------------------------------------------------
+
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @cds/layout
+@function -last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, -key-by-index($map, $total-length));
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @cds/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}

package/src/scss/modules/grid/exports/_config.module.scss

@@ -0,0 +1,9 @@
+@import '../_config';
+
+:export {
+  prefix: $prefix;
+  flex-grid-columns: $flex-grid-columns;
+  grid-gutter: $grid-gutter;
+  grid-gutter-condensed: $grid-gutter-condensed;
+  breakpoints: map-keys($grid-breakpoints);
+}

package/src/scss/modules/grid/index.scss

@@ -0,0 +1,5 @@
+@forward 'config';
+@forward 'breakpoint';
+@forward 'css-grid';
+@forward 'flex-grid';
+@forward 'aspect-ratio';

package/src/scss/themes/b2b/tokens-map.scss

@@ -0,0 +1,139 @@
+
+$tokens: (
+  'cds-border-element-01': 1px solid,
+  'cds-border-element-02': 2px solid,
+  'cds-border-radius-s': 3px,
+  'cds-border-radius-m': 6px,
+  'cds-border-radius-l': 9px,
+  'cds-color-background-page-primary': #ffffff,
+  'cds-color-background-page-secondary': #f5f5f5,
+  'cds-color-background-container-primary': #f5f5f5,
+  'cds-color-background-container-secondary': #ffffff,
+  'cds-color-background-field-primary': #ffffff,
+  'cds-color-background-field-secondary': #f5f5f5,
+  'cds-color-background-element-primary': #000000,
+  'cds-color-background-inverse': #000000,
+  'cds-color-border-element-primary': #bebebe,
+  'cds-color-border-element-secondary': #ebebeb,
+  'cds-color-disabled-01': #ebebeb,
+  'cds-color-disabled-02': #bebebe,
+  'cds-color-feedback-error-10': #ffefef,
+  'cds-color-feedback-error-20': #ffe0e0,
+  'cds-color-feedback-error-100': #ff6666,
+  'cds-color-feedback-warning-10': #fff8e5,
+  'cds-color-feedback-warning-20': #fff2cc,
+  'cds-color-feedback-warning-100': #ffc000,
+  'cds-color-feedback-success-10': #effaec,
+  'cds-color-feedback-success-20': #e0f5da,
+  'cds-color-feedback-success-100': #66cd46,
+  'cds-color-feedback-info-10': #f2f2f2,
+  'cds-color-feedback-info-20': #e7e7e7,
+  'cds-color-feedback-info-100': #858585,
+  'cds-color-feedback-progress-10': #e5f3f9,
+  'cds-color-feedback-progress-20': #cce7f3,
+  'cds-color-feedback-progress-100': #0087c4,
+  'cds-color-icon-default': #000000,
+  'cds-color-icon-inverse': #ffffff,
+  'cds-color-interactive-01-default': #7acaff,
+  'cds-color-interactive-01-hover': #48a6e4,
+  'cds-color-interactive-01-focus': #7acaff,
+  'cds-color-interactive-01-active': #2e8cca,
+  'cds-color-interactive-01-above': #000000,
+  'cds-color-interactive-02-default': #f5f5f5,
+  'cds-color-interactive-02-hover': #e8f6ff,
+  'cds-color-interactive-02-focus': #7acaff,
+  'cds-color-interactive-02-active': #e5e5e5,
+  'cds-color-interactive-02-above': #000000,
+  'cds-color-link-default': #096aaa,
+  'cds-color-link-visited': #280099,
+  'cds-color-neutral-0': #ffffff,
+  'cds-color-neutral-4': #f5f5f5,
+  'cds-color-neutral-8': #ebebeb,
+  'cds-color-neutral-10': #e5e5e5,
+  'cds-color-neutral-15': #dadada,
+  'cds-color-neutral-25': #bebebe,
+  'cds-color-neutral-40': #999999,
+  'cds-color-neutral-48': #858585,
+  'cds-color-neutral-66': #555555,
+  'cds-color-neutral-100': #000000,
+  'cds-color-overlay-01': rgba(85, 85, 85, 0.65),
+  'cds-color-overlay-02': rgba(245, 245, 245, 0.65),
+  'cds-color-text-primary': #000000,
+  'cds-color-text-secondary': #bebebe,
+  'cds-color-text-label': #000000,
+  'cds-color-text-description': #555555,
+  'cds-color-text-placeholder': #bebebe,
+  'cds-color-text-inverse': #ffffff,
+  'cds-font-base': 16px,
+  // Font family
+  'cds-font-family-sans': Arial,
+  // Font size
+  'cds-font-family-size': 0.875rem,
+  // Font size
+  'cds-font-body-size-xs': 0.75rem,
+  // Font size
+  'cds-font-body-size-s': 0.875rem,
+  // Font size
+  'cds-font-body-size-m': 1rem,
+  // Font size
+  'cds-font-body-size-l': 1.5rem,
+  // Font size
+  'cds-font-heading-1': 2rem,
+  // Font size
+  'cds-font-heading-2': 1.75rem,
+  // Font size
+  'cds-font-heading-3': 1.5rem,
+  // Font size
+  'cds-font-heading-4': 1.125rem,
+  // Font size
+  'cds-font-heading-5': 0.875rem,
+  // Font size
+  'cds-font-heading-6': 0.75rem,
+  // Font size
+  'cds-font-heading-eyebrow': 0.625rem,
+  // Font size
+  'cds-font-display-1': 4.375rem,
+  // Font size
+  'cds-font-display-2': 3.375rem,
+  // Font Weight
+  'cds-font-weight-bold': 700,
+  // Font Weight
+  'cds-font-weight-semi-bold': 600,
+  // Font Weight
+  'cds-font-weight-normal': 400,
+  // Font Weight
+  'cds-font-weight-light': 300,
+  // Line height
+  'cds-font-height-body': 130%,
+  // Line height
+  'cds-font-height-heading': 120%,
+  // Line height
+  'cds-font-height-display': 120%,
+  // Line height
+  'cds-font-height-helper': 130%,
+  // Font margin
+  'cds-font-margin-heading-1': 0 0 1.5rem,
+  // Font margin
+  'cds-font-margin-heading-2': 3rem 0 1rem,
+  // Font margin
+  'cds-font-margin-heading-3': 2rem 0 1rem,
+  // Font margin
+  'cds-font-margin-heading-4': 1.5rem 0 .75rem,
+  // Font margin
+  'cds-font-margin-heading-5': 1rem 0 .5rem,
+  // Font margin
+  'cds-font-margin-heading-6': 1rem 0 .5rem,
+  // Font margin
+  'cds-font-margin-display-1': 0 0 1.5rem,
+  // Font margin
+  'cds-font-margin-display-2': 0 0 1rem,
+  // Font margin
+  'cds-font-margin-s': 0 0 1rem,
+  'cds-box-shadow-header': 0px 1px 4px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-footer': 0px -1px 4px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-sidebar-left': 1px 0px 4px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-sidebar-right': -1px 0px 4px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-menu': 0px 2px 6px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-modal': 0px 2px 6px rgba(0, 0, 0, 0.2),
+  'cds-box-shadow-notification': 0px 2px 6px rgba(0, 0, 0, 0.2)
+);