lutra 0.1.0 → 0.1.4

package/dist/css/2-base.css

@@ -1,16 +1,118 @@
 /**
  * Base DOM setup
+ * Initializes shorthand variables and foundational sizing
  */
 :root {
-    --space-xxxs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio));
-    --space-xxs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio));
-    --space-xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio));
-    --space-s: calc(var(--space-base) / var(--space-ratio));
-    --space-m: var(--space-base);
-    --space-l: calc(var(--space-base) * var(--space-ratio));
-    --space-xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio));
-    --space-xxl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio));
-    --space-xxxl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio));
+    /* 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-xs: var(--space-025);
+    --space-sm: var(--space-050);
+    --space-md: var(--space-100);
+    --space-lg: var(--space-200);
+    --space-xl: var(--space-300);
+
+    --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(--background-body);
+    --tooltip-color: var(--text-color-p);
+    --tooltip-border-color: var(--border-color);
+    --tooltip-border-size: var(--border-size-thin);
+    --tooltip-border-style: var(--border-style);
+    --tooltip-border-radius: var(--border-radius-base);
+    --tooltip-shadow-color: var(--shadow-color);
+
+    --mix-target: light-dark(black, white);
 }
 
 body {
@@ -18,8 +120,11 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overscroll-behavior: none;
-    overscroll-behavior-x: none;
     font-family: var(--font-family);
+    font-size: var(--base-size);
+    line-height: var(--font-line-height);
+    color: var(--text-color-p);
+    background: var(--background-body);
     padding: 0;
     margin: 0;
     min-width: 280px;
@@ -42,168 +147,197 @@ input, textarea, select, button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 input, textarea, select {
-    border-radius: var(--field-radius);
-    border-style: var(--field-border-style);
-    border-width: var(--field-border-size);
-    border-color: var(--field-border-color);
-    color: var(--field-text-color);
-    background-color: var(--field-bg-color);
-    padding: var(--field-padding);
+    border-radius: var(--field-border-radius);
+    border: var(--field-border);
+    color: var(--field-color);
+    background: var(--field-background);
+    padding-inline: var(--field-padding-inline);
+    padding-block: var(--field-padding-block);
 }
 
-.button,
-::file-selector-button {
-    cursor: pointer;
-    border-radius: var(--button-radius);
-    padding: var(--button-padding);
-    color: var(--button-text-color);
-    background-color: var(--button-bg-color);
-    border-width: var(--button-border-size);
-    border-style: var(--button-border-style);
-    border-color: var(--button-border-color);
+input, textarea, select, .button, ::file-selector-button, .Field {
+    transition:
+        border-color var(--transition-duration-fast) var(--transition-timing-function),
+        border-style var(--transition-duration-fast) var(--transition-timing-function),
+        border-radius var(--transition-duration-fast) var(--transition-timing-function),
+        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);
 }
 
-.button:hover,
-::file-selector-button:hover {
-    color: var(--button-hover-text-color);
-    background-color: var(--button-hover-bg-color);
-    border-color: var(--button-hover-border-color);
+input:focus-visible, textarea:focus-visible, select:focus-visible {
+    outline: var(--focus-ring-size) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    border-color: var(--focus-ring-color);
 }
 
-.button:active,
-::file-selector-button:active {
-    color: var(--button-active-text-color);
-    background-color: var(--button-active-bg-color);
-    border-color: var(--button-active-border-color);
+input::placeholder, textarea::placeholder, select::placeholder {
+    color: var(--field-placeholder-color);
 }
 
-.button.secondary {
-    color: var(--button-secondary-text-color);
-    background-color: var(--button-secondary-bg-color);
-    border-color: var(--button-secondary-border-color);
+input:disabled, textarea:disabled, select:disabled {
+    color: var(--field-color-disabled);
+    background: var(--field-background-disabled);
+    border: var(--field-border-disabled);
+    cursor: not-allowed;
 }
 
-.button.secondary:hover {
-    color: var(--button-secondary-hover-text-color);
-    background-color: var(--button-secondary-hover-bg-color);
-    border-color: var(--button-secondary-hover-bg-color);
+.button,
+::file-selector-button {
+    cursor: pointer;
+    border-radius: var(--button-border-radius);
+    padding-inline: var(--button-padding-inline);
+    padding-block: var(--button-padding-block);
+    color: var(--button-submit-color);
+    background: var(--button-submit-background);
+    border: var(--button-border);
+    font-weight: var(--button-font-weight);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-050);
+    --button-base-color: var(--button-submit-base-color);
+    --button-base-color-hover: var(--button-submit-base-color-hover);
 }
 
-.button.secondary:active {
-    color: var(--button-secondary-active-text-color);
-    background-color: var(--button-secondary-active-bg-color);
-    border-color: var(--button-secondary-active-bg-color);
+.button.lg {
+    padding-inline: calc(var(--button-padding-inline) * 1.5);
+    padding-block: calc(var(--button-padding-block) * 1.5);
 }
 
-.button.warning {
-    color: var(--button-warning-text-color);
-    background-color: var(--button-warning-bg-color);
-    border-color: var(--button-warning-border-color);
+.button.xl {
+    padding-inline: calc(var(--button-padding-inline) * 2);
+    padding-block: calc(var(--button-padding-block) * 2);
 }
 
-.button.warning:hover {
-    color: var(--button-warning-hover-text-color);
-    background-color: var(--button-warning-hover-bg-color);
-    border-color: var(--button-warning-hover-border-color);
+.button.sm {
+    padding-inline: calc(var(--button-padding-inline) * 0.5);
+    padding-block: calc(var(--button-padding-block) * 0.5);
 }
 
-.button.warning:active {
-    color: var(--button-warning-active-text-color);
-    background-color: var(--button-warning-active-bg-color);
-    border-color: var(--button-warning-active-border-color);
-}
+.button:hover,
+::file-selector-button:hover {
+    color: var(--button-submit-color-hover);
+    background: var(--button-submit-background-hover);
+    border-color: var(--button-submit-border-color-hover);
 
-.button.danger {
-    color: var(--button-danger-text-color);
-    background-color: var(--button-danger-bg-color);
-    border-color: var(--button-danger-border-color);
+    &:focus-visible {
+        outline: var(--focus-ring-size) solid var(--button-base-color-hover);
+        outline-offset: var(--focus-ring-offset);
+    }
 }
 
-.button.danger:hover {
-    color: var(--button-danger-hover-text-color);
-    background-color: var(--button-danger-hover-bg-color);
-    border-color: var(--button-danger-hover-border-color);
+.button:disabled,
+::file-selector-button:disabled {
+    color: var(--button-color-disabled);
+    background: var(--button-background-disabled);
+    border-color: var(--button-border-color-disabled);
+    cursor: not-allowed;
 }
 
-.button.danger:active {
-    color: var(--button-danger-active-text-color);
-    background-color: var(--button-danger-active-bg-color);
-    border-color: var(--button-danger-active-border-color);
+.button:focus-visible {
+    outline: var(--focus-ring-size) solid var(--button-base-color);
+    outline-offset: var(--focus-ring-offset);
+    border-color: var(--button-base-color);
 }
 
-.button.tertiary {
-    color: var(--button-tertiary-text-color);
-    background-color: var(--button-tertiary-bg-color);
-    border-color: var(--button-tertiary-border-color);
+.button.outline {
+    border-color: var(--button-submit-border-color);
+    color: var(--button-submit-color-outline);
 }
 
-.button.tertiary:hover {
-    color: var(--button-tertiary-hover-text-color);
-    background-color: var(--button-tertiary-hover-bg-color);
-    border-color: var(--button-tertiary-hover-border-color);
+.button.outline:hover {
+    border-color: var(--button-submit-border-color-hover);
+    color: var(--button-submit-color-outline-hover);
 }
 
-.button.tertiary:active {
-    color: var(--button-tertiary-active-text-color);
-    background-color: var(--button-tertiary-active-bg-color);
-    border-color: var(--button-tertiary-active-border-color);
+.button.action {
+    background: var(--button-action-background);
+    border-color: var(--button-action-border-color);
+    color: var(--button-action-color);
+    --button-base-color: var(--button-action-base-color);
+    --button-base-color-hover: var(--button-action-base-color-hover);
 }
 
-input::placeholder, textarea::placeholder, select::placeholder {
-    color: var(--field-placeholder-color);
+.button.action:hover {
+    background: var(--button-action-background-hover);
+    border-color: var(--button-action-border-color-hover);
+    color: var(--button-action-color-hover);
+    --button-base-color: var(--button-action-base-color-hover);
+    --button-base-color-hover: var(--button-action-base-color-hover);
 }
 
-*:focus-visible {
-    transition: outline 0.1s;
-    outline: var(--focus-size) solid var(--focus-color);
-    outline-offset: 0;
-    -webkit-outline-offset: 0;
-    transform: translateZ(0);
+.button.success {
+    background: var(--button-success-background);
+    border-color: var(--button-success-border-color);
+    color: var(--button-success-color);
+    --button-base-color: var(--button-success-base-color);
+    --button-base-color-hover: var(--button-success-base-color-hover);
 }
 
-a {
-    color: var(--text-color-link);
-    text-decoration: var(--text-link-decoration);
+.button.success:hover {
+    background: var(--button-success-background-hover);
+    border-color: var(--button-success-border-color-hover);
+    color: var(--button-success-color-hover);
+    --button-base-color: var(--button-success-base-color-hover);
+    --button-base-color-hover: var(--button-success-base-color-hover);
 }
 
-a:hover {
-    color: var(--text-color-link-hover);
-    text-decoration: var(--text-link-decoration-hover);
+.button.danger {
+    background: var(--button-danger-background);
+    border-color: var(--button-danger-border-color);
+    color: var(--button-danger-color);
+    --button-base-color: var(--button-danger-base-color);
+    --button-base-color-hover: var(--button-danger-base-color-hover);
 }
 
-a:active {
-    color: var(--text-color-link-active);
+.button.danger:hover {
+    background: var(--button-danger-background-hover);
+    border-color: var(--button-danger-border-color-hover);
+    color: var(--button-danger-color-hover);
+    --button-base-color: var(--button-danger-base-color-hover);
+    --button-base-color-hover: var(--button-danger-base-color-hover);
 }
 
-a:visited {
-    color: var(--text-color-link-visited);
+.button.ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--button-base-color);
 }
 
-pre, code {
-    font-family: var(--font-family-mono);
+.button.ghost:hover {
+    background: transparent;
+    border-color: transparent;
+    color: var(--button-base-color-hover);
 }
 
-pre {
-    background-color: var(--code-bg-color);
-    color: var(--code-text-color);
-    border: var(--code-border-size) solid var(--code-border-color);
-    padding: var(--space-m);
-    border-radius: var(--border-radius);
-    overflow-x: auto;
+.button.outline {
+    background: transparent;
+    color: var(--button-base-color);
+    border-color: var(--button-base-color);
 }
 
-code {
-    background-color: var(--code-bg-color);
-    color: var(--code-text-color);
-    padding: var(--space-xxxs) var(--space-xxs);
-    border-radius: var(--border-radius);
+.button.outline:hover {
+    background: transparent;
+    border-color: var(--button-base-color-hover);
+    color: var(--button-base-color-hover);
 }
 
-pre code {
-    padding: 0;
-    background-color: transparent;
-    border: none;
-}
+.button .icon {
+    width: var(--button-icon-size);
+    height: var(--button-icon-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    order: var(--button-icon-order);
+}

package/dist/css/3-typo.css

@@ -1,65 +1,106 @@
 /**
- * Base typography setup
+ * Base typography setup using design token system
  */
 
