@orcestr/ui 0.0.3 → 0.1.1

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,16 +145,21 @@ 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 radius: {
             readonly md: "5px";
             readonly lg: "7px";
             readonly xl: "10px";
@@ -176,14 +188,19 @@ export declare const themePlaygroundPresets: readonly [{
             readonly panel: "#1d1820";
             readonly panelSoft: "#29212d";
             readonly floating: "#1d1820";
-            readonly brand: "#f0a6d8";
-            readonly brandStrong: "#ffc1e7";
-            readonly brandSolid: "#a84486";
-            readonly brandSolidHover: "#bc5399";
-            readonly brandSoft: "rgb(240 166 216 / 17%)";
+            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: "#fbbf24";
-            readonly warningSoft: "#49371c";
+            readonly warning: {
+                readonly base: "#fbbf24";
+                readonly text: "#fbbf24";
+                readonly surface: "#49371c";
+            };
         };
     };
 }, {
@@ -226,14 +243,19 @@ export declare const themePlaygroundPresets: readonly [{
             readonly panel: "#101a2b";
             readonly panelSoft: "#172338";
             readonly floating: "#101a2b";
-            readonly brand: "#7dd3fc";
-            readonly brandStrong: "#bae6fd";
-            readonly brandSolid: "#0369a1";
-            readonly brandSolidHover: "#0284c7";
-            readonly brandSoft: "rgb(125 211 252 / 16%)";
+            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: "#22d3ee";
-            readonly infoSoft: "#083344";
+            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;AA6FD,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,16 +137,21 @@ 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: {
+            radius: {
                 md: '5px',
                 lg: '7px',
                 xl: '10px',
@@ -169,14 +181,19 @@ export const themePlaygroundPresets = [
                 panel: '#1d1820',
                 panelSoft: '#29212d',
                 floating: '#1d1820',
-                brand: '#f0a6d8',
-                brandStrong: '#ffc1e7',
-                brandSolid: '#a84486',
-                brandSolidHover: '#bc5399',
-                brandSoft: 'rgb(240 166 216 / 17%)',
+                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: '#fbbf24',
-                warningSoft: '#49371c',
+                warning: {
+                    base: '#fbbf24',
+                    text: '#fbbf24',
+                    surface: '#49371c',
+                },
             },
         },
     },
@@ -221,14 +238,19 @@ export const themePlaygroundPresets = [
                 panel: '#101a2b',
                 panelSoft: '#172338',
                 floating: '#101a2b',
-                brand: '#7dd3fc',
-                brandStrong: '#bae6fd',
-                brandSolid: '#0369a1',
-                brandSolidHover: '#0284c7',
-                brandSoft: 'rgb(125 211 252 / 16%)',
+                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: '#22d3ee',
-                infoSoft: '#083344',
+                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%)',
             },
         },
@@ -413,19 +443,20 @@ export function themePresetDescription(preset, locale) {
 }
 const flatTokenSections = [
     'colors',
-    'radii',
+    'radius',
     'spacing',
     'breakpoints',
     'shadows',
-    'typography',
+    'text',
     'motion',
     'toast',
+    'scrollbar',
     'states',
     'density',
     '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: {
@@ -441,13 +472,14 @@ const themePlaygroundCopy = {
         statuses: 'Статусы',
         tokenSections: {
             colors: 'Цвета',
-            radii: 'Радиусы',
+            radius: 'Радиус',
             spacing: 'Отступы',
             breakpoints: 'Брейкпоинты',
             shadows: 'Тени',
-            typography: 'Типографика',
+            text: 'Текст',
             motion: 'Движение',
             toast: 'Toast',
+            scrollbar: 'Scrollbar',
             states: 'Состояния',
             density: 'Плотность',
             zIndex: 'Z-index',
@@ -467,13 +499,14 @@ const themePlaygroundCopy = {
         statuses: 'Statuses',
         tokenSections: {
             colors: 'Colors',
-            radii: 'Radii',
+            radius: 'Radius',
             spacing: 'Spacing',
             breakpoints: 'Breakpoints',
             shadows: 'Shadows',
-            typography: 'Typography',
+            text: 'Text',
             motion: 'Motion',
             toast: 'Toast',
+            scrollbar: 'Scrollbar',
             states: 'States',
             density: 'Density',
             zIndex: 'Z-index',
@@ -492,7 +525,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 +574,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 +600,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.map

@@ -1 +1 @@
-{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAWA,OAAO,EAYH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AA4lBZ,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"}
+{"version":3,"file":"UiExamplePage.d.ts","sourceRoot":"","sources":["../../src/example/UiExamplePage.tsx"],"names":[],"mappings":"AAYA,OAAO,EAaH,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAwlBZ,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"}