@carbon/themes 10.36.0 → 10.38.0

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: ['text'],
+  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: ['text'],
+  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: 'All',
+  tokens: [
+    background,
+    layer,
+    field,
+
+    // Interactive
+    {
+      name: 'interactive',
+      properties: ['background', 'text'],
+    },
+
+    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'),
+      ],
+    }),
+  ],
+});

package/src/next/white.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
+  blue20,
+  blue40,
+  blue60,
+  blue70,
+
+  // Gray
+  gray10,
+  gray20,
+  gray20Hover,
+  gray30,
+  gray40,
+  gray50,
+  gray60,
+  gray70,
+  gray80,
+  gray100,
+
+  // Support
+  blue50,
+  green40,
+  green50,
+  yellow30,
+  orange40,
+  red50,
+  red60,
+  purple60,
+
+  // Constants
+  white,
+  whiteHover,
+} from '@carbon/colors';
+import { adjustLightness } from '../tools';
+
+// Background
+export const background = white;
+export const backgroundInverse = gray80;
+export const backgroundBrand = blue60;
+export const backgroundActive = gray30;
+export const backgroundHover = whiteHover;
+export const backgroundInverseHover = adjustLightness(backgroundInverse, 6);
+export const backgroundSelected = gray20;
+export const backgroundSelectedHover = adjustLightness(backgroundSelected, -6);
+
+// Layer
+// layer-01
+export const layer01 = gray10;
+export const layerActive01 = gray30;
+export const layerHover01 = adjustLightness(layer01, -5);
+export const layerSelected01 = gray20;
+export const layerSelectedHover01 = gray20Hover;
+
+// layer-02
+export const layer02 = white;
+export const layerActive02 = gray30;
+export const layerHover02 = adjustLightness(layer01, -5);
+export const layerSelected02 = gray20;
+export const layerSelectedHover02 = gray20Hover;
+
+// layer-03
+export const layer03 = gray10;
+export const layerActive03 = gray30;
+export const layerHover03 = adjustLightness(layer01, -5);
+export const layerSelected03 = gray20;
+export const layerSelectedHover03 = gray20Hover;
+
+// layer
+export const layerDisabled = gray10;
+export const layerSelectedInverse = gray100;
+export const layerSelectedDisabled = gray50;
+
+// layer-accent-01
+export const layerAccent01 = gray20;
+export const layerAccentActive01 = gray40;
+export const layerAccentHover01 = adjustLightness(layerAccent01, -6);
+
+// layer-accent-02
+export const layerAccent02 = gray20;
+export const layerAccentActive02 = gray40;
+export const layerAccentHover02 = adjustLightness(layerAccent01, -6);
+
+// layer-accent-03
+export const layerAccent03 = gray20;
+export const layerAccentActive03 = gray40;
+export const layerAccentHover03 = adjustLightness(layerAccent01, -6);
+
+// Field
+// field-01
+export const field01 = gray10;
+export const fieldHover01 = adjustLightness(field01, -5);
+
+// field-02
+export const field02 = white;
+export const fieldHover02 = adjustLightness(field01, -5);
+
+// field-03
+export const field03 = gray10;
+export const fieldHover03 = adjustLightness(field01, -5);
+
+// field
+export const fieldDisabled = gray10;
+
+// Border
+// border-subtle-00
+export const borderSubtle00 = gray20;
+
+// border-subtle-01
+export const borderSubtle01 = gray20;
+export const borderSubtleSelected01 = gray30;
+
+// border-subtle-02
+export const borderSubtle02 = gray20;
+export const borderSubtleSelected02 = gray30;
+
+// border-subtle-03
+export const borderSubtle03 = gray20;
+export const borderSubtleSelected03 = gray30;
+
+// border-strong
+export const borderStrong01 = gray50;
+export const borderStrong02 = gray50;
+export const borderStrong03 = gray50;
+
+// border-inverse
+export const borderInverse = gray100;
+
+// border-interactive
+export const borderInteractive = blue60;
+
+// border
+export const borderDisabled = gray10;
+
+// Text
+export const textPrimary = gray100;
+export const textSecondary = gray70;
+export const textPlaceholder = gray40;
+export const textHelper = gray60;
+export const textError = red60;
+export const textInverse = white;
+export const textOnColor = white;
+export const textOnColorDisabled = gray50;
+export const textDisabled = gray30;
+
+// Link
+export const linkPrimary = blue60;
+export const linkPrimaryHover = blue70;
+export const linkSecondary = blue70;
+export const linkInverse = blue40;
+export const linkVisited = purple60;
+
+// Icon
+export const iconPrimary = gray100;
+export const iconSecondary = gray70;
+export const iconInverse = white;
+export const iconOnColor = white;
+export const iconOnColorDisabled = gray50;
+export const iconDisabled = gray30;
+
+// Support
+export const supportError = red60;
+export const supportSuccess = green50;
+export const supportWarning = yellow30;
+export const supportInfo = blue70;
+export const supportErrorInverse = red50;
+export const supportSuccessInverse = green40;
+export const supportWarningInverse = yellow30;
+export const supportInfoInverse = blue50;
+export const supportCautionMinor = yellow30;
+export const supportCautionMajor = orange40;
+export const supportCautionUndefined = purple60;
+
+// Focus
+export const focus = blue60;
+export const focusInset = white;
+export const focusInverse = white;
+
+// Skeleton
+export const skeletonBackground = whiteHover;
+export const skeletonElement = gray30;
+
+// Misc
+export const interactive = blue60;
+export const highlight = blue20;
+export const overlay = 'rgba(22, 22, 22, 0.5)';
+export const toggleOff = gray50;
+
+// Type
+export {
+  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,
+} from '@carbon/type';
+
+// Layout
+// Spacing
+export {
+  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 '@carbon/layout';