@carbon/themes 10.35.0-rc.0 → 10.37.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.35.0-rc.0",
+  "version": "10.37.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,16 +29,16 @@
     "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && node tasks/build.js && carbon-cli check \"scss/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.26.0-rc.0",
-    "@carbon/layout": "^10.25.0-rc.0",
-    "@carbon/type": "^10.29.0-rc.0",
+    "@carbon/colors": "^10.27.0",
+    "@carbon/layout": "^10.26.0",
+    "@carbon/type": "^10.30.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.24.0-rc.0",
-    "@carbon/cli-reporter": "^10.4.0",
+    "@carbon/cli": "^10.25.0",
+    "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.16.0-rc.0",
+    "@carbon/test-utils": "^10.16.0",
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
@@ -46,5 +46,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "59cbf8d4a129babcc9fdd79ab6021928f7cbf7de"
+  "gitHead": "74da5c7df7a93263ed79ed9b3dd6dc2b52d80024"
 }

package/scss/generated/_mixins.scss

@@ -264,6 +264,87 @@
   $icon-size-01: map-get($theme, 'icon-size-01') !global;
   $icon-size-02: map-get($theme, 'icon-size-02') !global;
 
+  @if global-variable-exists('feature-flags') ==
+    false or
+    global-variable-exists('feature-flags') and
+    map-get($feature-flags, 'enable-v11-release') !=
+    true
+  {
+    $background: $ui-background !global;
+    $layer: $ui-01 !global;
+    $layer-accent: $ui-03 !global;
+    $field: $field-01 !global;
+    $background-inverse: $inverse-02 !global;
+    $background-brand: $interactive-01 !global;
+    $interactive: $interactive-04 !global;
+    $border-subtle: $ui-03 !global;
+    $border-strong: $ui-04 !global;
+    $border-inverse: $ui-05 !global;
+    $border-interactive: $interactive-04 !global;
+    $text-primary: $text-01 !global;
+    $text-secondary: $text-02 !global;
+    $text-placeholder: $text-03 !global;
+    $text-helper: $text-05 !global;
+    $text-on-color: $text-04 !global;
+    $text-inverse: $inverse-01 !global;
+    $link-primary: $link-01 !global;
+    $link-secondary: $link-02 !global;
+    $link-visited: $visited-link !global;
+    $link-inverse: $inverse-link !global;
+    $icon-primary: $icon-01 !global;
+    $icon-secondary: $icon-02 !global;
+    $icon-on-color: $icon-03 !global;
+    $icon-inverse: $inverse-01 !global;
+    $support-error: $support-01 !global;
+    $support-success: $support-02 !global;
+    $support-warning: $support-03 !global;
+    $support-info: $support-04 !global;
+    $support-error-inverse: $inverse-support-01 !global;
+    $support-success-inverse: $inverse-support-02 !global;
+    $support-warning-inverse: $inverse-support-03 !global;
+    $support-info-inverse: $inverse-support-04 !global;
+    $overlay: $overlay-01 !global;
+    $toggle-off: $ui-04 !global;
+    $button-primary: $interactive-01 !global;
+    $button-secondary: $interactive-02 !global;
+    $button-tertiary: $interactive-03 !global;
+    $button-danger-primary: $danger-01 !global;
+    $button-danger-secondary: $danger-02 !global;
+    $background-active: $active-ui !global;
+    $layer-active: $active-ui !global;
+    $button-danger-active: $active-danger !global;
+    $button-primary-active: $active-primary !global;
+    $button-secondary-active: $active-secondary !global;
+    $button-tertiary-active: $active-tertiary !global;
+    $focus-inset: $inverse-01 !global;
+    $focus-inverse: $inverse-focus-ui !global;
+    $background-hover: $hover-ui !global;
+    $layer-hover: $hover-ui !global;
+    $field-hover: $hover-ui !global;
+    $background-inverse-hover: $inverse-hover-ui !global;
+    $link-primary-hover: $hover-primary-text !global;
+    $button-danger-hover: $hover-danger !global;
+    $button-primary-hover: $hover-primary !global;
+    $button-secondary-hover: $hover-secondary !global;
+    $button-tertiary-hover: $hover-tertiary !global;
+    $background-selected: $selected-ui !global;
+    $background-selected-hover: $hover-selected-ui !global;
+    $layer-selected: $selected-ui !global;
+    $layer-selected-hover: $hover-selected-ui !global;
+    $layer-selected-inverse: $ui-05 !global;
+    $border-subtle-selected: $active-ui !global;
+    $layer-disabled: $disabled-01 !global;
+    $field-disabled: $disabled-01 !global;
+    $border-disabled: $disabled-01 !global;
+    $text-disabled: $disabled-02 !global;
+    $button-disabled: $disabled-02 !global;
+    $icon-disabled: $disabled-02 !global;
+    $text-on-color-disabled: $disabled-03 !global;
+    $icon-on-color-disabled: $disabled-03 !global;
+    $layer-selected-disabled: $disabled-03 !global;
+    $skeleton-background: $skeleton-01 !global;
+    $skeleton-element: $skeleton-02 !global;
+  }
   @if global-variable-exists('feature-flags') and
     map-get($feature-flags, 'enable-css-custom-properties')
   {

package/scss/modules/_theme.scss

@@ -14,7 +14,7 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin theme($active-theme: $theme) {
+@mixin theme($active-theme: $theme, $component-tokens...) {
   $parent-theme: $theme;
   $theme: $active-theme !global;
 
@@ -22,6 +22,12 @@ $-custom-property-prefix: 'cds';
     @include -custom-property($token, $value);
   }
 
+  @each $group in $component-tokens {
+    @each $token, $value in $group {
+      @include -custom-property($token, $value);
+    }
+  }
+
   @content;
 
   $theme: $parent-theme !global;

package/src/next/tokens/Token.js

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+/**
+ * A Token is the simplest unit in our theme. It can have a name, properties
+ * that it applies to like border or background, along with a state if the
+ * token should only be used for specific states like hover or focus.
+ */
+export class Token {
+  static create(token) {
+    if (typeof token === 'string') {
+      return new Token(token);
+    }
+
+    return new Token(token.name, token.properties, token.state);
+  }
+
+  constructor(name, properties, state) {
+    this.kind = 'Token';
+    this.name = name;
+
+    if (properties) {
+      this.properties = properties;
+    }
+
+    if (state) {
+      this.state = state;
+    }
+  }
+}

package/src/next/tokens/TokenFormat.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+const formats = {
+  js: 'javascript',
+};
+
+export const TokenFormat = {
+  formats,
+
+  convert({ name, format }) {
+    if (format === formats.js) {
+      const keywords = new Set(['ui']);
+
+      return name
+        .split('-')
+        .map((part, index) => {
+          if (index === 0) {
+            return part;
+          }
+
+          if (keywords.has(part)) {
+            return part.toUpperCase();
+          }
+
+          return part[0].toUpperCase() + part.slice(1);
+        })
+        .join('');
+    }
+
+    return name;
+  },
+};

package/src/next/tokens/TokenGroup.js

@@ -0,0 +1,161 @@
+/**
+ * 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 { Token } from './Token';
+
+/**
+ * A TokenGroup allows us to group up a collection of tokens and nested token
+ * groups. A group allows us to colocate related tokens and write information
+ * once that applies to the entire collection of tokens. For example, if all the
+ * tokens apply to the `border` color property then we can specify this property
+ * at the group level
+ *
+ * A TokenGroup allows us to colocate all this information while also providing
+ * ways to get information about the entire group, including properties and
+ * states
+ */
+export class TokenGroup {
+  static create({ name, properties, tokens = [] }) {
+    return new TokenGroup(name, tokens, properties);
+  }
+
+  constructor(name, tokens, properties) {
+    this.kind = 'TokenGroup';
+    this.name = name;
+
+    if (properties) {
+      this.properties = properties;
+    }
+
+    this.children = tokens.map((child) => {
+      if (child.kind === 'TokenGroup') {
+        return child;
+      }
+
+      return Token.create(child);
+    });
+  }
+
+  *[Symbol.iterator]() {
+    yield this;
+
+    for (const child of this.children) {
+      yield child;
+
+      if (child.kind === 'TokenGroup') {
+        yield* child;
+      }
+    }
+  }
+
+  /**
+   * Get all the tokens available in every Token Group in this TokenGroup,
+   * including itself.
+   * @returns {Array<Token>}
+   */
+  getTokens(parentContext = {}) {
+    const context = {
+      ...parentContext,
+      groups: parentContext.groups ? parentContext.groups.concat(this) : [this],
+      properties: this.properties || parentContext.properties,
+    };
+
+    return this.children.flatMap((child) => {
+      if (child.kind === 'TokenGroup') {
+        return child.getTokens(context);
+      }
+
+      const token = {
+        ...context,
+        name: child.name,
+        properties: child.properties || context.properties,
+      };
+
+      if (child.state) {
+        token.state = child.state;
+      }
+
+      return token;
+    });
+  }
+
+  /**
+   * Get a specific token from the TokenGroup, or form one of its nested
+   * TokenGroups
+   * @returns {Token}
+   */
+  getToken(tokenOrName) {
+    const name =
+      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
+    for (const child of this) {
+      if (child.kind === 'TokenGroup') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return child;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Get all the unique groups in the token group, including this group
+   * @returns {Array<TokenGroup>}
+   */
+  getTokenGroups() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (child.kind !== 'TokenGroup') {
+        continue;
+      }
+      set.add(child);
+    }
+
+    return Array.from(set);
+  }
+
+  /**
+   * Get all the unique properties in the token group, including this group
+   * @returns {Array<string>}
+   */
+  getTokenProperties() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (!Array.isArray(child.properties)) {
+        continue;
+      }
+
+      for (const property of child.properties) {
+        set.add(property);
+      }
+    }
+
+    return Array.from(set);
+  }
+
+  /**
+   * Get all the unique states in the token group, including this group
+   * @returns {Array<string>}
+   */
+  getTokenStates() {
+    const set = new Set();
+
+    for (const child of this) {
+      if (child.kind !== 'Token') {
+        continue;
+      }
+      if (child.state) {
+        set.add(child.state);
+      }
+    }
+
+    return Array.from(set);
+  }
+}

