optikos 0.1.0 → 0.2.0

package/dist/themes/corporate.css

@@ -1,112 +0,0 @@
-/* Corporate: sober and orderly, for back-office software. Steel blue on cool grey, small radii, hairline borders, flat,
-   a navy sidebar. Comfortable density (not cramped) for long sessions in grids and forms. data-op-theme="corporate" */
-@layer optikos {
-  [data-op-theme~='corporate'] {
-    --op-color-bg: #edf0f4;
-    --op-color-surface: #ffffff;
-    --op-color-surface-2: #f3f5f8;
-    --op-color-fg: #1b2430;
-    --op-color-fg-muted: #5b6676;
-    --op-color-border: #d8dee6;
-    --op-color-border-strong: #a9b3c1;
-    --op-color-hover: #eaeff6;
-    --op-color-selected: #d9e6f7;
-    --op-color-primary: #1f4e8c;
-    --op-color-primary-hover: #173d6f;
-    --op-color-primary-fg: #ffffff;
-    --op-color-primary-soft: #e4edf8;
-    --op-color-danger: #b3261e;
-    --op-color-danger-hover: #8f1d17;
-    --op-color-danger-fg: #ffffff;
-    --op-color-danger-soft: #fbe4e2;
-    --op-color-success: #1e7a4d;
-    --op-color-success-soft: #dff2e8;
-    --op-color-warning: #9a5b00;
-    --op-color-warning-soft: #fcecc9;
-    --op-color-info: #1f5fa8;
-    --op-color-info-soft: #dfeaf8;
-    --op-color-focus: #2f7bd6;
-    --op-color-disabled-fg: #9aa4b2;
-    --op-color-disabled-bg: #eef1f5;
-    --op-color-overlay: rgb(16 24 38 / 0.5);
-    --op-color-inverse-bg: #14213a;
-    --op-color-inverse-fg: #eaf0fa;
-
-    --op-font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
-    --op-font-size: 0.9375rem;
-    --op-font-size-sm: 0.8125rem;
-    --op-font-size-lg: 1.0625rem;
-    --op-font-size-xl: 1.3125rem;
-    --op-line-height: 1.45;
-    --op-font-weight-medium: 500;
-    --op-font-weight-bold: 600;
-
-    --op-space-1: 0.25rem;
-    --op-space-2: 0.5rem;
-    --op-space-3: 0.875rem;
-    --op-space-4: 1.125rem;
-    --op-space-5: 1.5rem;
-    --op-space-6: 2.25rem;
-    --op-control-height: 2.375rem;
-    --op-control-padding-x: 0.875rem;
-    --op-row-height: 2.75rem;
-    --op-border-width: 1px;
-    --op-radius-sm: 0.1875rem;
-    --op-radius: 0.25rem;
-    --op-radius-lg: 0.375rem;
-    --op-focus-width: 2px;
-    --op-focus-offset: 1px;
-    --op-icon-stroke: 1.75;
-    --op-icon-size: 1.3em;
-
-    --op-shadow-sm: none;
-    --op-shadow: 0 2px 6px rgb(16 24 38 / 0.14);
-    --op-shadow-lg: 0 10px 28px rgb(16 24 38 / 0.28);
-    --op-duration: 90ms;
-
-    --op-panel-header-bg: var(--op-color-surface-2);
-    --op-grid-header-bg: #e6ebf1;
-    --op-grid-header-fg: #2a3547;
-    --op-grid-row-selected-bg: var(--op-color-selected);
-    --op-tabs-tab-active-border: var(--op-color-primary);
-    --op-field-label-weight: 600;
-
-    --op-navmenu-item-height: 2.5rem;
-    --op-navmenu-bg: #14213a;
-    --op-navmenu-fg: #d5ddeb;
-    --op-navmenu-group-fg: #8195b4;
-    --op-navmenu-item-hover-bg: #1d2f52;
-    --op-navmenu-active-bg: #203c6a;
-    --op-navmenu-active-fg: #ffffff;
-    --op-navmenu-active-bar: #5ea6f5;
-    --op-navmenu-badge-bg: #5ea6f5;
-    --op-navmenu-badge-fg: #0a1730;
-  }
-  /* title bars and toolbars read as one quiet frame; buttons are flat and square-ish */
-  [data-op-theme~='corporate'] .op-panel__header {
-    font-size: var(--op-font-size);
-    border-block-end-color: var(--op-color-border-strong);
-  }
-  [data-op-theme~='corporate'] .op-button {
-    font-weight: var(--op-font-weight-medium);
-  }
-  [data-op-theme~='corporate'] .op-button--primary {
-    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
-  }
-  [data-op-theme~='corporate'] .op-grid__header {
-    font-weight: var(--op-font-weight-bold);
-    border-block-end: 1px solid var(--op-color-border-strong);
-  }
-  [data-op-theme~='corporate'] .op-grid__body-row {
-    border-block-end-color: var(--op-color-border);
-  }
-  [data-op-theme~='corporate'] .op-grid__body-row.is-selected {
-    box-shadow: inset 2px 0 0 var(--op-color-primary);
-  }
-  [data-op-theme~='corporate'] .op-textfield__input {
-    border-color: var(--op-color-border-strong);
-  }
-  [data-op-theme~='corporate'] .op-tabs__bar {
-    background: var(--op-color-surface-2);
-  }
-}

