@mosaic-media/sdui-react 0.1.0 → 0.1.5

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.
Files changed (52) hide show
  1. package/README.md +75 -1
  2. package/dist/components/controls.d.ts +13 -0
  3. package/dist/components/controls.d.ts.map +1 -1
  4. package/dist/components/controls.js +73 -4
  5. package/dist/components/controls.js.map +1 -1
  6. package/dist/components/definitions.d.ts.map +1 -1
  7. package/dist/components/definitions.js +60 -18
  8. package/dist/components/definitions.js.map +1 -1
  9. package/dist/components/definitions.layout.d.ts.map +1 -1
  10. package/dist/components/definitions.layout.js +8 -6
  11. package/dist/components/definitions.layout.js.map +1 -1
  12. package/dist/components/index.d.ts.map +1 -1
  13. package/dist/components/index.js +7 -1
  14. package/dist/components/index.js.map +1 -1
  15. package/dist/components/media.d.ts.map +1 -1
  16. package/dist/components/media.js +3 -1
  17. package/dist/components/media.js.map +1 -1
  18. package/dist/components/primitives.d.ts +7 -1
  19. package/dist/components/primitives.d.ts.map +1 -1
  20. package/dist/components/primitives.js +98 -4
  21. package/dist/components/primitives.js.map +1 -1
  22. package/dist/components/shared.d.ts +1 -1
  23. package/dist/components/shared.d.ts.map +1 -1
  24. package/dist/components/shared.js +5 -0
  25. package/dist/components/shared.js.map +1 -1
  26. package/dist/components/shell.d.ts +12 -0
  27. package/dist/components/shell.d.ts.map +1 -0
  28. package/dist/components/shell.js +34 -0
  29. package/dist/components/shell.js.map +1 -0
  30. package/dist/index.d.ts +2 -0
  31. package/dist/index.d.ts.map +1 -1
  32. package/dist/index.js +3 -0
  33. package/dist/index.js.map +1 -1
  34. package/dist/sdui/ShellProvider.d.ts +6 -1
  35. package/dist/sdui/ShellProvider.d.ts.map +1 -1
  36. package/dist/sdui/ShellProvider.js +24 -9
  37. package/dist/sdui/ShellProvider.js.map +1 -1
  38. package/dist/sdui/artlight.d.ts +18 -0
  39. package/dist/sdui/artlight.d.ts.map +1 -0
  40. package/dist/sdui/artlight.js +196 -0
  41. package/dist/sdui/artlight.js.map +1 -0
  42. package/dist/sdui/context.d.ts +4 -0
  43. package/dist/sdui/context.d.ts.map +1 -1
  44. package/dist/sdui/context.js.map +1 -1
  45. package/dist/sdui/style.d.ts +3 -0
  46. package/dist/sdui/style.d.ts.map +1 -1
  47. package/dist/sdui/style.js +4 -0
  48. package/dist/sdui/style.js.map +1 -1
  49. package/dist/styles/components.css +168 -30
  50. package/dist/styles/global.css +7 -1
  51. package/dist/styles/tokens.css +135 -45
  52. package/package.json +7 -3
package/dist/styles/tokens.css CHANGED
@@ -7,6 +7,12 @@
7
7
  * radii or type sizes; they read these variables. Reskin the whole Shell by
8
8
  * editing this file alone.
9
9
  *
10
+ * The skin follows the Mosaic "refraction" language: the artwork is the light
11
+ * source and UI surfaces behave like frosted acrylic that catches its colour.
12
+ * That shows up here as cool violet-indigo glass in the dark theme and warm
13
+ * pink-lavender glass in the light theme, glowing accent gradients, and shadows
14
+ * tinted toward the accent so raised surfaces read as lit rather than stamped.
15
+ *
10
16
  * Dark is the default (a media app lives in a dim room). Light is provided so
11
17
  * the token contract is proven in both directions. The active theme is chosen
12
18
  * by [data-theme] on <html>; system preference is the fallback.
