@carbon/elements 10.26.0-rc.3 → 10.27.0

package/scss/themes/modules/generated/_themes.scss

@@ -0,0 +1,244 @@
+// Code generated by @carbon/themes. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// 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 '@carbon/layout';
+@use '@carbon/type';
+@use '../utilities';
+
+$white: utilities.merge(
+  layout.$spacing,
+  layout.$fluid-spacing,
+  type.$tokens,
+  (
+    interactive-01: #0f62fe,
+    interactive-02: #393939,
+    interactive-03: #0f62fe,
+    interactive-04: #0f62fe,
+    ui-background: #ffffff,
+    ui-01: #f4f4f4,
+    ui-02: #ffffff,
+    ui-03: #e0e0e0,
+    ui-04: #8d8d8d,
+    ui-05: #161616,
+    text-01: #161616,
+    text-02: #525252,
+    text-03: #a8a8a8,
+    text-04: #ffffff,
+    text-05: #6f6f6f,
+    text-error: #da1e28,
+    icon-01: #161616,
+    icon-02: #525252,
+    icon-03: #ffffff,
+    link-01: #0f62fe,
+    inverse-link: #78a9ff,
+    field-01: #f4f4f4,
+    field-02: #ffffff,
+    inverse-01: #ffffff,
+    inverse-02: #393939,
+    support-01: #da1e28,
+    support-02: #24a148,
+    support-03: #f1c21b,
+    support-04: #0043ce,
+    inverse-support-01: #fa4d56,
+    inverse-support-02: #42be65,
+    inverse-support-03: #f1c21b,
+    inverse-support-04: #4589ff,
+    overlay-01: rgba(22, 22, 22, 0.5),
+    danger-01: #da1e28,
+    danger-02: #da1e28,
+    focus: #0f62fe,
+    inverse-focus-ui: #ffffff,
+    hover-primary: #0353e9,
+    active-primary: #002d9c,
+    hover-primary-text: #0043ce,
+    hover-secondary: #4c4c4c,
+    active-secondary: #6f6f6f,
+    hover-tertiary: #0353e9,
+    active-tertiary: #002d9c,
+    hover-ui: #e5e5e5,
+    hover-light-ui: #e5e5e5,
+    active-ui: #c6c6c6,
+    active-light-ui: #c6c6c6,
+    selected-ui: #e0e0e0,
+    selected-light-ui: #e0e0e0,
+    inverse-hover-ui: #4c4c4c,
+    hover-selected-ui: #cacaca,
+    hover-danger: #b81921,
+    active-danger: #750e13,
+    hover-row: #e5e5e5,
+    visited-link: #8a3ffc,
+    disabled-01: #f4f4f4,
+    disabled-02: #c6c6c6,
+    disabled-03: #8d8d8d,
+    highlight: #d0e2ff,
+    decorative-01: #e0e0e0,
+    button-separator: #e0e0e0,
+    skeleton-01: #e5e5e5,
+    skeleton-02: #c6c6c6,
+    brand-01: #0f62fe,
+    brand-02: #393939,
+    brand-03: #0f62fe,
+    active-01: #c6c6c6,
+    hover-field: #e5e5e5,
+    danger: #da1e28,
+  )
+) !default;
+
+/// Carbon's g10 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$g10: map.merge(
+  $white,
+  (
+    ui-background: #f4f4f4,
+    ui-01: #ffffff,
+    ui-02: #f4f4f4,
+    field-01: #ffffff,
+    field-02: #f4f4f4,
+    disabled-01: #ffffff,
+    highlight: #edf5ff,
+  )
+) !default;
+
+/// Carbon's g90 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$g90: map.merge(
+  $white,
+  (
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #4589ff,
+    ui-background: #262626,
+    ui-01: #393939,
+    ui-02: #525252,
+    ui-03: #525252,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #8d8d8d,
+    text-error: #ffb3b8,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    inverse-link: #0f62fe,
+    field-01: #393939,
+    field-02: #525252,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #ff8389,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
+    focus: #ffffff,
+    inverse-focus-ui: #0f62fe,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #606060,
+    active-secondary: #393939,
+    hover-tertiary: #f4f4f4,
+    active-tertiary: #c6c6c6,
+    hover-ui: #4c4c4c,
+    hover-light-ui: #656565,
+    active-ui: #6f6f6f,
+    active-light-ui: #8d8d8d,
+    selected-ui: #525252,
+    selected-light-ui: #6f6f6f,
+    inverse-hover-ui: #e5e5e5,
+    hover-selected-ui: #656565,
+    hover-row: #4c4c4c,
+    visited-link: #be95ff,
+    disabled-01: #393939,
+    disabled-02: #6f6f6f,
+    disabled-03: #a8a8a8,
+    highlight: #0043ce,
+    decorative-01: #6f6f6f,
+    button-separator: #161616,
+    skeleton-01: #353535,
+    skeleton-02: #525252,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #6f6f6f,
+    hover-field: #4c4c4c,
+  )
+) !default;
+
+/// Carbon's g100 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$g100: map.merge(
+  $white,
+  (
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #4589ff,
+    ui-background: #161616,
+    ui-01: #262626,
+    ui-02: #393939,
+    ui-03: #393939,
+    ui-04: #6f6f6f,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #8d8d8d,
+    text-error: #ff8389,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    inverse-link: #0f62fe,
+    field-01: #262626,
+    field-02: #393939,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #fa4d56,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #fa4d56,
+    focus: #ffffff,
+    inverse-focus-ui: #0f62fe,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #606060,
+    active-secondary: #393939,
+    hover-tertiary: #f4f4f4,
+    active-tertiary: #c6c6c6,
+    hover-ui: #353535,
+    hover-light-ui: #4c4c4c,
+    active-ui: #525252,
+    active-light-ui: #6f6f6f,
+    selected-ui: #393939,
+    selected-light-ui: #525252,
+    inverse-hover-ui: #e5e5e5,
+    hover-selected-ui: #4c4c4c,
+    hover-row: #353535,
+    visited-link: #be95ff,
+    disabled-01: #262626,
+    disabled-02: #525252,
+    highlight: #002d9c,
+    decorative-01: #525252,
+    button-separator: #161616,
+    skeleton-01: #353535,
+    skeleton-02: #393939,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #525252,
+    hover-field: #353535,
+  )
+) !default;

