@orcestr/ui 0.0.1 → 0.1.0

package/dist/example/ExampleThemePlayground.d.ts

@@ -54,14 +54,19 @@ export declare const themePlaygroundPresets: readonly [{
             readonly panel: "#0d2119";
             readonly panelSoft: "#133126";
             readonly floating: "#0d2119";
-            readonly brand: "#34d399";
-            readonly brandStrong: "#86efac";
-            readonly brandSolid: "#059669";
-            readonly brandSolidHover: "#10b981";
-            readonly brandSoft: "rgb(52 211 153 / 16%)";
+            readonly primary: {
+                readonly base: "#059669";
+                readonly text: "#86efac";
+                readonly surface: "rgb(52 211 153 / 16%)";
+                readonly border: "rgb(52 211 153 / 16%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(52 211 153 / 14%)";
-            readonly info: "#7dd3fc";
-            readonly infoSoft: "#0b3240";
+            readonly info: {
+                readonly base: "#7dd3fc";
+                readonly text: "#7dd3fc";
+                readonly surface: "#0b3240";
+            };
         };
     };
 }, {
@@ -96,11 +101,13 @@ export declare const themePlaygroundPresets: readonly [{
             readonly borderStrong: "rgb(255 255 255 / 12%)";
             readonly text: "#f7f7f7";
             readonly muted: "#9a9a9a";
-            readonly brand: "#8ab4ff";
-            readonly brandStrong: "#b7d1ff";
-            readonly brandSolid: "#2759c7";
-            readonly brandSolidHover: "#3369e6";
-            readonly brandSoft: "rgb(138 180 255 / 17%)";
+            readonly primary: {
+                readonly base: "#2759c7";
+                readonly text: "#b7d1ff";
+                readonly surface: "rgb(138 180 255 / 17%)";
+                readonly border: "rgb(138 180 255 / 17%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(138 180 255 / 14%)";
             readonly focusRing: "0 0 0 3px rgb(138 180 255 / 20%)";
             readonly skeletonShimmer: "rgb(255 255 255 / 7%)";
@@ -138,14 +145,19 @@ export declare const themePlaygroundPresets: readonly [{
             readonly panel: "#1a1a1a";
             readonly panelSoft: "#242424";
             readonly floating: "#1b1b1b";
-            readonly brand: "#c4d3e8";
-            readonly brandStrong: "#e4edf8";
-            readonly brandSolid: "#5d6f87";
-            readonly brandSolidHover: "#71839b";
-            readonly brandSoft: "rgb(196 211 232 / 14%)";
+            readonly primary: {
+                readonly base: "#5d6f87";
+                readonly text: "#e4edf8";
+                readonly surface: "rgb(196 211 232 / 14%)";
+                readonly border: "rgb(196 211 232 / 14%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(196 211 232 / 12%)";
-            readonly info: "#8ecae6";
-            readonly infoSoft: "#122f3a";
+            readonly info: {
+                readonly base: "#8ecae6";
+                readonly text: "#8ecae6";
+                readonly surface: "#122f3a";
+            };
         };
         readonly radii: {
             readonly md: "5px";
@@ -165,25 +177,30 @@ export declare const themePlaygroundPresets: readonly [{
     };
     readonly mode: "dark";
     readonly surface: "media";
-    readonly accent: "#fb7185";
-    readonly previewBg: "#120d0e";
-    readonly previewPanel: "#2a1222";
-    readonly previewText: "#fff0f6";
+    readonly accent: "#f0a6d8";
+    readonly previewBg: "#141116";
+    readonly previewPanel: "#1d1820";
+    readonly previewText: "#f7eef7";
     readonly group: "dark";
     readonly overrides: {
         readonly colors: {
-            readonly bg: "#120d0e";
-            readonly panel: "#2a1222";
-            readonly panelSoft: "#3a1830";
-            readonly floating: "#2a1222";
-            readonly brand: "#fb7185";
-            readonly brandStrong: "#fda4af";
-            readonly brandSolid: "#be123c";
-            readonly brandSolidHover: "#e11d48";
-            readonly brandSoft: "rgb(251 113 133 / 18%)";
-            readonly selected: "rgb(251 113 133 / 15%)";
-            readonly warning: "#fbbf24";
-            readonly warningSoft: "#4a2f0b";
+            readonly bg: "#141116";
+            readonly panel: "#1d1820";
+            readonly panelSoft: "#29212d";
+            readonly floating: "#1d1820";
+            readonly primary: {
+                readonly base: "#a84486";
+                readonly text: "#ffc1e7";
+                readonly surface: "rgb(240 166 216 / 17%)";
+                readonly border: "rgb(240 166 216 / 17%)";
+                readonly contrast: "#ffffff";
+            };
+            readonly selected: "rgb(240 166 216 / 16%)";
+            readonly warning: {
+                readonly base: "#fbbf24";
+                readonly text: "#fbbf24";
+                readonly surface: "#49371c";
+            };
         };
     };
 }, {
@@ -215,25 +232,30 @@ export declare const themePlaygroundPresets: readonly [{
     };
     readonly mode: "dark";
     readonly surface: "orcestr";
-    readonly accent: "#a78bfa";
-    readonly previewBg: "#09091f";
-    readonly previewPanel: "#121234";
-    readonly previewText: "#edf5ff";
+    readonly accent: "#7dd3fc";
+    readonly previewBg: "#080f1c";
+    readonly previewPanel: "#101a2b";
+    readonly previewText: "#e9f3ff";
     readonly group: "dark";
     readonly overrides: {
         readonly colors: {
-            readonly bg: "#09091f";
-            readonly panel: "#121234";
-            readonly panelSoft: "#1b1b4a";
-            readonly floating: "#121234";
-            readonly brand: "#a78bfa";
-            readonly brandStrong: "#c4b5fd";
-            readonly brandSolid: "#7c3aed";
-            readonly brandSolidHover: "#8b5cf6";
-            readonly brandSoft: "rgb(167 139 250 / 17%)";
-            readonly selected: "rgb(167 139 250 / 14%)";
-            readonly info: "#22d3ee";
-            readonly infoSoft: "#083344";
+            readonly bg: "#080f1c";
+            readonly panel: "#101a2b";
+            readonly panelSoft: "#172338";
+            readonly floating: "#101a2b";
+            readonly primary: {
+                readonly base: "#0369a1";
+                readonly text: "#bae6fd";
+                readonly surface: "rgb(125 211 252 / 16%)";
+                readonly border: "rgb(125 211 252 / 16%)";
+                readonly contrast: "#ffffff";
+            };
+            readonly selected: "rgb(125 211 252 / 13%)";
+            readonly info: {
+                readonly base: "#22d3ee";
+                readonly text: "#22d3ee";
+                readonly surface: "#083344";
+            };
         };
     };
 }, {
@@ -275,11 +297,13 @@ export declare const themePlaygroundPresets: readonly [{
             readonly bg: "#eefbf4";
             readonly panel: "#ffffff";
             readonly panelSoft: "#ddf4e8";
-            readonly brand: "#047857";
-            readonly brandStrong: "#065f46";
-            readonly brandSolid: "#047857";
-            readonly brandSolidHover: "#065f46";
-            readonly brandSoft: "rgb(4 120 87 / 12%)";
+            readonly primary: {
+                readonly base: "#047857";
+                readonly text: "#065f46";
+                readonly surface: "rgb(4 120 87 / 12%)";
+                readonly border: "rgb(4 120 87 / 12%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(4 120 87 / 10%)";
         };
     };
@@ -305,11 +329,13 @@ export declare const themePlaygroundPresets: readonly [{
             readonly bg: "#fff1f8";
             readonly panel: "#ffffff";
             readonly panelSoft: "#ffe4f2";
-            readonly brand: "#db2777";
-            readonly brandStrong: "#be185d";
-            readonly brandSolid: "#db2777";
-            readonly brandSolidHover: "#be185d";
-            readonly brandSoft: "rgb(219 39 119 / 12%)";
+            readonly primary: {
+                readonly base: "#db2777";
+                readonly text: "#be185d";
+                readonly surface: "rgb(219 39 119 / 12%)";
+                readonly border: "rgb(219 39 119 / 12%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(219 39 119 / 10%)";
         };
     };
@@ -352,11 +378,13 @@ export declare const themePlaygroundPresets: readonly [{
             readonly bg: "#f8f5ff";
             readonly panel: "#ffffff";
             readonly panelSoft: "#ede9fe";
-            readonly brand: "#7c3aed";
-            readonly brandStrong: "#5b21b6";
-            readonly brandSolid: "#7c3aed";
-            readonly brandSolidHover: "#6d28d9";
-            readonly brandSoft: "rgb(124 58 237 / 10%)";
+            readonly primary: {
+                readonly base: "#7c3aed";
+                readonly text: "#5b21b6";
+                readonly surface: "rgb(124 58 237 / 10%)";
+                readonly border: "rgb(124 58 237 / 10%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(124 58 237 / 8%)";
             readonly section: "rgb(124 58 237 / 3%)";
             readonly sectionNested: "rgb(124 58 237 / 2%)";
@@ -387,11 +415,13 @@ export declare const themePlaygroundPresets: readonly [{
             readonly bg: "#f4fbf8";
             readonly panel: "#ffffff";
             readonly panelSoft: "#eaf7f1";
-            readonly brand: "#0f9f6e";
-            readonly brandStrong: "#087a54";
-            readonly brandSolid: "#0f9f6e";
-            readonly brandSolidHover: "#0b8a5e";
-            readonly brandSoft: "rgb(15 159 110 / 11%)";
+            readonly primary: {
+                readonly base: "#0f9f6e";
+                readonly text: "#087a54";
+                readonly surface: "rgb(15 159 110 / 11%)";
+                readonly border: "rgb(15 159 110 / 11%)";
+                readonly contrast: "#ffffff";
+            };
             readonly selected: "rgb(15 159 110 / 9%)";
         };
     };

package/dist/example/ExampleThemePlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleThemePlayground.d.ts","sourceRoot":"","sources":["../../src/example/ExampleThemePlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAC;AAElG,OAAO,EAOH,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAExB,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2YY,CAAC;AAOhD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,WAAW,CAEvE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAE5E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAElF;AAyFD,wBAAgB,sBAAsB,CAAC,EACnC,cAAc,EACd,KAAK,EACL,MAAM,EACN,cAAc,EACd,sBAAsB,GACzB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAC3E,2CAwFA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,cAAc,EACd,MAAM,EACN,cAAc,GACjB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,2CAkDA;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAMlD,aAAa,CACrB"}
+{"version":3,"file":"ExampleThemePlayground.d.ts","sourceRoot":"","sources":["../../src/example/ExampleThemePlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAC;AAElG,OAAO,EAOH,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAExB,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyaY,CAAC;AAOhD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,WAAW,CAEvE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAE5E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAElF;AA0FD,wBAAgB,sBAAsB,CAAC,EACnC,cAAc,EACd,KAAK,EACL,MAAM,EACN,cAAc,EACd,sBAAsB,GACzB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAC3E,2CAwFA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,cAAc,EACd,MAAM,EACN,cAAc,GACjB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,2CAkDA;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAMlD,aAAa,CACrB"}

package/dist/example/ExampleThemePlayground.js

@@ -44,14 +44,19 @@ export const themePlaygroundPresets = [
                 panel: '#0d2119',
                 panelSoft: '#133126',
                 floating: '#0d2119',
-                brand: '#34d399',
-                brandStrong: '#86efac',
-                brandSolid: '#059669',
-                brandSolidHover: '#10b981',
-                brandSoft: 'rgb(52 211 153 / 16%)',
+                primary: {
+                    base: '#059669',
+                    text: '#86efac',
+                    surface: 'rgb(52 211 153 / 16%)',
+                    border: 'rgb(52 211 153 / 16%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(52 211 153 / 14%)',
-                info: '#7dd3fc',
-                infoSoft: '#0b3240',
+                info: {
+                    base: '#7dd3fc',
+                    text: '#7dd3fc',
+                    surface: '#0b3240',
+                },
             },
         },
     },
@@ -87,11 +92,13 @@ export const themePlaygroundPresets = [
                 borderStrong: 'rgb(255 255 255 / 12%)',
                 text: '#f7f7f7',
                 muted: '#9a9a9a',
-                brand: '#8ab4ff',
-                brandStrong: '#b7d1ff',
-                brandSolid: '#2759c7',
-                brandSolidHover: '#3369e6',
-                brandSoft: 'rgb(138 180 255 / 17%)',
+                primary: {
+                    base: '#2759c7',
+                    text: '#b7d1ff',
+                    surface: 'rgb(138 180 255 / 17%)',
+                    border: 'rgb(138 180 255 / 17%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(138 180 255 / 14%)',
                 focusRing: '0 0 0 3px rgb(138 180 255 / 20%)',
                 skeletonShimmer: 'rgb(255 255 255 / 7%)',
@@ -130,14 +137,19 @@ export const themePlaygroundPresets = [
                 panel: '#1a1a1a',
                 panelSoft: '#242424',
                 floating: '#1b1b1b',
-                brand: '#c4d3e8',
-                brandStrong: '#e4edf8',
-                brandSolid: '#5d6f87',
-                brandSolidHover: '#71839b',
-                brandSoft: 'rgb(196 211 232 / 14%)',
+                primary: {
+                    base: '#5d6f87',
+                    text: '#e4edf8',
+                    surface: 'rgb(196 211 232 / 14%)',
+                    border: 'rgb(196 211 232 / 14%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(196 211 232 / 12%)',
-                info: '#8ecae6',
-                infoSoft: '#122f3a',
+                info: {
+                    base: '#8ecae6',
+                    text: '#8ecae6',
+                    surface: '#122f3a',
+                },
             },
             radii: {
                 md: '5px',
@@ -158,25 +170,30 @@ export const themePlaygroundPresets = [
         },
         mode: 'dark',
         surface: 'media',
-        accent: '#fb7185',
-        previewBg: '#120d0e',
-        previewPanel: '#2a1222',
-        previewText: '#fff0f6',
+        accent: '#f0a6d8',
+        previewBg: '#141116',
+        previewPanel: '#1d1820',
+        previewText: '#f7eef7',
         group: 'dark',
         overrides: {
             colors: {
-                bg: '#120d0e',
-                panel: '#2a1222',
-                panelSoft: '#3a1830',
-                floating: '#2a1222',
-                brand: '#fb7185',
-                brandStrong: '#fda4af',
-                brandSolid: '#be123c',
-                brandSolidHover: '#e11d48',
-                brandSoft: 'rgb(251 113 133 / 18%)',
-                selected: 'rgb(251 113 133 / 15%)',
-                warning: '#fbbf24',
-                warningSoft: '#4a2f0b',
+                bg: '#141116',
+                panel: '#1d1820',
+                panelSoft: '#29212d',
+                floating: '#1d1820',
+                primary: {
+                    base: '#a84486',
+                    text: '#ffc1e7',
+                    surface: 'rgb(240 166 216 / 17%)',
+                    border: 'rgb(240 166 216 / 17%)',
+                    contrast: '#ffffff',
+                },
+                selected: 'rgb(240 166 216 / 16%)',
+                warning: {
+                    base: '#fbbf24',
+                    text: '#fbbf24',
+                    surface: '#49371c',
+                },
             },
         },
     },
@@ -210,25 +227,30 @@ export const themePlaygroundPresets = [
         },
         mode: 'dark',
         surface: 'orcestr',
-        accent: '#a78bfa',
-        previewBg: '#09091f',
-        previewPanel: '#121234',
-        previewText: '#edf5ff',
+        accent: '#7dd3fc',
+        previewBg: '#080f1c',
+        previewPanel: '#101a2b',
+        previewText: '#e9f3ff',
         group: 'dark',
         overrides: {
             colors: {
-                bg: '#09091f',
-                panel: '#121234',
-                panelSoft: '#1b1b4a',
-                floating: '#121234',
-                brand: '#a78bfa',
-                brandStrong: '#c4b5fd',
-                brandSolid: '#7c3aed',
-                brandSolidHover: '#8b5cf6',
-                brandSoft: 'rgb(167 139 250 / 17%)',
-                selected: 'rgb(167 139 250 / 14%)',
-                info: '#22d3ee',
-                infoSoft: '#083344',
+                bg: '#080f1c',
+                panel: '#101a2b',
+                panelSoft: '#172338',
+                floating: '#101a2b',
+                primary: {
+                    base: '#0369a1',
+                    text: '#bae6fd',
+                    surface: 'rgb(125 211 252 / 16%)',
+                    border: 'rgb(125 211 252 / 16%)',
+                    contrast: '#ffffff',
+                },
+                selected: 'rgb(125 211 252 / 13%)',
+                info: {
+                    base: '#22d3ee',
+                    text: '#22d3ee',
+                    surface: '#083344',
+                },
             },
         },
     },
@@ -272,11 +294,13 @@ export const themePlaygroundPresets = [
                 bg: '#eefbf4',
                 panel: '#ffffff',
                 panelSoft: '#ddf4e8',
-                brand: '#047857',
-                brandStrong: '#065f46',
-                brandSolid: '#047857',
-                brandSolidHover: '#065f46',
-                brandSoft: 'rgb(4 120 87 / 12%)',
+                primary: {
+                    base: '#047857',
+                    text: '#065f46',
+                    surface: 'rgb(4 120 87 / 12%)',
+                    border: 'rgb(4 120 87 / 12%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(4 120 87 / 10%)',
             },
         },
@@ -303,11 +327,13 @@ export const themePlaygroundPresets = [
                 bg: '#fff1f8',
                 panel: '#ffffff',
                 panelSoft: '#ffe4f2',
-                brand: '#db2777',
-                brandStrong: '#be185d',
-                brandSolid: '#db2777',
-                brandSolidHover: '#be185d',
-                brandSoft: 'rgb(219 39 119 / 12%)',
+                primary: {
+                    base: '#db2777',
+                    text: '#be185d',
+                    surface: 'rgb(219 39 119 / 12%)',
+                    border: 'rgb(219 39 119 / 12%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(219 39 119 / 10%)',
             },
         },
@@ -352,11 +378,13 @@ export const themePlaygroundPresets = [
                 bg: '#f8f5ff',
                 panel: '#ffffff',
                 panelSoft: '#ede9fe',
-                brand: '#7c3aed',
-                brandStrong: '#5b21b6',
-                brandSolid: '#7c3aed',
-                brandSolidHover: '#6d28d9',
-                brandSoft: 'rgb(124 58 237 / 10%)',
+                primary: {
+                    base: '#7c3aed',
+                    text: '#5b21b6',
+                    surface: 'rgb(124 58 237 / 10%)',
+                    border: 'rgb(124 58 237 / 10%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(124 58 237 / 8%)',
                 section: 'rgb(124 58 237 / 3%)',
                 sectionNested: 'rgb(124 58 237 / 2%)',
@@ -388,11 +416,13 @@ export const themePlaygroundPresets = [
                 bg: '#f4fbf8',
                 panel: '#ffffff',
                 panelSoft: '#eaf7f1',
-                brand: '#0f9f6e',
-                brandStrong: '#087a54',
-                brandSolid: '#0f9f6e',
-                brandSolidHover: '#0b8a5e',
-                brandSoft: 'rgb(15 159 110 / 11%)',
+                primary: {
+                    base: '#0f9f6e',
+                    text: '#087a54',
+                    surface: 'rgb(15 159 110 / 11%)',
+                    border: 'rgb(15 159 110 / 11%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(15 159 110 / 9%)',
             },
         },
@@ -425,7 +455,7 @@ const flatTokenSections = [
     'zIndex',
     'components',
 ];
-const statusKeys = ['neutral', 'brand', 'success', 'warning', 'danger', 'info'];
+const statusKeys = ['neutral', 'primary', 'secondary', 'success', 'warning', 'danger', 'info'];
 const COLOR_TOKEN_COMMIT_DELAY_MS = 180;
 const themePlaygroundCopy = {
     ru: {
@@ -492,7 +522,7 @@ export function ExampleThemePlayground({ activePresetId, theme, locale, onPreset
                                     start: 2,
                                     fadeDistance: 28,
                                     maxOpacity: 0.94,
-                                }, children: [_jsxs("div", { className: 'oui-theme-token-editor', children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: theme[section], onTokenChange: (key, value) => updateFlatToken(onThemeOverridesChange, section, key, value) }, section))), statusKeys.map((statusKey) => (_jsx(TokenSection, { title: `${copy.statuses} / ${statusKey}`, section: 'status', statusKey: statusKey, values: theme.status[statusKey], onTokenChange: (key, value) => updateStatusToken(onThemeOverridesChange, statusKey, key, String(value)) }, `status-${statusKey}`)))] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Button, { size: 1, children: copy.primaryAction }), _jsx(Button, { size: 1, v: 'surface', children: copy.surface }), _jsx(Button, { size: 1, v: 'ghost', children: copy.secondary }), _jsx(Badge, { tone: 'success', children: copy.ready }), _jsx(Badge, { tone: 'warning', children: copy.warning })] })] })] })] })] }));
+                                }, children: [_jsxs("div", { className: 'oui-theme-token-editor', children: [flatTokenSections.map((section) => (_jsx(TokenSection, { title: tokenSectionLabel(section, locale), section: section, values: tokenSectionValues(theme, section), onTokenChange: (key, value) => updateFlatToken(onThemeOverridesChange, section, key, value) }, section))), statusKeys.map((statusKey) => (_jsx(TokenSection, { title: `${copy.statuses} / ${statusKey}`, section: 'status', statusKey: statusKey, values: theme.status[statusKey], onTokenChange: (key, value) => updateStatusToken(onThemeOverridesChange, statusKey, key, String(value)) }, `status-${statusKey}`)))] }), _jsxs(Flex, { g: 2, wrap: true, children: [_jsx(Button, { size: 1, children: copy.primaryAction }), _jsx(Button, { size: 1, v: 'surface', children: copy.surface }), _jsx(Button, { size: 1, v: 'ghost', children: copy.secondary }), _jsx(Badge, { tone: 'success', children: copy.ready }), _jsx(Badge, { tone: 'warning', children: copy.warning })] })] })] })] })] }));
 }
 export function ThemePresetSelector({ activePresetId, locale, onPresetChange, }) {
     return (_jsx("div", { className: 'oui-theme-preset-grid', children: themePresetGroups.map((group) => (_jsxs("div", { className: 'oui-theme-preset-group', children: [_jsx("div", { className: 'oui-theme-preset-group-label', children: group.label[locale] }), _jsx(ScrollArea, { className: 'oui-theme-preset-scroll', highlights: true, highlightColor: 'var(--oui-section-solid-bg)', highlightTop: {
@@ -541,10 +571,24 @@ function ThemeTokenControl({ label, path, section, value, onChange, }) {
     return (_jsxs("div", { className: 'oui-theme-token oui-theme-token-control', children: [_jsx("span", { className: 'oui-theme-token-swatch', style: {
                     background: visibleColorValue ?? (section === 'colors' || section === 'status'
                         ? valueText
-                        : 'var(--oui-brand-soft)'),
+                        : 'var(--oui-primary-surface)'),
                 }, children: colorInputValue ? (_jsx("input", { className: 'oui-theme-token-swatch-input', type: 'color', value: visibleColorValue ?? colorInputValue, "aria-label": `${label} color`, onChange: (event) => setColorDraft(event.target.value), onBlur: commitColorDraft })) : null }), _jsxs("span", { className: 'oui-theme-token-text', children: [_jsx(Text, { fs: '12px', fw: 700, children: label }), _jsx(Text, { fs: '11px', tone: 'muted', children: path })] }), _jsx("span", { className: 'oui-theme-token-control-field', children: selectOptions ? (_jsx("select", { value: valueText, "aria-label": label, onChange: (event) => onChange(event.target.value), children: selectOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })) : (_jsx("input", { type: typeof value === 'number' ? 'number' : 'text', value: valueText, "aria-label": label, onChange: (event) => onChange(typeof value === 'number' ? Number(event.target.value) : event.target.value) })) })] }));
 }
 function updateFlatToken(updateOverrides, section, key, value) {
+    if (section === 'colors' && key.includes('.')) {
+        const [roleKey, slotKey] = key.split('.', 2);
+        updateOverrides((current) => ({
+            ...current,
+            colors: {
+                ...current.colors,
+                [roleKey]: {
+                    ...current.colors?.[roleKey],
+                    [slotKey]: value,
+                },
+            },
+        }));
+        return;
+    }
     updateOverrides((current) => ({
         ...current,
         [section]: {
@@ -553,6 +597,25 @@ function updateFlatToken(updateOverrides, section, key, value) {
         },
     }));
 }
+function tokenSectionValues(theme, section) {
+    const values = theme[section];
+    if (section !== 'colors')
+        return values;
+    return flattenTokenValues(values);
+}
+function flattenTokenValues(values, prefix = '') {
+    return Object.entries(values).reduce((result, [key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === 'string' || typeof value === 'number' || value === false) {
+            result[path] = value;
+            return result;
+        }
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            Object.assign(result, flattenTokenValues(value, path));
+        }
+        return result;
+    }, {});
+}
 function updateStatusToken(updateOverrides, statusKey, key, value) {
     updateOverrides((current) => ({
         ...current,

package/dist/example/UiExamplePage.d.ts

@@ -1,2 +1,8 @@
-export declare function UiExamplePage(): import("react/jsx-runtime").JSX.Element;
+import { type OrcestrUiLocale } from '..';
+export type UiExamplePageProps = {
+    locale?: OrcestrUiLocale;
+    defaultLocale?: OrcestrUiLocale;
+    onLocaleChange?: (locale: OrcestrUiLocale) => void;
+};
+export declare function UiExamplePage({ locale: controlledLocale, defaultLocale, onLocaleChange, }?: UiExamplePageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiExamplePage.d.ts.map

package/dist/example/UiExamplePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAwmBA,wBAAgB,aAAa,4CAmC5B"}
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAWH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA2mBZ,MAAM,MAAM,kBAAkB,GAAG;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EAAE,gBAAgB,EACxB,aAAoB,EACpB,cAAc,GACjB,GAAE,kBAAuB,2CA8CzB"}