Themes

Browse and preview every theme and see how design tokens, type, and components restyle across the library.
Neutral
Stone
Gothic
Matcha
Y2k
Butter
Chocolate
Liquid Glass

Neutral

Neutral theme for astryx-svelte — the default Astryx look. @astryx-svelte/theme-neutral · 90 tokens · 10 component overrides · 73 light/dark pairs Ported from @astryxdesign/theme-neutral; every declaration is diffed against it by the theme oracle.
Install 
bash
 
npm install @astryx-svelte/theme-neutral
typescript
 
import { Theme } from '@astryx-svelte/core';
import { neutralTheme } from '@astryx-svelte/theme-neutral';
import '@astryx-svelte/theme-neutral/theme.css';

Preview

Declared tokens

The 90 token names this package overrides, of core's vocabulary. Values are the ones declared for light mode.

Color

  • --color-accent #262626
  • --color-accent-muted #f1f1f1
  • --color-background-blue #c4ddfb
  • --color-background-body #f1f1f1
  • --color-background-card #ffffff
  • --color-background-cyan #a3e0ef
  • --color-background-gray #e5e5e5
  • --color-background-green #c5e5c0
  • --color-background-muted #f1f1f1
  • --color-background-orange #fad0b5
  • --color-background-pink #fccadc
  • --color-background-popover #ffffff
  • --color-background-purple #eccef3
  • --color-background-red #facecb
  • --color-background-surface #ffffff
  • --color-background-teal #a5e3d6
  • --color-background-yellow #f8da9d
  • --color-border #00000014
  • --color-border-blue #b1c9e7
  • --color-border-cyan #91d3e3
  • --color-border-emphasized #d4d4d4
  • --color-border-gray #d4d4d4
  • --color-border-green #b2d1ac
  • --color-border-orange #e6bda2
  • --color-border-pink #e7b7c8
  • --color-border-purple #d8bbdf
  • --color-border-red #e6bab8
  • --color-border-teal #94d6c8
  • --color-border-yellow #e4c279
  • --color-error #a50c25
  • --color-error-muted #facecb
  • --color-icon-accent #262626
  • --color-icon-blue #00458c
  • --color-icon-cyan #00505f
  • --color-icon-disabled #a3a3a3
  • --color-icon-gray #525252
  • --color-icon-green #0c5700
  • --color-icon-orange #6e3500
  • --color-icon-pink #83004b
  • --color-icon-primary #171717
  • --color-icon-purple #700084
  • --color-icon-red #89001a
  • --color-icon-secondary #737373
  • --color-icon-teal #005348
  • --color-icon-yellow #584400
  • --color-neutral #0000000F
  • --color-on-accent #ffffff
  • --color-on-dark #ffffff
  • --color-on-error #ffffff
  • --color-on-light #171717
  • --color-on-success #ffffff
  • --color-on-warning #171717
  • --color-overlay #00000080
  • --color-overlay-hover #0000000D
  • --color-overlay-pressed #0000001A
  • --color-shadow #0000001A
  • --color-skeleton #ebebeb
  • --color-success #007004
  • --color-success-muted #c5e5c0
  • --color-text-accent #262626
  • --color-text-blue #00458c
  • --color-text-cyan #00505f
  • --color-text-disabled #a3a3a3
  • --color-text-gray #262626
  • --color-text-green #0c5700
  • --color-text-orange #6e3500
  • --color-text-pink #83004b
  • --color-text-primary #171717
  • --color-text-purple #700084
  • --color-text-red #89001a
  • --color-text-secondary #525252
  • --color-text-teal #005348
  • --color-text-yellow #584400
  • --color-tint-hover black
  • --color-warning #745b00
  • --color-warning-muted #f8da9d

Radius

  • --radius-container 0.75rem
  • --radius-element 0.625rem
  • --radius-full 9999px
  • --radius-inner 0.375rem
  • --radius-none 0.25rem
  • --radius-page 1.75rem

Shadow

  • --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%))
  • --shadow-inset-error inset 0px 0px 0px 2px #e33f4a4D
  • --shadow-inset-hover inset 0px 0px 0px 2px #0074e24D
  • --shadow-inset-selected inset 0px 0px 0px 2px #0074e280
  • --shadow-inset-success inset 0px 0px 0px 2px #1981004D
  • --shadow-inset-warning inset 0px 0px 0px 2px #ffce2f4D
  • --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%))
  • --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%))