@carbon/themes 10.54.0 → 11.0.0-rc.0

package/src/g90.js

@@ -4,37 +4,39 @@
  * 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,
+  gray50Hover,
   gray60,
+  gray60Hover,
   gray70,
+  gray70Hover,
   gray80,
   gray90,
   gray100,
 
   // Support
+  blue30,
+  blue50,
   green40,
   green50,
-  yellow,
+  yellow30,
+  orange40,
   red30,
   red40,
   red60,
-  red80,
   purple40,
+  purple50,
 
   // Constants
   white,
@@ -42,197 +44,163 @@ import {
 
   // Tools
   rgba,
+  gray90Hover,
+  gray10Hover,
+  gray80Hover,
 } from '@carbon/colors';
-
-export const interactive01 = blue60;
-export const interactive02 = gray60;
-export const interactive03 = white;
-export const interactive04 = blue50;
-
-export const uiBackground = gray90;
-
-export const ui01 = gray80;
-export const ui02 = gray70;
-export const ui03 = gray70;
-export const ui04 = gray50;
-export const ui05 = gray10;
-
-export const text01 = gray10;
-export const text02 = gray30;
-export const text03 = gray60;
-export const text04 = white;
-export const text05 = gray50;
-export const textError = red30;
-
-export const icon01 = gray10;
-export const icon02 = gray30;
-export const icon03 = white;
-
-export const link01 = blue40;
-export const link02 = blue30;
-
-export const inverseLink = blue60;
-
+import { adjustAlpha } from './tools';
+
+// Background
+export const background = gray90;
+export const backgroundInverse = gray10;
+export const backgroundBrand = blue60;
+export const backgroundActive = adjustAlpha(gray50, 0.4);
+export const backgroundHover = adjustAlpha(gray50, 0.16);
+export const backgroundInverseHover = gray10Hover;
+export const backgroundSelected = adjustAlpha(gray50, 0.24);
+export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
+
+// Layer
+// layer-01
+export const layer01 = gray80;
+export const layerActive01 = gray60;
+export const layerHover01 = gray80Hover;
+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 = gray70;
+export const layerSelectedHover03 = gray70Hover;
+
+// layer
+export const layerSelectedInverse = gray10;
+export const layerSelectedDisabled = gray40;
+
+// layer-accent-01
+export const layerAccent01 = gray70;
+export const layerAccentActive01 = gray50;
+export const layerAccentHover01 = gray70Hover;
+
+// layer-accent-02
+export const layerAccent02 = gray60;
+export const layerAccentActive02 = gray80;
+export const layerAccentHover02 = gray60Hover;
+
+// layer-accent-03
+export const layerAccent03 = gray50;
+export const layerAccentActive03 = gray70;
+export const layerAccentHover03 = gray50Hover;
+
+// Field
+// field-01
 export const field01 = gray80;
-export const field02 = gray70;
-
-export const inverse01 = gray100;
-export const inverse02 = gray10;
-
-export const support01 = red40;
-export const support02 = green40;
-export const support03 = yellow;
-export const support04 = blue50;
-
-export const inverseSupport01 = red60;
-export const inverseSupport02 = green50;
-export const inverseSupport03 = yellow;
-export const inverseSupport04 = blue60;
+export const fieldHover01 = gray80Hover;
 
-export const overlay01 = rgba(black, 0.65);
-
-export const danger01 = red60;
-export const danger02 = red40;
+// field-02
+export const field02 = gray70;
+export const fieldHover02 = gray70Hover;
 
-// Interaction states
-export const focus = white;
-export const inverseFocusUi = blue60;
+// field-03
+export const field03 = gray60;
+export const fieldHover03 = gray60Hover;
 
-export const hoverPrimary = '#0353e9';
-export const activePrimary = blue80;
+// Border
+// border-subtle-00
+export const borderSubtle00 = gray70;
 
-export const hoverPrimaryText = blue30;
+// border-subtle-01
+export const borderSubtle01 = gray70;
+export const borderSubtleSelected01 = gray60;
 
