@carbon/charts 0.41.48 → 0.41.52

package/styles/vendor/@carbon/elements/scss/grid/modules/_breakpoint.scss

@@ -0,0 +1,266 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../layout/modules/convert';
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/// 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 @carbon/layout
+@function key-by-index($map, $index) {
+  $keys: map-keys($map);
+  @return nth($keys, $index);
+}
+
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function last-map-item($map) {
+  $total-length: length($map);
+  @return map-get($map, key-by-index($map, $total-length));
+}
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px);
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter--condensed: convert.rem(1px);
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+) !default;
+
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+
+/// Get the value of the previous breakpoint, or null for the first breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+
+/// Check to see if the given breakpoint name
+/// @param {String} $name - The name of the brekapoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @return {Bool}
+/// @access public
+/// @group @carbon/layout
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+
+/// Returns the largest breakpoint name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return key-by-index($breakpoints, $total-breakpoints);
+}
+
+/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+/// @param {String} $name - The name of the breakpoint
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+
+/// Generate a media query from the width of the given breakpoint to infinity
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the maximum width of the given styles
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the range between the lower and upper breakpoints
+/// @param {String | Number} $lower
+/// @param {String | Number} $upper
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+
+/// Generate media query for the largest breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+
+/// Generate a media query for a given breakpoint
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}

package/styles/vendor/@carbon/{themes/node_modules/@carbon/colors/scss/colors.scss → elements/scss/grid/modules/_config.scss}

@@ -1,12 +1,12 @@
-// Code generated by @carbon/colors. DO NOT EDIT.
 //
 // Copyright IBM Corp. 2018, 2018
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-@import './mixins';
-// Deprecated ☠️
-@include ibm--colors();
-// Preferred
-@include carbon--colors();
+
+/// Namespace prefix
+/// @type String
+/// @access public
+/// @group @carbon/grid
+$prefix: 'bx' !default;

package/styles/vendor/@carbon/elements/scss/grid/modules/_css-grid.scss

