Tokens
Border
| Token | Value | CSS | Import | Description |
|---|---|---|---|---|
--amber-border-radius-small | 0 | var(--amber-border-radius-small) | BorderRadiusSmall | Small border radius |
--amber-border-radius-medium | 0 | var(--amber-border-radius-medium) | BorderRadiusMedium | Medium border radius |
--amber-border-width-thin | 1px | var(--amber-border-width-thin) | BorderWidthThin | Thin border width |
Breakpoint
| Token | Value | CSS | Import | Description |
|---|---|---|---|---|
--amber-breakpoint-mobile | 480px | var(--amber-breakpoint-mobile) | BreakpointMobile | Mobile breakpoint |
--amber-breakpoint-tablet | 768px | var(--amber-breakpoint-tablet) | BreakpointTablet | Tablet breakpoint |
--amber-breakpoint-desktop | 1024px | var(--amber-breakpoint-desktop) | BreakpointDesktop | Desktop breakpoint |
--amber-breakpoint-wide | 1280px | var(--amber-breakpoint-wide) | BreakpointWide | Wide screen breakpoint |
Font
| Token | Value | CSS | Import | Description |
|---|---|---|---|---|
--amber-font-family-body | Lora, Georgia, serif | var(--amber-font-family-body) | FontFamilyBody | Font family for body text |
--amber-font-family-heading | Lora, Georgia, serif | var(--amber-font-family-heading) | FontFamilyHeading | Font family for headings |
--amber-font-family-monospace | 'JetBrains Mono', 'Fira Code', Consolas, monospace | var(--amber-font-family-monospace) | FontFamilyMonospace | Font family for code and monospace text |
--amber-font-size-small | 0.875rem | var(--amber-font-size-small) | FontSizeSmall | Small font size |
--amber-font-size-base | 1rem | var(--amber-font-size-base) | FontSizeBase | Base font size |
--amber-font-size-medium | 1.125rem | var(--amber-font-size-medium) | FontSizeMedium | Medium font size |
--amber-font-size-large | 1.5rem | var(--amber-font-size-large) | FontSizeLarge | Large font size |
--amber-font-size-extra-large | 2rem | var(--amber-font-size-extra-large) | FontSizeExtraLarge | Extra large font size |
--amber-font-size-huge | 2.5rem | var(--amber-font-size-huge) | FontSizeHuge | Huge font size |
--amber-font-weight-normal | 400 | var(--amber-font-weight-normal) | FontWeightNormal | Normal font weight |
--amber-font-weight-medium | 500 | var(--amber-font-weight-medium) | FontWeightMedium | Medium font weight |
--amber-font-weight-bold | 700 | var(--amber-font-weight-bold) | FontWeightBold | Bold font weight |
Line height
| Token | Value | CSS | Import | Description |
|---|---|---|---|---|
--amber-line-height-tight | 1.25 | var(--amber-line-height-tight) | LineHeightTight | Tight line height for headings |
--amber-line-height-normal | 1.6 | var(--amber-line-height-normal) | LineHeightNormal | Normal line height for body text |
--amber-line-height-relaxed | 1.75 | var(--amber-line-height-relaxed) | LineHeightRelaxed | Relaxed line height for comfortable reading |
Spacing
| Token | Value | CSS | Import | Description |
|---|---|---|---|---|
--amber-spacing-extra-small | 0.25rem | var(--amber-spacing-extra-small) | SpacingExtraSmall | Extra small spacing |
--amber-spacing-small | 0.5rem | var(--amber-spacing-small) | SpacingSmall | Small spacing |
--amber-spacing-medium | 1rem | var(--amber-spacing-medium) | SpacingMedium | Medium spacing |
--amber-spacing-large | 1.5rem | var(--amber-spacing-large) | SpacingLarge | Large spacing |
--amber-spacing-extra-large | 2rem | var(--amber-spacing-extra-large) | SpacingExtraLarge | Extra large spacing |
--amber-spacing-huge | 3rem | var(--amber-spacing-huge) | SpacingHuge | Huge spacing |
--amber-spacing-massive | 4rem | var(--amber-spacing-massive) | SpacingMassive | Massive spacing |