lutra 0.1.68 → 0.1.69

package/dist/css/2-init.css

@@ -0,0 +1,503 @@
+:root {
+    /* Spacing Scale */
+    --base-size: 16px;
+
+    --space-base: 1em;
+    --space-025: calc(var(--space-base) * 0.25);
+    --space-050: calc(var(--space-base) * 0.5);
+    --space-075: calc(var(--space-base) * 0.75);
+    --space-100: calc(var(--space-base) * 1);
+    --space-125: calc(var(--space-base) * 1.25);
+    --space-150: calc(var(--space-base) * 1.5);
+    --space-175: calc(var(--space-base) * 1.75);
+    --space-200: calc(var(--space-base) * 2);
+    --space-225: calc(var(--space-base) * 2.25);
+    --space-250: calc(var(--space-base) * 2.5);
+    --space-300: calc(var(--space-base) * 3);
+    --space-350: calc(var(--space-base) * 3.5);
+    --space-400: calc(var(--space-base) * 4);
+    --space-450: calc(var(--space-base) * 4.5);
+    --space-500: calc(var(--space-base) * 5);
+    --space-550: calc(var(--space-base) * 5.5);
+    --space-600: calc(var(--space-base) * 6);
+    --space-700: calc(var(--space-base) * 7);
+    --space-800: calc(var(--space-base) * 8);
+    --space-900: calc(var(--space-base) * 9);
+    --space-1000: calc(var(--space-base) * 10);
+
+    --space-xxs: var(--space-025);
+    --space-xs: var(--space-050);
+    --space-sm: var(--space-075);
+    --space-md: var(--space-100);
+    --space-lg: var(--space-150);
+    --space-xl: var(--space-200);
+    --space-xxl: var(--space-300);
+    --space-xxxl: var(--space-400);
+    --space-xxxxl: var(--space-500);
+
+    /* Fonts */
+    --font-family: "sans-serif";
+    --font-family-heading: "sans-serif";
+    --font-family-mono: "monospace";
+    --font-scale: 1.175;
+    --font-size-base: 1em;
+
+    /* font size */
+    --font-size-xs: calc(var(--font-size-base) * pow(var(--font-scale), -2));
+    --font-size-sm: calc(var(--font-size-base) * pow(var(--font-scale), -1));
+    --font-size-p: var(--font-size-base);
+    --font-size-h6: var(--font-size-base);
+    --font-size-h5: calc(var(--font-size-base) * pow(var(--font-scale), 1));
+    --font-size-h4: calc(var(--font-size-base) * pow(var(--font-scale), 2));
+    --font-size-h3: calc(var(--font-size-base) * pow(var(--font-scale), 3));
+    --font-size-h2: calc(var(--font-size-base) * pow(var(--font-scale), 4));
+    --font-size-h1: calc(var(--font-size-base) * pow(var(--font-scale), 5));
+    --font-size-hero: calc(var(--font-size-base) * pow(var(--font-scale), 6));
+    --font-size-jumbo: calc(var(--font-size-base) * pow(var(--font-scale), 7));
+
+    /* font weight */
+    --font-weight-thin: 300;
+    --font-weight-light: 400;
+    --font-weight-normal: 500;
+    --font-weight-medium: 600;
+    --font-weight-semibold: 700;
+    --font-weight-bold: 800;
+    --font-weight-black: 900;
+
+    --font-weight-p: 400;
+    --font-weight-h6: 500;
+    --font-weight-h5: 600;
+    --font-weight-h4: 600;
+    --font-weight-h3: 600;
+    --font-weight-h2: 700;
+    --font-weight-h1: 800;
+    --font-weight-hero: 800;
+
+    /* line height */
+    --font-line-height: 1.5;
+    --font-line-height-tight: 1.2;
+    --font-line-height-heading: 1.5;
+    --font-line-height-heading-tight: 1.2;
+    --font-line-height-mono: 1.5;
+
+    /* text color */
+    --text-color-p: #333333;
+    --text-color-p-subtle: #666666;
+    --text-color-p-subtler: #999999;
+    --text-color-p-subtlest: #cccccc;
+
+    --text-color-heading: #333333;
+    --text-color-h6: var(--text-color-heading);
+    --text-color-h5: var(--text-color-heading);
+    --text-color-h4: var(--text-color-heading);
+    --text-color-h3: var(--text-color-heading);
+    --text-color-h2: var(--text-color-heading);
+    --text-color-h1: var(--text-color-heading);
+    --text-color-hero: var(--text-color-heading);
+
+    /* links */
+    --link-text-decoration: none;
+    --link-text-decoration-hover: underline;
+
+    --link-color: #2563eb;
+    --link-color-visited: var(--link-color);
+    --link-color-active: var(--link-color);
+    --link-color-hover: #1d4ed8;
+    --link-color-disabled: #cccccc;
+    --link-color-loading: #7c3aed;
+
+    --link-icon-size: 24px;
+    --link-icon-order: 1;
+
+    /* Borders */
+    --border-radius-scale: 1.2;
+    --border-radius-base: calc(var(--border-radius-scale) * 0.25em);
+    --border-radius-sm: calc(var(--border-radius-scale) * 0.5em);
+    --border-radius-lg: calc(var(--border-radius-scale) * 2em);
+    --border-size-thin: 1px;
+    --border-size-thick: 2px;
+    --border-style: solid;
+
+    --border-color: #d1d5db;
+    --border-color-subtle: #e2e8f0;
+    --border-color-strong: #111111;
+    --border-color-stronger: #111111;
+
+    --border-color-active: #2563eb;
+    --border-color-inactive: #d1d5db;
+    --border-color-disabled: #d1d5db;
+    --border-color-focus: #2563eb;
+    --border-color-invalid: #dc2626;
+    --border-color-valid: #16a34a;
+    --border-color-success: #16a34a;
+    --border-color-danger: #dc2626;
+    --border-color-warn: #ca8a04;
+    --border-color-info: #2563eb;
+    --border-color-selected: #2563eb;
+    --border-color-interest: #7c3aed;
+    --border-color-loading: #7c3aed;
+
+    /* Forms */
+    --form-background: #ffffff;
+    --form-background-actions: #ffffff;
+    --form-border-radius: var(--border-radius-base);
+    --form-border-color: var(--border-color);
+    --form-border-size: var(--border-size-thin);
+    --form-border-style: var(--border-style);
+
+    --form-field-gap: var(--space-xl);
+    --form-label-gap: var(--space-xs);
+    --form-section-gap: var(--space-xl);
+    --form-title-gap: var(--space-md);
+    --form-title-padding-block-end: var(--space-xs);
+    --form-field-inside-gap: var(--space-xs);
+    --form-padding-block: var(--space-lg);
+    --form-padding-inline: var(--space-xl);
+
+    /* Fields */
+    --field-background: #ffffff;
+
+    --field-background-active: #2563eb;
+    --field-background-inactive: #f3f4f6;
+    --field-background-disabled: #f3f4f6;
+    --field-background-focus: #2563eb;
+    --field-background-invalid: #fef2f2;
+    --field-background-valid: #dcfce7;
+    --field-background-success: #dcfce7;
+    --field-background-danger: #fef2f2;
+    --field-background-warn: #fefce8;
+    --field-background-info: #eff6ff;
+    --field-background-selected: #eff6ff;
+    --field-background-interest: #f0f9ff;
+    --field-background-loading: #f0f9ff;
+
+    --field-border-color: var(--border-color);
+    --field-border-color-active: #2563eb;
+    --field-border-color-inactive: #d1d5db;
+    --field-border-color-disabled: #d1d5db;
+    --field-border-color-focus: #2563eb;
+    --field-border-color-invalid: #dc2626;
+    --field-border-color-valid: #16a34a;
+    --field-border-color-success: #16a34a;
+    --field-border-color-danger: #dc2626;
+    --field-border-color-warn: #ca8a04;
+    --field-border-color-info: #2563eb;
+    --field-border-color-selected: #2563eb;
+    --field-border-color-interest: #7c3aed;
+    --field-border-color-loading: #7c3aed;
+
+    --field-border-size: var(--border-size-thin);
+    --field-border-style: var(--border-style);
+    --field-border-radius: var(--border-radius-base);
+
+    --field-color: var(--text-color-p);
+    --field-color-active: #2563eb;
+    --field-color-inactive: #666666;
+    --field-color-disabled: #cccccc;
+    --field-color-focus: #2563eb;
+    --field-color-invalid: #dc2626;
+    --field-color-valid: #16a34a;
+    --field-color-success: #16a34a;
+    --field-color-danger: #dc2626;
+    --field-color-warn: #ca8a04;
+    --field-color-info: #2563eb;
+    --field-color-selected: #2563eb;
+    --field-color-interest: #7c3aed;
+    --field-color-loading: #7c3aed;
+
+    --field-label-color: #111111;
+    --field-label-font-size: 1em;
+    --field-label-font-weight: 600;
+
+    --field-placeholder-color: #999999;
+    --field-padding-inline: 8px;
+    --field-padding-block: 8px;
+
+    --field-icon-size: 24px;
+    --field-icon-order: 1;
+
+    /* Shorthand compound: field */
+    --field-padding: var(--field-padding-block) var(--field-padding-inline);
+    --field-border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
+
+    /* Checkbox and Radio */
+    --checkbox-size: 18px;
+    --checkbox-border-radius: 4px;
+    --checkbox-background: #ffffff;
+    --checkbox-background-checked: #2563eb;
+    --checkbox-border-color: #d1d5db;
+    --checkbox-border-color-checked: #2563eb;
+    --checkbox-indicator-color: #ffffff;
+
+    /* Button Component */
+    --button-base-color: #ffffff;
+    --button-base-color-hover: #ffffff;
+
+    /* primary */
+    --button-submit-color: #ffffff;
+    --button-submit-color-hover: #ffffff;
+    --button-submit-color-disabled: #cccccc;
+    --button-submit-color-focus: #2563eb;
+    --button-submit-color-loading: #7c3aed;
+
+    --button-submit-background: #2563eb;
+    --button-submit-background-hover: #1d4ed8;
+    --button-submit-background-disabled: #f3f4f6;
+    --button-submit-background-focus: #2563eb;
+    --button-submit-background-loading: #f0f9ff;
+
+    --button-submit-border-color: #2563eb;
+    --button-submit-border-color-hover: #1d4ed8;
+    --button-submit-border-color-disabled: #d1d5db;
+    --button-submit-border-color-focus: #2563eb;
+    --button-submit-border-color-loading: #7c3aed;
+
+    /* action */
+    --button-action-color: #ffffff;
+    --button-action-color-hover: #ffffff;
+    --button-action-color-disabled: #ffffff;
+    --button-action-color-focus: #ffffff;
+    --button-action-color-loading: #ffffff;
+
+    --button-action-background: #111111;
+    --button-action-background-hover: #111111;
+    --button-action-background-disabled: #f3f4f6;
+    --button-action-background-focus: #2563eb;
+    --button-action-background-loading: #f0f9ff;
+
+    --button-action-border-color: #111111;
+    --button-action-border-color-hover: #111111;
+    --button-action-border-color-disabled: #111111;
+    --button-action-border-color-focus: #2563eb;
+    --button-action-border-color-loading: #7c3aed;
+
+    /* danger */
+    --button-danger-color: #dc2626;
+    --button-danger-color-hover: #dc2626;
+    --button-danger-color-disabled: #dc2626;
+    --button-danger-color-focus: #dc2626;
+    --button-danger-color-loading: #dc2626;
+
+    --button-danger-background: #dc2626;
+    --button-danger-background-hover: #dc2626;
+    --button-danger-background-disabled: #f3f4f6;
+    --button-danger-background-focus: #2563eb;
+    --button-danger-background-loading: #f0f9ff;
+
+    --button-danger-border-color: #dc2626;
+    --button-danger-border-color-hover: #dc2626;
+    --button-danger-border-color-disabled: #d1d5db;
+    --button-danger-border-color-focus: #2563eb;
+    --button-danger-border-color-loading: #7c3aed;
+
+    /* success */
+    --button-success-color: #16a34a;
+    --button-success-color-hover: #16a34a;
+    --button-success-color-disabled: #16a34a;
+    --button-success-color-focus: #16a34a;
+    --button-success-color-loading: #16a34a;
+
+    --button-success-background: #16a34a;
+    --button-success-background-hover: #16a34a;
+    --button-success-background-disabled: #f3f4f6;
+    --button-success-background-focus: #2563eb;
+    --button-success-background-loading: #f0f9ff;
+
+    --button-success-border-color: #16a34a;
+    --button-success-border-color-hover: #16a34a;
+    --button-success-border-color-disabled: #d1d5db;
+    --button-success-border-color-focus: #2563eb;
+    --button-success-border-color-loading: #7c3aed;
+
+    --button-border-size: var(--border-size-thin);
+    --button-border-style: var(--border-style);
+    --button-border-radius: var(--border-radius-base);
+    --button-border-color: var(--border-color);
+
+    --button-padding-inline: 16px;
+    --button-padding-block: 8px;
+
+    --button-font-weight: 500;
+
+    --button-icon-size: 1em;
+    --button-icon-order: 1;
+
+    /* Shorthand compound: button */
+    --button-padding: var(--button-padding-block) var(--button-padding-inline);
+    --button-border: var(--button-border-size) var(--button-border-style) var(--button-submit-border-color);
+
+    /* Shadows */
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 0.0625rem 0.125rem 0 var(--shadow-color);
+    --shadow-md: 0 0.125rem 0.375rem -0.0625rem var(--shadow-color), 0 0.0625rem 0.1875rem -0.0625rem var(--shadow-color);
+    --shadow-lg: 0 0.375rem 1rem -0.25rem var(--shadow-color), 0 0.125rem 0.375rem -0.125rem var(--shadow-color);
+    --shadow-xl: 0 0.75rem 1.75rem -0.375rem var(--shadow-color), 0 0.25rem 0.75rem -0.25rem var(--shadow-color);
+    --shadow-xxl: 0 1.25rem 3rem -0.5rem var(--shadow-color), 0 0.5rem 1.25rem -0.375rem var(--shadow-color);
+
+    /* Code */
+    --code-background: #f8fafc;
+    --code-color: #1a1a1a;
+    --code-border-color: #d1d5db;
+    --code-border-size: 0;
+    --code-border-style: solid;
+    --code-border-radius: 8px;
+
+    --code-padding-inline: 16px;
+    --code-padding-block: 8px;
+
+    /* Backgrounds */
+    --background-body: #ffffff;
+    --background-main: #ffffff;
+    --background-main-subtle: #f8fafc;
+
+    --background-active: #2563eb;
+    --background-inactive: #f3f4f6;
+    --background-disabled: #f3f4f6;
+    --background-focus: #2563eb;
+    --background-invalid: #fef2f2;
+    --background-valid: #dcfce7;
+    --background-success: #dcfce7;
+    --background-danger: #fef2f2;
+    --background-warn: #fefce8;
+    --background-info: #eff6ff;
+    --background-selected: #eff6ff;
+    --background-interest: #f0f9ff;
+    --background-loading: #f0f9ff;
+
+    /* Status Colors */
+    --status-default-background: #111111;
+    --status-default-color: #111111;
+    --status-ok-background: #16a34a;
+    --status-ok-color: #16a34a;
+    --status-alert-background: #dc2626;
+    --status-alert-color: #dc2626;
+    --status-warn-background: #ca8a04;
+    --status-warn-color: #ca8a04;
+    --status-info-background: #2563eb;
+    --status-info-color: #2563eb;
+    --status-task-background: #7c3aed;
+    --status-task-color: #7c3aed;
+
+    /* Focus */
+    --focus-ring-size: 2px;
+    --focus-ring-color: #2563eb;
+    --focus-ring-color-invalid: #dc2626;
+    --focus-ring-offset: 0px;
+    --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
+
+    /* Transitions */
+    --transition-duration-fast: 0.15s;
+    --transition-duration-base: 0.3s;
+    --transition-duration-slow: 0.5s;
+    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Tooltips */
+    --tooltip-background: var(--surface-background);
+    --tooltip-color: var(--text-color-p);
+    --tooltip-border: var(--surface-border);
+    --tooltip-border-radius: var(--surface-border-radius);
+    --tooltip-shadow: var(--surface-shadow);
+
+    /* Toast */
+    --toast-background: #ffffff;
+    --toast-border: 1px solid #d1d5db;
+    --toast-border-radius: 8px;
+    --toast-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    --toast-padding-inline: 1rem;
+    --toast-padding-block: 0.75rem;
+    --toast-gap: 0.75rem;
+    --toast-min-width: 20rem;
+    --toast-max-width: 28rem;
+    --toast-title-color: #1a1a1a;
+    --toast-title-font-weight: 600;
+    --toast-text-color: #666666;
+    --toast-icon-size: 1.25rem;
+    --toast-offset: 1rem;
+
+    /* Menu */
+    --menu-background-color: #ffffff;
+    --menu-background-color-hover: #dde8f2;
+    --menu-text-color: #1a1a1a;
+    --menu-text-color-subtle: #666666;
+    --menu-border-color: #cccccc;
+    --menu-border-size: 1px;
+    --menu-border-style: solid;
+    --menu-border-radius: 8px;
+
+    /* Table */
+    --table-border-color: #d1d5db;
+    --table-border-size: 1px;
+    --table-border-style: solid;
+    --table-border-radius: 8px;
+
+    --table-cell-padding-inline: 12px;
+    --table-cell-padding-block: 8px;
+
+    --table-header-background: #f8fafc;
+    --table-header-color: #1a1a1a;
+    --table-header-font-weight: 600;
+
+    --table-row-background: transparent;
+    --table-row-background-even: #f8fafc;
+    --table-row-background-hover: #f1f5f9;
+
+    --table-cell-color: #1a1a1a;
+
+    /* Shorthand compound: table */
+    --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
+    --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+
+    /* Modal */
+    --modal-background: #ffffff;
+    --modal-border-color: #d1d5db;
+    --modal-border-size: 1px;
+    --modal-border-style: solid;
+    --modal-border-radius: 8px;
+    --modal-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+    --modal-padding-inline: 24px;
+    --modal-padding-block: 24px;
+    --modal-width: fit-content;
+    --modal-min-width: auto;
+    --modal-max-width: 40rem;
+    --modal-max-height: 80svh;
+    --modal-gap: 0px;
+
+    --modal-actions-background: #f8fafc;
+    --modal-actions-border-color: #d1d5db;
+    --modal-actions-padding-inline: 16px;
+    --modal-actions-padding-block: 16px;
+
+    /* Shorthand compound: modal */
+    --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
+    --modal-padding: var(--modal-padding-block) var(--modal-padding-inline);
+    --modal-actions-padding: var(--modal-actions-padding-block) var(--modal-actions-padding-inline);
+
+    /* Shared Surface System */
+    --surface-background: #ffffff;
+    --surface-border: 1px solid #d1d5db;
+    --surface-border-radius: 8px;
+    --surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+    /* Popover Component */
+    --popover-background: #ffffff;
+    --popover-border: 1px solid #d1d5db;
+    --popover-border-radius: 8px;
+    --popover-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    --popover-width: max-content;
+    --popover-max-width: calc(100vw - 2rem);
+    --popover-max-height: calc(100vh - 2rem);
+
+    /* Overlay System */
+    --overlay-z-index: 1000;
+    --overlay-gap: 0.75rem;
+    --overlay-offset: 1rem;
+
+    /* Scrim/Backdrop */
+    --scrim-background: rgba(0, 0, 0, 0.5);
+    --scrim-backdrop-filter: blur(2px);
+
+    /* Misc */
+    --mix-target: light-dark(black, white);
+}

