@sylwellsoftware/fray 0.4.0 → 0.6.0

package/themes/java/theme.css

@@ -1,140 +1,415 @@
 @charset "utf-8";
 
-:where(:root), [data-fray-theme="java"] {
-  color-scheme: light;
-  --fray-font-family: Arial, Helvetica, sans-serif;
-  --fray-font-size: 0.875rem;
-  --fray-line-height: 1.15;
-  --fray-control-min-height: 1.75rem;
-  --fray-space-xs: 2px;
-  --fray-space-sm: 4px;
-  --fray-space-md: 8px;
-  --fray-space-lg: 12px;
-  --fray-radius-sm: 0;
-  --fray-radius-md: 0;
-  --fray-radius-lg: 3px;
-  --fray-motion-fast: 0ms;
-
-  --fray-ui-background: var(--fray-color-surface-muted);
-  --fray-ui-color: var(--fray-color-text);
-  --fray-ui-border: 1px solid var(--fray-color-border-strong);
-  --fray-ui-shadow: none;
-  --fray-focus-ring: 0 0 0 1px var(--fray-color-focus);
-
-  --fray-panel-background: var(--fray-color-surface-muted);
-  --fray-panel-color: var(--fray-color-text);
-  --fray-panel-border: 2px groove var(--fray-color-highlight);
-  --fray-panel-shadow: none;
-  --fray-panel-radius: 0;
-  --fray-dialog-shadow: 3px 3px 0 color-mix(in srgb, var(--fray-color-shadow) 45%, transparent);
-  --fray-dialog-backdrop-background: color-mix(in srgb, var(--fray-color-shadow) 45%, transparent);
-
-  --fray-header-background: transparent;
-  --fray-header-color: var(--fray-color-text);
-  --fray-header-border: 0 solid transparent;
-  --fray-header-shadow: none;
-  --fray-table-header-background: var(--fray-color-surface-raised);
-  --fray-dialog-header-background: linear-gradient(to bottom, var(--fray-color-primary-active), var(--fray-color-primary));
-
-  --fray-button-background: var(--fray-color-surface-muted);
-  --fray-button-background-hover: var(--fray-color-primary-soft);
-  --fray-button-background-active: var(--fray-color-surface-inset);
-  --fray-button-background-disabled: var(--fray-color-disabled);
-  --fray-button-color: var(--fray-color-text);
-  --fray-button-border: 2px outset var(--fray-color-highlight);
-  --fray-button-shadow: none;
-  --fray-button-shadow-active: none;
-
-  --fray-input-background: var(--fray-color-surface-raised);
-  --fray-input-color: var(--fray-color-text);
-  --fray-input-border: 1px solid var(--fray-color-border-strong);
-  --fray-input-shadow: inset 1px 1px 1px color-mix(in srgb, var(--fray-color-shadow) 30%, transparent);
-  --fray-input-background-disabled: var(--fray-color-disabled);
-  --fray-input-color-disabled: var(--fray-color-on-disabled);
-
-  --fray-selection-background: var(--fray-color-selection);
-  --fray-selection-color: var(--fray-color-on-selection);
-  --fray-row-hover-background: var(--fray-color-primary-soft);
-  --fray-table-row-background: var(--fray-color-surface-raised);
-  --fray-table-row-alt-background: var(--fray-color-surface-raised);
-  --fray-checkbox-box-background: var(--fray-color-surface-raised);
-  --fray-checkbox-box-background-checked: var(--fray-color-selection);
-  --fray-checkbox-box-border: 2px inset var(--fray-color-highlight);
-  --fray-checkbox-symbol-color: var(--fray-color-on-selection);
-  --fray-radio-background: var(--fray-button-background);
-  --fray-radio-background-checked: var(--fray-selection-background);
-  --fray-toolbar-background: var(--fray-color-surface-muted);
-  --fray-toolbar-color: var(--fray-color-text);
-  --fray-toolbar-border: 2px outset var(--fray-color-highlight);
-  --fray-toolbar-shadow: none;
-  --fray-tabline-background: var(--fray-color-surface-muted);
-  --fray-tab-active-background: var(--fray-panel-background);
-  --fray-tab-button-background: var(--fray-color-surface-muted);
-  --fray-progress-track-background: var(--fray-color-surface-inset);
-  --fray-progress-value-background: var(--fray-color-primary);
-  --fray-working-background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--fray-color-text) 12%, transparent) 4px 8px);
-
-  --base-font-size: var(--fray-font-size);
-  --ui-font-size: var(--fray-font-size);
-  --ui-padding: var(--fray-space-sm);
-  --ui-padding-h: var(--fray-space-sm);
-  --ui-padding-v: var(--fray-space-xs);
-  --ui-border-radius: var(--fray-radius-md);
-  --ui-text-color: var(--fray-ui-color);
-  --ui-muted-text-color: var(--fray-color-text-muted);
-  --ui-border-color: var(--fray-color-border);
-  --ui-input-bg: var(--fray-input-background);
-  --ui-input-border: var(--fray-input-border);
-  --ui-input-bg-disabled: var(--fray-input-background-disabled);
-  --ui-input-border-disabled: 1px solid var(--fray-color-border);
-  --ui-input-text-color-disabled: var(--fray-input-color-disabled);
-  --ui-accent-color: var(--fray-color-primary);
-  --ui-accent-color-highlight: var(--fray-color-primary-soft);
-  --input-width: 15rem;
-  --input-shadow: var(--fray-input-shadow);
-  --button-background: var(--fray-button-background);
-  --button-background-hover: var(--fray-button-background-hover);
-  --button-background-disabled: var(--fray-button-background-disabled);
-  --button-border: var(--fray-button-border);
-  --button-border-disabled: 1px solid var(--fray-color-border);
-  --button-shadow: var(--fray-button-shadow);
-  --button-color: var(--fray-button-color);
-  --toggle-selected-bg: var(--fray-selection-background);
-  --toggle-selected-text: var(--fray-selection-color);
-  --panel-bg: var(--fray-panel-background);
-  --panel-border: var(--fray-panel-border);
-  --panel-radius: var(--fray-panel-radius);
-  --panel-shadow: var(--fray-panel-shadow);
-  --panel-color: var(--fray-panel-color);
-  --panel-padding: var(--fray-space-md);
-  --toolbar-bg: var(--fray-toolbar-background);
-  --toolbar-border: var(--fray-toolbar-border);
-  --toolbar-radius: var(--fray-radius-lg);
-  --toolbar-shadow: var(--fray-toolbar-shadow);
-  --toolbar-color: var(--fray-toolbar-color);
-  --sectionheader-bg: var(--fray-section-header-background, var(--fray-header-background));
-  --sectionheader-shadow: var(--fray-header-shadow);
-  --sectionheader-color: var(--fray-header-color);
-  --tabline-bg: var(--fray-tabline-background);
-  --tab-bg-active: var(--fray-tab-active-background);
-  --error-color: var(--fray-color-error);
-  --cbx-o-border: var(--fray-checkbox-box-border);
-  --cbx-border-radius: 0;
-  --spacing-small: var(--fray-space-sm);
-  --spacing-medium: var(--fray-space-md);
-  --noselect-user-select: none;
-  --noselect-cursor: default;
-}
+@layer theme {
+  :where(:root:not([data-theme]), [data-theme="java"]) {
+      color-scheme: light;
+      --font-family: Arial, Helvetica, sans-serif;
+      --font-size: 0.875rem;
+      --line-height: 1.25;
+      --control-min-height: 1.75rem;
+      --space-xs: 0.25rem;
+      --space-sm: 0.5rem;
+      --space-md: 1rem;
+      --space-lg: 1.5rem;
+      --radius-sm: 0;
+      --radius-md: 0;
+      --radius-lg: 3px;
+      --motion-fast: 0ms;
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="java"]) :where(
-  button[data-fray-component="button"],
-  [role="tab"],
-  [role="radio"],
-  [role="checkbox"]
-):active {
-  border-style: inset;
-}
+      --ui-background: var(--palette-neutral-50);
+      --ui-color: var(--palette-neutral-950);
+      --ui-border: 1px solid var(--palette-neutral-300);
+      --ui-shadow: none;
+      --focus-ring: 0 0 0 2px var(--palette-primary-400);
+      --focus-color: var(--palette-primary);
+      --error-color: var(--palette-red);
+      --error-contrast: var(--palette-contrast-light);
+      --success-color: var(--palette-green);
+
+      --panel-background: var(--palette-neutral-50);
+      --panel-color: var(--palette-neutral-950);
+      --panel-border: 2px groove var(--palette-light);
+      --panel-shadow: none;
+      --panel-radius: var(--radius-md);
+      --dialog-shadow: 0 1.25rem 4rem color-mix(in oklch, var(--palette-dark) 35%, transparent);
+      --dialog-backdrop-background: color-mix(in oklch, var(--palette-dark) 55%, transparent);
+
+      --header-background: var(--palette-neutral-100);
+      --header-color: var(--palette-neutral-950);
+      --header-border: 0 solid transparent;
+      --header-shadow: none;
+      --section-header-background: var(--header-background);
+      --section-header-color: var(--header-color);
+      --section-header-border: var(--header-border);
+      --section-header-shadow: var(--header-shadow);
+      --panel-header-background: var(--section-header-background);
+      --panel-header-color: var(--section-header-color);
+      --table-header-background: var(--palette-neutral-100);
+      --table-header-color: var(--header-color);
+      --dialog-header-background: var(--section-header-background);
+      --dialog-header-color: var(--section-header-color);
+
+      --button-background: var(--palette-neutral-100);
+      --button-background-hover: var(--palette-primary-100);
+      --button-background-active: var(--palette-primary);
+      --button-background-disabled: var(--palette-neutral-200);
+      --button-color: var(--palette-neutral-950);
+      --button-border: 2px outset var(--palette-light);
+      --button-shadow: none;
+      --button-shadow-active: none;
+      --toggle-button-background: var(--button-background);
+      --toggle-button-background-checked: var(--selection-background);
+      --tab-button-background: var(--button-background);
+      --tab-button-background-active: var(--tab-active-background);
+      --menu-button-background: var(--button-background);
+      --dropdown-trigger-background: var(--button-background);
+      --table-header-button-background: var(--button-background);
+
+      --input-background: var(--palette-light);
+      --input-color: var(--palette-neutral-950);
+      --input-border: 1px solid var(--palette-neutral-500);
+      --input-shadow: inset 1px 1px 1px color-mix(in oklch, var(--palette-dark) 30%, transparent);
+      --input-background-disabled: var(--palette-neutral-200);
+      --input-color-disabled: var(--palette-neutral-700);
+
+      --selection-background: var(--palette-primary);
+      --selection-color: var(--palette-contrast-light);
+      --row-hover-background: var(--palette-primary-100);
+      --table-row-background: var(--palette-neutral-50);
+      --table-row-alt-background: var(--palette-neutral-100);
+      --checkbox-box-background: var(--input-background);
+      --checkbox-box-background-checked: var(--selection-background);
+      --checkbox-box-border: var(--input-border);
+      --checkbox-symbol-color: var(--selection-color);
+      --radio-background: var(--button-background);
+      --radio-background-checked: var(--selection-background);
+      --toolbar-background: var(--palette-neutral-100);
+      --toolbar-color: var(--palette-neutral-950);
+      --toolbar-border: 2px outset var(--palette-light);
+      --toolbar-shadow: none;
+      --tabline-background: var(--palette-neutral-100);
+      --tab-active-background: var(--palette-neutral-50);
+      --progress-track-background: var(--palette-neutral-200);
+      --progress-value-background: var(--palette-primary);
+      --working-background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklch, var(--palette-dark) 12%, transparent) 4px 8px);
+
+      --colored-base: var(--palette-primary);
+      --colored-light: var(--palette-primary-light);
+      --colored-dark: var(--palette-primary-dark);
+      --colored-contrast: var(--palette-contrast-light);
+
+      --base-font-size: var(--font-size);
+      --ui-font-size: var(--font-size);
+      --ui-padding: var(--space-sm);
+      --ui-padding-h: var(--space-sm);
+      --ui-padding-v: var(--space-xs);
+      --ui-border-radius: var(--radius-md);
+      --ui-text-color: var(--ui-color);
+      --ui-muted-text-color: var(--palette-neutral-700);
+      --ui-border-color: var(--palette-neutral-300);
+      --ui-input-bg: var(--input-background);
+      --ui-input-border: var(--input-border);
+      --ui-input-bg-disabled: var(--input-background-disabled);
+      --ui-input-border-disabled: 1px solid var(--palette-neutral-300);
+      --ui-input-text-color-disabled: var(--input-color-disabled);
+      --ui-accent-color: var(--palette-primary);
+      --ui-accent-color-highlight: var(--palette-primary-100);
+      --input-width: 15rem;
+      --button-border-disabled: 1px solid var(--palette-neutral-300);
+      --toggle-selected-bg: var(--selection-background);
+      --toggle-selected-text: var(--selection-color);
+      --panel-bg: var(--panel-background);
+      --panel-padding: var(--space-md);
+      --toolbar-bg: var(--toolbar-background);
+      --toolbar-radius: var(--radius-md);
+      --sectionheader-bg: var(--section-header-background);
+      --sectionheader-shadow: var(--section-header-shadow);
+      --sectionheader-color: var(--section-header-color);
+      --tabline-bg: var(--tabline-background);
+      --tab-bg-active: var(--tab-active-background);
+      --cbx-o-border: var(--checkbox-box-border);
+      --cbx-border-radius: var(--radius-sm);
+      --spacing-small: var(--space-sm);
+      --spacing-medium: var(--space-md);
+      --noselect-user-select: none;
+      --noselect-cursor: default;
+
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      line-height: var(--line-height);
+      color: var(--ui-color);
+      background: var(--ui-background);
+  }
+
+  @scope (:root:not([data-theme]), [data-theme="java"]) to ([data-theme], [data-theme-exclude]) {
+
+    :where(button, .buttonlike) {
+      min-height: var(--control-min-height);
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--button-color);
+      background: var(--button-background);
+      border: var(--button-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--button-shadow);
+      font: inherit;
+      cursor: default;
+      user-select: none;
+    }
+
+    :where(button, .buttonlike):hover:not(:disabled, [aria-disabled="true"]) {
+      background: var(--button-background-hover);
+    }
+
+    :where(button, .buttonlike):active:not(:disabled, [aria-disabled="true"]) {
+      background: var(--button-background-active);
+      box-shadow: var(--button-shadow-active);
+    }
+
+    :where(button, .buttonlike):focus-visible,
+    :where(input, select, textarea, .inputlike):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 1px;
+      box-shadow: var(--focus-ring);
+    }
+
+    :where(button, .buttonlike):disabled,
+    :where(.buttonlike[aria-disabled="true"]) {
+      color: var(--input-color-disabled);
+      background: var(--button-background-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :where(.buttonshell) {
+      border: var(--button-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--button-shadow);
+    }
+
+    :where(.buttoninner) {
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--button-color);
+      background: var(--button-background);
+    }
+
+    :where(input, select, textarea, .inputlike) {
+      min-height: var(--control-min-height);
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--input-color);
+      background: var(--input-background);
+      border: var(--input-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--input-shadow);
+      box-sizing: border-box;
+      font: inherit;
+    }
+
+    :where(input, select, textarea, .inputlike):disabled,
+    :where(.inputlike[aria-disabled="true"]) {
+      color: var(--input-color-disabled);
+      background: var(--input-background-disabled);
+      cursor: not-allowed;
+    }
+
+    :where(.inputshell) {
+      color: var(--input-color);
+      background: var(--input-background);
+      border: var(--input-border);
+      border-radius: var(--radius-sm);
+      box-shadow: var(--input-shadow);
+    }
+
+    :where([role="checkbox"][aria-checked="true"] .inputshell) {
+      color: var(--checkbox-symbol-color);
+      background: var(--checkbox-box-background-checked);
+    }
+
+    :where(.inputinner) {
+      padding: var(--space-xs) var(--space-sm);
+      color: var(--input-color);
+      background: var(--input-background);
+    }
+
+    :where(.selectshell) { position: relative; }
+
+    :where(table, textarea, [role="tree"], [role="listbox"], .datacomponentlike) {
+      color: var(--ui-color);
+      background: var(--ui-background);
+      border-color: var(--palette-neutral-300);
+    }
+
+    :where(.datacomponentshell) {
+      border: var(--ui-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--ui-shadow);
+    }
+
+    :where(.datacomponentinner) {
+      padding: var(--space-sm);
+      color: var(--ui-color);
+      background: var(--ui-background);
+    }
+
+    :where(header, th, .headerlike) {
+      color: var(--header-color);
+      background: var(--header-background);
+      border: var(--header-border);
+      box-shadow: var(--header-shadow);
+    }
+
+    :where(th > button) {
+      color: var(--table-header-color);
+      background: var(--table-header-button-background);
+    }
+
+    :where(th) {
+      color: var(--table-header-color);
+      background: var(--table-header-background);
+    }
+
+    :where(dialog > header) {
+      color: var(--dialog-header-color);
+      background: var(--dialog-header-background);
+    }
+
+    :where(dl > div) { border-block-end: 1px solid var(--ui-border-color); }
+    :where(dt) {
+      color: var(--ui-muted-text-color);
+      font-weight: 600;
+    }
+
+    :where(.headershell) {
+      border: var(--header-border);
+      box-shadow: var(--header-shadow);
+    }
+
+    :where(.headerinner) {
+      padding: var(--space-sm);
+      color: var(--header-color);
+      background: var(--header-background);
+    }
+
+    :where(.panellike, aside, dialog) {
+      color: var(--panel-color);
+      background: var(--panel-background);
+      border: var(--panel-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--panel-shadow);
+    }
+
+    :where(.panelshell) {
+      border: var(--panel-border);
+      border-radius: var(--panel-radius);
+      box-shadow: var(--panel-shadow);
+    }
+
+    :where(.panelinner) {
+      padding: var(--space-md);
+      color: var(--panel-color);
+      background: var(--panel-background);
+    }
+
+    :where(dialog)::backdrop { background: var(--dialog-backdrop-background); }
+    :where(dialog > footer) { border-block-start: 1px solid var(--ui-border-color); }
+
+    :where([role="toolbar"], .toolbarlike) {
+      color: var(--toolbar-color);
+      background: var(--toolbar-background);
+      border: var(--toolbar-border);
+      box-shadow: var(--toolbar-shadow);
+    }
+
+    :where(.toolbarshell) {
+      border: var(--toolbar-border);
+      border-radius: var(--radius-md);
+      box-shadow: var(--toolbar-shadow);
+    }
+
+    :where(.toolbarinner) {
+      padding: var(--space-sm);
+      color: var(--toolbar-color);
+      background: var(--toolbar-background);
+    }
+
+    :where(.coloredlike, .coloredshell) {
+      --colored-base: var(--palette-primary);
+      --colored-light: var(--palette-primary-light);
+      --colored-dark: var(--palette-primary-dark);
+      --colored-contrast: var(--palette-contrast-light);
+      color: var(--colored-contrast);
+      background: var(--colored-base);
+      border-color: color-mix(in oklch, var(--colored-dark) 72%, currentColor);
+    }
+
+    :where(.coloredinner) {
+      color: var(--colored-contrast);
+      background: var(--colored-base);
+    }
+
+    :where([aria-selected="true"], [aria-pressed="true"]) {
+      color: var(--selection-color);
+      background: var(--selection-background);
+    }
+
+    :where([role="tab"]) {
+      background: var(--tab-button-background);
+      border-radius: var(--radius-md) var(--radius-md) 0 0;
+    }
+    :where([role="tab"][aria-selected="true"]) {
+      color: var(--button-color);
+      background: var(--tab-button-background-active);
+    }
+    :where([role="radio"]) { background: var(--toggle-button-background); }
+    :where([role="radio"][aria-checked="true"]) {
+      color: var(--selection-color);
+      background: var(--toggle-button-background-checked);
+    }
+    :where([role="radiogroup"] > [role="radio"]) { border-radius: 0; }
+    :where([role="radiogroup"] > [role="radio"]:first-child) {
+      border-radius: var(--radius-md) 0 0 var(--radius-md);
+    }
+    :where([role="radiogroup"] > [role="radio"]:last-child) {
+      border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    }
+
+    :where([role="option"], [role="treeitem"], tbody tr[tabindex]):hover {
+      background: var(--row-hover-background);
+    }
+
+    :where([role="option"], [role="treeitem"], tbody tr[tabindex]):focus-visible {
+      outline: 2px solid var(--focus-color);
+      outline-offset: -2px;
+    }
+
+    :where(tbody tr:nth-child(odd)) { background: var(--table-row-background); }
+    :where(tbody tr:nth-child(even)) { background: var(--table-row-alt-background); }
+    :where([role="alert"]) { color: var(--error-color); }
+
+    :where(progress) {
+      color: var(--progress-value-background);
+      background: var(--progress-track-background);
+      accent-color: var(--palette-primary);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      :where(dialog[open]) { animation: theme-dialog-enter var(--motion-fast) ease-out; }
+    }
+
+    @keyframes theme-dialog-enter {
+      from { transform: translateY(0.4rem); }
+    }
+
+    @media (forced-colors: active) {
+      :where(.coloredlike, .coloredshell, .coloredinner) {
+        color: CanvasText;
+        background: Canvas;
+        border-color: CanvasText;
+        forced-color-adjust: auto;
+      }
+    }
 
