oat-glassed 0.1.0

package/css/button.css

@@ -0,0 +1,155 @@
+@layer base {
+  :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
+    --_hov: color-mix(in srgb, var(--primary), white 20%);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    text-decoration: none;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-medium);
+    border: 1px solid rgb(from #fff r g b / 0.15);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.12),
+      0 1px 4px rgb(0 0 0 / 0.08);
+    transition: background-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
+
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--_hov);
+      box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 0.15),
+        0 2px 8px rgb(0 0 0 / 0.12);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(1px);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+    }
+
+    &[data-variant="secondary"] {
+      --_hov: color-mix(in srgb, var(--secondary), black 5%);
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      border-color: light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06));
+      box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 0.08),
+        var(--shadow-small);
+    }
+
+    &[data-variant="danger"] {
+      --_hov: color-mix(in srgb, var(--danger), black 12%);
+      background-color: var(--danger);
+      color: var(--danger-foreground);
+    }
+
+    &:is(.outline, .ghost) {
+      --_hov: var(--accent);
+      background-color: transparent;
+      color: var(--foreground);
+      box-shadow: none;
+      border-color: transparent;
+
+      &:hover:not(:disabled) {
+        box-shadow: var(--shadow-small);
+      }
+
+      &[data-variant="danger"] {
+        --_hov: color-mix(in srgb, var(--danger), transparent 90%);
+        color: var(--danger);
+      }
+
+      &[data-variant="secondary"] {
+        --_hov: color-mix(in srgb, var(--secondary), transparent 80%);
+        color: var(--secondary-foreground);
+      }
+    }
+
+    &.outline {
+      border-color: var(--border);
+
+      &[data-variant="danger"] {
+        border-color: var(--danger);
+      }
+
+      &[data-variant="secondary"] {
+        border-color: var(--border);
+      }
+    }
+
+    &.ghost {
+      border-color: transparent;
+    }
+
+    &.small {
+      padding: var(--space-1) var(--space-3);
+      font-size: var(--text-8);
+    }
+
+    &.large {
+      height: 3rem;
+      padding: 0 var(--space-6);
+      font-size: var(--text-regular);
+    }
+
+    &.icon {
+      width: 2.5rem;
+      padding: 0;
+
+      &.small {
+        width: 2rem;
+      }
+
+      &.large {
+        width: 3rem;
+      }
+    }
+  }
+
+  ::file-selector-button {
+    background-color: transparent;
+    color: var(--foreground);
+    border: 1px solid var(--border);
+  }
+  ::file-selector-button:hover {
+    background-color: var(--accent);
+  }
+}
+
+@layer components {
+  menu.buttons {
+    list-style-type: none;
+    padding-inline-start: 0;
+    display: inline-flex;
+
+    & > li {
+      &:first-child > * {
+        border-start-start-radius: var(--radius-medium);
+        border-end-start-radius: var(--radius-medium);
+      }
+
+      &:last-child > * {
+        border-start-end-radius: var(--radius-medium);
+        border-end-end-radius: var(--radius-medium);
+      }
+
+      & > * {
+        border-radius: 0;
+      }
+
+      &:not(:last-child) > * {
+        border-inline-end: 1px solid rgb(from var(--primary-foreground) r g b / 0.15);
+      }
+    }
+  }
+}

package/css/card.css

@@ -0,0 +1,21 @@
+@layer components {
+  .card {
+    background-color: var(--card);
+    background-image: var(--glass-highlight);
+    color: var(--card-foreground);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-large);
+    box-shadow: var(--glass-edge);
+    padding: var(--space-6);
+    overflow: hidden;
+    contain: paint;
+
+    > * + * {
+      margin-block-start: var(--space-4);
+    }
+
+    > header > * + * {
+      margin-block-start: var(--space-2);
+    }
+  }
+}

package/css/command.css

@@ -0,0 +1,107 @@
+@layer components {
+  ot-command {
+    display: contents;
+  }
+
+  ot-command dialog {
+    width: min(100% - 2rem, 28rem);
+    max-height: min(60vh, 24rem);
+    margin-block-start: 15vh;
+    margin-inline: auto;
+    margin-block-end: auto;
+    padding: 0;
+    flex-direction: column;
+    overflow: hidden;
+
+    &[open] {
+      display: flex;
+    }
+  }
+
+  ot-command input[type="search"] {
+    margin: 0;
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-6);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    border-radius: 0;
+    box-shadow: none;
+
+    &:focus {
+      outline: none;
+      border-color: var(--border);
+      background: transparent;
+      box-shadow: none;
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+
+  ot-command [role="listbox"] {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-2);
+
+    & > :not([role="option"]) {
+      display: block;
+      padding: var(--space-2) var(--space-3);
+      padding-block-start: var(--space-3);
+      font-size: var(--text-8);
+      font-weight: var(--font-semibold);
+      color: var(--muted-foreground);
+
+      &:first-child {
+        padding-block-start: var(--space-1);
+      }
+    }
+  }
+
+  ot-command [role="option"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-7);
+    text-align: start;
+    background: none;
+    color: var(--foreground);
+    border: none;
+    border-radius: var(--radius-small);
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color var(--transition-fast);
+
+    &:hover, &[aria-selected="true"] {
+      background-color: var(--accent);
+      box-shadow: none;
+    }
+
+    &:active {
+      transform: none;
+      box-shadow: none;
+    }
+
+    & > kbd {
+      margin-inline-start: auto;
+      padding: var(--space-1) var(--space-2);
+      font-family: var(--font-mono);
+      font-size: var(--text-8);
+      color: var(--muted-foreground);
+      background-color: var(--muted);
+      border: 1px solid var(--glass-border);
+      border-radius: var(--radius-small);
+    }
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+      flex-shrink: 0;
+      opacity: 0.7;
+    }
+  }
+}

