Color

Neutral colors are --astryx-color-*. Each one uses light-dark() for the light stop and the dark stop. In the grid below, the left chip is light and the right chip is dark. Translucent colors sit on a checkerboard.

The set covers surfaces, text, icons, success, warning, error, and the blue, cyan, gray, green, orange, pink, purple, red, teal, and yellow groups for background, border, icon, and text. Badge variants use those names, for example variant="blue".

Chart colors are --astryx-color-data-*, 56 of them, with the same names and values as upstream. Categorical colors give one color to each series, for example --astryx-color-data-categorical-blue, and the light and dark stops are the same hex. Sequential ramps run from 5 to 1, 5 darkest and 1 lightest, for example --astryx-color-data-blue-5. The gray ramp and --astryx-color-data-neutral change with the color scheme. The neutral one is for labels and reference lines.

The defaults live once in @astryx-vue/themes/data.css, on :root, and every theme entry imports that file. A theme's own stylesheet does not repeat them. To recolor a series, set only that variable, on :root or inside a theme, and a nested theme keeps whatever its parent set. Code that paints outside CSS, such as a canvas chart, can read the same defaults from DATA_TOKEN_DEFAULTS in @astryx-vue/core/Theme, or call useTheme().token('--color-data-categorical-blue').

Surfaces and accent

LightDark

--astryx-color-background-surface

