Themes

Browse and preview every theme and see how design tokens, type, and components restyle across the library.

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 0px
  • --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%))