package/scss/type/modules/_classes.scss

@@ -0,0 +1,42 @@
+//
+// 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 'font-family' as *;
+@use 'prefix' as *;
+@use 'styles' as *;
+
+/// Create type classes for font families, weights, styles
+/// @access public
+/// @group @carbon/type
+@mixin type-classes {
+  // Font families
+  @each $name, $value in $font-families {
+    .#{$prefix}--type-#{$name} {
+      font-family: $value;
+    }
+  }
+
+  // Font weights
+  @each $name, $value in $font-weights {
+    .#{$prefix}--type-#{$name} {
+      font-weight: $value;
+    }
+  }
+
+  // Font styles
+  .#{$prefix}--type-italic {
+    font-style: italic;
+  }
+
+  // Type styles
+  @each $name, $value in $tokens {
+    .#{$prefix}--type-#{$name} {
+      @include type-style($name, map.has-key($value, breakpoints));
+    }
+  }
+}

package/scss/type/modules/_font-family.scss

@@ -0,0 +1,70 @@
+//
+// 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.
+//
+
+/// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
+/// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-families: (
+  'mono':
+    unquote(
+      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+    ),
+  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-condensed':
+    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+  'sans-hebrew':
+    unquote(
+      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+    ),
+  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
+) !default;
+
+/// Get the font-family for an IBM Plex font
+/// @param {String} $name
+/// @return {String}
+/// @access public
+/// @group @carbon/type
+@function font-family($name) {
+  @return map-get($font-families, $name);
+}
+
+/// Include the `font-family` definition for the given name in your selector
+/// @param {String} $name
+/// @access public
+/// @group @carbon/type
+@mixin font-family($name) {
+  font-family: font-family($name);
+}
+
+/// Suggested font weights to be used in product
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$font-weights: (
+  'light': 300,
+  'regular': 400,
+  'semibold': 600,
+) !default;
+
+/// Retrieve the font-weight value for a given name
+/// @param {String} $weight
+/// @return {Number}
+/// @access public
+/// @group @carbon/type
+@function font-weight($weight) {
+  @return map-get($font-weights, $weight);
+}
+
+/// Set the `font-weight` property with the value for a given name
+/// @param {String} $weight
+/// @access public
+/// @group @carbon/type
+@mixin font-weight($weight) {
+  font-weight: font-weight($weight);
+}

