[Project Solar / Phase 1 / Components] CodeEditor carbonization

packages/components/package.json

@@ -379,12 +379,11 @@
       "./modifiers/hds-anchored-position.js": "./dist/_app_/modifiers/hds-anchored-position.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
       "./modifiers/hds-code-editor.js": "./dist/_app_/modifiers/hds-code-editor.js",
-      "./modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js": "./dist/_app_/modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js",
+      "./modifiers/hds-code-editor/highlight-styles/hds-highlight-style.js": "./dist/_app_/modifiers/hds-code-editor/highlight-styles/hds-highlight-style.js",
       "./modifiers/hds-code-editor/languages/rego.js": "./dist/_app_/modifiers/hds-code-editor/languages/rego.js",
       "./modifiers/hds-code-editor/languages/sentinel.js": "./dist/_app_/modifiers/hds-code-editor/languages/sentinel.js",
       "./modifiers/hds-code-editor/linters/json-linter.js": "./dist/_app_/modifiers/hds-code-editor/linters/json-linter.js",
-      "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
-      "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
+      "./modifiers/hds-code-editor/themes/hds-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-theme.js",
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",

packages/components/src/modifiers/hds-code-editor.ts

@@ -14,9 +14,9 @@ import { guidFor } from '@ember/object/internals';
 import { isEmpty } from '@ember/utils';
 import { service } from '@ember/service';
 
-// hds-dark theme
-import hdsDarkTheme from './hds-code-editor/themes/hds-dark-theme.ts';
-import hdsDarkHighlightStyle from './hds-code-editor/highlight-styles/hds-dark-highlight-style.ts';
+// HdsCodeEditor theme
+import hdsTheme from './hds-code-editor/themes/hds-theme.ts';
+import hdsHighlightStyle from './hds-code-editor/highlight-styles/hds-highlight-style.ts';
 
 import type HdsIntlService from '../services/hds-intl.ts';
 import type { HdsCodeEditorLanguages } from './hds-code-editor/types.ts';
@@ -478,9 +478,9 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         handleUpdateExtension,
         // user-provided extensions
         ...(customExtensions ?? []),
-        // hds dark theme
-        hdsDarkTheme,
-        syntaxHighlighting(hdsDarkHighlightStyle),
+        // HdsCodeEditor theme
+        hdsTheme,
+        syntaxHighlighting(hdsHighlightStyle),
       ];
 
       if (extraKeys !== undefined) {

packages/components/src/modifiers/hds-code-editor/highlight-styles/hds-highlight-style.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { tags } from '@lezer/highlight';
+import { HighlightStyle } from '@codemirror/language';
+
+const hdsHighlightStyle = HighlightStyle.define([
+  // Cyan | Property, url, or operator
+  {
+    tag: tags.propertyName,
+    color: `var(--token-code-block-color-palette-cyan)`,
+  },
+  { tag: tags.url, color: `var(--token-code-block-color-palette-cyan)` },
+  { tag: tags.operator, color: `var(--token-code-block-color-palette-cyan)` },
+  {
+    tag: tags.attributeValue,
+    color: `var(--token-code-block-color-palette-cyan)`,
+  },
+
+  // Blue | Function, builtins
+  {
+    tag: tags.attributeName,
+    color: `var(--token-code-block-color-palette-blue)`,
+  },
+  {
+    tag: tags.function(tags.variableName),
+    color: `var(--token-code-block-color-palette-blue)`,
+  },
+  {
+    tag: tags.function(tags.propertyName),
+    color: `var(--token-code-block-color-palette-blue)`,
+  },
+
+  // Orange | Strings, characters
+  { tag: tags.string, color: `var(--token-code-block-color-palette-orange)` },
+  { tag: tags.regexp, color: `var(--token-code-block-color-palette-orange)` },
+
+  // Purple | Booleans, numbers
+  { tag: tags.bool, color: `var(--token-code-block-color-palette-purple)` },
+  { tag: tags.number, color: `var(--token-code-block-color-palette-purple)` },
+
+  // Green | Keywords, class names, saving the world
+  { tag: tags.keyword, color: `var(--token-code-block-color-palette-green)` },
+  { tag: tags.className, color: `var(--token-code-block-color-palette-green)` },
+
+  // Red | Important items
+  { tag: tags.deleted, color: `var(--token-code-block-color-palette-red)` },
+
+  // White | Default color within the code block, also used for punctuation
+  { tag: tags.name, color: `var(--token-code-block-color-palette-white)` },
+  {
+    tag: tags.punctuation,
+    color: `var(--token-code-block-color-palette-white)`,
+  },
+  // Gray | Used for comments across languages
+  {
+    tag: tags.comment,
+    color: `var(--token-code-block-color-foreground-primary)`,
+  },
+
+  // Markdown specific
+  {
+    tag: tags.heading,
+    color: `var(--token-code-block-color-palette-blue)`,
+    fontWeight: 'bold',
+  },
+  {
+    tag: tags.strong,
+    color: `var(--token-code-block-color-palette-orange)`,
+    fontWeight: 'bold',
+  },
+  {
+    tag: tags.emphasis,
+    color: `var(--token-code-block-color-palette-orange)`,
+    fontStyle: 'italic',
+  },
+  {
+    tag: tags.link,
+    color: `var(--token-code-block-color-palette-cyan)`,
+    textDecoration: 'underline',
+  },
+  {
+    tag: tags.quote,
+    color: `var(--token-code-block-color-foreground-primary)`,
+    fontStyle: 'italic',
+  },
+  { tag: tags.list, color: `var(--token-code-block-color-palette-white)` },
+  { tag: tags.monospace, color: `var(--token-code-block-color-palette-green)` },
+]);
+
+export default hdsHighlightStyle;