package/dist/css/{2-base.css → 3-base.css}

@@ -1,130 +1,6 @@
 /**
  * Base DOM setup
- * Initializes shorthand variables and foundational sizing
  */
-:root {
-    /* Base size for all sizing */
-    --base-size: 16px;
-
-    /* Spacing scale */
-    --space-base: 1em;
-    --space-025: calc(var(--space-base) * 0.25);
-    --space-050: calc(var(--space-base) * 0.5);
-    --space-075: calc(var(--space-base) * 0.75);
-    --space-100: calc(var(--space-base) * 1);
-    --space-125: calc(var(--space-base) * 1.25);
-    --space-150: calc(var(--space-base) * 1.5);
-    --space-175: calc(var(--space-base) * 1.75);
-    --space-200: calc(var(--space-base) * 2);
-    --space-225: calc(var(--space-base) * 2.25);
-    --space-250: calc(var(--space-base) * 2.5);
-    --space-300: calc(var(--space-base) * 3);
-    --space-350: calc(var(--space-base) * 3.5);
-    --space-400: calc(var(--space-base) * 4);
-    --space-450: calc(var(--space-base) * 4.5);
-    --space-500: calc(var(--space-base) * 5);
-    --space-550: calc(var(--space-base) * 5.5);
-    --space-600: calc(var(--space-base) * 6);
-    --space-700: calc(var(--space-base) * 7);
-    --space-800: calc(var(--space-base) * 8);
-    --space-900: calc(var(--space-base) * 9);
-    --space-1000: calc(var(--space-base) * 10);
-
-    --space-xxs: var(--space-025);
-    --space-xs: var(--space-050);
-    --space-sm: var(--space-075);
-    --space-md: var(--space-100);
-    --space-lg: var(--space-150);
-    --space-xl: var(--space-200);
-    --space-xxl: var(--space-300);
-    --space-xxxl: var(--space-400);
-
-    --font-scale: 1.175;
-    --font-size-base: 1em;
-
-    --font-size-xs: calc(var(--font-size-base) * pow(var(--font-scale), -2));
-    --font-size-sm: calc(var(--font-size-base) * pow(var(--font-scale), -1));
-    --font-size-p: var(--font-size-base);
-    --font-size-h6: var(--font-size-base);
-    --font-size-h5: calc(var(--font-size-base) * pow(var(--font-scale), 1));
-    --font-size-h4: calc(var(--font-size-base) * pow(var(--font-scale), 2));
-    --font-size-h3: calc(var(--font-size-base) * pow(var(--font-scale), 3));
-    --font-size-h2: calc(var(--font-size-base) * pow(var(--font-scale), 4));
-    --font-size-h1: calc(var(--font-size-base) * pow(var(--font-scale), 5));
-    --font-size-hero: calc(var(--font-size-base) * pow(var(--font-scale), 6));
-    --font-size-jumbo: calc(var(--font-size-base) * pow(var(--font-scale), 7));
-
-    --text-color-h1: var(--text-color-heading);
-    --text-color-h2: var(--text-color-heading);
-    --text-color-h3: var(--text-color-heading);
-    --text-color-h4: var(--text-color-heading);
-    --text-color-h5: var(--text-color-heading);
-    --text-color-h6: var(--text-color-heading);
-    --field-color: var(--text-color-p);
-
-    --border-radius-scale: 1.2;
-    --border-size-thin: 1px;
-    --border-size-thick: 2px;
-
-    --border-radius-base: calc(var(--border-radius-scale) * 0.25em);
-    --border-radius-sm: calc(var(--border-radius-scale) * 0.5em);
-    --border-radius-lg: calc(var(--border-radius-scale) * 2em);
-
-    --form-border-radius: var(--border-radius-base);
-    --form-border-size: var(--border-size-thin);
-    --form-border-style: var(--border-style);
-    --form-border-color: var(--border-color);
-
-    --field-border-radius: var(--border-radius-base);
-    --field-border-size: var(--border-size-thin);
-    --field-border-style: var(--border-style);
-    --field-border-color: var(--border-color);
-
-    --button-border-radius: var(--border-radius-base);
-    --button-border-size: var(--border-size-thin);
-    --button-border-style: var(--border-style);
-    --button-border-color: var(--border-color);
-
-    --link-color-visited: var(--link-color);
-    --link-color-active: var(--link-color);
-
-    /* Shorthand compound variables */
-    --field-padding: var(--field-padding-block) var(--field-padding-inline);
-    --field-border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-    
-    --button-padding: var(--button-padding-block) var(--button-padding-inline);
-    --button-border: var(--button-border-size) var(--button-border-style) var(--button-submit-border-color);
-    --button-icon-size: 1em;
-    
-    /* Focus ring compound */
-    --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);
-
-    /* Shadows */
-    --shadow-base: var(--shadow-base);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
-
-    --tooltip-background: var(--surface-background);
-    --tooltip-color: var(--text-color-p);
-    --tooltip-border: var(--surface-border);
-    --tooltip-border-radius: var(--surface-border-radius);
-    --tooltip-shadow: var(--surface-shadow);
-
-    /* Table compound variables */
-    --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
-    --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
-
-    /* Modal compound variables */
-    --modal-border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
-    --modal-padding: var(--modal-padding-block) var(--modal-padding-inline);
-    --modal-actions-padding: var(--modal-actions-padding-block) var(--modal-actions-padding-inline);
-
-    --mix-target: light-dark(black, white);
-}
-
 body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
