astryx-dracula 0.1.0 → 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.
- package/BRAND.md +1 -1
- package/USAGE.md +37 -7
- package/astryx-dracula.js +32 -32
- package/package.json +5 -2
- package/theme.css +41 -41
- package/tokens.css +30 -0
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
|
|
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
|
@@ -5,20 +5,24 @@ Three paths, same hexes. Pick one per site.
|
|
|
5
5
|
## Get the kit
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
bun add astryx-dracula
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
`tokens.css` (plain CSS), `fonts/` into served
|
|
11
|
+
Or clone `https://github.com/yuzu-octopus/astryx-dracula.git` and copy
|
|
12
|
+
`astryx-dracula.js` + `theme.css` (prebuilt), `tokens.css` (plain CSS), `fonts/` into served
|
|
13
|
+
`public/fonts/`. Update with a version bump; never fork the hexes per-site.
|
|
13
14
|
|
|
14
15
|
## Prebuilt (recommended for Astryx apps)
|
|
15
16
|
|
|
16
17
|
Zero runtime cost. Built with `bun run theme:build` from `astryx-theme.ts`.
|
|
17
18
|
|
|
18
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';
|
|
19
24
|
import { Theme } from '@astryxdesign/core/theme';
|
|
20
|
-
import { astryxDraculaTheme } from '
|
|
21
|
-
import './theme.css';
|
|
25
|
+
import { astryxDraculaTheme } from 'astryx-dracula';
|
|
22
26
|
|
|
23
27
|
<Theme theme={astryxDraculaTheme} mode="dark">
|
|
24
28
|
<App />
|
|
@@ -54,7 +58,7 @@ import '../tokens.css';
|
|
|
54
58
|
## Plain CSS (any stack)
|
|
55
59
|
|
|
56
60
|
```css
|
|
57
|
-
@import '
|
|
61
|
+
@import 'astryx-dracula/tokens.css';
|
|
58
62
|
```
|
|
59
63
|
|
|
60
64
|
Then use `var(--color-primary)`, `var(--dracula-purple)`, `var(--space-gap)`.
|
|
@@ -79,7 +83,33 @@ for body, heading, and code roles. Without the files, text falls back to
|
|
|
79
83
|
No special config needed. This kit follows the glimpse path: prebuilt
|
|
80
84
|
`@astryxdesign/core` CSS plus `<Theme>` injection. A stock Vite React
|
|
81
85
|
config works. The only recommended extra is the CSS layer-order snippet so
|
|
82
|
-
theme overrides beat component base styles (
|
|
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
|
+
```
|
|
83
113
|
|
|
84
114
|
Advanced: custom `astryx theme build` pipelines need the full StyleX
|
|
85
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.
|
|
22
|
-
"--font-size-3xs": "0.
|
|
21
|
+
"--font-size-4xs": "0.375rem",
|
|
22
|
+
"--font-size-3xs": "0.4375rem",
|
|
23
23
|
"--font-size-2xs": "0.5rem",
|
|
24
|
-
"--font-size-xs": "0.
|
|
25
|
-
"--font-size-sm": "0.
|
|
26
|
-
"--font-size-base": "
|
|
27
|
-
"--font-size-lg": "
|
|
28
|
-
"--font-size-xl": "1.
|
|
29
|
-
"--font-size-2xl": "1.
|
|
30
|
-
"--font-size-3xl": "1.
|
|
31
|
-
"--font-size-4xl": "
|
|
32
|
-
"--font-size-5xl": "2.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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": "
|
|
106
|
-
"--font-size-h2": "
|
|
107
|
-
"--font-size-h3": "
|
|
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": "
|
|
110
|
-
"--font-size-h6": "
|
|
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",
|
|
@@ -136,8 +136,8 @@ export const astryxDraculaTheme = {
|
|
|
136
136
|
"--color-background-popover": "light-dark(#424450, #424450)",
|
|
137
137
|
"--color-background-muted": "light-dark(#44475A, #44475A)",
|
|
138
138
|
"--color-overlay": "light-dark(#191A21CC, #191A21CC)",
|
|
139
|
-
"--color-overlay-hover": "light-dark(#
|
|
140
|
-
"--color-overlay-pressed": "light-dark(#
|
|
139
|
+
"--color-overlay-hover": "light-dark(#0000001F, #0000001F)",
|
|
140
|
+
"--color-overlay-pressed": "light-dark(#00000033, #00000033)",
|
|
141
141
|
"--color-border": "light-dark(#6272A4, #6272A4)",
|
|
142
142
|
"--color-border-emphasized": "light-dark(#6272A4, #6272A4)",
|
|
143
143
|
"--color-accent": "light-dark(#BD93F9, #BD93F9)",
|
package/package.json
CHANGED
|
@@ -57,7 +57,10 @@
|
|
|
57
57
|
"theme:build": "bunx astryx theme build astryx-theme.ts -o theme.css",
|
|
58
58
|
"theme:check": "bunx astryx theme build astryx-theme.ts -o theme.css --check"
|
|
59
59
|
},
|
|
60
|
-
"trustedDependencies": [
|
|
60
|
+
"trustedDependencies": [
|
|
61
|
+
"@astryxdesign/core",
|
|
62
|
+
"@astryxdesign/cli"
|
|
63
|
+
],
|
|
61
64
|
"type": "module",
|
|
62
|
-
"version": "0.1.
|
|
65
|
+
"version": "0.1.3"
|
|
63
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
88
|
-
--font-size-3xs: 0.
|
|
87
|
+
--font-size-4xs: 0.375rem;
|
|
88
|
+
--font-size-3xs: 0.4375rem;
|
|
89
89
|
--font-size-2xs: 0.5rem;
|
|
90
|
-
--font-size-xs: 0.
|
|
91
|
-
--font-size-sm: 0.
|
|
92
|
-
--font-size-base:
|
|
93
|
-
--font-size-lg:
|
|
94
|
-
--font-size-xl: 1.
|
|
95
|
-
--font-size-2xl: 1.
|
|
96
|
-
--font-size-3xl: 1.
|
|
97
|
-
--font-size-4xl:
|
|
98
|
-
--font-size-5xl: 2.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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:
|
|
172
|
-
--font-size-h2:
|
|
173
|
-
--font-size-h3:
|
|
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:
|
|
176
|
-
--font-size-h6:
|
|
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;
|
|
@@ -202,8 +202,8 @@
|
|
|
202
202
|
--color-background-popover: light-dark(#424450, #424450);
|
|
203
203
|
--color-background-muted: light-dark(#44475A, #44475A);
|
|
204
204
|
--color-overlay: light-dark(#191A21CC, #191A21CC);
|
|
205
|
-
--color-overlay-hover: light-dark(#
|
|
206
|
-
--color-overlay-pressed: light-dark(#
|
|
205
|
+
--color-overlay-hover: light-dark(#0000001F, #0000001F);
|
|
206
|
+
--color-overlay-pressed: light-dark(#00000033, #00000033);
|
|
207
207
|
--color-border: light-dark(#6272A4, #6272A4);
|
|
208
208
|
--color-border-emphasized: light-dark(#6272A4, #6272A4);
|
|
209
209
|
--color-accent: light-dark(#BD93F9, #BD93F9);
|
package/tokens.css
CHANGED
|
@@ -89,3 +89,33 @@
|
|
|
89
89
|
--color-tag-orange: #FFB86C;
|
|
90
90
|
--color-tag-pink: #FF79C6;
|
|
91
91
|
}
|
|
92
|
+
|
|
93
|
+
/* Dracula scrollbars: Selection thumb on transparent track, Current Line on
|
|
94
|
+
* hover. Firefox uses the two properties; Chromium uses the pseudo-elements. */
|
|
95
|
+
:root {
|
|
96
|
+
scrollbar-width: thin;
|
|
97
|
+
scrollbar-color: var(--dracula-selection) transparent;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
*::-webkit-scrollbar {
|
|
101
|
+
width: 10px;
|
|
102
|
+
height: 10px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
*::-webkit-scrollbar-track,
|
|
106
|
+
*::-webkit-scrollbar-corner {
|
|
107
|
+
background: transparent;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
*::-webkit-scrollbar-thumb {
|
|
111
|
+
background: var(--dracula-selection);
|
|
112
|
+
border-radius: 5px;
|
|
113
|
+
border: 2px solid transparent;
|
|
114
|
+
background-clip: content-box;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
118
|
+
background: var(--dracula-current-line);
|
|
119
|
+
border: 2px solid transparent;
|
|
120
|
+
background-clip: content-box;
|
|
121
|
+
}
|