@carbon/themes 10.36.0 → 10.38.0

package/src/next/g90.js

@@ -0,0 +1,269 @@
+/**
+ * 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 {
+  // Blue
+  blue40,
+  blue60,
+  blue70,
+
+  // Gray
+  gray10,
+  gray30,
+  gray40,
+  gray50,
+  gray50Hover,
+  gray60,
+  gray60Hover,
+  gray70,
+  gray70Hover,
+  gray80,
+  gray90,
+  gray100,
+
+  // Support
+  blue30,
+  blue50,
+  green40,
+  green50,
+  yellow30,
+  orange40,
+  red30,
+  red40,
+  red60,
+  purple40,
+  purple50,
+
+  // Constants
+  white,
+} from '@carbon/colors';
+import { adjustLightness } from '../tools';
+
+// Background
+export const background = gray90;
+export const backgroundInverse = gray10;
+export const backgroundBrand = blue60;
+export const backgroundActive = gray80;
+export const backgroundHover = adjustLightness(background, 5);
+export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+export const backgroundSelected = gray80;
+export const backgroundSelectedHover = adjustLightness(backgroundSelected, 6);
+
+// Layer
+// layer-01
+export const layer01 = gray80;
+export const layerActive01 = gray60;
+export const layerHover01 = adjustLightness(layer01, 6);
+export const layerSelected01 = gray70;
+export const layerSelectedHover01 = gray70Hover;
+
+// layer-02
+export const layer02 = gray70;
+export const layerActive02 = gray50;
+export const layerHover02 = gray70Hover;
+export const layerSelected02 = gray60;
+export const layerSelectedHover02 = gray60Hover;
+
+// layer-03
+export const layer03 = gray60;
+export const layerActive03 = gray80;
+export const layerHover03 = gray60Hover;
+export const layerSelected03 = gray50;
+export const layerSelectedHover03 = gray50Hover;
+
+// layer
+export const layerDisabled = gray80;
+export const layerSelectedInverse = gray10;
+export const layerSelectedDisabled = gray40;
+
+// layer-accent-01
+export const layerAccent01 = gray70;
+export const layerAccentActive01 = gray50;
+export const layerAccentHover01 = adjustLightness(layerAccent01, 7);
+
+// layer-accent-02
+export const layerAccent02 = gray60;
+export const layerAccentActive02 = gray80;
+export const layerAccentHover02 = adjustLightness(layerAccent01, -7);
+
+// layer-accent-03
+export const layerAccent03 = gray50;
+export const layerAccentActive03 = gray70;
+export const layerAccentHover03 = gray50Hover;
+
+// Field
+// field-01
+export const field01 = gray80;
+export const fieldHover01 = adjustLightness(field01, 6);
+
+// field-02
+export const field02 = gray70;
+export const fieldHover02 = gray70Hover;
+
+// field-03
+export const field03 = gray60;
+export const fieldHover03 = gray60Hover;
+
+// field
+export const fieldDisabled = gray80;
+
+// Border
+// border-subtle-00
+export const borderSubtle00 = gray70;
+
+// border-subtle-01
+export const borderSubtle01 = gray70;
+export const borderSubtleSelected01 = gray60;
+
+// border-subtle-02
+export const borderSubtle02 = gray60;
+export const borderSubtleSelected02 = gray50;
+
+// border-subtle-03
+export const borderSubtle03 = gray50;
+export const borderSubtleSelected03 = gray40;
+
+// border-strong
+export const borderStrong01 = gray50;
+export const borderStrong02 = gray40;
+export const borderStrong03 = gray30;
+
+// border-inverse
+export const borderInverse = gray10;
+
+// border-interactive
+export const borderInteractive = blue50;
+
+// border
+export const borderDisabled = gray80;
+
+// Text
+export const textPrimary = gray10;
+export const textSecondary = gray30;
+export const textPlaceholder = gray60;
+export const textHelper = gray50;
+export const textError = red30;
+export const textInverse = gray100;
+export const textOnColor = white;
+export const textOnColorDisabled = gray40;
+export const textDisabled = gray60;
+
+// Link
+export const linkPrimary = blue40;
+export const linkPrimaryHover = blue30;
+export const linkSecondary = blue30;
+export const linkInverse = blue60;
+export const linkVisited = purple40;
+
+// Icon
+export const iconPrimary = gray10;
+export const iconSecondary = gray30;
+export const iconInverse = gray100;
+export const iconOnColor = white;
+export const iconOnColorDisabled = gray40;
+export const iconDisabled = gray60;
+
+// Support
+export const supportError = red40;
+export const supportSuccess = green40;
+export const supportWarning = yellow30;
+export const supportInfo = blue50;
+export const supportErrorInverse = red60;
+export const supportSuccessInverse = green50;
+export const supportWarningInverse = yellow30;
+export const supportInfoInverse = blue60;
+export const supportCautionMinor = yellow30;
+export const supportCautionMajor = orange40;
+export const supportCautionUndefined = purple50;
+
+// Focus
+export const focus = white;
+export const focusInset = gray100;
+export const focusInverse = blue60;
+
+// Skeleton
+export const skeletonBackground = adjustLightness(background, 5);
+export const skeletonElement = gray70;
+
+// Misc
+export const interactive = blue50;
+export const highlight = blue70;
+export const overlay = 'rgba(22, 22, 22, 0.7)';
+export const toggleOff = gray50;
+
+export {
+  // Type
+  caption01,
+  caption02,
+  label01,
+  label02,
+  helperText01,
+  helperText02,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
+  // Layout
+  // Spacing
+  spacing01,
+  spacing02,
+  spacing03,
+  spacing04,
+  spacing05,
+  spacing06,
+  spacing07,
+  spacing08,
+  spacing09,
+  spacing10,
+  spacing11,
+  spacing12,
+  spacing13,
+  // Fluid spacing
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  // Containers
+  container01,
+  container02,
+  container03,
+  container04,
+  container05,
+  sizeXSmall,
+  sizeSmall,
+  sizeMedium,
+  sizeLarge,
+  sizeXLarge,
+  size2XLarge,
+  // Icon sizes
+  iconSize01,
+  iconSize02,
+} from './white';

package/src/next/index.js

@@ -0,0 +1,21 @@
+/**
+ * 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 * as white from './white';
+import * as g10 from './g10';
+import * as g90 from './g90';
+import * as g100 from './g100';
+import { TokenFormat, group, set } from './tokens';
+
+export const themes = {
+  white,
+  g10,
+  g90,
+  g100,
+};
+
+export { TokenFormat, group, set };

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,88 @@
+/**
+ * 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',
+  scss: 'scss',
+};
+
+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('');
+    }
+
+    if (format === formats.scss) {
+      return formatNameToScss(name);
+    }
+
+    return name;
+  },
+};
+
+const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+/**
+ * Format a given token into the format expected in CSS/SCSS-based projects.
+ * @param {string} token
+ * @returns {string}
+ */
+function formatNameToScss(token) {
+  let string = '';
+
+  for (let i = 0; i < token.length; i++) {
+    if (token[i] === '-') {
+      continue;
+    }
+
+    // If we run into a number, we hit the scale step at the end of a token name
+    // and can safely truncate the rest of the token
+    if (numbers.indexOf(token[i]) !== -1) {
+      string += '-' + token.slice(i);
+      break;
+    }
+
+    // When encountering an uppercase name, we will want to start adding `-`
+    // between words
+    if (token[i] === token[i].toUpperCase()) {
+      // Check backwards to see if previous letter was also capitalized, if so
+      // we are in a special case like UI where each piece should be connected
+      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
+        string += token[i].toLowerCase();
+        continue;
+      }
+
+      if (token[i - 1] !== '-') {
+        // Otherwise, just concatenate this new part on to the existing string
+        string += '-' + token[i].toLowerCase();
+      }
+      continue;
+    }
+
+    // By default, we add the current character to the output string
+    string += token[i];
+  }
+
+  return string;
+}

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,15 @@
+/**
+ * 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';
+import { group } from './v11TokenGroup';
+import { set } from './v11TokenSet';
+
+export { Token, TokenFormat, TokenGroup, TokenSet, group, set };