astryx-dracula 0.1.2 → 0.1.3

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 (5) hide show
  1. package/BRAND.md +1 -1
  2. package/USAGE.md +33 -4
  3. package/astryx-dracula.js +30 -30
  4. package/package.json +1 -1
  5. package/theme.css +39 -39
package/BRAND.md CHANGED
@@ -74,4 +74,4 @@ Radii flat and crisp (5px elements, 4px inner). Everything below is a core defau
74
74
 
75
75
  ## Dims
76
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.
77
+ Gap 23px, viewport 15px, content 15px vertical / 17px horizontal, widget-gap 23px, tile-row 96px, radius 5px everywhere, JetBrains Mono, type scale base 14 ratio 1.2: h1 24 / h2 20 / h3 17 / h4 14 / body 14 / supporting 12 / h6 10. Outer Card padding 4, nested inset 3.
package/USAGE.md CHANGED
@@ -17,9 +17,12 @@ Or clone `https://github.com/yuzu-octopus/astryx-dracula.git` and copy
17
17
  Zero runtime cost. Built with `bun run theme:build` from `astryx-theme.ts`.
18
18
 
19
19
  ```tsx
20
+ import '@astryxdesign/core/reset.css';
21
+ import '@astryxdesign/core/astryx.css';
22
+ import 'astryx-dracula/tokens.css';
23
+ import 'astryx-dracula/theme.css';
20
24
  import { Theme } from '@astryxdesign/core/theme';
21
- import { astryxDraculaTheme } from './astryx-dracula';
22
- import './theme.css';
25
+ import { astryxDraculaTheme } from 'astryx-dracula';
23
26
 
24
27
  <Theme theme={astryxDraculaTheme} mode="dark">
25
28
  <App />
@@ -55,7 +58,7 @@ import '../tokens.css';
55
58
  ## Plain CSS (any stack)
56
59
 
57
60
  ```css
