@publier/shell 0.3.0 → 0.4.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.
@@ -0,0 +1,223 @@
1
+ :root, [data-theme="light"] {
2
+ color-scheme: light;
3
+
4
+ --color-base-100: #ffffff;
5
+ --color-base-200: #fafafa;
6
+ --color-base-300: #ededed;
7
+ --color-base-content: #171717;
8
+ --color-primary: #047857;
9
+ --color-primary-content: #ffffff;
10
+ --color-secondary: #212121;
11
+ --color-secondary-content: #ffffff;
12
+ --color-accent: #047857;
13
+ --color-accent-content: #ffffff;
14
+ --color-neutral: #171717;
15
+ --color-neutral-content: #ffffff;
16
+ --color-error: #c13515;
17
+ --color-error-content: #ffffff;
18
+
19
+ --radius-selector: 9999px;
20
+ --radius-field: 6px;
21
+ --radius-box: 8px;
22
+ --border: 1px;
23
+ --depth: 0;
24
+ --noise: 0;
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ color-scheme: dark;
29
+
30
+ --color-base-100: #1c1c1c;
31
+ --color-base-200: #202020;
32
+ --color-base-300: #2e2e2e;
33
+ --color-base-content: #ededed;
34
+ --color-primary: #34d399;
35
+ --color-primary-content: #052e22;
36
+ --color-secondary: #a1a1a1;
37
+ --color-secondary-content: #1c1c1c;
38
+ --color-accent: #34d399;
39
+ --color-accent-content: #052e22;
40
+ --color-neutral: #ededed;
41
+ --color-neutral-content: #1c1c1c;
42
+ --color-error: #f2765a;
43
+ --color-error-content: #1c1c1c;
44
+
45
+ --radius-selector: 9999px;
46
+ --radius-field: 6px;
47
+ --radius-box: 8px;
48
+ --border: 1px;
49
+ --depth: 0;
50
+ --noise: 0;
51
+ }
52
+
53
+ @media (prefers-color-scheme: dark) {
54
+ :root:not([data-theme]) {
55
+ color-scheme: dark;
56
+
57
+ --color-base-100: #1c1c1c;
58
+ --color-base-200: #202020;
59
+ --color-base-300: #2e2e2e;
60
+ --color-base-content: #ededed;
61
+ --color-primary: #34d399;
62
+ --color-primary-content: #052e22;
63
+ --color-secondary: #a1a1a1;
64
+ --color-secondary-content: #1c1c1c;
65
+ --color-accent: #34d399;
66
+ --color-accent-content: #052e22;
67
+ --color-neutral: #ededed;
68
+ --color-neutral-content: #1c1c1c;
69
+ --color-error: #f2765a;
70
+ --color-error-content: #1c1c1c;
71
+
72
+ --radius-selector: 9999px;
73
+ --radius-field: 6px;
74
+ --radius-box: 8px;
75
+ --border: 1px;
76
+ --depth: 0;
77
+ --noise: 0;
78
+ }
79
+ }
80
+
81
+ :root {
82
+
83
+ --publier-scale-display-xl-size: 3.5rem;
84
+ --publier-scale-display-xl-weight: 500;
85
+ --publier-scale-display-xl-line-height: 1.05;
86
+ --publier-scale-display-xl-tracking: -0.03em;
87
+ --publier-scale-display-lg-size: 2.75rem;
88
+ --publier-scale-display-lg-weight: 500;
89
+ --publier-scale-display-lg-line-height: 1.1;
90
+ --publier-scale-display-lg-tracking: -0.025em;
91
+ --publier-scale-display-md-size: 2rem;
92
+ --publier-scale-display-md-weight: 500;
93
+ --publier-scale-display-md-line-height: 1.15;
94
+ --publier-scale-display-md-tracking: -0.02em;
95
+ --publier-scale-heading-lg-size: 1.5rem;
96
+ --publier-scale-heading-lg-weight: 500;
97
+ --publier-scale-heading-lg-line-height: 1.25;
98
+ --publier-scale-heading-lg-tracking: -0.015em;
99
+ --publier-scale-heading-md-size: 1.25rem;
100
+ --publier-scale-heading-md-weight: 500;
101
+ --publier-scale-heading-md-line-height: 1.3;
102
+ --publier-scale-heading-md-tracking: -0.01em;
103
+ --publier-scale-heading-sm-size: 1.125rem;
104
+ --publier-scale-heading-sm-weight: 500;
105
+ --publier-scale-heading-sm-line-height: 1.4;
106
+ --publier-scale-heading-sm-tracking: 0;
107
+ --publier-scale-title-size: 1rem;
108
+ --publier-scale-title-weight: 500;
109
+ --publier-scale-title-line-height: 1.4;
110
+ --publier-scale-title-tracking: 0;
111
+ --publier-scale-body-lg-size: 1.125rem;
112
+ --publier-scale-body-lg-weight: 400;
113
+ --publier-scale-body-lg-line-height: 1.55;
114
+ --publier-scale-body-lg-tracking: 0;
115
+ --publier-scale-body-md-size: 1rem;
116
+ --publier-scale-body-md-weight: 400;
117
+ --publier-scale-body-md-line-height: 1.5;
118
+ --publier-scale-body-md-tracking: 0;
119
+ --publier-scale-body-sm-size: 0.875rem;
120
+ --publier-scale-body-sm-weight: 400;
121
+ --publier-scale-body-sm-line-height: 1.45;
122
+ --publier-scale-body-sm-tracking: 0;
123
+ --publier-scale-caption-size: 0.8125rem;
124
+ --publier-scale-caption-weight: 400;
125
+ --publier-scale-caption-line-height: 1.45;
126
+ --publier-scale-caption-tracking: 0;
127
+ --publier-scale-label-size: 0.875rem;
128
+ --publier-scale-label-weight: 500;
129
+ --publier-scale-label-line-height: 1.3;
130
+ --publier-scale-label-tracking: 0;
131
+ --publier-scale-button-size: 0.875rem;
132
+ --publier-scale-button-weight: 500;
133
+ --publier-scale-button-line-height: 1.2;
134
+ --publier-scale-button-tracking: 0;
135
+ --publier-scale-code-size: 0.875rem;
136
+ --publier-scale-code-weight: 400;
137
+ --publier-scale-code-line-height: 1.6;
138
+ --publier-scale-code-tracking: 0;
139
+
140
+ --publier-font-weight-body: 400;
141
+ --publier-font-weight-heading: 500;
142
+
143
+ --publier-space-xxs: 0.125rem;
144
+ --publier-space-xs: 0.25rem;
145
+ --publier-space-sm: 0.5rem;
146
+ --publier-space-md: 0.75rem;
147
+ --publier-space-base: 1rem;
148
+ --publier-space-lg: 1.5rem;
149
+ --publier-space-xl: 2rem;
150
+ --publier-space-xxl: 2.5rem;
151
+ --publier-space-section: 4rem;
152
+
153
+ --publier-radius-button: 6px;
154
+ --publier-radius-control: 6px;
155
+ --publier-radius-card: 8px;
156
+ --publier-radius-panel: 12px;
157
+ --publier-radius-chip: 9999px;
158
+ --publier-control-radius: 6px;
159
+ --publier-surface-radius: 8px;
160
+ --publier-card-radius: 8px;
161
+ --publier-nav-item-radius: 6px;
162
+ --publier-code-block-radius: 8px;
163
+ --publier-code-inline-radius: 4px;
164
+
165
+ --publier-elevation-flat: none;
166
+ --publier-elevation-raised: 0 0 0 1px rgb(0 0 0 / 0.04);
167
+ --publier-elevation-overlay: 0 0 0 1px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.08);
168
+
169
+ --publier-motion-duration-fast: 120ms;
170
+ --publier-motion-duration-base: 150ms;
171
+ --publier-motion-duration-slow: 240ms;
172
+ --publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
173
+
174
+ --publier-nav-height: 4.5rem;
175
+ --publier-page-max-width: 45rem;
176
+ --publier-layout-width: 1280px;
177
+ --publier-shadow-color: 0 0 0;
178
+ }
179
+
180
+ :root,
181
+ :root[data-theme="light"] {
182
+ --color-pl-muted: #707070;
183
+ --color-pl-muted-bg: #f2f2f2;
184
+ --color-pl-subtle: #707070;
185
+ --color-pl-card: #ffffff;
186
+ --color-pl-card-hover: #ffffff;
187
+ --color-pl-popover: #ffffff;
188
+ --color-pl-border: #e5e5e5;
189
+ --color-pl-border-strong: #c7c7c7;
190
+ --color-pl-ring: #171717;
191
+ --color-pl-sidebar-accent: #fafafa;
192
+ --color-pl-sidebar-active: #ecfdf5;
193
+ --color-pl-sidebar-active-fg: #047857;
194
+
195
+ --menu-active-bg: var(--color-pl-sidebar-active);
196
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
197
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
198
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
199
+ }
200
+
201
+ :root[data-theme="dark"],
202
+ .dark {
203
+ --color-pl-muted: #a1a1a1;
204
+ --color-pl-muted-bg: #202020;
205
+ --color-pl-subtle: #a1a1a1;
206
+ --color-pl-card: #202020;
207
+ --color-pl-card-hover: #202020;
208
+ --color-pl-popover: #202020;
209
+ --color-pl-border: #2e2e2e;
210
+ --color-pl-border-strong: #3f3f3f;
211
+ --color-pl-ring: #ededed;
212
+ --color-pl-sidebar-accent: #202020;
213
+ --color-pl-sidebar-active: color-mix(in oklch, #34d399 14%, transparent);
214
+ --color-pl-sidebar-active-fg: #34d399;
215
+
216
+ --publier-elevation-raised: 0 0 0 1px #2e2e2e;
217
+ --publier-elevation-overlay: 0 0 0 1px #2e2e2e, 0 8px 24px rgb(0 0 0 / 0.5);
218
+
219
+ --menu-active-bg: var(--color-pl-sidebar-active);
220
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
221
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
222
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
223
+ }
@@ -0,0 +1,227 @@
1
+ :root, [data-theme="light"] {
2
+ color-scheme: light;
3
+
4
+ --color-base-100: #fbfaf5;
5
+ --color-base-200: #f6f4ee;
6
+ --color-base-300: #eeebe3;
7
+ --color-base-content: #1f1e1a;
8
+ --color-primary: #5e5f1f;
9
+ --color-primary-content: #ffffff;
10
+ --color-secondary: #3a3832;
11
+ --color-secondary-content: #fbfaf5;
12
+ --color-accent: #5e5f1f;
13
+ --color-accent-content: #ffffff;
14
+ --color-neutral: #1f1e1a;
15
+ --color-neutral-content: #fbfaf5;
16
+ --color-error: #b3261e;
17
+ --color-error-content: #fbfaf5;
18
+
19
+ --radius-selector: 9999px;
20
+ --radius-field: 8px;
21
+ --radius-box: 12px;
22
+ --border: 1px;
23
+ --depth: 0;
24
+ --noise: 0;
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ color-scheme: dark;
29
+
30
+ --color-base-100: #1c1b17;
31
+ --color-base-200: #26241f;
32
+ --color-base-300: #3a3730;
33
+ --color-base-content: #edebe4;
34
+ --color-primary: #cfd17a;
35
+ --color-primary-content: #1c1b17;
36
+ --color-secondary: #a8a294;
37
+ --color-secondary-content: #1c1b17;
38
+ --color-accent: #cfd17a;
39
+ --color-accent-content: #1c1b17;
40
+ --color-neutral: #edebe4;
41
+ --color-neutral-content: #1c1b17;
42
+ --color-error: #f2877e;
43
+ --color-error-content: #1c1b17;
44
+
45
+ --radius-selector: 9999px;
46
+ --radius-field: 8px;
47
+ --radius-box: 12px;
48
+ --border: 1px;
49
+ --depth: 0;
50
+ --noise: 0;
51
+ }
52
+
53
+ @media (prefers-color-scheme: dark) {
54
+ :root:not([data-theme]) {
55
+ color-scheme: dark;
56
+
57
+ --color-base-100: #1c1b17;
58
+ --color-base-200: #26241f;
59
+ --color-base-300: #3a3730;
60
+ --color-base-content: #edebe4;
61
+ --color-primary: #cfd17a;
62
+ --color-primary-content: #1c1b17;
63
+ --color-secondary: #a8a294;
64
+ --color-secondary-content: #1c1b17;
65
+ --color-accent: #cfd17a;
66
+ --color-accent-content: #1c1b17;
67
+ --color-neutral: #edebe4;
68
+ --color-neutral-content: #1c1b17;
69
+ --color-error: #f2877e;
70
+ --color-error-content: #1c1b17;
71
+
72
+ --radius-selector: 9999px;
73
+ --radius-field: 8px;
74
+ --radius-box: 12px;
75
+ --border: 1px;
76
+ --depth: 0;
77
+ --noise: 0;
78
+ }
79
+ }
80
+
81
+ :root {
82
+
83
+ --publier-scale-display-xl-size: 3.5rem;
84
+ --publier-scale-display-xl-weight: 600;
85
+ --publier-scale-display-xl-line-height: 1.08;
86
+ --publier-scale-display-xl-tracking: -0.02em;
87
+ --publier-scale-display-lg-size: 2.75rem;
88
+ --publier-scale-display-lg-weight: 600;
89
+ --publier-scale-display-lg-line-height: 1.12;
90
+ --publier-scale-display-lg-tracking: -0.02em;
91
+ --publier-scale-display-md-size: 2rem;
92
+ --publier-scale-display-md-weight: 600;
93
+ --publier-scale-display-md-line-height: 1.2;
94
+ --publier-scale-display-md-tracking: -0.01em;
95
+ --publier-scale-heading-lg-size: 1.75rem;
96
+ --publier-scale-heading-lg-weight: 600;
97
+ --publier-scale-heading-lg-line-height: 1.3;
98
+ --publier-scale-heading-lg-tracking: -0.01em;
99
+ --publier-scale-heading-md-size: 1.375rem;
100
+ --publier-scale-heading-md-weight: 500;
101
+ --publier-scale-heading-md-line-height: 1.25;
102
+ --publier-scale-heading-md-tracking: -0.01em;
103
+ --publier-scale-heading-sm-size: 1.25rem;
104
+ --publier-scale-heading-sm-weight: 600;
105
+ --publier-scale-heading-sm-line-height: 1.3;
106
+ --publier-scale-heading-sm-tracking: 0;
107
+ --publier-scale-title-size: 1rem;
108
+ --publier-scale-title-weight: 600;
109
+ --publier-scale-title-line-height: 1.4;
110
+ --publier-scale-title-tracking: 0;
111
+ --publier-scale-body-lg-size: 1.125rem;
112
+ --publier-scale-body-lg-weight: 400;
113
+ --publier-scale-body-lg-line-height: 1.6;
114
+ --publier-scale-body-lg-tracking: 0;
115
+ --publier-scale-body-md-size: 1rem;
116
+ --publier-scale-body-md-weight: 400;
117
+ --publier-scale-body-md-line-height: 1.55;
118
+ --publier-scale-body-md-tracking: 0;
119
+ --publier-scale-body-sm-size: 0.875rem;
120
+ --publier-scale-body-sm-weight: 400;
121
+ --publier-scale-body-sm-line-height: 1.5;
122
+ --publier-scale-body-sm-tracking: 0;
123
+ --publier-scale-caption-size: 0.8125rem;
124
+ --publier-scale-caption-weight: 400;
125
+ --publier-scale-caption-line-height: 1.4;
126
+ --publier-scale-caption-tracking: 0;
127
+ --publier-scale-label-size: 0.875rem;
128
+ --publier-scale-label-weight: 500;
129
+ --publier-scale-label-line-height: 1.3;
130
+ --publier-scale-label-tracking: 0;
131
+ --publier-scale-button-size: 0.875rem;
132
+ --publier-scale-button-weight: 500;
133
+ --publier-scale-button-line-height: 1.3;
134
+ --publier-scale-button-tracking: 0;
135
+ --publier-scale-code-size: 0.875rem;
136
+ --publier-scale-code-weight: 400;
137
+ --publier-scale-code-line-height: 1.6;
138
+ --publier-scale-code-tracking: 0;
139
+
140
+ --publier-font-weight-body: 400;
141
+ --publier-font-weight-heading: 600;
142
+
143
+ --publier-space-xxs: 0.25rem;
144
+ --publier-space-xs: 0.5rem;
145
+ --publier-space-sm: 0.75rem;
146
+ --publier-space-md: 1rem;
147
+ --publier-space-base: 1.25rem;
148
+ --publier-space-lg: 1.5rem;
149
+ --publier-space-xl: 2rem;
150
+ --publier-space-xxl: 3rem;
151
+ --publier-space-section: 5rem;
152
+
153
+ --publier-radius-button: 8px;
154
+ --publier-radius-control: 8px;
155
+ --publier-radius-card: 12px;
156
+ --publier-radius-panel: 16px;
157
+ --publier-radius-chip: 9999px;
158
+ --publier-control-radius: 8px;
159
+ --publier-surface-radius: 12px;
160
+ --publier-card-radius: 12px;
161
+ --publier-nav-item-radius: 6px;
162
+ --publier-code-block-radius: 8px;
163
+ --publier-code-inline-radius: 6px;
164
+
165
+ --publier-elevation-flat: none;
166
+ --publier-elevation-raised:
167
+ 0 0 0 1px rgb(0 0 0 / 0.02), 0 2px 6px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1);
168
+ --publier-elevation-overlay:
169
+ 0 0 0 1px rgb(0 0 0 / 0.02), 0 2px 6px rgb(0 0 0 / 0.04), 0 4px 8px rgb(0 0 0 / 0.1);
170
+
171
+ --publier-motion-duration-fast: 120ms;
172
+ --publier-motion-duration-base: 160ms;
173
+ --publier-motion-duration-slow: 260ms;
174
+ --publier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
175
+
176
+ --publier-nav-height: 4.5rem;
177
+ --publier-page-max-width: 45rem;
178
+ --publier-layout-width: 1280px;
179
+ --publier-shadow-color: 0 0 0;
180
+ }
181
+
182
+ :root,
183
+ :root[data-theme="light"] {
184
+ --color-pl-muted: #6b685e;
185
+ --color-pl-muted-bg: #efede6;
186
+ --color-pl-subtle: #6b685e;
187
+ --color-pl-card: #fbfaf5;
188
+ --color-pl-card-hover: #fbfaf5;
189
+ --color-pl-popover: #fbfaf5;
190
+ --color-pl-border: #e4e1d8;
191
+ --color-pl-border-strong: #bdb8ac;
192
+ --color-pl-ring: #1f1e1a;
193
+ --color-pl-sidebar-accent: #f6f4ee;
194
+ --color-pl-sidebar-active: #f1f1e2;
195
+ --color-pl-sidebar-active-fg: #5e5f1f;
196
+
197
+ --menu-active-bg: var(--color-pl-sidebar-active);
198
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
199
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
200
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
201
+ }
202
+
203
+ :root[data-theme="dark"],
204
+ .dark {
205
+ --color-pl-muted: #a8a294;
206
+ --color-pl-muted-bg: #26241f;
207
+ --color-pl-subtle: #a8a294;
208
+ --color-pl-card: #26241f;
209
+ --color-pl-card-hover: #26241f;
210
+ --color-pl-popover: #26241f;
211
+ --color-pl-border: #3a3730;
212
+ --color-pl-border-strong: #4d4a40;
213
+ --color-pl-ring: #edebe4;
214
+ --color-pl-sidebar-accent: #26241f;
215
+ --color-pl-sidebar-active: color-mix(in oklch, #cfd17a 14%, transparent);
216
+ --color-pl-sidebar-active-fg: #cfd17a;
217
+
218
+ --publier-elevation-raised:
219
+ 0 0 0 1px #3a3730, 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.2);
220
+ --publier-elevation-overlay:
221
+ 0 0 0 1px #3a3730, 0 2px 6px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.2);
222
+
223
+ --menu-active-bg: var(--color-pl-sidebar-active);
224
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
225
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
226
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
227
+ }
@@ -0,0 +1,220 @@
1
+ :root, [data-theme="light"] {
2
+ color-scheme: light;
3
+
4
+ --color-base-100: #ffffff;
5
+ --color-base-200: #f4f4f4;
6
+ --color-base-300: #e0e0e0;
7
+ --color-base-content: #161616;
8
+ --color-primary: #007298;
9
+ --color-primary-content: #ffffff;
10
+ --color-secondary: #393939;
11
+ --color-secondary-content: #ffffff;
12
+ --color-accent: #007298;
13
+ --color-accent-content: #ffffff;
14
+ --color-neutral: #161616;
15
+ --color-neutral-content: #ffffff;
16
+ --color-error: #da1e28;
17
+ --color-error-content: #ffffff;
18
+
19
+ --radius-selector: 0px;
20
+ --radius-field: 0px;
21
+ --radius-box: 2px;
22
+ --border: 1px;
23
+ --depth: 0;
24
+ --noise: 0;
25
+ }
26
+
27
+ [data-theme="dark"] {
28
+ color-scheme: dark;
29
+
30
+ --color-base-100: #161616;
31
+ --color-base-200: #262626;
32
+ --color-base-300: #393939;
33
+ --color-base-content: #f4f4f4;
34
+ --color-primary: #52c1e1;
35
+ --color-primary-content: #161616;
36
+ --color-secondary: #c6c6c6;
37
+ --color-secondary-content: #161616;
38
+ --color-accent: #52c1e1;
39
+ --color-accent-content: #161616;
40
+ --color-neutral: #f4f4f4;
41
+ --color-neutral-content: #161616;
42
+ --color-error: #ff8389;
43
+ --color-error-content: #161616;
44
+
45
+ --radius-selector: 0px;
46
+ --radius-field: 0px;
47
+ --radius-box: 2px;
48
+ --border: 1px;
49
+ --depth: 0;
50
+ --noise: 0;
51
+ }
52
+
53
+ @media (prefers-color-scheme: dark) {
54
+ :root:not([data-theme]) {
55
+ color-scheme: dark;
56
+
57
+ --color-base-100: #161616;
58
+ --color-base-200: #262626;
59
+ --color-base-300: #393939;
60
+ --color-base-content: #f4f4f4;
61
+ --color-primary: #52c1e1;
62
+ --color-primary-content: #161616;
63
+ --color-secondary: #c6c6c6;
64
+ --color-secondary-content: #161616;
65
+ --color-accent: #52c1e1;
66
+ --color-accent-content: #161616;
67
+ --color-neutral: #f4f4f4;
68
+ --color-neutral-content: #161616;
69
+ --color-error: #ff8389;
70
+ --color-error-content: #161616;
71
+
72
+ --radius-selector: 0px;
73
+ --radius-field: 0px;
74
+ --radius-box: 2px;
75
+ --border: 1px;
76
+ --depth: 0;
77
+ --noise: 0;
78
+ }
79
+ }
80
+
81
+ :root {
82
+
83
+ --publier-scale-display-xl-size: 4rem;
84
+ --publier-scale-display-xl-weight: 300;
85
+ --publier-scale-display-xl-line-height: 1.17;
86
+ --publier-scale-display-xl-tracking: -0.01em;
87
+ --publier-scale-display-lg-size: 3rem;
88
+ --publier-scale-display-lg-weight: 300;
89
+ --publier-scale-display-lg-line-height: 1.17;
90
+ --publier-scale-display-lg-tracking: -0.01em;
91
+ --publier-scale-display-md-size: 2.5rem;
92
+ --publier-scale-display-md-weight: 300;
93
+ --publier-scale-display-md-line-height: 1.2;
94
+ --publier-scale-display-md-tracking: 0;
95
+ --publier-scale-heading-lg-size: 2rem;
96
+ --publier-scale-heading-lg-weight: 400;
97
+ --publier-scale-heading-lg-line-height: 1.25;
98
+ --publier-scale-heading-lg-tracking: 0;
99
+ --publier-scale-heading-md-size: 1.5rem;
100
+ --publier-scale-heading-md-weight: 400;
101
+ --publier-scale-heading-md-line-height: 1.33;
102
+ --publier-scale-heading-md-tracking: 0;
103
+ --publier-scale-heading-sm-size: 1.25rem;
104
+ --publier-scale-heading-sm-weight: 400;
105
+ --publier-scale-heading-sm-line-height: 1.4;
106
+ --publier-scale-heading-sm-tracking: 0;
107
+ --publier-scale-title-size: 1rem;
108
+ --publier-scale-title-weight: 600;
109
+ --publier-scale-title-line-height: 1.5;
110
+ --publier-scale-title-tracking: 0;
111
+ --publier-scale-body-lg-size: 1.125rem;
112
+ --publier-scale-body-lg-weight: 400;
113
+ --publier-scale-body-lg-line-height: 1.5;
114
+ --publier-scale-body-lg-tracking: 0;
115
+ --publier-scale-body-md-size: 1rem;
116
+ --publier-scale-body-md-weight: 400;
117
+ --publier-scale-body-md-line-height: 1.5;
118
+ --publier-scale-body-md-tracking: 0.16px;
119
+ --publier-scale-body-sm-size: 0.875rem;
120
+ --publier-scale-body-sm-weight: 400;
121
+ --publier-scale-body-sm-line-height: 1.29;
122
+ --publier-scale-body-sm-tracking: 0.16px;
123
+ --publier-scale-caption-size: 0.75rem;
124
+ --publier-scale-caption-weight: 400;
125
+ --publier-scale-caption-line-height: 1.33;
126
+ --publier-scale-caption-tracking: 0.32px;
127
+ --publier-scale-label-size: 0.875rem;
128
+ --publier-scale-label-weight: 600;
129
+ --publier-scale-label-line-height: 1.29;
130
+ --publier-scale-label-tracking: 0.16px;
131
+ --publier-scale-button-size: 0.875rem;
132
+ --publier-scale-button-weight: 400;
133
+ --publier-scale-button-line-height: 1.29;
134
+ --publier-scale-button-tracking: 0.16px;
135
+ --publier-scale-code-size: 0.875rem;
136
+ --publier-scale-code-weight: 400;
137
+ --publier-scale-code-line-height: 1.6;
138
+ --publier-scale-code-tracking: 0;
139
+
140
+ --publier-font-weight-body: 400;
141
+ --publier-font-weight-heading: 400;
142
+
143
+ --publier-space-xxs: 0.125rem;
144
+ --publier-space-xs: 0.25rem;
145
+ --publier-space-sm: 0.5rem;
146
+ --publier-space-md: 0.75rem;
147
+ --publier-space-base: 1rem;
148
+ --publier-space-lg: 1.5rem;
149
+ --publier-space-xl: 2rem;
150
+ --publier-space-xxl: 3rem;
151
+ --publier-space-section: 6rem;
152
+
153
+ --publier-radius-button: 0px;
154
+ --publier-radius-control: 0px;
155
+ --publier-radius-card: 0px;
156
+ --publier-radius-panel: 2px;
157
+ --publier-radius-chip: 0px;
158
+ --publier-control-radius: 0px;
159
+ --publier-surface-radius: 0px;
160
+ --publier-card-radius: 0px;
161
+ --publier-nav-item-radius: 0px;
162
+ --publier-code-block-radius: 0px;
163
+ --publier-code-inline-radius: 2px;
164
+
165
+ --publier-elevation-flat: none;
166
+ --publier-elevation-raised: none;
167
+ --publier-elevation-overlay: 0 2px 12px 2px rgb(0 0 0 / 0.25);
168
+
169
+ --publier-motion-duration-fast: 70ms;
170
+ --publier-motion-duration-base: 150ms;
171
+ --publier-motion-duration-slow: 240ms;
172
+ --publier-motion-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
173
+
174
+ --publier-nav-height: 3rem;
175
+ --publier-page-max-width: 80rem;
176
+ --publier-layout-width: 1584px;
177
+ --publier-shadow-color: 0 0 0;
178
+ }
179
+
180
+ :root,
181
+ :root[data-theme="light"] {
182
+ --color-pl-muted: #525252;
183
+ --color-pl-muted-bg: #e0e0e0;
184
+ --color-pl-subtle: #525252;
185
+ --color-pl-card: #ffffff;
186
+ --color-pl-card-hover: #ffffff;
187
+ --color-pl-popover: #ffffff;
188
+ --color-pl-border: #e0e0e0;
189
+ --color-pl-border-strong: #8d8d8d;
190
+ --color-pl-ring: #007298;
191
+ --color-pl-sidebar-accent: #f4f4f4;
192
+ --color-pl-sidebar-active: #e3f6fc;
193
+ --color-pl-sidebar-active-fg: #007298;
194
+
195
+ --menu-active-bg: var(--color-pl-sidebar-active);
196
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
197
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
198
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
199
+ }
200
+
201
+ :root[data-theme="dark"],
202
+ .dark {
203
+ --color-pl-muted: #c6c6c6;
204
+ --color-pl-muted-bg: #393939;
205
+ --color-pl-subtle: #c6c6c6;
206
+ --color-pl-card: #262626;
207
+ --color-pl-card-hover: #262626;
208
+ --color-pl-popover: #262626;
209
+ --color-pl-border: #393939;
210
+ --color-pl-border-strong: #6f6f6f;
211
+ --color-pl-ring: #52c1e1;
212
+ --color-pl-sidebar-accent: #262626;
213
+ --color-pl-sidebar-active: color-mix(in oklch, #52c1e1 14%, transparent);
214
+ --color-pl-sidebar-active-fg: #52c1e1;
215
+
216
+ --menu-active-bg: var(--color-pl-sidebar-active);
217
+ --menu-active-color: var(--color-pl-sidebar-active-fg);
218
+ --menu-hover-bg: var(--color-pl-sidebar-accent);
219
+ --menu-hover-color: var(--color-pl-sidebar-accent-fg);
220
+ }