@medalsocial/meda 2.8.1 → 3.0.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/README.md +96 -1
- package/dist/primitives/avatar.d.ts +24 -0
- package/dist/primitives/avatar.js +44 -0
- package/dist/primitives/button.d.ts +21 -0
- package/dist/primitives/button.js +51 -0
- package/dist/primitives/index.d.ts +8 -0
- package/dist/primitives/index.js +4 -0
- package/dist/primitives/input.d.ts +10 -0
- package/dist/primitives/input.js +9 -0
- package/dist/primitives/toggle-group.d.ts +46 -0
- package/dist/primitives/toggle-group.js +148 -0
- package/dist/styles/base.css +40 -0
- package/dist/styles/bridge.css +159 -0
- package/dist/styles/calendar.css +8 -0
- package/dist/styles/primitives.css +10 -0
- package/dist/styles/theme.css +12 -162
- package/dist/styles/vendor/xyflow.css +626 -0
- package/dist/styles/workflow-builder.css +17 -0
- package/package.json +38 -9
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/* @medalsocial/meda/styles/bridge.css
|
|
2
|
+
*
|
|
3
|
+
* Tailwind v4 theme bridge ONLY: the `dark` custom variant plus the
|
|
4
|
+
* `@theme inline` mappings that turn meda's CSS custom properties into
|
|
5
|
+
* Tailwind utilities (`bg-primary`, `text-muted-foreground`, `bg-brand-500`,
|
|
6
|
+
* `bg-shell-rail`, ...). It defines NO token values and scans NO component
|
|
7
|
+
* output, so it costs nothing until a utility is actually generated.
|
|
8
|
+
*
|
|
9
|
+
* Use it directly when the consuming site brings its own shadcn-style
|
|
10
|
+
* semantic tokens (`--primary`, `--card`, `--muted`, ...) and meda parts
|
|
11
|
+
* should re-theme to them. Otherwise import `styles/base.css`, which layers
|
|
12
|
+
* meda's canonical token values on top of this bridge.
|
|
13
|
+
*
|
|
14
|
+
* Font families are intentionally NOT mapped here: `--font-sans` would point
|
|
15
|
+
* at meda's `--font-family-sans`, which a bring-your-own-tokens site does not
|
|
16
|
+
* define, silently dropping the page to the UA serif. base.css maps them.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
|
|
20
|
+
|
|
21
|
+
@theme inline {
|
|
22
|
+
/* Color primitives — exposed as Tailwind color scales */
|
|
23
|
+
|
|
24
|
+
/* Brand (purple) — 11 stops */
|
|
25
|
+
--color-brand-50: var(--color-brand-50);
|
|
26
|
+
--color-brand-100: var(--color-brand-100);
|
|
27
|
+
--color-brand-200: var(--color-brand-200);
|
|
28
|
+
--color-brand-300: var(--color-brand-300);
|
|
29
|
+
--color-brand-400: var(--color-brand-400);
|
|
30
|
+
--color-brand-500: var(--color-brand-500);
|
|
31
|
+
--color-brand-600: var(--color-brand-600);
|
|
32
|
+
--color-brand-700: var(--color-brand-700);
|
|
33
|
+
--color-brand-800: var(--color-brand-800);
|
|
34
|
+
--color-brand-900: var(--color-brand-900);
|
|
35
|
+
--color-brand-950: var(--color-brand-950);
|
|
36
|
+
|
|
37
|
+
/* Neutral (zinc-aligned) — 11 stops */
|
|
38
|
+
--color-neutral-50: var(--color-neutral-50);
|
|
39
|
+
--color-neutral-100: var(--color-neutral-100);
|
|
40
|
+
--color-neutral-200: var(--color-neutral-200);
|
|
41
|
+
--color-neutral-300: var(--color-neutral-300);
|
|
42
|
+
--color-neutral-400: var(--color-neutral-400);
|
|
43
|
+
--color-neutral-500: var(--color-neutral-500);
|
|
44
|
+
--color-neutral-600: var(--color-neutral-600);
|
|
45
|
+
--color-neutral-700: var(--color-neutral-700);
|
|
46
|
+
--color-neutral-800: var(--color-neutral-800);
|
|
47
|
+
--color-neutral-900: var(--color-neutral-900);
|
|
48
|
+
--color-neutral-950: var(--color-neutral-950);
|
|
49
|
+
|
|
50
|
+
/* Error (rose) — 10 stops */
|
|
51
|
+
--color-error-50: var(--color-error-50);
|
|
52
|
+
--color-error-100: var(--color-error-100);
|
|
53
|
+
--color-error-200: var(--color-error-200);
|
|
54
|
+
--color-error-300: var(--color-error-300);
|
|
55
|
+
--color-error-400: var(--color-error-400);
|
|
56
|
+
--color-error-500: var(--color-error-500);
|
|
57
|
+
--color-error-600: var(--color-error-600);
|
|
58
|
+
--color-error-700: var(--color-error-700);
|
|
59
|
+
--color-error-800: var(--color-error-800);
|
|
60
|
+
--color-error-900: var(--color-error-900);
|
|
61
|
+
|
|
62
|
+
/* Info (blue) — 10 stops */
|
|
63
|
+
--color-info-50: var(--color-info-50);
|
|
64
|
+
--color-info-100: var(--color-info-100);
|
|
65
|
+
--color-info-200: var(--color-info-200);
|
|
66
|
+
--color-info-300: var(--color-info-300);
|
|
67
|
+
--color-info-400: var(--color-info-400);
|
|
68
|
+
--color-info-500: var(--color-info-500);
|
|
69
|
+
--color-info-600: var(--color-info-600);
|
|
70
|
+
--color-info-700: var(--color-info-700);
|
|
71
|
+
--color-info-800: var(--color-info-800);
|
|
72
|
+
--color-info-900: var(--color-info-900);
|
|
73
|
+
|
|
74
|
+
/* Success (teal) — 10 stops */
|
|
75
|
+
--color-success-50: var(--color-success-50);
|
|
76
|
+
--color-success-100: var(--color-success-100);
|
|
77
|
+
--color-success-200: var(--color-success-200);
|
|
78
|
+
--color-success-300: var(--color-success-300);
|
|
79
|
+
--color-success-400: var(--color-success-400);
|
|
80
|
+
--color-success-500: var(--color-success-500);
|
|
81
|
+
--color-success-600: var(--color-success-600);
|
|
82
|
+
--color-success-700: var(--color-success-700);
|
|
83
|
+
--color-success-800: var(--color-success-800);
|
|
84
|
+
--color-success-900: var(--color-success-900);
|
|
85
|
+
|
|
86
|
+
/* Warning (amber) — 10 stops */
|
|
87
|
+
--color-warning-50: var(--color-warning-50);
|
|
88
|
+
--color-warning-100: var(--color-warning-100);
|
|
89
|
+
--color-warning-200: var(--color-warning-200);
|
|
90
|
+
--color-warning-300: var(--color-warning-300);
|
|
91
|
+
--color-warning-400: var(--color-warning-400);
|
|
92
|
+
--color-warning-500: var(--color-warning-500);
|
|
93
|
+
--color-warning-600: var(--color-warning-600);
|
|
94
|
+
--color-warning-700: var(--color-warning-700);
|
|
95
|
+
--color-warning-800: var(--color-warning-800);
|
|
96
|
+
--color-warning-900: var(--color-warning-900);
|
|
97
|
+
|
|
98
|
+
/* shadcn semantic colors (mode-flipped at runtime via :root / .dark) */
|
|
99
|
+
--color-background: var(--background);
|
|
100
|
+
--color-foreground: var(--foreground);
|
|
101
|
+
--color-card: var(--card);
|
|
102
|
+
--color-card-foreground: var(--card-foreground);
|
|
103
|
+
--color-popover: var(--popover);
|
|
104
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
105
|
+
--color-primary: var(--primary);
|
|
106
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
107
|
+
--color-secondary: var(--secondary);
|
|
108
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
109
|
+
--color-muted: var(--muted);
|
|
110
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
111
|
+
--color-accent: var(--accent);
|
|
112
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
113
|
+
--color-destructive: var(--destructive);
|
|
114
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
115
|
+
--color-border: var(--border);
|
|
116
|
+
--color-input: var(--input);
|
|
117
|
+
--color-ring: var(--ring);
|
|
118
|
+
|
|
119
|
+
/* Status semantic */
|
|
120
|
+
--color-success: var(--success);
|
|
121
|
+
--color-success-foreground: var(--success-foreground);
|
|
122
|
+
--color-warning: var(--warning);
|
|
123
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
124
|
+
--color-info: var(--info);
|
|
125
|
+
--color-info-foreground: var(--info-foreground);
|
|
126
|
+
--color-danger: var(--danger);
|
|
127
|
+
|
|
128
|
+
/* Sidebar */
|
|
129
|
+
--color-sidebar: var(--sidebar);
|
|
130
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
131
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
132
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
133
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
134
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
135
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
136
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
137
|
+
|
|
138
|
+
/* Chart */
|
|
139
|
+
--color-chart-1: var(--chart-1);
|
|
140
|
+
--color-chart-2: var(--chart-2);
|
|
141
|
+
--color-chart-3: var(--chart-3);
|
|
142
|
+
--color-chart-4: var(--chart-4);
|
|
143
|
+
--color-chart-5: var(--chart-5);
|
|
144
|
+
|
|
145
|
+
/* Shell semantic colors */
|
|
146
|
+
--color-shell-header: var(--shell-header);
|
|
147
|
+
--color-shell-rail: var(--shell-rail);
|
|
148
|
+
--color-shell-context: var(--shell-context);
|
|
149
|
+
--color-shell-main: var(--shell-main);
|
|
150
|
+
--color-shell-panel: var(--shell-panel);
|
|
151
|
+
--color-shell-border: var(--shell-border);
|
|
152
|
+
|
|
153
|
+
/* Shell sizing → spacing scale */
|
|
154
|
+
--spacing-shell-header: var(--shell-header-height);
|
|
155
|
+
--spacing-shell-rail: var(--shell-rail-width);
|
|
156
|
+
--spacing-shell-context: var(--shell-context-default);
|
|
157
|
+
--spacing-shell-panel: var(--shell-panel-default);
|
|
158
|
+
--spacing-shell-bottom-nav: var(--shell-bottom-nav-height);
|
|
159
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/* @medalsocial/meda/calendar/styles.css
|
|
2
|
+
*
|
|
3
|
+
* Generates only the Tailwind utilities used by `@medalsocial/meda/calendar`.
|
|
4
|
+
* Requires the theme bridge: import `@medalsocial/meda/styles/base.css`
|
|
5
|
+
* (meda tokens) or `@medalsocial/meda/styles/bridge.css` (your own tokens)
|
|
6
|
+
* once, before this file. Paths resolve relative to dist/styles/.
|
|
7
|
+
*/
|
|
8
|
+
@source "../calendar/**/*.js";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/* @medalsocial/meda/primitives/styles.css
|
|
2
|
+
*
|
|
3
|
+
* Generates only the Tailwind utilities used by the foundation primitives
|
|
4
|
+
* (`@medalsocial/meda/primitives`). MarkdownView is excluded — it ships from
|
|
5
|
+
* its own subpath with optional peers. Requires the theme bridge: import
|
|
6
|
+
* `@medalsocial/meda/styles/base.css` or `.../styles/bridge.css` once,
|
|
7
|
+
* before this file. Paths resolve relative to dist/styles/.
|
|
8
|
+
*/
|
|
9
|
+
@source "../primitives/*.js";
|
|
10
|
+
@source not "../primitives/markdown-view*.js";
|
package/dist/styles/theme.css
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
1
|
+
/* @medalsocial/meda/styles.css — batteries-included entry.
|
|
2
|
+
*
|
|
3
|
+
* = styles/base.css (tokens + theme bridge + base layer)
|
|
4
|
+
* + every feature stylesheet (all meda component output is scanned)
|
|
5
|
+
* + the workflow-builder stylesheet (which carries @xyflow/react's CSS).
|
|
6
|
+
*
|
|
7
|
+
* Output is unchanged from the pre-split theme.css. Consumers that render
|
|
8
|
+
* only a few surfaces should use the lean entries instead — see README
|
|
9
|
+
* "Lean consumer setup".
|
|
10
|
+
*/
|
|
11
|
+
@import "./base.css";
|
|
12
|
+
@import "./workflow-builder.css";
|
|
3
13
|
|
|
4
14
|
/* Tell Tailwind v4 to scan meda's compiled component output so utilities
|
|
5
15
|
like `h-full`, `mt-auto`, `py-3.5`, and `bg-shell-rail` (used by IconRail,
|
|
@@ -10,166 +20,6 @@
|
|
|
10
20
|
sibling component output regardless of where the package is installed. */
|
|
11
21
|
@source "../**/*.js";
|
|
12
22
|
|
|
13
|
-
@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
|
|
14
|
-
|
|
15
|
-
@layer base {
|
|
16
|
-
:root {
|
|
17
|
-
color-scheme: light;
|
|
18
|
-
--auth-gradient-primary: var(--color-brand-500);
|
|
19
|
-
--auth-gradient-secondary: var(--color-brand-700);
|
|
20
|
-
--auth-gradient-base: var(--color-brand-800);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.dark,
|
|
24
|
-
[data-theme="dark"] {
|
|
25
|
-
color-scheme: dark;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
23
|
[data-vaul-drawer][data-state="open"] {
|
|
30
24
|
will-change: auto;
|
|
31
25
|
}
|
|
32
|
-
|
|
33
|
-
@theme inline {
|
|
34
|
-
/* Color primitives — exposed as Tailwind color scales */
|
|
35
|
-
|
|
36
|
-
/* Brand (purple) — 11 stops */
|
|
37
|
-
--color-brand-50: var(--color-brand-50);
|
|
38
|
-
--color-brand-100: var(--color-brand-100);
|
|
39
|
-
--color-brand-200: var(--color-brand-200);
|
|
40
|
-
--color-brand-300: var(--color-brand-300);
|
|
41
|
-
--color-brand-400: var(--color-brand-400);
|
|
42
|
-
--color-brand-500: var(--color-brand-500);
|
|
43
|
-
--color-brand-600: var(--color-brand-600);
|
|
44
|
-
--color-brand-700: var(--color-brand-700);
|
|
45
|
-
--color-brand-800: var(--color-brand-800);
|
|
46
|
-
--color-brand-900: var(--color-brand-900);
|
|
47
|
-
--color-brand-950: var(--color-brand-950);
|
|
48
|
-
|
|
49
|
-
/* Neutral (zinc-aligned) — 11 stops */
|
|
50
|
-
--color-neutral-50: var(--color-neutral-50);
|
|
51
|
-
--color-neutral-100: var(--color-neutral-100);
|
|
52
|
-
--color-neutral-200: var(--color-neutral-200);
|
|
53
|
-
--color-neutral-300: var(--color-neutral-300);
|
|
54
|
-
--color-neutral-400: var(--color-neutral-400);
|
|
55
|
-
--color-neutral-500: var(--color-neutral-500);
|
|
56
|
-
--color-neutral-600: var(--color-neutral-600);
|
|
57
|
-
--color-neutral-700: var(--color-neutral-700);
|
|
58
|
-
--color-neutral-800: var(--color-neutral-800);
|
|
59
|
-
--color-neutral-900: var(--color-neutral-900);
|
|
60
|
-
--color-neutral-950: var(--color-neutral-950);
|
|
61
|
-
|
|
62
|
-
/* Error (rose) — 10 stops */
|
|
63
|
-
--color-error-50: var(--color-error-50);
|
|
64
|
-
--color-error-100: var(--color-error-100);
|
|
65
|
-
--color-error-200: var(--color-error-200);
|
|
66
|
-
--color-error-300: var(--color-error-300);
|
|
67
|
-
--color-error-400: var(--color-error-400);
|
|
68
|
-
--color-error-500: var(--color-error-500);
|
|
69
|
-
--color-error-600: var(--color-error-600);
|
|
70
|
-
--color-error-700: var(--color-error-700);
|
|
71
|
-
--color-error-800: var(--color-error-800);
|
|
72
|
-
--color-error-900: var(--color-error-900);
|
|
73
|
-
|
|
74
|
-
/* Info (blue) — 10 stops */
|
|
75
|
-
--color-info-50: var(--color-info-50);
|
|
76
|
-
--color-info-100: var(--color-info-100);
|
|
77
|
-
--color-info-200: var(--color-info-200);
|
|
78
|
-
--color-info-300: var(--color-info-300);
|
|
79
|
-
--color-info-400: var(--color-info-400);
|
|
80
|
-
--color-info-500: var(--color-info-500);
|
|
81
|
-
--color-info-600: var(--color-info-600);
|
|
82
|
-
--color-info-700: var(--color-info-700);
|
|
83
|
-
--color-info-800: var(--color-info-800);
|
|
84
|
-
--color-info-900: var(--color-info-900);
|
|
85
|
-
|
|
86
|
-
/* Success (teal) — 10 stops */
|
|
87
|
-
--color-success-50: var(--color-success-50);
|
|
88
|
-
--color-success-100: var(--color-success-100);
|
|
89
|
-
--color-success-200: var(--color-success-200);
|
|
90
|
-
--color-success-300: var(--color-success-300);
|
|
91
|
-
--color-success-400: var(--color-success-400);
|
|
92
|
-
--color-success-500: var(--color-success-500);
|
|
93
|
-
--color-success-600: var(--color-success-600);
|
|
94
|
-
--color-success-700: var(--color-success-700);
|
|
95
|
-
--color-success-800: var(--color-success-800);
|
|
96
|
-
--color-success-900: var(--color-success-900);
|
|
97
|
-
|
|
98
|
-
/* Warning (amber) — 10 stops */
|
|
99
|
-
--color-warning-50: var(--color-warning-50);
|
|
100
|
-
--color-warning-100: var(--color-warning-100);
|
|
101
|
-
--color-warning-200: var(--color-warning-200);
|
|
102
|
-
--color-warning-300: var(--color-warning-300);
|
|
103
|
-
--color-warning-400: var(--color-warning-400);
|
|
104
|
-
--color-warning-500: var(--color-warning-500);
|
|
105
|
-
--color-warning-600: var(--color-warning-600);
|
|
106
|
-
--color-warning-700: var(--color-warning-700);
|
|
107
|
-
--color-warning-800: var(--color-warning-800);
|
|
108
|
-
--color-warning-900: var(--color-warning-900);
|
|
109
|
-
|
|
110
|
-
/* shadcn semantic colors (mode-flipped at runtime via :root / .dark) */
|
|
111
|
-
--color-background: var(--background);
|
|
112
|
-
--color-foreground: var(--foreground);
|
|
113
|
-
--color-card: var(--card);
|
|
114
|
-
--color-card-foreground: var(--card-foreground);
|
|
115
|
-
--color-popover: var(--popover);
|
|
116
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
117
|
-
--color-primary: var(--primary);
|
|
118
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
119
|
-
--color-secondary: var(--secondary);
|
|
120
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
121
|
-
--color-muted: var(--muted);
|
|
122
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
123
|
-
--color-accent: var(--accent);
|
|
124
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
125
|
-
--color-destructive: var(--destructive);
|
|
126
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
127
|
-
--color-border: var(--border);
|
|
128
|
-
--color-input: var(--input);
|
|
129
|
-
--color-ring: var(--ring);
|
|
130
|
-
|
|
131
|
-
/* Status semantic */
|
|
132
|
-
--color-success: var(--success);
|
|
133
|
-
--color-success-foreground: var(--success-foreground);
|
|
134
|
-
--color-warning: var(--warning);
|
|
135
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
136
|
-
--color-info: var(--info);
|
|
137
|
-
--color-info-foreground: var(--info-foreground);
|
|
138
|
-
--color-danger: var(--danger);
|
|
139
|
-
|
|
140
|
-
/* Sidebar */
|
|
141
|
-
--color-sidebar: var(--sidebar);
|
|
142
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
143
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
144
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
145
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
146
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
147
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
148
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
149
|
-
|
|
150
|
-
/* Chart */
|
|
151
|
-
--color-chart-1: var(--chart-1);
|
|
152
|
-
--color-chart-2: var(--chart-2);
|
|
153
|
-
--color-chart-3: var(--chart-3);
|
|
154
|
-
--color-chart-4: var(--chart-4);
|
|
155
|
-
--color-chart-5: var(--chart-5);
|
|
156
|
-
|
|
157
|
-
/* Shell semantic colors */
|
|
158
|
-
--color-shell-header: var(--shell-header);
|
|
159
|
-
--color-shell-rail: var(--shell-rail);
|
|
160
|
-
--color-shell-context: var(--shell-context);
|
|
161
|
-
--color-shell-main: var(--shell-main);
|
|
162
|
-
--color-shell-panel: var(--shell-panel);
|
|
163
|
-
--color-shell-border: var(--shell-border);
|
|
164
|
-
|
|
165
|
-
/* Shell sizing → spacing scale */
|
|
166
|
-
--spacing-shell-header: var(--shell-header-height);
|
|
167
|
-
--spacing-shell-rail: var(--shell-rail-width);
|
|
168
|
-
--spacing-shell-context: var(--shell-context-default);
|
|
169
|
-
--spacing-shell-panel: var(--shell-panel-default);
|
|
170
|
-
--spacing-shell-bottom-nav: var(--shell-bottom-nav-height);
|
|
171
|
-
|
|
172
|
-
/* Font families — Geist + Geist Mono only (no Inter) */
|
|
173
|
-
--font-sans: var(--font-family-sans);
|
|
174
|
-
--font-mono: var(--font-family-mono);
|
|
175
|
-
}
|