Space, radius, and shadow

Spacing runs from --astryx-spacing-0 through --astryx-spacing-12, with 0.5 and 1.5 in between. The values are rem: --astryx-spacing-2 is 0.5rem and --astryx-spacing-4 is 1rem. At the browser's default 16px root font size each step is 4px times the step, so --astryx-spacing-2 is 8px. When a reader raises the browser font size, or a page sets html { font-size }, gaps and padding grow with the text in the same ratio. At a 20px root, --astryx-spacing-4 is 20px instead of 16px.

These tokens used to be fixed px. Nothing looks different at the default root. A custom theme that writes spacing in px keeps fixed px; write rem to follow the root font size.

Control heights are --astryx-size-element-sm (28px), md (32px), and lg (36px). They stay px.

Radii run from --astryx-radius-none to --astryx-radius-full. --astryx-radius-none stays 0 in this package. It does not adopt upstream Neutral's 0.25rem. --astryx-radius-chat is 28px. Neutral does not override it. At a 16px root that equals the 1.75rem page radius.

Shadows have three elevations, low, med, and high, plus inset shadows for hover, selected, success, warning, and error. The outer shadows use offset and blur, and the light and dark stops differ.

The focus ring uses --astryx-focus-outline-width, style, color, and offset. The color follows --astryx-color-accent.

Spacing

Steps 0 through 12. The bar is as wide as the token.

--astryx-spacing-0

0rem

--astryx-spacing-0-5

0.125rem

--astryx-spacing-1

0.25rem

--astryx-spacing-1-5

0.375rem

--astryx-spacing-2

0.5rem

--astryx-spacing-3

0.75rem

--astryx-spacing-4

1rem

--astryx-spacing-5

1.25rem

--astryx-spacing-6

1.5rem

--astryx-spacing-7

1.75rem

--astryx-spacing-8

2rem

--astryx-spacing-9

2.25rem

--astryx-spacing-10

2.5rem

--astryx-spacing-11

2.75rem

--astryx-spacing-12

3rem

Control size

Heights for small, medium, and large controls.

--astryx-size-element-sm

28px

--astryx-size-element-md

32px

--astryx-size-element-lg

36px

Border

The default border width.

--astryx-border-width

1px

Focus ring

The keyboard focus ring. Its color follows accent.

--astryx-focus-outline-width

2px

--astryx-focus-outline-style

solid

--astryx-focus-outline-color

var(--astryx-color-accent)

--astryx-focus-outline-offset

3px

Radius

The sample uses the token as its corner radius.

--astryx-radius-none

0px

Stays 0. Upstream Neutral uses 0.25rem. Square avatars and skeletons with radius none use this token for a square corner.

--astryx-radius-inner

0.375rem

--astryx-radius-element

0.625rem

--astryx-radius-container

0.75rem

--astryx-radius-page

1.75rem

--astryx-radius-chat

28px

Neutral does not override this token. 28px equals the 1.75rem page radius at a 16px root.

--astryx-radius-full

9999px

Shadow

Three elevation shadows, plus five inset shadows. The preview follows the current color scheme.

--astryx-shadow-low

0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))

--astryx-shadow-med

0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%))

--astryx-shadow-high

0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%))

--astryx-shadow-inset-hover

inset 0px 0px 0px 2px #0074e24d

--astryx-shadow-inset-selected

inset 0px 0px 0px 2px #0074e280

--astryx-shadow-inset-success

inset 0px 0px 0px 2px #2f7d334d

--astryx-shadow-inset-warning

inset 0px 0px 0px 2px #f8d36a4d

--astryx-shadow-inset-error

inset 0px 0px 0px 2px #de47454d