@orcestr/ui 0.0.3 → 0.1.0

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAGR,yBAAyB,EAE5B,MAAM,cAAc,CAAC;AAEtB,wBAAgB,oBAAoB,CAAC,EACjC,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAoB,EACpB,cAA0B,EAC1B,OAAO,EACP,YAAY,EACZ,eAAe,EACf,cAAc,EACd,SAAS,EACT,KAAK,EACL,MAAM,GACT,EAAE,yBAAyB,2CA2N3B"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAGR,yBAAyB,EAE5B,MAAM,cAAc,CAAC;AAEtB,wBAAgB,oBAAoB,CAAC,EACjC,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAoB,EACpB,cAA0B,EAC1B,OAAO,EACP,YAAY,EACZ,eAAe,EACf,cAAc,EACd,SAAS,EACT,KAAK,EACL,MAAM,GACT,EAAE,yBAAyB,2CA6P3B"}

package/dist/theme/ThemeProvider.js

@@ -23,39 +23,53 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
     const toggleMode = useCallback(() => {
         setMode(resolvedMode === 'dark' ? 'light' : 'dark');
     }, [resolvedMode, setMode]);
-    const value = useMemo(() => ({
-        mode: resolvedMode,
-        surface: resolvedSurface,
-        theme,
-        setMode,
-        setSurface,
-        toggleMode,
-    }), [resolvedMode, resolvedSurface, theme, setMode, setSurface, toggleMode]);
     const rootStyle = useMemo(() => ({
         '--oui-bg': theme.colors.bg,
         '--oui-panel': theme.colors.panel,
         '--oui-panel-2': theme.colors.panelSoft,
-        '--oui-control-bg': theme.colors.control,
+        '--oui-control-bg': controlBackgroundForMode(theme),
         '--oui-control-hover-bg': theme.colors.controlHover,
         '--oui-border': theme.colors.border,
         '--oui-border-strong': theme.colors.borderStrong,
         '--oui-text': theme.colors.text,
         '--oui-muted': theme.colors.muted,
-        '--oui-soft': theme.colors.brandSoft,
+        '--oui-soft': theme.colors.primary.surface,
         '--oui-soft-hover': theme.colors.selected,
-        '--oui-brand': theme.colors.brand,
-        '--oui-brand-strong': theme.colors.brandStrong,
-        '--oui-brand-solid': theme.colors.brandSolid,
-        '--oui-brand-solid-hover': theme.colors.brandSolidHover,
-        '--oui-brand-soft': theme.colors.brandSoft,
-        '--oui-success': theme.colors.success,
-        '--oui-success-soft': theme.colors.successSoft,
-        '--oui-warning': theme.colors.warning,
-        '--oui-warning-soft': theme.colors.warningSoft,
-        '--oui-danger': theme.colors.danger,
-        '--oui-danger-soft': theme.colors.dangerSoft,
-        '--oui-info': theme.colors.info,
-        '--oui-info-soft': theme.colors.infoSoft,
+        '--oui-primary-base': theme.colors.primary.base,
+        '--oui-primary-text': theme.colors.primary.text,
+        '--oui-primary-surface': theme.colors.primary.surface,
+        '--oui-primary-border': theme.colors.primary.border,
+        '--oui-primary-contrast': theme.colors.primary.contrast,
+        '--oui-secondary-base': theme.colors.secondary.base,
+        '--oui-secondary-text': theme.colors.secondary.text,
+        '--oui-secondary-surface': theme.colors.secondary.surface,
+        '--oui-secondary-border': theme.colors.secondary.border,
+        '--oui-secondary-contrast': theme.colors.secondary.contrast,
+        '--oui-neutral-base': theme.colors.neutral.base,
+        '--oui-neutral-text': theme.colors.neutral.text,
+        '--oui-neutral-surface': theme.colors.neutral.surface,
+        '--oui-neutral-border': theme.colors.neutral.border,
+        '--oui-neutral-contrast': theme.colors.neutral.contrast,
+        '--oui-success-base': theme.colors.success.base,
+        '--oui-success-text': theme.colors.success.text,
+        '--oui-success-surface': theme.colors.success.surface,
+        '--oui-success-border': theme.colors.success.border,
+        '--oui-success-contrast': theme.colors.success.contrast,
+        '--oui-warning-base': theme.colors.warning.base,
+        '--oui-warning-text': theme.colors.warning.text,
+        '--oui-warning-surface': theme.colors.warning.surface,
+        '--oui-warning-border': theme.colors.warning.border,
+        '--oui-warning-contrast': theme.colors.warning.contrast,
+        '--oui-danger-base': theme.colors.danger.base,
+        '--oui-danger-text': theme.colors.danger.text,
+        '--oui-danger-surface': theme.colors.danger.surface,
+        '--oui-danger-border': theme.colors.danger.border,
+        '--oui-danger-contrast': theme.colors.danger.contrast,
+        '--oui-info-base': theme.colors.info.base,
+        '--oui-info-text': theme.colors.info.text,
+        '--oui-info-surface': theme.colors.info.surface,
+        '--oui-info-border': theme.colors.info.border,
+        '--oui-info-contrast': theme.colors.info.contrast,
         '--oui-selected-bg': theme.colors.selected,
         '--oui-disabled': theme.colors.disabled,
         '--oui-overlay-bg': theme.colors.overlay,
@@ -107,10 +121,14 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
         '--oui-status-neutral-text': theme.status.neutral.text,
         '--oui-status-neutral-soft': theme.status.neutral.soft,
         '--oui-status-neutral-border': theme.status.neutral.border,
-        '--oui-status-brand': theme.status.brand.color,
-        '--oui-status-brand-text': theme.status.brand.text,
-        '--oui-status-brand-soft': theme.status.brand.soft,
-        '--oui-status-brand-border': theme.status.brand.border,
+        '--oui-status-primary': theme.status.primary.color,
+        '--oui-status-primary-text': theme.status.primary.text,
+        '--oui-status-primary-soft': theme.status.primary.soft,
+        '--oui-status-primary-border': theme.status.primary.border,
+        '--oui-status-secondary': theme.status.secondary.color,
+        '--oui-status-secondary-text': theme.status.secondary.text,
+        '--oui-status-secondary-soft': theme.status.secondary.soft,
+        '--oui-status-secondary-border': theme.status.secondary.border,
         '--oui-status-success': theme.status.success.color,
         '--oui-status-success-text': theme.status.success.text,
         '--oui-status-success-soft': theme.status.success.soft,
@@ -160,9 +178,25 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
         '--oui-table-header-height': theme.components.tableHeaderHeight,
         '--oui-field-gap': theme.components.fieldGap,
         '--oui-modal-max-width': theme.components.modalMaxWidth,
-        '--oui-pipeline-step-min-width': theme.components.pipelineStepMinWidth,
     }), [theme]);
     const themeStyle = useMemo(() => ({ ...rootStyle, ...style }), [rootStyle, style]);