-export const hoverSecondary = '#606060';
-export const activeSecondary = gray80;
+// border-subtle-02
+export const borderSubtle02 = gray60;
+export const borderSubtleSelected02 = gray50;
 
-export const hoverTertiary = gray10;
-export const activeTertiary = gray30;
+// border-subtle-03
+export const borderSubtle03 = gray50;
+export const borderSubtleSelected03 = gray40;
 
-export const hoverUI = '#4c4c4c';
-export const hoverLightUI = '#656565';
-export const activeUI = gray60;
-export const activeLightUI = gray50;
-export const selectedUI = gray70;
-export const selectedLightUI = gray60;
-export const inverseHoverUI = '#e5e5e5';
+// border-strong
+export const borderStrong01 = gray50;
+export const borderStrong02 = gray40;
+export const borderStrong03 = gray30;
 
-export const hoverSelectedUI = '#656565';
+// border-inverse
+export const borderInverse = gray10;
 
-export const hoverDanger = adjustLightness(danger01, -8);
-export const activeDanger = red80;
+// border-interactive
+export const borderInteractive = blue50;
 
-export const hoverRow = '#4c4c4c';
+// border
+export const borderDisabled = adjustAlpha(gray50, 0.5);
 
-export const visitedLink = purple40;
+// Text
+export const textPrimary = gray10;
+export const textSecondary = gray30;
+export const textPlaceholder = adjustAlpha(textPrimary, 0.4);
+export const textHelper = gray30;
+export const textError = red30;
+export const textInverse = gray100;
+export const textOnColor = white;
+export const textOnColorDisabled = adjustAlpha(textOnColor, 0.25);
+export const textDisabled = adjustAlpha(textPrimary, 0.25);
+
+// Link
+export const linkPrimary = blue40;
+export const linkPrimaryHover = blue30;
+export const linkSecondary = blue30;
+export const linkInverse = blue60;
+export const linkVisited = purple40;
+export const linkInverseActive = gray100;
+export const linkInverseHover = blue70;
+
+// Icon
+export const iconPrimary = gray10;
+export const iconSecondary = gray30;
+export const iconInverse = gray100;
+export const iconOnColor = white;
+export const iconOnColorDisabled = adjustAlpha(iconOnColor, 0.25);
+export const iconDisabled = adjustAlpha(iconPrimary, 0.25);
+
+// 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 = blue70;
+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;
 
-export const disabled01 = gray80;
-export const disabled02 = gray60;
-export const disabled03 = gray40;
+// Skeleton
+export const skeletonBackground = gray90Hover;
+export const skeletonElement = gray70;
 
+// Misc
+export const interactive = blue50;
 export const highlight = blue70;
-
-export const decorative01 = gray60;
-
-export const buttonSeparator = '#161616';
-
-export const skeleton01 = '#353535';
-export const skeleton02 = gray70;
-
-// New color tokens
-// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-export const background = uiBackground;
-export const layer = ui01;
-export const layerAccent = ui03;
-export const layerAccentActive = gray50;
-export const layerAccentHover = adjustLightness(layerAccent, +7);
-export const field = field01;
-export const backgroundInverse = inverse02;
-export const backgroundBrand = interactive01;
-export const interactive = interactive04;
-
-export const borderSubtle = ui03;
-export const borderStrong = ui04;
-export const borderInverse = ui05;
-export const borderInteractive = interactive04;
-
-export const textPrimary = text01;
-export const textSecondary = text02;
-export const textPlaceholder = text03;
-export const textHelper = text05;
-export const textOnColor = text04;
-export const textInverse = inverse01;
-
-export const linkPrimary = link01;
-export const linkSecondary = link02;
-export const linkVisited = visitedLink;
-export const linkInverse = inverseLink;
-
-export const iconPrimary = icon01;
-export const iconSecondary = icon02;
-export const iconOnColor = icon03;
-export const iconInverse = inverse01;
-
-export const supportError = support01;
-export const supportSuccess = support02;
-export const supportWarning = support03;
-export const supportInfo = support04;
-export const supportErrorInverse = inverseSupport01;
-export const supportSuccessInverse = inverseSupport02;
-export const supportWarningInverse = inverseSupport03;
-export const supportInfoInverse = inverseSupport04;
-
-export const overlay = overlay01;
-export const toggleOff = ui04;
+export const overlay = rgba(black, 0.65);
+export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);
 