@@ -141,16 +17,53 @@ body {
     width: 100%;
     min-height: 0;
     scrollbar-gutter: stable;
+	-webkit-text-size-adjust: 100%;
+	-ms-overflow-style: -ms-autohiding-scrollbar;
+	box-sizing: border-box;
+	border-collapse: collapse;
+}
+
+html {
+    color-scheme: light dark;
+    &:not(.light) {
+        @media (prefers-color-scheme: dark) {
+            color-scheme: only dark;
+        }
+    }
+}
+
+html.light {
+    color-scheme: only light;
+}
+
+html.dark {
+    color-scheme: only dark;
+}
+
+html,
+body {
+	height: 100%;
+	width: 100%;
 }
 
-body * {
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color) transparent;
 }
 
-html {
-    color-scheme: light dark;
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
 }
 
 input, textarea, select, button {
@@ -229,12 +142,10 @@ input, textarea, select, .button, ::file-selector-button, .Field {
         background-image var(--transition-duration-fast) var(--transition-timing-function),
         background-color var(--transition-duration-fast) var(--transition-timing-function),
         color var(--transition-duration-fast) var(--transition-timing-function),
-        box-shadow var(--transition-duration-fast) var(--transition-timing-function),
-        outline var(--transition-duration-fast) var(--transition-timing-function),
-        outline-offset var(--transition-duration-fast) var(--transition-timing-function);
+        box-shadow var(--transition-duration-fast) var(--transition-timing-function);
 }
 
-input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
+input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
     outline: var(--focus-ring-size) solid var(--focus-ring-color);
     outline-offset: var(--focus-ring-offset);
     border-color: var(--focus-ring-color);