package/src/next/tokens/TokenSet.js

@@ -0,0 +1,77 @@
+/**
+ * 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.
+ */
+
+/**
+ * A token set is a collection of tokens which should be along with each other.
+ * For example, we have tokens that correspond to a layer level in a UI. A
+ * token set allows us to group these tokens together in a way that's different
+ * than their token group.
+ */
+export class TokenSet {
+  static create({ name, tokens }) {
+    return new TokenSet(name, tokens);
+  }
+
+  constructor(name, tokens = []) {
+    this.kind = 'TokenSet';
+    this.name = name;
+    this.children = tokens;
+  }
+
+  *[Symbol.iterator]() {
+    for (const child of this.children) {
+      yield child;
+
+      if (child.kind === 'TokenSet') {
+        yield* child;
+      }
+    }
+  }
+
+  getTokenSets() {
+    const children = this.children
+      .filter((child) => {
+        return child.kind === 'TokenSet';
+      })
+      .flatMap((child) => {
+        return child.getTokenSets();
+      });
+
+    return [this, ...children];
+  }
+
+  getTokenSet(name) {
+    for (const child of this) {
+      if (!child.kind === 'TokenSet') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return child;
+      }
+    }
+
+    return null;
+  }
+
+  hasToken(tokenOrName) {
+    const name =
+      typeof tokenOrName === 'string' ? tokenOrName : tokenOrName.name;
+
+    for (const child of this) {
+      if (child.kind === 'TokenSet') {
+        continue;
+      }
+
+      if (child.name === name) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}

package/src/next/tokens/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { Token } from './Token';
+import { TokenFormat } from './TokenFormat';
+import { TokenGroup } from './TokenGroup';
+import { TokenSet } from './TokenSet';
+
+export { Token, TokenFormat, TokenGroup, TokenSet };

package/src/next/tokens/v11TokenGroup.js

@@ -0,0 +1,357 @@
+/**
+ * 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 { TokenGroup } from './TokenGroup';
+
+export const background = TokenGroup.create({
+  name: 'Background',
+  properties: ['background'],
+  tokens: [
+    'background',
+    {
+      name: 'background-active',
+      state: 'active',
+    },
+    {
+      name: 'background-selected',
+      state: 'selected',
+    },
+    {
+      name: 'background-selected-hover',
+      state: 'hover',
+    },
+    {
+      name: 'background-hover',
+      state: 'hover',
+    },
+    'background-brand',
+    'background-inverse',
+    {
+      state: 'hover',
+      name: 'background-inverse-hover',
+    },
+  ],
+});
+
+export const layer = TokenGroup.create({
+  name: 'Layer',
+  properties: ['background'],
+  tokens: [
+    {
+      name: 'layer-01',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-01',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-01',
+    },
+    {
+      name: 'layer-02',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-02',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-02',
+    },
+    {
+      name: 'layer-03',
+    },
+    {
+      state: 'active',
+      name: 'layer-active-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-hover-03',
+    },
+    {
+      state: 'selected',
+      name: 'layer-selected-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-selected-hover-03',
+    },
+    {
+      state: 'disabled',
+      name: 'layer-disabled',
+    },
+    {
+      name: 'layer-selected-inverse',
+    },
+    {
+      state: 'disabled',
+      name: 'layer-selected-disabled',
+    },
+    {
+      name: 'layer-accent-01',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-01',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-01',
+    },
+    {
+      name: 'layer-accent-02',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-02',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-02',
+    },
+    {
+      name: 'layer-accent-03',
+    },
+    {
+      state: 'active',
+      name: 'layer-accent-active-03',
+    },
+    {
+      state: 'hover',
+      name: 'layer-accent-hover-03',
+    },
+  ],
+});
+
+export const field = TokenGroup.create({
+  name: 'Field',
+  properties: ['background'],
+  tokens: [
+    {
+      name: 'field-01',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-01',
+    },
+    {
+      name: 'field-02',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-02',
+    },
+    {
+      name: 'field-03',
+    },
+    {
+      state: 'hover',
+      name: 'field-hover-03',
+    },
+    {
+      state: 'disabled',
+      name: 'field-disabled',
+    },
+  ],
+});
+
+export const border = TokenGroup.create({
+  name: 'Borders',
+  properties: ['border'],
+  tokens: [
+    {
+      name: 'border-subtle-00',
+    },
+    {
+      name: 'border-subtle-01',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-01',
+    },
+    {
+      name: 'border-subtle-02',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-02',
+    },
+    {
+      name: 'border-subtle-03',
+    },
+    {
+      state: 'selected',
+      name: 'border-subtle-selected-03',
+    },
+
+    // Border strong
+    'border-strong-01',
+    'border-strong-02',
+    'border-strong-03',
+
+    // Border inverse
+    'border-inverse',
+
+    // Border interactive
+    'border-interactive',
+
+    {
+      state: 'disabled',
+      name: 'border-disabled',
+    },
+  ],
+});
+
+export const text = TokenGroup.create({
+  name: 'Text',
+  properties: ['color'],
+  tokens: [
+    'text-primary',
+    'text-secondary',
+    'text-placeholder',
+    'text-helper',
+    'text-error',
+    'text-inverse',
+    {
+      name: 'text-on-color',
+    },
+    {
+      state: 'disabled',
+      name: 'text-on-color-disabled',
+    },
+
+    {
+      state: 'disabled',
+      name: 'text-disabled',
+    },
+  ],
+});
+
+export const link = TokenGroup.create({
+  name: 'Link',
+  properties: ['color'],
+  tokens: [
+    {
+      name: 'link-primary',
+    },
+    {
+      state: 'hover',
+      name: 'link-primary-hover',
+    },
+    'link-secondary',
+    'link-inverse',
+    {
+      state: 'visited',
+      name: 'link-visited',
+    },
+  ],
+});
+
+export const icon = TokenGroup.create({
+  name: 'Icons',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: [
+    'icon-primary',
+    'icon-secondary',
+    'icon-inverse',
+    {
+      name: 'icon-on-color',
+    },
+    {
+      state: 'disabled',
+      name: 'icon-on-color-disabled',
+    },
+    {
+      state: 'disabled',
+      name: 'icon-disabled',
+    },
+  ],
+});
+
+export const support = TokenGroup.create({
+  name: 'Support',
+  properties: ['background', 'fill', 'stroke'],
+  tokens: [
+    'support-error',
+    'support-success',
+    'support-warning',
+    'support-info',
+    'support-error-inverse',
+    'support-success-inverse',
+    'support-warning-inverse',
+    'support-info-inverse',
+    'support-caution-major',
+    'support-caution-minor',
+    'support-caution-undefined',
+  ],
+});
+
+export const focus = TokenGroup.create({
+  name: 'Focus',
+  properties: ['border'],
+  tokens: ['focus', 'focus-inset', 'focus-inverse'],
+});
+
+export const skeleton = TokenGroup.create({
+  name: 'Skeleton',
+  properties: ['background'],
+  tokens: ['skeleton-background', 'skeleton-element'],
+});
+
+export const group = TokenGroup.create({
+  name: 'v11',
+  tokens: [
+    background,
+    layer,
+    field,
+
+    // Interactive
+    {
+      name: 'interactive',
+      properties: ['background', 'color'],
+    },
+
+    border,
+    text,
+    link,
+    icon,
+    support,
+
+    // Misc
+    {
+      name: 'highlight',
+    },
+    {
+      name: 'overlay',
+      properties: ['background'],
+    },
+    {
+      name: 'toggle-off',
+    },
+
+    focus,
+    skeleton,
+  ],
+});

package/src/next/tokens/v11TokenSet.js

@@ -0,0 +1,85 @@
+/**
+ * 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 { TokenSet } from './TokenSet';
+import { background, border, field, layer } from './v11TokenGroup';
+
+export const set = TokenSet.create({
+  name: 'All',
+  tokens: [
+    TokenSet.create({
+      name: 'Base set',
+      tokens: [
+        background.getToken('background'),
+        background.getToken('background-hover'),
+        background.getToken('background-selected'),
+        background.getToken('background-selected-hover'),
+        border.getToken('border-subtle-00'),
+      ],
+    }),
+    TokenSet.create({
+      name: '01 Layer set',
+      tokens: [
+        layer.getToken('layer-01'),
+        layer.getToken('layer-active-01'),
+        layer.getToken('layer-hover-01'),
+        layer.getToken('layer-selected-hover-01'),
+        layer.getToken('layer-accent-01'),
+        layer.getToken('layer-accent-active-01'),
+        layer.getToken('layer-accent-hover-01'),
+
+        field.getToken('field-01'),
+        field.getToken('field-hover-01'),
+
+        border.getToken('border-subtle-01'),
+        border.getToken('border-subtle-selected-01'),
+
+        border.getToken('border-strong-01'),
+      ],
+    }),
+    TokenSet.create({
+      name: '02 Layer set',
+      tokens: [
+        layer.getToken('layer-02'),
+        layer.getToken('layer-active-02'),
+        layer.getToken('layer-hover-02'),
+        layer.getToken('layer-selected-hover-02'),
+        layer.getToken('layer-accent-02'),
+        layer.getToken('layer-accent-active-02'),
+        layer.getToken('layer-accent-hover-02'),
+
+        field.getToken('field-02'),
+        field.getToken('field-hover-02'),
+
+        border.getToken('border-subtle-02'),
+        border.getToken('border-subtle-selected-02'),
+
+        border.getToken('border-strong-02'),
+      ],
+    }),
+    TokenSet.create({
+      name: '03 Layer set',
+      tokens: [
+        layer.getToken('layer-03'),
+        layer.getToken('layer-active-03'),
+        layer.getToken('layer-hover-03'),
+        layer.getToken('layer-selected-hover-03'),
+        layer.getToken('layer-accent-03'),
+        layer.getToken('layer-accent-active-03'),
+        layer.getToken('layer-accent-hover-03'),
+
+        field.getToken('field-03'),
+        field.getToken('field-hover-03'),
+
+        border.getToken('border-subtle-03'),
+        border.getToken('border-subtle-selected-03'),
+
+        border.getToken('border-strong-03'),
+      ],
+    }),
+  ],
+});