lutra 0.0.33 → 0.1.4

package/dist/css/2-base.css

@@ -0,0 +1,343 @@
+/**
+ * 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-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 {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overscroll-behavior: 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;
+    width: 100%;
+    min-height: 0;
+}
+
+body * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    color-scheme: light dark;
+}
+
+input, textarea, select, button {
+    touch-action: manipulation;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+input, textarea, select {
+    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);
+}
+
+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);
+}
+
+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);
+}
+
+input::placeholder, textarea::placeholder, select::placeholder {
+    color: var(--field-placeholder-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,
+::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.lg {
+    padding-inline: calc(var(--button-padding-inline) * 1.5);
+    padding-block: calc(var(--button-padding-block) * 1.5);
+}
+
+.button.xl {
+    padding-inline: calc(var(--button-padding-inline) * 2);
+    padding-block: calc(var(--button-padding-block) * 2);
+}
+
+.button.sm {
+    padding-inline: calc(var(--button-padding-inline) * 0.5);
+    padding-block: calc(var(--button-padding-block) * 0.5);
+}
+
+.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);
+
+    &:focus-visible {
+        outline: var(--focus-ring-size) solid var(--button-base-color-hover);
+        outline-offset: var(--focus-ring-offset);
+    }
+}
+
+.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: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.outline {
+    border-color: var(--button-submit-border-color);
+    color: var(--button-submit-color-outline);
+}
+
+.button.outline:hover {
+    border-color: var(--button-submit-border-color-hover);
+    color: var(--button-submit-color-outline-hover);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.button.ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--button-base-color);
+}
+
+.button.ghost:hover {
+    background: transparent;
+    border-color: transparent;
+    color: var(--button-base-color-hover);
+}
+
+.button.outline {
+    background: transparent;
+    color: var(--button-base-color);
+    border-color: var(--button-base-color);
+}
+
+.button.outline:hover {
+    background: transparent;
+    border-color: var(--button-base-color-hover);
+    color: var(--button-base-color-hover);
+}
+
+.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

@@ -0,0 +1,106 @@
+/**
+ * Base typography setup using design token system
+ */
+
+/* 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);
+}
+
+small {
+    font-size: var(--font-size-sm);
+    color: var(--text-color-p-subtle);
+    line-height: var(--font-line-height-tight);
+}
+
+small.smaller {
+    font-size: var(--font-size-xs);
+}
+
+/* Form elements inherit base typography */
+input, textarea, select, button {
+    font-family: var(--font-family);
+    font-size: inherit;
+    line-height: var(--font-line-height);
+}
+
+/* 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: var(--font-size-h6);
+    font-weight: var(--font-weight-h6);
+    color: var(--text-color-h6);
+}
+
+h5 {
+    font-size: var(--font-size-h5);
+    font-weight: var(--font-weight-h5);
+    color: var(--text-color-h5);
+}
+
+h4 {
+    font-size: var(--font-size-h4);
+    font-weight: var(--font-weight-h4);
+    color: var(--text-color-h4);
+}
+
+h3 {
+    font-size: var(--font-size-h3);
+    font-weight: var(--font-weight-h3);
+    color: var(--text-color-h3);
+}
+
+h2 {
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-h2);
+    color: var(--text-color-h2);
+}
+
+h1 {
+    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;
+}