@onlive.ai/common-121 0.2.187 → 0.2.190

package/themes/dark.css

@@ -0,0 +1,413 @@
+:root,
+:host,
+.ol-theme-dark {
+  -webkit-color-scheme: dark;
+  -moz-color-scheme: dark;
+  color-scheme: dark;
+  color: var(--ol-color-neutral-900);
+  background-color: var(--ol-color-neutral-0);
+
+  /*
+   * Color Primitives
+   */
+
+  /* Gray */
+  --ol-color-gray-50: rgb(34, 36, 40);
+  --ol-color-gray-100: rgb(41, 44, 49);
+  --ol-color-gray-200: rgb(51, 54, 58);
+  --ol-color-gray-300: rgb(64, 68, 73);
+  --ol-color-gray-400: rgb(82, 87, 93);
+  --ol-color-gray-500: rgb(103, 109, 116);
+  --ol-color-gray-600: rgb(136, 143, 151);
+  --ol-color-gray-700: rgb(172, 180, 190);
+  --ol-color-gray-800: rgb(207, 214, 222);
+  --ol-color-gray-900: rgb(227, 232, 238);
+  --ol-color-gray-950: rgb(242, 242, 242);
+
+  /* Red */
+  --ol-color-red-50: rgb(102, 27, 27);
+  --ol-color-red-100: rgb(145, 37, 37);
+  --ol-color-red-200: rgb(162, 39, 39);
+  --ol-color-red-300: rgb(193, 48, 48);
+  --ol-color-red-400: rgb(229, 69, 69);
+  --ol-color-red-500: rgb(252, 92, 92);
+  --ol-color-red-600: rgb(254, 126, 126);
+  --ol-color-red-700: rgb(255, 147, 147);
+  --ol-color-red-800: rgb(255, 199, 199);
+  --ol-color-red-900: rgb(255, 217, 217);
+  --ol-color-red-950: rgb(255, 240, 240);
+
+  /* Orange */
+  --ol-color-orange-50: rgb(101, 49, 27);
+  --ol-color-orange-100: rgb(134, 66, 36);
+  --ol-color-orange-200: rgb(155, 76, 42);
+  --ol-color-orange-300: rgb(198, 98, 52);
+  --ol-color-orange-400: rgb(245, 125, 63);
+  --ol-color-orange-500: rgb(255, 149, 0);
+  --ol-color-orange-600: rgb(255, 166, 43);
+  --ol-color-orange-700: rgb(255, 192, 99);
+  --ol-color-orange-800: rgb(255, 216, 155);
+  --ol-color-orange-900: rgb(255, 235, 201);
+  --ol-color-orange-950: rgb(255, 249, 237);
+
+  /* Amber */
+  --ol-color-amber-50: rgb(92, 69, 36);
+  --ol-color-amber-100: rgb(129, 96, 50);
+  --ol-color-amber-200: rgb(147, 109, 56);
+  --ol-color-amber-300: rgb(184, 135, 69);
+  --ol-color-amber-400: rgb(227, 166, 84);
+  --ol-color-amber-500: rgb(254, 191, 25);
+  --ol-color-amber-600: rgb(255, 202, 41);
+  --ol-color-amber-700: rgb(255, 218, 85);
+  --ol-color-amber-800: rgb(255, 235, 145);
+  --ol-color-amber-900: rgb(255, 247, 191);
+  --ol-color-amber-950: rgb(255, 253, 235);
+
+  /* Yellow */
+  --ol-color-yellow-50: rgb(80, 69, 28);
+  --ol-color-yellow-100: rgb(127, 108, 44);
+  --ol-color-yellow-200: rgb(142, 122, 49);
+  --ol-color-yellow-300: rgb(174, 151, 60);
+  --ol-color-yellow-400: rgb(217, 189, 78);
+  --ol-color-yellow-500: rgb(234, 199, 65);
+  --ol-color-yellow-600: rgb(255, 223, 0);
+  --ol-color-yellow-700: rgb(255, 235, 59);
+  --ol-color-yellow-800: rgb(255, 245, 145);
+  --ol-color-yellow-900: rgb(255, 251, 194);
+  --ol-color-yellow-950: rgb(255, 254, 235);
+
+  /* Green */
+  --ol-color-green-50: rgb(26, 69, 43);
+  --ol-color-green-100: rgb(38, 101, 62);
+  --ol-color-green-200: rgb(43, 115, 70);
+  --ol-color-green-300: rgb(52, 140, 86);
+  --ol-color-green-400: rgb(64, 174, 107);
+  --ol-color-green-500: rgb(72, 187, 120);
+  --ol-color-green-600: rgb(104, 211, 145);
+  --ol-color-green-700: rgb(152, 233, 186);
+  --ol-color-green-800: rgb(190, 245, 215);
+  --ol-color-green-900: rgb(220, 252, 231);
+  --ol-color-green-950: rgb(240, 253, 244);
+
+  /* Blue */
+  --ol-color-blue-50: rgb(36, 52, 102);
+  --ol-color-blue-100: rgb(61, 84, 165);
+  --ol-color-blue-200: rgb(72, 100, 192);
+  --ol-color-blue-300: rgb(88, 125, 227);
+  --ol-color-blue-400: rgb(96, 150, 251);
+  --ol-color-blue-500: rgb(99, 163, 253);
+  --ol-color-blue-600: rgb(129, 183, 255);
+  --ol-color-blue-700: rgb(171, 208, 255);
+  --ol-color-blue-800: rgb(202, 226, 255);
+  --ol-color-blue-900: rgb(219, 234, 255);
+  --ol-color-blue-950: rgb(239, 246, 255);
+
+  /*
+   * Theme Tokens
+   */
+
+  /* Primary */
+  --ol-color-primary-50: rgb(82 9 9);
+  --ol-color-primary-100: rgb(129 15 15);
+  --ol-color-primary-200: rgb(178 20 20);
+  --ol-color-primary-300: rgb(214 24 24);
+  --ol-color-primary-400: rgb(248 55 55);
+  --ol-color-primary-500: rgb(250 119 119);
+  --ol-color-primary-600: rgb(252 162 162);
+  --ol-color-primary-700: rgb(253 191 191);
+  --ol-color-primary-800: rgb(253 212 212);
+  --ol-color-primary-900: rgb(254 231 231);
+  --ol-color-primary-950: rgb(255 248 248);
+
+  /* Success */
+  --ol-color-success-50: var(--ol-color-green-50);
+  --ol-color-success-100: var(--ol-color-green-100);
+  --ol-color-success-200: var(--ol-color-green-200);
+  --ol-color-success-300: var(--ol-color-green-300);
+  --ol-color-success-400: var(--ol-color-green-400);
+  --ol-color-success-500: var(--ol-color-green-500);
+  --ol-color-success-600: var(--ol-color-green-600);
+  --ol-color-success-700: var(--ol-color-green-700);
+  --ol-color-success-800: var(--ol-color-green-800);
+  --ol-color-success-900: var(--ol-color-green-900);
+  --ol-color-success-950: var(--ol-color-green-950);
+
+  /* Warning */
+  --ol-color-warning-50: var(--ol-color-amber-50);
+  --ol-color-warning-100: var(--ol-color-amber-100);
+  --ol-color-warning-200: var(--ol-color-amber-200);
+  --ol-color-warning-300: var(--ol-color-amber-300);
+  --ol-color-warning-400: var(--ol-color-amber-400);
+  --ol-color-warning-500: var(--ol-color-amber-500);
+  --ol-color-warning-600: var(--ol-color-amber-600);
+  --ol-color-warning-700: var(--ol-color-amber-700);
+  --ol-color-warning-800: var(--ol-color-amber-800);
+  --ol-color-warning-900: var(--ol-color-amber-900);
+  --ol-color-warning-950: var(--ol-color-amber-950);
+
+  /* Danger */
+  --ol-color-danger-50: var(--ol-color-red-50);
+  --ol-color-danger-100: var(--ol-color-red-100);
+  --ol-color-danger-200: var(--ol-color-red-200);
+  --ol-color-danger-300: var(--ol-color-red-300);
+  --ol-color-danger-400: var(--ol-color-red-400);
+  --ol-color-danger-500: var(--ol-color-red-500);
+  --ol-color-danger-600: var(--ol-color-red-600);
+  --ol-color-danger-700: var(--ol-color-red-700);
+  --ol-color-danger-800: var(--ol-color-red-800);
+  --ol-color-danger-900: var(--ol-color-red-900);
+  --ol-color-danger-950: var(--ol-color-red-950);
+
+  /* Neutral */
+  --ol-color-neutral-50: var(--ol-color-gray-50);
+  --ol-color-neutral-100: var(--ol-color-gray-100);
+  --ol-color-neutral-200: var(--ol-color-gray-200);
+  --ol-color-neutral-300: var(--ol-color-gray-300);
+  --ol-color-neutral-400: var(--ol-color-gray-400);
+  --ol-color-neutral-500: var(--ol-color-gray-500);
+  --ol-color-neutral-600: var(--ol-color-gray-600);
+  --ol-color-neutral-700: var(--ol-color-gray-700);
+  --ol-color-neutral-800: var(--ol-color-gray-800);
+  --ol-color-neutral-900: var(--ol-color-gray-900);
+  --ol-color-neutral-950: var(--ol-color-gray-950);
+
+  /* Neutral one-offs */
+  --ol-color-neutral-0: rgb(26, 27, 30);
+  --ol-color-neutral-1000: rgb(255, 255, 255);
+
+  /*
+   * Border radii
+   */
+
+  --ol-border-radius-small: 3px; /* 0.1875rem */
+  --ol-border-radius-medium: 4px; /* 0.25rem */
+  --ol-border-radius-large: 8px; /* var(--ol-spacing-x-small) */
+  --ol-border-radius-x-large: 16px; /* 1rem */
+
+  --ol-border-radius-circle: 50%;
+  --ol-border-radius-pill: 9999px;
+
+  /*
+   * Elevations
+   */
+
+  --ol-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
+  --ol-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
+  --ol-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
+  --ol-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);
+  --ol-shadow-x-large: 0 4px 16px rgb(0 0 0 / 24%);
+
+  /*
+   * Spacings
+   */
+
+  --ol-spacing-3x-small: 2px; /* 0.125rem */
+  --ol-spacing-2x-small: 4px; /* 0.25rem */
+  --ol-spacing-x-small: 8px; /* var(--ol-spacing-x-small) */
+  --ol-spacing-small: 12px; /* 0.75rem */
+  --ol-spacing-medium: 16px; /* 1rem */
+  --ol-spacing-large: 20px; /* 1.25rem */
+  --ol-spacing-x-large: 28px; /* 1.75rem */
+  --ol-spacing-2x-large: 36px; /* 2.25rem */
+  --ol-spacing-3x-large: 48px; /* 3rem */
+  --ol-spacing-4x-large: 72px; /* 4.5rem */
+
+  /*
+   * Transitions
+   */
+
+  --ol-transition-x-slow: 1000ms;
+  --ol-transition-slow: 500ms;
+  --ol-transition-medium: 250ms;
+  --ol-transition-fast: 150ms;
+  --ol-transition-x-fast: 50ms;
+
+  /*
+   * Widget State Transitions
+   * Centralized timing for widget display state changes (minimized, normal, maximized)
+   */
+
+  --ocb-transition-state-duration: 400ms;
+  --ocb-transition-content-duration: 350ms;
+  --ocb-transition-ui-duration: 150ms;
+  --ocb-easing-state: cubic-bezier(0.4, 0, 0.2, 1);
+  --ocb-easing-ui: ease-out;
+
+  /*
+   * Typography
+   */
+
+  /* Fonts */
+  --ol-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  --ol-font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --ol-font-serif: Georgia, "Times New Roman", serif;
+
+  /* Font sizes */
+  --ol-font-size-2x-small: 10px; /* 0.625rem */
+  --ol-font-size-x-small: 12px; /* 0.75rem */
+  --ol-font-size-small: 14px; /* 0.875rem */
+  --ol-font-size-medium: 16px; /* 1rem */
+  --ol-font-size-large: 20px; /* 1.25rem */
+  --ol-font-size-x-large: 24px; /* 1.5rem */
+  --ol-font-size-2x-large: 36px; /* 2.25rem */
+  --ol-font-size-3x-large: 48px; /* 3rem */
+  --ol-font-size-4x-large: 72px; /* 4.5rem */
+
+  /* Font weights */
+  --ol-font-weight-light: 300;
+  --ol-font-weight-normal: 400;
+  --ol-font-weight-semibold: 500;
+  --ol-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --ol-letter-spacing-denser: -0.03em;
+  --ol-letter-spacing-dense: -0.015em;
+  --ol-letter-spacing-normal: normal;
+  --ol-letter-spacing-loose: 0.075em;
+  --ol-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --ol-line-height-denser: 1;
+  --ol-line-height-dense: 1.4;
+  --ol-line-height-normal: 1.8;
+  --ol-line-height-loose: 2.2;
+  --ol-line-height-looser: 2.6;
+
+  /* Focus rings */
+  --ol-focus-ring-color: var(--ol-color-primary-700);
+  --ol-focus-ring-style: solid;
+  --ol-focus-ring-width: 3px;
+  --ol-focus-ring: var(--ol-focus-ring-style) var(--ol-focus-ring-width) var(--ol-focus-ring-color);
+  --ol-focus-ring-offset: 1px;
+
+  /*
+   * Forms
+   */
+
+  /* Buttons */
+  --ol-button-font-size-small: var(--ol-font-size-x-small);
+  --ol-button-font-size-medium: var(--ol-font-size-small);
+  --ol-button-font-size-large: var(--ol-font-size-medium);
+
+  /* Inputs */
+  --ol-input-height-small: 30px; /* 1.875rem */
+  --ol-input-height-medium: 40px; /* 2.5rem */
+  --ol-input-height-large: 50px; /* 3.125rem */
+
+  --ol-input-background-color: var(--ol-color-neutral-0);
+  --ol-input-background-color-hover: var(--ol-input-background-color);
+  --ol-input-background-color-focus: var(--ol-input-background-color);
+  --ol-input-background-color-disabled: var(--ol-color-neutral-100);
+  --ol-input-border-color: var(--ol-color-neutral-400);
+  --ol-input-border-color-hover: var(--ol-color-neutral-500);
+  --ol-input-border-color-focus: var(--ol-color-primary-600);
+  --ol-input-border-color-disabled: var(--ol-color-neutral-400);
+  --ol-input-border-width: 1px;
+  --ol-input-required-content: "*";
+  --ol-input-required-content-offset: -2px;
+  --ol-input-required-content-color: var(--ol-input-label-color);
+
+  --ol-input-border-radius-small: var(--ol-border-radius-medium);
+  --ol-input-border-radius-medium: var(--ol-border-radius-medium);
+  --ol-input-border-radius-large: var(--ol-border-radius-medium);
+
+  --ol-input-font-family: var(--ol-font-sans);
+  --ol-input-font-weight: var(--ol-font-weight-normal);
+  --ol-input-font-size-small: var(--ol-font-size-small);
+  --ol-input-font-size-medium: var(--ol-font-size-medium);
+  --ol-input-font-size-large: var(--ol-font-size-large);
+  --ol-input-letter-spacing: var(--ol-letter-spacing-normal);
+
+  --ol-input-color: var(--ol-color-neutral-700);
+  --ol-input-color-hover: var(--ol-color-neutral-700);
+  --ol-input-color-focus: var(--ol-color-neutral-700);
+  --ol-input-color-disabled: var(--ol-color-neutral-900);
+  --ol-input-icon-color: var(--ol-color-neutral-500);
+  --ol-input-icon-color-hover: var(--ol-color-neutral-600);
+  --ol-input-icon-color-focus: var(--ol-color-neutral-600);
+  --ol-input-placeholder-color: var(--ol-color-neutral-500);
+  --ol-input-placeholder-color-disabled: var(--ol-color-neutral-600);
+  --ol-input-spacing-small: var(--ol-spacing-small);
+  --ol-input-spacing-medium: var(--ol-spacing-medium);
+  --ol-input-spacing-large: var(--ol-spacing-large);
+
+  --ol-input-focus-ring-color: var(--ol-color-primary-50);
+  --ol-input-focus-ring-offset: 0;
+
+  --ol-input-filled-background-color: var(--ol-color-neutral-100);
+  --ol-input-filled-background-color-hover: var(--ol-color-neutral-100);
+  --ol-input-filled-background-color-focus: var(--ol-color-neutral-100);
+  --ol-input-filled-background-color-disabled: var(--ol-color-neutral-100);
+  --ol-input-filled-color: var(--ol-color-neutral-800);
+  --ol-input-filled-color-hover: var(--ol-color-neutral-800);
+  --ol-input-filled-color-focus: var(--ol-color-neutral-700);
+  --ol-input-filled-color-disabled: var(--ol-color-neutral-800);
+
+  /* Labels */
+  --ol-input-label-font-size-small: var(--ol-font-size-small);
+  --ol-input-label-font-size-medium: var(--ol-font-size-medium);
+  --ol-input-label-font-size-large: var(--ol-font-size-large);
+  --ol-input-floating-label-initial-position-small: 0, var(--ol-spacing-x-small);
+  --ol-input-floating-label-final-position-small: 0, -5px;
+  --ol-input-floating-label-initial-position-medium: 0, var(--ol-spacing-small);
+  --ol-input-floating-label-final-position-medium: 0, -6px;
+  --ol-input-floating-label-initial-position-large: 0, 14px;
+  --ol-input-floating-label-final-position-large: 0, -8px;
+  --ol-input-floating-label-background-color: var(--ol-color-neutral-0);
+  --ol-input-floating-label-final-font-weight: var(--ol-font-weight-bold);
+  --ol-input-floating-label-font-size-small: var(--ol-font-size-2x-small);
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+  --ol-input-floating-label-font-size-large: var(--ol-font-size-small);
+  --ol-input-label-color: inherit;
+
+  /* Help text */
+  --ol-input-help-text-font-size-small: var(--ol-font-size-x-small);
+  --ol-input-help-text-font-size-medium: var(--ol-font-size-small);
+  --ol-input-help-text-font-size-large: var(--ol-font-size-medium);
+  --ol-input-help-text-color: var(--ol-color-neutral-600);
+
+  /* Toggles (checkboxes, radios, switches) */
+  --ol-toggle-size-small: 14px; /* 0.875rem */
+  --ol-toggle-size-medium: 18px; /* 1.125rem */
+  --ol-toggle-size-large: 22px; /* 1.375rem */
+
+  /*
+   * Overlays
+   */
+
+  --ol-overlay-background-color: rgb(0, 0, 0, 0.43);
+
+  /*
+   * Panels
+   */
+
+  --ol-panel-background-color: var(--ol-color-neutral-50);
+  --ol-panel-border-color: var(--ol-color-neutral-200);
+  --ol-panel-border-width: 1px;
+
+  /*
+   * Tooltips
+   */
+
+  --ol-tooltip-border-radius: var(--ol-border-radius-medium);
+  --ol-tooltip-background-color: var(--ol-color-neutral-800);
+  --ol-tooltip-color: var(--ol-color-neutral-0);
+  --ol-tooltip-font-family: var(--ol-font-sans);
+  --ol-tooltip-font-weight: var(--ol-font-weight-normal);
+  --ol-tooltip-font-size: var(--ol-font-size-small);
+  --ol-tooltip-line-height: var(--ol-line-height-dense);
+  --ol-tooltip-padding: var(--ol-spacing-2x-small) var(--ol-spacing-x-small);
+  --ol-tooltip-arrow-size: 6px;
+
+  /*
+   * Z-indexes
+   */
+
+  --ol-z-index-drawer: 700;
+  --ol-z-index-dialog: 800;
+  --ol-z-index-dropdown: 900;
+  --ol-z-index-toast: 950;
+  --ol-z-index-tooltip: 1000;
+}

package/themes/dark.d.cts

@@ -1,4 +1,4 @@
-/*! @onlive.ai/common-121 v0.2.187 | © 2026 Onlive.ai */
+/*! @onlive.ai/common-121 v0.2.190 | © 2026 Onlive.ai */
 import * as lit from 'lit';
 
 declare const styles: lit.CSSResult;

package/themes/dark.d.ts

@@ -1,4 +1,4 @@
-/*! @onlive.ai/common-121 v0.2.187 | © 2026 Onlive.ai */
+/*! @onlive.ai/common-121 v0.2.190 | © 2026 Onlive.ai */
 import * as lit from 'lit';
 
 declare const styles: lit.CSSResult;