diff --git a/config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js b/config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js index ee6a885abc25..f46b9fe0e996 100644 --- a/config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js +++ b/config/storybook-preset-carbon/carbon-theme-addon/src/components/Panel.js @@ -61,6 +61,9 @@ export const CarbonThemePanel = ({ api, active }) => { + diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap index e86e29a48050..fc4f3848bb57 100644 --- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -138,6 +138,7 @@ Array [ "formatTokenName", "g10", "g100", + "g80", "g90", "getTypeSize", "gray", diff --git a/packages/react/.storybook/styles.scss b/packages/react/.storybook/styles.scss index dd55b9508d34..1ea3d00692ff 100644 --- a/packages/react/.storybook/styles.scss +++ b/packages/react/.storybook/styles.scss @@ -92,6 +92,13 @@ $prefix: 'bx'; } } + :root[storybook-carbon-theme='g80'] { + @include carbon--theme($carbon--theme--g80, true) { + @include emit-component-tokens($tag-colors); + @include emit-component-tokens($notification-colors); + } + } + :root[storybook-carbon-theme='g90'] { @include carbon--theme($carbon--theme--g90, true) { @include emit-component-tokens($tag-colors); diff --git a/packages/themes/src/g80.js b/packages/themes/src/g80.js new file mode 100644 index 000000000000..854463d76d10 --- /dev/null +++ b/packages/themes/src/g80.js @@ -0,0 +1,315 @@ +/** + * 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 { adjustLightness } from './tools'; + +import { + // Blue + blue30, + blue40, + blue50, + blue60, + blue70, + blue80, + + // Gray + gray10, + gray30, + gray40, + gray50, + gray60, + gray70, + gray80, + gray100, + + // Support + green40, + green50, + yellow30, + red30, + red40, + red60, + red80, + purple40, + + // Constants + white, + + // Tools + rgba, +} from '@carbon/colors'; + +// New color tokens +// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens +export const background = gray80; +export const layer = gray70; +export const layerAccent = gray60; +export const field = gray70; +export const backgroundInverse = gray10; +export const backgroundBrand = blue60; +export const interactive = blue40; + +export const borderSubtle = gray60; +export const borderStrong = gray40; +export const borderInverse = gray10; +export const borderInteractive = blue50; + +export const textPrimary = gray10; +export const textSecondary = gray30; +export const textPlaceholder = gray60; +export const textHelper = gray40; +export const textError = red30; +export const textOnColor = white; +export const textInverse = gray100; + +export const linkPrimary = blue40; +export const linkSecondary = blue30; +export const linkVisited = purple40; +export const linkInverse = blue60; + +export const iconPrimary = gray10; +export const iconSecondary = gray30; +export const iconOnColor = white; +export const iconInverse = gray100; + +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 overlay = rgba(gray100, 0.7); +export const toggleOff = gray50; + +export const buttonPrimary = blue60; +export const buttonSecondary = gray60; +export const buttonTertiary = white; +export const buttonDangerPrimary = red60; +export const buttonDangerSecondary = red40; +export const buttonSeparator = gray100; + +export const backgroundActive = gray70; +export const layerActive = gray60; + +export const buttonDangerActive = red80; +export const buttonPrimaryActive = blue80; +export const buttonSecondaryActive = gray70; +export const buttonTertiaryActive = gray30; + +export const focus = white; +export const focusInset = gray100; +export const focusInverse = blue60; +export const highlight = blue70; + +export const backgroundHover = adjustLightness(background, +6); +export const layerHover = adjustLightness(layer, +7); +export const fieldHover = adjustLightness(field, +7); +export const backgroundInverseHover = adjustLightness(backgroundInverse, -5); + +export const linkPrimaryHover = blue30; + +export const buttonDangerHover = adjustLightness(buttonDangerPrimary, -8); +export const buttonPrimaryHover = adjustLightness(buttonPrimary, -8); +export const buttonSecondaryHover = adjustLightness(buttonSecondary, -7); +export const buttonTertiaryHover = white; + +export const backgroundSelected = gray70; +export const backgroundSelectedHover = adjustLightness(backgroundSelected, +7); +export const layerSelected = gray60; +export const layerSelectedHover = adjustLightness(layerSelected, -6); +export const layerSelectedInverse = gray10; +export const borderSubtleSelected = gray50; + +export const layerDisabled = gray70; +export const fieldDisabled = gray70; +export const borderDisabled = gray70; + +export const textDisabled = gray50; +export const buttonDisabled = gray50; +export const iconDisabled = gray50; + +export const textOnColorDisabled = gray30; +export const iconOnColorDisabled = gray30; +export const layerSelectedDisabled = gray30; + +export const skeletonBackground = adjustLightness(background, +6); +export const skeletonElement = gray60; + +////////////////////////////////////// +// Old tokens needed to pass tests // +////////////////////////////////////// +export const interactive01 = backgroundBrand; +export const interactive02 = buttonSecondary; +export const interactive03 = buttonTertiary; +export const interactive04 = interactive; + +export const uiBackground = background; + +export const ui01 = layer; +export const ui02 = gray70; +export const ui03 = layerAccent; +export const ui04 = borderStrong; +export const ui05 = borderInverse; + +export const text01 = textPrimary; +export const text02 = textSecondary; +export const text03 = textPlaceholder; +export const text04 = textOnColor; +export const text05 = textHelper; + +export const icon01 = iconPrimary; +export const icon02 = iconSecondary; +export const icon03 = iconOnColor; + +export const link01 = linkPrimary; +export const link02 = linkSecondary; + +export const inverseLink = linkInverse; + +export const field01 = field; +export const field02 = gray60; + +export const inverse01 = textInverse; +export const inverse02 = backgroundInverse; + +export const support01 = supportError; +export const support02 = supportSuccess; +export const support03 = supportWarning; +export const support04 = supportInfo; + +export const inverseSupport01 = supportErrorInverse; +export const inverseSupport02 = supportSuccessInverse; +export const inverseSupport03 = supportWarningInverse; +export const inverseSupport04 = supportInfoInverse; + +export const overlay01 = overlay; + +export const danger01 = buttonDangerPrimary; +export const danger02 = buttonDangerSecondary; + +// Interaction states +export const inverseFocusUi = focusInverse; + +export const hoverPrimary = buttonPrimaryHover; +export const activePrimary = buttonPrimaryActive; + +export const hoverPrimaryText = linkPrimaryHover; + +export const hoverSecondary = buttonSecondaryHover; +export const activeSecondary = buttonSecondaryActive; + +export const hoverTertiary = buttonTertiaryHover; +export const activeTertiary = buttonTertiaryActive; + +export const hoverUI = backgroundHover; +export const hoverLightUI = '#5E5E5E'; +export const activeUI = backgroundActive; +export const activeLightUI = gray50; +export const selectedUI = backgroundSelected; +export const selectedLightUI = gray50; +export const inverseHoverUI = backgroundInverseHover; + +export const hoverSelectedUI = layerSelectedHover; + +export const hoverDanger = buttonDangerHover; +export const activeDanger = buttonDangerActive; + +export const hoverRow = layerHover; + +export const visitedLink = linkVisited; + +export const disabled01 = layerDisabled; +export const disabled02 = textDisabled; +export const disabled03 = textOnColorDisabled; + +export const decorative01 = gray60; + +export const skeleton01 = skeletonBackground; +export const skeleton02 = skeletonElement; + +export { + // Type + caption01, + label01, + helperText01, + 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, + // Layout + // Deprecated -- Remove in v11 + layout01, + layout02, + layout03, + layout04, + layout05, + layout06, + layout07, + // Containers + container01, + container02, + container03, + container04, + container05, + // Icon sizes + iconSize01, + iconSize02, +} from './white'; + +// Deprecated ☠️ +export const brand01 = interactive01; +export const brand02 = interactive02; +export const brand03 = interactive03; +export const active01 = activeUI; +export const hoverField = hoverUI; +export const danger = danger01; diff --git a/packages/themes/src/index.js b/packages/themes/src/index.js index 97cfc13942f8..0afbd96e0241 100644 --- a/packages/themes/src/index.js +++ b/packages/themes/src/index.js @@ -10,15 +10,17 @@ export * from './white'; import * as g10 from './g10'; import * as g100 from './g100'; import * as white from './white'; +import * as g80 from './g80'; import * as g90 from './g90'; import * as v9 from './v9'; import { tokens, formatTokenName, unstable__meta } from './tokens'; -export { g10, g90, g100, white, v9 }; +export { g10, g80, g90, g100, white, v9 }; export { tokens, formatTokenName, unstable__meta }; export const themes = { white, g10, + g80, g90, g100, v9,