@revikornmann/muka-ui 0.5.0 → 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/cli/commands/brand.js +7 -0
- package/cli/commands/init.js +7 -1
- package/cli/templates/CLAUDE.md +18 -4
- package/cli/templates/muka-ui-guidelines.md +20 -0
- package/dist/cjs/components/DataTable/DataTable.js +15 -2
- package/dist/cjs/components/DataTable/DataTable.js.map +1 -1
- package/dist/cjs/components/ListItem/ListItem.css +10 -4
- package/dist/cjs/components/NavigationTransition/NavigationTransition.js +25 -8
- package/dist/cjs/components/NavigationTransition/NavigationTransition.js.map +1 -1
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js +66 -0
- package/dist/cjs/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
- package/dist/cjs/components/ProgressAccordeon/index.js +11 -0
- package/dist/cjs/components/ProgressAccordeon/index.js.map +1 -0
- package/dist/cjs/components/SpecList/SpecList.css +34 -21
- package/dist/cjs/components/SpecList/SpecList.js +9 -3
- package/dist/cjs/components/SpecList/SpecList.js.map +1 -1
- package/dist/cjs/components/index.js +5 -3
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/DataTable/DataTable.js +15 -2
- package/dist/esm/components/DataTable/DataTable.js.map +1 -1
- package/dist/esm/components/ListItem/ListItem.css +10 -4
- package/dist/esm/components/NavigationTransition/NavigationTransition.js +25 -8
- package/dist/esm/components/NavigationTransition/NavigationTransition.js.map +1 -1
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css +207 -0
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js +62 -0
- package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map +1 -0
- package/dist/esm/components/ProgressAccordeon/index.js +3 -0
- package/dist/esm/components/ProgressAccordeon/index.js.map +1 -0
- package/dist/esm/components/SpecList/SpecList.css +34 -21
- package/dist/esm/components/SpecList/SpecList.js +9 -3
- package/dist/esm/components/SpecList/SpecList.js.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/styles/components/ListItem.css +10 -4
- package/dist/styles/components/ProgressAccordeon.css +207 -0
- package/dist/styles/components/SpecList.css +34 -21
- package/dist/styles/fonts/funnel-display-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/funnel-display.LICENSE.txt +93 -0
- package/dist/styles/fonts/funnel-sans-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/funnel-sans.LICENSE.txt +93 -0
- package/dist/styles/fonts/ibm-plex-sans-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/ibm-plex-sans.LICENSE.txt +93 -0
- package/dist/styles/fonts/lora-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/lora.LICENSE.txt +93 -0
- package/dist/styles/fonts/quicksand-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/quicksand.LICENSE.txt +93 -0
- package/dist/styles/fonts/red-hat-display-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/red-hat-display.LICENSE.txt +93 -0
- package/dist/styles/fonts/red-hat-text-latin-wght-normal.woff2 +0 -0
- package/dist/styles/fonts/red-hat-text.LICENSE.txt +93 -0
- package/dist/styles/fonts/yesteryear-latin-400-normal.woff2 +0 -0
- package/dist/styles/fonts/yesteryear.LICENSE.txt +93 -0
- package/dist/styles/fonts-all.css +75 -0
- package/dist/styles/fonts-bouwplan.css +30 -0
- package/dist/styles/fonts-fscl.css +21 -0
- package/dist/styles/fonts-grip.css +21 -0
- package/dist/styles/fonts-muka.css +30 -0
- package/dist/styles/fonts-wireframe.css +5 -0
- package/dist/styles/index.css +2880 -2474
- package/dist/styles/muka-dark.css +2880 -2474
- package/dist/styles/muka-light.css +2880 -2474
- package/dist/styles/tokens-bouwplan-dark.css +150 -5
- package/dist/styles/tokens-bouwplan-light.css +150 -5
- package/dist/styles/tokens-fscl-dark.css +150 -5
- package/dist/styles/tokens-fscl-light.css +150 -5
- package/dist/styles/tokens-grip-dark.css +150 -5
- package/dist/styles/tokens-grip-light.css +150 -5
- package/dist/styles/tokens-muka-dark.css +150 -5
- package/dist/styles/tokens-muka-light.css +150 -5
- package/dist/styles/tokens-wireframe-dark.css +150 -5
- package/dist/styles/tokens-wireframe-light.css +150 -5
- package/dist/styles/wireframe-dark.css +3304 -2930
- package/dist/styles/wireframe-light.css +3304 -2930
- package/dist/types/components/DataTable/DataTable.d.ts.map +1 -1
- package/dist/types/components/NavigationTransition/NavigationTransition.d.ts +3 -1
- package/dist/types/components/NavigationTransition/NavigationTransition.d.ts.map +1 -1
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts +91 -0
- package/dist/types/components/ProgressAccordeon/ProgressAccordeon.d.ts.map +1 -0
- package/dist/types/components/ProgressAccordeon/index.d.ts +3 -0
- package/dist/types/components/ProgressAccordeon/index.d.ts.map +1 -0
- package/dist/types/components/SpecList/SpecList.d.ts +13 -5
- package/dist/types/components/SpecList/SpecList.d.ts.map +1 -1
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/components/index.d.ts.map +1 -1
- package/docs/consumers/setup-instructions.md +22 -3
- package/package.json +12 -2
- package/scripts/build-fonts.js +248 -0
- package/scripts/build-tokens.js +12 -1
- package/tokens/t1-primitives/color.json +400 -0
- package/tokens/t1-primitives/motion.json +21 -0
- package/tokens/t2-alias/base.json +17 -0
- package/tokens/t2-alias/brand/bouwplan/dark.json +15 -1
- package/tokens/t2-alias/brand/bouwplan/light.json +15 -1
- package/tokens/t2-alias/brand/fscl/dark.json +15 -1
- package/tokens/t2-alias/brand/fscl/light.json +15 -1
- package/tokens/t2-alias/brand/grip/dark.json +51 -1
- package/tokens/t2-alias/brand/grip/light.json +51 -1
- package/tokens/t2-alias/brand/muka/dark.json +51 -1
- package/tokens/t2-alias/brand/muka/light.json +51 -1
- package/tokens/t2-alias/brand/wireframe/dark.json +51 -1
- package/tokens/t2-alias/brand/wireframe/light.json +51 -1
- package/tokens/t3-semantics/ui.json +25 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,8 +7,10 @@ export interface NavigationTransitionProps {
|
|
|
7
7
|
activeKey: string;
|
|
8
8
|
/** Direction of the navigation transition */
|
|
9
9
|
direction: 'forward' | 'back';
|
|
10
|
-
/** Animation duration in ms
|
|
10
|
+
/** Animation duration in ms. Defaults to the --motion-duration-view token value. */
|
|
11
11
|
duration?: number;
|
|
12
|
+
/** CSS easing string. Defaults to the spring easing (--motion-easing-enter token value). */
|
|
13
|
+
easing?: string;
|
|
12
14
|
/** Additional CSS classes */
|
|
13
15
|
className?: string;
|
|
14
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationTransition.d.ts","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"NavigationTransition.d.ts","sourceRoot":"","sources":["../../../../components/NavigationTransition/NavigationTransition.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,4BAA4B,CAAC;AAKpC,MAAM,WAAW,yBAAyB;IACxC,2CAA2C;IAC3C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;IAElB,6CAA6C;IAC7C,SAAS,EAAE,SAAS,GAAG,MAAM,CAAC;IAE9B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA8GpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './ProgressAccordeon.css';
|
|
3
|
+
export type ProgressAccordeonState = 'past' | 'current' | 'upcoming';
|
|
4
|
+
export interface ProgressAccordeonAction {
|
|
5
|
+
/** Button label */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Click handler */
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
/** Disabled state */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface ProgressAccordeonProps {
|
|
13
|
+
/**
|
|
14
|
+
* Step state:
|
|
15
|
+
* - `past` — completed step (check indicator, editable, collapsible content)
|
|
16
|
+
* - `current` — active step (numbered accent indicator, content, actions)
|
|
17
|
+
* - `upcoming` — future step (numbered muted indicator, header only)
|
|
18
|
+
*/
|
|
19
|
+
state: ProgressAccordeonState;
|
|
20
|
+
/** Step number shown in the indicator for `current` and `upcoming` states (1-indexed) */
|
|
21
|
+
stepNumber: number;
|
|
22
|
+
/** Step heading text */
|
|
23
|
+
heading: string;
|
|
24
|
+
/**
|
|
25
|
+
* Optional supporting description rendered below the heading (aligned under the
|
|
26
|
+
* heading text). Hidden while a `past` step is collapsed.
|
|
27
|
+
*/
|
|
28
|
+
description?: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Slot content — rendered directly for `past` (when expanded) and `current`
|
|
31
|
+
* states. Optional: supply your own `Card` (or any node) as the content.
|
|
32
|
+
*/
|
|
33
|
+
children?: React.ReactNode;
|
|
34
|
+
/** Show the trailing divider (default: true) */
|
|
35
|
+
divider?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Collapsed state for the `past` step (default: false). When collapsed the
|
|
38
|
+
* content slot is hidden and the toggle shows a down-chevron. Ignored for
|
|
39
|
+
* `current` and `upcoming`.
|
|
40
|
+
*/
|
|
41
|
+
collapsed?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Toggle handler for the `past` step. When provided, renders a chevron
|
|
44
|
+
* button that expands/collapses the step (controlled via `collapsed`).
|
|
45
|
+
*/
|
|
46
|
+
onToggle?: () => void;
|
|
47
|
+
/** Label for the edit button shown in the expanded `past` state (default: "Edit") */
|
|
48
|
+
editLabel?: string;
|
|
49
|
+
/** Edit handler — renders the edit button in the expanded `past` state when provided */
|
|
50
|
+
onEdit?: () => void;
|
|
51
|
+
/** Primary action button shown below the content in the `current` state */
|
|
52
|
+
primaryAction?: ProgressAccordeonAction;
|
|
53
|
+
/** Secondary action button shown below the content in the `current` state */
|
|
54
|
+
secondaryAction?: ProgressAccordeonAction;
|
|
55
|
+
/** Additional CSS classes */
|
|
56
|
+
className?: string;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* ProgressAccordeon Component
|
|
60
|
+
*
|
|
61
|
+
* A single step in a vertical, progress-driven accordion flow. Each step
|
|
62
|
+
* combines a numbered/checked step indicator with a heading and an optional
|
|
63
|
+
* content slot — visualising both progress and the work for a step.
|
|
64
|
+
*
|
|
65
|
+
* States:
|
|
66
|
+
* - **past** — dark check indicator, heading, edit + chevron controls; the
|
|
67
|
+
* content slot collapses/expands via `collapsed` + `onToggle`
|
|
68
|
+
* - **current** — accent numbered indicator, heading, content slot, actions
|
|
69
|
+
* - **upcoming** — muted numbered indicator, heading only
|
|
70
|
+
*
|
|
71
|
+
* Content is passed as `children` (an optional slot) and rendered as-is — supply
|
|
72
|
+
* your own `Card` when you want a card surface. Composes the Button, Icon and
|
|
73
|
+
* Divider primitives and is fully themed through the Muka design token system.
|
|
74
|
+
*
|
|
75
|
+
* Tokens used:
|
|
76
|
+
* - alias.color.accent.{default|contrast} — step indicator fills
|
|
77
|
+
* - color.surface.sunken — upcoming indicator fill
|
|
78
|
+
* - color.text.default.{default|inverse} — indicator glyphs
|
|
79
|
+
* - text.heading.{md|sm} — step heading (responsive)
|
|
80
|
+
* - text.body.base.regular — supporting description
|
|
81
|
+
* - text.label.md.{bold|semibold} — indicator number
|
|
82
|
+
* - spacing.{1|4|6|8} — vertical rhythm and gaps
|
|
83
|
+
*
|
|
84
|
+
* @accessibility
|
|
85
|
+
* - Renders each step as a labelled group with `aria-current="step"` on the
|
|
86
|
+
* active (current) step.
|
|
87
|
+
* - The chevron toggle exposes `aria-expanded`.
|
|
88
|
+
*/
|
|
89
|
+
export declare const ProgressAccordeon: React.FC<ProgressAccordeonProps>;
|
|
90
|
+
export default ProgressAccordeon;
|
|
91
|
+
//# sourceMappingURL=ProgressAccordeon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressAccordeon.d.ts","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,KAAK,EAAE,sBAAsB,CAAC;IAE9B,yFAAyF;IACzF,UAAU,EAAE,MAAM,CAAC;IAEnB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wFAAwF;IACxF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,uBAAuB,CAAC;IAExC,6EAA6E;IAC7E,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAE1C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuK9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -20,11 +20,18 @@ export interface SpecListProps {
|
|
|
20
20
|
/** SpecRow children */
|
|
21
21
|
children: React.ReactNode;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
24
|
-
* - `
|
|
25
|
-
* - `
|
|
23
|
+
* Row layout.
|
|
24
|
+
* - `horizontal` — label and value side by side
|
|
25
|
+
* - `vertical` — label stacked above the value
|
|
26
26
|
*/
|
|
27
|
-
|
|
27
|
+
stacking?: 'horizontal' | 'vertical';
|
|
28
|
+
/**
|
|
29
|
+
* Fixed label column width (horizontal stacking only).
|
|
30
|
+
* - `small` — 80px
|
|
31
|
+
* - `medium` — 120px
|
|
32
|
+
* - `large` — 160px
|
|
33
|
+
*/
|
|
34
|
+
labelWidth?: 'small' | 'medium' | 'large';
|
|
28
35
|
/** Additional CSS classes */
|
|
29
36
|
className?: string;
|
|
30
37
|
}
|
|
@@ -33,7 +40,8 @@ export interface SpecListProps {
|
|
|
33
40
|
*
|
|
34
41
|
* Mobile-friendly alternative to `Table` when displaying flat key/value data
|
|
35
42
|
* (e.g. motorcycle specs, vehicle details). Each row is a `<dt>/<dd>` pair
|
|
36
|
-
* inside a `<dl>` for semantic accessibility.
|
|
43
|
+
* inside a `<dl>` for semantic accessibility. Renders flat — no background,
|
|
44
|
+
* radius, or dividers — so it sits directly on the page surface.
|
|
37
45
|
*/
|
|
38
46
|
export declare const SpecList: React.FC<SpecListProps>;
|
|
39
47
|
export default SpecList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAIxB,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAW1C,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,
|
|
1
|
+
{"version":3,"file":"SpecList.d.ts","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAIxB,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IAEd,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAW1C,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAErC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE1C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAe5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -19,6 +19,7 @@ export { Alert, type AlertProps } from './Alert';
|
|
|
19
19
|
export { Toast, type ToastProps } from './Toast';
|
|
20
20
|
export { EmptyState, type EmptyStateProps } from './EmptyState';
|
|
21
21
|
export { ProgressTracker, type ProgressTrackerProps, type ProgressTrackerStep } from './ProgressTracker';
|
|
22
|
+
export { ProgressAccordeon, type ProgressAccordeonProps, type ProgressAccordeonState, type ProgressAccordeonAction, } from './ProgressAccordeon';
|
|
22
23
|
export { TopBar, type TopBarProps, ControlBar, type ControlBarProps } from './TopBar';
|
|
23
24
|
export { BottomBar, BottomBarTab, type BottomBarProps, type BottomBarTabProps } from './BottomBar';
|
|
24
25
|
export { Dialog, type DialogProps } from './Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,21 +18,40 @@ npm install @revikornmann/muka-ui@latest --save
|
|
|
18
18
|
Import styles and components in your app root:
|
|
19
19
|
|
|
20
20
|
```ts
|
|
21
|
-
import '@revikornmann/muka-ui/styles';
|
|
21
|
+
import '@revikornmann/muka-ui/styles'; // default muka-light — muka fonts included
|
|
22
22
|
import { Button } from '@revikornmann/muka-ui';
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
`
|
|
25
|
+
The default `/styles` bundle — and the pre-bundled `/styles/muka-dark.css` and
|
|
26
|
+
`/styles/wireframe-{light,dark}.css` files — already include that brand's self-hosted
|
|
27
|
+
fonts, so on those themes you need no separate fonts import. Other brands are loaded
|
|
28
|
+
via their raw `tokens-<brand>-<mode>.css` (below), which carries no fonts, so those
|
|
29
|
+
also import `fonts-<brand>.css`.
|
|
30
|
+
|
|
31
|
+
For a brand theme, also load the brand CSS **and the brand's fonts** and set the
|
|
32
|
+
data attributes (replace `bouwplan` with your brand):
|
|
27
33
|
|
|
28
34
|
```ts
|
|
29
35
|
import '@revikornmann/muka-ui/styles/tokens-bouwplan-light.css';
|
|
36
|
+
import '@revikornmann/muka-ui/styles/fonts-bouwplan.css';
|
|
30
37
|
```
|
|
31
38
|
|
|
32
39
|
```html
|
|
33
40
|
<html data-brand="bouwplan" data-theme="light">
|
|
34
41
|
```
|
|
35
42
|
|
|
43
|
+
### Fonts come from Muka — do not load them yourself
|
|
44
|
+
|
|
45
|
+
Muka self-hosts every brand's fonts and ships them as `@font-face` in
|
|
46
|
+
`styles/fonts-<brand>.css` (backed by bundled WOFF2, so they work offline with no
|
|
47
|
+
CDN). Importing that one file is all the wiring you need:
|
|
48
|
+
|
|
49
|
+
- **Do not** load these fonts via `next/font`, a Google Fonts `<link>`, or any
|
|
50
|
+
other loader — you'd ship the bytes twice and risk a name mismatch.
|
|
51
|
+
- **Do not** override the `--*-fontFamily` / `--alias-font-*-family` tokens. The
|
|
52
|
+
font-family names in Muka's tokens are the exact `@font-face` family names, so
|
|
53
|
+
overriding them only breaks the resolution.
|
|
54
|
+
|
|
36
55
|
## 2. Add the auto-update workflow
|
|
37
56
|
|
|
38
57
|
Copy the shipped template into your repo so it stays current with Muka releases:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revikornmann/muka-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Muka Design System - Multi-brand design tokens and React components",
|
|
5
5
|
"main": "dist/cjs/components/index.js",
|
|
6
6
|
"module": "dist/esm/components/index.js",
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"cli",
|
|
30
30
|
"skills",
|
|
31
31
|
"scripts/build-tokens.js",
|
|
32
|
+
"scripts/build-fonts.js",
|
|
32
33
|
"scripts/postinstall-nudge.js",
|
|
33
34
|
"tokens",
|
|
34
35
|
"build/manifest.json",
|
|
@@ -36,8 +37,9 @@
|
|
|
36
37
|
"templates"
|
|
37
38
|
],
|
|
38
39
|
"scripts": {
|
|
39
|
-
"build": "npm run build:tokens && npm run build:components && npm run build:styles",
|
|
40
|
+
"build": "npm run build:tokens && npm run build:fonts && npm run build:components && npm run build:styles",
|
|
40
41
|
"build:tokens": "node scripts/build-tokens.js",
|
|
42
|
+
"build:fonts": "node scripts/build-fonts.js",
|
|
41
43
|
"build:components": "npm run build:esm && npm run build:cjs && npm run build:types",
|
|
42
44
|
"build:styles": "node scripts/build-styles.js",
|
|
43
45
|
"build:esm": "tsc --project tsconfig.esm.json",
|
|
@@ -99,6 +101,14 @@
|
|
|
99
101
|
"devDependencies": {
|
|
100
102
|
"@eslint/js": "^9.39.4",
|
|
101
103
|
"@figma/code-connect": "^1.3.8",
|
|
104
|
+
"@fontsource-variable/funnel-display": "^5.2.8",
|
|
105
|
+
"@fontsource-variable/funnel-sans": "^5.2.8",
|
|
106
|
+
"@fontsource-variable/ibm-plex-sans": "^5.2.8",
|
|
107
|
+
"@fontsource-variable/lora": "^5.2.8",
|
|
108
|
+
"@fontsource-variable/quicksand": "^5.2.10",
|
|
109
|
+
"@fontsource-variable/red-hat-display": "^5.2.8",
|
|
110
|
+
"@fontsource-variable/red-hat-text": "^5.2.8",
|
|
111
|
+
"@fontsource/yesteryear": "^5.2.8",
|
|
102
112
|
"@playwright/test": "^1.56.1",
|
|
103
113
|
"@storybook/addon-a11y": "^10.3.4",
|
|
104
114
|
"@storybook/addon-designs": "^11.1.3",
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Build Fonts Script
|
|
5
|
+
*
|
|
6
|
+
* Self-hosts the brand fonts so muka's typography works with ZERO consumer wiring.
|
|
7
|
+
*
|
|
8
|
+
* muka's token CSS declares font-family *names* (e.g. `Red Hat Text`, `Funnel Display`)
|
|
9
|
+
* but ships no way to *load* them. This script closes that gap: it reads each brand's
|
|
10
|
+
* font source-of-truth (`tokens/t2-alias/brand/<brand>/fonts.json`), and for every web
|
|
11
|
+
* font a brand references it:
|
|
12
|
+
* 1. copies the latin-subset WOFF2 (from the vendored @fontsource packages) into
|
|
13
|
+
* `styles/fonts/`, plus the family's OFL license file, and
|
|
14
|
+
* 2. emits `styles/fonts-<brand>.css` with an `@font-face` declared under the exact
|
|
15
|
+
* literal family name the tokens use (so the token `var(--*-fontFamily)` resolves).
|
|
16
|
+
* It also emits an aggregate `styles/fonts-all.css` (every face once) for Storybook and
|
|
17
|
+
* optional multi-brand consumers.
|
|
18
|
+
*
|
|
19
|
+
* The `@font-face` family names are DERIVED FROM the same source as the token literals,
|
|
20
|
+
* so they can never drift: if a brand references a web font with no registry entry (and
|
|
21
|
+
* it isn't a known system font), the build THROWS.
|
|
22
|
+
*
|
|
23
|
+
* Outputs are committed to the repo (like the generated `styles/tokens-*.css`), so
|
|
24
|
+
* Storybook and offline installs work with no build step.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
const fs = require('fs');
|
|
28
|
+
const path = require('path');
|
|
29
|
+
|
|
30
|
+
const ROOT_DIR = path.resolve(__dirname, '..');
|
|
31
|
+
const BRANDS_DIR = path.join(ROOT_DIR, 'tokens', 't2-alias', 'brand');
|
|
32
|
+
const NODE_MODULES = path.join(ROOT_DIR, 'node_modules');
|
|
33
|
+
const FONTS_OUT_DIR = path.join(ROOT_DIR, 'styles', 'fonts');
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Standard Google/Fontsource "latin" subset unicode-range. Identical across every
|
|
37
|
+
* @fontsource(-variable) package we bundle.
|
|
38
|
+
*/
|
|
39
|
+
const LATIN_UNICODE_RANGE =
|
|
40
|
+
'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,' +
|
|
41
|
+
'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD';
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Font registry — the single mapping from a token font-family *name* to the WOFF2 source
|
|
45
|
+
* that backs it. Keyed by the exact literal used in the brand `fonts.json` files.
|
|
46
|
+
*
|
|
47
|
+
* `variable: true` → weight range read from the package's metadata `variable.wght`.
|
|
48
|
+
* `variable: false` → static single weight (`weight`).
|
|
49
|
+
*
|
|
50
|
+
* To add a new brand web font: add its family here (any brand that references a font not
|
|
51
|
+
* listed here and not in SYSTEM_FONTS will fail the build).
|
|
52
|
+
*/
|
|
53
|
+
const FONT_REGISTRY = {
|
|
54
|
+
'Funnel Display': { pkg: '@fontsource-variable/funnel-display', file: 'funnel-display-latin-wght-normal.woff2', variable: true },
|
|
55
|
+
'Funnel Sans': { pkg: '@fontsource-variable/funnel-sans', file: 'funnel-sans-latin-wght-normal.woff2', variable: true },
|
|
56
|
+
'Red Hat Display': { pkg: '@fontsource-variable/red-hat-display', file: 'red-hat-display-latin-wght-normal.woff2', variable: true },
|
|
57
|
+
'Red Hat Text': { pkg: '@fontsource-variable/red-hat-text', file: 'red-hat-text-latin-wght-normal.woff2', variable: true },
|
|
58
|
+
Quicksand: { pkg: '@fontsource-variable/quicksand', file: 'quicksand-latin-wght-normal.woff2', variable: true },
|
|
59
|
+
'IBM Plex Sans': { pkg: '@fontsource-variable/ibm-plex-sans', file: 'ibm-plex-sans-latin-wght-normal.woff2', variable: true },
|
|
60
|
+
Lora: { pkg: '@fontsource-variable/lora', file: 'lora-latin-wght-normal.woff2', variable: true },
|
|
61
|
+
Yesteryear: { pkg: '@fontsource/yesteryear', file: 'yesteryear-latin-400-normal.woff2', variable: false, weight: 400 },
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* System / generic families that are intentionally NOT self-hosted (the OS provides them).
|
|
66
|
+
* Compared case-insensitively against the first face of each role. Anything that is
|
|
67
|
+
* neither here nor in FONT_REGISTRY triggers the drift guard.
|
|
68
|
+
*/
|
|
69
|
+
const SYSTEM_FONTS = new Set(
|
|
70
|
+
[
|
|
71
|
+
'Helvetica', 'Arial', 'Menlo', 'Lucida Console', 'Times New Roman', 'Courier New',
|
|
72
|
+
'Georgia', 'Verdana', 'Tahoma', 'Trebuchet MS',
|
|
73
|
+
'ui-sans-serif', 'ui-serif', 'ui-monospace', 'ui-rounded',
|
|
74
|
+
'system-ui', 'sans-serif', 'serif', 'monospace', 'cursive',
|
|
75
|
+
'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
|
|
76
|
+
'SFMono-Regular', 'SF Mono', 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
77
|
+
].map((f) => f.toLowerCase())
|
|
78
|
+
);
|
|
79
|
+
|
|
80
|
+
const FONT_ROLES = ['brand', 'plain', 'mono', 'script'];
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Parse the primary (first) face name out of a token font-family value, which may be a
|
|
84
|
+
* full CSS stack like `'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif`.
|
|
85
|
+
*/
|
|
86
|
+
function primaryFace(familyValue) {
|
|
87
|
+
if (!familyValue || typeof familyValue !== 'string') return null;
|
|
88
|
+
const first = familyValue.split(',')[0].trim();
|
|
89
|
+
return first.replace(/^['"]|['"]$/g, '').trim();
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Read a brand's fonts.json and return the deduped set of primary faces it uses.
|
|
94
|
+
*/
|
|
95
|
+
function brandFaces(brand) {
|
|
96
|
+
const fontsJsonPath = path.join(BRANDS_DIR, brand, 'fonts.json');
|
|
97
|
+
const data = JSON.parse(fs.readFileSync(fontsJsonPath, 'utf8'));
|
|
98
|
+
const font = data && data.alias && data.alias.font;
|
|
99
|
+
if (!font) throw new Error(`${brand}/fonts.json: missing alias.font`);
|
|
100
|
+
|
|
101
|
+
const faces = [];
|
|
102
|
+
for (const role of FONT_ROLES) {
|
|
103
|
+
const value = font[role] && font[role].family && font[role].family.$value;
|
|
104
|
+
const face = primaryFace(value);
|
|
105
|
+
if (face && !faces.includes(face)) faces.push(face);
|
|
106
|
+
}
|
|
107
|
+
return faces;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Resolve the web-font faces for a brand (registry entries only). System faces are
|
|
112
|
+
* dropped; unknown faces throw — this is the anti-drift guard.
|
|
113
|
+
*/
|
|
114
|
+
function webFontsForBrand(brand, faces) {
|
|
115
|
+
const webFonts = [];
|
|
116
|
+
for (const face of faces) {
|
|
117
|
+
if (FONT_REGISTRY[face]) {
|
|
118
|
+
webFonts.push(face);
|
|
119
|
+
} else if (SYSTEM_FONTS.has(face.toLowerCase())) {
|
|
120
|
+
// Intentionally system-provided — nothing to self-host.
|
|
121
|
+
} else {
|
|
122
|
+
throw new Error(
|
|
123
|
+
`Font drift: brand "${brand}" references font "${face}" which has no @font-face ` +
|
|
124
|
+
`source. Add it to FONT_REGISTRY in scripts/build-fonts.js (with a matching ` +
|
|
125
|
+
`@fontsource dev dependency) or add it to SYSTEM_FONTS if it is OS-provided.`
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
return webFonts;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/** Read the variable weight axis (min/max) from a fontsource package's metadata. */
|
|
133
|
+
function weightRange(entry) {
|
|
134
|
+
const metaPath = path.join(NODE_MODULES, entry.pkg, 'metadata.json');
|
|
135
|
+
const meta = JSON.parse(fs.readFileSync(metaPath, 'utf8'));
|
|
136
|
+
const wght = meta.variable && meta.variable.wght;
|
|
137
|
+
if (!wght) throw new Error(`${entry.pkg}: no variable.wght axis in metadata.json`);
|
|
138
|
+
return `${wght.min} ${wght.max}`;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/** Copy a family's WOFF2 + LICENSE into styles/fonts/. Returns the woff2 basename. */
|
|
142
|
+
function vendorFontFiles(face) {
|
|
143
|
+
const entry = FONT_REGISTRY[face];
|
|
144
|
+
const srcWoff2 = path.join(NODE_MODULES, entry.pkg, 'files', entry.file);
|
|
145
|
+
if (!fs.existsSync(srcWoff2)) {
|
|
146
|
+
throw new Error(`Missing WOFF2 for "${face}": ${srcWoff2} (is ${entry.pkg} installed?)`);
|
|
147
|
+
}
|
|
148
|
+
fs.copyFileSync(srcWoff2, path.join(FONTS_OUT_DIR, entry.file));
|
|
149
|
+
|
|
150
|
+
// Ship the OFL license alongside the font. Name it after the package slug.
|
|
151
|
+
const srcLicense = path.join(NODE_MODULES, entry.pkg, 'LICENSE');
|
|
152
|
+
if (fs.existsSync(srcLicense)) {
|
|
153
|
+
const slug = entry.pkg.split('/').pop();
|
|
154
|
+
fs.copyFileSync(srcLicense, path.join(FONTS_OUT_DIR, `${slug}.LICENSE.txt`));
|
|
155
|
+
} else {
|
|
156
|
+
console.warn(` ⚠️ No LICENSE found for ${entry.pkg}`);
|
|
157
|
+
}
|
|
158
|
+
return entry.file;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/** Build one `@font-face` block for a face (relative url, latin subset, swap). */
|
|
162
|
+
function fontFaceBlock(face) {
|
|
163
|
+
const entry = FONT_REGISTRY[face];
|
|
164
|
+
const weight = entry.variable ? weightRange(entry) : String(entry.weight);
|
|
165
|
+
return [
|
|
166
|
+
'@font-face {',
|
|
167
|
+
` font-family: '${face}';`,
|
|
168
|
+
` font-style: normal;`,
|
|
169
|
+
` font-weight: ${weight};`,
|
|
170
|
+
` font-display: swap;`,
|
|
171
|
+
` src: url('./fonts/${entry.file}') format('woff2');`,
|
|
172
|
+
` unicode-range: ${LATIN_UNICODE_RANGE};`,
|
|
173
|
+
'}',
|
|
174
|
+
].join('\n');
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
function cssHeader(title) {
|
|
178
|
+
return [
|
|
179
|
+
`/* Muka UI - ${title} */`,
|
|
180
|
+
'/* Generated by build-fonts.js - DO NOT EDIT */',
|
|
181
|
+
'/* Self-hosted brand fonts (SIL OFL). See ./fonts/*.LICENSE.txt */',
|
|
182
|
+
'',
|
|
183
|
+
'',
|
|
184
|
+
].join('\n');
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
function buildFonts() {
|
|
188
|
+
console.log('🔤 Building self-hosted brand fonts...\n');
|
|
189
|
+
|
|
190
|
+
// Clean + recreate the vendored fonts dir so dropped fonts never linger.
|
|
191
|
+
fs.rmSync(FONTS_OUT_DIR, { recursive: true, force: true });
|
|
192
|
+
fs.mkdirSync(FONTS_OUT_DIR, { recursive: true });
|
|
193
|
+
|
|
194
|
+
const brands = fs
|
|
195
|
+
.readdirSync(BRANDS_DIR, { withFileTypes: true })
|
|
196
|
+
.filter((d) => d.isDirectory())
|
|
197
|
+
.map((d) => d.name)
|
|
198
|
+
.sort();
|
|
199
|
+
|
|
200
|
+
const allFaces = new Set();
|
|
201
|
+
const vendored = new Set();
|
|
202
|
+
|
|
203
|
+
for (const brand of brands) {
|
|
204
|
+
const faces = brandFaces(brand);
|
|
205
|
+
const webFonts = webFontsForBrand(brand, faces);
|
|
206
|
+
|
|
207
|
+
let css = cssHeader(`${brand} fonts`);
|
|
208
|
+
if (webFonts.length === 0) {
|
|
209
|
+
css += `/* ${brand} uses only system fonts — nothing to self-host. */\n`;
|
|
210
|
+
} else {
|
|
211
|
+
for (const face of webFonts) {
|
|
212
|
+
if (!vendored.has(face)) {
|
|
213
|
+
vendorFontFiles(face);
|
|
214
|
+
vendored.add(face);
|
|
215
|
+
}
|
|
216
|
+
allFaces.add(face);
|
|
217
|
+
css += fontFaceBlock(face) + '\n\n';
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
const outPath = path.join(ROOT_DIR, 'styles', `fonts-${brand}.css`);
|
|
222
|
+
fs.writeFileSync(outPath, css.trimEnd() + '\n');
|
|
223
|
+
console.log(
|
|
224
|
+
` ✅ fonts-${brand}.css (${webFonts.length ? webFonts.join(', ') : 'system fonts only'})`
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// Aggregate: every face once, for Storybook + optional multi-brand consumers.
|
|
229
|
+
let allCss = cssHeader('all brand fonts (aggregate)');
|
|
230
|
+
for (const face of [...allFaces].sort()) {
|
|
231
|
+
allCss += fontFaceBlock(face) + '\n\n';
|
|
232
|
+
}
|
|
233
|
+
fs.writeFileSync(path.join(ROOT_DIR, 'styles', 'fonts-all.css'), allCss.trimEnd() + '\n');
|
|
234
|
+
console.log(` ✅ fonts-all.css (${allFaces.size} faces)`);
|
|
235
|
+
|
|
236
|
+
console.log('\n🎉 Fonts build complete!');
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (require.main === module) {
|
|
240
|
+
try {
|
|
241
|
+
buildFonts();
|
|
242
|
+
} catch (err) {
|
|
243
|
+
console.error(`\n❌ ${err.message}`);
|
|
244
|
+
process.exit(1);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
module.exports = { buildFonts, FONT_REGISTRY, SYSTEM_FONTS };
|
package/scripts/build-tokens.js
CHANGED
|
@@ -239,7 +239,10 @@ class TokenBuilder {
|
|
|
239
239
|
|
|
240
240
|
// Layout mode forcing (for Storybook / design tools)
|
|
241
241
|
css += this.generateLayoutModeCSS(tokens);
|
|
242
|
-
|
|
242
|
+
|
|
243
|
+
// Accessibility: zero out motion durations when user prefers reduced motion
|
|
244
|
+
css += this.generateReducedMotionCSS(selector);
|
|
245
|
+
|
|
243
246
|
// Add root fallback for default theme
|
|
244
247
|
if (brand === 'muka' && theme === 'light') {
|
|
245
248
|
css += '\n/* Default theme fallback */\n:root {\n';
|
|
@@ -255,6 +258,9 @@ class TokenBuilder {
|
|
|
255
258
|
|
|
256
259
|
// Layout mode forcing for :root fallback
|
|
257
260
|
css += this.generateLayoutModeCSS(tokens);
|
|
261
|
+
|
|
262
|
+
// Accessibility: reduced motion for :root fallback
|
|
263
|
+
css += this.generateReducedMotionCSS(':root');
|
|
258
264
|
}
|
|
259
265
|
|
|
260
266
|
return css;
|
|
@@ -386,6 +392,11 @@ class TokenBuilder {
|
|
|
386
392
|
return css;
|
|
387
393
|
}
|
|
388
394
|
|
|
395
|
+
// Generate @media (prefers-reduced-motion: reduce) block that zeros out motion durations
|
|
396
|
+
generateReducedMotionCSS(selector) {
|
|
397
|
+
return `\n/* Accessibility: disable motion for users who prefer reduced motion */\n@media (prefers-reduced-motion: reduce) {\n ${selector} {\n --motion-duration-micro: 0ms;\n --motion-duration-component: 0ms;\n --motion-duration-view: 0ms;\n }\n}\n`;
|
|
398
|
+
}
|
|
399
|
+
|
|
389
400
|
// Build tokens for Storybook
|
|
390
401
|
async build() {
|
|
391
402
|
console.log('🚀 Building design tokens for Storybook...\n');
|