+    const value = useMemo(() => ({
+        mode: resolvedMode,
+        surface: resolvedSurface,
+        theme,
+        cssVariables: rootStyle,
+        setMode,
+        setSurface,
+        toggleMode,
+    }), [
+        resolvedMode,
+        resolvedSurface,
+        theme,
+        rootStyle,
+        setMode,
+        setSurface,
+        toggleMode,
+    ]);
     useEffect(() => {
         const root = document.documentElement;
         const previousTheme = root.getAttribute('data-oui-theme');
@@ -200,16 +234,36 @@ function compositeColor(foreground, background) {
     const bg = parseCssColor(background);
     if (!fg || !bg)
         return foreground;
-    if (fg.a <= 0)
-        return rgbColor(bg);
-    if (fg.a >= 1)
-        return rgbColor(fg);
-    return rgbColor({
-        r: Math.round(fg.r * fg.a + bg.r * (1 - fg.a)),
-        g: Math.round(fg.g * fg.a + bg.g * (1 - fg.a)),
-        b: Math.round(fg.b * fg.a + bg.b * (1 - fg.a)),
+    return rgbColor(blendColor(fg, bg));
+}
+function controlBackgroundForMode(theme) {
+    if (theme.mode !== 'light')
+        return theme.colors.control;
+    const control = parseCssColor(theme.colors.control);
+    const bg = parseCssColor(theme.colors.bg);
+    if (!control || !bg || control.a <= 0)
+        return theme.colors.control;
+    const visibleControl = blendColor(control, bg);
+    return relativeLuminance(visibleControl) < 0.52 ? 'transparent' : theme.colors.control;
+}
+function blendColor(foreground, background) {
+    if (foreground.a <= 0)
+        return { ...background, a: 1 };
+    if (foreground.a >= 1)
+        return { ...foreground, a: 1 };
+    return {
+        r: Math.round(foreground.r * foreground.a + background.r * (1 - foreground.a)),
+        g: Math.round(foreground.g * foreground.a + background.g * (1 - foreground.a)),
+        b: Math.round(foreground.b * foreground.a + background.b * (1 - foreground.a)),
         a: 1,
+    };
+}
+function relativeLuminance(color) {
+    const [r, g, b] = [color.r, color.g, color.b].map((channel) => {
+        const value = channel / 255;
+        return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
     });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 function rgbColor(color) {
     return `rgb(${color.r} ${color.g} ${color.b})`;

package/dist/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACtB,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,6BAA6B,GAAG;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC5C,mBAAmB,EACnB,6BAA6B,CAsBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,6BAA6B,EAK/D,CAAC;AAgeF,wBAAgB,WAAW,CACvB,IAAI,EAAE,gBAAgB,EACtB,OAAO,GAAE,mBAA+B,EACxC,cAAc,CAAC,EAAE,qBAAqB,GACvC,YAAY,CASd;AAED,eAAO,MAAM,SAAS,EAAE,YAAkC,CAAC;AAC3D,eAAO,MAAM,UAAU,EAAE,YAAmC,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACtB,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,6BAA6B,GAAG;IACxC,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC5C,mBAAmB,EACnB,6BAA6B,CAsBhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,6BAA6B,EAK/D,CAAC;AAglBF,wBAAgB,WAAW,CACvB,IAAI,EAAE,gBAAgB,EACtB,OAAO,GAAE,mBAA+B,EACxC,cAAc,CAAC,EAAE,qBAAqB,GACvC,YAAY,CASd;AAED,eAAO,MAAM,SAAS,EAAE,YAAkC,CAAC;AAC3D,eAAO,MAAM,UAAU,EAAE,YAAmC,CAAC"}