package/dist/themes/editorial.css

@@ -1,110 +0,0 @@
-/* Editorial: warm paper, serif type, ink rules instead of boxes, underlined fields, oxblood accent. data-op-theme="editorial" */
-@layer optikos {
-  [data-op-theme~='editorial'] {
-    --op-color-bg: #f4eee1;
-    --op-color-surface: #fffdf7;
-    --op-color-surface-2: #efe7d4;
-    --op-color-fg: #1d1a16;
-    --op-color-fg-muted: #6c6455;
-    --op-color-border: #d8cdb4;
-    --op-color-border-strong: #8d826b;
-    --op-color-hover: #f1e9d6;
-    --op-color-selected: #ebdfc2;
-    --op-color-primary: #8b1e1e;
-    --op-color-primary-hover: #6e1515;
-    --op-color-primary-fg: #fff8ee;
-    --op-color-primary-soft: #f6e7e0;
-    --op-color-danger: #b3261e;
-    --op-color-danger-hover: #8f1d17;
-    --op-color-danger-fg: #fff8ee;
-    --op-color-danger-soft: #f8e1de;
-    --op-color-success: #2f6b3f;
-    --op-color-success-soft: #e2eedd;
-    --op-color-warning: #a86b00;
-    --op-color-warning-soft: #f7e9c9;
-    --op-color-info: #1f4e79;
-    --op-color-info-soft: #dde8f3;
-    --op-color-focus: #8b1e1e;
-    --op-color-disabled-fg: #a79e8a;
-    --op-color-disabled-bg: #ece4d0;
-    --op-color-overlay: rgb(40 30 10 / 0.45);
-
-    --op-font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
-    --op-border-width: 1px;
-    --op-font-size: 1rem;
-    --op-font-size-sm: 0.8125rem;
-    --op-font-size-lg: 1.125rem;
-    --op-line-height: 1.6;
-    --op-font-weight-medium: 500;
-    --op-font-weight-bold: 700;
-
-    --op-space-3: 0.875rem;
-    --op-space-4: 1.25rem;
-    --op-space-5: 2rem;
-    --op-control-height: 2.5rem;
-    --op-control-padding-x: 0.5rem;
-    --op-row-height: 2.75rem;
-    --op-radius-sm: 0;
-    --op-radius: 0;
-    --op-radius-lg: 0;
-    --op-radius-pill: 0;
-    --op-focus-width: 2px;
-    --op-icon-stroke: 1.5;
-
-    --op-shadow-sm: none;
-    --op-shadow: 0 2px 0 rgb(29 26 22 / 0.12);
-    --op-shadow-lg: 0 18px 40px rgb(40 30 10 / 0.25);
-    --op-easing: ease;
-
-    --op-panel-border: var(--op-color-border-strong);
-    --op-panel-header-bg: transparent;
-    --op-grid-header-bg: transparent;
-    --op-grid-border: transparent;
-    --op-tabs-tab-active-border: var(--op-color-primary);
-    --op-button-bg: transparent;
-    --op-button-border: var(--op-color-fg);
-  }
-  /* section titles get a double rule, like a newspaper column head */
-  [data-op-theme~='editorial'] .op-panel__header {
-    font-style: italic;
-    font-size: var(--op-font-size-lg);
-    border-block-end: 3px double var(--op-color-border-strong);
-  }
-  [data-op-theme~='editorial'] .op-button {
-    font-size: var(--op-font-size-sm);
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-  }
-  [data-op-theme~='editorial'] .op-button:hover:not(:disabled) {
-    color: var(--op-color-primary-fg);
-    background: var(--op-color-fg);
-  }
-  [data-op-theme~='editorial'] .op-button--primary:hover:not(:disabled) {
-    background: var(--op-color-primary-hover);
-  }
-  [data-op-theme~='editorial'] .op-button--ghost {
-    border-color: transparent;
-    text-decoration: underline;
-    text-underline-offset: 0.3em;
-  }
-  /* fields are a line to write on, not a box */
-  [data-op-theme~='editorial'] .op-textfield__input {
-    background: transparent;
-    border-width: 0 0 var(--op-border-width) 0;
-    border-color: var(--op-color-border-strong);
-  }
-  [data-op-theme~='editorial'] .op-textfield__input:focus {
-    outline: none;
-    border-color: var(--op-color-primary);
-    box-shadow: 0 var(--op-focus-width) 0 var(--op-color-primary);
-  }
-  [data-op-theme~='editorial'] .op-field__label {
-    font-variant: small-caps;
-    letter-spacing: 0.08em;
-  }
-  [data-op-theme~='editorial'] .op-grid__header {
-    border-block-end: 2px solid var(--op-color-fg);
-    font-variant: small-caps;
-    letter-spacing: 0.08em;
-  }
-}

