@adamarant/designsystem 0.11.2

package/src/components/admin-layout.css

@@ -0,0 +1,371 @@
+/* ==========================================================================
+   Component: Admin Layout
+   Parent-driven sidebar + header + main content system for admin dashboards.
+
+   All width/offset decisions are controlled by a SINGLE class on .ds-admin:
+   - .ds-admin--expanded   → sidebar 16rem, offsets 16rem
+   - .ds-admin--collapsed  → sidebar 4rem, offsets 4rem
+
+   This guarantees sidebar, header, and main content transition in perfect sync.
+
+   Variants:
+     ds-admin--expanded     Sidebar open (16rem) — default on desktop
+     ds-admin--collapsed    Sidebar collapsed (4rem) — icons only
+
+   Usage:
+     <div class="ds-admin ds-admin--expanded">
+       <aside class="ds-admin__sidebar">
+         <div class="ds-admin__sidebar-header">Logo</div>
+         <nav class="ds-admin__nav">
+           <a class="ds-admin__nav-item ds-admin__nav-item--active">
+             <span class="ds-admin__nav-icon">...</span>
+             <span class="ds-admin__nav-label">Dashboard</span>
+           </a>
+           <div class="ds-admin__subnav">
+             <a class="ds-admin__subnav-item">Sub page</a>
+           </div>
+         </nav>
+         <div class="ds-admin__sidebar-footer">
+           <a class="ds-admin__footer-link">Settings</a>
+         </div>
+       </aside>
+       <header class="ds-admin__header">
+         <div class="ds-admin__header-inner">...</div>
+       </header>
+       <main class="ds-admin__main">
+         <div class="ds-admin__content">...</div>
+       </main>
+     </div>
+
+   Mobile: Sidebar is hidden. Use ds-drawer for mobile menu.
+   Toggle .ds-admin__overlay when mobile menu is open.
+
+   ARIA:
+     - <aside> should have role="navigation" or aria-label="Admin navigation"
+     - Active nav item: aria-current="page"
+     - Mobile toggle: aria-expanded, aria-controls
+   ========================================================================== */
+
+/* --- Layout Variables --- */
+.ds-admin {
+  --ds-admin-sidebar-w: 16rem;
+  --ds-admin-sidebar-w-collapsed: 4rem;
+  --ds-admin-header-h: var(--ds-size-4);
+}
+
+/* ==========================================================================
+   Sidebar
+   ========================================================================== */
+
+.ds-admin__sidebar {
+  display: none;
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ds-z-dropdown);
+  height: 100dvh;
+  flex-direction: column;
+  border-inline-end: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface);
+  transition: width var(--ds-duration-normal) var(--ds-ease-default);
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+  .ds-admin__sidebar {
+    display: flex;
+  }
+
+  .ds-admin--expanded .ds-admin__sidebar {
+    width: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__sidebar {
+    width: var(--ds-admin-sidebar-w-collapsed);
+  }
+
+  /* Centered items in collapsed state */
+  .ds-admin--collapsed .ds-admin__nav-item {
+    justify-content: center;
+  }
+
+  .ds-admin--collapsed .ds-admin__footer-link {
+    justify-content: center;
+  }
+
+  /* Hide labels in collapsed state */
+  .ds-admin--collapsed .ds-admin__nav-label,
+  .ds-admin--collapsed .ds-admin__sidebar-badge {
+    display: none;
+  }
+
+  /* Hide subnav in collapsed state */
+  .ds-admin--collapsed .ds-admin__subnav {
+    display: none;
+  }
+}
+
+/* --- Sidebar Header (logo area) --- */
+.ds-admin__sidebar-header {
+  display: flex;
+  height: var(--ds-admin-header-h);
+  align-items: center;
+  gap: var(--ds-space-2);
+  border-block-end: 1px solid var(--ds-color-border);
+  padding-inline: var(--ds-space-4);
+  flex-shrink: 0;
+}
+
+.ds-admin--collapsed .ds-admin__sidebar-header {
+  justify-content: center;
+}
+
+/* --- Sidebar Badge (env indicator, version, etc.) --- */
+.ds-admin__sidebar-badge {
+  border-radius: var(--ds-radius-md);
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface-muted);
+  padding: var(--ds-space-0-5) var(--ds-space-1-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-secondary);
+}
+
+/* --- Navigation Area --- */
+.ds-admin__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ds-space-6) var(--ds-space-3);
+}
+
+.ds-admin__nav > * + * {
+  margin-block-start: var(--ds-space-1);
+}
+
+/* --- Nav Item --- */
+.ds-admin__nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__nav-item:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+.ds-admin__nav-item--active,
+.ds-admin__nav-item--active:hover {
+  background-color: var(--ds-color-surface-elevated);
+  color: var(--ds-color-text);
+}
+
+/* --- Nav Icon (fixed size prevents reflow on collapse) --- */
+.ds-admin__nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+/* --- Nav Label --- */
+.ds-admin__nav-label {
+  white-space: nowrap;
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* --- Sub-Navigation (nested under a parent item) --- */
+.ds-admin__subnav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-0-5);
+  margin-inline-start: 1.75rem;
+  padding-inline-start: var(--ds-space-3);
+  padding-block: var(--ds-space-1);
+  border-inline-start: 1px solid var(--ds-color-border);
+}
+
+.ds-admin__subnav-item {
+  display: block;
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  color: var(--ds-color-text-tertiary);
+  border-radius: var(--ds-radius-lg);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__subnav-item:hover:not(.ds-admin__subnav-item--active) {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-admin__subnav-item--active {
+  background-color: var(--ds-color-surface-elevated);
+  color: var(--ds-color-text);
+}
+
+/* --- Sidebar Footer --- */
+.ds-admin__sidebar-footer {
+  border-block-start: 1px solid var(--ds-color-border);
+  padding: var(--ds-space-3);
+}
+
+.ds-admin__sidebar-footer > * + * {
+  margin-block-start: var(--ds-space-1);
+}
+
+/* --- Footer Link --- */
+.ds-admin__footer-link {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--ds-space-3);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-2-5) var(--ds-space-3);
+  color: var(--ds-color-text-secondary);
+  transition:
+    background-color var(--ds-duration-fast) var(--ds-ease-default),
+    color var(--ds-duration-fast) var(--ds-ease-default);
+}
+
+.ds-admin__footer-link:hover {
+  background-color: var(--ds-color-surface-hover);
+  color: var(--ds-color-text);
+}
+
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.ds-admin__header {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-start: 0;
+  z-index: 40;
+  height: var(--ds-admin-header-h);
+  border-block-end: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-nav-bg);
+  backdrop-filter: blur(20px) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+}
+
+.ds-admin__header-inner {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--ds-space-6);
+  margin-inline-start: 0;
+  transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Hide toggle on desktop */
+@media (min-width: 1024px) {
+  .ds-admin__header-toggle {
+    display: none;
+  }
+
+  .ds-admin--expanded .ds-admin__header-inner {
+    margin-inline-start: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__header-inner {
+    margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
+  }
+}
+
+/* ==========================================================================
+   Main Content
+   ========================================================================== */
+
+.ds-admin__main {
+  padding-block-start: var(--ds-admin-header-h);
+  margin-inline-start: 0;
+  transition: margin-inline-start var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+@media (min-width: 1024px) {
+  .ds-admin--expanded .ds-admin__main {
+    margin-inline-start: var(--ds-admin-sidebar-w);
+  }
+
+  .ds-admin--collapsed .ds-admin__main {
+    margin-inline-start: var(--ds-admin-sidebar-w-collapsed);
+  }
+}
+
+.ds-admin__content {
+  min-height: 100dvh;
+  padding: var(--ds-space-8) var(--ds-space-6);
+}
+
+@media (min-width: 768px) {
+  .ds-admin__content {
+    padding-inline: var(--ds-space-8);
+  }
+}
+
+@media (min-width: 1024px) {
+  .ds-admin__content {
+    padding-inline: var(--ds-space-12);
+  }
+}
+
+.ds-admin__container {
+  max-width: 80rem;
+  margin-inline: auto;
+}
+
+/* ==========================================================================
+   Mobile Overlay
+   ========================================================================== */
+
+.ds-admin__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: var(--ds-color-overlay);
+}
+
+@media (min-width: 1024px) {
+  .ds-admin__overlay {
+    display: none;
+  }
+}
+
+/* ==========================================================================
+   Mobile Menu (fullscreen drawer, no animation — uses ds-drawer)
+   ========================================================================== */
+
+.ds-admin__mobile-menu {
+  transition: none;
+}
+
+.ds-admin__mobile-menu .ds-drawer__content {
+  width: 100vw;
+  max-width: 100vw;
+  transition: none;
+}
+
+.ds-admin__mobile-menu .ds-drawer__body {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .ds-admin__mobile-menu {
+    display: none !important;
+  }
+}

package/src/components/alert.css

@@ -0,0 +1,159 @@
+/* ==========================================================================
+   Component: Alert
+   Contextual feedback banners with semantic variants and dismissibility.
+
+   ARIA requirements (consumer responsibility):
+   - Container: role="alert" (for important messages) or role="status"
+   - Dismissible: close button needs aria-label="Dismiss"
+   - For non-urgent info, use role="status" instead of role="alert"
+   ========================================================================== */
+
+.ds-alert {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-4);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-surface);
+  border-inline-start: var(--ds-accent-border-width) solid var(--ds-color-border);
+
+  /* --- Semantic Variants --- */
+
+  &--info {
+    background-color: var(--ds-color-info-subtle);
+    border-color: var(--ds-color-info-border);
+    border-inline-start-color: var(--ds-color-info);
+
+    & .ds-alert__icon { color: var(--ds-color-info); }
+  }
+
+  &--success {
+    background-color: var(--ds-color-success-subtle);
+    border-color: var(--ds-color-success-border);
+    border-inline-start-color: var(--ds-color-success);
+
+    & .ds-alert__icon { color: var(--ds-color-success); }
+  }
+
+  &--warning {
+    background-color: var(--ds-color-warning-subtle);
+    border-color: var(--ds-color-warning-border);
+    border-inline-start-color: var(--ds-color-warning);
+
+    & .ds-alert__icon { color: var(--ds-color-warning); }
+  }
+
+  &--error {
+    background-color: var(--ds-color-error-subtle);
+    border-color: var(--ds-color-error-border);
+    border-inline-start-color: var(--ds-color-error);
+
+    & .ds-alert__icon { color: var(--ds-color-error); }
+  }
+
+  /* --- Icon --- */
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--ds-color-text-secondary);
+  }
+
+  /* --- Content --- */
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    font-family: var(--ds-font-sans);
+    font-size: var(--ds-text-sm);
+    font-weight: var(--ds-weight-medium);
+    line-height: var(--ds-leading-snug);
+    color: var(--ds-color-text);
+  }
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    line-height: var(--ds-leading-normal);
+    color: var(--ds-color-text-secondary);
+    margin-block-start: var(--ds-space-1);
+  }
+
+  &__title + &__description {
+    margin-block-start: var(--ds-space-1);
+  }
+
+  /* --- Close Button --- */
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--ds-color-text-tertiary);
+    border-radius: var(--ds-radius-sm);
+    cursor: pointer;
+    transition: color var(--ds-duration-fast) var(--ds-ease-default);
+
+    &:hover {
+      color: var(--ds-color-text);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+      scroll-margin-block: var(--ds-space-16, 4rem);
+    }
+  }
+
+  /* --- Compact Variant --- */
+
+  &--compact {
+    padding: var(--ds-space-2) var(--ds-space-3);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* --- Banner Variant --- */
+
+  &--banner {
+    border-radius: var(--ds-radius-none);
+    border-inline-start: none;
+    border-inline-end: none;
+    border-block-start: 1px solid var(--ds-color-border);
+    border-block-end: 1px solid var(--ds-color-border);
+    width: 100%;
+
+    &.ds-alert--info {
+      border-block-start-color: var(--ds-color-info-border);
+      border-block-end-color: var(--ds-color-info-border);
+    }
+
+    &.ds-alert--success {
+      border-block-start-color: var(--ds-color-success-border);
+      border-block-end-color: var(--ds-color-success-border);
+    }
+
+    &.ds-alert--warning {
+      border-block-start-color: var(--ds-color-warning-border);
+      border-block-end-color: var(--ds-color-warning-border);
+    }
+
+    &.ds-alert--error {
+      border-block-start-color: var(--ds-color-error-border);
+      border-block-end-color: var(--ds-color-error-border);
+    }
+  }
+}

