@juwel-development/design-system 0.1.2 → 0.2.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/LICENSE +21 -0
- package/README.md +86 -66
- package/dist/design-system.js +110 -18
- package/dist/index.css +2 -1
- package/dist/types/Interaction/Button/Button.d.ts +39 -0
- package/dist/types/Theme/Palette.d.ts +59 -0
- package/dist/types/Theme/renderTokens.d.ts +6 -0
- package/dist/types/index.d.ts +5 -1
- package/package.json +70 -36
- package/src/Interaction/Button/Button.tsx +85 -0
- package/src/Theme/Palette.ts +116 -0
- package/src/Theme/renderTokens.ts +49 -0
- package/src/index.ts +6 -0
- package/src/styles.css +9 -0
- package/src/tokens.css +76 -0
- package/dist/design-system.js.map +0 -1
- package/dist/design-system.umd.cjs +0 -3
- package/dist/design-system.umd.cjs.map +0 -1
- package/dist/types/Interaction/Button.d.ts +0 -26
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 JuweL development
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,69 +1,89 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
// Alternatively, use this for stricter rules
|
|
25
|
-
...tseslint.configs.strictTypeChecked,
|
|
26
|
-
// Optionally, add this for stylistic rules
|
|
27
|
-
...tseslint.configs.stylisticTypeChecked,
|
|
28
|
-
|
|
29
|
-
// Other configs...
|
|
30
|
-
],
|
|
31
|
-
languageOptions: {
|
|
32
|
-
parserOptions: {
|
|
33
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
34
|
-
tsconfigRootDir: import.meta.dirname,
|
|
35
|
-
},
|
|
36
|
-
// other options...
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
])
|
|
1
|
+
# @juwel-development/design-system
|
|
2
|
+
|
|
3
|
+
Shared design system: semantic colour tokens and React components, used across the
|
|
4
|
+
JuweL Development projects.
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @juwel-development/design-system
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
`react`, `react-dom` and `rxjs` are peer dependencies - the consumer provides them.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { Button } from '@juwel-development/design-system';
|
|
18
|
+
import '@juwel-development/design-system/styles.css';
|
|
19
|
+
import { Subject } from 'rxjs';
|
|
20
|
+
|
|
21
|
+
const save$ = new Subject<void>();
|
|
22
|
+
|
|
23
|
+
<Button variant={'primary'} onClick$={save$}>Save</Button>;
|
|
40
24
|
```
|
|
41
25
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
export default tseslint.config([
|
|
50
|
-
globalIgnores(['dist']),
|
|
51
|
-
{
|
|
52
|
-
files: ['**/*.{ts,tsx}'],
|
|
53
|
-
extends: [
|
|
54
|
-
// Other configs...
|
|
55
|
-
// Enable lint rules for React
|
|
56
|
-
reactX.configs['recommended-typescript'],
|
|
57
|
-
// Enable lint rules for React DOM
|
|
58
|
-
reactDom.configs.recommended,
|
|
59
|
-
],
|
|
60
|
-
languageOptions: {
|
|
61
|
-
parserOptions: {
|
|
62
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
63
|
-
tsconfigRootDir: import.meta.dirname,
|
|
64
|
-
},
|
|
65
|
-
// other options...
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
])
|
|
26
|
+
Components take a `Subject` rather than a callback, so a click is an event stream the
|
|
27
|
+
consumer composes with the rest of its reactive code.
|
|
28
|
+
|
|
29
|
+
If the host already imports Tailwind and only wants the palette, take the tokens alone:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
@import "@juwel-development/design-system/tokens.css";
|
|
69
33
|
```
|
|
34
|
+
|
|
35
|
+
## Theming
|
|
36
|
+
|
|
37
|
+
Colour is addressed by **role**, never by shade - `bg-primary`, `text-muted`,
|
|
38
|
+
`border-border`. No component contains a `dark:` class: `src/tokens.css` declares one
|
|
39
|
+
complete set of values under `:root` and another under `.dark`, so toggling that class
|
|
40
|
+
on an ancestor re-points every token underneath it.
|
|
41
|
+
|
|
42
|
+
A product re-themes the whole system by supplying its own values for the same role
|
|
43
|
+
names, which is what lets one design system serve several brands.
|
|
44
|
+
|
|
45
|
+
### Changing the palette
|
|
46
|
+
|
|
47
|
+
`src/Theme/Palette.ts` is the single source of truth. `src/tokens.css` is generated
|
|
48
|
+
from it:
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm run build:tokens
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
The generated file is committed, and a test pins it to the palette - editing the
|
|
55
|
+
palette without regenerating fails the suite rather than shipping stale colours.
|
|
56
|
+
|
|
57
|
+
## Development
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm run storybook # component workbench on :6006, with a light/dark switcher
|
|
61
|
+
npm run test # vitest
|
|
62
|
+
npm run lint # biome (use lint:fix to apply)
|
|
63
|
+
npm run typecheck # tsc
|
|
64
|
+
npm run build # library bundle + type declarations
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Structure
|
|
68
|
+
|
|
69
|
+
Components are grouped by what they do, one folder each:
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
src/<Category>/<Component>/<Component>.tsx
|
|
73
|
+
<Component>.stories.tsx
|
|
74
|
+
<Component>.spec.tsx
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
`Category` is `Interaction`, `Display` or `Layout`. Imports inside `src` are written
|
|
78
|
+
from the source root (`Interaction/Button/Button`), not relatively.
|
|
79
|
+
|
|
80
|
+
## Releasing
|
|
81
|
+
|
|
82
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org/) - the type
|
|
83
|
+
prefix decides the next version, so `fix:` is a patch, `feat:` a minor, and a
|
|
84
|
+
`BREAKING CHANGE:` footer a major. A `commit-msg` hook checks this locally and CI
|
|
85
|
+
checks it again on pull requests.
|
|
86
|
+
|
|
87
|
+
Merging to `main` runs semantic-release, which works out the version from those
|
|
88
|
+
messages, writes `CHANGELOG.md`, tags the commit, publishes to npm and opens a GitHub
|
|
89
|
+
release with the generated notes. No version number is set by hand.
|
package/dist/design-system.js
CHANGED
|
@@ -1,19 +1,111 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import './index.css'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import './index.css';//#region node_modules/clsx/dist/clsx.mjs
|
|
3
|
+
function t(e) {
|
|
4
|
+
var n, r, i = "";
|
|
5
|
+
if (typeof e == "string" || typeof e == "number") i += e;
|
|
6
|
+
else if (typeof e == "object") {
|
|
7
|
+
if (Array.isArray(e)) {
|
|
8
|
+
var a = e.length;
|
|
9
|
+
for (n = 0; n < a; n++) e[n] && (r = t(e[n])) && (i && (i += " "), i += r);
|
|
10
|
+
} else for (r in e) e[r] && (i && (i += " "), i += r);
|
|
11
|
+
}
|
|
12
|
+
return i;
|
|
13
|
+
}
|
|
14
|
+
function n() {
|
|
15
|
+
for (var e, n, r = 0, i = "", a = arguments.length; r < a; r++) (e = arguments[r]) && (n = t(e)) && (i && (i += " "), i += n);
|
|
16
|
+
return i;
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region node_modules/class-variance-authority/dist/index.mjs
|
|
20
|
+
var r = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, i = n, a = ((e, t) => (n) => {
|
|
21
|
+
if (t?.variants == null) return i(e, n?.class, n?.className);
|
|
22
|
+
let { variants: a, defaultVariants: o } = t, s = Object.keys(a).map((e) => {
|
|
23
|
+
let t = n?.[e], i = o?.[e];
|
|
24
|
+
if (t === null) return null;
|
|
25
|
+
let s = r(t) || r(i);
|
|
26
|
+
return a[e][s];
|
|
27
|
+
}), c = n && Object.entries(n).reduce((e, t) => {
|
|
28
|
+
let [n, r] = t;
|
|
29
|
+
return r === void 0 || (e[n] = r), e;
|
|
30
|
+
}, {});
|
|
31
|
+
return i(e, s, t?.compoundVariants?.reduce((e, t) => {
|
|
32
|
+
let { class: n, className: r, ...i } = t;
|
|
33
|
+
return Object.entries(i).every((e) => {
|
|
34
|
+
let [t, n] = e;
|
|
35
|
+
return Array.isArray(n) ? n.includes({
|
|
36
|
+
...o,
|
|
37
|
+
...c
|
|
38
|
+
}[t]) : {
|
|
39
|
+
...o,
|
|
40
|
+
...c
|
|
41
|
+
}[t] === n;
|
|
42
|
+
}) ? [
|
|
43
|
+
...e,
|
|
44
|
+
n,
|
|
45
|
+
r
|
|
46
|
+
] : e;
|
|
47
|
+
}, []), n?.class, n?.className);
|
|
48
|
+
})("py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover disabled:shadow-none cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface", {
|
|
49
|
+
variants: {
|
|
50
|
+
variant: {
|
|
51
|
+
primary: "px-4 sm:px-6 min-w-42 bg-primary shadow-sm text-primary-foreground rounded-lg transition-all duration-200 hover:bg-primary-hover hover:shadow-md active:shadow-none active:translate-y-px focus-visible:ring-primary-ring",
|
|
52
|
+
secondary: "px-4 sm:px-6 min-w-42 bg-secondary shadow-sm text-secondary-foreground rounded-lg transition-all duration-200 hover:bg-secondary-hover hover:shadow-md active:shadow-none active:translate-y-px focus-visible:ring-secondary-ring",
|
|
53
|
+
ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline transition-all duration-200 focus-visible:ring-ring"
|
|
54
|
+
},
|
|
55
|
+
shadow: { none: "shadow-none hover:shadow-none" }
|
|
56
|
+
},
|
|
57
|
+
defaultVariants: { variant: "primary" }
|
|
58
|
+
}), o = ({ children: t, disabled: n, testId: r, variant: i, shadow: o, onClick$: s, ariaLabel: c, type: l = "button" }) => /* @__PURE__ */ e("button", {
|
|
59
|
+
type: l,
|
|
60
|
+
"data-testid": r,
|
|
61
|
+
className: a({
|
|
62
|
+
variant: i,
|
|
63
|
+
shadow: o
|
|
64
|
+
}),
|
|
65
|
+
onClick: () => s?.next(),
|
|
66
|
+
disabled: n,
|
|
67
|
+
"aria-label": c,
|
|
68
|
+
children: t
|
|
69
|
+
}), s = {
|
|
70
|
+
surface: "#ffffff",
|
|
71
|
+
foreground: "#0f172a",
|
|
72
|
+
muted: "#64748b",
|
|
73
|
+
border: "#e2e8f0",
|
|
74
|
+
primary: "#8b5cf6",
|
|
75
|
+
primaryHover: "#7c3aed",
|
|
76
|
+
primaryForeground: "#f8fafc",
|
|
77
|
+
primaryRing: "#a78bfa",
|
|
78
|
+
secondary: "#0ea5e9",
|
|
79
|
+
secondaryHover: "#0284c7",
|
|
80
|
+
secondaryForeground: "#f8fafc",
|
|
81
|
+
secondaryRing: "#38bdf8",
|
|
82
|
+
disabled: "#94a3b8",
|
|
83
|
+
disabledHover: "#64748b",
|
|
84
|
+
ring: "#94a3b8",
|
|
85
|
+
success: "#10b981",
|
|
86
|
+
warning: "#f59e0b",
|
|
87
|
+
error: "#d63384",
|
|
88
|
+
info: "#06b6d4"
|
|
89
|
+
}, c = {
|
|
90
|
+
surface: "#0f172a",
|
|
91
|
+
foreground: "#f8fafc",
|
|
92
|
+
muted: "#94a3b8",
|
|
93
|
+
border: "#334155",
|
|
94
|
+
primary: "#7c3aed",
|
|
95
|
+
primaryHover: "#8b5cf6",
|
|
96
|
+
primaryForeground: "#f8fafc",
|
|
97
|
+
primaryRing: "#a78bfa",
|
|
98
|
+
secondary: "#0284c7",
|
|
99
|
+
secondaryHover: "#0ea5e9",
|
|
100
|
+
secondaryForeground: "#f8fafc",
|
|
101
|
+
secondaryRing: "#38bdf8",
|
|
102
|
+
disabled: "#475569",
|
|
103
|
+
disabledHover: "#334155",
|
|
104
|
+
ring: "#64748b",
|
|
105
|
+
success: "#34d399",
|
|
106
|
+
warning: "#fbbf24",
|
|
107
|
+
error: "#f48fb1",
|
|
108
|
+
info: "#22d3ee"
|
|
18
109
|
};
|
|
19
|
-
//#
|
|
110
|
+
//#endregion
|
|
111
|
+
export { o as Button, c as dark, s as light };
|
package/dist/index.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-primary-ring:var(--color-primary-ring);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-secondary-ring:var(--color-secondary-ring);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-ring:var(--color-ring);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-info:var(--color-info)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.block{display:block}.contents{display:contents}.inline{display:inline}.inline-flex{display:inline-flex}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-border{border-color:var(--color-border)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-transparent{background-color:#0000}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-nowrap{text-wrap:nowrap}.text-foreground{color:var(--color-foreground)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-primary-ring:focus-visible{--tw-ring-color:var(--color-primary-ring)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-secondary-ring:focus-visible{--tw-ring-color:var(--color-secondary-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-surface:focus-visible{--tw-ring-offset-color:var(--color-surface)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:shadow-none:active{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:py-2{padding-block:calc(var(--spacing) * 2)}}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0ea5e9;--color-secondary-hover:#0284c7;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-ring:#94a3b8;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#d63384;--color-info:#06b6d4}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-primary:#7c3aed;--color-primary-hover:#8b5cf6;--color-primary-foreground:#f8fafc;--color-primary-ring:#a78bfa;--color-secondary:#0284c7;--color-secondary-hover:#0ea5e9;--color-secondary-foreground:#f8fafc;--color-secondary-ring:#38bdf8;--color-disabled:#475569;--color-disabled-hover:#334155;--color-ring:#64748b;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-info:#22d3ee}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import type { FunctionComponent, PropsWithChildren } from 'react';
|
|
3
|
+
import type { Subject } from 'rxjs';
|
|
4
|
+
declare const button: (props?: ({
|
|
5
|
+
variant?: "primary" | "secondary" | "ghost" | null | undefined;
|
|
6
|
+
shadow?: "none" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export interface IButtonProps extends VariantProps<typeof button>, PropsWithChildren {
|
|
9
|
+
onClick$?: Subject<void>;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
testId?: string;
|
|
12
|
+
/** Accessible label for icon-only buttons where there is no visible text */
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
/** Defaults to `button`. Set `submit` for the button that submits a surrounding form -
|
|
15
|
+
* a bare <button> inside a form submits it implicitly, which is rarely what is wanted
|
|
16
|
+
* for the secondary actions sitting next to it. */
|
|
17
|
+
type?: 'button' | 'submit' | 'reset';
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Button component for user interactions.
|
|
21
|
+
*
|
|
22
|
+
* @component
|
|
23
|
+
*
|
|
24
|
+
* @UXGuidelines
|
|
25
|
+
* - Use clear, action-oriented text (e.g., "Save" instead of "OK")
|
|
26
|
+
* - Keep button text concise (1-3 words)
|
|
27
|
+
* - Use primary buttons for main actions, secondary buttons for alternative actions
|
|
28
|
+
* - Maintain consistent button styling throughout the application
|
|
29
|
+
* - Provide visual feedback on hover/active states
|
|
30
|
+
* - Ensure sufficient touch target size (minimum 44x44px) for mobile users
|
|
31
|
+
* - Position primary actions on the right for multi-button layouts
|
|
32
|
+
*
|
|
33
|
+
* @Accessibility
|
|
34
|
+
* - Ensure adequate color contrast (4.5:1 minimum ratio)
|
|
35
|
+
* - Provide focus styles for keyboard navigation
|
|
36
|
+
* - Use appropriate ARIA attributes when needed
|
|
37
|
+
*/
|
|
38
|
+
export declare const Button: FunctionComponent<PropsWithChildren<IButtonProps>>;
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The single source of truth for the palette: every colour the design system uses, exactly once,
|
|
3
|
+
* as a plain hex string. `scripts/build-tokens.ts` renders these into `src/tokens.css` as the
|
|
4
|
+
* CSS-variable layer the Tailwind utilities resolve against.
|
|
5
|
+
*
|
|
6
|
+
* Tokens name a *role*, never a shade. A component asks for `primary` or `muted` and never for a
|
|
7
|
+
* step on a numeric ramp, so a product can re-theme the whole system by supplying its own values
|
|
8
|
+
* for these same names - which is what lets one design system serve several brands.
|
|
9
|
+
*
|
|
10
|
+
* Light and dark are two complete sets of the same roles rather than a set of `dark:` overrides
|
|
11
|
+
* scattered through the components. A component therefore carries no dark-mode classes at all:
|
|
12
|
+
* swapping the `.dark` class re-points the variables underneath it.
|
|
13
|
+
*
|
|
14
|
+
* The values below are still depot-tracker's brand (primary is its violet). They are carried over
|
|
15
|
+
* so nothing changed visually during the extraction - a starting point to replace, not a decision.
|
|
16
|
+
*/
|
|
17
|
+
export type PaletteTokens = {
|
|
18
|
+
/** Page and panel background. */
|
|
19
|
+
surface: string;
|
|
20
|
+
/** Default text colour on `surface`. */
|
|
21
|
+
foreground: string;
|
|
22
|
+
/** De-emphasised text - captions, help text, placeholders. */
|
|
23
|
+
muted: string;
|
|
24
|
+
/** Hairlines and dividers. */
|
|
25
|
+
border: string;
|
|
26
|
+
/** The main call-to-action fill. */
|
|
27
|
+
primary: string;
|
|
28
|
+
primaryHover: string;
|
|
29
|
+
/** Text and icons drawn on top of `primary`. */
|
|
30
|
+
primaryForeground: string;
|
|
31
|
+
/** Focus ring for primary surfaces - lighter than the fill so it reads against it. */
|
|
32
|
+
primaryRing: string;
|
|
33
|
+
/** The alternative action fill, for choices that sit beside a primary one. */
|
|
34
|
+
secondary: string;
|
|
35
|
+
secondaryHover: string;
|
|
36
|
+
secondaryForeground: string;
|
|
37
|
+
secondaryRing: string;
|
|
38
|
+
/** Fill for controls that cannot be interacted with. */
|
|
39
|
+
disabled: string;
|
|
40
|
+
/** Kept distinct from `disabled` so a disabled control still absorbs hover rather than
|
|
41
|
+
* appearing to respond to it. */
|
|
42
|
+
disabledHover: string;
|
|
43
|
+
/** Focus ring for surfaces that have no fill of their own, such as a ghost button. */
|
|
44
|
+
ring: string;
|
|
45
|
+
/** Status colours. Not yet consumed by a component - they complete the role set so the
|
|
46
|
+
* first Alert or Toast has names to reach for instead of inventing them. */
|
|
47
|
+
success: string;
|
|
48
|
+
warning: string;
|
|
49
|
+
error: string;
|
|
50
|
+
info: string;
|
|
51
|
+
};
|
|
52
|
+
export declare const light: PaletteTokens;
|
|
53
|
+
/**
|
|
54
|
+
* Dark reverses the ramp the fills are drawn from: `primary` takes the step that light uses for
|
|
55
|
+
* its hover, and hovering steps *up* into light. That is what the components' old
|
|
56
|
+
* `dark:bg-primary-600 dark:hover:bg-primary-500` pair encoded, moved here so it is stated once
|
|
57
|
+
* for the whole system instead of repeated per component.
|
|
58
|
+
*/
|
|
59
|
+
export declare const dark: PaletteTokens;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Renders the stylesheet form of the palette. Shared by the build script and the test that pins
|
|
3
|
+
* `src/tokens.css` to it, so a palette edit that was never regenerated fails the suite instead of
|
|
4
|
+
* silently shipping stale colours.
|
|
5
|
+
*/
|
|
6
|
+
export declare const renderTokens: () => string;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import './styles.css';
|
|
2
|
+
export type { IButtonProps } from 'Interaction/Button/Button';
|
|
3
|
+
export { Button } from 'Interaction/Button/Button';
|
|
4
|
+
export type { PaletteTokens } from 'Theme/Palette';
|
|
5
|
+
export { dark, light } from 'Theme/Palette';
|
package/package.json
CHANGED
|
@@ -1,56 +1,90 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@juwel-development/design-system",
|
|
3
|
-
"
|
|
4
|
-
"version": "0.1.2",
|
|
3
|
+
"version": "0.2.0",
|
|
5
4
|
"type": "module",
|
|
6
|
-
"description": "
|
|
7
|
-
"
|
|
5
|
+
"description": "Shared design system: tokens and components.",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/juwel-development/LIB-design-system.git"
|
|
10
|
+
},
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"engines": {
|
|
15
|
+
"node": ">=22.12.0"
|
|
16
|
+
},
|
|
17
|
+
"main": "dist/design-system.js",
|
|
8
18
|
"module": "dist/design-system.js",
|
|
9
19
|
"types": "dist/types/index.d.ts",
|
|
10
|
-
"scripts": {
|
|
11
|
-
"build:components": "vite build",
|
|
12
|
-
"build:types": "tsc --emitDeclarationOnly --declarationDir dist/types",
|
|
13
|
-
"dev:types": "tsc --emitDeclarationOnly --declarationDir dist/types --watch",
|
|
14
|
-
"dev:components": "vite build --watch",
|
|
15
|
-
"lint": "biome check",
|
|
16
|
-
"lint:fix": "biome check --write",
|
|
17
|
-
"format": "biome format --write",
|
|
18
|
-
"test": "vitest run",
|
|
19
|
-
"preview": "vite preview"
|
|
20
|
-
},
|
|
21
20
|
"files": [
|
|
22
|
-
"dist"
|
|
21
|
+
"dist",
|
|
22
|
+
"src",
|
|
23
|
+
"!src/**/*.spec.*",
|
|
24
|
+
"!src/**/*.stories.*"
|
|
23
25
|
],
|
|
24
26
|
"exports": {
|
|
25
27
|
".": {
|
|
26
28
|
"types": "./dist/types/index.d.ts",
|
|
27
29
|
"import": "./dist/design-system.js",
|
|
28
|
-
"
|
|
30
|
+
"default": "./dist/design-system.js"
|
|
29
31
|
},
|
|
30
|
-
"./
|
|
32
|
+
"./styles.css": "./src/styles.css",
|
|
33
|
+
"./tokens.css": "./src/tokens.css",
|
|
31
34
|
"./package.json": "./package.json"
|
|
32
35
|
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build:tokens": "tsx scripts/build-tokens.ts",
|
|
38
|
+
"build:components": "vite build",
|
|
39
|
+
"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declarationDir dist/types",
|
|
40
|
+
"build": "npm run build:components && npm run build:types",
|
|
41
|
+
"typecheck": "tsc --noEmit",
|
|
42
|
+
"test": "vitest run",
|
|
43
|
+
"test:coverage": "vitest run --coverage",
|
|
44
|
+
"lint": "biome check .",
|
|
45
|
+
"lint:fix": "biome check --write .",
|
|
46
|
+
"storybook": "storybook dev -p 6006",
|
|
47
|
+
"build-storybook": "storybook build",
|
|
48
|
+
"prepare": "husky"
|
|
49
|
+
},
|
|
33
50
|
"dependencies": {
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
51
|
+
"class-variance-authority": "^0.7.1"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"react": "^19.0.0",
|
|
55
|
+
"react-dom": "^19.0.0",
|
|
56
|
+
"rxjs": "^7.8.2"
|
|
37
57
|
},
|
|
38
58
|
"devDependencies": {
|
|
39
|
-
"@
|
|
40
|
-
"@
|
|
41
|
-
"@
|
|
42
|
-
"@
|
|
43
|
-
"@
|
|
44
|
-
"@
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
59
|
+
"@biomejs/biome": "^2.5.7",
|
|
60
|
+
"@commitlint/cli": "^21.2.1",
|
|
61
|
+
"@commitlint/config-conventional": "^21.2.0",
|
|
62
|
+
"@semantic-release/changelog": "^7.0.0",
|
|
63
|
+
"@semantic-release/git": "^11.0.1",
|
|
64
|
+
"@storybook/addon-a11y": "^10.5.7",
|
|
65
|
+
"@storybook/addon-docs": "^10.5.7",
|
|
66
|
+
"@storybook/addon-themes": "^10.5.7",
|
|
67
|
+
"@storybook/react-vite": "^10.5.7",
|
|
68
|
+
"@tailwindcss/vite": "^4.3.3",
|
|
69
|
+
"@testing-library/jest-dom": "^7.0.0",
|
|
70
|
+
"@testing-library/react": "^16.3.2",
|
|
71
|
+
"@types/node": "^26.0.0",
|
|
72
|
+
"@types/react": "^19.2.18",
|
|
73
|
+
"@types/react-dom": "^19.2.4",
|
|
74
|
+
"@vitejs/plugin-react": "^5.1.0",
|
|
75
|
+
"@vitest/coverage-v8": "^4.1.10",
|
|
76
|
+
"husky": "^9.1.7",
|
|
77
|
+
"jsdom": "^30.0.1",
|
|
78
|
+
"react": "^19.2.8",
|
|
79
|
+
"react-dom": "^19.2.8",
|
|
80
|
+
"rxjs": "^7.8.2",
|
|
81
|
+
"semantic-release": "^25.0.9",
|
|
82
|
+
"storybook": "^10.5.7",
|
|
83
|
+
"tailwindcss": "^4.3.3",
|
|
84
|
+
"tsx": "^4.23.11",
|
|
85
|
+
"typescript": "^5.9.2",
|
|
86
|
+
"vite": "^8.2.1",
|
|
52
87
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
53
|
-
"
|
|
54
|
-
"vitest": "^3.2.4"
|
|
88
|
+
"vitest": "^4.1.10"
|
|
55
89
|
}
|
|
56
90
|
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import type { FunctionComponent, PropsWithChildren } from 'react';
|
|
4
|
+
import type { Subject } from 'rxjs';
|
|
5
|
+
|
|
6
|
+
// No `dark:` classes here by design: every colour below is a semantic token whose value is
|
|
7
|
+
// re-pointed by the `.dark` class in tokens.css, so one set of classes serves both themes.
|
|
8
|
+
const button = cva(
|
|
9
|
+
'py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover disabled:shadow-none cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface',
|
|
10
|
+
{
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
primary:
|
|
14
|
+
'px-4 sm:px-6 min-w-42 bg-primary shadow-sm text-primary-foreground rounded-lg transition-all duration-200 hover:bg-primary-hover hover:shadow-md active:shadow-none active:translate-y-px focus-visible:ring-primary-ring',
|
|
15
|
+
secondary:
|
|
16
|
+
'px-4 sm:px-6 min-w-42 bg-secondary shadow-sm text-secondary-foreground rounded-lg transition-all duration-200 hover:bg-secondary-hover hover:shadow-md active:shadow-none active:translate-y-px focus-visible:ring-secondary-ring',
|
|
17
|
+
ghost:
|
|
18
|
+
'px-2 min-w-0 bg-transparent text-foreground hover:underline transition-all duration-200 focus-visible:ring-ring',
|
|
19
|
+
},
|
|
20
|
+
shadow: {
|
|
21
|
+
none: 'shadow-none hover:shadow-none',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: {
|
|
25
|
+
variant: 'primary',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
export interface IButtonProps
|
|
31
|
+
extends VariantProps<typeof button>,
|
|
32
|
+
PropsWithChildren {
|
|
33
|
+
onClick$?: Subject<void>;
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
testId?: string;
|
|
36
|
+
/** Accessible label for icon-only buttons where there is no visible text */
|
|
37
|
+
ariaLabel?: string;
|
|
38
|
+
/** Defaults to `button`. Set `submit` for the button that submits a surrounding form -
|
|
39
|
+
* a bare <button> inside a form submits it implicitly, which is rarely what is wanted
|
|
40
|
+
* for the secondary actions sitting next to it. */
|
|
41
|
+
type?: 'button' | 'submit' | 'reset';
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Button component for user interactions.
|
|
46
|
+
*
|
|
47
|
+
* @component
|
|
48
|
+
*
|
|
49
|
+
* @UXGuidelines
|
|
50
|
+
* - Use clear, action-oriented text (e.g., "Save" instead of "OK")
|
|
51
|
+
* - Keep button text concise (1-3 words)
|
|
52
|
+
* - Use primary buttons for main actions, secondary buttons for alternative actions
|
|
53
|
+
* - Maintain consistent button styling throughout the application
|
|
54
|
+
* - Provide visual feedback on hover/active states
|
|
55
|
+
* - Ensure sufficient touch target size (minimum 44x44px) for mobile users
|
|
56
|
+
* - Position primary actions on the right for multi-button layouts
|
|
57
|
+
*
|
|
58
|
+
* @Accessibility
|
|
59
|
+
* - Ensure adequate color contrast (4.5:1 minimum ratio)
|
|
60
|
+
* - Provide focus styles for keyboard navigation
|
|
61
|
+
* - Use appropriate ARIA attributes when needed
|
|
62
|
+
*/
|
|
63
|
+
export const Button: FunctionComponent<PropsWithChildren<IButtonProps>> = ({
|
|
64
|
+
children,
|
|
65
|
+
disabled,
|
|
66
|
+
testId,
|
|
67
|
+
variant,
|
|
68
|
+
shadow,
|
|
69
|
+
onClick$,
|
|
70
|
+
ariaLabel,
|
|
71
|
+
type = 'button',
|
|
72
|
+
}) => {
|
|
73
|
+
return (
|
|
74
|
+
<button
|
|
75
|
+
type={type}
|
|
76
|
+
data-testid={testId}
|
|
77
|
+
className={button({ variant, shadow })}
|
|
78
|
+
onClick={() => onClick$?.next()}
|
|
79
|
+
disabled={disabled}
|
|
80
|
+
aria-label={ariaLabel}
|
|
81
|
+
>
|
|
82
|
+
{children}
|
|
83
|
+
</button>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The single source of truth for the palette: every colour the design system uses, exactly once,
|
|
3
|
+
* as a plain hex string. `scripts/build-tokens.ts` renders these into `src/tokens.css` as the
|
|
4
|
+
* CSS-variable layer the Tailwind utilities resolve against.
|
|
5
|
+
*
|
|
6
|
+
* Tokens name a *role*, never a shade. A component asks for `primary` or `muted` and never for a
|
|
7
|
+
* step on a numeric ramp, so a product can re-theme the whole system by supplying its own values
|
|
8
|
+
* for these same names - which is what lets one design system serve several brands.
|
|
9
|
+
*
|
|
10
|
+
* Light and dark are two complete sets of the same roles rather than a set of `dark:` overrides
|
|
11
|
+
* scattered through the components. A component therefore carries no dark-mode classes at all:
|
|
12
|
+
* swapping the `.dark` class re-points the variables underneath it.
|
|
13
|
+
*
|
|
14
|
+
* The values below are still depot-tracker's brand (primary is its violet). They are carried over
|
|
15
|
+
* so nothing changed visually during the extraction - a starting point to replace, not a decision.
|
|
16
|
+
*/
|
|
17
|
+
export type PaletteTokens = {
|
|
18
|
+
/** Page and panel background. */
|
|
19
|
+
surface: string;
|
|
20
|
+
/** Default text colour on `surface`. */
|
|
21
|
+
foreground: string;
|
|
22
|
+
/** De-emphasised text - captions, help text, placeholders. */
|
|
23
|
+
muted: string;
|
|
24
|
+
/** Hairlines and dividers. */
|
|
25
|
+
border: string;
|
|
26
|
+
|
|
27
|
+
/** The main call-to-action fill. */
|
|
28
|
+
primary: string;
|
|
29
|
+
primaryHover: string;
|
|
30
|
+
/** Text and icons drawn on top of `primary`. */
|
|
31
|
+
primaryForeground: string;
|
|
32
|
+
/** Focus ring for primary surfaces - lighter than the fill so it reads against it. */
|
|
33
|
+
primaryRing: string;
|
|
34
|
+
|
|
35
|
+
/** The alternative action fill, for choices that sit beside a primary one. */
|
|
36
|
+
secondary: string;
|
|
37
|
+
secondaryHover: string;
|
|
38
|
+
secondaryForeground: string;
|
|
39
|
+
secondaryRing: string;
|
|
40
|
+
|
|
41
|
+
/** Fill for controls that cannot be interacted with. */
|
|
42
|
+
disabled: string;
|
|
43
|
+
/** Kept distinct from `disabled` so a disabled control still absorbs hover rather than
|
|
44
|
+
* appearing to respond to it. */
|
|
45
|
+
disabledHover: string;
|
|
46
|
+
|
|
47
|
+
/** Focus ring for surfaces that have no fill of their own, such as a ghost button. */
|
|
48
|
+
ring: string;
|
|
49
|
+
|
|
50
|
+
/** Status colours. Not yet consumed by a component - they complete the role set so the
|
|
51
|
+
* first Alert or Toast has names to reach for instead of inventing them. */
|
|
52
|
+
success: string;
|
|
53
|
+
warning: string;
|
|
54
|
+
error: string;
|
|
55
|
+
info: string;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export const light: PaletteTokens = {
|
|
59
|
+
surface: '#ffffff',
|
|
60
|
+
foreground: '#0f172a',
|
|
61
|
+
muted: '#64748b',
|
|
62
|
+
border: '#e2e8f0',
|
|
63
|
+
|
|
64
|
+
primary: '#8b5cf6',
|
|
65
|
+
primaryHover: '#7c3aed',
|
|
66
|
+
primaryForeground: '#f8fafc',
|
|
67
|
+
primaryRing: '#a78bfa',
|
|
68
|
+
|
|
69
|
+
secondary: '#0ea5e9',
|
|
70
|
+
secondaryHover: '#0284c7',
|
|
71
|
+
secondaryForeground: '#f8fafc',
|
|
72
|
+
secondaryRing: '#38bdf8',
|
|
73
|
+
|
|
74
|
+
disabled: '#94a3b8',
|
|
75
|
+
disabledHover: '#64748b',
|
|
76
|
+
|
|
77
|
+
ring: '#94a3b8',
|
|
78
|
+
|
|
79
|
+
success: '#10b981',
|
|
80
|
+
warning: '#f59e0b',
|
|
81
|
+
error: '#d63384',
|
|
82
|
+
info: '#06b6d4',
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Dark reverses the ramp the fills are drawn from: `primary` takes the step that light uses for
|
|
87
|
+
* its hover, and hovering steps *up* into light. That is what the components' old
|
|
88
|
+
* `dark:bg-primary-600 dark:hover:bg-primary-500` pair encoded, moved here so it is stated once
|
|
89
|
+
* for the whole system instead of repeated per component.
|
|
90
|
+
*/
|
|
91
|
+
export const dark: PaletteTokens = {
|
|
92
|
+
surface: '#0f172a',
|
|
93
|
+
foreground: '#f8fafc',
|
|
94
|
+
muted: '#94a3b8',
|
|
95
|
+
border: '#334155',
|
|
96
|
+
|
|
97
|
+
primary: '#7c3aed',
|
|
98
|
+
primaryHover: '#8b5cf6',
|
|
99
|
+
primaryForeground: '#f8fafc',
|
|
100
|
+
primaryRing: '#a78bfa',
|
|
101
|
+
|
|
102
|
+
secondary: '#0284c7',
|
|
103
|
+
secondaryHover: '#0ea5e9',
|
|
104
|
+
secondaryForeground: '#f8fafc',
|
|
105
|
+
secondaryRing: '#38bdf8',
|
|
106
|
+
|
|
107
|
+
disabled: '#475569',
|
|
108
|
+
disabledHover: '#334155',
|
|
109
|
+
|
|
110
|
+
ring: '#64748b',
|
|
111
|
+
|
|
112
|
+
success: '#34d399',
|
|
113
|
+
warning: '#fbbf24',
|
|
114
|
+
error: '#f48fb1',
|
|
115
|
+
info: '#22d3ee',
|
|
116
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { dark, light, type PaletteTokens } from './Palette';
|
|
2
|
+
|
|
3
|
+
const GENERATED_HEADER = `/* GENERATED from src/Theme/Palette.ts by \`npm run build:tokens\` - do not edit by hand.
|
|
4
|
+
*
|
|
5
|
+
* The raw values live in :root and .dark; the @theme inline block maps each one onto a Tailwind
|
|
6
|
+
* colour so utilities resolve through the variable rather than baking a hex in. Declaring the
|
|
7
|
+
* values inside @theme directly would freeze them at build time and the .dark overrides would
|
|
8
|
+
* never reach the utilities. */`;
|
|
9
|
+
|
|
10
|
+
const toKebabCase = (name: string): string =>
|
|
11
|
+
name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
|
|
12
|
+
|
|
13
|
+
const declarations = (
|
|
14
|
+
tokens: PaletteTokens,
|
|
15
|
+
value: (name: string) => string,
|
|
16
|
+
): string =>
|
|
17
|
+
Object.keys(tokens)
|
|
18
|
+
.map((name) => ` --color-${toKebabCase(name)}: ${value(name)};`)
|
|
19
|
+
.join('\n');
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Renders the stylesheet form of the palette. Shared by the build script and the test that pins
|
|
23
|
+
* `src/tokens.css` to it, so a palette edit that was never regenerated fails the suite instead of
|
|
24
|
+
* silently shipping stale colours.
|
|
25
|
+
*/
|
|
26
|
+
export const renderTokens = (): string => {
|
|
27
|
+
const raw = (tokens: PaletteTokens) => (name: string) =>
|
|
28
|
+
tokens[name as keyof PaletteTokens];
|
|
29
|
+
const reference = () => (name: string) => `var(--color-${toKebabCase(name)})`;
|
|
30
|
+
|
|
31
|
+
return `${GENERATED_HEADER}
|
|
32
|
+
|
|
33
|
+
/* Dark mode is driven by a \`.dark\` class rather than prefers-color-scheme, so a story or a
|
|
34
|
+
screenshot can be taken under either theme on demand. */
|
|
35
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
36
|
+
|
|
37
|
+
:root {
|
|
38
|
+
${declarations(light, raw(light))}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dark {
|
|
42
|
+
${declarations(dark, raw(dark))}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@theme inline {
|
|
46
|
+
${declarations(light, reference())}
|
|
47
|
+
}
|
|
48
|
+
`;
|
|
49
|
+
};
|
package/src/index.ts
ADDED
package/src/styles.css
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/* Component-level styles for the design system. */
|
|
2
|
+
@import "tailwindcss";
|
|
3
|
+
@import "./tokens.css";
|
|
4
|
+
|
|
5
|
+
/* Scan the component sources explicitly so their utilities are generated no matter
|
|
6
|
+
which host imports this stylesheet. Tailwind's automatic content detection is
|
|
7
|
+
anchored to the consumer and skips node_modules, so a host pulling the components
|
|
8
|
+
in through a package would otherwise render them unstyled. */
|
|
9
|
+
@source ".";
|
package/src/tokens.css
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* GENERATED from src/Theme/Palette.ts by `npm run build:tokens` - do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* The raw values live in :root and .dark; the @theme inline block maps each one onto a Tailwind
|
|
4
|
+
* colour so utilities resolve through the variable rather than baking a hex in. Declaring the
|
|
5
|
+
* values inside @theme directly would freeze them at build time and the .dark overrides would
|
|
6
|
+
* never reach the utilities. */
|
|
7
|
+
|
|
8
|
+
/* Dark mode is driven by a `.dark` class rather than prefers-color-scheme, so a story or a
|
|
9
|
+
screenshot can be taken under either theme on demand. */
|
|
10
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
--color-surface: #ffffff;
|
|
14
|
+
--color-foreground: #0f172a;
|
|
15
|
+
--color-muted: #64748b;
|
|
16
|
+
--color-border: #e2e8f0;
|
|
17
|
+
--color-primary: #8b5cf6;
|
|
18
|
+
--color-primary-hover: #7c3aed;
|
|
19
|
+
--color-primary-foreground: #f8fafc;
|
|
20
|
+
--color-primary-ring: #a78bfa;
|
|
21
|
+
--color-secondary: #0ea5e9;
|
|
22
|
+
--color-secondary-hover: #0284c7;
|
|
23
|
+
--color-secondary-foreground: #f8fafc;
|
|
24
|
+
--color-secondary-ring: #38bdf8;
|
|
25
|
+
--color-disabled: #94a3b8;
|
|
26
|
+
--color-disabled-hover: #64748b;
|
|
27
|
+
--color-ring: #94a3b8;
|
|
28
|
+
--color-success: #10b981;
|
|
29
|
+
--color-warning: #f59e0b;
|
|
30
|
+
--color-error: #d63384;
|
|
31
|
+
--color-info: #06b6d4;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.dark {
|
|
35
|
+
--color-surface: #0f172a;
|
|
36
|
+
--color-foreground: #f8fafc;
|
|
37
|
+
--color-muted: #94a3b8;
|
|
38
|
+
--color-border: #334155;
|
|
39
|
+
--color-primary: #7c3aed;
|
|
40
|
+
--color-primary-hover: #8b5cf6;
|
|
41
|
+
--color-primary-foreground: #f8fafc;
|
|
42
|
+
--color-primary-ring: #a78bfa;
|
|
43
|
+
--color-secondary: #0284c7;
|
|
44
|
+
--color-secondary-hover: #0ea5e9;
|
|
45
|
+
--color-secondary-foreground: #f8fafc;
|
|
46
|
+
--color-secondary-ring: #38bdf8;
|
|
47
|
+
--color-disabled: #475569;
|
|
48
|
+
--color-disabled-hover: #334155;
|
|
49
|
+
--color-ring: #64748b;
|
|
50
|
+
--color-success: #34d399;
|
|
51
|
+
--color-warning: #fbbf24;
|
|
52
|
+
--color-error: #f48fb1;
|
|
53
|
+
--color-info: #22d3ee;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@theme inline {
|
|
57
|
+
--color-surface: var(--color-surface);
|
|
58
|
+
--color-foreground: var(--color-foreground);
|
|
59
|
+
--color-muted: var(--color-muted);
|
|
60
|
+
--color-border: var(--color-border);
|
|
61
|
+
--color-primary: var(--color-primary);
|
|
62
|
+
--color-primary-hover: var(--color-primary-hover);
|
|
63
|
+
--color-primary-foreground: var(--color-primary-foreground);
|
|
64
|
+
--color-primary-ring: var(--color-primary-ring);
|
|
65
|
+
--color-secondary: var(--color-secondary);
|
|
66
|
+
--color-secondary-hover: var(--color-secondary-hover);
|
|
67
|
+
--color-secondary-foreground: var(--color-secondary-foreground);
|
|
68
|
+
--color-secondary-ring: var(--color-secondary-ring);
|
|
69
|
+
--color-disabled: var(--color-disabled);
|
|
70
|
+
--color-disabled-hover: var(--color-disabled-hover);
|
|
71
|
+
--color-ring: var(--color-ring);
|
|
72
|
+
--color-success: var(--color-success);
|
|
73
|
+
--color-warning: var(--color-warning);
|
|
74
|
+
--color-error: var(--color-error);
|
|
75
|
+
--color-info: var(--color-info);
|
|
76
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"design-system.js","sources":["../src/Interaction/Button.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Subject } from 'rxjs';\n\ntype IProps = {\n onClick$?: Subject<void>;\n};\n\n/**\n * Button component for user interactions.\n *\n * @component\n *\n * @uxguidelines\n * - Use clear, action-oriented text (e.g., \"Save\" instead of \"OK\")\n * - Keep button text concise (1-3 words)\n * - Use primary buttons for main actions, secondary buttons for alternative actions\n * - Maintain consistent button styling throughout the application\n * - Provide visual feedback on hover/active states\n * - Ensure sufficient touch target size (minimum 44x44px) for mobile users\n * - Position primary actions on the right for multi-button layouts\n *\n * @accessibility\n * - Ensure adequate color contrast (4.5:1 minimum ratio)\n * - Provide focus styles for keyboard navigation\n * - Use appropriate ARIA attributes when needed\n */\nexport const Button: FunctionComponent<PropsWithChildren<IProps>> = ({\n children,\n onClick$,\n}) => {\n return (\n <button\n type={'button'}\n className=\"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600\"\n onClick={() => {\n if (onClick$) {\n onClick$.next();\n }\n }}\n >\n {children}\n </button>\n );\n};\n"],"names":["Button","children","onClick$","jsx"],"mappings":";AA0BO,MAAMA,IAAuD,CAAC;AAAA,EACnE,UAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAM;AAAA,IACN,WAAU;AAAA,IACV,SAAS,MAAM;AACb,MAAID,KACFA,EAAS,KAAA;AAAA,IAEb;AAAA,IAEC,UAAAD;AAAA,EAAA;AAAA;"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.DesignSystem={},e.jsxRuntime))})(this,function(e,t){"use strict";var i=document.createElement("style");i.textContent=`@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-500:#78dcca;--color-primary-600:#5cc9c0}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.bg-primary-500{background-color:var(--color-primary-500)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}@media (hover:hover){.hover\\:bg-primary-600:hover{background-color:var(--color-primary-600)}}}/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.rounded{border-radius:.25rem}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}}
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(i);const n=({children:r,onClick$:o})=>t.jsx("button",{type:"button",className:"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600",onClick:()=>{o&&o.next()},children:r});e.Button=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
3
|
-
//# sourceMappingURL=design-system.umd.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"design-system.umd.cjs","sources":["../src/Interaction/Button.tsx"],"sourcesContent":["import type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Subject } from 'rxjs';\n\ntype IProps = {\n onClick$?: Subject<void>;\n};\n\n/**\n * Button component for user interactions.\n *\n * @component\n *\n * @uxguidelines\n * - Use clear, action-oriented text (e.g., \"Save\" instead of \"OK\")\n * - Keep button text concise (1-3 words)\n * - Use primary buttons for main actions, secondary buttons for alternative actions\n * - Maintain consistent button styling throughout the application\n * - Provide visual feedback on hover/active states\n * - Ensure sufficient touch target size (minimum 44x44px) for mobile users\n * - Position primary actions on the right for multi-button layouts\n *\n * @accessibility\n * - Ensure adequate color contrast (4.5:1 minimum ratio)\n * - Provide focus styles for keyboard navigation\n * - Use appropriate ARIA attributes when needed\n */\nexport const Button: FunctionComponent<PropsWithChildren<IProps>> = ({\n children,\n onClick$,\n}) => {\n return (\n <button\n type={'button'}\n className=\"bg-primary-500 py-2 px-4 rounded hover:bg-primary-600\"\n onClick={() => {\n if (onClick$) {\n onClick$.next();\n }\n }}\n >\n {children}\n </button>\n );\n};\n"],"names":["Button","children","onClick$","jsx"],"mappings":";2CA0BO,MAAMA,EAAuD,CAAC,CACnE,SAAAC,EACA,SAAAC,CACF,IAEIC,EAAAA,IAAC,SAAA,CACC,KAAM,SACN,UAAU,wDACV,QAAS,IAAM,CACTD,GACFA,EAAS,KAAA,CAEb,EAEC,SAAAD,CAAA,CAAA"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { FunctionComponent, PropsWithChildren } from 'react';
|
|
2
|
-
import { Subject } from 'rxjs';
|
|
3
|
-
type IProps = {
|
|
4
|
-
onClick$?: Subject<void>;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* Button component for user interactions.
|
|
8
|
-
*
|
|
9
|
-
* @component
|
|
10
|
-
*
|
|
11
|
-
* @uxguidelines
|
|
12
|
-
* - Use clear, action-oriented text (e.g., "Save" instead of "OK")
|
|
13
|
-
* - Keep button text concise (1-3 words)
|
|
14
|
-
* - Use primary buttons for main actions, secondary buttons for alternative actions
|
|
15
|
-
* - Maintain consistent button styling throughout the application
|
|
16
|
-
* - Provide visual feedback on hover/active states
|
|
17
|
-
* - Ensure sufficient touch target size (minimum 44x44px) for mobile users
|
|
18
|
-
* - Position primary actions on the right for multi-button layouts
|
|
19
|
-
*
|
|
20
|
-
* @accessibility
|
|
21
|
-
* - Ensure adequate color contrast (4.5:1 minimum ratio)
|
|
22
|
-
* - Provide focus styles for keyboard navigation
|
|
23
|
-
* - Use appropriate ARIA attributes when needed
|
|
24
|
-
*/
|
|
25
|
-
export declare const Button: FunctionComponent<PropsWithChildren<IProps>>;
|
|
26
|
-
export {};
|