@carbon/elements 10.27.0-rc.0 → 10.27.0

package/README.md

@@ -71,12 +71,6 @@ With `@carbon/elements`, you can also import `colors`:
 import { colors } from '@carbon/elements';
 ```
 
-## 📖 API Documentation
-
-If you're looking for `@carbon/elements` API documentation, check out:
-
-- [Sass](./docs/sass.md)
-
 ## 🙌 Contributing
 
 We're always looking for contributors to help us fix bugs, build new features,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.27.0-rc.0",
+  "version": "10.27.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -31,25 +31,25 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonElements && node tasks/build.js && carbon-cli check \"scss/*.scss\" && carbon-cli sassdoc \"scss/**/*.scss\" -i \"**/{_inlined,vendor}/**\"",
+    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonElements && node tasks/build.js && carbon-cli check \"scss/*.scss\"",
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.20.0-rc.0",
-    "@carbon/grid": "^10.20.0-rc.0",
-    "@carbon/icons": "^10.25.0-rc.0",
-    "@carbon/import-once": "^10.5.0",
-    "@carbon/layout": "^10.18.0-rc.0",
-    "@carbon/motion": "^10.13.0-rc.0",
-    "@carbon/themes": "^10.27.0-rc.0",
-    "@carbon/type": "^10.21.0-rc.0"
+    "@carbon/colors": "^10.20.0",
+    "@carbon/grid": "^10.20.0",
+    "@carbon/icons": "^10.25.0",
+    "@carbon/import-once": "^10.6.0",
+    "@carbon/layout": "^10.18.0",
+    "@carbon/motion": "^10.13.0",
+    "@carbon/themes": "^10.27.0",
+    "@carbon/type": "^10.21.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.19.0-rc.0",
+    "@carbon/cli": "^10.19.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "f20d953bfdd69fd024f2b202fd7e62f3139d431c"
+  "gitHead": "79db5535fee7f58e0fe21bac154b638cd17f659e"
 }

package/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss

@@ -26,12 +26,12 @@ $fluid-spacing-03: 5vw !default;
 /// @group @carbon/layout
 $fluid-spacing-04: 10vw !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
 );

package/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -66,20 +66,20 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
 );

package/scss/layout/modules/generated/_fluid-spacing.scss

@@ -26,12 +26,12 @@ $fluid-spacing-03: 5vw !default;
 /// @group @carbon/layout
 $fluid-spacing-04: 10vw !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
 );

package/scss/layout/modules/generated/_spacing.scss

@@ -66,20 +66,20 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
 );

package/scss/themes/modules/_theme.scss

@@ -0,0 +1,50 @@
+//
+// 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 'themes';
+
+$theme: themes.$white !default;
+$-custom-property-prefix: 'cds';
+
+/// @access public
+/// @group @carbon/themes
+@mixin theme($active-theme: $theme) {
+  $parent-theme: $theme;
+  $theme: $active-theme !global;
+
+  @each $token, $value in $theme {
+    @include -custom-property($token, $value);
+  }
+
+  @content;
+
+  $theme: $parent-theme !global;
+}
+
+/// @access public
+/// @group @carbon/themes
+@mixin set($active-theme) {
+  $theme: $active-theme !global;
+}
+
+/// @access private
+/// @group @carbon/themes
+@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
+  @if meta.type-of($value) == map {
+    @each $property, $property-value in $value {
+      // Only support one-level of depth for values that are maps. This is to
+      // avoid bringing properties like `breakpoints` on type tokens
+      @if type-of($property-value) != map {
+        @include -custom-property('#{$name}-#{$property}', $property-value);
+      }
+    }
+  } @else {
+    --#{$prefix}-#{$name}: #{$value};
+  }
+}

package/scss/themes/modules/_themes.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@forward 'generated/themes';

package/scss/themes/modules/_utilities.scss

@@ -0,0 +1,18 @@
+//
+// 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';
+
+/// @access private
+/// @group @carbon/themes
+@function merge($map, $maps...) {
+  $result: $map;
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}

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/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss

@@ -26,12 +26,12 @@ $fluid-spacing-03: 5vw !default;
 /// @group @carbon/layout
 $fluid-spacing-04: 10vw !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
 );

package/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -66,20 +66,20 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
 );