dowel-ui 0.6.0 → 0.6.1
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/README.md +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/theme.css +26 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ A dowel is the hidden peg that joins two boards so the seam does not show. That
|
|
|
11
11
|
**[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
|
|
12
12
|
**[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
|
|
13
13
|
|
|
14
|
-
**Status:** v0.6.
|
|
14
|
+
**Status:** v0.6.1 - the theme, the scales, an accent per product, ten primitives and the lint rule that keeps them honest. The first product of the line lives on it. See the [roadmap](#roadmap).
|
|
15
15
|
|
|
16
16
|
## The theme
|
|
17
17
|
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { lineProducts, lineProduct, type LineProduct } from './line.js';
|
|
|
3
3
|
export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useThemeSwitch, type Theme, } from './theme.js';
|
|
4
4
|
/** Tokens that carry a colour. Ordered as they read on a screen: grounds,
|
|
5
5
|
* then hairlines, then ink, then the accent, then status. */
|
|
6
|
-
export declare const colorTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft"];
|
|
6
|
+
export declare const colorTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft"];
|
|
7
7
|
/** Tokens a product overrides to make the theme its own: the accent from the
|
|
8
8
|
* brand-line registry, and how much of it bleeds into the greys. */
|
|
9
9
|
export declare const themeParameters: readonly ["accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink"];
|
|
@@ -28,7 +28,7 @@ export declare const layerTokens: readonly ["z-popup", "z-sticky", "z-menu", "z-
|
|
|
28
28
|
* vocabulary - a docs page, an inspector, the JSON export, the test that keeps
|
|
29
29
|
* this file honest against the stylesheet - reads this, so a new category
|
|
30
30
|
* cannot be added and quietly missed by half of them. */
|
|
31
|
-
export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
|
|
31
|
+
export declare const allTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "on-good", "on-warn", "on-bad", "on-info", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft", "accent-base", "neutral-base", "neutral-tint", "neutral-tint-strong", "ground", "ink", "shadow-lift", "shadow-raise", "shadow-float", "radius-xs", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-2xl", "radius-inner", "font-sans", "font-mono", "text-2xs", "text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "tracking-caption", "tracking-tight", "duration-quick", "duration-base", "duration-slow", "ease-out", "ease-in-out", "z-popup", "z-sticky", "z-menu", "z-floating", "z-overlay", "z-modal", "z-palette", "z-toast"];
|
|
32
32
|
export type ColorToken = (typeof colorTokens)[number];
|
|
33
33
|
export type ThemeParameter = (typeof themeParameters)[number];
|
|
34
34
|
export type ElevationToken = (typeof elevationTokens)[number];
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,qQA0Bd,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,62BAQZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,GAEf,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV;yDACyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,CAAU,CAAA;AAEvF;8DAC8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,cAAc;CACN,CAAA;AAEV;iCACiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW;IACX,WAAW;IACX,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,UAAU;IACV,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;CACR,CAAA;AAEV;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,UAAU;IACV,aAAa;CACL,CAAA;AAEV;;qEAEqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS;CACD,CAAA;AAEV;;;yDAGyD;AACzD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,WAAW;IACd,GAAG,eAAe;IAClB,GAAG,eAAe;IAClB,GAAG,YAAY;IACf,GAAG,UAAU;IACb,GAAG,YAAY;IACf,GAAG,WAAW;CACN,CAAA;AAkBV;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,GAEf,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,SAAS;IACT,SAAS;IACT,QAAQ;IACR,SAAS;IACT,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV;yDACyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,CAAU,CAAA;AAEvF;8DAC8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,cAAc;CACN,CAAA;AAEV;iCACiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW;IACX,WAAW;IACX,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,UAAU;IACV,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;CACR,CAAA;AAEV;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,UAAU;IACV,aAAa;CACL,CAAA;AAEV;;qEAEqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS;CACD,CAAA;AAEV;;;yDAGyD;AACzD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,WAAW;IACd,GAAG,eAAe;IAClB,GAAG,eAAe;IAClB,GAAG,YAAY;IACf,GAAG,UAAU;IACb,GAAG,YAAY;IACf,GAAG,WAAW;CACN,CAAA;AAkBV;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}
|
package/dist/theme.css
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
--accent-2: oklch(from var(--accent-base) 0.4 c h);
|
|
124
124
|
--accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);
|
|
125
125
|
|
|
126
|
-
--good: #
|
|
126
|
+
--good: #0c8554;
|
|
127
127
|
--warn: #9a6b0c;
|
|
128
128
|
--bad: #c93b3b;
|
|
129
129
|
--info: #0d7f9c;
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
--accent-2: oklch(from var(--accent-base) 0.4 c h);
|
|
162
162
|
--accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);
|
|
163
163
|
|
|
164
|
-
--good: #
|
|
164
|
+
--good: #0c8554;
|
|
165
165
|
--warn: #9a6b0c;
|
|
166
166
|
--bad: #c93b3b;
|
|
167
167
|
--info: #0d7f9c;
|
|
@@ -202,11 +202,31 @@
|
|
|
202
202
|
*/
|
|
203
203
|
:root {
|
|
204
204
|
--on-accent: oklch(from var(--accent) clamp(0, (0.58 - l) * 1000, 1) 0 0);
|
|
205
|
+
|
|
206
|
+
/*
|
|
207
|
+
* The same question for the status fills, and it has to be asked separately:
|
|
208
|
+
* `--on-accent` is derived from the accent, so using it on a `--warn` fill
|
|
209
|
+
* is only ever right by coincidence. The line's first consumer did exactly
|
|
210
|
+
* that - a count on a yellow badge, drawn in white at 1.95:1 - and it read
|
|
211
|
+
* as correct for as long as the product happened to pin white.
|
|
212
|
+
*
|
|
213
|
+
* The status hues do not follow the product accent, so these four are the
|
|
214
|
+
* same for every product; they are still derived rather than written down,
|
|
215
|
+
* because the status colours themselves change between the themes.
|
|
216
|
+
*/
|
|
217
|
+
--on-good: oklch(from var(--good) clamp(0, (0.58 - l) * 1000, 1) 0 0);
|
|
218
|
+
--on-warn: oklch(from var(--warn) clamp(0, (0.58 - l) * 1000, 1) 0 0);
|
|
219
|
+
--on-bad: oklch(from var(--bad) clamp(0, (0.58 - l) * 1000, 1) 0 0);
|
|
220
|
+
--on-info: oklch(from var(--info) clamp(0, (0.58 - l) * 1000, 1) 0 0);
|
|
205
221
|
}
|
|
206
222
|
|
|
207
223
|
@supports (color: contrast-color(red)) {
|
|
208
224
|
:root {
|
|
209
225
|
--on-accent: contrast-color(var(--accent));
|
|
226
|
+
--on-good: contrast-color(var(--good));
|
|
227
|
+
--on-warn: contrast-color(var(--warn));
|
|
228
|
+
--on-bad: contrast-color(var(--bad));
|
|
229
|
+
--on-info: contrast-color(var(--info));
|
|
210
230
|
}
|
|
211
231
|
}
|
|
212
232
|
|
|
@@ -230,6 +250,10 @@
|
|
|
230
250
|
--color-accent-2: var(--accent-2);
|
|
231
251
|
--color-accent-soft: var(--accent-soft);
|
|
232
252
|
--color-on-accent: var(--on-accent);
|
|
253
|
+
--color-on-good: var(--on-good);
|
|
254
|
+
--color-on-warn: var(--on-warn);
|
|
255
|
+
--color-on-bad: var(--on-bad);
|
|
256
|
+
--color-on-info: var(--on-info);
|
|
233
257
|
--color-good: var(--good);
|
|
234
258
|
--color-good-soft: var(--good-soft);
|
|
235
259
|
--color-warn: var(--warn);
|
package/package.json
CHANGED