@plus234feed/ds 0.0.0-stage → 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.
Files changed (15) hide show
  1. package/README.md +99 -2
  2. package/build/tokens-auto.css +68 -0
  3. package/build/tokens.css +283 -0
  4. package/build/tokens.json +1514 -0
  5. package/build/type.css +141 -0
  6. package/package.json +51 -4
  7. package/src/components.css +1519 -0
  8. package/src/fonts/LICENSE.charter.txt +10 -0
  9. package/src/fonts/charter_bold.woff2 +0 -0
  10. package/src/fonts/charter_bold_italic.woff2 +0 -0
  11. package/src/fonts/charter_italic.woff2 +0 -0
  12. package/src/fonts/charter_regular.woff2 +0 -0
  13. package/src/fonts.css +45 -0
  14. package/tokens/core.tokens.json +364 -0
  15. package/tokens/themes/dark.tokens.json +82 -0
package/README.md CHANGED
@@ -1,3 +1,100 @@
1
- # Temporary Holding Version
1
+ # @plus234feed/ds
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ The Plus234Feed design system. Editorial tokens, a named type scale and the
4
+ components a news site needs: newspaper hierarchy, accessible colour in both
5
+ themes, plain CSS.
6
+
7
+ No framework, no JavaScript, no build step for consumers. Four stylesheets and
8
+ four font files.
9
+
10
+ Documentation: [ds.plus234feed.com](https://ds.plus234feed.com)
11
+
12
+ ## Install
13
+
14
+ ```bash
15
+ npm install @plus234feed/ds
16
+ ```
17
+
18
+ ```css
19
+ @import "@plus234feed/ds/tokens.css"; /* custom properties, both themes */
20
+ @import "@plus234feed/ds/type.css"; /* .p234-headline and friends */
21
+ @import "@plus234feed/ds/components.css"; /* .p234-story and friends */
22
+ @import "@plus234feed/ds/fonts.css"; /* Charter, 64KB, four faces */
23
+ ```
24
+
25
+ `fonts.css` resolves `./fonts/*.woff2` relative to itself. If your bundler does
26
+ not follow that, copy the faces to a public path and rewrite the four `url()`
27
+ values:
28
+
29
+ ```bash
30
+ cp node_modules/@plus234feed/ds/src/fonts/*.woff2 public/fonts/
31
+ sed 's|url("./fonts/|url("/fonts/|g' \
32
+ node_modules/@plus234feed/ds/src/fonts.css > app/fonts.css
33
+ ```
34
+
35
+ ## Use it
36
+
37
+ ```html
38
+ <a class="p234-story p234-story--lead" href="/article/...">
39
+ <span class="p234-kicker" data-section="markets">Market intelligence</span>
40
+ <h3 class="p234-story__headline">Pump prices are running above the last official figure</h3>
41
+ <p class="p234-story__standfirst">The gap between the two is the story.</p>
42
+ <div class="p234-meta">
43
+ <span class="p234-meta__source">Plus234Feed</span>
44
+ <span class="p234-meta__dot">&middot;</span>
45
+ <span>2 hours ago</span>
46
+ <span class="p234-coverage">6 sources</span>
47
+ </div>
48
+ </a>
49
+ ```
50
+
51
+ ## Themes
52
+
53
+ `tokens.css` is class-driven: add `dark` or `data-theme="dark"` to the root
54
+ element. It never reads the operating system preference, because a reader who
55
+ chose light should get light on a dark laptop.
56
+
57
+ Use `tokens-auto.css` instead only on a standalone page with no theme control.
58
+
59
+ ## What is in it
60
+
61
+ | | |
62
+ | --- | --- |
63
+ | Tokens | colour, type, space, shape, charts, forms, layering, motion |
64
+ | Type | 17 named roles, serif for reading, tabular sans for figures |
65
+ | Components | story, masthead, footer, prose, chart, map, table, field, and more |
66
+
67
+ Colour is verified rather than eyeballed. Every pair that has to be readable is
68
+ checked in both themes at build time and the build fails on any that is not.
69
+ The chart palette is checked for colour-blind separation using OKLab and the
70
+ Machado simulation, which is also why it stops at the number of series it can
71
+ actually keep distinct instead of inventing more.
72
+
73
+ ## Typeface
74
+
75
+ Charter, self-hosted. Bitstream contributed it to the X Consortium in 1992 with
76
+ permission to use, copy, modify, sublicense, sell and redistribute, provided
77
+ the notice stays intact. That notice ships at `src/fonts/LICENSE.charter.txt`.
78
+ BITSTREAM CHARTER is a registered trademark of Bitstream Inc.
79
+
80
+ ## Developing
81
+
82
+ ```bash
83
+ npm install
84
+ npm run build # tokens and documentation
85
+ npm test # 33 checks
86
+ npm run check # both, which is what CI runs
87
+ ```
88
+
89
+ Releases publish from CI through an npm trusted publisher, so there is no token
90
+ in the repository:
91
+
92
+ ```bash
93
+ npm version patch # rebuilds the docs, commits, tags
94
+ git push --follow-tags
95
+ ```
96
+
97
+ ## Licence
98
+
99
+ UNLICENSED. Published so Plus234Feed applications can install it; not offered
100
+ for reuse.
package/build/tokens-auto.css ADDED
@@ -0,0 +1,68 @@
1
+ /* Generated from tokens/. Do not edit by hand: run `npm run build:tokens`. */
2
+ @import "./tokens.css";
3
+
4
+ @media (prefers-color-scheme: dark) {
5
+ :root:not(.light):not([data-theme="light"]) {
6
+ --p234-color-ink: #f2f0ea;
7
+ --p234-color-ink-muted: #b0aca2;
8
+ --p234-color-ink-subtle: #9b978d;
9
+ --p234-color-ink-inverse: #f2f0ea;
10
+ --p234-color-paper: #141413;
11
+ --p234-color-paper-alt: #1c1c1a;
12
+ --p234-color-paper-sunk: #242421;
13
+ --p234-color-paper-dark: #0d0d0c;
14
+ --p234-color-rule: #32312d;
15
+ --p234-color-rule-strong: #6b685f;
16
+ --p234-color-brand: #8cc48c;
17
+ --p234-color-brand-hover: #a4d2a4;
18
+ --p234-color-on-brand: #141413;
19
+ --p234-color-brand-tint: #1e2a1e;
20
+ --p234-color-link: #8cc48c;
21
+ --p234-color-link-hover: #a4d2a4;
22
+ --p234-color-link-visited: #cbb0ea;
23
+ --p234-color-focus: #ffbf47;
24
+ --p234-color-focus-outer: #0d0d0c;
25
+ --p234-color-section-politics: #eb9494;
26
+ --p234-color-section-business: #8fbce8;
27
+ --p234-color-section-markets: #e5bc6a;
28
+ --p234-color-section-world: #c9a9ee;
29
+ --p234-color-section-sport: #63c9b0;
30
+ --p234-color-data-up: #5cc184;
31
+ --p234-color-data-down: #ef8288;
32
+ --p234-color-data-flat: #b0aca2;
33
+ --p234-color-chart-series-1: #4A90D9;
34
+ --p234-color-chart-series-2: #AD8B2A;
35
+ --p234-color-chart-series-3: #D16A9A;
36
+ --p234-color-chart-series-4: #2F9463;
37
+ --p234-color-chart-series-5: #9B7ED9;
38
+ --p234-color-chart-axis: #6b685f;
39
+ --p234-color-chart-grid: #282722;
40
+ --p234-color-chart-reference: #9b978d;
41
+ --p234-color-chart-tooltip-bg: #2a2a26;
42
+ --p234-color-chart-tooltip-ink: #f2f0ea;
43
+ --p234-color-chart-tooltip-border: #4a4840;
44
+ --p234-color-chart-seq-1: #36618C;
45
+ --p234-color-chart-seq-2: #4A7FB0;
46
+ --p234-color-chart-seq-3: #5E9CD1;
47
+ --p234-color-chart-seq-4: #86B9E3;
48
+ --p234-color-chart-seq-5: #B3D6F2;
49
+ --p234-color-chart-div-1: #AD8B2A;
50
+ --p234-color-chart-div-2: #7E6A32;
51
+ --p234-color-chart-div-3: #34322E;
52
+ --p234-color-chart-div-4: #3E6B96;
53
+ --p234-color-chart-div-5: #86B9E3;
54
+ --p234-color-field-bg: #1c1c1a;
55
+ --p234-color-field-border: #6b685f;
56
+ --p234-color-field-border-hover: #9b978d;
57
+ --p234-color-field-ink-placeholder: #9b978d;
58
+ --p234-color-field-bg-disabled: #242421;
59
+ --p234-color-success: #5cc184;
60
+ --p234-color-success-tint: #15251b;
61
+ --p234-color-warning: #e5bc6a;
62
+ --p234-color-warning-tint: #272015;
63
+ --p234-color-error: #ef8288;
64
+ --p234-color-error-tint: #2a1719;
65
+ --p234-color-info: #8fbce8;
66
+ --p234-color-info-tint: #151f28;
67
+ }
68
+ }
package/build/tokens.css ADDED
@@ -0,0 +1,283 @@
1
+ /* Generated from tokens/. Do not edit by hand: run `npm run build:tokens`. */
2
+
3
+ :root {
4
+ --p234-color-ink: #1a1a18;
5
+ --p234-color-ink-muted: #5b584f;
6
+ --p234-color-ink-subtle: #6e6b62;
7
+ --p234-color-ink-inverse: #ffffff;
8
+ --p234-color-paper: #ffffff;
9
+ --p234-color-paper-alt: #faf8f4;
10
+ --p234-color-paper-sunk: #f1eee7;
11
+ --p234-color-paper-dark: #1a1a18;
12
+ --p234-color-rule: #e3dfd6;
13
+ --p234-color-rule-strong: #8c887e;
14
+ --p234-color-brand: #417742;
15
+ --p234-color-brand-hover: #356136;
16
+ --p234-color-on-brand: #ffffff;
17
+ --p234-color-brand-tint: #eaf1e8;
18
+ --p234-color-link: #417742;
19
+ --p234-color-link-hover: #356136;
20
+ --p234-color-link-visited: #5b2a86;
21
+ --p234-color-focus: #ffbf47;
22
+ --p234-color-focus-outer: #1a1a18;
23
+ --p234-color-section-politics: #9b2c2c;
24
+ --p234-color-section-business: #1f4e79;
25
+ --p234-color-section-markets: #8a5700;
26
+ --p234-color-section-world: #5b2a86;
27
+ --p234-color-section-sport: #0f6e5c;
28
+ --p234-color-data-up: #15683b;
29
+ --p234-color-data-down: #b4232a;
30
+ --p234-color-data-flat: #5b584f;
31
+ --p234-color-chart-series-1: #1565C0;
32
+ --p234-color-chart-series-2: #B08500;
33
+ --p234-color-chart-series-3: #B5537F;
34
+ --p234-color-chart-series-4: #2E7D32;
35
+ --p234-color-chart-series-5: #6A4FA3;
36
+ --p234-color-chart-axis: #8c887e;
37
+ --p234-color-chart-grid: #ebe8e1;
38
+ --p234-color-chart-reference: #6e6b62;
39
+ --p234-color-chart-tooltip-bg: #1a1a18;
40
+ --p234-color-chart-tooltip-ink: #ffffff;
41
+ --p234-color-chart-tooltip-border: #3f3d38;
42
+ --p234-color-chart-seq-1: #8CB2DD;
43
+ --p234-color-chart-seq-2: #5F8FC4;
44
+ --p234-color-chart-seq-3: #3F6EA8;
45
+ --p234-color-chart-seq-4: #27507F;
46
+ --p234-color-chart-seq-5: #123455;
47
+ --p234-color-chart-div-1: #8A6D00;
48
+ --p234-color-chart-div-2: #C9AE6E;
49
+ --p234-color-chart-div-3: #EDEBE6;
50
+ --p234-color-chart-div-4: #6E9FD4;
51
+ --p234-color-chart-div-5: #1D4F85;
52
+ --p234-color-field-bg: #ffffff;
53
+ --p234-color-field-border: #8c887e;
54
+ --p234-color-field-border-hover: #5b584f;
55
+ --p234-color-field-ink-placeholder: #6e6b62;
56
+ --p234-color-field-bg-disabled: #f1eee7;
57
+ --p234-color-success: #00703c;
58
+ --p234-color-success-tint: #e6f2ec;
59
+ --p234-color-warning: #8a5700;
60
+ --p234-color-warning-tint: #fdf3e1;
61
+ --p234-color-error: #b00020;
62
+ --p234-color-error-tint: #fbe9ec;
63
+ --p234-color-info: #1d70b8;
64
+ --p234-color-info-tint: #e8f1f8;
65
+ --p234-font-family-display: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
66
+ --p234-font-family-text: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
67
+ --p234-font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
68
+ --p234-type-display-1-size: clamp(2.25rem, 1.30rem + 4.2vw, 3.25rem);
69
+ --p234-type-display-1-leading: 1.04;
70
+ --p234-type-display-1-weight: 700;
71
+ --p234-type-display-1-tracking: -0.022em;
72
+ --p234-type-display-1-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
73
+ --p234-type-display-2-size: clamp(1.75rem, 1.18rem + 2.5vw, 2.5rem);
74
+ --p234-type-display-2-leading: 1.07;
75
+ --p234-type-display-2-weight: 700;
76
+ --p234-type-display-2-tracking: -0.02em;
77
+ --p234-type-display-2-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
78
+ --p234-type-headline-size: 1.625rem;
79
+ --p234-type-headline-leading: 1.18;
80
+ --p234-type-headline-weight: 700;
81
+ --p234-type-headline-tracking: -0.015em;
82
+ --p234-type-headline-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
83
+ --p234-type-headline-sm-size: 1.3125rem;
84
+ --p234-type-headline-sm-leading: 1.24;
85
+ --p234-type-headline-sm-weight: 700;
86
+ --p234-type-headline-sm-tracking: -0.01em;
87
+ --p234-type-headline-sm-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
88
+ --p234-type-headline-xs-size: 1.125rem;
89
+ --p234-type-headline-xs-leading: 1.3;
90
+ --p234-type-headline-xs-weight: 700;
91
+ --p234-type-headline-xs-tracking: -0.005em;
92
+ --p234-type-headline-xs-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
93
+ --p234-type-standfirst-size: 1.1875rem;
94
+ --p234-type-standfirst-leading: 1.5;
95
+ --p234-type-standfirst-weight: 400;
96
+ --p234-type-standfirst-tracking: 0;
97
+ --p234-type-standfirst-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
98
+ --p234-type-body-size: 1.125rem;
99
+ --p234-type-body-leading: 1.68;
100
+ --p234-type-body-weight: 400;
101
+ --p234-type-body-tracking: 0;
102
+ --p234-type-body-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
103
+ --p234-type-body-sm-size: 1rem;
104
+ --p234-type-body-sm-leading: 1.6;
105
+ --p234-type-body-sm-weight: 400;
106
+ --p234-type-body-sm-tracking: 0;
107
+ --p234-type-body-sm-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
108
+ --p234-type-ui-size: 0.9375rem;
109
+ --p234-type-ui-leading: 1.45;
110
+ --p234-type-ui-weight: 500;
111
+ --p234-type-ui-tracking: 0;
112
+ --p234-type-ui-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
113
+ --p234-type-ui-sm-size: 0.8125rem;
114
+ --p234-type-ui-sm-leading: 1.4;
115
+ --p234-type-ui-sm-weight: 500;
116
+ --p234-type-ui-sm-tracking: 0;
117
+ --p234-type-ui-sm-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
118
+ --p234-type-kicker-size: 0.75rem;
119
+ --p234-type-kicker-leading: 1.2;
120
+ --p234-type-kicker-weight: 700;
121
+ --p234-type-kicker-tracking: 0.08em;
122
+ --p234-type-kicker-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
123
+ --p234-type-kicker-case: uppercase;
124
+ --p234-type-meta-size: 0.8125rem;
125
+ --p234-type-meta-leading: 1.4;
126
+ --p234-type-meta-weight: 400;
127
+ --p234-type-meta-tracking: 0;
128
+ --p234-type-meta-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
129
+ --p234-type-caption-size: 0.75rem;
130
+ --p234-type-caption-leading: 1.45;
131
+ --p234-type-caption-weight: 400;
132
+ --p234-type-caption-tracking: 0;
133
+ --p234-type-caption-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
134
+ --p234-type-data-lg-size: 2rem;
135
+ --p234-type-data-lg-leading: 1.1;
136
+ --p234-type-data-lg-weight: 600;
137
+ --p234-type-data-lg-tracking: -0.01em;
138
+ --p234-type-data-lg-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
139
+ --p234-type-data-lg-numeric: tabular-nums;
140
+ --p234-type-data-size: 1.125rem;
141
+ --p234-type-data-leading: 1.2;
142
+ --p234-type-data-weight: 600;
143
+ --p234-type-data-tracking: 0;
144
+ --p234-type-data-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
145
+ --p234-type-data-numeric: tabular-nums;
146
+ --p234-type-data-sm-size: 0.875rem;
147
+ --p234-type-data-sm-leading: 1.2;
148
+ --p234-type-data-sm-weight: 500;
149
+ --p234-type-data-sm-tracking: 0;
150
+ --p234-type-data-sm-family: Inter, ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
151
+ --p234-type-data-sm-numeric: tabular-nums;
152
+ --p234-type-quote-size: 1.375rem;
153
+ --p234-type-quote-leading: 1.45;
154
+ --p234-type-quote-weight: 400;
155
+ --p234-type-quote-tracking: -0.01em;
156
+ --p234-type-quote-family: Charter, "Charis SIL", "Iowan Old Style", Georgia, serif;
157
+ --p234-space-0: 0;
158
+ --p234-space-1: 0.125rem;
159
+ --p234-space-2: 0.25rem;
160
+ --p234-space-3: 0.5rem;
161
+ --p234-space-4: 0.75rem;
162
+ --p234-space-5: 1rem;
163
+ --p234-space-6: 1.5rem;
164
+ --p234-space-7: 2rem;
165
+ --p234-space-8: 3rem;
166
+ --p234-space-9: 4rem;
167
+ --p234-space-10: 6rem;
168
+ --p234-measure-narrow: 46ch;
169
+ --p234-measure-text: 66ch;
170
+ --p234-measure-wide: 78ch;
171
+ --p234-radius-none: 0;
172
+ --p234-radius-sm: 2px;
173
+ --p234-radius-md: 4px;
174
+ --p234-radius-pill: 999px;
175
+ --p234-border-hairline: 1px;
176
+ --p234-border-thick: 2px;
177
+ --p234-border-heavy: 4px;
178
+ --p234-shadow-none: none;
179
+ --p234-shadow-raise: 0 1px 2px rgba(26, 26, 24, 0.06);
180
+ --p234-shadow-overlay: 0 8px 24px rgba(26, 26, 24, 0.16);
181
+ --p234-layout-gutter: 1rem;
182
+ --p234-layout-gutter-lg: 2rem;
183
+ --p234-layout-column-gap: 2rem;
184
+ --p234-layout-container: 1280px;
185
+ --p234-layout-container-text: 720px;
186
+ --p234-chart-line-width: 2px;
187
+ --p234-chart-grid-width: 1px;
188
+ --p234-chart-marker-size: 8px;
189
+ --p234-chart-area-opacity: 0.14;
190
+ --p234-chart-mark-gap: 2px;
191
+ --p234-chart-radius-end: 4px;
192
+ --p234-field-height: 2.75rem;
193
+ --p234-field-padding-x: 0.75rem;
194
+ --p234-field-radius: 4px;
195
+ --p234-field-border-width: 1px;
196
+ --p234-field-border-width-invalid: 2px;
197
+ --p234-figure-ratio: 16 / 9;
198
+ --p234-figure-ratio-portrait: 3 / 4;
199
+ --p234-figure-ratio-square: 1 / 1;
200
+ --p234-figure-hero-max-height: 31.25rem;
201
+ --p234-figure-inset-width: 45%;
202
+ --p234-z-base: 0;
203
+ --p234-z-raised: 10;
204
+ --p234-z-sticky: 20;
205
+ --p234-z-dropdown: 30;
206
+ --p234-z-overlay: 40;
207
+ --p234-z-toast: 50;
208
+ --p234-breakpoint-sm: 30rem;
209
+ --p234-breakpoint-md: 48rem;
210
+ --p234-breakpoint-lg: 62rem;
211
+ --p234-breakpoint-xl: 80rem;
212
+ --p234-icon-size-sm: 16px;
213
+ --p234-icon-size-md: 20px;
214
+ --p234-icon-size-lg: 24px;
215
+ --p234-icon-stroke: 1.75;
216
+ --p234-motion-duration-fast: 120ms;
217
+ --p234-motion-duration-base: 180ms;
218
+ --p234-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
219
+ }
220
+
221
+ .dark, [data-theme="dark"] {
222
+ --p234-color-ink: #f2f0ea;
223
+ --p234-color-ink-muted: #b0aca2;
224
+ --p234-color-ink-subtle: #9b978d;
225
+ --p234-color-ink-inverse: #f2f0ea;
226
+ --p234-color-paper: #141413;
227
+ --p234-color-paper-alt: #1c1c1a;
228
+ --p234-color-paper-sunk: #242421;
229
+ --p234-color-paper-dark: #0d0d0c;
230
+ --p234-color-rule: #32312d;
231
+ --p234-color-rule-strong: #6b685f;
232
+ --p234-color-brand: #8cc48c;
233
+ --p234-color-brand-hover: #a4d2a4;
234
+ --p234-color-on-brand: #141413;
235
+ --p234-color-brand-tint: #1e2a1e;
236
+ --p234-color-link: #8cc48c;
237
+ --p234-color-link-hover: #a4d2a4;
238
+ --p234-color-link-visited: #cbb0ea;
239
+ --p234-color-focus: #ffbf47;
240
+ --p234-color-focus-outer: #0d0d0c;
241
+ --p234-color-section-politics: #eb9494;
242
+ --p234-color-section-business: #8fbce8;
243
+ --p234-color-section-markets: #e5bc6a;
244
+ --p234-color-section-world: #c9a9ee;
245
+ --p234-color-section-sport: #63c9b0;
246
+ --p234-color-data-up: #5cc184;
247
+ --p234-color-data-down: #ef8288;
248
+ --p234-color-data-flat: #b0aca2;
249
+ --p234-color-chart-series-1: #4A90D9;
250
+ --p234-color-chart-series-2: #AD8B2A;
251
+ --p234-color-chart-series-3: #D16A9A;
252
+ --p234-color-chart-series-4: #2F9463;
253
+ --p234-color-chart-series-5: #9B7ED9;
254
+ --p234-color-chart-axis: #6b685f;
255
+ --p234-color-chart-grid: #282722;
256
+ --p234-color-chart-reference: #9b978d;
257
+ --p234-color-chart-tooltip-bg: #2a2a26;
258
+ --p234-color-chart-tooltip-ink: #f2f0ea;
259
+ --p234-color-chart-tooltip-border: #4a4840;
260
+ --p234-color-chart-seq-1: #36618C;
261
+ --p234-color-chart-seq-2: #4A7FB0;
262
+ --p234-color-chart-seq-3: #5E9CD1;
263
+ --p234-color-chart-seq-4: #86B9E3;
264
+ --p234-color-chart-seq-5: #B3D6F2;
265
+ --p234-color-chart-div-1: #AD8B2A;
266
+ --p234-color-chart-div-2: #7E6A32;
267
+ --p234-color-chart-div-3: #34322E;
268
+ --p234-color-chart-div-4: #3E6B96;
269
+ --p234-color-chart-div-5: #86B9E3;
270
+ --p234-color-field-bg: #1c1c1a;
271
+ --p234-color-field-border: #6b685f;
272
+ --p234-color-field-border-hover: #9b978d;
273
+ --p234-color-field-ink-placeholder: #9b978d;
274
+ --p234-color-field-bg-disabled: #242421;
275
+ --p234-color-success: #5cc184;
276
+ --p234-color-success-tint: #15251b;
277
+ --p234-color-warning: #e5bc6a;
278
+ --p234-color-warning-tint: #272015;
279
+ --p234-color-error: #ef8288;
280
+ --p234-color-error-tint: #2a1719;
281
+ --p234-color-info: #8fbce8;
282
+ --p234-color-info-tint: #151f28;
283
+ }