@knadh/oat 0.2.0 → 0.4.0

package/README.md

@@ -10,6 +10,8 @@ I wrote this to use in my own projects after getting sick of the ridiculous bloa
 
 See live demo and docs at [**oat.ink**](https://oat.ink)
 
+**IMPORTANT:** The lib is currently sub v1 and is likely to have breaking changes until it hits v1.
+
 -------------
 
 <img width="739" height="735" alt="image" src="https://github.com/user-attachments/assets/b0a2f55c-659d-4aab-922c-b13d89eeab36" />

package/css/00-base.css

@@ -3,6 +3,7 @@
 @layer base {
   *, *::before, *::after {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
   }
 
   * {
@@ -45,27 +46,27 @@
   }
 
   h1 {
-    font-size: 2.25rem;
+    font-size: var(--text-1);
     margin: var(--space-10) 0 var(--space-6);
   }
 
   h2 {
-    font-size: 1.875rem;
+    font-size: var(--text-2);
     margin: var(--space-8) 0 var(--space-5);
   }
 
   h3 {
-    font-size: 1.5rem;
+    font-size: var(--text-3);
     margin: var(--space-6) 0 var(--space-4);
   }
 
   h4 {
-    font-size: 1.25rem;
+    font-size: var(--text-4);
     margin: var(--space-5) 0 var(--space-3);
   }
 
   h5 {
-    font-size: 1.125rem;
+    font-size: var(--text-5);
     margin: var(--space-4) 0 var(--space-2);
   }
 
@@ -108,7 +109,7 @@
   code {
     font-family: var(--font-mono);
     font-size: 0.875em;
-    padding: 0.125rem 0.25rem;
+    padding: calc(var(--space-1) / 2) var(--space-1);
     background-color: var(--faint);
     border-radius: var(--radius-small);
   }
@@ -139,7 +140,7 @@
   hr {
     border: none;
     border-top: 1px solid var(--border);
-    margin: var(--space-8) 0;
+    margin: var(--space-2) 0;
   }
 
   ul, ol {
@@ -161,10 +162,14 @@
 
   mark {
     background-color: rgb(from var(--warning) r g b / 0.3);
-    padding: 0.125rem 0.25rem;
+    padding: calc(var(--space-1) / 2) var(--space-1);
     border-radius: var(--radius-small);
   }
 
+  [hidden] {
+    display: none;
+  }
+
   :focus-visible {
     outline: 2px solid var(--ring);
     outline-offset: 2px;

package/css/01-theme.css

@@ -1,27 +1,29 @@
 @layer theme {
   :root {
-    /* Default light theme variables */
-    --background: #fff;
-    --foreground: #09090b;
-    --card: #fff;
-    --card-foreground: #09090b;
-    --primary: #574747;
-    --primary-foreground: #fafafa;
-    --secondary: #f4f4f5;
-    --secondary-foreground: #574747;
-    --muted: #f4f4f5;
-    --muted-foreground: #71717a;
-    --faint: #fafafa;
-    --accent: #f4f4f5;
-    --danger: #df514c;
-    --danger-foreground: #fafafa;
-    --success: #4caf50;
-    --success-foreground: #fafafa;
-    --warning: #ff8c00;
+    color-scheme: light dark;
+
+    --background: light-dark(#fff, #09090b);
+    --foreground: light-dark(#09090b, #fafafa);
+    --card: light-dark(#fff, #18181b);
+    --card-foreground: light-dark(#09090b, #fafafa);
+    --primary: light-dark(#574747, #fafafa);
+    --primary-foreground: light-dark(#fafafa, #18181b);
+    --secondary: light-dark(#f4f4f5, #27272a);
+    --secondary-foreground: light-dark(#574747, #fafafa);
+    --muted: light-dark(#f4f4f5, #27272a);
+    --muted-foreground: light-dark(#71717a, #a1a1aa);
+    --faint: light-dark(#fafafa, #1e1e21);
+    --faint-foreground: light-dark(#a1a1aa, #71717a);
+    --accent: light-dark(#f4f4f5, #27272a);
+    --danger: light-dark(#d32f2f, #f4807b);
+    --danger-foreground: light-dark(#fafafa, #18181b);
+    --success: light-dark(#008032, #6cc070);
+    --success-foreground: light-dark(#fafafa, #18181b);
+    --warning: light-dark(#a65b00, #f0a030);
     --warning-foreground: #09090b;
-    --border: #d4d4d8;
-    --input: #d4d4d8;
-    --ring: #574747;
+    --border: light-dark(#d4d4d8, #52525b);
+    --input: light-dark(#d4d4d8, #52525b);
+    --ring: light-dark(#574747, #d4d4d8);
 
     /* ==================== */
     --space-1: 0.25rem;
@@ -47,11 +49,11 @@
     --font-sans: system-ui, sans-serif;
     --font-mono: ui-monospace, Consolas, monospace;
 
-    --text-1: 3rem;
-    --text-2: 2.25rem;
-    --text-3: 1.875rem;
-    --text-4: 1.5rem;
-    --text-5: 1.25rem;
+    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
+    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
+    --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
+    --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
+    --text-5: 1.125rem;
     --text-6: 1rem;
     --text-7: 0.875rem;
     --text-8: 0.75rem;
@@ -74,26 +76,4 @@
     --z-dropdown: 50;
     --z-modal: 200;
   }
-
-  [data-theme="dark"] {
-    color-scheme: dark;
-    --background: #09090b;
-    --foreground: #fafafa;
-    --card: #18181b;
-    --card-foreground: #fafafa;
-    --primary: #fafafa;
-    --primary-foreground: #18181b;
-    --secondary: #27272a;
-    --secondary-foreground: #fafafa;
-    --muted: #27272a;
-    --muted-foreground: #a1a1aa;
-    --faint: #1e1e21;
-    --accent: #27272a;
-    --danger-foreground: #fafafa;
-    --success-foreground: #fafafa;
-    --warning-foreground: #09090b;
-    --border: #52525b;
-    --input: #52525b;
-    --ring: #d4d4d8;
-  }
 }

package/css/alert.css

@@ -3,7 +3,7 @@
     position: relative;
     display: flex;
     gap: var(--space-3);
-    padding: var(--space-4);
+    padding: var(--space-4) var(--space-6);
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: var(--radius-medium);
@@ -13,9 +13,13 @@
       border: none;
     }
 
-    &[data-variant="error"], &[data-variant="danger"] {
+    &[data-variant="error"],
+    &[data-variant="danger"] {
       color: var(--danger);
-      background-color: color-mix(in srgb, var(--danger) 8%, white);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, transparent),
+        color-mix(in srgb, var(--danger) 20%, transparent)
+      );
 
       & a {
         color: var(--danger);
@@ -24,7 +28,10 @@
 
     &[data-variant="success"] {
       color: var(--success);
-      background-color: color-mix(in srgb, var(--success) 8%, white);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, transparent),
+        color-mix(in srgb, var(--success) 20%, transparent)
+      );
 
       & a {
         color: var(--success);
@@ -33,25 +40,14 @@
 
     &[data-variant="warning"] {
       color: var(--warning);
-      background-color: color-mix(in srgb, var(--warning) 8%, white);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, transparent),
+        color-mix(in srgb, var(--warning) 20%, transparent)
+      );
 
       & a {
         color: var(--warning);
       }
     }
-
-    [data-theme="dark"] & {
-      &[data-variant="error"], &[data-variant="danger"] {
-        background-color: color-mix(in srgb, var(--danger) 20%, black);
-      }
-
-      &[data-variant="success"] {
-        background-color: color-mix(in srgb, var(--success) 20%, black);
-      }
-
-      &[data-variant="warning"] {
-        background-color: color-mix(in srgb, var(--warning) 20%, black);
-      }
-    }
   }
 }

package/css/badge.css

@@ -24,31 +24,26 @@
 
     &.success {
       color: var(--success);
-      background-color: color-mix(in srgb, var(--success) 12%, white);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 10%, transparent),
+        color-mix(in srgb, var(--success) 30%, transparent)
+      );
     }
 
     &.warning {
       color: var(--warning);
-      background-color: color-mix(in srgb, var(--warning) 12%, white);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 10%, transparent),
+        color-mix(in srgb, var(--warning) 30%, transparent)
+      );
     }
 
     &.danger {
       color: var(--danger);
-      background-color: color-mix(in srgb, var(--danger) 15%, white);
-    }
-
-    [data-theme="dark"] & {
-      &.success {
-        background-color: color-mix(in srgb, var(--success) 40%, black);
-      }
-
-      &.warning {
-        background-color: color-mix(in srgb, var(--warning) 40%, black);
-      }
-
-      &.danger {
-        background-color: color-mix(in srgb, var(--danger) 40%, black);
-      }
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 10%, transparent),
+        color-mix(in srgb, var(--danger) 30%, transparent)
+      );
     }
   }
 }

package/css/button.css

@@ -1,10 +1,11 @@
 @layer base {
-  :is(button, [type=submit], [type=reset], [type=button], a.button) {
+  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
+    --_hov: color-mix(in srgb, var(--primary), white 25%);
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
-    /* height: 2.5rem; */
     padding: var(--space-2) var(--space-4);
     font-size: var(--text-7);
     font-weight: var(--font-medium);
@@ -17,10 +18,13 @@
     border: 1px solid;
     border-color: rgb(from #fff r g b / 0.15) rgb(from #000 r g b / 0.2) rgb(from #000 r g b / 0.2) rgb(from #fff r g b / 0.15);
     transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
-    cursor: pointer;
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
 
     &:hover:not(:disabled) {
-      background-color: color-mix(in srgb, var(--primary), white 25%);
+      background-color: var(--_hov);
     }
 
     &:active:not(:disabled) {
@@ -28,74 +32,51 @@
     }
 
     &[data-variant="secondary"] {
+      --_hov: color-mix(in srgb, var(--secondary), black 10%);
       background-color: var(--secondary);
       color: var(--secondary-foreground);
       border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
-
-      &:hover:not(:disabled) {
-        background-color: color-mix(in srgb, var(--secondary), black 10%);
-      }
     }
 
     &[data-variant="danger"] {
+      --_hov: color-mix(in srgb, var(--danger), black 15%);
       background-color: var(--danger);
       color: var(--danger-foreground);
-
-      &:hover:not(:disabled) {
-        background-color: color-mix(in srgb, var(--danger), black 15%);
-      }
     }
 
-    &.outline {
+    &:is(.outline, .ghost) {
+      --_hov: var(--accent);
       background-color: transparent;
-      border-color: var(--border);
+      color: var(--foreground);
 
-      &:not([data-variant]) {
-        color: var(--foreground);
-      }
       &[data-variant="danger"] {
+        --_hov: color-mix(in srgb, var(--danger), transparent 90%);
         color: var(--danger);
-        border-color: var(--danger);
-        &:hover:not(:disabled) {
-          background-color: color-mix(in srgb, var(--danger), transparent 90%);
-        }
       }
+
       &[data-variant="secondary"] {
+        --_hov: color-mix(in srgb, var(--secondary), transparent 80%);
         color: var(--secondary-foreground);
-        border-color: var(--secondary);
-        &:hover:not(:disabled) {
-          background-color: color-mix(in srgb, var(--secondary), transparent 80%);
-        }
-      }
-      &:hover:not(:disabled):not([data-variant]) {
-        background-color: var(--accent);
       }
     }
 
-    &.ghost {
-      background-color: transparent;
-      border-color: transparent;
+    &.outline {
+      border-color: var(--border);
 
-      &:not([data-variant]) {
-        color: var(--foreground);
-      }
       &[data-variant="danger"] {
-        color: var(--danger);
-        &:hover:not(:disabled) {
-          background-color: color-mix(in srgb, var(--danger), transparent 90%);
-        }
+        border-color: var(--danger);
       }
+
       &[data-variant="secondary"] {
-        color: var(--secondary-foreground);
-        &:hover:not(:disabled) {
-          background-color: color-mix(in srgb, var(--secondary), transparent 80%);
-        }
-      }
-      &:hover:not(:disabled):not([data-variant]) {
-        background-color: var(--accent);
+        border-color: var(--secondary);
       }
     }
 
+    &.ghost {
+      /* Same as .outline but no border. */
+      border-color: transparent;
+    }
+
     &.small {
       padding: var(--space-1) var(--space-3);
       font-size: var(--text-8);
@@ -120,27 +101,41 @@
       }
     }
   }
+
+  ::file-selector-button {
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--border);
+  }
+  ::file-selector-button:hover {
+    /* pseudoelement:hover can't be nested and has to be a separate block. */
+    background-color: var(--accent);
+  }
 }
 
 @layer components {
   menu.buttons {
+    list-style-type: none;
     padding-inline-start: 0;
     display: inline-flex;
 
-    & > :is(button, [type=button], [type=submit], [type=reset], a.button) {
-      border-radius: 0;
-
-      &:first-child {
+    /* In menu.buttons, <li> children are expected to have just one child, which is a button/or a.button */
+    & > li {
+      &:first-child > * {
         border-start-start-radius: var(--radius-medium);
         border-end-start-radius: var(--radius-medium);
       }
 
-      &:last-child {
+      &:last-child > * {
         border-start-end-radius: var(--radius-medium);
         border-end-end-radius: var(--radius-medium);
       }
 
-      &:not(:last-child) {
+      & > * {
+        border-radius: 0;
+      }
+
+      &:not(:last-child) > * {
         border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.2);
       }
     }

package/css/dialog.css

@@ -3,8 +3,7 @@
     position: fixed;
     inset: 0;
     z-index: var(--z-modal);
-    width: 100%;
-    max-width: 32rem;
+    width: min(100% - 2rem, 32rem);
     max-height: 85vh;
     margin: auto;
     padding: 0;

package/css/dropdown.css

@@ -28,10 +28,6 @@
           transform: translateY(-4px);
         }
       }
-
-      hr {
-        margin: var(--space-1) 0;
-      }
     }
 
     [role="menuitem"] {

package/css/form.css

@@ -32,6 +32,7 @@
       outline: none;
       border-color: var(--ring);
       box-shadow: 0 0 0 2px rgb(from var(--ring) r g b / 0.2);
+      z-index: 1;
     }
 
     &:disabled {
@@ -67,6 +68,7 @@
     width: 1rem;
     height: 1rem;
     margin: 0;
+    position: relative;
     background-color: var(--background);
     border: 1px solid var(--input);
     transition: background-color var(--transition-fast), border-color var(--transition-fast);
@@ -74,22 +76,24 @@
     &:checked {
       background-color: var(--primary);
       border-color: var(--primary);
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--primary-foreground);
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 100%;
+      }
     }
   }
 
   input[type=checkbox] {
     border-radius: var(--radius-small);
-    position: relative;
 
     &:checked::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-color: var(--primary-foreground);
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
-      mask-size: 90%;
-      mask-position: center;
-      mask-repeat: no-repeat;
     }
 
     &[role=switch] {
@@ -101,7 +105,6 @@
       height: var(--switch-height);
       border-radius: var(--radius-full);
       background-color: var(--input);
-      position: relative;
 
       &::before {
         content: "";
@@ -133,17 +136,9 @@
 
   input[type=radio] {
     border-radius: var(--radius-full);
-    position: relative;
 
     &:checked::after {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-color: var(--primary-foreground);
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
-      mask-size: 100%;
-      mask-position: center;
-      mask-repeat: no-repeat;
     }
   }
 
@@ -206,7 +201,10 @@
     & > :is(input, textarea, select) {
       flex: 1;
       margin-block-start: 0;
-      border-inline-end: 0;
+     
+      &:not(:focus) {
+        border-inline-end-color: transparent;
+      }
     }
 
     & > :is(input, textarea, select, button) {

package/css/grid.css

@@ -51,7 +51,15 @@
 
   /* Responsive: stack on mobile */
   @media (max-width: 768px) {
-    .row { --grid-cols: 4; --grid-gap: 1rem; }
-    .col, [class*="col-"] { --span: 4; } /* full width */
+    .row {
+      --grid-cols: 4;
+      --grid-gap: 1rem;
+    }
+    .col, [class*="col-"] {
+      --span: 4;
+    }
+    [class*="offset-"] {
+      grid-column-start: auto;
+    }
   }
 }