-export const buttonPrimary = interactive01;
-export const buttonSecondary = interactive02;
-export const buttonTertiary = interactive03;
-export const buttonDangerPrimary = danger01;
-export const buttonDangerSecondary = danger02;
-
-export const backgroundActive = activeUI;
-export const layerActive = activeUI;
-
-export const buttonDangerActive = activeDanger;
-export const buttonPrimaryActive = activePrimary;
-export const buttonSecondaryActive = activeSecondary;
-export const buttonTertiaryActive = activeTertiary;
-
-export const focusInset = inverse01;
-export const focusInverse = inverseFocusUi;
-
-export const backgroundHover = hoverUI;
-export const layerHover = hoverUI;
-export const fieldHover = hoverUI;
-export const backgroundInverseHover = inverseHoverUI;
-export const linkPrimaryHover = hoverPrimaryText;
-export const buttonDangerHover = hoverDanger;
-export const buttonPrimaryHover = hoverPrimary;
-export const buttonSecondaryHover = hoverSecondary;
-export const buttonTertiaryHover = hoverTertiary;
-
-export const backgroundSelected = selectedUI;
-export const backgroundSelectedHover = hoverSelectedUI;
-export const layerSelected = selectedUI;
-export const layerSelectedHover = hoverSelectedUI;
-export const layerSelectedInverse = ui05;
-export const borderSubtleSelected = activeUI;
-
-export const borderDisabled = disabled01;
-
-export const textDisabled = disabled02;
-export const buttonDisabled = disabled02;
-export const iconDisabled = disabled02;
-
-export const textOnColorDisabled = disabled03;
-export const iconOnColorDisabled = disabled03;
-export const layerSelectedDisabled = disabled03;
-
-export const skeletonBackground = skeleton01;
-export const skeletonElement = skeleton02;
-
 export {
   // Type
   caption01,
@@ -269,31 +237,6 @@ export {
   display02,
   display03,
   display04,
-  // V11 Tokens
-  legal01,
-  legal02,
-  bodyCompact01,
-  bodyCompact02,
-  body01,
-  body02,
-  headingCompact01,
-  headingCompact02,
-  heading03,
-  heading04,
-  heading05,
-  heading06,
-  heading07,
-  fluidHeading03,
-  fluidHeading04,
-  fluidHeading05,
-  fluidHeading06,
-  fluidParagraph01,
-  fluidQuotation01,
-  fluidQuotation02,
-  fluidDisplay01,
-  fluidDisplay02,
-  fluidDisplay03,
-  fluidDisplay04,
   // Layout
   // Spacing
   spacing01,
@@ -314,15 +257,6 @@ export {
   fluidSpacing02,
   fluidSpacing03,
   fluidSpacing04,
-  // Layout
-  // Deprecated -- Remove in v11
-  layout01,
-  layout02,
-  layout03,
-  layout04,
-  layout05,
-  layout06,
-  layout07,
   // Containers
   container01,
   container02,
@@ -339,11 +273,3 @@ export {
   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;

package/src/index.js

@@ -5,23 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// Tokens from the `white` theme are the default set
-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 g10 from './g10';
 import * as g90 from './g90';
-import * as v9 from './v9';
-import { tokens, formatTokenName, unstable__meta } from './tokens';
+import * as g100 from './g100';
+import * as v10 from './v10';
 
-export { g10, g80, g90, g100, white, v9 };
-export { tokens, formatTokenName, unstable__meta };
-export const themes = {
+const themes = {
   white,
   g10,
-  g80,
   g90,
   g100,
-  v9,
 };
+
+export * from './white';
+export { white, g10, g90, g100, themes, v10 };