astryx-dracula 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/BRAND.md +77 -0
  2. package/LICENSE +21 -0
  3. package/README.md +62 -0
  4. package/USAGE.md +100 -0
  5. package/astryx-dracula.d.ts +13 -0
  6. package/astryx-dracula.js +295 -0
  7. package/astryx-dracula.variants.d.ts +19 -0
  8. package/fonts/JetBrainsMono-Regular.woff2 +0 -0
  9. package/fonts/JetBrainsMono-SemiBold.woff2 +0 -0
  10. package/icons.tsx +77 -0
  11. package/package.json +63 -0
  12. package/theme.css +709 -0
  13. package/tokens.css +91 -0
package/BRAND.md ADDED
@@ -0,0 +1,77 @@
1
+ # Astryx Styles — Brand
2
+
3
+ Pure Dracula, frozen. Dark-only: no light mode exists or is planned; every tuple pins the same hex in both slots. Source: https://draculatheme.com/contribute, https://spec.draculatheme.com/.
4
+ Source of truth is `astryx-theme.ts`. Do not add hexes; `bun run audit` enforces palette and contrast.
5
+
6
+ ## Palette
7
+
8
+ | Role | Hex | Use |
9
+ |---|---|---|
10
+ | Background | #282A36 | page bg |
11
+ | Current line | #6272A4 | line highlight, subtle borders (doubles as comment) |
12
+ | Selection | #44475A | selected rows, quiet surfaces |
13
+ | Background Light | #343746 | cards, surfaces |
14
+ | Background Lighter | #424450 | popovers, floating elements |
15
+ | Background Dark | #21222C | shadows |
16
+ | Foreground | #F8F8F2 | primary text on dark |
17
+ | Comment | #6272A4 | disabled / muted text |
18
+ | Cyan | #8BE9FD | info, secondary links |
19
+ | Green | #50FA7B | positive, success |
20
+ | Orange | #FFB86C | warning, attention |
21
+ | Pink | #FF79C6 | flair, accent |
22
+ | Purple | #BD93F9 | primary, links and titles unvisited |
23
+ | Red | #FF5555 | negative, error |
24
+ | Yellow | #F1FA8C | tags, chips |
25
+
26
+ ## Semantic map (glimpse)
27
+
28
+ - Purple links/titles unvisited. Visited falls back to text-base, hover goes primary + underline. Users learn purple means tappable title.
29
+ - Green positive and success. Red negative and error. Yellow tags and chips. Cyan info and secondary links. Pink flair. Orange warning.
30
+ - Subdue #4C5067 for metadata and separators. Not a Dracula hex; derived from glimpse ramp for text-on-dark hierarchy.
31
+
32
+ ## Charts
33
+
34
+ Categorical series use nearest Dracula hues: blue goes comment, orange orange, purple purple,
35
+ green green, pink pink, cyan cyan, red red. Teal uses ANSI bright cyan #A4FFFF and indigo
36
+ ANSI bright blue #D6ACFF; brown has no spectral match and reuses orange. Sequential ramps cover 9 families (purple, pink, red,
37
+ orange, yellow, teal, blue, shamrock, gray) with 5 lightness steps each (28/44/60/74/88),
38
+ constant hue and saturation per family.
39
+
40
+ ## Code highlighting
41
+
42
+ Custom spec-exact syntax theme (`draculaSyntax` in `astryx-theme.ts`, stricter than the bundled preset):
43
+ pink keywords, yellow strings, comment gray comments, orange numbers, green functions, cyan types.
44
+
45
+ ## Status surfaces
46
+
47
+ Banners, badges, and alerts resolve status through muted tokens, never direct fills.
48
+ Each status scope redefines its muted token to the categorical tint
49
+ (`--color-background-<hue>`, 10% accent wash) with a semantic accent border.
50
+ Text on fills is always `#21222C`; spec never uses raw black. Links render accent
51
+ with underline and resolve to foreground on hover. Focus and interactive edges
52
+ use Functional Purple `#815CD6`.
53
+
54
+ ## Interactions
55
+
56
+ Buttons darken on hover; destructive pairs red fill with dark text. Links render accent
57
+ underlined and resolve to foreground on hover. Focus rings use accent, not Functional
58
+ Purple: 5.9 contrast beats 3.5 on dark backgrounds, verified by keyboard screenshot.
59
+ Inputs take accent and error rings from core; table rows lift on hover. Cards, banners,
60
+ badges, and progress bars are static.
61
+
62
+ ## Deliberately unset (neutral defaults)
63
+
64
+ Radii flat and crisp (5px elements, 4px inner). Everything below is a core default unless noted:
65
+
66
+ - Motion durations: neutral defaults (fast 175ms, medium 410ms).
67
+ - Spacing/size/ease scales: core defaults. Shadows, radii, and surfaces are Dracula-hued tokens above.
68
+ - Zero theme dependencies: icons vendored (Lucide), everything else defined here.
69
+ - Derived AA lifts (not spec hexes, same hues): secondary text #9AA1BC, muted text #8288A6, paragraph #B0B3C4, subdue #4C5067.
70
+ - Icon glyphs vendored from Lucide in `icons.tsx` (MIT). The theme also sets icon colors (primary, secondary, disabled, accent).
71
+ - onDark: generated defaults inherited. Dark-surface content resolves from the same ramp.
72
+ - `--color-data-neutral`: default gray reads fine on dark.
73
+ - No color-scale config: HCT generation would fight the pinned hexes. No light mode, ever.
74
+
75
+ ## Dims
76
+
77
+ Gap 23px, viewport 15px, content 15px vertical / 17px horizontal, widget-gap 23px, tile-row 96px, radius 5px everywhere, JetBrains Mono, type scale h1 17 / h2 16 / h3 15 / h4 14 / base 13 / h5 12 / h6 11.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Yuzu Octopus
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,62 @@
1
+ # astryx-dracula
2
+
3
+ [![NPM version](https://img.shields.io/npm/v/astryx-dracula.svg)](https://www.npmjs.com/package/astryx-dracula)
4
+ [![Build Status](https://github.com/yuzu-octopus/astryx-dracula/workflows/Deploy%20showcase/badge.svg)](https://github.com/yuzu-octopus/astryx-dracula/actions)
5
+ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
+
7
+ > Pure Dracula brand theme for Astryx React sites. Dark-only tokens, syntax highlighting, and chart colors with prebuilt CSS.
8
+
9
+ Live showcase: https://yuzu-octopus.github.io/astryx-dracula/
10
+
11
+ ## Features
12
+
13
+ - 270+ tokens pinned to the official Dracula specification, dark-only
14
+ - Spec-exact code syntax theme plus chart series and sequential ramps
15
+ - Prebuilt CSS with zero runtime cost, or runtime injection for prototyping
16
+ - WCAG contrast gates enforced in CI via `bun run audit`
17
+ - Vendored JetBrains Mono fonts and Lucide icons, zero theme dependencies
18
+ - Agent skill, `llms.txt`, and copy-paste quickstart for AI-assisted adoption
19
+
20
+ ## Installation
21
+
22
+ ```bash
23
+ bun add astryx-dracula
24
+ ```
25
+
26
+ ## Usage
27
+
28
+ ```tsx
29
+ import { Theme } from '@astryxdesign/core/theme';
30
+ import { astryxDraculaTheme } from 'astryx-dracula';
31
+ import 'astryx-dracula/theme.css';
32
+
33
+ <Theme theme={astryxDraculaTheme} mode="dark">
34
+ <App />
35
+ </Theme>;
36
+ ```
37
+
38
+ Copy `fonts/` from the package into your served `public/fonts/` directory.
39
+
40
+ > [!NOTE]
41
+ > For the plain-CSS path, migrating an existing codebase, and the full token reference, see [USAGE.md](USAGE.md) and [BRAND.md](BRAND.md). AI agents should start with the skill in `.agents/skills/astryx-dracula/SKILL.md`.
42
+
43
+ ## Project layout
44
+
45
+ ```text
46
+ astryx-theme.ts defineTheme source, single source of truth
47
+ theme.css prebuilt output of bun run theme:build
48
+ tokens.css plain-CSS :root fallback for any stack
49
+ icons.tsx vendored Lucide icon registry
50
+ fonts/ JetBrains Mono woff2 files
51
+ scripts/check.ts palette plus contrast gates
52
+ demo/ showcase source, deployed to GitHub Pages
53
+ ```
54
+
55
+ ## Scripts
56
+
57
+ | Command | Purpose |
58
+ | -------------------- | ------------------------------------------ |
59
+ | `bun run audit` | Palette plus contrast gates, fails on drift |
60
+ | `bun run theme:build`| Rebuild `theme.css` from the source |
61
+ | `bun run theme:check`| Fail if committed theme outputs are stale |
62
+ | `bun run build` | Typecheck plus showcase build |
package/USAGE.md ADDED
@@ -0,0 +1,100 @@
1
+ # Using Astryx Styles
2
+
3
+ Three paths, same hexes. Pick one per site.
4
+
5
+ ## Get the kit
6
+
7
+ ```bash
8
+ git clone https://github.com/yuzu-octopus/astryx-dracula.git
9
+ ```
10
+
11
+ Copy what you need: `astryx-dracula.js` + `theme.css` (prebuilt), `astryx-theme.ts` (source),
12
+ `tokens.css` (plain CSS), `fonts/` into served `public/fonts/`. Re-pull to update; never fork the hexes per-site.
13
+
14
+ ## Prebuilt (recommended for Astryx apps)
15
+
16
+ Zero runtime cost. Built with `bun run theme:build` from `astryx-theme.ts`.
17
+
18
+ ```tsx
19
+ import { Theme } from '@astryxdesign/core/theme';
20
+ import { astryxDraculaTheme } from './astryx-dracula';
21
+ import './theme.css';
22
+
23
+ <Theme theme={astryxDraculaTheme} mode="dark">
24
+ <App />
25
+ </Theme>;
26
+ ```
27
+
28
+ After editing `astryx-theme.ts`, rebuild and verify freshness:
29
+
30
+ ```bash
31
+ bun run theme:build
32
+ bun run theme:check # fails if committed outputs are stale
33
+ ```
34
+
35
+ ## Runtime injection (prototyping)
36
+
37
+ ```tsx
38
+ import { Theme } from '@astryxdesign/core/theme';
39
+ import { astryxDraculaTheme } from '../astryx-theme';
40
+
41
+ <Theme theme={astryxDraculaTheme} mode="dark">
42
+ <App />
43
+ </Theme>;
44
+ ```
45
+
46
+ Entry setup (once, in `demo/main.tsx` style):
47
+
48
+ ```tsx
49
+ import '@astryxdesign/core/reset.css';
50
+ import '@astryxdesign/core/astryx.css';
51
+ import '../tokens.css';
52
+ ```
53
+
54
+ ## Plain CSS (any stack)
55
+
56
+ ```css
57
+ @import '../tokens.css';
58
+ ```
59
+
60
+ Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
61
+ `tokens.css` sets real `:root` values with `color-scheme: dark`, so first paint is correct with no runtime.
62
+
63
+ ## Migrating an existing site
64
+
65
+ 1. Inventory: grep for hex colors, `:root` blocks, Tailwind/StyleX utilities, and existing theme providers.
66
+ 2. Map every found color to `BRAND.md`. Unmappable colors are brand questions, not new hexes.
67
+ 3. Replace: delete the old theme provider and `:root` overrides, point imports at the kit prebuilt path, swap raw elements for Astryx components.
68
+ 4. Verify: build, screenshot key pages, confirm no stray hexes remain in `src/`.
69
+
70
+ ## Fonts
71
+
72
+ Copy `fonts/` to your app's served static dir (Vite: `public/fonts/`).
73
+ `tokens.css` declares the `@font-face` blocks; the theme sets JetBrains Mono
74
+ for body, heading, and code roles. Without the files, text falls back to
75
+ `monospace` — `bun run audit` fails when they are missing here.
76
+
77
+ ## Consumer Vite config
78
+
79
+ No special config needed. This kit follows the glimpse path: prebuilt
80
+ `@astryxdesign/core` CSS plus `<Theme>` injection. A stock Vite React
81
+ config works. The only recommended extra is the CSS layer-order snippet so
82
+ theme overrides beat component base styles (see `vite.config.ts` in this repo).
83
+
84
+ Advanced: custom `astryx theme build` pipelines need the full StyleX
85
+ source-compile setup. See the `/facebook/astryx` `apps/example-vite`
86
+ README. Not required for this kit.
87
+
88
+ ## Troubleshooting
89
+
90
+ - Unstyled components: entry is missing `reset.css`/`astryx.css` or the import order is wrong.
91
+ - Monospace fallback: `fonts/` not copied to served `public/fonts/`.
92
+ - Wrong colors after a theme edit: rebuild with `bun run theme:build`; `bun run theme:check` confirms staleness.
93
+ - Old `:root` `--color-*` overrides winning: delete them.
94
+
95
+ ## Rules
96
+
97
+ - Never invent hexes. New color need goes through `astryx-theme.ts` + audit, not a one-off.
98
+ - Never override `--color-*` in app `:root`. Brand changes live in `astryx-theme.ts` via `defineTheme`, then `bun run theme:build`.
99
+ - Tokens for every value: `var(--color-*|--space-*|--radius-*)`. No raw hex or px in components.
100
+ - Component styling: props first, then theme `components` overrides in `astryx-theme.ts`. No per-app CSS wars.
package/astryx-dracula.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * @generated by `astryx theme build` — do not edit manually.
3
+ * Source: astryx-theme.ts
4
+ * Command: astryx theme build astryx-theme.ts --out theme.css
5
+ * CLI: @astryxdesign/cli@0.3.0
6
+ * Core: @astryxdesign/core@0.3.0
7
+ */
8
+
9
+ /// <reference path="./astryx-dracula.variants.d.ts" />
10
+ import type { DefinedTheme } from '@astryxdesign/core/theme';
11
+ import type { IconRegistry } from '@astryxdesign/core/Icon';
12
+ export declare const draculaIconRegistry: IconRegistry;
13
+ export declare const astryxDraculaTheme: DefinedTheme;
package/astryx-dracula.js ADDED
@@ -0,0 +1,295 @@
1
+ /**
2
+ * @generated by `astryx theme build` — do not edit manually.
3
+ * Source: astryx-theme.ts
4
+ * Command: astryx theme build astryx-theme.ts --out theme.css
5
+ * CLI: @astryxdesign/cli@0.3.0
6
+ * Core: @astryxdesign/core@0.3.0
7
+ */
8
+
9
+ import { draculaIconRegistry } from './icons';
10
+ /**
11
+ * astryx-dracula theme — built by `bunx astryx theme build`
12
+ * Import the CSS file alongside this module:
13
+ *
14
+ * import { astryxDraculaTheme } from './astryx-dracula';
15
+ * import './astryx-dracula.css';
16
+ */
17
+ export const astryxDraculaTheme = {
18
+ name: 'astryx-dracula',
19
+ __built: true,
20
+ tokens: {
21
+ "--font-size-4xs": "0.3125rem",
22
+ "--font-size-3xs": "0.375rem",
23
+ "--font-size-2xs": "0.5rem",
24
+ "--font-size-xs": "0.5625rem",
25
+ "--font-size-sm": "0.6875rem",
26
+ "--font-size-base": "13px",
27
+ "--font-size-lg": "1rem",
28
+ "--font-size-xl": "1.1875rem",
29
+ "--font-size-2xl": "1.375rem",
30
+ "--font-size-3xl": "1.6875rem",
31
+ "--font-size-4xl": "2rem",
32
+ "--font-size-5xl": "2.4375rem",
33
+ "--text-heading-1-size": "var(--font-size-2xl)",
34
+ "--text-heading-1-weight": "var(--font-weight-normal)",
35
+ "--text-heading-1-leading": "1.4545",
36
+ "--text-heading-2-size": "var(--font-size-xl)",
37
+ "--text-heading-2-weight": "var(--font-weight-normal)",
38
+ "--text-heading-2-leading": "1.4737",
39
+ "--text-heading-3-size": "var(--font-size-lg)",
40
+ "--text-heading-3-weight": "var(--font-weight-normal)",
41
+ "--text-heading-3-leading": "1.5",
42
+ "--text-heading-4-size": "var(--font-size-base)",
43
+ "--text-heading-4-weight": "var(--font-weight-normal)",
44
+ "--text-heading-4-leading": "1.5385",
45
+ "--text-heading-5-size": "var(--font-size-sm)",
46
+ "--text-heading-5-weight": "var(--font-weight-normal)",
47
+ "--text-heading-5-leading": "1.4545",
48
+ "--text-heading-6-size": "var(--font-size-xs)",
49
+ "--text-heading-6-weight": "var(--font-weight-normal)",
50
+ "--text-heading-6-leading": "1.7778",
51
+ "--text-body-size": "var(--font-size-base)",
52
+ "--text-body-weight": "var(--font-weight-normal)",
53
+ "--text-body-leading": "1.5385",
54
+ "--text-large-size": "var(--font-size-lg)",
55
+ "--text-large-weight": "var(--font-weight-semibold)",
56
+ "--text-large-leading": "1.5",
57
+ "--text-label-size": "var(--font-size-base)",
58
+ "--text-label-weight": "var(--font-weight-medium)",
59
+ "--text-label-leading": "1.5385",
60
+ "--text-code-size": "var(--font-size-base)",
61
+ "--text-code-weight": "var(--font-weight-normal)",
62
+ "--text-code-leading": "1.5385",
63
+ "--text-supporting-size": "var(--font-size-sm)",
64
+ "--text-supporting-weight": "var(--font-weight-normal)",
65
+ "--text-supporting-leading": "1.4545",
66
+ "--text-display-1-size": "var(--font-size-5xl)",
67
+ "--text-display-1-weight": "var(--font-weight-normal)",
68
+ "--text-display-1-leading": "1.2308",
69
+ "--text-display-2-size": "var(--font-size-4xl)",
70
+ "--text-display-2-weight": "var(--font-weight-normal)",
71
+ "--text-display-2-leading": "1.25",
72
+ "--text-display-3-size": "var(--font-size-3xl)",
73
+ "--text-display-3-weight": "var(--font-weight-normal)",
74
+ "--text-display-3-leading": "1.3333",
75
+ "--duration-fast-min": "130ms",
76
+ "--duration-fast": "175ms",
77
+ "--duration-fast-max": "235ms",
78
+ "--duration-medium-min": "310ms",
79
+ "--duration-medium": "410ms",
80
+ "--duration-medium-max": "545ms",
81
+ "--duration-slow-min": "730ms",
82
+ "--duration-slow": "975ms",
83
+ "--duration-slow-max": "1300ms",
84
+ "--font-family-body": "\"JetBrains Mono\", monospace",
85
+ "--font-family-heading": "\"JetBrains Mono\", monospace",
86
+ "--font-family-code": "\"JetBrains Mono\", monospace",
87
+ "--color-syntax-keyword": "#FF79C6",
88
+ "--color-syntax-string": "#F1FA8C",
89
+ "--color-syntax-comment": "#6272A4",
90
+ "--color-syntax-number": "#FFB86C",
91
+ "--color-syntax-function": "#50FA7B",
92
+ "--color-syntax-type": "#8BE9FD",
93
+ "--color-syntax-variable": "#F8F8F2",
94
+ "--color-syntax-operator": "#FF79C6",
95
+ "--color-syntax-constant": "#FFB86C",
96
+ "--color-syntax-tag": "#FF79C6",
97
+ "--color-syntax-attribute": "#F1FA8C",
98
+ "--color-syntax-property": "#8BE9FD",
99
+ "--color-syntax-punctuation": "#F8F8F2",
100
+ "--color-syntax-background": "#282A36",
101
+ "--radius-inner": "4px",
102
+ "--radius-element": "5px",
103
+ "--radius-container": "5px",
104
+ "--radius-page": "5px",
105
+ "--font-size-h1": "17px",
106
+ "--font-size-h2": "16px",
107
+ "--font-size-h3": "15px",
108
+ "--font-size-h4": "14px",
109
+ "--font-size-h5": "12px",
110
+ "--font-size-h6": "11px",
111
+ "--shadow-low": "0 2px 4px #191A210D, 0 4px 8px #191A211A",
112
+ "--shadow-med": "0 2px 4px #191A210D, 0 4px 12px #191A211A",
113
+ "--shadow-high": "0 4px 6px #191A211A, 0 12px 24px #191A2126",
114
+ "--shadow-inset-hover": "inset 0px 0px 0px 2px #6272A430",
115
+ "--shadow-inset-success": "inset 0px 0px 0px 2px #50FA7B30",
116
+ "--shadow-inset-warning": "inset 0px 0px 0px 2px #F1FA8C30",
117
+ "--shadow-inset-error": "inset 0px 0px 0px 2px #FF555530",
118
+ "--color-neutral": "light-dark(#F8F8F21A, #F8F8F21A)",
119
+ "--color-background-inverted": "light-dark(#F8F8F2, #F8F8F2)",
120
+ "--color-background-error-inverted": "light-dark(#FFD5CC, #FFD5CC)",
121
+ "--color-accent-muted": "var(--color-background-purple)",
122
+ "--color-success-muted": "var(--color-background-green)",
123
+ "--color-warning-muted": "var(--color-background-yellow)",
124
+ "--color-error-muted": "var(--color-background-red)",
125
+ "--color-info-muted": "var(--color-background-cyan)",
126
+ "--space-gap": "23px",
127
+ "--space-viewport": "15px",
128
+ "--widget-content-vertical": "15px",
129
+ "--widget-content-horizontal": "17px",
130
+ "--widget-gap": "23px",
131
+ "--tile-row": "96px",
132
+ "--border-radius": "5px",
133
+ "--color-background-body": "light-dark(#282A36, #282A36)",
134
+ "--color-background-surface": "light-dark(#343746, #343746)",
135
+ "--color-background-card": "light-dark(#343746, #343746)",
136
+ "--color-background-popover": "light-dark(#424450, #424450)",
137
+ "--color-background-muted": "light-dark(#44475A, #44475A)",
138
+ "--color-overlay": "light-dark(#191A21CC, #191A21CC)",
139
+ "--color-overlay-hover": "light-dark(#353747, #353747)",
140
+ "--color-overlay-pressed": "light-dark(#44475A, #44475A)",
141
+ "--color-border": "light-dark(#6272A4, #6272A4)",
142
+ "--color-border-emphasized": "light-dark(#6272A4, #6272A4)",
143
+ "--color-accent": "light-dark(#BD93F9, #BD93F9)",
144
+ "--color-success": "light-dark(#50FA7B, #50FA7B)",
145
+ "--color-error": "light-dark(#FF5555, #FF5555)",
146
+ "--color-warning": "light-dark(#F1FA8C, #F1FA8C)",
147
+ "--color-info": "light-dark(#8BE9FD, #8BE9FD)",
148
+ "--color-text-primary": "light-dark(#F8F8F2, #F8F8F2)",
149
+ "--color-text-secondary": "light-dark(#9AA1BC, #9AA1BC)",
150
+ "--color-text-disabled": "light-dark(#6272A4, #6272A4)",
151
+ "--color-text-accent": "light-dark(#BD93F9, #BD93F9)",
152
+ "--color-icon-primary": "light-dark(#F8F8F2, #F8F8F2)",
153
+ "--color-icon-secondary": "light-dark(#9AA1BC, #9AA1BC)",
154
+ "--color-icon-disabled": "light-dark(#6272A4, #6272A4)",
155
+ "--color-icon-accent": "light-dark(#BD93F9, #BD93F9)",
156
+ "--color-on-accent": "light-dark(#21222C, #21222C)",
157
+ "--color-on-success": "light-dark(#21222C, #21222C)",
158
+ "--color-on-warning": "light-dark(#21222C, #21222C)",
159
+ "--color-on-error": "light-dark(#21222C, #21222C)",
160
+ "--color-on-info": "light-dark(#21222C, #21222C)",
161
+ "--color-track": "light-dark(#6272A4, #6272A4)",
162
+ "--color-skeleton": "light-dark(#6272A4, #6272A4)",
163
+ "--color-functional-red": "light-dark(#DE5735, #DE5735)",
164
+ "--color-functional-orange": "light-dark(#A39514, #A39514)",
165
+ "--color-functional-green": "light-dark(#089108, #089108)",
166
+ "--color-functional-cyan": "light-dark(#0081D6, #0081D6)",
167
+ "--color-functional-purple": "light-dark(#815CD6, #815CD6)",
168
+ "--color-data-categorical-blue": "light-dark(#6272A4, #6272A4)",
169
+ "--color-data-categorical-orange": "light-dark(#FFB86C, #FFB86C)",
170
+ "--color-data-categorical-purple": "light-dark(#BD93F9, #BD93F9)",
171
+ "--color-data-categorical-green": "light-dark(#50FA7B, #50FA7B)",
172
+ "--color-data-categorical-pink": "light-dark(#FF79C6, #FF79C6)",
173
+ "--color-data-categorical-cyan": "light-dark(#8BE9FD, #8BE9FD)",
174
+ "--color-data-categorical-red": "light-dark(#FF5555, #FF5555)",
175
+ "--color-data-categorical-teal": "light-dark(#A4FFFF, #A4FFFF)",
176
+ "--color-data-categorical-brown": "light-dark(#FFB86C, #FFB86C)",
177
+ "--color-data-categorical-indigo": "light-dark(#D6ACFF, #D6ACFF)",
178
+ "--color-background-blue": "light-dark(#6272A41A, #6272A41A)",
179
+ "--color-border-blue": "light-dark(#6272A44D, #6272A44D)",
180
+ "--color-icon-blue": "light-dark(#6272A4, #6272A4)",
181
+ "--color-text-blue": "light-dark(#6272A4, #6272A4)",
182
+ "--color-background-cyan": "light-dark(#8BE9FD1A, #8BE9FD1A)",
183
+ "--color-border-cyan": "light-dark(#8BE9FD4D, #8BE9FD4D)",
184
+ "--color-icon-cyan": "light-dark(#8BE9FD, #8BE9FD)",
185
+ "--color-text-cyan": "light-dark(#8BE9FD, #8BE9FD)",
186
+ "--color-background-gray": "light-dark(#9AA1BC1A, #9AA1BC1A)",
187
+ "--color-border-gray": "light-dark(#9AA1BC4D, #9AA1BC4D)",
188
+ "--color-icon-gray": "light-dark(#9AA1BC, #9AA1BC)",
189
+ "--color-text-gray": "light-dark(#9AA1BC, #9AA1BC)",
190
+ "--color-background-green": "light-dark(#50FA7B1A, #50FA7B1A)",
191
+ "--color-border-green": "light-dark(#50FA7B4D, #50FA7B4D)",
192
+ "--color-icon-green": "light-dark(#50FA7B, #50FA7B)",
193
+ "--color-text-green": "light-dark(#50FA7B, #50FA7B)",
194
+ "--color-background-orange": "light-dark(#FFB86C1A, #FFB86C1A)",
195
+ "--color-border-orange": "light-dark(#FFB86C4D, #FFB86C4D)",
196
+ "--color-icon-orange": "light-dark(#FFB86C, #FFB86C)",
197
+ "--color-text-orange": "light-dark(#FFB86C, #FFB86C)",
198
+ "--color-background-pink": "light-dark(#FF79C61A, #FF79C61A)",
199
+ "--color-border-pink": "light-dark(#FF79C64D, #FF79C64D)",
200
+ "--color-icon-pink": "light-dark(#FF79C6, #FF79C6)",
201
+ "--color-text-pink": "light-dark(#FF79C6, #FF79C6)",
202
+ "--color-background-purple": "light-dark(#BD93F91A, #BD93F91A)",
203
+ "--color-border-purple": "light-dark(#BD93F94D, #BD93F94D)",
204
+ "--color-icon-purple": "light-dark(#BD93F9, #BD93F9)",
205
+ "--color-text-purple": "light-dark(#BD93F9, #BD93F9)",
206
+ "--color-background-red": "light-dark(#FF55551A, #FF55551A)",
207
+ "--color-border-red": "light-dark(#FF55554D, #FF55554D)",
208
+ "--color-icon-red": "light-dark(#FF5555, #FF5555)",
209
+ "--color-text-red": "light-dark(#FF5555, #FF5555)",
210
+ "--color-background-teal": "light-dark(#A4FFFF1A, #A4FFFF1A)",
211
+ "--color-border-teal": "light-dark(#A4FFFF4D, #A4FFFF4D)",
212
+ "--color-icon-teal": "light-dark(#A4FFFF, #A4FFFF)",
213
+ "--color-text-teal": "light-dark(#A4FFFF, #A4FFFF)",
214
+ "--color-background-yellow": "light-dark(#F1FA8C1A, #F1FA8C1A)",
215
+ "--color-border-yellow": "light-dark(#F1FA8C4D, #F1FA8C4D)",
216
+ "--color-icon-yellow": "light-dark(#F1FA8C, #F1FA8C)",
217
+ "--color-text-yellow": "light-dark(#F1FA8C, #F1FA8C)",
218
+ "--color-data-purple-5": "light-dark(hsl(264.71 89.47% 28%), hsl(264.71 89.47% 28%))",
219
+ "--color-data-purple-4": "light-dark(hsl(264.71 89.47% 44%), hsl(264.71 89.47% 44%))",
220
+ "--color-data-purple-3": "light-dark(hsl(264.71 89.47% 60%), hsl(264.71 89.47% 60%))",
221
+ "--color-data-purple-2": "light-dark(hsl(264.71 89.47% 74%), hsl(264.71 89.47% 74%))",
222
+ "--color-data-purple-1": "light-dark(hsl(264.71 89.47% 88%), hsl(264.71 89.47% 88%))",
223
+ "--color-data-pink-5": "light-dark(hsl(325.52 100% 28%), hsl(325.52 100% 28%))",
224
+ "--color-data-pink-4": "light-dark(hsl(325.52 100% 44%), hsl(325.52 100% 44%))",
225
+ "--color-data-pink-3": "light-dark(hsl(325.52 100% 60%), hsl(325.52 100% 60%))",
226
+ "--color-data-pink-2": "light-dark(hsl(325.52 100% 74%), hsl(325.52 100% 74%))",
227
+ "--color-data-pink-1": "light-dark(hsl(325.52 100% 88%), hsl(325.52 100% 88%))",
228
+ "--color-data-red-5": "light-dark(hsl(0 100% 28%), hsl(0 100% 28%))",
229
+ "--color-data-red-4": "light-dark(hsl(0 100% 44%), hsl(0 100% 44%))",
230
+ "--color-data-red-3": "light-dark(hsl(0 100% 60%), hsl(0 100% 60%))",
231
+ "--color-data-red-2": "light-dark(hsl(0 100% 74%), hsl(0 100% 74%))",
232
+ "--color-data-red-1": "light-dark(hsl(0 100% 88%), hsl(0 100% 88%))",
233
+ "--color-data-orange-5": "light-dark(hsl(31.02 100% 28%), hsl(31.02 100% 28%))",
234
+ "--color-data-orange-4": "light-dark(hsl(31.02 100% 44%), hsl(31.02 100% 44%))",
235
+ "--color-data-orange-3": "light-dark(hsl(31.02 100% 60%), hsl(31.02 100% 60%))",
236
+ "--color-data-orange-2": "light-dark(hsl(31.02 100% 74%), hsl(31.02 100% 74%))",
237
+ "--color-data-orange-1": "light-dark(hsl(31.02 100% 88%), hsl(31.02 100% 88%))",
238
+ "--color-data-yellow-5": "light-dark(hsl(64.91 91.67% 28%), hsl(64.91 91.67% 28%))",
239
+ "--color-data-yellow-4": "light-dark(hsl(64.91 91.67% 44%), hsl(64.91 91.67% 44%))",
240
+ "--color-data-yellow-3": "light-dark(hsl(64.91 91.67% 60%), hsl(64.91 91.67% 60%))",
241
+ "--color-data-yellow-2": "light-dark(hsl(64.91 91.67% 74%), hsl(64.91 91.67% 74%))",
242
+ "--color-data-yellow-1": "light-dark(hsl(64.91 91.67% 88%), hsl(64.91 91.67% 88%))",
243
+ "--color-data-teal-5": "light-dark(hsl(190.53 96.61% 28%), hsl(190.53 96.61% 28%))",
244
+ "--color-data-teal-4": "light-dark(hsl(190.53 96.61% 44%), hsl(190.53 96.61% 44%))",
245
+ "--color-data-teal-3": "light-dark(hsl(190.53 96.61% 60%), hsl(190.53 96.61% 60%))",
246
+ "--color-data-teal-2": "light-dark(hsl(190.53 96.61% 74%), hsl(190.53 96.61% 74%))",
247
+ "--color-data-teal-1": "light-dark(hsl(190.53 96.61% 88%), hsl(190.53 96.61% 88%))",
248
+ "--color-data-blue-5": "light-dark(hsl(225.45 26.61% 28%), hsl(225.45 26.61% 28%))",
249
+ "--color-data-blue-4": "light-dark(hsl(225.45 26.61% 44%), hsl(225.45 26.61% 44%))",
250
+ "--color-data-blue-3": "light-dark(hsl(225.45 26.61% 60%), hsl(225.45 26.61% 60%))",
251
+ "--color-data-blue-2": "light-dark(hsl(225.45 26.61% 74%), hsl(225.45 26.61% 74%))",
252
+ "--color-data-blue-1": "light-dark(hsl(225.45 26.61% 88%), hsl(225.45 26.61% 88%))",
253
+ "--color-data-shamrock-5": "light-dark(hsl(135.18 94.44% 28%), hsl(135.18 94.44% 28%))",
254
+ "--color-data-shamrock-4": "light-dark(hsl(135.18 94.44% 44%), hsl(135.18 94.44% 44%))",
255
+ "--color-data-shamrock-3": "light-dark(hsl(135.18 94.44% 60%), hsl(135.18 94.44% 60%))",
256
+ "--color-data-shamrock-2": "light-dark(hsl(135.18 94.44% 74%), hsl(135.18 94.44% 74%))",
257
+ "--color-data-shamrock-1": "light-dark(hsl(135.18 94.44% 88%), hsl(135.18 94.44% 88%))",
258
+ "--color-data-gray-5": "light-dark(hsl(231.43 14.89% 28%), hsl(231.43 14.89% 28%))",
259
+ "--color-data-gray-4": "light-dark(hsl(231.43 14.89% 44%), hsl(231.43 14.89% 44%))",
260
+ "--color-data-gray-3": "light-dark(hsl(231.43 14.89% 60%), hsl(231.43 14.89% 60%))",
261
+ "--color-data-gray-2": "light-dark(hsl(231.43 14.89% 74%), hsl(231.43 14.89% 74%))",
262
+ "--color-data-gray-1": "light-dark(hsl(231.43 14.89% 88%), hsl(231.43 14.89% 88%))",
263
+ "--color-background": "light-dark(#282A36, #282A36)",
264
+ "--color-widget-background": "light-dark(#343746, #343746)",
265
+ "--color-widget-content-border": "light-dark(#6272A4, #6272A4)",
266
+ "--color-widget-background-highlight": "light-dark(#44475A, #44475A)",
267
+ "--color-separator": "light-dark(#44475A, #44475A)",
268
+ "--color-popover-background": "light-dark(#424450, #424450)",
269
+ "--color-popover-border": "light-dark(#6272A4, #6272A4)",
270
+ "--color-progress-border": "light-dark(#44475A, #44475A)",
271
+ "--color-progress-value": "light-dark(#6272A4, #6272A4)",
272
+ "--color-vertical-progress-value": "light-dark(#6272A4, #6272A4)",
273
+ "--color-graph-gridlines": "light-dark(#44475A, #44475A)",
274
+ "--color-widget-shadow": "light-dark(#21222C, #21222C)",
275
+ "--color-text-highlight": "light-dark(#F8F8F2, #F8F8F2)",
276
+ "--color-text-paragraph": "light-dark(#B0B3C4, #B0B3C4)",
277
+ "--color-text-base": "light-dark(#9AA1BC, #9AA1BC)",
278
+ "--color-text-base-muted": "light-dark(#8288A6, #8288A6)",
279
+ "--color-text-subdue": "light-dark(#4C5067, #4C5067)",
280
+ "--color-current-line": "light-dark(#6272A4, #6272A4)",
281
+ "--color-selection": "light-dark(#44475A, #44475A)",
282
+ "--color-primary": "light-dark(#BD93F9, #BD93F9)",
283
+ "--color-positive": "light-dark(#50FA7B, #50FA7B)",
284
+ "--color-negative": "light-dark(#FF5555, #FF5555)",
285
+ "--color-tag-orange": "light-dark(#FFB86C, #FFB86C)",
286
+ "--color-tag-pink": "light-dark(#FF79C6, #FF79C6)",
287
+ "--color-tag-cyan": "light-dark(#8BE9FD, #8BE9FD)",
288
+ "--color-tag-yellow": "light-dark(#F1FA8C, #F1FA8C)",
289
+ "--color-tag-green": "light-dark(#50FA7B, #50FA7B)",
290
+ "--color-tag-blue": "light-dark(#BD93F9, #BD93F9)"
291
+ },
292
+ icons: draculaIconRegistry,
293
+ };
294
+
295
+ export { draculaIconRegistry };
package/astryx-dracula.variants.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * @generated by `astryx theme build` — do not edit manually.
3
+ * Source: astryx-theme.ts
4
+ * Command: astryx theme build astryx-theme.ts --out theme.css
5
+ * CLI: @astryxdesign/cli@0.3.0
6
+ * Core: @astryxdesign/core@0.3.0
7
+ */
8
+
9
+ // Generated by astryx theme build
10
+ export {};
11
+
12
+ declare module '@astryxdesign/core/ProgressBar' {
13
+ interface ProgressBarVariantMap {
14
+ 'accent': true;
15
+ 'success': true;
16
+ 'warning': true;
17
+ 'error': true;
18
+ }
19
+ }