-small {
-    font-size: calc(var(--font-size-base) / var(--font-size-ratio));
-}
-
-p, li, input, textarea, select, button {
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-regular);
+/* Base text elements */
+p, li {
+    font-family: var(--font-family);
+    font-size: var(--font-size-p);
+    font-weight: var(--font-weight-p);
+    line-height: var(--font-line-height);
+    color: var(--text-color-p);
 }
 
-p, li, h6, h5, h4, h3, h2, h1, li, input, textarea, select, button {
-    line-height: var(--line-height);
+small {
+    font-size: var(--font-size-sm);
+    color: var(--text-color-p-subtle);
+    line-height: var(--font-line-height-tight);
 }
 
-p, li {
-    color: var(--text-color);
+small.smaller {
+    font-size: var(--font-size-xs);
 }
 
+/* Form elements inherit base typography */
 input, textarea, select, button {
     font-family: var(--font-family);
-    color: var(--field-text-color);
-    background-color: var(--field-bg-color);
-    border-color: var(--field-border-color);
+    font-size: inherit;
+    line-height: var(--font-line-height);
 }
 
-small {
-    color: var(--text-color-subtle);
-}
-
-h6, h5, h4, h3, h2, h1 {
-    color: var(--text-color-heading);
+/* Heading scale using predefined font sizes */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-heading);
+    line-height: var(--font-line-height-heading);
 }
 
 h6 {
-    font-size: calc(var(--font-size-base) * var(--font-size-ratio));
-    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-h6);
+    font-weight: var(--font-weight-h6);
+    color: var(--text-color-h6);
 }
 
 h5 {
-    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 2));
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-h5);
+    font-weight: var(--font-weight-h5);
+    color: var(--text-color-h5);
 }
 
 h4 {
-    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 3));
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-h4);
+    font-weight: var(--font-weight-h4);
+    color: var(--text-color-h4);
 }
 
 h3 {
-    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 4));
-    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    color: var(--text-color-h3);
 }
 
 h2 {
-    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 5));
-    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-h2);
+    color: var(--text-color-h2);
 }
 
 h1 {
-    font-size: calc(var(--font-size-base) * pow(var(--font-size-ratio), 6));
-    font-weight: var(--font-weight-bold);
-}
+    font-size: var(--font-size-h1);
+    font-weight: var(--font-weight-h1);
+    color: var(--text-color-h1);
+}
+
+label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-color);
+}
+
+/* Link styling */
+a {
+    color: var(--link-color);
+    text-decoration: var(--link-text-decoration);
+}
+
+a:hover {
+    color: var(--link-color-hover);
+    text-decoration: var(--link-text-decoration-hover);
+}
+
+a:active {
+    color: var(--link-color-active);
+}
+
+a:visited {
+    color: var(--link-color-visited);
+}
+
+/* Code and preformatted text */
+pre, code {
+    font-family: var(--font-family-mono);
+}
+
+pre {
+    margin: 0;
+    padding: 0;
+}