package/src/components/avatar.css

@@ -0,0 +1,109 @@
+/* ==========================================================================
+   Component: Avatar
+   User photos, token images, initials. Stackable in groups.
+   ========================================================================== */
+
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-3);
+  height: var(--ds-size-3);
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-surface-muted);
+  color: var(--ds-color-text-secondary);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-none);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+
+  & img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* --- Sizes --- */
+
+  &--xs {
+    width: var(--ds-size-1);
+    height: var(--ds-size-1);
+    font-size: var(--ds-text-xs);
+  }
+
+  &--sm {
+    width: var(--ds-size-2);
+    height: var(--ds-size-2);
+    font-size: var(--ds-text-xs);
+  }
+
+  &--md {
+    width: var(--ds-size-3);
+    height: var(--ds-size-3);
+    font-size: var(--ds-text-sm);
+  }
+
+  &--lg {
+    width: var(--ds-size-4);
+    height: var(--ds-size-4);
+    font-size: var(--ds-text-base);
+  }
+
+  &--xl {
+    width: var(--ds-space-16);
+    height: var(--ds-space-16);
+    font-size: var(--ds-text-lg);
+  }
+
+  /* --- Shape variants --- */
+
+  &--square {
+    border-radius: var(--ds-radius-lg);
+  }
+
+  &--bordered {
+    border: 2px solid var(--ds-color-surface);
+  }
+
+  /* --- Status indicator --- */
+
+  &__status {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--ds-radius-full);
+    border: 2px solid var(--ds-color-surface);
+
+    &--online {
+      background-color: var(--ds-color-success);
+    }
+
+    &--offline {
+      background-color: var(--ds-color-text-tertiary);
+    }
+
+    &--busy {
+      background-color: var(--ds-color-error);
+    }
+  }
+}
+
+/* --- Avatar Group --- */
+
+.ds-avatar-group {
+  display: flex;
+  align-items: center;
+
+  & > .ds-avatar + .ds-avatar {
+    margin-inline-start: -0.5rem;
+  }
+
+  &--sm > .ds-avatar + .ds-avatar {
+    margin-inline-start: -0.375rem;
+  }
+}

