/** * Copyright IBM Corp. 2018, 2023 * * 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 blue10, blue20, blue30, blue40, blue60, blue70, blue100, // Gray coolGray60, coolGray80, gray10, gray10Hover, gray20, gray20Hover, gray30, gray40, gray50, gray60, gray70, gray80, gray80Hover, gray100, // Support blue50, cyan70, green20, green40, green50, green60, yellow30, yellow60, orange40, red20, red50, red60, purple40, purple60, purple70, teal60, // Constants black, white, whiteHover, rgba, } from '@carbon/colors'; import { adjustAlpha } from './tools'; // Color scheme export const colorScheme = 'light'; // Background export const background = white; export const backgroundInverse = gray80; export const backgroundBrand = blue60; export const backgroundActive = adjustAlpha(gray50, 0.5); export const backgroundHover = adjustAlpha(gray50, 0.12); export const backgroundInverseHover = gray80Hover; export const backgroundSelected = adjustAlpha(gray50, 0.2); export const backgroundSelectedHover = adjustAlpha(gray50, 0.32); // Layer // layer-01 export const layer01 = gray10; export const layerActive01 = gray30; export const layerBackground01 = white; export const layerHover01 = gray10Hover; export const layerSelected01 = gray20; export const layerSelectedHover01 = gray20Hover; // layer-02 export const layer02 = white; export const layerActive02 = gray30; export const layerBackground02 = gray10; export const layerHover02 = whiteHover; export const layerSelected02 = gray20; export const layerSelectedHover02 = gray20Hover; // layer-03 export const layer03 = gray10; export const layerActive03 = gray30; export const layerBackground03 = white; export const layerHover03 = gray10Hover; export const layerSelected03 = gray20; export const layerSelectedHover03 = gray20Hover; // layer export const layerSelectedInverse = gray100; export const layerSelectedDisabled = gray50; // layer-accent-01 export const layerAccent01 = gray20; export const layerAccentActive01 = gray40; export const layerAccentHover01 = gray20Hover; // layer-accent-02 export const layerAccent02 = gray20; export const layerAccentActive02 = gray40; export const layerAccentHover02 = gray20Hover; // layer-accent-03 export const layerAccent03 = gray20; export const layerAccentActive03 = gray40; export const layerAccentHover03 = gray20Hover; // Field // field-01 export const field01 = gray10; export const fieldHover01 = gray10Hover; // field-02 export const field02 = white; export const fieldHover02 = whiteHover; // field-03 export const field03 = gray10; export const fieldHover03 = gray10Hover; // Border // border-subtle-00 export const borderSubtle00 = gray20; // border-subtle-01 export const borderSubtle01 = gray30; export const borderSubtleSelected01 = gray30; // border-subtle-02 export const borderSubtle02 = gray20; export const borderSubtleSelected02 = gray30; // border-subtle-03 export const borderSubtle03 = gray30; export const borderSubtleSelected03 = gray30; // border-strong export const borderStrong01 = gray50; export const borderStrong02 = gray50; export const borderStrong03 = gray50; // border-tile export const borderTile01 = gray30; export const borderTile02 = gray40; export const borderTile03 = gray30; // border-inverse export const borderInverse = gray100; // border-interactive export const borderInteractive = blue60; // border export const borderDisabled = gray30; // Text export const textPrimary = gray100; export const textSecondary = gray70; export const textPlaceholder = adjustAlpha(textPrimary, 0.4); export const textHelper = gray60; export const textError = red60; export const textInverse = white; export const textOnColor = white; export const textOnColorDisabled = gray50; export const textDisabled = adjustAlpha(textPrimary, 0.25); // Link export const linkPrimary = blue60; export const linkPrimaryHover = blue70; export const linkSecondary = blue70; export const linkInverse = blue40; export const linkVisited = purple60; export const linkInverseVisited = purple40; export const linkInverseActive = gray10; export const linkInverseHover = blue30; // Icon export const iconPrimary = gray100; export const iconSecondary = gray70; export const iconInverse = white; export const iconOnColor = white; export const iconOnColorDisabled = gray50; export const iconDisabled = adjustAlpha(iconPrimary, 0.25); export const iconInteractive = blue60; // 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(black, 0.6); export const toggleOff = gray50; export const shadow = 'rgba(0, 0, 0, 0.3)'; // Syntax highlighting export const syntaxComment = green60; export const syntaxLineComment = syntaxComment; export const syntaxBlockComment = syntaxComment; export const syntaxDocComment = syntaxComment; export const syntaxString = textPrimary; export const syntaxDocString = syntaxString; export const syntaxKeyword = blue60; export const syntaxOperatorKeyword = syntaxKeyword; export const syntaxControlKeyword = purple70; export const syntaxDefinitionKeyword = cyan70; export const syntaxModuleKeyword = purple70; export const syntaxVariable = blue60; export const syntaxName = syntaxVariable; export const syntaxVariableName = syntaxVariable; export const syntaxLabelName = syntaxVariable; export const syntaxAttribute = cyan70; export const syntaxAttributeName = syntaxAttribute; export const syntaxPropertyName = syntaxAttribute; export const syntaxTag = teal60; export const syntaxTagName = syntaxTag; export const syntaxType = teal60; export const syntaxTypeName = syntaxType; export const syntaxClassName = syntaxType; export const syntaxNamespace = syntaxType; export const syntaxMacroName = textPrimary; export const syntaxAtom = syntaxMacroName; export const syntaxLiteral = syntaxAtom; export const syntaxBool = syntaxAtom; export const syntaxNull = syntaxAtom; export const syntaxSelf = syntaxTag; export const syntaxNumber = green60; export const syntaxInteger = syntaxNumber; export const syntaxFloat = syntaxNumber; export const syntaxUnit = syntaxNumber; export const syntaxCharacter = syntaxString; export const syntaxAttributeValue = syntaxString; export const syntaxSpecialString = purple60; export const syntaxRegexp = purple70; export const syntaxEscape = coolGray80; export const syntaxUrl = syntaxEscape; export const syntaxColor = syntaxMacroName; export const syntaxOperator = coolGray80; export const syntaxDerefOperator = syntaxOperator; export const syntaxArithmeticOperator = syntaxOperator; export const syntaxLogicOperator = syntaxOperator; export const syntaxBitwiseOperator = syntaxOperator; export const syntaxCompareOperator = syntaxOperator; export const syntaxUpdateOperator = syntaxOperator; export const syntaxDefinitionOperator = syntaxDefinitionKeyword; export const syntaxTypeOperator = syntaxTag; export const syntaxControlOperator = syntaxModuleKeyword; export const syntaxModifier = syntaxKeyword; export const syntaxPunctuation = coolGray80; export const syntaxSeparator = syntaxPunctuation; export const syntaxBracket = syntaxPunctuation; export const syntaxAngleBracket = coolGray60; export const syntaxSquareBracket = syntaxBracket; export const syntaxParen = syntaxBracket; export const syntaxBrace = syntaxBracket; export const syntaxContent = textPrimary; export const syntaxList = syntaxContent; export const syntaxEmphasis = syntaxContent; export const syntaxStrong = syntaxContent; export const syntaxMonospace = syntaxContent; export const syntaxStrikethrough = syntaxContent; export const syntaxHeading = cyan70; export const syntaxHeading1 = syntaxHeading; export const syntaxHeading2 = syntaxHeading; export const syntaxHeading3 = syntaxHeading; export const syntaxHeading4 = syntaxHeading; export const syntaxHeading5 = syntaxHeading; export const syntaxHeading6 = syntaxHeading; export const syntaxContentSeparator = syntaxPunctuation; export const syntaxQuote = syntaxComment; export const syntaxLink = blue60; export const syntaxInvalid = red60; export const syntaxMeta = green60; export const syntaxDocumentMeta = syntaxMeta; export const syntaxAnnotation = teal60; export const syntaxProcessingInstruction = syntaxString; export const syntaxDefinition = cyan70; export const syntaxConstant = blue60; export const syntaxFunction = yellow60; export const syntaxStandard = blue60; export const syntaxLocal = blue60; export const syntaxSpecial = blue60; export const syntaxInserted = green20; export const syntaxDeleted = red20; //// AI - Experimental (Use at your own risk) //// Phase 2 - new \\\\ // Shared export const aiInnerShadow = rgba(blue50, 0.1); export const aiAuraStartSm = rgba(blue50, 0.16); export const aiAuraStart = rgba(blue50, 0.1); export const aiAuraEnd = rgba(white, 0); export const aiBorderStrong = blue50; export const aiBorderStart = rgba(blue30, 0.64); export const aiBorderEnd = blue40; export const aiDropShadow = rgba(blue60, 0.1); export const aiAuraHoverBackground = blue10; export const aiAuraHoverStart = rgba(blue50, 0.32); export const aiAuraHoverEnd = rgba(white, 0); // AI Popover export const aiPopoverBackground = white; export const aiPopoverShadowOuter01 = rgba(blue70, 0.06); export const aiPopoverShadowOuter02 = rgba(black, 0.04); // AI skeleton export const aiSkeletonBackground = blue20; export const aiSkeletonElementBackground = blue50; // AI Modal tokens export const aiOverlay = rgba(blue100, 0.5); // One off tokens for caret export const aiPopoverCaretCenter = '#A0C3FF'; export const aiPopoverCaretBottom = blue40; export const aiPopoverCaretBottomBackgroundActions = '#E9EFFA'; export const aiPopoverCaretBottomBackground = '#EAF1FF'; // Chat tokens export const chatPromptBackground = white; export const chatPromptBorderStart = gray10; export const chatPromptBorderEnd = rgba(gray10, 0); export const chatPromptText = textPrimary; export const chatBubbleUser = gray20; export const chatBubbleUserText = textPrimary; export const chatBubbleAgent = white; export const chatBubbleAgentText = textPrimary; export const chatBubbleBorder = gray20; export const chatAvatarBot = gray60; export const chatAvatarAgent = gray80; export const chatAvatarUser = blue60; export const chatShellBackground = white; export const chatHeaderBackground = white; export const chatHeaderText = textPrimary; // Chat button tokens export const chatButton = linkPrimary; export const chatButtonHover = backgroundHover; export const chatButtonTextHover = linkPrimaryHover; export const chatButtonActive = backgroundActive; export const chatButtonSelected = backgroundSelected; export const chatButtonTextSelected = textSecondary; // 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, // Layout // Deprecated ☠️ layout01, layout02, layout03, layout04, layout05, layout06, layout07, } from '@carbon/layout';