package/css/dialog.css

@@ -0,0 +1,94 @@
+@layer components {
+  dialog {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    width: min(100% - 2rem, 32rem);
+    max-height: 85vh;
+    margin: auto;
+    padding: 0;
+    background-color: var(--card);
+    background-image: var(--glass-highlight);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-large);
+    box-shadow: var(--glass-edge), var(--shadow-large);
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    will-change: transform, opacity;
+    contain: layout style paint;
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+    transition:
+      opacity 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      display 250ms allow-discrete,
+      overlay 250ms allow-discrete;
+
+    &[open] {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      &[open] {
+        opacity: 0;
+        transform: translateY(8px) scale(0.97);
+      }
+    }
+
+    &::backdrop {
+      background-color: light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.45));
+      backdrop-filter: blur(6px) saturate(var(--glass-saturate));
+      -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturate));
+      opacity: 0;
+      transition:
+        opacity 250ms ease,
+        display 250ms allow-discrete,
+        overlay 250ms allow-discrete;
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+    }
+
+    @starting-style {
+      &[open]::backdrop {
+        opacity: 0;
+      }
+    }
+
+    & > header,
+    & > form > header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-1);
+      padding: var(--space-6);
+      padding-block-end: 0;
+
+      & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+        margin-block-end: 0;
+      }
+
+      & > p {
+        font-size: var(--text-7);
+        color: var(--muted-foreground);
+        margin-block-end: 0;
+      }
+    }
+
+    & > p, & > div, & > section,
+    & > form > p, & > form > div, & > form > section {
+      padding: var(--space-6);
+      overflow-y: auto;
+    }
+
+    & > footer,
+    & > form > footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-2);
+      padding: var(--space-6);
+      padding-block-start: 0;
+    }
+  }
+}

package/css/dropdown.css

@@ -0,0 +1,59 @@
+@layer components {
+  ot-dropdown {
+    [popover] {
+      position: fixed;
+      margin: 0;
+      min-width: 12rem;
+      background-color: light-dark(rgb(255 255 255 / 0.72), rgb(17 24 39 / 0.65));
+      background-image: var(--glass-highlight);
+      backdrop-filter: blur(16px) saturate(140%);
+      -webkit-backdrop-filter: blur(16px) saturate(140%);
+      border: 1px solid light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.12));
+      border-radius: var(--radius-medium);
+      box-shadow: var(--glass-edge), var(--shadow-large);
+      will-change: transform, opacity;
+      opacity: 0;
+      transform: translateY(-6px) scale(0.96);
+      transition:
+        opacity 200ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+        transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete;
+
+      &:popover-open {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+
+      @starting-style {
+        &:popover-open {
+          opacity: 0;
+          transform: translateY(-6px) scale(0.96);
+        }
+      }
+    }
+
+    [role="menuitem"] {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      gap: var(--space-2);
+      width: 100%;
+      padding: var(--space-2) var(--space-3);
+      font-size: var(--text-7);
+      text-align: start;
+      color: var(--foreground);
+      background: none;
+      border: none;
+      border-radius: var(--radius-small);
+      box-shadow: none;
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+
+      &:hover, &:focus {
+        background-color: var(--accent);
+        outline: none;
+      }
+    }
+  }
+}

package/css/empty-state.css

@@ -0,0 +1,38 @@
+@layer components {
+  [data-empty] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    padding: var(--space-12) var(--space-6);
+    text-align: center;
+    color: var(--muted-foreground);
+    background-color: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.01));
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-large);
+    box-shadow: var(--glass-edge);
+    contain: paint;
+
+    & > svg, & > img {
+      width: 3rem;
+      height: 3rem;
+      opacity: 0.4;
+    }
+
+    & > :is(h1, h2, h3, h4, h5, h6) {
+      margin: 0;
+      color: var(--foreground);
+    }
+
+    & > p {
+      max-width: 28rem;
+      margin: 0;
+      font-size: var(--text-7);
+    }
+
+    & > :is(button, a.button) {
+      margin-block-start: var(--space-2);
+    }
+  }
+}