package/dist/themes/soft.css

@@ -1,101 +0,0 @@
-/* Soft: airy and rounded, pastel violet, pill buttons, diffuse shadows, no hairlines. data-op-theme="soft" */
-@layer optikos {
-  :root[data-op-theme~='soft'] {
-    background: linear-gradient(135deg, #eef1fb 0%, #f6efff 100%) fixed;
-  }
-  [data-op-theme~='soft'] {
-    --op-color-bg: #eef1fb;
-    --op-color-surface: #ffffff;
-    --op-color-surface-2: #f4f5fd;
-    --op-color-fg: #2d3142;
-    --op-color-fg-muted: #7b819b;
-    --op-color-border: #e6e9f7;
-    --op-color-border-strong: #d6dbf0;
-    --op-color-hover: #f1efff;
-    --op-color-selected: #e6e0ff;
-    --op-color-primary: #7c5cff;
-    --op-color-primary-hover: #6a48f5;
-    --op-color-primary-fg: #ffffff;
-    --op-color-primary-soft: #efeaff;
-    --op-color-danger: #ef5b7b;
-    --op-color-danger-hover: #dc4565;
-    --op-color-danger-fg: #ffffff;
-    --op-color-danger-soft: #ffe9ee;
-    --op-color-success: #2fb59a;
-    --op-color-success-soft: #dff6f0;
-    --op-color-warning: #f2a03d;
-    --op-color-warning-soft: #fff0dc;
-    --op-color-info: #4f8cff;
-    --op-color-info-soft: #e5eeff;
-    --op-color-focus: #9a82ff;
-    --op-color-disabled-fg: #aab0c6;
-    --op-color-disabled-bg: #f1f2fa;
-    --op-color-overlay: rgb(45 49 66 / 0.35);
-
-    --op-font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
-    --op-border-width: 1px;
-    --op-font-size: 0.9375rem;
-    --op-line-height: 1.5;
-    --op-font-weight-medium: 500;
-    --op-font-weight-bold: 600;
-
-    --op-space-1: 0.375rem;
-    --op-space-2: 0.625rem;
-    --op-space-3: 1rem;
-    --op-space-4: 1.25rem;
-    --op-space-5: 1.75rem;
-    --op-control-height: 2.75rem;
-    --op-control-padding-x: 1.125rem;
-    --op-row-height: 3.25rem;
-    --op-radius-sm: 0.625rem;
-    --op-radius: 0.875rem;
-    --op-radius-lg: 1.5rem;
-    --op-focus-width: 3px;
-
-    --op-shadow-sm: 0 2px 6px rgb(124 92 255 / 0.1);
-    --op-shadow: 0 8px 24px rgb(124 92 255 / 0.14);
-    --op-shadow-lg: 0 20px 50px rgb(124 92 255 / 0.22);
-    --op-duration: 200ms;
-    --op-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
-
-    --op-button-radius: var(--op-radius-pill);
-    --op-button-primary-bg: linear-gradient(135deg, #8b6cff, #6f4df0);
-    --op-panel-radius: 1.25rem;
-    --op-panel-shadow: var(--op-shadow);
-    --op-panel-border: transparent;
-    --op-panel-header-bg: transparent;
-    --op-grid-radius: 1.25rem;
-    --op-grid-border: transparent;
-    --op-grid-header-bg: var(--op-color-surface-2);
-    --op-tabs-tab-active-border: var(--op-color-primary);
-    --op-window-radius: 1.5rem;
-  }
-  [data-op-theme~='soft'] .op-button {
-    box-shadow: var(--op-shadow-sm);
-  }
-  [data-op-theme~='soft'] .op-button:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: var(--op-shadow);
-  }
-  [data-op-theme~='soft'] .op-button--ghost {
-    box-shadow: none;
-  }
-  [data-op-theme~='soft'] .op-textfield__input {
-    border-color: transparent;
-    background: var(--op-color-surface-2);
-  }
-  [data-op-theme~='soft'] .op-textfield__input:focus {
-    background: var(--op-color-surface);
-    box-shadow: var(--op-shadow-sm);
-  }
-  [data-op-theme~='soft'] .op-panel__header {
-    border-block-end: 0;
-    padding-block-start: var(--op-space-4);
-  }
-  [data-op-theme~='soft'] .op-grid__body-row {
-    border-block-end-color: transparent;
-  }
-  [data-op-theme~='soft'] .op-grid__body-row:hover {
-    border-radius: var(--op-radius);
-  }
-}

package/dist/themes/terminal.css

@@ -1,91 +0,0 @@
-/* Terminal: phosphor green on black, monospace, square, dense, glowing focus. data-op-theme="terminal" */
-@layer optikos {
-  [data-op-theme~='terminal'] {
-    color-scheme: dark; /* native scrollbars and controls follow */
-    --op-color-bg: #040905;
-    --op-color-surface: #08110a;
-    --op-color-surface-2: #0d1a10;
-    --op-color-fg: #b6f5c4;
-    --op-color-fg-muted: #5f9b70;
-    --op-color-border: #1c4a28;
-    --op-color-border-strong: #2c7a40;
-    --op-color-hover: #11301a;
-    --op-color-selected: #164a24;
-    --op-color-primary: #39ff14;
-    --op-color-primary-hover: #7dff64;
-    --op-color-primary-fg: #021006;
-    --op-color-primary-soft: #0d2a12;
-    --op-color-danger: #ff5555;
-    --op-color-danger-hover: #ff8080;
-    --op-color-danger-fg: #1a0000;
-    --op-color-danger-soft: #2a0b0b;
-    --op-color-success: #39ff14;
-    --op-color-success-soft: #0d2a12;
-    --op-color-warning: #ffd166;
-    --op-color-warning-soft: #2e2408;
-    --op-color-info: #5ad1ff;
-    --op-color-info-soft: #0a2430;
-    --op-color-focus: #39ff14;
-    --op-color-disabled-fg: #3b6a49;
-    --op-color-disabled-bg: #0a140c;
-    --op-color-overlay: rgb(0 0 0 / 0.78);
-    --op-color-inverse-bg: #b6f5c4;
-    --op-color-inverse-fg: #040905;
-
-    --op-font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-    --op-border-width: 1px;
-    --op-font-size: 0.8125rem;
-    --op-font-size-sm: 0.6875rem;
-    --op-line-height: 1.35;
-
-    --op-space-1: 0.125rem;
-    --op-space-2: 0.375rem;
-    --op-space-3: 0.5rem;
-    --op-space-4: 0.75rem;
-    --op-space-5: 1.125rem;
-    --op-control-height: 1.875rem;
-    --op-control-padding-x: 0.625rem;
-    --op-row-height: 1.75rem;
-    --op-radius-sm: 0;
-    --op-radius: 0;
-    --op-radius-lg: 0;
-    --op-radius-pill: 0;
-    --op-focus-width: 1px;
-    --op-focus-offset: 0;
-    --op-icon-stroke: 1.5;
-
-    --op-shadow-sm: 0 0 0 1px #1c4a28;
-    --op-shadow: 0 0 0 1px #2c7a40, 0 0 14px rgb(57 255 20 / 0.12);
-    --op-shadow-lg: 0 0 0 1px #39ff14, 0 0 32px rgb(57 255 20 / 0.2);
-    --op-duration: 0ms;
-
-    --op-panel-header-bg: transparent;
-    --op-grid-header-bg: var(--op-color-surface-2);
-    --op-grid-header-fg: var(--op-color-primary);
-    --op-tabs-tab-active-fg: var(--op-color-primary);
-  }
-  [data-op-theme~='terminal'] .op-panel__title::before {
-    content: '> ';
-    color: var(--op-color-primary);
-  }
-  [data-op-theme~='terminal'] .op-button:not(.op-button--ghost) {
-    border-color: var(--op-color-primary);
-  }
-  [data-op-theme~='terminal'] .op-button {
-    text-transform: lowercase;
-  }
-  [data-op-theme~='terminal'] .op-textfield__input {
-    caret-color: var(--op-color-primary);
-  }
-  [data-op-theme~='terminal'] .op-textfield__input:focus,
-  [data-op-theme~='terminal'] .op-button:focus-visible {
-    box-shadow: 0 0 10px rgb(57 255 20 / 0.35);
-  }
-  [data-op-theme~='terminal'] ::selection {
-    color: var(--op-color-primary-fg);
-    background: var(--op-color-primary);
-  }
-  [data-op-theme~='terminal'] .op-grid__hcell {
-    text-transform: uppercase;
-  }
-}