@@ -0,0 +1,350 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use 'config' as *;
+@use 'breakpoint' as *;
+
+@mixin css-grid() {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--cds-grid-columns),
+    minmax(0, var(--cds-grid-column-size))
+  );
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  column-gap: var(--cds-grid-gutter);
+}
+
+@mixin subgrid() {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--cds-grid-columns),
+    minmax(0, var(--cds-grid-column-size))
+  );
+  column-gap: var(--cds-grid-gutter);
+}
+
+:root {
+  --cds-grid-columns: 4;
+  --cds-grid-column-size: 1fr;
+  --cds-grid-gutter: 2rem;
+  --cds-grid-hang: 1rem;
+  --cds-grid-margin: 0;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 8;
+    --cds-grid-margin: 1rem;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 16;
+  }
+
+  @include breakpoint(max) {
+    --cds-grid-margin: 1.5rem;
+  }
+}
+
+.#{$prefix}--css-grid {
+  @include css-grid();
+}
+
+.#{$prefix}--css-grid--12 {
+  @include css-grid();
+  @include breakpoint(lg) {
+    --cds-grid-columns: 12;
+  }
+}
+
+.#{$prefix}--subgrid {
+  @include subgrid();
+}
+
+.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
+  --cds-grid-gutter: 2rem;
+
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: calc(var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-gutter) / 2);
+}
+
+// -----------------------------------------------------------------------------
+// Narrow
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--narrow {
+  --cds-grid-margin: 1rem;
+
+  padding-right: var(--cds-grid-margin);
+  padding-left: var(--cds-grid-margin);
+
+  @include breakpoint(md) {
+    padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+    padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  }
+}
+
+.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
+}
+
+// Narrow subgrid inside condensed
+.#{$prefix}--css-grid--condensed
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
+  --cds-grid-gutter: 2rem;
+
+  padding-right: calc(var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-gutter) / 2);
+}
+
+// -----------------------------------------------------------------------------
+// Condensed
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--condensed {
+  --cds-grid-gutter: 2px;
+
+  column-gap: var(--cds-grid-gutter);
+  row-gap: var(--cds-grid-gutter);
+}
+
+// condensed subgrid inside wide
+.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
+  margin-right: calc(
+    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
+  );
+  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+}
+
+// -----------------------------------------------------------------------------
+// No Gutter
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--no-gutter {
+  // This is set to 0px (versus 0) so that the calc expression for padding for
+  // a grid container works as epxected. Without the unit, the calc() will
+  // result in a value of 0.
+  // stylelint-disable-next-line length-zero-no-unit
+  --cds-grid-gutter: 0px;
+
+  column-gap: var(--cds-grid-gutter);
+}
+
+// -----------------------------------------------------------------------------
+// Column span
+// -----------------------------------------------------------------------------
+@mixin -column-span($i) {
+  @if $i == 0 {
+    display: none;
+  } @else {
+    --cds-grid-columns: #{$i};
+
+    grid-column: span $i / span $i;
+  }
+}
+
+@for $i from 0 through 16 {
+  .#{$prefix}--col-span-#{$i} {
+    @include -column-span($i);
+  }
+}
+
+.#{$prefix}--col-span-auto {
+  grid-column: auto;
+}
+
+.#{$prefix}--col-span-100 {
+  grid-column: 1 / -1;
+}
+
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 0 through $columns {
+      .#{$prefix}--#{$name}\:col-span-#{$i} {
+        @include -column-span($i);
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-span-auto {
+      grid-column: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-100 {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+.#{$prefix}--col-span-25 {
+  --cds-grid-columns: 1;
+
+  grid-column: span 1;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 2;
+
+    grid-column: span 2;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 4;
+
+    grid-column: span 4;
+  }
+}
+
+.#{$prefix}--col-span-50 {
+  --cds-grid-columns: 2;
+
+  grid-column: span 2;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 4;
+
+    grid-column: span 4;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 8;
+
+    grid-column: span 8;
+  }
+}
+
+.#{$prefix}--col-span-75 {
+  --cds-grid-columns: 3;
+
+  grid-column: span 3;
+
+  @include breakpoint(md) {
+    --cds-grid-columns: 6;
+
+    grid-column: span 6;
+  }
+
+  @include breakpoint(lg) {
+    --cds-grid-columns: 12;
+
+    grid-column: span 12;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Column offset
+// -----------------------------------------------------------------------------
+@for $i from 1 through 16 {
+  .#{$prefix}--col-start-#{$i} {
+    grid-column-start: $i;
+  }
+
+  .#{$prefix}--col-end-#{$i} {
+    grid-column-end: $i;
+  }
+}
+
+.#{$prefix}--col-start-auto {
+  grid-column-start: auto;
+}
+
+.#{$prefix}--col-end-auto {
+  grid-column-start: end;
+}
+
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 1 through $columns {
+      .#{$prefix}--#{$name}\:col-start-#{$i} {
+        grid-column-start: $i;
+      }
+
+      .#{$prefix}--#{$name}\:col-end-#{$i} {
+        grid-column-end: $i;
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-start-auto {
+      grid-column-start: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-end-auto {
+      grid-column-start: end;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+.#{$prefix}--hang {
+  padding-left: var(--cds-grid-hang);
+}
+
+// -----------------------------------------------------------------------------
+// Column gutter
+// -----------------------------------------------------------------------------
+.#{$prefix}--gutter {
+  padding-right: var(--cds-grid-hang);
+  padding-left: var(--cds-grid-hang);
+}
+
+.#{$prefix}--gutter-start {
+  padding-left: var(--cds-grid-hang);
+}
+
+[dir='rtl'] .#{$prefix}--gutter-start {
+  padding-right: var(--cds-grid-hang);
+}
+
+.#{$prefix}--gutter-end {
+  padding-right: var(--cds-grid-hang);
+}
+
+[dir='rtl'] .#{$prefix}--gutter-end {
+  padding-left: var(--cds-grid-hang);
+}
+
+// -----------------------------------------------------------------------------
+// Utilities
+// -----------------------------------------------------------------------------
+
+/// Justify items
+.#{$prefix}--justify-items-start {
+  justify-items: start;
+}
+
+.#{$prefix}--justify-items-end {
+  justify-items: end;
+}
+
+.#{$prefix}--justify-items-center {
+  justify-items: center;
+}
+
+/// Align items
+.#{$prefix}--align-items-start {
+  align-items: start;
+}
+
+.#{$prefix}--align-items-end {
+  align-items: end;
+}
+
+.#{$prefix}--align-items-center {
+  align-items: center;
+}