Code draft v0.1.1
The syntax highlighting colors of code, one per category, and the states of marked lines, readable on every surface in every mode.
Code samples, token paths and snippets are set in the mono family (Typography foundation); this foundation colors them. Each syntax category (keyword, variable, function, class and type, string, number, comment) has a semantic color from the Figma library's code colors, global.text.code; the design system adds colors for diffs, invalid code and links, and backgrounds for marked lines, all picked from colors it already has. Everything else in code (plain identifiers, operators, punctuation) keeps the primary on-base text color. A highlighter maps the categories of its grammars to these colors: on the web, a Shiki theme generated from the tokens does it once for every mode, and a style sheet draws the marked lines.
Tokens
Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/code.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
global.bg.code.highlighted
A line the author points out.
|
color |
{global.bg.subtle.brand.default}
|
light
#EEF1F7
dark
#09191D
|
--global-bg-code-highlighted
|
global.bg.code.inserted
A line an example adds.
|
color |
{global.bg.subtle.functional.success.default}
|
light
#DBFAE6
dark
#011C16
|
--global-bg-code-inserted
|
global.bg.code.deleted
A line an example removes.
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--global-bg-code-deleted
|
global.bg.code.error
A line in error.
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--global-bg-code-error
|
global.bg.code.warning
A line with a warning.
|
color |
{global.bg.subtle.functional.warning.default}
|
light
#FFF1C7
dark
#1F1504
|
--global-bg-code-warning
|
global.text.code.keyword
|
color |
{extended.lavender.700}
|
light
#7534A9
dark
#B87BF5
|
--global-text-code-keyword
|
global.text.code.variable
|
color |
{extended.orchid.700}
|
light
#923D78
dark
#F283CD
|
--global-text-code-variable
|
global.text.code.function
|
color |
{extended.azure.700}
|
light
#266280
dark
#5BB8E7
|
--global-text-code-function
|
global.text.code.class-and-type
Decision code-colors-contrast (Code foundation): the Figma library extended.amber.500 is 1.96:1 on global.bg.level.1.default, under the 4.5:1 of WCAG 1.4.3.
|
color |
{extended.amber.700}
|
light
#7F6426
dark
#EEB836
|
--global-text-code-class-and-type
|
global.text.code.string
Decision code-colors-contrast (Code foundation): the Figma library extended.forest.600 is 3.80:1 on global.bg.level.1.default.
|
color |
{extended.forest.700}
|
light
#18614E
dark
#68BBA1
|
--global-text-code-string
|
global.text.code.number
Decision code-colors-contrast (Code foundation): the Figma library extended.coral.500 is 3.21:1 on global.bg.level.1.default, coral 600 still 4.30:1.
|
color |
{extended.coral.700}
|
light
#9C4324
dark
#FD8C67
|
--global-text-code-number
|
global.text.code.comment
|
color |
{light-switch.base.700}
|
light
#4C4A4A
dark
#9D9B9C
|
--global-text-code-comment
|
global.text.code.inserted
Lines a diff adds. The on-base success text step.
|
color |
{functional.success.700}
|
light
#075D33
dark
#11C772
|
--global-text-code-inserted
|
global.text.code.deleted
Lines a diff removes. The step of error text on tinted fills: on-base error (error 500) is 4.26:1 on level 1.
|
color |
{functional.error.600}
|
light
#C01619
dark
#FAA79D
|
--global-text-code-deleted
|
global.text.code.changed
Lines a context diff changes. The on-base severe text step.
|
color |
{functional.severe.700}
|
light
#764016
dark
#FE8400
|
--global-text-code-changed
|
global.text.code.invalid
Code a grammar marks invalid or deprecated. Same step as deleted.
|
color |
{functional.error.600}
|
light
#C01619
dark
#FAA79D
|
--global-text-code-invalid
|
global.text.code.link
URLs and links in code and markup. The on-base brand text step.
|
color |
{brand.light.600}
|
light
#175DD6
dark
#9EE7FA
|
--global-text-code-link
|
Components following it
Derived from the component tokens aliasing the foundation's tokens.
No component follows it yet.