58
- @import '../tokens.css';
61
+ @import 'astryx-dracula/tokens.css';
59
62
  ```
60
63
 
61
64
  Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
@@ -80,7 +83,33 @@ for body, heading, and code roles. Without the files, text falls back to
80
83
  No special config needed. This kit follows the glimpse path: prebuilt
81
84
  `@astryxdesign/core` CSS plus `<Theme>` injection. A stock Vite React
82
85
  config works. The only recommended extra is the CSS layer-order snippet so
83
- theme overrides beat component base styles (see `vite.config.ts` in this repo).
86
+ theme overrides beat component base styles (our repo `vite.config.ts` also
87
+ sets a demo-only `base` path; do not copy that):
88
+
89
+ ```ts
90
+ // vite.config.ts
91
+ import { defineConfig } from 'vite';
92
+ import react from '@vitejs/plugin-react';
93
+
94
+ export default defineConfig({
95
+ plugins: [
96
+ {
97
+ name: 'astryx-css-layer-order',
98
+ transformIndexHtml() {
99
+ return [
100
+ {
101
+ tag: 'style',
102
+ children:
103
+ '@layer reset, priority1, priority2, priority3, priority4, priority5, priority6, priority7, priority8, priority9, astryx-theme;',
104
+ injectTo: 'head-prepend',
105
+ },
106
+ ];
107
+ },
108
+ },
109
+ react(),
110
+ ],
111
+ });
112
+ ```
84
113
 
85
114
  Advanced: custom `astryx theme build` pipelines need the full StyleX
86
115
  source-compile setup. See the `/facebook/astryx` `apps/example-vite`
package/astryx-dracula.js CHANGED
@@ -18,60 +18,60 @@ export const astryxDraculaTheme = {
18
18
  name: 'astryx-dracula',
19
19
  __built: true,
20
20
  tokens: {
21
- "--font-size-4xs": "0.3125rem",
22
- "--font-size-3xs": "0.375rem",
21
+ "--font-size-4xs": "0.375rem",
22
+ "--font-size-3xs": "0.4375rem",
23
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",
24
+ "--font-size-xs": "0.625rem",
25
+ "--font-size-sm": "0.75rem",
26
+ "--font-size-base": "14px",
27
+ "--font-size-lg": "1.0625rem",
28
+ "--font-size-xl": "1.25rem",
29
+ "--font-size-2xl": "1.5rem",
30
+ "--font-size-3xl": "1.8125rem",
31
+ "--font-size-4xl": "2.1875rem",
32
+ "--font-size-5xl": "2.625rem",
33
33
  "--text-heading-1-size": "var(--font-size-2xl)",
34
34
  "--text-heading-1-weight": "var(--font-weight-normal)",
35
- "--text-heading-1-leading": "1.4545",
35
+ "--text-heading-1-leading": "1.3333",
36
36
  "--text-heading-2-size": "var(--font-size-xl)",
37
37
  "--text-heading-2-weight": "var(--font-weight-normal)",
38
- "--text-heading-2-leading": "1.4737",
38
+ "--text-heading-2-leading": "1.4",
39
39
  "--text-heading-3-size": "var(--font-size-lg)",
40
40
  "--text-heading-3-weight": "var(--font-weight-normal)",
41
- "--text-heading-3-leading": "1.5",
41
+ "--text-heading-3-leading": "1.4118",
42
42
  "--text-heading-4-size": "var(--font-size-base)",
43
43
  "--text-heading-4-weight": "var(--font-weight-normal)",
44
- "--text-heading-4-leading": "1.5385",
44
+ "--text-heading-4-leading": "1.4286",
45
45
  "--text-heading-5-size": "var(--font-size-sm)",
46
46
  "--text-heading-5-weight": "var(--font-weight-normal)",
47
- "--text-heading-5-leading": "1.4545",
47
+ "--text-heading-5-leading": "1.6667",
48
48
  "--text-heading-6-size": "var(--font-size-xs)",
49
49
  "--text-heading-6-weight": "var(--font-weight-normal)",
50
- "--text-heading-6-leading": "1.7778",
50
+ "--text-heading-6-leading": "1.6",
51
51
  "--text-body-size": "var(--font-size-base)",
52
52
  "--text-body-weight": "var(--font-weight-normal)",
53
- "--text-body-leading": "1.5385",
53
+ "--text-body-leading": "1.4286",
54
54
  "--text-large-size": "var(--font-size-lg)",
55
55
  "--text-large-weight": "var(--font-weight-semibold)",
56
- "--text-large-leading": "1.5",
56
+ "--text-large-leading": "1.4118",
57
57
  "--text-label-size": "var(--font-size-base)",
58
58
  "--text-label-weight": "var(--font-weight-medium)",
59
- "--text-label-leading": "1.5385",
59
+ "--text-label-leading": "1.4286",
60
60
  "--text-code-size": "var(--font-size-base)",
61
61
  "--text-code-weight": "var(--font-weight-normal)",
62
- "--text-code-leading": "1.5385",
62
+ "--text-code-leading": "1.4286",
63
63
  "--text-supporting-size": "var(--font-size-sm)",
64
64
  "--text-supporting-weight": "var(--font-weight-normal)",
65
- "--text-supporting-leading": "1.4545",
65
+ "--text-supporting-leading": "1.6667",
66
66
  "--text-display-1-size": "var(--font-size-5xl)",
67
67
  "--text-display-1-weight": "var(--font-weight-normal)",
68
- "--text-display-1-leading": "1.2308",
68
+ "--text-display-1-leading": "1.2381",
69
69
  "--text-display-2-size": "var(--font-size-4xl)",
70
70
  "--text-display-2-weight": "var(--font-weight-normal)",
71
- "--text-display-2-leading": "1.25",
71
+ "--text-display-2-leading": "1.2571",
72
72
  "--text-display-3-size": "var(--font-size-3xl)",
73
73
  "--text-display-3-weight": "var(--font-weight-normal)",
74
- "--text-display-3-leading": "1.3333",
74
+ "--text-display-3-leading": "1.3793",
75
75
  "--duration-fast-min": "130ms",
76
76
  "--duration-fast": "175ms",
77
77
  "--duration-fast-max": "235ms",
@@ -102,12 +102,12 @@ export const astryxDraculaTheme = {
102
102
  "--radius-element": "5px",
103
103
  "--radius-container": "5px",
104
104
  "--radius-page": "5px",
105
- "--font-size-h1": "17px",
106
- "--font-size-h2": "16px",
107
- "--font-size-h3": "15px",
105
+ "--font-size-h1": "24px",
106
+ "--font-size-h2": "20px",
107
+ "--font-size-h3": "16px",
108
108
  "--font-size-h4": "14px",
109
- "--font-size-h5": "12px",
110
- "--font-size-h6": "11px",
109
+ "--font-size-h5": "13px",
110
+ "--font-size-h6": "12px",
111
111
  "--shadow-low": "0 2px 4px #191A210D, 0 4px 8px #191A211A",
112
112
  "--shadow-med": "0 2px 4px #191A210D, 0 4px 12px #191A211A",
113
113
  "--shadow-high": "0 4px 6px #191A211A, 0 12px 24px #191A2126",
package/package.json CHANGED
@@ -62,5 +62,5 @@
62
62
  "@astryxdesign/cli"
63
63
  ],
64
64
  "type": "module",
65
- "version": "0.1.2"
65
+ "version": "0.1.3"
66
66
  }
package/theme.css CHANGED
@@ -16,58 +16,58 @@
16
16
  :where(h1) {
17
17
  font-size: var(--font-size-2xl);
18
18
  font-weight: var(--font-weight-normal);
19
- line-height: 1.4545;
19
+ line-height: 1.3333;
20
20
  }
21
21
 
22
22
  :where(h2) {
23
23
  font-size: var(--font-size-xl);
24
24
  font-weight: var(--font-weight-normal);
25
- line-height: 1.4737;
25
+ line-height: 1.4;
26
26
  }
27
27
 
28
28
  :where(h3) {
29
29
  font-size: var(--font-size-lg);
30
30
  font-weight: var(--font-weight-normal);
31
- line-height: 1.5;
31
+ line-height: 1.4118;
32
32
  }
33
33
 
34
34
  :where(h4) {
35
35
  font-size: var(--font-size-base);
36
36
  font-weight: var(--font-weight-normal);
37
- line-height: 1.5385;
37
+ line-height: 1.4286;
38
38
  }
39
39
 
40
40
  :where(h5) {
41
41
  font-size: var(--font-size-sm);
42
42
  font-weight: var(--font-weight-normal);
43
- line-height: 1.4545;
43
+ line-height: 1.6667;
44
44
  }
45
45
 
46
46
  :where(h6) {
47
47
  font-size: var(--font-size-xs);
48
48
  font-weight: var(--font-weight-normal);
49
- line-height: 1.7778;
49
+ line-height: 1.6;
50
50
  }
51
51
 
52
52
  :where(p) {
53
53
  font-family: var(--font-family-body);
54
54
  font-size: var(--font-size-base);
55
55
  font-weight: var(--font-weight-normal);
56
- line-height: 1.5385;
56
+ line-height: 1.4286;
57
57
  color: var(--color-text-primary);
58
58
  }
59
59
 
60
60
  :where(small) {
61
61
  font-size: var(--font-size-sm);
62
62
  font-weight: var(--font-weight-normal);
63
- line-height: 1.4545;
63
+ line-height: 1.6667;
64
64
  color: var(--color-text-secondary);
65
65
  }
66
66
 
67
67
  :where(code, pre) {
68
68
  font-family: var(--font-family-code);
69
69
  font-size: var(--font-size-base);
70
- line-height: 1.5385;
70
+ line-height: 1.4286;
71
71
  }
72
72
 
73
73
  :where(hr) {
@@ -84,60 +84,60 @@
84
84
 
85
85
  @scope ([data-astryx-theme="astryx-dracula"]) to ([data-astryx-theme]) {
86
86
  :scope {
87
- --font-size-4xs: 0.3125rem;
88
- --font-size-3xs: 0.375rem;
87
+ --font-size-4xs: 0.375rem;
88
+ --font-size-3xs: 0.4375rem;
89
89
  --font-size-2xs: 0.5rem;
90
- --font-size-xs: 0.5625rem;
91
- --font-size-sm: 0.6875rem;
92
- --font-size-base: 13px;
93
- --font-size-lg: 1rem;
94
- --font-size-xl: 1.1875rem;
95
- --font-size-2xl: 1.375rem;
96
- --font-size-3xl: 1.6875rem;
97
- --font-size-4xl: 2rem;
98
- --font-size-5xl: 2.4375rem;
90
+ --font-size-xs: 0.625rem;
91
+ --font-size-sm: 0.75rem;
92
+ --font-size-base: 14px;
93
+ --font-size-lg: 1.0625rem;
94
+ --font-size-xl: 1.25rem;
95
+ --font-size-2xl: 1.5rem;
96
+ --font-size-3xl: 1.8125rem;
97
+ --font-size-4xl: 2.1875rem;
98
+ --font-size-5xl: 2.625rem;
99
99
  --text-heading-1-size: var(--font-size-2xl);
100
100
  --text-heading-1-weight: var(--font-weight-normal);
101
- --text-heading-1-leading: 1.4545;
101
+ --text-heading-1-leading: 1.3333;
102
102
  --text-heading-2-size: var(--font-size-xl);
103
103
  --text-heading-2-weight: var(--font-weight-normal);
104
- --text-heading-2-leading: 1.4737;
104
+ --text-heading-2-leading: 1.4;
105
105
  --text-heading-3-size: var(--font-size-lg);
106
106
  --text-heading-3-weight: var(--font-weight-normal);
107
- --text-heading-3-leading: 1.5;
107
+ --text-heading-3-leading: 1.4118;
108
108
  --text-heading-4-size: var(--font-size-base);
109
109
  --text-heading-4-weight: var(--font-weight-normal);
110
- --text-heading-4-leading: 1.5385;
110
+ --text-heading-4-leading: 1.4286;
111
111
  --text-heading-5-size: var(--font-size-sm);
112
112
  --text-heading-5-weight: var(--font-weight-normal);
113
- --text-heading-5-leading: 1.4545;
113
+ --text-heading-5-leading: 1.6667;
114
114
  --text-heading-6-size: var(--font-size-xs);
115
115
  --text-heading-6-weight: var(--font-weight-normal);
116
- --text-heading-6-leading: 1.7778;
116
+ --text-heading-6-leading: 1.6;
117
117
  --text-body-size: var(--font-size-base);
118
118
  --text-body-weight: var(--font-weight-normal);
119
- --text-body-leading: 1.5385;
119
+ --text-body-leading: 1.4286;
120
120
  --text-large-size: var(--font-size-lg);
121
121
  --text-large-weight: var(--font-weight-semibold);
122
- --text-large-leading: 1.5;
122
+ --text-large-leading: 1.4118;
123
123
  --text-label-size: var(--font-size-base);
124
124
  --text-label-weight: var(--font-weight-medium);
125
- --text-label-leading: 1.5385;
125
+ --text-label-leading: 1.4286;
126
126
  --text-code-size: var(--font-size-base);
127
127
  --text-code-weight: var(--font-weight-normal);
128
- --text-code-leading: 1.5385;
128
+ --text-code-leading: 1.4286;
129
129
  --text-supporting-size: var(--font-size-sm);
130
130
  --text-supporting-weight: var(--font-weight-normal);
131
- --text-supporting-leading: 1.4545;
131
+ --text-supporting-leading: 1.6667;
132
132
  --text-display-1-size: var(--font-size-5xl);
133
133
  --text-display-1-weight: var(--font-weight-normal);
134
- --text-display-1-leading: 1.2308;
134
+ --text-display-1-leading: 1.2381;
135
135
  --text-display-2-size: var(--font-size-4xl);
136
136
  --text-display-2-weight: var(--font-weight-normal);
137
- --text-display-2-leading: 1.25;
137
+ --text-display-2-leading: 1.2571;
138
138
  --text-display-3-size: var(--font-size-3xl);
139
139
  --text-display-3-weight: var(--font-weight-normal);
140
- --text-display-3-leading: 1.3333;
140
+ --text-display-3-leading: 1.3793;
141
141
  --duration-fast-min: 130ms;
142
142
  --duration-fast: 175ms;
143
143
  --duration-fast-max: 235ms;
@@ -168,12 +168,12 @@
168
168
  --radius-element: 5px;
169
169
  --radius-container: 5px;
170
170
  --radius-page: 5px;
171
- --font-size-h1: 17px;
172
- --font-size-h2: 16px;
173
- --font-size-h3: 15px;
171
+ --font-size-h1: 24px;
172
+ --font-size-h2: 20px;
173
+ --font-size-h3: 16px;
174
174
  --font-size-h4: 14px;
175
- --font-size-h5: 12px;
176
- --font-size-h6: 11px;
175
+ --font-size-h5: 13px;
176
+ --font-size-h6: 12px;
177
177
  --shadow-low: 0 2px 4px #191A210D, 0 4px 8px #191A211A;
178
178
  --shadow-med: 0 2px 4px #191A210D, 0 4px 12px #191A211A;
179
179
  --shadow-high: 0 4px 6px #191A211A, 0 12px 24px #191A2126;