oat-glassed 0.1.0

package/css/form.css

@@ -0,0 +1,264 @@
+@layer base {
+  label {
+    display: block;
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+
+    &:has(input:where([type=checkbox], [type=radio])) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-weight: var(--font-normal);
+    }
+  }
+
+  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
+    width: 100%;
+    margin-block-start: var(--space-1);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    line-height: var(--leading-normal);
+    background-color: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.04));
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    border-radius: var(--radius-medium);
+    box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.04));
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
+
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--ring);
+      background-color: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06));
+      box-shadow:
+        0 0 0 3px rgb(from var(--ring) r g b / 0.12),
+        inset 0 1px 0 light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.03));
+      z-index: 1;
+    }
+
+    &:disabled {
+      background-color: var(--muted);
+    }
+
+    &:is([aria-invalid=true], :user-invalid) {
+      border-color: var(--danger);
+
+      &:focus {
+        box-shadow:
+          0 0 0 3px rgb(from var(--danger) r g b / 0.12),
+          inset 0 1px 0 light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.03));
+      }
+    }
+  }
+
+  textarea {
+    height: auto;
+    min-height: 5rem;
+    padding: var(--space-3);
+    resize: vertical;
+  }
+
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--space-2) center;
+    padding-inline-end: var(--space-6);
+  }
+
+  input:where([type=checkbox], [type=radio]) {
+    appearance: none;
+    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);
+
+    &: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);
+
+    &:checked::after {
+      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");
+    }
+
+    &[role=switch] {
+      --switch-height: calc(var(--bar-height) * 3);
+      --switch-inset: 2px;
+      --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);
+
+      width: calc(var(--switch-height) * 2);
+      height: var(--switch-height);
+      border-radius: var(--radius-full);
+      background-color: var(--input);
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: var(--switch-inset);
+        transform: translateY(-50%);
+        width: var(--switch-thumb);
+        height: var(--switch-thumb);
+        background-color: var(--background);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition);
+        box-shadow: var(--shadow-small);
+      }
+
+      &:checked {
+        background-color: var(--primary);
+
+        &::after {
+          content: none;
+        }
+
+        &::before {
+          transform: translateY(-50%) translateX(var(--switch-height));
+        }
+      }
+    }
+  }
+
+  input[type=radio] {
+    border-radius: var(--radius-full);
+
+    &:checked::after {
+      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");
+    }
+  }
+
+  :where(input:where([type=checkbox], [type=radio], [type=range]), select):not(:disabled),
+  label:has(input:where([type=checkbox], [type=radio]):not(:disabled)) {
+    cursor: pointer;
+  }
+
+  input[type=range] {
+    width: 100%;
+    height: var(--bar-height);
+    appearance: none;
+    background: var(--muted);
+    border-radius: var(--radius-full);
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border-radius: var(--radius-full);
+      transition: transform var(--transition-fast);
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border: none;
+      border-radius: var(--radius-full);
+    }
+  }
+
+  fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-medium);
+    padding: var(--space-4);
+    margin-block-end: var(--space-4);
+    content-visibility: auto;
+  }
+
+  legend {
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    padding: 0 var(--space-2);
+  }
+}
+
+@layer components {
+  fieldset.group {
+    display: flex;
+    align-items: stretch;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    & > :is(input, textarea, select) {
+      flex: 1;
+      margin-block-start: 0;
+     
+      &:not(:focus):not(:last-child) {
+        border-inline-end-color: transparent;
+      }
+    }
+
+    & > :is(input, textarea, select, button) {
+      border-radius: 0;
+      &:first-child {
+        border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+      }
+      
+      &:last-child {
+        border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
+      }
+    }
+
+    & > legend {
+      float: inline-start;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--space-3);
+      line-height: var(--leading-normal);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      background-color: var(--muted);
+      border: 1px solid var(--input);
+      border-inline-end: none;
+      border-radius: var(--radius-medium) 0 0 var(--radius-medium);
+    }
+  }
+
+  [data-field] {
+    margin-block-end: var(--space-4);
+
+    /* Hint text that succeeds an input with aria-describedby */
+    [data-hint], .error {
+      font-size: var(--text-8);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      margin-block-start: var(--space-1);
+    }
+
+    .error {
+      display: none;
+    }
+
+    /* Reveal error on data-field="error" */
+    &[data-field="error"] .error {
+      display: block;
+      color: var(--danger);
+    }
+  }
+}