package/src/components/badge.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Component: Badge
+   Pill shape, border + subtle bg, clean and refined.
+   ========================================================================== */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-surface-muted);
+  color: var(--ds-color-text-secondary);
+
+  /* Semantic variants — subtle bg + bright text + subtle border */
+  &--primary {
+    background-color: var(--ds-color-info-subtle);
+    color: var(--ds-color-info);
+    border-color: var(--ds-color-info-border);
+  }
+
+  &--success {
+    background-color: var(--ds-color-success-subtle);
+    color: var(--ds-color-success);
+    border-color: var(--ds-color-success-border);
+  }
+
+  &--warning {
+    background-color: var(--ds-color-warning-subtle);
+    color: var(--ds-color-warning);
+    border-color: var(--ds-color-warning-border);
+  }
+
+  &--error {
+    background-color: var(--ds-color-error-subtle);
+    color: var(--ds-color-error);
+    border-color: var(--ds-color-error-border);
+  }
+
+  &--info {
+    background-color: var(--ds-color-accent-blue-subtle);
+    color: var(--ds-color-accent-blue);
+    border-color: var(--ds-color-accent-blue-border);
+  }
+
+  &--purple {
+    background-color: var(--ds-color-accent-purple-subtle);
+    color: var(--ds-color-accent-purple);
+    border-color: var(--ds-color-accent-purple-border);
+  }
+
+  /* Outline (no bg) */
+  &--outline {
+    background-color: transparent;
+    border-color: var(--ds-color-border);
+    color: var(--ds-color-text-secondary);
+  }
+
+  /* Dot indicator */
+  &--dot::before {
+    content: '';
+    width: var(--ds-dot-size);
+    height: var(--ds-dot-size);
+    border-radius: var(--ds-radius-full);
+    background-color: currentColor;
+  }
+
+  /* Uppercase badge (like "NEW", "BETA") */
+  &--upper {
+    text-transform: uppercase;
+    font-size: var(--ds-text-2xs);
+    font-weight: var(--ds-weight-semibold);
+    letter-spacing: var(--ds-tracking-wide);
+  }
+}