@orcestr/ui 0.0.3 → 0.1.0

package/dist/theme/defaultTheme.js

@@ -102,145 +102,220 @@ const sharedStructure = {
     },
     components: {
         buttonRadius: '6px',
-        buttonFontWeight: 650,
-        tableCellPaddingY: '10px',
-        tableHeaderHeight: '42px',
+        buttonFontWeight: 500,
+        tableCellPaddingY: '8px',
+        tableHeaderHeight: '38px',
         fieldGap: '6px',
         modalMaxWidth: '680px',
-        pipelineStepMinWidth: '130px',
     },
 };
 const darkBase = {
     colors: {
-        bg: '#111318',
-        panel: '#171a21',
-        panelSoft: '#20242d',
+        bg: '#09090b',
+        panel: '#0c0c0f',
+        panelSoft: '#222222',
         control: 'transparent',
-        controlHover: 'rgb(255 255 255 / 6%)',
-        text: '#f4f6f8',
-        muted: '#9aa4b2',
-        border: 'rgb(255 255 255 / 10%)',
-        borderStrong: 'rgb(255 255 255 / 20%)',
-        brand: '#6ea0ff',
-        brandStrong: '#93b8ff',
-        brandSolid: '#315fbe',
-        brandSolidHover: '#3b70d8',
-        brandSoft: 'rgb(110 160 255 / 16%)',
-        brandText: '#ffffff',
-        danger: '#ff7b72',
-        dangerSoft: 'rgb(255 123 114 / 14%)',
-        success: '#5fd3a1',
-        successSoft: '#173a31',
-        warning: '#f3c969',
-        warningSoft: '#443516',
-        info: '#71c7ff',
-        infoSoft: '#173852',
-        selected: 'rgb(110 160 255 / 15%)',
-        focusRing: '0 0 0 3px rgb(106 160 255 / 22%)',
-        disabled: 'rgb(154 164 178 / 42%)',
+        controlHover: '#ffffff12',
+        text: '#eeeeee',
+        muted: '#b4b4b4',
+        border: '#ffffff1b',
+        borderStrong: '#ffffff2c',
+        primary: {
+            base: '#0090ff',
+            text: '#70b8ff',
+            surface: '#0077ff3a',
+            border: '#2a91fe98',
+            contrast: '#ffffff',
+        },
+        secondary: {
+            base: '#8d8d8d',
+            text: '#eeeeee',
+            surface: '#ffffff09',
+            border: '#ffffff1b',
+            contrast: '#ffffff',
+        },
+        neutral: {
+            base: '#b4b4b4',
+            text: '#eeeeee',
+            surface: '#ffffff09',
+            border: '#ffffff1b',
+            contrast: '#ffffff',
+        },
+        danger: {
+            base: '#e5484d',
+            text: '#ff9592',
+            surface: '#ff173f2d',
+            border: '#ff536184',
+            contrast: '#ffffff',
+        },
+        success: {
+            base: '#30a46c',
+            text: '#3dd68c',
+            surface: '#22ff991e',
+            border: '#50fdac5e',
+            contrast: '#ffffff',
+        },
+        warning: {
+            base: '#ffc53d',
+            text: '#ffca16',
+            surface: '#fa820022',
+            border: '#fd9b0051',
+            contrast: '#202020',
+        },
+        info: {
+            base: '#0090ff',
+            text: '#70b8ff',
+            surface: '#0077ff3a',
+            border: '#2a91fe98',
+            contrast: '#ffffff',
+        },
+        selected: '#0077ff3a',
+        focusRing: '0 0 0 3px #0075ff57',
+        disabled: '#ffffff55',
         overlay: 'rgb(0 0 0 / 48%)',
-        floating: '#161a22',
-        section: 'rgb(255 255 255 / 2%)',
-        sectionNested: 'rgb(255 255 255 / 2%)',
-        pad: 'rgb(255 255 255 / 2%)',
-        padHover: 'rgb(255 255 255 / 4.5%)',
-        skeletonShimmer: 'rgb(255 255 255 / 8%)',
+        floating: '#0c0c0f',
+        section: 'transparent',
+        sectionNested: 'transparent',
+        pad: '#ffffff09',
+        padHover: '#ffffff12',
+        skeletonShimmer: '#ffffff12',
     },
     shadows: {
-        sm: '0 2px 10px rgb(0 0 0 / 22%)',
-        md: '0 16px 48px rgb(0 0 0 / 42%)',
+        sm: 'inset 0 -1px 1px 0 #ffffff12, inset 0 0 0 1px #ffffff12, inset 0 3px 4px 0 rgb(0 0 0 / 30%), inset 0 0 0 1px #ffffff1b',
+        md: '0 0 0 1px #ffffff2c, 0 2px 3px -2px rgb(0 0 0 / 15%), 0 3px 8px -2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%)',
         overlay: '0 24px 70px rgb(0 0 0 / 48%)',
         section: 'none',
         focus: darkBaseFocusRing(),
     },
     status: statusTokens({
         neutral: {
-            color: '#9aa4b2',
-            text: '#f4f6f8',
-            soft: 'rgb(255 255 255 / 2%)',
-            border: 'rgb(255 255 255 / 10%)',
+            color: '#b4b4b4',
+            text: '#eeeeee',
+            soft: '#ffffff09',
+            border: '#ffffff1b',
+        },
+        primary: {
+            color: '#0090ff',
+            text: '#70b8ff',
+            soft: '#0077ff3a',
+            border: '#2a91fe98',
         },
-        brand: {
-            color: '#6ea0ff',
-            text: '#93b8ff',
-            soft: 'rgb(110 160 255 / 16%)',
-            border: 'rgb(110 160 255 / 34%)',
+        secondary: {
+            color: '#8d8d8d',
+            text: '#eeeeee',
+            soft: '#ffffff09',
+            border: '#ffffff1b',
         },
         success: {
-            color: '#5fd3a1',
-            text: '#5fd3a1',
-            soft: '#173a31',
-            border: 'rgb(95 211 161 / 30%)',
+            color: '#30a46c',
+            text: '#3dd68c',
+            soft: '#22ff991e',
+            border: '#50fdac5e',
         },
         warning: {
-            color: '#f3c969',
-            text: '#f3c969',
-            soft: '#443516',
-            border: 'rgb(243 201 105 / 32%)',
+            color: '#ffc53d',
+            text: '#ffca16',
+            soft: '#fa820022',
+            border: '#fd9b0051',
         },
         danger: {
-            color: '#ff7b72',
-            text: '#ff7b72',
-            soft: 'rgb(255 123 114 / 14%)',
-            border: 'rgb(255 123 114 / 34%)',
+            color: '#e5484d',
+            text: '#ff9592',
+            soft: '#ff173f2d',
+            border: '#ff536184',
         },
         info: {
-            color: '#71c7ff',
-            text: '#71c7ff',
-            soft: '#173852',
-            border: 'rgb(113 199 255 / 30%)',
+            color: '#0090ff',
+            text: '#70b8ff',
+            soft: '#0077ff3a',
+            border: '#2a91fe98',
         },
     }),
     toast: {
-        background: 'rgb(22 26 34 / 86%)',
-        blur: 14,
-        borderColor: 'rgb(255 255 255 / 14%)',
-        shadow: '0 12px 32px rgb(0 0 0 / 24%)',
-        animationDuration: '520ms',
-        exitDuration: '260ms',
-        progressHeight: '1px',
+        background: 'rgb(12 12 15 / 56%)',
+        blur: 18,
+        borderColor: 'rgb(255 255 255 / 12%)',
+        shadow: '0 10px 30px rgb(0 0 0 / 20%)',
+        animationDuration: '420ms',
+        exitDuration: '320ms',
+        progressHeight: '2px',
     },
     ...sharedStructure,
 };
 const lightBase = {
     colors: {
-        bg: '#f8fafc',
+        bg: '#ffffff',
         panel: '#ffffff',
-        panelSoft: '#f3f6fa',
+        panelSoft: '#f9f9f9',
         control: 'transparent',
-        controlHover: 'rgb(15 23 42 / 6%)',
-        text: '#111827',
-        muted: '#6b7280',
-        border: 'rgb(15 23 42 / 12%)',
-        borderStrong: 'rgb(15 23 42 / 24%)',
-        brand: '#2563eb',
-        brandStrong: '#1d4ed8',
-        brandSolid: '#2563eb',
-        brandSolidHover: '#1d4ed8',
-        brandSoft: 'rgb(37 99 235 / 12%)',
-        brandText: '#ffffff',
-        danger: '#dc2626',
-        dangerSoft: 'rgb(220 38 38 / 12%)',
-        success: '#0f9f6e',
-        successSoft: '#e8f8f2',
-        warning: '#bd7a00',
-        warningSoft: '#fff6db',
-        info: '#0876bd',
-        infoSoft: '#e7f4ff',
-        selected: 'rgb(37 99 235 / 10%)',
-        focusRing: '0 0 0 3px rgb(37 99 235 / 16%)',
-        disabled: 'rgb(107 114 128 / 46%)',
+        controlHover: '#0000000f',
+        text: '#202020',
+        muted: '#646464',
+        border: '#00000017',
+        borderStrong: '#00000026',
+        primary: {
+            base: '#0090ff',
+            text: '#0d74ce',
+            surface: '#008ff519',
+            border: '#0083eb71',
+            contrast: '#ffffff',
+        },
+        secondary: {
+            base: '#8d8d8d',
+            text: '#202020',
+            surface: '#00000006',
+            border: '#00000017',
+            contrast: '#ffffff',
+        },
+        neutral: {
+            base: '#6b7280',
+            text: '#202020',
+            surface: '#00000006',
+            border: '#00000017',
+            contrast: '#ffffff',
+        },
+        danger: {
+            base: '#e5484d',
+            text: '#ce2c31',
+            surface: '#f3000d14',
+            border: '#df000356',
+            contrast: '#ffffff',
+        },
+        success: {
+            base: '#30a46c',
+            text: '#218358',
+            surface: '#00a43319',
+            border: '#00914071',
+            contrast: '#ffffff',
+        },
+        warning: {
+            base: '#ffc53d',
+            text: '#ab6400',
+            surface: '#ffde003d',
+            border: '#eab5008c',
+            contrast: '#202020',
+        },
+        info: {
+            base: '#0090ff',
+            text: '#0d74ce',
+            surface: '#008ff519',
+            border: '#0083eb71',
+            contrast: '#ffffff',
+        },
+        selected: '#008ff519',
+        focusRing: '0 0 0 3px #009eff2a',
+        disabled: '#00000044',
         overlay: 'rgb(15 23 42 / 36%)',
         floating: '#ffffff',
         section: 'transparent',
         sectionNested: 'transparent',
-        pad: 'rgb(15 23 42 / 3.5%)',
-        padHover: 'rgb(15 23 42 / 5.5%)',
+        pad: '#00000006',
+        padHover: '#0000000f',
         skeletonShimmer: 'rgb(255 255 255 / 18%)',
     },
     shadows: {
-        sm: '0 2px 8px rgb(17 24 39 / 8%)',
-        md: '0 16px 48px rgb(15 23 42 / 18%)',
+        sm: 'inset 0 0 0 1px #0000001f, inset 0 1.5px 2px 0 #00000006, inset 0 1.5px 2px 0 rgb(0 0 0 / 10%)',
+        md: '0 0 0 1px #0000000f, 0 2px 3px -2px #0000000f, 0 3px 12px -4px rgb(0 0 0 / 10%), 0 4px 16px -8px rgb(0 0 0 / 10%)',
         overlay: '0 24px 70px rgb(15 23 42 / 22%)',
         section: '0 8px 26px rgb(15 23 42 / 8%)',
         focus: lightBaseFocusRing(),
@@ -248,49 +323,55 @@ const lightBase = {
     status: statusTokens({
         neutral: {
             color: '#6b7280',
-            text: '#111827',
-            soft: 'rgb(15 23 42 / 3.5%)',
-            border: 'rgb(15 23 42 / 12%)',
+            text: '#202020',
+            soft: '#00000006',
+            border: '#00000017',
         },
-        brand: {
-            color: '#2563eb',
-            text: '#1d4ed8',
-            soft: 'rgb(37 99 235 / 12%)',
-            border: 'rgb(37 99 235 / 28%)',
+        primary: {
+            color: '#0090ff',
+            text: '#0d74ce',
+            soft: '#008ff519',
+            border: '#0083eb71',
+        },
+        secondary: {
+            color: '#8d8d8d',
+            text: '#202020',
+            soft: '#00000006',
+            border: '#00000017',
         },
         success: {
-            color: '#0f9f6e',
-            text: '#0f9f6e',
-            soft: '#e8f8f2',
-            border: 'rgb(15 159 110 / 26%)',
+            color: '#30a46c',
+            text: '#218358',
+            soft: '#00a43319',
+            border: '#00914071',
         },
         warning: {
-            color: '#bd7a00',
-            text: '#bd7a00',
-            soft: '#fff6db',
-            border: 'rgb(189 122 0 / 28%)',
+            color: '#ffc53d',
+            text: '#ab6400',
+            soft: '#ffde003d',
+            border: '#eab5008c',
         },
         danger: {
-            color: '#dc2626',
-            text: '#dc2626',
-            soft: 'rgb(220 38 38 / 12%)',
-            border: 'rgb(220 38 38 / 28%)',
+            color: '#e5484d',
+            text: '#ce2c31',
+            soft: '#f3000d14',
+            border: '#df000356',
         },
         info: {
-            color: '#0876bd',
-            text: '#0876bd',
-            soft: '#e7f4ff',
-            border: 'rgb(8 118 189 / 26%)',
+            color: '#0090ff',
+            text: '#0d74ce',
+            soft: '#008ff519',
+            border: '#0083eb71',
         },
     }),
     toast: {
-        background: 'rgb(255 255 255 / 86%)',
-        blur: 14,
+        background: 'rgb(255 255 255 / 72%)',
+        blur: 18,
         borderColor: 'rgb(15 23 42 / 12%)',
-        shadow: '0 12px 30px rgb(15 23 42 / 12%)',
-        animationDuration: '520ms',
-        exitDuration: '260ms',
-        progressHeight: '1px',
+        shadow: '0 10px 30px rgb(15 23 42 / 12%)',
+        animationDuration: '420ms',
+        exitDuration: '320ms',
+        progressHeight: '2px',
     },
     ...sharedStructure,
 };
@@ -302,51 +383,34 @@ const surfaceOverrides = {
     operations: {
         dark: {
             colors: {
-                bg: '#0f1216',
-                panel: '#151a20',
-                panelSoft: '#1d252e',
-                floating: '#151a20',
-                brand: '#5dd4a4',
-                brandStrong: '#7ee6ba',
-                brandSolid: '#16885d',
-                brandSolidHover: '#1fa06f',
-                brandSoft: 'rgb(93 212 164 / 16%)',
-                selected: 'rgb(93 212 164 / 15%)',
-                focusRing: '0 0 0 3px rgb(93 212 164 / 22%)',
-                info: '#82cfff',
-                infoSoft: '#15364b',
+                bg: '#09090b',
+                panel: '#0c0c0f',
+                panelSoft: '#222222',
+                floating: '#0c0c0f',
             },
             toast: {
-                background: 'rgb(21 26 32 / 88%)',
+                background: 'rgb(12 12 15 / 88%)',
             },
             components: {
+                buttonFontWeight: 500,
                 tableCellPaddingY: '8px',
                 tableHeaderHeight: '38px',
-                pipelineStepMinWidth: '148px',
             },
         },
         light: {
             colors: {
-                bg: '#f6faf8',
+                bg: '#ffffff',
                 panel: '#ffffff',
-                panelSoft: '#edf5f1',
-                brand: '#12815c',
-                brandStrong: '#0f6f4f',
-                brandSolid: '#12815c',
-                brandSolidHover: '#0f6f4f',
-                brandSoft: 'rgb(18 129 92 / 12%)',
-                selected: 'rgb(18 129 92 / 10%)',
-                focusRing: '0 0 0 3px rgb(18 129 92 / 16%)',
-                info: '#0969a8',
-                infoSoft: '#e4f2fb',
+                panelSoft: '#f9f9f9',
+                floating: '#ffffff',
             },
             toast: {
                 background: 'rgb(255 255 255 / 88%)',
             },
             components: {
+                buttonFontWeight: 500,
                 tableCellPaddingY: '8px',
                 tableHeaderHeight: '38px',
-                pipelineStepMinWidth: '148px',
             },
         },
     },
@@ -357,17 +421,29 @@ const surfaceOverrides = {
                 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(255 193 231 / 28%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(240 166 216 / 16%)',
                 focusRing: '0 0 0 3px rgb(240 166 216 / 24%)',
-                warning: '#ffd079',
-                warningSoft: '#49371c',
-                info: '#9bd7ff',
-                infoSoft: '#19394d',
+                warning: {
+                    base: '#ffd079',
+                    text: '#ffd079',
+                    surface: '#49371c',
+                    border: 'rgb(255 208 121 / 34%)',
+                    contrast: '#202020',
+                },
+                info: {
+                    base: '#9bd7ff',
+                    text: '#9bd7ff',
+                    surface: '#19394d',
+                    border: 'rgb(155 215 255 / 32%)',
+                    contrast: '#202020',
+                },
             },
             toast: {
                 background: 'rgb(29 24 32 / 88%)',
@@ -384,17 +460,29 @@ const surfaceOverrides = {
                 bg: '#fff8fc',
                 panel: '#ffffff',
                 panelSoft: '#fff0f8',
-                brand: '#c0267f',
-                brandStrong: '#a21d6c',
-                brandSolid: '#c0267f',
-                brandSolidHover: '#a21d6c',
-                brandSoft: 'rgb(192 38 127 / 12%)',
+                primary: {
+                    base: '#c0267f',
+                    text: '#a21d6c',
+                    surface: 'rgb(192 38 127 / 12%)',
+                    border: 'rgb(192 38 127 / 24%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(192 38 127 / 10%)',
                 focusRing: '0 0 0 3px rgb(192 38 127 / 16%)',
-                warning: '#b96b00',
-                warningSoft: '#fff1d0',
-                info: '#0876bd',
-                infoSoft: '#e6f5ff',
+                warning: {
+                    base: '#b96b00',
+                    text: '#b96b00',
+                    surface: '#fff1d0',
+                    border: 'rgb(185 107 0 / 26%)',
+                    contrast: '#ffffff',
+                },
+                info: {
+                    base: '#0876bd',
+                    text: '#0876bd',
+                    surface: '#e6f5ff',
+                    border: 'rgb(8 118 189 / 24%)',
+                    contrast: '#ffffff',
+                },
             },
             toast: {
                 background: 'rgb(255 255 255 / 88%)',
@@ -413,17 +501,29 @@ const surfaceOverrides = {
                 panel: '#191712',
                 panelSoft: '#242017',
                 floating: '#191712',
-                brand: '#e6c26a',
-                brandStrong: '#f1d990',
-                brandSolid: '#9b6f12',
-                brandSolidHover: '#b98219',
-                brandSoft: 'rgb(230 194 106 / 16%)',
+                primary: {
+                    base: '#9b6f12',
+                    text: '#f1d990',
+                    surface: 'rgb(230 194 106 / 16%)',
+                    border: 'rgb(241 217 144 / 28%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(230 194 106 / 14%)',
                 focusRing: '0 0 0 3px rgb(230 194 106 / 22%)',
-                warning: '#f4c95d',
-                warningSoft: '#493814',
-                info: '#9fc5ff',
-                infoSoft: '#1a314f',
+                warning: {
+                    base: '#f4c95d',
+                    text: '#f4c95d',
+                    surface: '#493814',
+                    border: 'rgb(244 201 93 / 34%)',
+                    contrast: '#202020',
+                },
+                info: {
+                    base: '#9fc5ff',
+                    text: '#9fc5ff',
+                    surface: '#1a314f',
+                    border: 'rgb(159 197 255 / 32%)',
+                    contrast: '#202020',
+                },
             },
             toast: {
                 background: 'rgb(25 23 18 / 88%)',
@@ -439,17 +539,29 @@ const surfaceOverrides = {
                 bg: '#fbfaf6',
                 panel: '#ffffff',
                 panelSoft: '#f3efe4',
-                brand: '#9b6f12',
-                brandStrong: '#79570e',
-                brandSolid: '#9b6f12',
-                brandSolidHover: '#79570e',
-                brandSoft: 'rgb(155 111 18 / 12%)',
+                primary: {
+                    base: '#9b6f12',
+                    text: '#79570e',
+                    surface: 'rgb(155 111 18 / 12%)',
+                    border: 'rgb(155 111 18 / 24%)',
+                    contrast: '#ffffff',
+                },
                 selected: 'rgb(155 111 18 / 10%)',
                 focusRing: '0 0 0 3px rgb(155 111 18 / 16%)',
-                warning: '#a16207',
-                warningSoft: '#fff4cf',
-                info: '#2563eb',
-                infoSoft: '#e9f1ff',
+                warning: {
+                    base: '#a16207',
+                    text: '#a16207',
+                    surface: '#fff4cf',
+                    border: 'rgb(161 98 7 / 26%)',
+                    contrast: '#ffffff',
+                },
+                info: {
+                    base: '#2563eb',
+                    text: '#2563eb',
+                    surface: '#e9f1ff',
+                    border: 'rgb(37 99 235 / 24%)',
+                    contrast: '#ffffff',
+                },
             },
             toast: {
                 background: 'rgb(255 255 255 / 88%)',
@@ -466,7 +578,7 @@ function mergeTheme(baseTheme, overrides) {
         ...overrides,
         mode: baseTheme.mode,
         surface: baseTheme.surface,
-        colors: { ...baseTheme.colors, ...overrides.colors },
+        colors: mergeColors(baseTheme.colors, overrides.colors),
         radii: { ...baseTheme.radii, ...overrides.radii },
         spacing: { ...baseTheme.spacing, ...overrides.spacing },
         breakpoints: { ...baseTheme.breakpoints, ...overrides.breakpoints },
@@ -494,10 +606,10 @@ export function themeByMode(mode, surface = 'orcestr', themeOverrides) {
 export const darkTheme = themeByMode('dark');
 export const lightTheme = themeByMode('light');
 function darkBaseFocusRing() {
-    return '0 0 0 3px rgb(106 160 255 / 22%)';
+    return '0 0 0 3px #0075ff57';
 }
 function lightBaseFocusRing() {
-    return '0 0 0 3px rgb(37 99 235 / 16%)';
+    return '0 0 0 3px #009eff2a';
 }
 function statusTokens(tokens) {
     return tokens;
@@ -507,10 +619,26 @@ function mergeStatus(baseStatus, overrides) {
         return baseStatus;
     return {
         neutral: { ...baseStatus.neutral, ...overrides.neutral },
-        brand: { ...baseStatus.brand, ...overrides.brand },
+        primary: { ...baseStatus.primary, ...overrides.primary },
+        secondary: { ...baseStatus.secondary, ...overrides.secondary },
         success: { ...baseStatus.success, ...overrides.success },
         warning: { ...baseStatus.warning, ...overrides.warning },
         danger: { ...baseStatus.danger, ...overrides.danger },
         info: { ...baseStatus.info, ...overrides.info },
     };
 }
+function mergeColors(baseColors, overrides) {
+    if (!overrides)
+        return baseColors;
+    return {
+        ...baseColors,
+        ...overrides,
+        primary: { ...baseColors.primary, ...overrides.primary },
+        secondary: { ...baseColors.secondary, ...overrides.secondary },
+        neutral: { ...baseColors.neutral, ...overrides.neutral },
+        danger: { ...baseColors.danger, ...overrides.danger },
+        success: { ...baseColors.success, ...overrides.success },
+        warning: { ...baseColors.warning, ...overrides.warning },
+        info: { ...baseColors.info, ...overrides.info },
+    };
+}