@orcestr/ui 0.0.3 → 0.1.1

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,2CA+P3B"}

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,
@@ -74,9 +88,9 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
         '--oui-section-shadow': theme.shadows.section,
         '--oui-shadow-focus': theme.shadows.focus,
         '--oui-ring': theme.colors.focusRing,
-        '--oui-radius': theme.radii.lg,
-        '--oui-radius-sm': theme.radii.md,
-        '--oui-radius-xl': theme.radii.xl,
+        '--oui-radius': theme.radius.lg,
+        '--oui-radius-sm': theme.radius.md,
+        '--oui-radius-xl': theme.radius.xl,
         '--oui-space-px': theme.spacing.px,
         '--oui-space-xs': theme.spacing.xs,
         '--oui-space-sm': theme.spacing.sm,
@@ -90,27 +104,31 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
         '--oui-breakpoint-tablet': theme.breakpoints.tablet,
         '--oui-breakpoint-desktop': theme.breakpoints.desktop,
         '--oui-breakpoint-wide': theme.breakpoints.wide,
-        '--oui-font-family': theme.typography.fontFamily,
-        '--oui-font-family-mono': theme.typography.monoFontFamily,
-        '--oui-title-size': theme.typography.titleSize,
-        '--oui-heading-size': theme.typography.headingSize,
-        '--oui-body-size': theme.typography.bodySize,
-        '--oui-compact-size': theme.typography.compactSize,
-        '--oui-label-size': theme.typography.labelSize,
-        '--oui-line-height': theme.typography.lineHeight,
-        '--oui-heading-line-height': theme.typography.headingLineHeight,
-        '--oui-weight-regular': theme.typography.weightRegular,
-        '--oui-weight-medium': theme.typography.weightMedium,
-        '--oui-weight-bold': theme.typography.weightBold,
-        '--oui-letter-spacing': theme.typography.letterSpacing,
+        '--oui-font-family': theme.text.family,
+        '--oui-font-family-mono': theme.text.mono,
+        '--oui-title-size': theme.text.title,
+        '--oui-heading-size': theme.text.heading,
+        '--oui-body-size': theme.text.body,
+        '--oui-compact-size': theme.text.compact,
+        '--oui-label-size': theme.text.label,
+        '--oui-line-height': theme.text.line,
+        '--oui-heading-line-height': theme.text.headingLine,
+        '--oui-weight-regular': theme.text.regular,
+        '--oui-weight-medium': theme.text.medium,
+        '--oui-weight-bold': theme.text.bold,
+        '--oui-letter-spacing': theme.text.letterSpacing,
         '--oui-status-neutral': theme.status.neutral.color,
         '--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,
@@ -138,11 +156,13 @@ export function OrcestrThemeProvider({ children, mode: controlledMode, defaultMo
         '--oui-z-toast': theme.zIndex.toast,
         '--oui-toast-bg': theme.toast.background,
         '--oui-toast-blur': cssBlur(theme.toast.blur),
-        '--oui-toast-border-color': theme.toast.borderColor,
         '--oui-toast-shadow': theme.toast.shadow,
         '--oui-toast-animation-duration': theme.toast.animationDuration,
         '--oui-toast-exit-duration': theme.toast.exitDuration,
         '--oui-toast-progress-height': theme.toast.progressHeight,
+        '--oui-scrollbar-thumb': theme.scrollbar.thumb,
+        '--oui-scrollbar-thumb-hover': theme.scrollbar.thumbHover,
+        '--oui-scrollbar-track': theme.scrollbar.track,
         '--oui-state-hover-opacity': theme.states.hoverOpacity,
         '--oui-state-active-opacity': theme.states.activeOpacity,
         '--oui-state-disabled-opacity': theme.states.disabledOpacity,
@@ -160,9 +180,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 +236,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;AAqlBF,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"}