@sylwellsoftware/fray 0.7.0 → 1.0.0

package/themes/minimal/theme.css

@@ -1,423 +1,7 @@
 @charset "utf-8";
-
+/* Minimal deliberately keeps base.css's no-gutter, flat island treatment. */
 @layer theme {
-  :where(:root:not([data-theme]), [data-theme="minimal"]) {
-      color-scheme: light;
-      --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      --font-size: 0.875rem;
-      --line-height: 1.25;
-      --control-min-height: 2rem;
-      --space-xs: 0.25rem;
-      --space-sm: 0.5rem;
-      --space-md: 1rem;
-      --space-lg: 1.5rem;
-      --radius-sm: 0.2rem;
-      --radius-md: 0.375rem;
-      --radius-lg: 0.5rem;
-      --motion-fast: 120ms;
-
-      --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: 1px solid var(--palette-neutral-300);
-      --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: 1px solid var(--palette-neutral-500);
-      --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: none;
-      --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: 0 solid transparent;
-      --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: linear-gradient(-45deg, transparent 25%, color-mix(in oklch, var(--palette-light) 35%, transparent) 25% 50%, transparent 50% 75%, color-mix(in oklch, var(--palette-light) 35%, transparent) 75%);
-
-      --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="minimal"]) 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:not([type="checkbox"]), 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:not([type="checkbox"]), 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(.checkboxshell) {
-      color: var(--input-color);
-      background: var(--checkbox-box-background);
-      border: var(--checkbox-box-border);
-      border-radius: var(--radius-sm);
-    }
-
-    :where(input[type="checkbox"]:checked + .checkboxshell) {
-      color: var(--checkbox-symbol-color);
-      background: var(--checkbox-box-background-checked);
-    }
-
-    :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;
-      }
-    }
+  :root {
+    color-scheme: light dark;
   }
 }