package/css/grid.css

@@ -0,0 +1,65 @@
+@layer components {
+  :root {
+    --grid-cols: 12;
+    --grid-gap: 1.5rem;
+    --container-max: 1280px;
+    --container-pad: 1rem;
+  }
+
+  .container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin-inline: auto;
+    padding-inline: var(--container-pad);
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    gap: var(--grid-gap);
+    width: 100%;
+  }
+
+  /* Column spans using CSS custom property */
+  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
+  
+  .col-1  { --span: 1; }
+  .col-2  { --span: 2; }
+  .col-3  { --span: 3; }
+  .col-4  { --span: 4; }
+  .col-5  { --span: 5; }
+  .col-6  { --span: 6; }
+  .col-7  { --span: 7; }
+  .col-8  { --span: 8; }
+  .col-9  { --span: 9; }
+  .col-10 { --span: 10; }
+  .col-11 { --span: 11; }
+  .col-12 { --span: 12; }
+
+  /* Offsets via grid-column-start */
+  .offset-1  { grid-column-start: 2; }
+  .offset-2  { grid-column-start: 3; }
+  .offset-3  { grid-column-start: 4; }
+  .offset-4  { grid-column-start: 5; }
+  .offset-5  { grid-column-start: 6; }
+  .offset-6  { grid-column-start: 7; }
+
+  .col-end {
+    grid-column-start: span var(--span, 1);
+    grid-column-end: -1;
+  }
+
+  /* Responsive: stack on mobile */
+  @media (max-width: 768px) {
+    .row {
+      --grid-cols: 4;
+      --grid-gap: 1rem;
+    }
+    .col, [class*="col-"] {
+      --span: 4;
+    }
+    [class*="offset-"] {
+      grid-column-start: auto;
+    }
+  }
+}

package/css/nav.css

@@ -0,0 +1,89 @@
+@layer components {
+  [data-nav] {
+    font-size: var(--text-7);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+
+    /* Section labels */
+    & > small {
+      display: block;
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--text-8);
+      font-weight: var(--font-semibold);
+      color: var(--muted-foreground);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+
+      &:not(:first-child) {
+        margin-block-start: var(--space-3);
+      }
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-2) var(--space-3);
+      color: var(--foreground);
+      text-decoration: none;
+      border-radius: var(--radius-small);
+      transition: background-color var(--transition-fast);
+
+      &:hover {
+        background-color: var(--accent);
+      }
+
+      &[aria-current] {
+        background-color: var(--accent);
+        font-weight: var(--font-medium);
+      }
+
+      & > .badge {
+        margin-inline-start: auto;
+        font-size: 0.625rem;
+      }
+    }
+
+    svg, img:not(.avatar img) {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+      opacity: 0.7;
+    }
+
+    /* Collapsible sections */
+    details {
+      border: none;
+      background: none;
+      overflow: visible;
+
+      & + details { margin-top: 0; }
+      &[open] summary { border-bottom: none; }
+
+      > :not(summary) {
+        margin: 0;
+        padding-inline-start: var(--space-6);
+      }
+    }
+
+    summary {
+      justify-content: flex-start;
+      padding: var(--space-2) var(--space-3);
+      border-radius: var(--radius-small);
+      font-size: var(--text-7);
+
+      &::after {
+        width: 0.75rem;
+        height: 0.75rem;
+        margin-inline-start: auto;
+      }
+    }
+
+    hr {
+      margin: var(--space-2) var(--space-3);
+      border: none;
+      border-top: 1px solid var(--border);
+    }
+  }
+}

package/css/progress.css