@@ -16,27 +22,56 @@
16
22
  :root[data-theme="dark"] {
17
23
  color-scheme: dark;
18
24
 
19
- /* Surfaces — from the back of the screen forward */
20
- --color-bg: #0b0d12;
21
- --color-surface: #14171f;
22
- --color-surface-raised: #1b1f2a;
23
- --color-surface-overlay: #222735;
24
- --color-scrim: rgba(6, 8, 12, 0.66);
25
+ /* Surfaces — from the back of the screen forward. Deep blue-black base with
26
+ glass panels that sit slightly translucent so ambient light shows through. */
27
+ --color-bg: #07080f;
28
+ --color-surface: rgba(20, 22, 34, 0.72);
29
+ --color-surface-raised: rgba(30, 33, 50, 0.74);
30
+ --color-surface-overlay: rgba(40, 44, 66, 0.86);
31
+ --color-scrim: rgba(4, 5, 12, 0.66);
32
+
33
+ /* Ambient "artwork light" — a wash painted behind the app chrome. Its three
34
+ glow colours default to the accent duo but are overridden at runtime by the
35
+ focused artwork's palette (sdui/artlight.ts). --ambient only lays out where
36
+ the light falls; the colour lives in the --art-glow-* vars so it can
37
+ cross-fade (see the @property registration below). */
38
+ --art-glow-1: rgba(124, 108, 255, 0.24);
39
+ --art-glow-2: rgba(34, 211, 238, 0.16);
40
+ --art-glow-3: rgba(236, 110, 173, 0.11);
41
+ --ambient: radial-gradient(1100px 620px at 18% -8%, var(--art-glow-1), transparent 60%),
42
+ radial-gradient(900px 560px at 88% 6%, var(--art-glow-2), transparent 62%),
43
+ radial-gradient(1200px 800px at 60% 108%, var(--art-glow-3), transparent 60%);
25
44
 
26
45
  /* Lines & borders */
27
- --color-border: rgba(255, 255, 255, 0.09);
28
- --color-border-strong: rgba(255, 255, 255, 0.16);
46
+ --color-border: rgba(150, 160, 220, 0.14);
47
+ --color-border-strong: rgba(165, 175, 235, 0.26);
29
48
 
30
49
  /* Text */
31
- --color-text: #eef1f7;
32
- --color-text-muted: #a4adbe;
33
- --color-text-faint: #6b7386;
34
- --color-text-on-accent: #0b0d12;
50
+ --color-text: #eef1fb;
51
+ --color-text-muted: #a7aec6;
52
+ --color-text-faint: #6d7492;
53
+ --color-text-on-accent: #ffffff;
35
54
 
36
- /* Brand accent — placeholder Mosaic teal/indigo. Swap for the real DL. */
37
- --color-accent: #5b8cff;
38
- --color-accent-hover: #7aa2ff;
39
- --color-accent-quiet: rgba(91, 140, 255, 0.14);
55
+ /* Brand accent — the refractive violet-indigo, held as an RGB triplet so the
56
+ art-light runtime can retint EVERY accent-derived surface (buttons, active
57
+ nav, glows, focus rings, progress) from one value. `--accent-rgb` is what
58
+ artlight.ts overrides with the focused artwork's dominant hue; clearing it
59
+ falls back to this brand duo. Everything below derives from the triplet. */
60
+ --accent-rgb: 124, 108, 255;
61
+ --accent-2-rgb: 34, 211, 238;
62
+ --accent-quiet-a: 0.18;
63
+ --glow-ring-a: 0.4;
64
+ --glow-spread-a: 0.34;
65
+
66
+ --color-accent: rgb(var(--accent-rgb));
67
+ --color-accent-hover: color-mix(in srgb, rgb(var(--accent-rgb)) 78%, #ffffff);
68
+ --color-accent-quiet: rgba(var(--accent-rgb), var(--accent-quiet-a));
69
+
70
+ /* Accent + brand gradients (used by chrome; never as a text colour). The
71
+ accent gradient follows the art; the brand gradient stays fixed identity. */
72
+ --gradient-accent: linear-gradient(122deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-2-rgb)) 100%);
73
+ --gradient-warm: linear-gradient(122deg, #ff8fb4 0%, #a855f7 52%, #5b8cff 100%);
74
+ --gradient-brand: conic-gradient(from 210deg, #5b8cff, #8b5cf6, #22d3ee, #5b8cff);
40
75
 
41
76
  /* Semantic status — these map to Platform error categories in feedback UI */
42
77
  --color-success: #3fbf7f;
@@ -52,33 +87,57 @@
52
87
 
53
88
  /* Media chrome */
54
89
  --color-rating: #ffc857;
55
- --color-progress-track: rgba(255, 255, 255, 0.16);
90
+ --color-progress-track: rgba(150, 160, 220, 0.18);
56
91
 
57
- --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
58
- --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
59
- --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
92
+ /* Frosted-glass blur radius for chrome + overlays. */
93
+ --glass-blur: 18px;
94
+
95
+ /* Shadows carry a subtle accent-tinted glow so raised surfaces read as lit. */
96
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
97
+ --shadow-2: 0 12px 34px rgba(5, 6, 20, 0.55), 0 0 0 1px rgba(160, 170, 255, 0.05);
98
+ --shadow-3: 0 26px 70px rgba(3, 4, 14, 0.7), 0 0 44px rgba(var(--accent-rgb), 0.16);
99
+ --glow-accent: 0 0 0 1px rgba(var(--accent-rgb), var(--glow-ring-a)),
100
+ 0 10px 34px rgba(var(--accent-rgb), var(--glow-spread-a));
60
101
  }
61
102
 
62
103
  :root[data-theme="light"] {
63
104
  color-scheme: light;
64
105
 
65
- --color-bg: #f4f5f8;
66
- --color-surface: #ffffff;
67
- --color-surface-raised: #ffffff;
68
- --color-surface-overlay: #ffffff;
69
- --color-scrim: rgba(20, 23, 31, 0.42);
70
-
71
- --color-border: rgba(16, 20, 30, 0.1);
72
- --color-border-strong: rgba(16, 20, 30, 0.18);
73
-
74
- --color-text: #141821;
75
- --color-text-muted: #545c6e;
76
- --color-text-faint: #8a92a3;
106
+ /* Warm frosted daylight — panels are translucent white over the ambient wash. */
107
+ --color-bg: #f2ecf6;
108
+ --color-surface: rgba(255, 255, 255, 0.72);
109
+ --color-surface-raised: rgba(255, 255, 255, 0.82);
110
+ --color-surface-overlay: rgba(255, 255, 255, 0.94);
111
+ --color-scrim: rgba(58, 40, 78, 0.3);
112
+
113
+ --art-glow-1: rgba(255, 158, 196, 0.5);
114
+ --art-glow-2: rgba(150, 190, 255, 0.42);
115
+ --art-glow-3: rgba(181, 124, 255, 0.34);
116
+ --ambient: radial-gradient(1100px 640px at 16% -10%, var(--art-glow-1), transparent 60%),
117
+ radial-gradient(1000px 620px at 92% -4%, var(--art-glow-2), transparent 62%),
118
+ radial-gradient(1200px 820px at 62% 112%, var(--art-glow-3), transparent 60%);
119
+
120
+ --color-border: rgba(90, 60, 130, 0.12);
121
+ --color-border-strong: rgba(90, 60, 130, 0.22);
122
+
123
+ --color-text: #2a2340;
124
+ --color-text-muted: #6a6183;
125
+ --color-text-faint: #9990ad;
77
126
  --color-text-on-accent: #ffffff;
78
127
 
79
- --color-accent: #3f6fe0;
80
- --color-accent-hover: #2f5bc7;
81
- --color-accent-quiet: rgba(63, 111, 224, 0.12);
128
+ /* Only the accent INPUTS change per theme; --color-accent, --color-accent-quiet,
129
+ --gradient-accent and --glow-accent are derived once (dark block) from these
130
+ and recompute here automatically. On light we darken the hover instead of
131
+ lightening it. */
132
+ --accent-rgb: 168, 85, 247;
133
+ --accent-2-rgb: 122, 162, 255;
134
+ --accent-quiet-a: 0.14;
135
+ --glow-ring-a: 0.32;
136
+ --glow-spread-a: 0.3;
137
+ --color-accent-hover: color-mix(in srgb, rgb(var(--accent-rgb)) 82%, #000000);
138
+
139
+ --gradient-warm: linear-gradient(122deg, #ff9ec4 0%, #b57cff 52%, #8ab6ff 100%);
140
+ --gradient-brand: conic-gradient(from 210deg, #7aa2ff, #b57cff, #ff9ec4, #7aa2ff);
82
141
 
83
142
  --color-success: #1f9d63;
84
143
  --color-warning: #b9822a;
@@ -90,12 +149,14 @@
90
149
  --color-danger-quiet: rgba(210, 63, 75, 0.13);
91
150
  --color-info-quiet: rgba(63, 111, 224, 0.12);
92
151
 
93
- --color-rating: #d99a1f;
94
- --color-progress-track: rgba(16, 20, 30, 0.14);
152
+ --color-rating: #e0a11a;
153
+ --color-progress-track: rgba(90, 60, 130, 0.16);
95
154
 
96
- --shadow-1: 0 1px 2px rgba(16, 20, 30, 0.08);
97
- --shadow-2: 0 6px 20px rgba(16, 20, 30, 0.12);
98
- --shadow-3: 0 18px 50px rgba(16, 20, 30, 0.18);
155
+ --glass-blur: 20px;
156
+
157
+ --shadow-1: 0 1px 2px rgba(60, 40, 90, 0.1);
158
+ --shadow-2: 0 12px 30px rgba(90, 60, 130, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.5);
159
+ --shadow-3: 0 24px 60px rgba(90, 60, 130, 0.2), 0 0 40px rgba(var(--accent-rgb), 0.18);
99
160
  }
100
161
 
101
162
  :root {
@@ -109,11 +170,11 @@
109
170
  --space-7: 48px;
110
171
  --space-8: 64px;
111
172
 
112
- /* Radii */
113
- --radius-sm: 6px;
114
- --radius-md: 10px;
115
- --radius-lg: 16px;
116
- --radius-xl: 22px;
173
+ /* Radii — generous, to match the soft acrylic panels of the language. */
174
+ --radius-sm: 8px;
175
+ --radius-md: 12px;
176
+ --radius-lg: 18px;
177
+ --radius-xl: 26px;
117
178
  --radius-pill: 999px;
118
179
 
119
180
  /* Typography */
@@ -141,6 +202,7 @@
141
202
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
142
203
  --dur-fast: 120ms;
143
204
  --dur-med: 220ms;
205
+ --dur-slow: 620ms;
144
206
 
145
207
  /* Layout */
146
208
  --shell-max: 1440px;
@@ -148,3 +210,31 @@
148
210
  --z-overlay: 100;
149
211
  --z-toast: 200;
150
212
  }
213
+
214
+ /*
215
+ * Register the ambient glow colours as <color> so a change from one artwork's
216
+ * palette to the next CROSS-FADES instead of snapping. Browsers without
217
+ * @property support ignore this and the wash simply updates instantly — the
218
+ * fallback duo and the runtime override both still work. The transition lives
219
+ * on :root because artlight.ts writes the vars there.
220
+ */
221
+ @property --art-glow-1 {
222
+ syntax: "<color>";
223
+ inherits: true;
224
+ initial-value: transparent;
225
+ }
226
+ @property --art-glow-2 {
227
+ syntax: "<color>";
228
+ inherits: true;
229
+ initial-value: transparent;
230
+ }
231
+ @property --art-glow-3 {
232
+ syntax: "<color>";
233
+ inherits: true;
234
+ initial-value: transparent;
235
+ }
236
+
237
+ :root {
238
+ transition: --art-glow-1 var(--dur-slow) var(--ease),
239
+ --art-glow-2 var(--dur-slow) var(--ease), --art-glow-3 var(--dur-slow) var(--ease);
240
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mosaic-media/sdui-react",
3
- "version": "0.1.0",
3
+ "version": "0.1.5",
4
4
  "description": "React runtime for the Mosaic SDUI contract: primitives, registry, renderer, definition expander, and the token-driven skin.",
5
5
  "license": "AGPL-3.0-only",
6
6
  "type": "module",
@@ -11,7 +11,9 @@
11
11
  },
12
12
  "./styles.css": "./dist/styles/index.css"
13
13
  },
14
- "files": ["dist"],
14
+ "files": [
15
+ "dist"
16
+ ],
15
17
  "scripts": {
16
18
  "build": "tsc -p tsconfig.build.json && node copy-styles.mjs",
17
19
  "typecheck": "tsc -p tsconfig.build.json --noEmit",
@@ -33,5 +35,7 @@
33
35
  "publishConfig": {
34
36
  "access": "public"
35
37
  },
36
- "sideEffects": ["*.css"]
38
+ "sideEffects": [
39
+ "*.css"
40
+ ]
37
41
  }