-:where(:root:not([data-fray-theme]), [data-fray-theme="java"]) [data-fray-component="tab-line"] > [role="tab"][aria-selected="true"] {
-  border-bottom-color: var(--fray-tab-active-background);
+    :where(button, .buttonlike, [role="tab"], [role="radio"], [role="checkbox"]):active {
+      border-style: inset;
+    }
+  }
 }

package/themes/light.css

@@ -1,4 +1,7 @@
-:where(:root), [data-fray-theme="light"] {
+@charset "utf-8";
+
+@layer theme {
+  :where(:root:not([data-theme]), [data-theme="light"]) {
   color-scheme: light;
   --ui-text-color: #18212b;
   --ui-input-bg: #ffffff;
@@ -36,4 +39,48 @@
   --error-color: #b00020;
   --cbx-o-border: 1px solid #647180;
   --cbx-border-radius: 0.2rem;
+  }
+
+  @scope (:root:not([data-theme]), [data-theme="light"]) to ([data-theme], [data-theme-exclude]) {
+
+    :where(button) {
+      min-height: 2rem;
+      padding: 0.25rem 0.5rem;
+      color: var(--button-color);
+      background: var(--button-background);
+      border: var(--button-border);
+      border-radius: var(--ui-border-radius, 0.375rem);
+      box-shadow: var(--button-shadow);
+      font: inherit;
+      font-size: var(--ui-font-size, inherit);
+    }
+
+    :where(button):hover:not(:disabled) {
+      background: var(--button-background-hover);
+    }
+
+    :where(button):disabled {
+      color: var(--ui-input-text-color-disabled);
+      background: var(--button-background-disabled);
+      border: var(--button-border-disabled);
+    }
+
+    :where(input, select, textarea) {
+      min-height: 2rem;
+      padding: 0.25rem 0.5rem;
+      color: var(--ui-text-color);
+      background: var(--ui-input-bg);
+      border: var(--ui-input-border);
+      border-radius: var(--ui-border-radius, 0.375rem);
+      box-shadow: var(--input-shadow);
+      box-sizing: border-box;
+      font: inherit;
+      font-size: var(--ui-font-size, inherit);
+    }
+
+    :where(button, input, select, textarea):focus-visible {
+      outline: 2px solid var(--ui-accent-color);
+      outline-offset: 1px;
+    }
+  }
 }