@@ -0,0 +1,75 @@
+@layer base {
+  progress {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background-color: var(--muted);
+
+    &::-webkit-progress-bar {
+      background-color: var(--muted);
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+      transition: width var(--transition);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+    }
+  }
+
+  meter {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: var(--muted);
+
+    &::-webkit-meter-bar {
+      background: var(--muted);
+      border: none;
+      border-radius: var(--radius-full);
+      height: var(--bar-height);
+    }
+
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: var(--success);
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: var(--warning);
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: var(--danger);
+    }
+
+    &::-moz-meter-bar {
+      background: var(--success);
+      border-radius: var(--radius-full);
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: var(--warning);
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: var(--danger);
+    }
+  }
+}

package/css/sidebar.css

@@ -0,0 +1,189 @@
+@layer components {
+  [data-sidebar-layout] {
+    display: grid;
+    grid-template-columns: 14rem 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
+
+    > main {
+      grid-row: 2;
+      min-width: 0;
+      overflow-y: auto;
+    }
+
+    > aside[data-sidebar] {
+      grid-row: 2;
+      min-height: 0;
+      z-index: 1;
+      background-color: light-dark(rgb(248 250 252 / 0.55), rgb(2 6 23 / 0.55));
+      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+      will-change: transform;
+      contain: layout style paint;
+      border-inline-end: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+
+      > :is(header, footer) {
+        flex-shrink: 0;
+        padding: var(--space-3);
+      }
+
+      > footer {
+        margin-block-start: auto;
+      }
+
+      > nav {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--space-3) var(--space-2);
+        font-size: var(--text-7);
+
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-1);
+
+          li {
+            margin: 0;
+          }
+        }
+
+        a {
+          display: flex;
+          gap: var(--space-2);
+          padding: var(--space-1) var(--space-3);
+          color: var(--foreground);
+          text-decoration: none;
+          border-radius: var(--radius-small);
+          transition: background-color var(--transition-fast);
+
+          &:is(:hover, [aria-current]) {
+            background-color: var(--accent);
+          }
+        }
+
+        details {
+          border: none;
+          overflow: visible;
+          background: none;
+
+          & + details { margin-top: 0; }
+          &[open] summary { border-bottom: none; }
+          > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
+        }
+
+        summary {
+          justify-content: flex-start;
+          padding: var(--space-2) var(--space-3);
+          border-radius: var(--radius-small);
+
+          &::after {
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-inline-start: auto;
+          }
+        }
+      }
+    }
+
+    > nav[data-topnav] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  nav[data-topnav] {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-4);
+    background-color: light-dark(rgb(248 250 252 / 0.55), rgb(2 6 23 / 0.55));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    will-change: transform;
+    contain: layout style paint;
+    border-bottom: 1px solid var(--glass-border);
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  :is([data-sidebar-toggle], [data-sidebar-header]) {
+    display: none;
+  }
+
+  [data-sidebar-toggle] {
+    padding: 0 var(--space-1);
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+  }
+
+  @media (min-width: 769px) {
+    [data-sidebar-layout="always"] {
+      transition: grid-template-columns var(--transition);
+
+      [data-sidebar-toggle] {
+        display: inline-block;
+      }
+
+      > aside[data-sidebar] {
+        transform: translateX(0);
+        opacity: 1;
+      }
+
+      &[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;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    [data-sidebar-layout] {
+      grid-template-columns: 1fr;
+
+      > main {
+        grid-column: 1;
+      }
+
+      > aside[data-sidebar] {
+        grid-column: 1;
+        z-index: 2;
+        width: 16rem;
+        transform: translateX(-100%);
+        box-shadow: var(--shadow-large);
+      }
+
+      &[data-sidebar-open] > aside[data-sidebar] {
+        transform: translateX(0);
+      }
+    }
+    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-header] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--border);
+    }
+  }
+}

package/css/skeleton.css

@@ -0,0 +1,39 @@
+@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-small);
+    animation: anim 2s infinite;
+    background-size: 200% 100%;
+    background-image: linear-gradient(
+      90deg,
+      var(--muted) 0%,
+      var(--_c) 50%,
+      var(--muted) 100%
+    );
+
+    &.box {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    &.line {
+      height: 1rem;
+      width: 100%;
+    }
+  }
+
+  [role="status"].skeleton:last-child {
+    margin-block-end: 0;
+  }
+
+  @keyframes anim {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+  }
+}