@carbon/themes 11.64.0 → 11.66.0-rc.0

package/src/g90.js

@@ -15,6 +15,7 @@ import {
   // Gray
   gray10,
   gray10Hover,
+  gray20,
   gray30,
   gray40,
   gray50,
@@ -32,16 +33,21 @@ import {
   // Support
   blue30,
   blue50,
+  green30,
+  cyan40,
   green40,
   green50,
   yellow30,
   orange40,
   red30,
   red40,
+  red50,
   red60,
   purple40,
   purple50,
   purple60,
+  teal30,
+  teal40,
 
   // Constants
   white,
@@ -213,6 +219,94 @@ export const overlay = rgba(black, 0.6);
 export const toggleOff = gray50;
 export const shadow = rgba(black, 0.8);
 
+// Syntax highlighting
+export const syntaxComment = green40;
+export const syntaxLineComment = syntaxComment;
+export const syntaxBlockComment = syntaxComment;
+export const syntaxDocComment = syntaxComment;
+export const syntaxString = textPrimary;
+export const syntaxDocString = syntaxString;
+export const syntaxKeyword = blue50;
+export const syntaxOperatorKeyword = syntaxKeyword;
+export const syntaxControlKeyword = purple40;
+export const syntaxDefinitionKeyword = cyan40;
+export const syntaxModuleKeyword = purple40;
+export const syntaxVariable = blue30;
+export const syntaxName = syntaxVariable;
+export const syntaxVariableName = syntaxVariable;
+export const syntaxLabelName = syntaxVariable;
+export const syntaxAttribute = cyan40;
+export const syntaxAttributeName = syntaxAttribute;
+export const syntaxPropertyName = syntaxAttribute;
+export const syntaxTag = teal30;
+export const syntaxTagName = syntaxTag;
+export const syntaxType = teal30;
+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 = green30;
+export const syntaxInteger = syntaxNumber;
+export const syntaxFloat = syntaxNumber;
+export const syntaxUnit = syntaxNumber;
+export const syntaxCharacter = syntaxString;
+export const syntaxAttributeValue = syntaxString;
+export const syntaxSpecialString = purple40;
+export const syntaxRegexp = purple40;
+export const syntaxEscape = gray20;
+export const syntaxUrl = syntaxEscape;
+export const syntaxColor = syntaxMacroName;
+export const syntaxOperator = gray20;
+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 = gray20;
+export const syntaxSeparator = syntaxPunctuation;
+export const syntaxBracket = syntaxPunctuation;
+export const syntaxAngleBracket = gray50;
+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 = cyan40;
+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 = blue50;
+export const syntaxInvalid = red50;
+export const syntaxMeta = green40;
+export const syntaxDocumentMeta = syntaxMeta;
+export const syntaxAnnotation = teal40;
+export const syntaxProcessingInstruction = syntaxString;
+export const syntaxDefinition = cyan40;
+export const syntaxConstant = blue50;
+export const syntaxFunction = yellow30;
+export const syntaxStandard = blue50;
+export const syntaxLocal = blue30;
+export const syntaxSpecial = blue50;
+
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
 // Shared
@@ -250,14 +344,18 @@ export const aiPopoverCaretBottomBackground = '#202D45';
 export const chatPromptBackground = gray100;
 export const chatPromptBorderStart = gray90;
 export const chatPromptBorderEnd = rgba(gray90, 0);
+export const chatPromptText = textPrimary;
 export const chatBubbleUser = gray80;
+export const chatBubbleUserText = textPrimary;
 export const chatBubbleAgent = gray90;
+export const chatBubbleAgentText = textPrimary;
 export const chatBubbleBorder = gray70;
 export const chatAvatarBot = gray50;
 export const chatAvatarAgent = gray30;
 export const chatAvatarUser = blue50;
 export const chatShellBackground = gray90;
 export const chatHeaderBackground = gray90;
+export const chatHeaderText = textPrimary;
 
 // Chat button tokens
 export const chatButton = linkPrimary;

package/src/tokens/v11TokenGroup.js

@@ -351,6 +351,99 @@ export const contextual = TokenGroup.create({
   ],
 });
 
+export const syntaxHighlight = TokenGroup.create({
+  name: 'Syntax Highlighting',
+  properties: ['text'],
+  tokens: [
+    'syntax-comment',
+    'syntax-line-comment',
+    'syntax-block-comment',
+    'syntax-doc-comment',
+    'syntax-doc-string',
+    'syntax-keyword',
+    'syntax-operator-keyword',
+    'syntax-control-keyword',
+    'syntax-definition-keyword',
+    'syntax-module-keyword',
+    'syntax-variable',
+    'syntax-name',
+    'syntax-variable-name',
+    'syntax-label-name',
+    'syntax-attribute',
+    'syntax-attribute-name',
+    'syntax-property-name',
+    'syntax-tag',
+    'syntax-tag-name',
+    'syntax-type',
+    'syntax-type-name',
+    'syntax-class-name',
+    'syntax-namespace',
+    'syntax-macro-name',
+    'syntax-atom',
+    'syntax-literal',
+    'syntax-bool',
+    'syntax-null',
+    'syntax-self',
+    'syntax-number',
+    'syntax-integer',
+    'syntax-float',
+    'syntax-unit',
+    'syntax-string',
+    'syntax-character',
+    'syntax-attribute-value',
+    'syntax-special-string',
+    'syntax-regexp',
+    'syntax-escape',
+    'syntax-url',
+    'syntax-color',
+    'syntax-operator',
+    'syntax-deref-operator',
+    'syntax-arithmetic-operator',
+    'syntax-logic-operator',
+    'syntax-bitwise-operator',
+    'syntax-compare-operator',
+    'syntax-update-operator',
+    'syntax-definition-operator',
+    'syntax-type-operator',
+    'syntax-control-operator',
+    'syntax-modifier',
+    'syntax-punctuation',
+    'syntax-separator',
+    'syntax-bracket',
+    'syntax-angle-bracket',
+    'syntax-square-bracket',
+    'syntax-paren',
+    'syntax-brace',
+    'syntax-content',
+    'syntax-heading',
+    'syntax-heading-1',
+    'syntax-heading-2',
+    'syntax-heading-3',
+    'syntax-heading-4',
+    'syntax-heading-5',
+    'syntax-heading-6',
+    'syntax-content-separator',
+    'syntax-list',
+    'syntax-quote',
+    'syntax-emphasis',
+    'syntax-strong',
+    'syntax-monospace',
+    'syntax-link',
+    'syntax-strikethrough',
+    'syntax-invalid',
+    'syntax-meta',
+    'syntax-document-meta',
+    'syntax-annotation',
+    'syntax-processing-instruction',
+    'syntax-definition',
+    'syntax-constant',
+    'syntax-function',
+    'syntax-standard',
+    'syntax-local',
+    'syntax-special',
+  ],
+});
+
 export const ai = TokenGroup.create({
   name: 'AI',
   properties: ['background'],
@@ -383,14 +476,18 @@ export const ai = TokenGroup.create({
     'chat-prompt-background',
     'chat-prompt-border-start',
     'chat-prompt-border-end',
+    'chat-prompt-text',
     'chat-bubble-user',
+    'chat-bubble-user-text',
     'chat-bubble-agent',
+    'chat-bubble-agent-text',
     'chat-bubble-border',
     'chat-avatar-bot',
     'chat-avatar-agent',
     'chat-avatar-user',
     'chat-shell-background',
     'chat-header-background',
+    'chat-header-text',
     // Chat button tokens
     'chat-button',
     'chat-button-hover',
@@ -419,6 +516,7 @@ export const group = TokenGroup.create({
     link,
     icon,
     support,
+    syntaxHighlight,
     ai,
 
     // Misc

package/src/white.js

@@ -16,6 +16,8 @@ import {
   blue100,
 
   // Gray
+  coolGray60,
+  coolGray80,
   gray10,
   gray10Hover,
   gray20,
@@ -31,14 +33,19 @@ import {
 
   // Support
   blue50,
+  cyan70,
   green40,
   green50,
+  green60,
   yellow30,
+  yellow60,
   orange40,
   red50,
   red60,
-  purple60,
   purple40,
+  purple60,
+  purple70,
+  teal60,
 
   // Constants
   black,
@@ -209,6 +216,94 @@ 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;
+
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
 // Shared
@@ -246,14 +341,18 @@ export const aiPopoverCaretBottomBackground = '#EAF1FF';
 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;