light-dark(#ffffff, #262626)

LightDark

--astryx-color-background-body

light-dark(#f1f1f1, #1b1b1b)

LightDark

--astryx-color-background-card

light-dark(#ffffff, #1b1b1b)

LightDark

--astryx-color-background-popover

light-dark(#ffffff, #1b1b1b)

LightDark

--astryx-color-background-muted

light-dark(#f1f1f1, #1b1b1b)

LightDark

--astryx-color-accent

light-dark(#1b1b1b, #f1f1f1)

LightDark

--astryx-color-accent-muted

light-dark(#f1f1f1, #262626)

LightDark

--astryx-color-neutral

light-dark(#0000000f, #ffffff1a)

LightDark

--astryx-color-overlay

light-dark(#00000080, #000000cc)

LightDark

--astryx-color-overlay-hover

light-dark(#0000000d, #ffffff0d)

LightDark

--astryx-color-overlay-pressed

light-dark(#0000001a, #ffffff1a)

LightDark

--astryx-color-background-inverted

light-dark(#0a1317, #ffffff)

Neutral does not override this token, so the upstream default is used.

LightDark

--astryx-color-background-error-inverted

light-dark(#aa071e, #e3193b)

Neutral does not override this token, so the upstream default is used.

Text

LightDark

--astryx-color-text-primary

light-dark(#000000, #ffffff)

LightDark

--astryx-color-text-secondary

light-dark(#474747, #9e9e9e)

The light stop stays #525252. Upstream Neutral uses #737373. Inputs, selectors, and supporting text already use the current value.

LightDark

--astryx-color-text-disabled

light-dark(#919191, #525252)

LightDark

--astryx-color-text-accent

light-dark(#1b1b1b, #f1f1f1)

The semantic value matches accent. text.css still declares a blue pair that wins, so components stay blue.

LightDark

--astryx-color-on-dark

#ffffff

LightDark

--astryx-color-on-light

#111111

LightDark

--astryx-color-on-accent

light-dark(#ffffff, #111111)

Icon

LightDark

--astryx-color-icon-accent

light-dark(#1b1b1b, #f1f1f1)

LightDark

--astryx-color-icon-primary

light-dark(#000000, #ffffff)

LightDark

--astryx-color-icon-secondary

light-dark(#6a6a6a, #9e9e9e)

LightDark

--astryx-color-icon-disabled

light-dark(#919191, #525252)

Status

LightDark

--astryx-color-on-success

light-dark(#ffffff, #111111)

LightDark

--astryx-color-on-error

light-dark(#ffffff, #111111)

LightDark

--astryx-color-on-warning

#111111

LightDark

--astryx-color-success

light-dark(#00490b, #a4d6a3)

LightDark

--astryx-color-error

light-dark(#76000c, #ffc4be)

LightDark

--astryx-color-warning

light-dark(#4b3900, #f8d36a)

LightDark

--astryx-color-success-muted

light-dark(#bce0bb, #90ca903d)

LightDark

--astryx-color-error-muted

light-dark(#ffc4be, #ff98903d)

LightDark

--astryx-color-warning-muted

light-dark(#fae19e, #e2b6233d)

Border and effect

LightDark

--astryx-color-border

light-dark(#00000014, #ffffff1a)

LightDark

--astryx-color-border-emphasized

light-dark(#d4d4d4, #525252)

LightDark

--astryx-color-skeleton

light-dark(#f1f1f1, #525252)

LightDark

--astryx-color-shadow

light-dark(#0000001a, #0000004d)

LightDark

--astryx-color-tint-hover

light-dark(black, white)

LightDark

--astryx-color-track

light-dark(#ccd3db, #5a5e66)

Neutral does not override this token, so the upstream default is used.

Blue

LightDark

--astryx-color-background-blue

light-dark(#b9d7ff, #253c5a)

LightDark

--astryx-color-border-blue

light-dark(#a1caff, #5aa0f8)

LightDark

--astryx-color-icon-blue

light-dark(#003978, #88bcff)

LightDark

--astryx-color-text-blue

light-dark(#003978, #a1caff)

Cyan

LightDark

--astryx-color-background-cyan

light-dark(#9ae2f4, #274046)

LightDark

--astryx-color-border-cyan

light-dark(#85d5e9, #49adc4)

LightDark

--astryx-color-icon-cyan

light-dark(#004351, #71c7dd)

LightDark

--astryx-color-text-cyan

light-dark(#004351, #85d5e9)

Gray

LightDark

--astryx-color-background-gray

light-dark(#e2e2e2, #303030)

The dark stop references color-neutral, a translucent white.

LightDark

--astryx-color-border-gray

light-dark(#d4d4d4, #262626)

LightDark

--astryx-color-icon-gray

light-dark(#474747, #9e9e9e)

LightDark

--astryx-color-text-gray

light-dark(#1b1b1b, #d4d4d4)

Green

LightDark

--astryx-color-background-green

light-dark(#bce0bb, #2b422b)

LightDark

--astryx-color-border-green

light-dark(#aad4a9, #6ab26b)

LightDark

--astryx-color-icon-green

light-dark(#00490b, #90ca90)

LightDark

--astryx-color-text-green

light-dark(#00490b, #90ca90)

Orange

LightDark

--astryx-color-background-orange

light-dark(#ffc7a1, #503424)

LightDark

--astryx-color-border-orange

light-dark(#ffc7a1, #df843f)

LightDark

--astryx-color-icon-orange

light-dark(#622700, #ff9e55)

LightDark

--astryx-color-text-orange

light-dark(#622700, #ffb37e)

Pink

LightDark

--astryx-color-background-pink

light-dark(#ffc0d7, #572b3d)

LightDark

--astryx-color-border-pink

light-dark(#ffc0d7, #fc78b1)

LightDark

--astryx-color-icon-pink

light-dark(#70003f, #fd92bd)

LightDark

--astryx-color-text-pink

light-dark(#70003f, #ffa9ca)

Purple

LightDark

--astryx-color-background-purple

light-dark(#f7d5ff, #4a2f51)

LightDark

--astryx-color-border-purple

light-dark(#f3bfff, #d885eb)

LightDark

--astryx-color-icon-purple

light-dark(#5c0e6c, #e496f6)

LightDark

--astryx-color-text-purple

light-dark(#5c0e6c, #eaacf8)

Red

LightDark

--astryx-color-background-red

light-dark(#ffc4be, #5b2b28)

LightDark

--astryx-color-border-red

light-dark(#ffaea7, #fa6762)

LightDark

--astryx-color-icon-red

light-dark(#76000c, #ff9890)

LightDark

--astryx-color-text-red

light-dark(#76000c, #ffaea7)

Teal

LightDark

--astryx-color-background-teal

light-dark(#a9e2d6, #28413c)

LightDark

--astryx-color-border-teal

light-dark(#90d7c8, #4fb1a0)

LightDark

--astryx-color-icon-teal

light-dark(#00463d, #81c9bb)

LightDark

--astryx-color-text-teal

light-dark(#00463d, #90d7c8)

Yellow

LightDark

--astryx-color-background-yellow

light-dark(#fae19e, #453a1c)

LightDark

--astryx-color-border-yellow

light-dark(#e3c36c, #c29900)

LightDark

--astryx-color-icon-yellow

light-dark(#4b3900, #e2b623)

LightDark

--astryx-color-text-yellow

light-dark(#4b3900, #eec448)

Charts

LightDark

--astryx-color-data-categorical-blue

light-dark(#0171E3, #0171E3)

LightDark

--astryx-color-data-categorical-orange

light-dark(#EB6E00, #EB6E00)

LightDark

--astryx-color-data-categorical-purple

light-dark(#6B1EFD, #6B1EFD)

LightDark

--astryx-color-data-categorical-green

light-dark(#0B991F, #0B991F)

LightDark

--astryx-color-data-categorical-pink

light-dark(#F351C0, #F351C0)

LightDark

--astryx-color-data-categorical-cyan

light-dark(#0171A4, #0171A4)

LightDark

--astryx-color-data-categorical-red

light-dark(#F5394F, #F5394F)

LightDark

--astryx-color-data-categorical-teal

light-dark(#08A3A3, #08A3A3)

LightDark

--astryx-color-data-categorical-brown

light-dark(#965E03, #965E03)

LightDark

--astryx-color-data-categorical-indigo

light-dark(#6F8AFF, #6F8AFF)

LightDark

--astryx-color-data-neutral

light-dark(#8494A3, #8C939B)

LightDark

--astryx-color-data-blue-5

light-dark(#02165E, #02165E)

LightDark

--astryx-color-data-blue-4

light-dark(#004CBC, #004CBC)

LightDark

--astryx-color-data-blue-3

light-dark(#2694FE, #2694FE)

LightDark

--astryx-color-data-blue-2

light-dark(#78BEFF, #78BEFF)

LightDark

--astryx-color-data-blue-1

light-dark(#DBECFF, #DBECFF)

LightDark

--astryx-color-data-shamrock-5

light-dark(#0B603D, #0B603D)

LightDark

--astryx-color-data-shamrock-4

light-dark(#138546, #138546)

LightDark

--astryx-color-data-shamrock-3

light-dark(#24BB5E, #24BB5E)

LightDark

--astryx-color-data-shamrock-2

light-dark(#8EF7AA, #8EF7AA)

LightDark

--astryx-color-data-shamrock-1

light-dark(#D6FEE4, #D6FEE4)

LightDark

--astryx-color-data-orange-5

light-dark(#A13F04, #A13F04)

LightDark

--astryx-color-data-orange-4

light-dark(#D66100, #D66100)

LightDark

--astryx-color-data-orange-3

light-dark(#FD9537, #FD9537)

LightDark

--astryx-color-data-orange-2

light-dark(#FDB876, #FDB876)

LightDark

--astryx-color-data-orange-1

light-dark(#FFE6CF, #FFE6CF)

LightDark

--astryx-color-data-pink-5

light-dark(#8E1073, #8E1073)

LightDark

--astryx-color-data-pink-4

light-dark(#D123A1, #D123A1)

LightDark

--astryx-color-data-pink-3

light-dark(#F989D3, #F989D3)

LightDark

--astryx-color-data-pink-2

light-dark(#FEADE3, #FEADE3)

LightDark

--astryx-color-data-pink-1

light-dark(#FCE3F4, #FCE3F4)

LightDark

--astryx-color-data-purple-5

light-dark(#3E0697, #3E0697)

LightDark

--astryx-color-data-purple-4

light-dark(#6B1EFD, #6B1EFD)

LightDark

--astryx-color-data-purple-3

light-dark(#9081FF, #9081FF)

LightDark

--astryx-color-data-purple-2

light-dark(#B3B0FE, #B3B0FE)

LightDark

--astryx-color-data-purple-1

light-dark(#E8E8FB, #E8E8FB)

LightDark

--astryx-color-data-red-5

light-dark(#9D0519, #9D0519)

LightDark

--astryx-color-data-red-4

light-dark(#D31130, #D31130)

LightDark

--astryx-color-data-red-3

light-dark(#FB7D87, #FB7D87)

LightDark

--astryx-color-data-red-2

light-dark(#FFB2B8, #FFB2B8)

LightDark

--astryx-color-data-red-1

light-dark(#FEE4E6, #FEE4E6)

LightDark

--astryx-color-data-teal-5

light-dark(#08767D, #08767D)

LightDark

--astryx-color-data-teal-4

light-dark(#0C9293, #0C9293)

LightDark

--astryx-color-data-teal-3

light-dark(#0DB7AF, #0DB7AF)

LightDark

--astryx-color-data-teal-2

light-dark(#6CE6D8, #6CE6D8)

LightDark

--astryx-color-data-teal-1

light-dark(#D7FCF8, #D7FCF8)

LightDark

--astryx-color-data-yellow-5

light-dark(#8A5001, #8A5001)

LightDark

--astryx-color-data-yellow-4

light-dark(#D69804, #D69804)

LightDark

--astryx-color-data-yellow-3

light-dark(#FBCE03, #FBCE03)

LightDark

--astryx-color-data-yellow-2

light-dark(#FCEC85, #FCEC85)

LightDark

--astryx-color-data-yellow-1

light-dark(#FDF6BA, #FDF6BA)

LightDark

--astryx-color-data-gray-5

light-dark(#25363F, #333338)

LightDark

--astryx-color-data-gray-4

light-dark(#5D6C7B, #666A72)

LightDark

--astryx-color-data-gray-3

light-dark(#AFB9C4, #B2B8BE)

LightDark

--astryx-color-data-gray-2

light-dark(#CCD3DB, #D0D3D6)

LightDark

--astryx-color-data-gray-1

light-dark(#F1F4F7, #F2F4F6)

Color ​

Surfaces and accent

Text

Icon

Status

Border and effect

Blue

Cyan

Gray

Green

Orange

Pink

Purple

Red

Teal

Yellow

Charts

Color