@carbon/themes 11.64.0 → 11.65.0

package/src/g90.js

@@ -15,6 +15,7 @@ import {
   // Gray
   gray10,
   gray10Hover,
+  gray20,
   gray30,
   gray40,
   gray50,
@@ -32,6 +33,8 @@ import {
   // Support
   blue30,
   blue50,
+  green30,
+  cyan40,
   green40,
   green50,
   yellow30,
@@ -42,6 +45,7 @@ import {
   purple40,
   purple50,
   purple60,
+  teal30,
 
   // Constants
   white,
@@ -213,6 +217,49 @@ 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;
+
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
 // Shared
@@ -250,14 +297,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,54 @@ 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',
+  ],
+});
+
 export const ai = TokenGroup.create({
   name: 'AI',
   properties: ['background'],
@@ -383,14 +431,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 +471,7 @@ export const group = TokenGroup.create({
     link,
     icon,
     support,
+    syntaxHighlight,
     ai,
 
     // Misc

package/src/white.js

@@ -16,6 +16,7 @@ import {
   blue100,
 
   // Gray
+  coolGray80,
   gray10,
   gray10Hover,
   gray20,
@@ -31,14 +32,18 @@ import {
 
   // Support
   blue50,
+  cyan70,
   green40,
   green50,
+  green60,
   yellow30,
   orange40,
   red50,
   red60,
-  purple60,
   purple40,
+  purple60,
+  purple70,
+  teal60,
 
   // Constants
   black,
@@ -209,6 +214,49 @@ 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;
+
 //// AI - Experimental (Use at your own risk)
 //// Phase 2 - new \\\\
 // Shared
@@ -246,14 +294,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;