Add new Highlighting tokens to carbon core #549
Description
Summary
- We need a token-driven color palette for the CodeMirror-based code editor used in
packages/ai-chat-components/src/components/code-snippet/src/code-snippet.scss. - You can see the tokens in use at https://deploy-preview-550--carbon-ai-chat-components.netlify.app/?path=/story/components-code-snippet--highlight, be sure to expand the content
- Understand that storybook is not even close to being ready :)
- Deliverable: a set of design specs for each
--cds-syntax-*custom property listed below for all themes that can be used by anyone trying to do syntax highlighting in a carbon compliant way.
| Token | UI Element / State | Notes | white | g10 | g90 | g100 | CR:white | CR:g10 | CR:g90 | CR:g100 | Pass (white + g10) | Pass (g90 + g100) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
--cds-syntax-comment |
Default comment text | Muted relative to code. | colors.$green-60 |
colors.$green-60 |
colors.$green-40 |
colors.$green-40 |
5.02 | 4.56 | 6.33 | 7.57 | ✅ | ✅ |
--cds-syntax-line-comment |
Single-line comment | Alias of comment. | var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-block-comment |
Block comment | Alias of comment. | var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-doc-comment |
Documentation comment | Alias of comment. | var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
var(--cds-syntax-comment) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-doc-string |
Docstring | Behaves like string. | var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-keyword |
Keywords | Reserved words. | colors.$blue-60 |
colors.$blue-60 |
colors.$blue-50 |
colors.$blue-50 |
5.00 | 4.55 | 4.52 | 5.41 | ✅ | ✅ |
--cds-syntax-operator-keyword |
Operator keywords | Alias of keyword. | var(--cds-syntax-keyword) |
var(--cds-syntax-keyword) |
var(--cds-syntax-keyword) |
var(--cds-syntax-keyword) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-control-keyword |
Control-flow keywords | Same hue across themes; shade varies. | colors.$purple-70 |
colors.$purple-70 |
colors.$purple-40 |
colors.$purple-40 |
7.74 | 7.03 | 6.44 | 7.70 | ✅ | ✅ |
--cds-syntax-definition-keyword |
Definition keywords | Declarations/definitions. | colors.$cyan-70 |
colors.$cyan-70 |
colors.$cyan-40 |
colors.$cyan-40 |
5.01 | 4.55 | 6.39 | 7.65 | ✅ | ✅ |
--cds-syntax-module-keyword |
Module/import keywords | Same purple family. | colors.$purple-70 |
colors.$purple-70 |
colors.$purple-40 |
colors.$purple-40 |
7.74 | 7.03 | 6.44 | 7.70 | ✅ | ✅ |
--cds-syntax-variable |
Variable | Generic identifier. | colors.$blue-60 |
colors.$blue-60 |
colors.$blue-30 |
colors.$blue-30 |
5.00 | 4.55 | 8.88 | 10.62 | ✅ | ✅ |
--cds-syntax-name |
Name | Alias of variable. | var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-variable-name |
Variable name | Alias of variable. | var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-label-name |
Label name | Alias of variable. | var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
var(--cds-syntax-variable) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-attribute |
Attribute | Generic attribute. | colors.$cyan-70 |
colors.$cyan-70 |
colors.$cyan-40 |
colors.$cyan-40 |
5.01 | 4.55 | 6.39 | 7.65 | ✅ | ✅ |
--cds-syntax-attribute-name |
Attribute name | Alias of attribute. | var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-property-name |
Property name | Alias of attribute. | var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
var(--cds-syntax-attribute) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-tag |
Tag delimiters | Markup tags. | colors.$teal-60 |
colors.$teal-60 |
colors.$teal-30 |
colors.$teal-30 |
4.99 | 4.54 | 8.89 | 10.63 | ✅ | ✅ |
--cds-syntax-tag-name |
Tag name | Alias of tag. | var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-type |
Type | Generic type. | colors.$teal-60 |
colors.$teal-60 |
colors.$teal-30 |
colors.$teal-30 |
4.99 | 4.54 | 8.89 | 10.63 | ✅ | ✅ |
--cds-syntax-type-name |
Type name | Alias of type. | var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-class-name |
Class name | Alias of type. | var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-namespace |
Namespace | Alias of type. | var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
var(--cds-syntax-type) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-macro-name |
Macro name | Special identifiers. | var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-atom |
Atom literal | Boolean/null family. | var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-literal |
Literal | Alias of atom. | var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-bool |
Boolean | Alias of atom. | var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-null |
Null/undefined | Alias of atom. | var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
var(--cds-syntax-atom) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-self |
Self/this | Subtle reserved identifier. | var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
var(--cds-syntax-tag) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-number |
Number | Numeric literals. | colors.$green-60 |
colors.$green-60 |
colors.$green-30 |
colors.$green-30 |
5.02 | 4.56 | 8.86 | 10.59 | ✅ | ✅ |
--cds-syntax-integer |
Integer | Alias of number. | var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-float |
Float | Alias of number. | var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-unit |
Unit | Alias of number. | var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
var(--cds-syntax-number) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-string |
String | String literals. | $text-primary |
$text-primary |
$text-primary |
$text-primary |
4.95 | 4.50 | 6.42 | 7.68 | ✅ | ✅ |
--cds-syntax-character |
Character | Alias of string. | var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-attribute-value |
Attribute value | Alias of string. | var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
var(--cds-syntax-string) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-special-string |
Special string | Interpolated or template strings. | colors.$purple-60 |
colors.$purple-60 |
colors.$purple-40 |
colors.$purple-40 |
5.00 | 4.55 | 6.40 | 7.60 | ✅ | ✅ |
--cds-syntax-regexp |
RegExp | Regex literals. | colors.$purple-70 |
colors.$purple-70 |
colors.$purple-40 |
colors.$purple-40 |
7.74 | 7.03 | 6.44 | 7.70 | ✅ | ✅ |
--cds-syntax-escape |
Escape sequence | Escape chars. | colors.$cool-gray-80 |
colors.$cool-gray-80 |
colors.$gray-20 |
colors.$gray-20 |
11.52 | 10.47 | 11.46 | 13.71 | ✅ | ✅ |
--cds-syntax-url |
URL literal | URLs inside strings. | var(--cds-syntax-escape) |
var(--cds-syntax-escape) |
var(--cds-syntax-escape) |
var(--cds-syntax-escape) |
— | — | — | — | ✅ | ✅ |
--cds-syntax-color |
Color literal | Color values. | var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
var(--cds-text-primary) |
— | — | — | — | ✅ | ✅ |
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status