package/scss/type/modules/_prefix.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+/// @type String
+/// @access public
+/// @group @carbon/type
+$prefix: 'bx' !default;

package/scss/type/modules/_reset.scss

@@ -0,0 +1,92 @@
+//
+// 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 'sass:meta';
+@use '@carbon/layout';
+@use 'font-family' as *;
+@use 'styles' as *;
+
+/// Include a type reset for a given body and mono font family
+/// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
+/// @param {String} $mono-font-family [font-family('mono')] - The font family used on elements that require mono fonts, like the `<code>` element
+/// @access public
+/// @group @carbon/type
+@mixin type-reset(
+  // TODO: remove in next major release. This has been replaced with 100%
+  $base-font-size: layout.$base-font-size,
+  $body-font-family: font-family('sans'),
+  $mono-font-family: font-family('mono')
+) {
+  html {
+    font-size: 100%;
+  }
+
+  body {
+    @include font-weight('regular');
+
+    font-family: $body-font-family;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: $mono-font-family;
+  }
+
+  strong {
+    @include font-weight('semibold');
+  }
+}
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+  h1 {
+    @include type-style('productive-heading-06');
+  }
+
+  h2 {
+    @include type-style('productive-heading-05');
+  }
+
+  h3 {
+    @include type-style('productive-heading-04');
+  }
+
+  h4 {
+    @include type-style('productive-heading-03');
+  }
+
+  h5 {
+    @include type-style('productive-heading-02');
+  }
+
+  h6 {
+    @include type-style('productive-heading-01');
+  }
+
+  p {
+    @include type-style('body-long-02');
+  }
+
+  a {
+    @if meta.global-variable-exists('carbon--theme') and
+      map.has-key($carbon--theme, 'link-01')
+    {
+      color: map.get($carbon--theme, 'link-01');
+    } @else {
+      color: #0062fe;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+}

package/scss/type/modules/_scale.scss

@@ -0,0 +1,56 @@
+//
+// 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 '@carbon/layout';
+
+/// Compute the type size for the given type scale step
+/// @param {Number} $step
+/// @return {Number} In px
+/// @access public
+/// @group @carbon/type
+@function get-type-size($step) {
+  @if $step == 1 {
+    @return 12px;
+  }
+  // Yn = Yn-1 + {INT[(n-2)/4] + 1} * 2
+  @return get-type-size($step - 1) + (floor(($step - 2) / 4) + 1) * 2;
+}
+
+/// Type scale follows a custom formula for determining each step size and supports sizes from 12px to 92px
+/// @type Map
+/// @access public
+/// @group @carbon/type
+$type-scale: ();
+@for $i from 1 through 23 {
+  $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+}
+
+/// Get the value of a specific step in the type scale
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/type
+@function type-scale($step) {
+  @return nth($type-scale, $step);
+}
+
+/// Set the font-size value of a selector with the value at the given `$step`
+/// @param {Number} $step
+/// @access public
+/// @group @carbon/type
+@mixin type-scale($step) {
+  font-size: type-scale($step);
+}
+
+/// Alias of `type-scale` mixin.
+/// @param {Number} $step
+/// @alias type-scale
+/// @access public
+/// @group @carbon/type
+@mixin font-size($step) {
+  font-size: type-scale($step);
+}