@knadh/oat 0.3.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;
   }
 
   * {
@@ -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;
@@ -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

@@ -1,20 +1,14 @@
 @layer components {
   [role="alert"] {
-    --bg-amount: 8%;
-
     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);
     font-size: var(--text-7);
 
-    [data-theme="dark"] & {
-      --bg-amount: 20%;
-    }
-
     &[data-variant] {
       border: none;
     }
@@ -22,7 +16,10 @@
     &[data-variant="error"],
     &[data-variant="danger"] {
       color: var(--danger);
-      background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, transparent),
+        color-mix(in srgb, var(--danger) 20%, transparent)
+      );
 
       & a {
         color: var(--danger);
@@ -31,7 +28,10 @@
 
     &[data-variant="success"] {
       color: var(--success);
-      background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, transparent),
+        color-mix(in srgb, var(--success) 20%, transparent)
+      );
 
       & a {
         color: var(--success);
@@ -40,7 +40,10 @@
 
     &[data-variant="warning"] {
       color: var(--warning);
-      background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, transparent),
+        color-mix(in srgb, var(--warning) 20%, transparent)
+      );
 
       & a {
         color: var(--warning);

package/css/badge.css

@@ -1,7 +1,5 @@
 @layer components {
   .badge {
-    --bg-amount: 12%;
-
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);
@@ -13,10 +11,6 @@
     color: var(--primary-foreground);
     border-radius: var(--radius-full);
 
-    [data-theme="dark"] & {
-      --bg-amount: 40%;
-    }
-
     &.secondary {
       background-color: var(--secondary);
       color: var(--secondary-foreground);
@@ -30,17 +24,26 @@
 
     &.success {
       color: var(--success);
-      background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);
+      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) var(--bg-amount), transparent);
+      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) var(--bg-amount), transparent);
+      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), ::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);
@@ -134,23 +115,27 @@
 
 @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/sidebar.css

@@ -1,7 +1,6 @@
 @layer components {
   :root {
-    --topnav-height: var(--space-12);
-    --sidebar-width: 14rem;
+    --_nh: var(--space-12);
   }
 
   [data-sidebar-layout] {
@@ -9,13 +8,13 @@
     --topnav-scroll-offset: 0px;
 
     display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-columns: 14rem 1fr;
     min-height: 100dvh;
     gap: var(--space-4);
 
     &:has(nav[data-topnav]) {
-      --topnav-offset: var(--topnav-height);
-      --topnav-scroll-offset: calc(var(--topnav-height) + var(--space-6));
+      --topnav-offset: var(--_nh);
+      --topnav-scroll-offset: calc(var(--_nh) + var(--space-6));
     }
 
     > main {
@@ -37,7 +36,6 @@
       border-inline-end: 1px solid var(--border);
       display: flex;
       flex-direction: column;
-      width: var(--sidebar-width);
 
       > :is(header, footer) {
         flex-shrink: 0;
@@ -93,11 +91,8 @@
 
         summary {
           justify-content: flex-start;
-          gap: var(--space-2);
           padding: var(--space-2) var(--space-3);
           font-size: var(--text-7);
-          font-weight: var(--font-medium);
-          color: var(--foreground);
           border-radius: var(--radius-small);
 
           &::after {
@@ -112,10 +107,9 @@
 
   nav[data-topnav] {
     position: fixed;
-    inset-block-start: 0;
-    inset-inline: 0;
+    inset: 0 0 auto;
     z-index: 5;
-    min-height: var(--topnav-height);
+    min-height: var(--_nh);
     display: flex;
     align-items: center;
     gap: var(--space-3);
@@ -137,31 +131,33 @@
     cursor: pointer;
   }
 
-  [data-sidebar-layout="always"] [data-sidebar-toggle] {
-    display: inline-block;
-  }
+  @media (min-width: 769px) {
+    [data-sidebar-layout="always"] [data-sidebar-toggle] {
+      display: inline-block;
+    }
 
-  [data-sidebar-layout="always"] {
-    transition: grid-template-columns var(--transition);
+    [data-sidebar-layout="always"] {
+      transition: grid-template-columns var(--transition);
 
-    > aside[data-sidebar] {
-      transform: translateX(0);
-      opacity: 1;
-      transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      > aside[data-sidebar] {
+        transform: translateX(0);
+        opacity: 1;
+        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      }
     }
-  }
 
-  [data-sidebar-layout="always"][data-sidebar-open] {
-    grid-template-columns: 0px 1fr;
-    gap: 0;
+    [data-sidebar-layout="always"][data-sidebar-open] {
+      grid-template-columns: 0px 1fr;
+      gap: 0;
 
-    > aside[data-sidebar] {
-      overflow: hidden;
-      min-width: 0;
-      transform: translateX(-100%);
-      opacity: 0;
-      visibility: hidden;
-      border-inline-end: none;
+      > aside[data-sidebar] {
+        overflow: hidden;
+        min-width: 0;
+        transform: translateX(-100%);
+        opacity: 0;
+        visibility: hidden;
+        border-inline-end: none;
+      }
     }
   }
 
@@ -171,9 +167,7 @@
 
       > aside[data-sidebar] {
         position: fixed;
-        top: var(--topnav-offset);
         left: 0;
-        height: calc(100dvh - var(--topnav-offset));
         width: 16rem;
         transform: translateX(-100%);
         transition: transform var(--transition);
@@ -184,17 +178,6 @@
         transform: translateX(0);
       }
     }
-    [data-sidebar-layout="always"][data-sidebar-open] {
-      grid-template-columns: 1fr;
-      gap: var(--space-4);
-
-      > aside[data-sidebar] {
-        opacity: 1;
-        visibility: visible;
-        transform: translateX(0);
-      }
-    }
-
     [data-sidebar-toggle] { display: inline-block; }
 
     [data-sidebar-header] {

package/css/skeleton.css

@@ -1,26 +1,22 @@
 @layer components {
   [role="status"].skeleton {
+    --_c: light-dark(
+      color-mix(in srgb, var(--muted) 30%, white),
+      color-mix(in srgb, var(--muted) 90%, var(--foreground))
+    );
+
     margin-block-end: var(--space-3);
     background: var(--muted);
     border-radius: var(--radius-medium);
-    animation: shimmer 2s infinite;
+    animation: anim 2s infinite;
     background-size: 200% 100%;
     background-image: linear-gradient(
       90deg,
       var(--muted) 0%,
-      color-mix(in srgb, var(--muted) 30%, white) 30%,
+      var(--_c) 50%,
       var(--muted) 100%
     );
 
-    [data-theme="dark"] & {
-      background-image: linear-gradient(
-        90deg,
-        var(--muted) 0%,
-        color-mix(in srgb, var(--muted) 90%, var(--foreground)) 90%,
-        var(--muted) 100%
-      );
-    }
-
     &.box {
       width: 4rem;
       height: 4rem;
@@ -36,7 +32,7 @@
     margin-block-end: 0;
   }
 
-  @keyframes shimmer {
+  @keyframes anim {
     from { background-position: 200% 0; }
     to { background-position: -200% 0; }
   }