diff --git a/packages/react-ui/.prettierignore b/packages/react-ui/.prettierignore index 4dd4a3f2b..6905c74b2 100644 --- a/packages/react-ui/.prettierignore +++ b/packages/react-ui/.prettierignore @@ -1,2 +1,3 @@ # Auto-generated file, do not format src/cssUtils.scss +src/openui-defaults.scss diff --git a/packages/react-ui/cp-css.js b/packages/react-ui/cp-css.js index c5b159672..52d1087d7 100644 --- a/packages/react-ui/cp-css.js +++ b/packages/react-ui/cp-css.js @@ -66,6 +66,11 @@ function copyCssFiles() { const cssUtilsSrc = fs.readFileSync(path.join(dirname, "src", "cssUtils.scss"), "utf8"); fs.writeFileSync(path.join(distDir, "cssUtils.scss"), cssUtilsSrc); + const defaultsCssPath = path.join(dirname, "dist", "openui-defaults.css"); + if (fs.existsSync(defaultsCssPath)) { + fs.copyFileSync(defaultsCssPath, path.join(distDir, "openui-defaults.css")); + } + // Fix .scss imports in compiled JS to point to .css files instead fixScssImportsInJs(path.join(dirname, "dist")); } diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index e95de180b..5d74fbd0c 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -14,6 +14,9 @@ "./components.css": { "default": "./dist/components/index.css" }, + "./defaults.css": { + "default": "./dist/styles/openui-defaults.css" + }, "./styles/*": { "default": "./dist/styles/*" }, diff --git a/packages/react-ui/src/components/index.scss b/packages/react-ui/src/components/index.scss index 90ad81d42..e9a4a77fc 100644 --- a/packages/react-ui/src/components/index.scss +++ b/packages/react-ui/src/components/index.scss @@ -1,3 +1,5 @@ +@use "../openui-defaults.scss"; + @forward "./Accordion/accordion.scss"; @forward "./BottomTray/bottomTray.scss"; @forward "./Button/button.scss"; diff --git a/packages/react-ui/src/cssUtils.scss b/packages/react-ui/src/cssUtils.scss index 12aa0c6c1..df517cb2c 100644 --- a/packages/react-ui/src/cssUtils.scss +++ b/packages/react-ui/src/cssUtils.scss @@ -3,235 +3,235 @@ // Surface / Background Colors -$background: var(--openui-background, oklch(0.97 0 89.876 / 1)); -$foreground: var(--openui-foreground, oklch(0.994 0 89.876 / 1)); -$popover-background: var(--openui-popover-background, oklch(0.994 0 89.876 / 1)); -$sunk-light: var(--openui-sunk-light, oklch(0.097 0 0 / 0.02)); -$sunk: var(--openui-sunk, oklch(0.097 0 0 / 0.04)); -$sunk-deep: var(--openui-sunk-deep, oklch(0.097 0 0 / 0.08)); -$elevated-light: var(--openui-elevated-light, oklch(0.097 0 0 / 0.04)); -$elevated: var(--openui-elevated, oklch(0.097 0 0 / 0.08)); -$elevated-strong: var(--openui-elevated-strong, oklch(0.097 0 0 / 0.16)); -$elevated-intense: var(--openui-elevated-intense, oklch(0.097 0 0 / 0.32)); -$overlay: var(--openui-overlay, oklch(0 0 0 / 0.4)); -$highlight-subtle: var(--openui-highlight-subtle, oklch(0.097 0 0 / 0.02)); -$highlight: var(--openui-highlight, oklch(0.097 0 0 / 0.04)); -$highlight-strong: var(--openui-highlight-strong, oklch(0.097 0 0 / 0.08)); -$highlight-intense: var(--openui-highlight-intense, oklch(0.097 0 0 / 0.32)); -$inverted-background: var(--openui-inverted-background, oklch(0.097 0 0 / 1)); -$info-background: var(--openui-info-background, oklch(0.623 0.188 259.815 / 0.12)); -$success-background: var(--openui-success-background, oklch(0.627 0.17 149.214 / 0.12)); -$alert-background: var(--openui-alert-background, oklch(0.795 0.162 86.047 / 0.16)); -$danger-background: var(--openui-danger-background, oklch(0.577 0.215 27.325 / 0.12)); -$purple-background: var(--openui-purple-background, oklch(0.627 0.233 303.9 / 0.12)); -$pink-background: var(--openui-pink-background, oklch(0.592 0.218 0.584 / 0.12)); +$background: var(--openui-background); +$foreground: var(--openui-foreground); +$popover-background: var(--openui-popover-background); +$sunk-light: var(--openui-sunk-light); +$sunk: var(--openui-sunk); +$sunk-deep: var(--openui-sunk-deep); +$elevated-light: var(--openui-elevated-light); +$elevated: var(--openui-elevated); +$elevated-strong: var(--openui-elevated-strong); +$elevated-intense: var(--openui-elevated-intense); +$overlay: var(--openui-overlay); +$highlight-subtle: var(--openui-highlight-subtle); +$highlight: var(--openui-highlight); +$highlight-strong: var(--openui-highlight-strong); +$highlight-intense: var(--openui-highlight-intense); +$inverted-background: var(--openui-inverted-background); +$info-background: var(--openui-info-background); +$success-background: var(--openui-success-background); +$alert-background: var(--openui-alert-background); +$danger-background: var(--openui-danger-background); +$purple-background: var(--openui-purple-background); +$pink-background: var(--openui-pink-background); // Text Colors -$text-neutral-primary: var(--openui-text-neutral-primary, oklch(0.097 0 0 / 1)); -$text-neutral-secondary: var(--openui-text-neutral-secondary, oklch(0.097 0 0 / 0.5)); -$text-neutral-tertiary: var(--openui-text-neutral-tertiary, oklch(0.097 0 0 / 0.2)); -$text-neutral-link: var(--openui-text-neutral-link, oklch(0.097 0 0 / 1)); -$text-brand: var(--openui-text-brand, oklch(0.097 0 0 / 1)); -$text-white: var(--openui-text-white, oklch(1 0 89.876 / 1)); -$text-black: var(--openui-text-black, oklch(0 0 0 / 1)); -$text-accent-primary: var(--openui-text-accent-primary, oklch(0.994 0 89.876 / 1)); -$text-accent-secondary: var(--openui-text-accent-secondary, oklch(0.994 0 89.876 / 0.5)); -$text-accent-tertiary: var(--openui-text-accent-tertiary, oklch(0.994 0 89.876 / 0.2)); -$text-success-primary: var(--openui-text-success-primary, oklch(0.448 0.108 151.328 / 1)); -$text-success-inverted: var(--openui-text-success-inverted, oklch(0.962 0.043 156.743 / 1)); -$text-alert-primary: var(--openui-text-alert-primary, oklch(0.476 0.103 61.907 / 1)); -$text-alert-inverted: var(--openui-text-alert-inverted, oklch(0.973 0.069 103.193 / 1)); -$text-danger-primary: var(--openui-text-danger-primary, oklch(0.505 0.19 27.518 / 1)); -$text-danger-secondary: var(--openui-text-danger-secondary, oklch(0.711 0.166 22.216 / 1)); -$text-danger-tertiary: var(--openui-text-danger-tertiary, oklch(0.808 0.103 19.571 / 1)); -$text-danger-inverted-primary: var(--openui-text-danger-inverted-primary, oklch(0.982 0.009 17.303 / 1)); -$text-danger-inverted-secondary: var(--openui-text-danger-inverted-secondary, oklch(0.982 0.009 17.303 / 0.5)); -$text-danger-inverted-tertiary: var(--openui-text-danger-inverted-tertiary, oklch(0.982 0.009 17.303 / 0.3)); -$text-info-primary: var(--openui-text-info-primary, oklch(0.424 0.181 265.638 / 1)); -$text-info-inverted: var(--openui-text-info-inverted, oklch(0.932 0.032 255.585 / 1)); -$text-pink-primary: var(--openui-text-pink-primary, oklch(0.459 0.17 3.815 / 1)); -$text-pink-inverted: var(--openui-text-pink-inverted, oklch(0.948 0.028 342.258 / 1)); -$text-purple-primary: var(--openui-text-purple-primary, oklch(0.438 0.198 303.724 / 1)); -$text-purple-inverted: var(--openui-text-purple-inverted, oklch(0.946 0.033 307.174 / 1)); +$text-neutral-primary: var(--openui-text-neutral-primary); +$text-neutral-secondary: var(--openui-text-neutral-secondary); +$text-neutral-tertiary: var(--openui-text-neutral-tertiary); +$text-neutral-link: var(--openui-text-neutral-link); +$text-brand: var(--openui-text-brand); +$text-white: var(--openui-text-white); +$text-black: var(--openui-text-black); +$text-accent-primary: var(--openui-text-accent-primary); +$text-accent-secondary: var(--openui-text-accent-secondary); +$text-accent-tertiary: var(--openui-text-accent-tertiary); +$text-success-primary: var(--openui-text-success-primary); +$text-success-inverted: var(--openui-text-success-inverted); +$text-alert-primary: var(--openui-text-alert-primary); +$text-alert-inverted: var(--openui-text-alert-inverted); +$text-danger-primary: var(--openui-text-danger-primary); +$text-danger-secondary: var(--openui-text-danger-secondary); +$text-danger-tertiary: var(--openui-text-danger-tertiary); +$text-danger-inverted-primary: var(--openui-text-danger-inverted-primary); +$text-danger-inverted-secondary: var(--openui-text-danger-inverted-secondary); +$text-danger-inverted-tertiary: var(--openui-text-danger-inverted-tertiary); +$text-info-primary: var(--openui-text-info-primary); +$text-info-inverted: var(--openui-text-info-inverted); +$text-pink-primary: var(--openui-text-pink-primary); +$text-pink-inverted: var(--openui-text-pink-inverted); +$text-purple-primary: var(--openui-text-purple-primary); +$text-purple-inverted: var(--openui-text-purple-inverted); // Interactive Colors -$interactive-accent-default: var(--openui-interactive-accent-default, oklch(0.097 0 0 / 1)); -$interactive-accent-hover: var(--openui-interactive-accent-hover, oklch(0.097 0 0 / 0.8)); -$interactive-accent-disabled: var(--openui-interactive-accent-disabled, oklch(0.097 0 0 / 0.4)); -$interactive-accent-pressed: var(--openui-interactive-accent-pressed, oklch(0.097 0 0 / 1)); -$interactive-destructive-default: var(--openui-interactive-destructive-default, oklch(0.577 0.215 27.325 / 0.02)); -$interactive-destructive-hover: var(--openui-interactive-destructive-hover, oklch(0.577 0.215 27.325 / 0.08)); -$interactive-destructive-disabled: var(--openui-interactive-destructive-disabled, oklch(0.577 0.215 27.325 / 0.02)); -$interactive-destructive-pressed: var(--openui-interactive-destructive-pressed, oklch(0.577 0.215 27.325 / 0.1)); -$interactive-destructive-accent-default: var(--openui-interactive-destructive-accent-default, oklch(0.577 0.215 27.325 / 1)); -$interactive-destructive-accent-hover: var(--openui-interactive-destructive-accent-hover, oklch(0.637 0.208 25.331 / 1)); -$interactive-destructive-accent-pressed: var(--openui-interactive-destructive-accent-pressed, oklch(0.505 0.19 27.518 / 1)); -$interactive-destructive-accent-disabled: var(--openui-interactive-destructive-accent-disabled, oklch(0.577 0.215 27.325 / 0.4)); +$interactive-accent-default: var(--openui-interactive-accent-default); +$interactive-accent-hover: var(--openui-interactive-accent-hover); +$interactive-accent-disabled: var(--openui-interactive-accent-disabled); +$interactive-accent-pressed: var(--openui-interactive-accent-pressed); +$interactive-destructive-default: var(--openui-interactive-destructive-default); +$interactive-destructive-hover: var(--openui-interactive-destructive-hover); +$interactive-destructive-disabled: var(--openui-interactive-destructive-disabled); +$interactive-destructive-pressed: var(--openui-interactive-destructive-pressed); +$interactive-destructive-accent-default: var(--openui-interactive-destructive-accent-default); +$interactive-destructive-accent-hover: var(--openui-interactive-destructive-accent-hover); +$interactive-destructive-accent-pressed: var(--openui-interactive-destructive-accent-pressed); +$interactive-destructive-accent-disabled: var(--openui-interactive-destructive-accent-disabled); // Chat Colors -$chat-user-response-bg: var(--openui-chat-user-response-bg, oklch(0.097 0 0 / 1)); -$chat-user-response-text: var(--openui-chat-user-response-text, oklch(0.994 0 89.876 / 1)); +$chat-user-response-bg: var(--openui-chat-user-response-bg); +$chat-user-response-text: var(--openui-chat-user-response-text); // Border Colors -$border-default: var(--openui-border-default, oklch(0.097 0 0 / 0.06)); -$border-interactive: var(--openui-border-interactive, oklch(0.097 0 0 / 0.12)); -$border-interactive-emphasis: var(--openui-border-interactive-emphasis, oklch(0.097 0 0 / 0.3)); -$border-interactive-selected: var(--openui-border-interactive-selected, oklch(0.097 0 0 / 1)); -$border-accent: var(--openui-border-accent, oklch(0.097 0 0 / 0.08)); -$border-accent-emphasis: var(--openui-border-accent-emphasis, oklch(0.097 0 0 / 0.3)); -$border-info: var(--openui-border-info, oklch(0.623 0.188 259.815 / 0.08)); -$border-info-emphasis: var(--openui-border-info-emphasis, oklch(0.546 0.215 262.881 / 1)); -$border-alert: var(--openui-border-alert, oklch(0.861 0.173 91.936 / 0.08)); -$border-alert-emphasis: var(--openui-border-alert-emphasis, oklch(0.681 0.142 75.834 / 1)); -$border-success: var(--openui-border-success, oklch(0.627 0.17 149.214 / 0.08)); -$border-success-emphasis: var(--openui-border-success-emphasis, oklch(0.627 0.17 149.214 / 1)); -$border-danger: var(--openui-border-danger, oklch(0.577 0.215 27.325 / 0.08)); -$border-danger-emphasis: var(--openui-border-danger-emphasis, oklch(0.577 0.215 27.325 / 1)); +$border-default: var(--openui-border-default); +$border-interactive: var(--openui-border-interactive); +$border-interactive-emphasis: var(--openui-border-interactive-emphasis); +$border-interactive-selected: var(--openui-border-interactive-selected); +$border-accent: var(--openui-border-accent); +$border-accent-emphasis: var(--openui-border-accent-emphasis); +$border-info: var(--openui-border-info); +$border-info-emphasis: var(--openui-border-info-emphasis); +$border-alert: var(--openui-border-alert); +$border-alert-emphasis: var(--openui-border-alert-emphasis); +$border-success: var(--openui-border-success); +$border-success-emphasis: var(--openui-border-success-emphasis); +$border-danger: var(--openui-border-danger); +$border-danger-emphasis: var(--openui-border-danger-emphasis); // Spacing -$space-000: var(--openui-space-000, 0); -$space-3xs: var(--openui-space-3xs, 2px); -$space-2xs: var(--openui-space-2xs, 4px); -$space-xs: var(--openui-space-xs, 6px); -$space-s: var(--openui-space-s, 8px); -$space-s-m: var(--openui-space-s-m, 10px); -$space-m: var(--openui-space-m, 12px); -$space-m-l: var(--openui-space-m-l, 16px); -$space-l: var(--openui-space-l, 18px); -$space-xl: var(--openui-space-xl, 24px); -$space-2xl: var(--openui-space-2xl, 36px); -$space-3xl: var(--openui-space-3xl, 48px); +$space-000: var(--openui-space-000); +$space-3xs: var(--openui-space-3xs); +$space-2xs: var(--openui-space-2xs); +$space-xs: var(--openui-space-xs); +$space-s: var(--openui-space-s); +$space-s-m: var(--openui-space-s-m); +$space-m: var(--openui-space-m); +$space-m-l: var(--openui-space-m-l); +$space-l: var(--openui-space-l); +$space-xl: var(--openui-space-xl); +$space-2xl: var(--openui-space-2xl); +$space-3xl: var(--openui-space-3xl); // Border Radius -$radius-none: var(--openui-radius-none, 0); -$radius-3xs: var(--openui-radius-3xs, 1px); -$radius-2xs: var(--openui-radius-2xs, 2px); -$radius-xs: var(--openui-radius-xs, 4px); -$radius-s: var(--openui-radius-s, 6px); -$radius-m: var(--openui-radius-m, 8px); -$radius-l: var(--openui-radius-l, 10px); -$radius-xl: var(--openui-radius-xl, 12px); -$radius-2xl: var(--openui-radius-2xl, 14px); -$radius-3xl: var(--openui-radius-3xl, 16px); -$radius-4xl: var(--openui-radius-4xl, 20px); -$radius-5xl: var(--openui-radius-5xl, 24px); -$radius-6xl: var(--openui-radius-6xl, 28px); -$radius-7xl: var(--openui-radius-7xl, 32px); -$radius-8xl: var(--openui-radius-8xl, 40px); -$radius-9xl: var(--openui-radius-9xl, 48px); -$radius-full: var(--openui-radius-full, 9999px); +$radius-none: var(--openui-radius-none); +$radius-3xs: var(--openui-radius-3xs); +$radius-2xs: var(--openui-radius-2xs); +$radius-xs: var(--openui-radius-xs); +$radius-s: var(--openui-radius-s); +$radius-m: var(--openui-radius-m); +$radius-l: var(--openui-radius-l); +$radius-xl: var(--openui-radius-xl); +$radius-2xl: var(--openui-radius-2xl); +$radius-3xl: var(--openui-radius-3xl); +$radius-4xl: var(--openui-radius-4xl); +$radius-5xl: var(--openui-radius-5xl); +$radius-6xl: var(--openui-radius-6xl); +$radius-7xl: var(--openui-radius-7xl); +$radius-8xl: var(--openui-radius-8xl); +$radius-9xl: var(--openui-radius-9xl); +$radius-full: var(--openui-radius-full); // Typography Tokens -$font-body: var(--openui-font-body, "Inter", sans-serif); -$font-code: var(--openui-font-code, "SFMono-Regular", Menlo, monospace); -$font-heading: var(--openui-font-heading, "Inter", sans-serif); -$font-label: var(--openui-font-label, "Inter", sans-serif); -$font-numbers: var(--openui-font-numbers, "Inter", sans-serif); -$font-size-2xs: var(--openui-font-size-2xs, 10px); -$font-size-xs: var(--openui-font-size-xs, 12px); -$font-size-sm: var(--openui-font-size-sm, 14px); -$font-size-md: var(--openui-font-size-md, 16px); -$font-size-lg: var(--openui-font-size-lg, 18px); -$font-size-xl: var(--openui-font-size-xl, 20px); -$font-size-2xl: var(--openui-font-size-2xl, 24px); -$font-size-3xl: var(--openui-font-size-3xl, 28px); -$font-size-4xl: var(--openui-font-size-4xl, 32px); -$font-size-5xl: var(--openui-font-size-5xl, 36px); -$font-weight-regular: var(--openui-font-weight-regular, 400); -$font-weight-medium: var(--openui-font-weight-medium, 500); -$font-weight-bold: var(--openui-font-weight-bold, 600); -$font-weight-heavy: var(--openui-font-weight-heavy, 700); -$line-height-body: var(--openui-line-height-body, 1.5); -$line-height-heading: var(--openui-line-height-heading, 1.25); -$line-height-heading-large: var(--openui-line-height-heading-large, 1.1); -$line-height-label: var(--openui-line-height-label, 1.25); -$line-height-code: var(--openui-line-height-code, 1.5); -$letter-spacing-normal: var(--openui-letter-spacing-normal, 0); -$letter-spacing-tight: var(--openui-letter-spacing-tight, -0.1px); -$letter-spacing-tighter: var(--openui-letter-spacing-tighter, -0.2px); -$text-body-xs: var(--openui-text-body-xs, 400 12px/1.5 "Inter", sans-serif); -$text-body-xs-letter-spacing: var(--openui-text-body-xs-letter-spacing, 0); -$text-body-xs-heavy: var(--openui-text-body-xs-heavy, 500 12px/1.5 "Inter", sans-serif); -$text-body-xs-heavy-letter-spacing: var(--openui-text-body-xs-heavy-letter-spacing, 0); -$text-body-sm: var(--openui-text-body-sm, 400 14px/1.5 "Inter", sans-serif); -$text-body-sm-letter-spacing: var(--openui-text-body-sm-letter-spacing, 0); -$text-body-sm-heavy: var(--openui-text-body-sm-heavy, 500 14px/1.5 "Inter", sans-serif); -$text-body-sm-heavy-letter-spacing: var(--openui-text-body-sm-heavy-letter-spacing, 0); -$text-body-default: var(--openui-text-body-default, 400 16px/1.5 "Inter", sans-serif); -$text-body-default-letter-spacing: var(--openui-text-body-default-letter-spacing, 0); -$text-body-default-heavy: var(--openui-text-body-default-heavy, 500 16px/1.5 "Inter", sans-serif); -$text-body-default-heavy-letter-spacing: var(--openui-text-body-default-heavy-letter-spacing, 0); -$text-body-lg: var(--openui-text-body-lg, 400 18px/1.5 "Inter", sans-serif); -$text-body-lg-letter-spacing: var(--openui-text-body-lg-letter-spacing, 0); -$text-body-lg-heavy: var(--openui-text-body-lg-heavy, 500 18px/1.5 "Inter", sans-serif); -$text-body-lg-heavy-letter-spacing: var(--openui-text-body-lg-heavy-letter-spacing, 0); -$text-heading-xs: var(--openui-text-heading-xs, 600 16px/1.25 "Inter", sans-serif); -$text-heading-xs-letter-spacing: var(--openui-text-heading-xs-letter-spacing, 0); -$text-heading-sm: var(--openui-text-heading-sm, 600 18px/1.25 "Inter", sans-serif); -$text-heading-sm-letter-spacing: var(--openui-text-heading-sm-letter-spacing, 0); -$text-heading-md: var(--openui-text-heading-md, 600 24px/1.1 "Inter", sans-serif); -$text-heading-md-letter-spacing: var(--openui-text-heading-md-letter-spacing, 0); -$text-heading-lg: var(--openui-text-heading-lg, 600 28px/1.1 "Inter", sans-serif); -$text-heading-lg-letter-spacing: var(--openui-text-heading-lg-letter-spacing, -0.1px); -$text-heading-xl: var(--openui-text-heading-xl, 700 32px/1.1 "Inter", sans-serif); -$text-heading-xl-letter-spacing: var(--openui-text-heading-xl-letter-spacing, -0.1px); -$text-label-xs: var(--openui-text-label-xs, 400 12px/1.25 "Inter", sans-serif); -$text-label-xs-letter-spacing: var(--openui-text-label-xs-letter-spacing, 0); -$text-label-xs-heavy: var(--openui-text-label-xs-heavy, 500 12px/1.25 "Inter", sans-serif); -$text-label-xs-heavy-letter-spacing: var(--openui-text-label-xs-heavy-letter-spacing, 0); -$text-label-sm: var(--openui-text-label-sm, 400 14px/1.25 "Inter", sans-serif); -$text-label-sm-letter-spacing: var(--openui-text-label-sm-letter-spacing, 0); -$text-label-sm-heavy: var(--openui-text-label-sm-heavy, 500 14px/1.25 "Inter", sans-serif); -$text-label-sm-heavy-letter-spacing: var(--openui-text-label-sm-heavy-letter-spacing, 0); -$text-label-default: var(--openui-text-label-default, 400 16px/1.25 "Inter", sans-serif); -$text-label-default-letter-spacing: var(--openui-text-label-default-letter-spacing, 0); -$text-label-default-heavy: var(--openui-text-label-default-heavy, 500 16px/1.25 "Inter", sans-serif); -$text-label-default-heavy-letter-spacing: var(--openui-text-label-default-heavy-letter-spacing, 0); -$text-label-lg: var(--openui-text-label-lg, 400 18px/1.25 "Inter", sans-serif); -$text-label-lg-letter-spacing: var(--openui-text-label-lg-letter-spacing, 0); -$text-label-lg-heavy: var(--openui-text-label-lg-heavy, 500 18px/1.25 "Inter", sans-serif); -$text-label-lg-heavy-letter-spacing: var(--openui-text-label-lg-heavy-letter-spacing, 0); -$text-numbers-xs: var(--openui-text-numbers-xs, 400 12px/1.5 "Inter", sans-serif); -$text-numbers-xs-letter-spacing: var(--openui-text-numbers-xs-letter-spacing, 0); -$text-numbers-xs-heavy: var(--openui-text-numbers-xs-heavy, 500 12px/1.5 "Inter", sans-serif); -$text-numbers-xs-heavy-letter-spacing: var(--openui-text-numbers-xs-heavy-letter-spacing, 0); -$text-numbers-sm: var(--openui-text-numbers-sm, 400 14px/1.5 "Inter", sans-serif); -$text-numbers-sm-letter-spacing: var(--openui-text-numbers-sm-letter-spacing, 0); -$text-numbers-sm-heavy: var(--openui-text-numbers-sm-heavy, 500 14px/1.5 "Inter", sans-serif); -$text-numbers-sm-heavy-letter-spacing: var(--openui-text-numbers-sm-heavy-letter-spacing, 0); -$text-numbers-default: var(--openui-text-numbers-default, 400 16px/1.5 "Inter", sans-serif); -$text-numbers-default-letter-spacing: var(--openui-text-numbers-default-letter-spacing, 0); -$text-numbers-default-heavy: var(--openui-text-numbers-default-heavy, 500 16px/1.5 "Inter", sans-serif); -$text-numbers-default-heavy-letter-spacing: var(--openui-text-numbers-default-heavy-letter-spacing, 0); -$text-numbers-lg: var(--openui-text-numbers-lg, 400 18px/1.5 "Inter", sans-serif); -$text-numbers-lg-letter-spacing: var(--openui-text-numbers-lg-letter-spacing, 0); -$text-numbers-lg-heavy: var(--openui-text-numbers-lg-heavy, 500 18px/1.5 "Inter", sans-serif); -$text-numbers-lg-heavy-letter-spacing: var(--openui-text-numbers-lg-heavy-letter-spacing, 0); -$text-code-sm: var(--openui-text-code-sm, 400 12px/1.5 "SFMono-Regular", Menlo, monospace); -$text-code-sm-letter-spacing: var(--openui-text-code-sm-letter-spacing, 0); -$text-code-sm-heavy: var(--openui-text-code-sm-heavy, 700 12px/1.5 "SFMono-Regular", Menlo, monospace); -$text-code-sm-heavy-letter-spacing: var(--openui-text-code-sm-heavy-letter-spacing, 0); -$text-code-default: var(--openui-text-code-default, 400 14px/1.5 "SFMono-Regular", Menlo, monospace); -$text-code-default-letter-spacing: var(--openui-text-code-default-letter-spacing, 0); -$text-code-default-heavy: var(--openui-text-code-default-heavy, 700 14px/1.5 "SFMono-Regular", Menlo, monospace); -$text-code-default-heavy-letter-spacing: var(--openui-text-code-default-heavy-letter-spacing, 0); +$font-body: var(--openui-font-body); +$font-code: var(--openui-font-code); +$font-heading: var(--openui-font-heading); +$font-label: var(--openui-font-label); +$font-numbers: var(--openui-font-numbers); +$font-size-2xs: var(--openui-font-size-2xs); +$font-size-xs: var(--openui-font-size-xs); +$font-size-sm: var(--openui-font-size-sm); +$font-size-md: var(--openui-font-size-md); +$font-size-lg: var(--openui-font-size-lg); +$font-size-xl: var(--openui-font-size-xl); +$font-size-2xl: var(--openui-font-size-2xl); +$font-size-3xl: var(--openui-font-size-3xl); +$font-size-4xl: var(--openui-font-size-4xl); +$font-size-5xl: var(--openui-font-size-5xl); +$font-weight-regular: var(--openui-font-weight-regular); +$font-weight-medium: var(--openui-font-weight-medium); +$font-weight-bold: var(--openui-font-weight-bold); +$font-weight-heavy: var(--openui-font-weight-heavy); +$line-height-body: var(--openui-line-height-body); +$line-height-heading: var(--openui-line-height-heading); +$line-height-heading-large: var(--openui-line-height-heading-large); +$line-height-label: var(--openui-line-height-label); +$line-height-code: var(--openui-line-height-code); +$letter-spacing-normal: var(--openui-letter-spacing-normal); +$letter-spacing-tight: var(--openui-letter-spacing-tight); +$letter-spacing-tighter: var(--openui-letter-spacing-tighter); +$text-body-xs: var(--openui-text-body-xs); +$text-body-xs-letter-spacing: var(--openui-text-body-xs-letter-spacing); +$text-body-xs-heavy: var(--openui-text-body-xs-heavy); +$text-body-xs-heavy-letter-spacing: var(--openui-text-body-xs-heavy-letter-spacing); +$text-body-sm: var(--openui-text-body-sm); +$text-body-sm-letter-spacing: var(--openui-text-body-sm-letter-spacing); +$text-body-sm-heavy: var(--openui-text-body-sm-heavy); +$text-body-sm-heavy-letter-spacing: var(--openui-text-body-sm-heavy-letter-spacing); +$text-body-default: var(--openui-text-body-default); +$text-body-default-letter-spacing: var(--openui-text-body-default-letter-spacing); +$text-body-default-heavy: var(--openui-text-body-default-heavy); +$text-body-default-heavy-letter-spacing: var(--openui-text-body-default-heavy-letter-spacing); +$text-body-lg: var(--openui-text-body-lg); +$text-body-lg-letter-spacing: var(--openui-text-body-lg-letter-spacing); +$text-body-lg-heavy: var(--openui-text-body-lg-heavy); +$text-body-lg-heavy-letter-spacing: var(--openui-text-body-lg-heavy-letter-spacing); +$text-heading-xs: var(--openui-text-heading-xs); +$text-heading-xs-letter-spacing: var(--openui-text-heading-xs-letter-spacing); +$text-heading-sm: var(--openui-text-heading-sm); +$text-heading-sm-letter-spacing: var(--openui-text-heading-sm-letter-spacing); +$text-heading-md: var(--openui-text-heading-md); +$text-heading-md-letter-spacing: var(--openui-text-heading-md-letter-spacing); +$text-heading-lg: var(--openui-text-heading-lg); +$text-heading-lg-letter-spacing: var(--openui-text-heading-lg-letter-spacing); +$text-heading-xl: var(--openui-text-heading-xl); +$text-heading-xl-letter-spacing: var(--openui-text-heading-xl-letter-spacing); +$text-label-xs: var(--openui-text-label-xs); +$text-label-xs-letter-spacing: var(--openui-text-label-xs-letter-spacing); +$text-label-xs-heavy: var(--openui-text-label-xs-heavy); +$text-label-xs-heavy-letter-spacing: var(--openui-text-label-xs-heavy-letter-spacing); +$text-label-sm: var(--openui-text-label-sm); +$text-label-sm-letter-spacing: var(--openui-text-label-sm-letter-spacing); +$text-label-sm-heavy: var(--openui-text-label-sm-heavy); +$text-label-sm-heavy-letter-spacing: var(--openui-text-label-sm-heavy-letter-spacing); +$text-label-default: var(--openui-text-label-default); +$text-label-default-letter-spacing: var(--openui-text-label-default-letter-spacing); +$text-label-default-heavy: var(--openui-text-label-default-heavy); +$text-label-default-heavy-letter-spacing: var(--openui-text-label-default-heavy-letter-spacing); +$text-label-lg: var(--openui-text-label-lg); +$text-label-lg-letter-spacing: var(--openui-text-label-lg-letter-spacing); +$text-label-lg-heavy: var(--openui-text-label-lg-heavy); +$text-label-lg-heavy-letter-spacing: var(--openui-text-label-lg-heavy-letter-spacing); +$text-numbers-xs: var(--openui-text-numbers-xs); +$text-numbers-xs-letter-spacing: var(--openui-text-numbers-xs-letter-spacing); +$text-numbers-xs-heavy: var(--openui-text-numbers-xs-heavy); +$text-numbers-xs-heavy-letter-spacing: var(--openui-text-numbers-xs-heavy-letter-spacing); +$text-numbers-sm: var(--openui-text-numbers-sm); +$text-numbers-sm-letter-spacing: var(--openui-text-numbers-sm-letter-spacing); +$text-numbers-sm-heavy: var(--openui-text-numbers-sm-heavy); +$text-numbers-sm-heavy-letter-spacing: var(--openui-text-numbers-sm-heavy-letter-spacing); +$text-numbers-default: var(--openui-text-numbers-default); +$text-numbers-default-letter-spacing: var(--openui-text-numbers-default-letter-spacing); +$text-numbers-default-heavy: var(--openui-text-numbers-default-heavy); +$text-numbers-default-heavy-letter-spacing: var(--openui-text-numbers-default-heavy-letter-spacing); +$text-numbers-lg: var(--openui-text-numbers-lg); +$text-numbers-lg-letter-spacing: var(--openui-text-numbers-lg-letter-spacing); +$text-numbers-lg-heavy: var(--openui-text-numbers-lg-heavy); +$text-numbers-lg-heavy-letter-spacing: var(--openui-text-numbers-lg-heavy-letter-spacing); +$text-code-sm: var(--openui-text-code-sm); +$text-code-sm-letter-spacing: var(--openui-text-code-sm-letter-spacing); +$text-code-sm-heavy: var(--openui-text-code-sm-heavy); +$text-code-sm-heavy-letter-spacing: var(--openui-text-code-sm-heavy-letter-spacing); +$text-code-default: var(--openui-text-code-default); +$text-code-default-letter-spacing: var(--openui-text-code-default-letter-spacing); +$text-code-default-heavy: var(--openui-text-code-default-heavy); +$text-code-default-heavy-letter-spacing: var(--openui-text-code-default-heavy-letter-spacing); // Shadows -$shadow-0: var(--openui-shadow-0, none); -$shadow-s: var(--openui-shadow-s, 0 1px 3px -2px oklch(0 0 0 / 0.02), 0 2px 5px -2px oklch(0 0 0 / 0.04)); -$shadow-m: var(--openui-shadow-m, 0 4px 6px -2px oklch(0 0 0 / 0.025), 0 2px 2px -2px oklch(0 0 0 / 0.05)); -$shadow-l: var(--openui-shadow-l, 0 4px 4px -2px oklch(0 0 0 / 0.05), 0 4px 8px -2px oklch(0 0 0 / 0.04)); -$shadow-xl: var(--openui-shadow-xl, 0 8px 16px -4px oklch(0 0 0 / 0.08), 0 16px 32px -6px oklch(0 0 0 / 0.12)); -$shadow-2xl: var(--openui-shadow-2xl, 0 12px 24px -6px oklch(0 0 0 / 0.12), 0 24px 48px -8px oklch(0 0 0 / 0.16)); -$shadow-3xl: var(--openui-shadow-3xl, 0 16px 32px -8px oklch(0 0 0 / 0.16), 0 32px 64px -12px oklch(0 0 0 / 0.22)); +$shadow-0: var(--openui-shadow-0); +$shadow-s: var(--openui-shadow-s); +$shadow-m: var(--openui-shadow-m); +$shadow-l: var(--openui-shadow-l); +$shadow-xl: var(--openui-shadow-xl); +$shadow-2xl: var(--openui-shadow-2xl); +$shadow-3xl: var(--openui-shadow-3xl); $chat-container-bg: $background; diff --git a/packages/react-ui/src/openui-defaults.scss b/packages/react-ui/src/openui-defaults.scss new file mode 100644 index 000000000..ae05f31a2 --- /dev/null +++ b/packages/react-ui/src/openui-defaults.scss @@ -0,0 +1,472 @@ +// Auto-generated by src/scripts/generate-css-utils.ts — do not edit manually. + +:root { + // Surface / Background Colors + + --openui-background: oklch(0.97 0 89.876 / 1); + --openui-foreground: oklch(0.994 0 89.876 / 1); + --openui-popover-background: oklch(0.994 0 89.876 / 1); + --openui-sunk-light: oklch(0.097 0 0 / 0.02); + --openui-sunk: oklch(0.097 0 0 / 0.04); + --openui-sunk-deep: oklch(0.097 0 0 / 0.08); + --openui-elevated-light: oklch(0.097 0 0 / 0.04); + --openui-elevated: oklch(0.097 0 0 / 0.08); + --openui-elevated-strong: oklch(0.097 0 0 / 0.16); + --openui-elevated-intense: oklch(0.097 0 0 / 0.32); + --openui-overlay: oklch(0 0 0 / 0.4); + --openui-highlight-subtle: oklch(0.097 0 0 / 0.02); + --openui-highlight: oklch(0.097 0 0 / 0.04); + --openui-highlight-strong: oklch(0.097 0 0 / 0.08); + --openui-highlight-intense: oklch(0.097 0 0 / 0.32); + --openui-inverted-background: oklch(0.097 0 0 / 1); + --openui-info-background: oklch(0.623 0.188 259.815 / 0.12); + --openui-success-background: oklch(0.627 0.17 149.214 / 0.12); + --openui-alert-background: oklch(0.795 0.162 86.047 / 0.16); + --openui-danger-background: oklch(0.577 0.215 27.325 / 0.12); + --openui-purple-background: oklch(0.627 0.233 303.9 / 0.12); + --openui-pink-background: oklch(0.592 0.218 0.584 / 0.12); + + // Text Colors + + --openui-text-neutral-primary: oklch(0.097 0 0 / 1); + --openui-text-neutral-secondary: oklch(0.097 0 0 / 0.5); + --openui-text-neutral-tertiary: oklch(0.097 0 0 / 0.2); + --openui-text-neutral-link: oklch(0.097 0 0 / 1); + --openui-text-brand: oklch(0.097 0 0 / 1); + --openui-text-white: oklch(1 0 89.876 / 1); + --openui-text-black: oklch(0 0 0 / 1); + --openui-text-accent-primary: oklch(0.994 0 89.876 / 1); + --openui-text-accent-secondary: oklch(0.994 0 89.876 / 0.5); + --openui-text-accent-tertiary: oklch(0.994 0 89.876 / 0.2); + --openui-text-success-primary: oklch(0.448 0.108 151.328 / 1); + --openui-text-success-inverted: oklch(0.962 0.043 156.743 / 1); + --openui-text-alert-primary: oklch(0.476 0.103 61.907 / 1); + --openui-text-alert-inverted: oklch(0.973 0.069 103.193 / 1); + --openui-text-danger-primary: oklch(0.505 0.19 27.518 / 1); + --openui-text-danger-secondary: oklch(0.711 0.166 22.216 / 1); + --openui-text-danger-tertiary: oklch(0.808 0.103 19.571 / 1); + --openui-text-danger-inverted-primary: oklch(0.982 0.009 17.303 / 1); + --openui-text-danger-inverted-secondary: oklch(0.982 0.009 17.303 / 0.5); + --openui-text-danger-inverted-tertiary: oklch(0.982 0.009 17.303 / 0.3); + --openui-text-info-primary: oklch(0.424 0.181 265.638 / 1); + --openui-text-info-inverted: oklch(0.932 0.032 255.585 / 1); + --openui-text-pink-primary: oklch(0.459 0.17 3.815 / 1); + --openui-text-pink-inverted: oklch(0.948 0.028 342.258 / 1); + --openui-text-purple-primary: oklch(0.438 0.198 303.724 / 1); + --openui-text-purple-inverted: oklch(0.946 0.033 307.174 / 1); + + // Interactive Colors + + --openui-interactive-accent-default: oklch(0.097 0 0 / 1); + --openui-interactive-accent-hover: oklch(0.097 0 0 / 0.8); + --openui-interactive-accent-disabled: oklch(0.097 0 0 / 0.4); + --openui-interactive-accent-pressed: oklch(0.097 0 0 / 1); + --openui-interactive-destructive-default: oklch(0.577 0.215 27.325 / 0.02); + --openui-interactive-destructive-hover: oklch(0.577 0.215 27.325 / 0.08); + --openui-interactive-destructive-disabled: oklch(0.577 0.215 27.325 / 0.02); + --openui-interactive-destructive-pressed: oklch(0.577 0.215 27.325 / 0.1); + --openui-interactive-destructive-accent-default: oklch(0.577 0.215 27.325 / 1); + --openui-interactive-destructive-accent-hover: oklch(0.637 0.208 25.331 / 1); + --openui-interactive-destructive-accent-pressed: oklch(0.505 0.19 27.518 / 1); + --openui-interactive-destructive-accent-disabled: oklch(0.577 0.215 27.325 / 0.4); + + // Chat Colors + + --openui-chat-user-response-bg: oklch(0.097 0 0 / 1); + --openui-chat-user-response-text: oklch(0.994 0 89.876 / 1); + + // Border Colors + + --openui-border-default: oklch(0.097 0 0 / 0.06); + --openui-border-interactive: oklch(0.097 0 0 / 0.12); + --openui-border-interactive-emphasis: oklch(0.097 0 0 / 0.3); + --openui-border-interactive-selected: oklch(0.097 0 0 / 1); + --openui-border-accent: oklch(0.097 0 0 / 0.08); + --openui-border-accent-emphasis: oklch(0.097 0 0 / 0.3); + --openui-border-info: oklch(0.623 0.188 259.815 / 0.08); + --openui-border-info-emphasis: oklch(0.546 0.215 262.881 / 1); + --openui-border-alert: oklch(0.861 0.173 91.936 / 0.08); + --openui-border-alert-emphasis: oklch(0.681 0.142 75.834 / 1); + --openui-border-success: oklch(0.627 0.17 149.214 / 0.08); + --openui-border-success-emphasis: oklch(0.627 0.17 149.214 / 1); + --openui-border-danger: oklch(0.577 0.215 27.325 / 0.08); + --openui-border-danger-emphasis: oklch(0.577 0.215 27.325 / 1); + + // Spacing + + --openui-space-000: 0; + --openui-space-3xs: 2px; + --openui-space-2xs: 4px; + --openui-space-xs: 6px; + --openui-space-s: 8px; + --openui-space-s-m: 10px; + --openui-space-m: 12px; + --openui-space-m-l: 16px; + --openui-space-l: 18px; + --openui-space-xl: 24px; + --openui-space-2xl: 36px; + --openui-space-3xl: 48px; + + // Border Radius + + --openui-radius-none: 0; + --openui-radius-3xs: 1px; + --openui-radius-2xs: 2px; + --openui-radius-xs: 4px; + --openui-radius-s: 6px; + --openui-radius-m: 8px; + --openui-radius-l: 10px; + --openui-radius-xl: 12px; + --openui-radius-2xl: 14px; + --openui-radius-3xl: 16px; + --openui-radius-4xl: 20px; + --openui-radius-5xl: 24px; + --openui-radius-6xl: 28px; + --openui-radius-7xl: 32px; + --openui-radius-8xl: 40px; + --openui-radius-9xl: 48px; + --openui-radius-full: 9999px; + + // Typography Tokens + + --openui-font-body: "Inter", sans-serif; + --openui-font-code: "SFMono-Regular", Menlo, monospace; + --openui-font-heading: "Inter", sans-serif; + --openui-font-label: "Inter", sans-serif; + --openui-font-numbers: "Inter", sans-serif; + --openui-font-size-2xs: 10px; + --openui-font-size-xs: 12px; + --openui-font-size-sm: 14px; + --openui-font-size-md: 16px; + --openui-font-size-lg: 18px; + --openui-font-size-xl: 20px; + --openui-font-size-2xl: 24px; + --openui-font-size-3xl: 28px; + --openui-font-size-4xl: 32px; + --openui-font-size-5xl: 36px; + --openui-font-weight-regular: 400; + --openui-font-weight-medium: 500; + --openui-font-weight-bold: 600; + --openui-font-weight-heavy: 700; + --openui-line-height-body: 1.5; + --openui-line-height-heading: 1.25; + --openui-line-height-heading-large: 1.1; + --openui-line-height-label: 1.25; + --openui-line-height-code: 1.5; + --openui-letter-spacing-normal: 0; + --openui-letter-spacing-tight: -0.1px; + --openui-letter-spacing-tighter: -0.2px; + --openui-text-body-xs: 400 12px/1.5 "Inter", sans-serif; + --openui-text-body-xs-letter-spacing: 0; + --openui-text-body-xs-heavy: 500 12px/1.5 "Inter", sans-serif; + --openui-text-body-xs-heavy-letter-spacing: 0; + --openui-text-body-sm: 400 14px/1.5 "Inter", sans-serif; + --openui-text-body-sm-letter-spacing: 0; + --openui-text-body-sm-heavy: 500 14px/1.5 "Inter", sans-serif; + --openui-text-body-sm-heavy-letter-spacing: 0; + --openui-text-body-default: 400 16px/1.5 "Inter", sans-serif; + --openui-text-body-default-letter-spacing: 0; + --openui-text-body-default-heavy: 500 16px/1.5 "Inter", sans-serif; + --openui-text-body-default-heavy-letter-spacing: 0; + --openui-text-body-lg: 400 18px/1.5 "Inter", sans-serif; + --openui-text-body-lg-letter-spacing: 0; + --openui-text-body-lg-heavy: 500 18px/1.5 "Inter", sans-serif; + --openui-text-body-lg-heavy-letter-spacing: 0; + --openui-text-heading-xs: 600 16px/1.25 "Inter", sans-serif; + --openui-text-heading-xs-letter-spacing: 0; + --openui-text-heading-sm: 600 18px/1.25 "Inter", sans-serif; + --openui-text-heading-sm-letter-spacing: 0; + --openui-text-heading-md: 600 24px/1.1 "Inter", sans-serif; + --openui-text-heading-md-letter-spacing: 0; + --openui-text-heading-lg: 600 28px/1.1 "Inter", sans-serif; + --openui-text-heading-lg-letter-spacing: -0.1px; + --openui-text-heading-xl: 700 32px/1.1 "Inter", sans-serif; + --openui-text-heading-xl-letter-spacing: -0.1px; + --openui-text-label-xs: 400 12px/1.25 "Inter", sans-serif; + --openui-text-label-xs-letter-spacing: 0; + --openui-text-label-xs-heavy: 500 12px/1.25 "Inter", sans-serif; + --openui-text-label-xs-heavy-letter-spacing: 0; + --openui-text-label-sm: 400 14px/1.25 "Inter", sans-serif; + --openui-text-label-sm-letter-spacing: 0; + --openui-text-label-sm-heavy: 500 14px/1.25 "Inter", sans-serif; + --openui-text-label-sm-heavy-letter-spacing: 0; + --openui-text-label-default: 400 16px/1.25 "Inter", sans-serif; + --openui-text-label-default-letter-spacing: 0; + --openui-text-label-default-heavy: 500 16px/1.25 "Inter", sans-serif; + --openui-text-label-default-heavy-letter-spacing: 0; + --openui-text-label-lg: 400 18px/1.25 "Inter", sans-serif; + --openui-text-label-lg-letter-spacing: 0; + --openui-text-label-lg-heavy: 500 18px/1.25 "Inter", sans-serif; + --openui-text-label-lg-heavy-letter-spacing: 0; + --openui-text-numbers-xs: 400 12px/1.5 "Inter", sans-serif; + --openui-text-numbers-xs-letter-spacing: 0; + --openui-text-numbers-xs-heavy: 500 12px/1.5 "Inter", sans-serif; + --openui-text-numbers-xs-heavy-letter-spacing: 0; + --openui-text-numbers-sm: 400 14px/1.5 "Inter", sans-serif; + --openui-text-numbers-sm-letter-spacing: 0; + --openui-text-numbers-sm-heavy: 500 14px/1.5 "Inter", sans-serif; + --openui-text-numbers-sm-heavy-letter-spacing: 0; + --openui-text-numbers-default: 400 16px/1.5 "Inter", sans-serif; + --openui-text-numbers-default-letter-spacing: 0; + --openui-text-numbers-default-heavy: 500 16px/1.5 "Inter", sans-serif; + --openui-text-numbers-default-heavy-letter-spacing: 0; + --openui-text-numbers-lg: 400 18px/1.5 "Inter", sans-serif; + --openui-text-numbers-lg-letter-spacing: 0; + --openui-text-numbers-lg-heavy: 500 18px/1.5 "Inter", sans-serif; + --openui-text-numbers-lg-heavy-letter-spacing: 0; + --openui-text-code-sm: 400 12px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-sm-letter-spacing: 0; + --openui-text-code-sm-heavy: 700 12px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-sm-heavy-letter-spacing: 0; + --openui-text-code-default: 400 14px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-default-letter-spacing: 0; + --openui-text-code-default-heavy: 700 14px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-default-heavy-letter-spacing: 0; + + // Shadows + + --openui-shadow-0: none; + --openui-shadow-s: 0 1px 3px -2px oklch(0 0 0 / 0.02), 0 2px 5px -2px oklch(0 0 0 / 0.04); + --openui-shadow-m: 0 4px 6px -2px oklch(0 0 0 / 0.025), 0 2px 2px -2px oklch(0 0 0 / 0.05); + --openui-shadow-l: 0 4px 4px -2px oklch(0 0 0 / 0.05), 0 4px 8px -2px oklch(0 0 0 / 0.04); + --openui-shadow-xl: 0 8px 16px -4px oklch(0 0 0 / 0.08), 0 16px 32px -6px oklch(0 0 0 / 0.12); + --openui-shadow-2xl: 0 12px 24px -6px oklch(0 0 0 / 0.12), 0 24px 48px -8px oklch(0 0 0 / 0.16); + --openui-shadow-3xl: 0 16px 32px -8px oklch(0 0 0 / 0.16), 0 32px 64px -12px oklch(0 0 0 / 0.22); +} + +@media (prefers-color-scheme: dark) { + :root { + + // Surface / Background Colors + + --openui-background: oklch(0.145 0 0 / 1); + --openui-foreground: oklch(0.205 0 0 / 1); + --openui-popover-background: oklch(0.205 0 0 / 1); + --openui-sunk-light: oklch(0.994 0 89.876 / 0.02); + --openui-sunk: oklch(0.994 0 89.876 / 0.04); + --openui-sunk-deep: oklch(0.994 0 89.876 / 0.08); + --openui-elevated-light: oklch(0.994 0 89.876 / 0.04); + --openui-elevated: oklch(0.994 0 89.876 / 0.08); + --openui-elevated-strong: oklch(0.994 0 89.876 / 0.16); + --openui-elevated-intense: oklch(0.994 0 89.876 / 0.32); + --openui-overlay: oklch(0 0 0 / 0.6); + --openui-highlight-subtle: oklch(0.994 0 89.876 / 0.02); + --openui-highlight: oklch(0.994 0 89.876 / 0.04); + --openui-highlight-strong: oklch(0.994 0 89.876 / 0.08); + --openui-highlight-intense: oklch(0.994 0 89.876 / 0.3); + --openui-inverted-background: oklch(0.994 0 89.876 / 1); + --openui-info-background: oklch(0.623 0.188 259.815 / 0.12); + --openui-success-background: oklch(0.627 0.17 149.214 / 0.12); + --openui-alert-background: oklch(0.795 0.162 86.047 / 0.16); + --openui-danger-background: oklch(0.577 0.215 27.325 / 0.12); + --openui-purple-background: oklch(0.627 0.233 303.9 / 0.12); + --openui-pink-background: oklch(0.592 0.218 0.584 / 0.12); + + // Text Colors + + --openui-text-neutral-primary: oklch(0.985 0 89.876 / 1); + --openui-text-neutral-secondary: oklch(0.985 0 89.876 / 0.5); + --openui-text-neutral-tertiary: oklch(0.985 0 89.876 / 0.2); + --openui-text-neutral-link: oklch(0.985 0 89.876 / 1); + --openui-text-brand: oklch(0.994 0 89.876 / 1); + --openui-text-white: oklch(1 0 89.876 / 1); + --openui-text-black: oklch(0 0 0 / 1); + --openui-text-accent-primary: oklch(0.097 0 0 / 1); + --openui-text-accent-secondary: oklch(0.097 0 0 / 0.5); + --openui-text-accent-tertiary: oklch(0.097 0 0 / 0.2); + --openui-text-success-primary: oklch(0.871 0.136 154.449 / 1); + --openui-text-success-inverted: oklch(0.962 0.043 156.743 / 1); + --openui-text-alert-primary: oklch(0.905 0.166 98.111 / 1); + --openui-text-alert-inverted: oklch(0.973 0.069 103.193 / 1); + --openui-text-danger-primary: oklch(0.808 0.103 19.571 / 1); + --openui-text-danger-secondary: oklch(0.885 0.059 18.334 / 1); + --openui-text-danger-tertiary: oklch(0.936 0.031 17.717 / 1); + --openui-text-danger-inverted-primary: oklch(0.982 0.009 17.303 / 1); + --openui-text-danger-inverted-secondary: oklch(0.982 0.009 17.303 / 0.5); + --openui-text-danger-inverted-tertiary: oklch(0.982 0.009 17.303 / 0.3); + --openui-text-info-primary: oklch(0.809 0.096 251.813 / 1); + --openui-text-info-inverted: oklch(0.932 0.032 255.585 / 1); + --openui-text-pink-primary: oklch(0.823 0.11 346.018 / 1); + --openui-text-pink-inverted: oklch(0.948 0.028 342.258 / 1); + --openui-text-purple-primary: oklch(0.827 0.108 306.383 / 1); + --openui-text-purple-inverted: oklch(0.946 0.033 307.174 / 1); + + // Interactive Colors + + --openui-interactive-accent-default: oklch(0.994 0 89.876 / 1); + --openui-interactive-accent-hover: oklch(0.994 0 89.876 / 0.8); + --openui-interactive-accent-disabled: oklch(0.994 0 89.876 / 0.4); + --openui-interactive-accent-pressed: oklch(0.994 0 89.876 / 1); + --openui-interactive-destructive-default: oklch(0.577 0.215 27.325 / 0.02); + --openui-interactive-destructive-hover: oklch(0.577 0.215 27.325 / 0.08); + --openui-interactive-destructive-disabled: oklch(0.577 0.215 27.325 / 0.02); + --openui-interactive-destructive-pressed: oklch(0.577 0.215 27.325 / 0.1); + --openui-interactive-destructive-accent-default: oklch(0.577 0.215 27.325 / 1); + --openui-interactive-destructive-accent-hover: oklch(0.637 0.208 25.331 / 1); + --openui-interactive-destructive-accent-pressed: oklch(0.505 0.19 27.518 / 1); + --openui-interactive-destructive-accent-disabled: oklch(0.577 0.215 27.325 / 0.4); + + // Chat Colors + + --openui-chat-user-response-bg: oklch(0.994 0 89.876 / 1); + --openui-chat-user-response-text: oklch(0.097 0 0 / 1); + + // Border Colors + + --openui-border-default: oklch(0.994 0 89.876 / 0.12); + --openui-border-interactive: oklch(0.994 0 89.876 / 0.2); + --openui-border-interactive-emphasis: oklch(0.994 0 89.876 / 0.4); + --openui-border-interactive-selected: oklch(0.985 0 89.876 / 1); + --openui-border-accent: oklch(0.994 0 89.876 / 0.2); + --openui-border-accent-emphasis: oklch(0.994 0 89.876 / 0.4); + --openui-border-info: oklch(0.623 0.188 259.815 / 0.08); + --openui-border-info-emphasis: oklch(0.546 0.215 262.881 / 1); + --openui-border-alert: oklch(0.861 0.173 91.936 / 0.08); + --openui-border-alert-emphasis: oklch(0.681 0.142 75.834 / 1); + --openui-border-success: oklch(0.627 0.17 149.214 / 0.08); + --openui-border-success-emphasis: oklch(0.627 0.17 149.214 / 1); + --openui-border-danger: oklch(0.577 0.215 27.325 / 0.08); + --openui-border-danger-emphasis: oklch(0.577 0.215 27.325 / 1); + + // Spacing + + --openui-space-000: 0; + --openui-space-3xs: 2px; + --openui-space-2xs: 4px; + --openui-space-xs: 6px; + --openui-space-s: 8px; + --openui-space-s-m: 10px; + --openui-space-m: 12px; + --openui-space-m-l: 16px; + --openui-space-l: 18px; + --openui-space-xl: 24px; + --openui-space-2xl: 36px; + --openui-space-3xl: 48px; + + // Border Radius + + --openui-radius-none: 0; + --openui-radius-3xs: 1px; + --openui-radius-2xs: 2px; + --openui-radius-xs: 4px; + --openui-radius-s: 6px; + --openui-radius-m: 8px; + --openui-radius-l: 10px; + --openui-radius-xl: 12px; + --openui-radius-2xl: 14px; + --openui-radius-3xl: 16px; + --openui-radius-4xl: 20px; + --openui-radius-5xl: 24px; + --openui-radius-6xl: 28px; + --openui-radius-7xl: 32px; + --openui-radius-8xl: 40px; + --openui-radius-9xl: 48px; + --openui-radius-full: 9999px; + + // Typography Tokens + + --openui-font-body: "Inter", sans-serif; + --openui-font-code: "SFMono-Regular", Menlo, monospace; + --openui-font-heading: "Inter", sans-serif; + --openui-font-label: "Inter", sans-serif; + --openui-font-numbers: "Inter", sans-serif; + --openui-font-size-2xs: 10px; + --openui-font-size-xs: 12px; + --openui-font-size-sm: 14px; + --openui-font-size-md: 16px; + --openui-font-size-lg: 18px; + --openui-font-size-xl: 20px; + --openui-font-size-2xl: 24px; + --openui-font-size-3xl: 28px; + --openui-font-size-4xl: 32px; + --openui-font-size-5xl: 36px; + --openui-font-weight-regular: 400; + --openui-font-weight-medium: 500; + --openui-font-weight-bold: 600; + --openui-font-weight-heavy: 700; + --openui-line-height-body: 1.5; + --openui-line-height-heading: 1.25; + --openui-line-height-heading-large: 1.1; + --openui-line-height-label: 1.25; + --openui-line-height-code: 1.5; + --openui-letter-spacing-normal: 0; + --openui-letter-spacing-tight: -0.1px; + --openui-letter-spacing-tighter: -0.2px; + --openui-text-body-xs: 400 12px/1.5 "Inter", sans-serif; + --openui-text-body-xs-letter-spacing: 0; + --openui-text-body-xs-heavy: 500 12px/1.5 "Inter", sans-serif; + --openui-text-body-xs-heavy-letter-spacing: 0; + --openui-text-body-sm: 400 14px/1.5 "Inter", sans-serif; + --openui-text-body-sm-letter-spacing: 0; + --openui-text-body-sm-heavy: 500 14px/1.5 "Inter", sans-serif; + --openui-text-body-sm-heavy-letter-spacing: 0; + --openui-text-body-default: 400 16px/1.5 "Inter", sans-serif; + --openui-text-body-default-letter-spacing: 0; + --openui-text-body-default-heavy: 500 16px/1.5 "Inter", sans-serif; + --openui-text-body-default-heavy-letter-spacing: 0; + --openui-text-body-lg: 400 18px/1.5 "Inter", sans-serif; + --openui-text-body-lg-letter-spacing: 0; + --openui-text-body-lg-heavy: 500 18px/1.5 "Inter", sans-serif; + --openui-text-body-lg-heavy-letter-spacing: 0; + --openui-text-heading-xs: 600 16px/1.25 "Inter", sans-serif; + --openui-text-heading-xs-letter-spacing: 0; + --openui-text-heading-sm: 600 18px/1.25 "Inter", sans-serif; + --openui-text-heading-sm-letter-spacing: 0; + --openui-text-heading-md: 600 24px/1.1 "Inter", sans-serif; + --openui-text-heading-md-letter-spacing: 0; + --openui-text-heading-lg: 600 28px/1.1 "Inter", sans-serif; + --openui-text-heading-lg-letter-spacing: -0.1px; + --openui-text-heading-xl: 700 32px/1.1 "Inter", sans-serif; + --openui-text-heading-xl-letter-spacing: -0.1px; + --openui-text-label-xs: 400 12px/1.25 "Inter", sans-serif; + --openui-text-label-xs-letter-spacing: 0; + --openui-text-label-xs-heavy: 500 12px/1.25 "Inter", sans-serif; + --openui-text-label-xs-heavy-letter-spacing: 0; + --openui-text-label-sm: 400 14px/1.25 "Inter", sans-serif; + --openui-text-label-sm-letter-spacing: 0; + --openui-text-label-sm-heavy: 500 14px/1.25 "Inter", sans-serif; + --openui-text-label-sm-heavy-letter-spacing: 0; + --openui-text-label-default: 400 16px/1.25 "Inter", sans-serif; + --openui-text-label-default-letter-spacing: 0; + --openui-text-label-default-heavy: 500 16px/1.25 "Inter", sans-serif; + --openui-text-label-default-heavy-letter-spacing: 0; + --openui-text-label-lg: 400 18px/1.25 "Inter", sans-serif; + --openui-text-label-lg-letter-spacing: 0; + --openui-text-label-lg-heavy: 500 18px/1.25 "Inter", sans-serif; + --openui-text-label-lg-heavy-letter-spacing: 0; + --openui-text-numbers-xs: 400 12px/1.5 "Inter", sans-serif; + --openui-text-numbers-xs-letter-spacing: 0; + --openui-text-numbers-xs-heavy: 500 12px/1.5 "Inter", sans-serif; + --openui-text-numbers-xs-heavy-letter-spacing: 0; + --openui-text-numbers-sm: 400 14px/1.5 "Inter", sans-serif; + --openui-text-numbers-sm-letter-spacing: 0; + --openui-text-numbers-sm-heavy: 500 14px/1.5 "Inter", sans-serif; + --openui-text-numbers-sm-heavy-letter-spacing: 0; + --openui-text-numbers-default: 400 16px/1.5 "Inter", sans-serif; + --openui-text-numbers-default-letter-spacing: 0; + --openui-text-numbers-default-heavy: 500 16px/1.5 "Inter", sans-serif; + --openui-text-numbers-default-heavy-letter-spacing: 0; + --openui-text-numbers-lg: 400 18px/1.5 "Inter", sans-serif; + --openui-text-numbers-lg-letter-spacing: 0; + --openui-text-numbers-lg-heavy: 500 18px/1.5 "Inter", sans-serif; + --openui-text-numbers-lg-heavy-letter-spacing: 0; + --openui-text-code-sm: 400 12px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-sm-letter-spacing: 0; + --openui-text-code-sm-heavy: 700 12px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-sm-heavy-letter-spacing: 0; + --openui-text-code-default: 400 14px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-default-letter-spacing: 0; + --openui-text-code-default-heavy: 700 14px/1.5 "SFMono-Regular", Menlo, monospace; + --openui-text-code-default-heavy-letter-spacing: 0; + + // Shadows + + --openui-shadow-0: none; + --openui-shadow-s: 0 1px 3px -2px oklch(0 0 0 / 0.06), 0 2px 5px -2px oklch(0 0 0 / 0.10); + --openui-shadow-m: 0 4px 6px -2px oklch(0 0 0 / 0.08), 0 2px 2px -2px oklch(0 0 0 / 0.12); + --openui-shadow-l: 0 4px 4px -2px oklch(0 0 0 / 0.12), 0 4px 8px -2px oklch(0 0 0 / 0.10); + --openui-shadow-xl: 0 8px 16px -4px oklch(0 0 0 / 0.16), 0 16px 32px -6px oklch(0 0 0 / 0.20); + --openui-shadow-2xl: 0 12px 24px -6px oklch(0 0 0 / 0.20), 0 24px 48px -8px oklch(0 0 0 / 0.24); + --openui-shadow-3xl: 0 16px 32px -8px oklch(0 0 0 / 0.24), 0 32px 64px -12px oklch(0 0 0 / 0.28); + } +} diff --git a/packages/react-ui/src/scripts/generate-css-utils.ts b/packages/react-ui/src/scripts/generate-css-utils.ts index 4a47bc4d9..efb4d193e 100644 --- a/packages/react-ui/src/scripts/generate-css-utils.ts +++ b/packages/react-ui/src/scripts/generate-css-utils.ts @@ -1,7 +1,7 @@ import * as fs from "node:fs"; import * as path from "node:path"; import { fileURLToPath } from "node:url"; -import { defaultLightTheme } from "../components/ThemeProvider/defaultTheme.js"; +import { defaultDarkTheme, defaultLightTheme } from "../components/ThemeProvider/defaultTheme.js"; import { camelToKebab } from "../components/ThemeProvider/utils.js"; const __filename = fileURLToPath(import.meta.url); @@ -29,14 +29,14 @@ const entries = Object.entries(defaultLightTheme).filter( ([, value]) => typeof value === "string", ) as [string, string][]; -for (const [key, value] of entries) { +for (const [key] of entries) { if (sectionHeaders[key]) { if (lines.length > 3) lines.push(""); lines.push(sectionHeaders[key]); lines.push(""); } const kebab = camelToKebab(key); - lines.push(`$${kebab}: var(--openui-${kebab}, ${value});`); + lines.push(`$${kebab}: var(--openui-${kebab});`); } // $chat-container-bg is an SCSS-level alias, not a CSS variable @@ -116,3 +116,50 @@ lines.push(""); const outputPath = path.resolve(__dirname, "../cssUtils.scss"); fs.writeFileSync(outputPath, lines.join("\n")); console.info(`Generated cssUtils.scss at ${outputPath}`); + +// ─── Generate openui-defaults.scss with :root custom property defaults ─────── +const defaultsLines: string[] = []; +defaultsLines.push( + "// Auto-generated by src/scripts/generate-css-utils.ts — do not edit manually.", +); +defaultsLines.push(""); +defaultsLines.push(":root {"); + +for (const [key, value] of entries) { + if (sectionHeaders[key]) { + if (defaultsLines.length > 3) defaultsLines.push(""); + defaultsLines.push(` ${sectionHeaders[key]}`); + defaultsLines.push(""); + } + const kebab = camelToKebab(key); + defaultsLines.push(` --openui-${kebab}: ${value};`); +} + +defaultsLines.push("}"); +defaultsLines.push(""); + +// ─── Dark mode defaults via prefers-color-scheme ───────────────────────────── +const darkEntries = Object.entries(defaultDarkTheme).filter( + ([, value]) => typeof value === "string", +) as [string, string][]; + +defaultsLines.push("@media (prefers-color-scheme: dark) {"); +defaultsLines.push(" :root {"); + +for (const [key, value] of darkEntries) { + if (sectionHeaders[key]) { + defaultsLines.push(""); + defaultsLines.push(` ${sectionHeaders[key]}`); + defaultsLines.push(""); + } + const kebab = camelToKebab(key); + defaultsLines.push(` --openui-${kebab}: ${value};`); +} + +defaultsLines.push(" }"); +defaultsLines.push("}"); +defaultsLines.push(""); + +const defaultsOutputPath = path.resolve(__dirname, "../openui-defaults.scss"); +fs.writeFileSync(defaultsOutputPath, defaultsLines.join("\n")); +console.info(`Generated openui-defaults.scss at ${defaultsOutputPath}`); diff --git a/packages/react-ui/src/scripts/scss-import.js b/packages/react-ui/src/scripts/scss-import.js index 6b843a088..55a58b164 100644 --- a/packages/react-ui/src/scripts/scss-import.js +++ b/packages/react-ui/src/scripts/scss-import.js @@ -9,7 +9,7 @@ const dirname = path.dirname(new URL(import.meta.url).pathname); function generateScssIndex() { // Go up one directory to reach src, then into components const srcDir = path.join(dirname, "..", "components"); - let indexScssContent = ""; + let indexScssContent = '@use "../openui-defaults.scss";\n\n'; // Read all component directories // this produces an array of all the component directories