@weasel-js/theme 0.5.1 → 0.7.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.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +6 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,7 @@ declare const DEFAULT_TOKENS: {
|
|
|
30
30
|
readonly '--wzl-border-w': "1px";
|
|
31
31
|
readonly '--wzl-line-width': "2px";
|
|
32
32
|
readonly '--wzl-curve-width': "3px";
|
|
33
|
+
readonly '--wzl-tb-height': "28px";
|
|
33
34
|
readonly '--wzl-motion-fast': "120ms";
|
|
34
35
|
readonly '--wzl-motion-medium': "240ms";
|
|
35
36
|
readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
|
package/dist/index.js
CHANGED
|
@@ -24,6 +24,7 @@ var DEFAULT_TOKENS = {
|
|
|
24
24
|
"--wzl-border-w": "1px",
|
|
25
25
|
"--wzl-line-width": "2px",
|
|
26
26
|
"--wzl-curve-width": "3px",
|
|
27
|
+
"--wzl-tb-height": "28px",
|
|
27
28
|
// Motion — durations + CSS equivalents of the JS easing library
|
|
28
29
|
"--wzl-motion-fast": "120ms",
|
|
29
30
|
"--wzl-motion-medium": "240ms",
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Source of truth for token default values. Mirrors tokens.css exactly,\n * with var(--*) references resolved to their literal target value (TS\n * exports can't reference each other syntactically the way CSS can with\n * var()). The parity test in tokens.test.ts catches drift.\n *\n * color-mix() expressions are resolved to plausible hex approximations\n * — consumers that need exact mixed values should read getComputedStyle\n * from the live DOM rather than relying on these defaults.\n */\nexport const DEFAULT_TOKENS = {\n // Primitive — grays\n '--wzl-gray-50': '#f5f5f6',\n '--wzl-gray-100': '#e6e7e9',\n '--wzl-gray-200': '#c9cbcf',\n '--wzl-gray-300': '#9ea1a8',\n '--wzl-gray-400': '#6f737b',\n '--wzl-gray-500': '#4d5058',\n '--wzl-gray-600': '#383b42',\n '--wzl-gray-700': '#25272c',\n '--wzl-gray-800': '#181a1e',\n '--wzl-gray-900': '#0e0f12',\n\n // Primitive — accent + status\n '--wzl-accent-soft': '#1d1454',\n '--wzl-accent-base': '#2e1f7a',\n '--wzl-accent-strong': '#5841b8',\n '--wzl-danger-base': '#d94a3f',\n '--wzl-warning-base': '#d99a3f',\n '--wzl-success-base': '#2ec27e',\n\n // Geometry\n '--wzl-radius-sm': '3px',\n '--wzl-radius-md': '5px',\n '--wzl-border-w': '1px',\n '--wzl-line-width': '2px',\n '--wzl-curve-width': '3px',\n\n // Motion — durations + CSS equivalents of the JS easing library\n '--wzl-motion-fast': '120ms',\n '--wzl-motion-medium': '240ms',\n '--wzl-ease-in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)',\n '--wzl-ease-out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',\n '--wzl-ease-in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',\n '--wzl-ease-out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n\n // Structural lines — three opacity levels of fg. color-mix at runtime;\n // hex approximations here resolve against the dark default fg.\n '--wzl-line-subtle': 'rgba(230, 231, 233, 0.10)',\n '--wzl-line': 'rgba(230, 231, 233, 0.20)',\n '--wzl-line-strong': 'rgba(230, 231, 233, 0.40)',\n\n // Curve color — semantic alias for the accent.\n '--wzl-curve-color': '#5841b8',\n\n // Typography\n '--wzl-font-ui': \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n '--wzl-font-display': \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n '--wzl-font-body': \"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif\",\n '--wzl-font-mono': 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n '--wzl-font-weight-light': '200',\n '--wzl-font-weight-normal': '300',\n '--wzl-font-weight-bold': '400',\n\n // Semantic — surfaces\n '--wzl-surface': '#181a1e',\n '--wzl-surface-raised': '#25272c',\n '--wzl-surface-sunken': '#0e0f12',\n\n // Semantic — text\n '--wzl-fg': '#e6e7e9',\n '--wzl-fg-muted': '#9ea1a8',\n '--wzl-fg-subtle': '#6f737b',\n '--wzl-fg-on-accent': '#f5f5f6',\n\n // Semantic — borders\n '--wzl-border': '#25272c',\n '--wzl-border-strong': '#383b42',\n\n // Semantic — interactive\n '--wzl-accent': '#2e1f7a',\n '--wzl-accent-fg': '#5841b8',\n '--wzl-accent-hover': '#5841b8',\n '--wzl-danger': '#d94a3f',\n '--wzl-warning': '#d99a3f',\n '--wzl-success': '#2ec27e',\n '--wzl-focus-ring': '#5841b8',\n\n // Semantic — glass\n '--wzl-glass-tint': '#2e1f7a',\n\n // Deprecated aliases (kept for older consumers)\n '--wzl-text': '#e6e7e9',\n '--wzl-text-muted': '#9ea1a8',\n '--wzl-bg': '#181a1e',\n '--wzl-muted': '#9ea1a8',\n '--wzl-panel-bg': '#181a1e',\n '--wzl-panel-border': '#25272c',\n '--wzl-input-bg': '#0e0f12',\n '--wzl-track-bg': '#0e0f12',\n '--wzl-track-border': '#25272c',\n '--wzl-thumb-fill': '#9ea1a8',\n '--wzl-thumb-border': '#383b42',\n '--wzl-thumb-text': '#0e0f12',\n '--wzl-button-fill': '#25272c',\n '--wzl-button-fill-hover': '#2f3138',\n '--wzl-button-fill-pressed': '#363941',\n '--wzl-button-text': '#e6e7e9',\n} as const;\n\nexport type TokenName = keyof typeof DEFAULT_TOKENS;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Source of truth for token default values. Mirrors tokens.css exactly,\n * with var(--*) references resolved to their literal target value (TS\n * exports can't reference each other syntactically the way CSS can with\n * var()). The parity test in tokens.test.ts catches drift.\n *\n * color-mix() expressions are resolved to plausible hex approximations\n * — consumers that need exact mixed values should read getComputedStyle\n * from the live DOM rather than relying on these defaults.\n */\nexport const DEFAULT_TOKENS = {\n // Primitive — grays\n '--wzl-gray-50': '#f5f5f6',\n '--wzl-gray-100': '#e6e7e9',\n '--wzl-gray-200': '#c9cbcf',\n '--wzl-gray-300': '#9ea1a8',\n '--wzl-gray-400': '#6f737b',\n '--wzl-gray-500': '#4d5058',\n '--wzl-gray-600': '#383b42',\n '--wzl-gray-700': '#25272c',\n '--wzl-gray-800': '#181a1e',\n '--wzl-gray-900': '#0e0f12',\n\n // Primitive — accent + status\n '--wzl-accent-soft': '#1d1454',\n '--wzl-accent-base': '#2e1f7a',\n '--wzl-accent-strong': '#5841b8',\n '--wzl-danger-base': '#d94a3f',\n '--wzl-warning-base': '#d99a3f',\n '--wzl-success-base': '#2ec27e',\n\n // Geometry\n '--wzl-radius-sm': '3px',\n '--wzl-radius-md': '5px',\n '--wzl-border-w': '1px',\n '--wzl-line-width': '2px',\n '--wzl-curve-width': '3px',\n '--wzl-tb-height': '28px',\n\n // Motion — durations + CSS equivalents of the JS easing library\n '--wzl-motion-fast': '120ms',\n '--wzl-motion-medium': '240ms',\n '--wzl-ease-in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)',\n '--wzl-ease-out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',\n '--wzl-ease-in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',\n '--wzl-ease-out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n\n // Structural lines — three opacity levels of fg. color-mix at runtime;\n // hex approximations here resolve against the dark default fg.\n '--wzl-line-subtle': 'rgba(230, 231, 233, 0.10)',\n '--wzl-line': 'rgba(230, 231, 233, 0.20)',\n '--wzl-line-strong': 'rgba(230, 231, 233, 0.40)',\n\n // Curve color — semantic alias for the accent.\n '--wzl-curve-color': '#5841b8',\n\n // Typography\n '--wzl-font-ui': \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n '--wzl-font-display': \"'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif\",\n '--wzl-font-body': \"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif\",\n '--wzl-font-mono': 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n '--wzl-font-weight-light': '200',\n '--wzl-font-weight-normal': '300',\n '--wzl-font-weight-bold': '400',\n\n // Semantic — surfaces\n '--wzl-surface': '#181a1e',\n '--wzl-surface-raised': '#25272c',\n '--wzl-surface-sunken': '#0e0f12',\n\n // Semantic — text\n '--wzl-fg': '#e6e7e9',\n '--wzl-fg-muted': '#9ea1a8',\n '--wzl-fg-subtle': '#6f737b',\n '--wzl-fg-on-accent': '#f5f5f6',\n\n // Semantic — borders\n '--wzl-border': '#25272c',\n '--wzl-border-strong': '#383b42',\n\n // Semantic — interactive\n '--wzl-accent': '#2e1f7a',\n '--wzl-accent-fg': '#5841b8',\n '--wzl-accent-hover': '#5841b8',\n '--wzl-danger': '#d94a3f',\n '--wzl-warning': '#d99a3f',\n '--wzl-success': '#2ec27e',\n '--wzl-focus-ring': '#5841b8',\n\n // Semantic — glass\n '--wzl-glass-tint': '#2e1f7a',\n\n // Deprecated aliases (kept for older consumers)\n '--wzl-text': '#e6e7e9',\n '--wzl-text-muted': '#9ea1a8',\n '--wzl-bg': '#181a1e',\n '--wzl-muted': '#9ea1a8',\n '--wzl-panel-bg': '#181a1e',\n '--wzl-panel-border': '#25272c',\n '--wzl-input-bg': '#0e0f12',\n '--wzl-track-bg': '#0e0f12',\n '--wzl-track-border': '#25272c',\n '--wzl-thumb-fill': '#9ea1a8',\n '--wzl-thumb-border': '#383b42',\n '--wzl-thumb-text': '#0e0f12',\n '--wzl-button-fill': '#25272c',\n '--wzl-button-fill-hover': '#2f3138',\n '--wzl-button-fill-pressed': '#363941',\n '--wzl-button-text': '#e6e7e9',\n} as const;\n\nexport type TokenName = keyof typeof DEFAULT_TOKENS;\n"]}
|
package/dist/tokens.css
CHANGED
|
@@ -39,6 +39,12 @@
|
|
|
39
39
|
--wzl-radius-sm: 3px;
|
|
40
40
|
--wzl-radius-md: 5px;
|
|
41
41
|
--wzl-border-w: 1px;
|
|
42
|
+
/* Standard height for a horizontal toolbar-shaped strip (ActionsBar,
|
|
43
|
+
* OptionsBar, ToggleBar, ToolOptionsBar). Was referenced by all four as
|
|
44
|
+
* `var(--wzl-tb-height, 28px)` without ever being defined here — the
|
|
45
|
+
* fallback was silently doing the token's job. Defined for real so a
|
|
46
|
+
* consumer overriding it in one place moves every bar consistently. */
|
|
47
|
+
--wzl-tb-height: 28px;
|
|
42
48
|
|
|
43
49
|
/* Motion. Easing names mirror the kit's JS easing library
|
|
44
50
|
* (src/animation/easings.ts) so DOM chrome and canvas animation share
|