daftcss 1.3.0

package/src/components/accordion.css

@@ -0,0 +1,132 @@
+/**
+ * Accordion styles
+ * Uses semantic <details> and <summary> elements
+ */
+
+details {
+  margin-bottom: var(--spacing-sm);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+details:last-child {
+  margin-bottom: 0;
+}
+
+summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing) 0;
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  transition: color var(--transition-default);
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Chevron icon */
+  &::after {
+    content: "";
+    width: var(--icon-size);
+    height: var(--icon-size);
+    flex-shrink: 0;
+    margin-left: var(--spacing-sm);
+    background-color: currentColor;
+    mask-image: var(--icon-chevron);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    transition: transform var(--transition-default);
+  }
+
+  &:hover {
+    color: var(--primary);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-width) solid var(--ring);
+    outline-offset: var(--outline-offset);
+    border-radius: var(--radius-sm);
+  }
+}
+
+/* Open state */
+details[open] > summary:not([role="button"]) {
+  color: var(--primary);
+}
+
+details[open] > summary {
+  &::after {
+    transform: rotate(180deg);
+  }
+}
+
+/* Accordion content */
+details > *:not(summary) {
+  padding-bottom: var(--spacing-md);
+}
+
+details > p:last-child {
+  margin-bottom: 0;
+}
+
+/* Button-styled summary */
+summary[role="button"] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  height: var(--button-height);
+  padding: var(--spacing-sm) var(--spacing);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--primary-foreground);
+  background-color: var(--primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--button-shadow);
+  transition: background-color var(--transition-default);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+  }
+}
+
+/* Button variants */
+summary[role="button"].secondary {
+  color: var(--foreground);
+  background-color: var(--accent);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+  }
+}
+
+summary[role="button"].outline {
+  color: var(--primary);
+  background-color: var(--background);
+  border: var(--border-width) solid var(--primary);
+
+  &:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+}
+
+summary[role="button"].destructive {
+  color: var(--destructive-foreground);
+  background-color: var(--destructive);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--destructive) var(--hover-opacity), transparent);
+  }
+}
+
+/* Button accordion wrapper */
+details:has(> summary[role="button"]) {
+  border-bottom: none;
+  margin-bottom: var(--spacing);
+}

package/src/components/badge.css

@@ -0,0 +1,82 @@
+/**
+ * Badge/Pill styles
+ * Small status indicators with color variants
+ */
+
+/* Base badge styles */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--badge-radius);
+
+  /* Primary variant (default) */
+  color: var(--primary-foreground);
+  background-color: var(--primary);
+}
+
+/* Secondary variant */
+.badge.secondary {
+  color: var(--foreground);
+  background-color: var(--accent);
+}
+
+/* Destructive variant */
+.badge.destructive {
+  color: var(--destructive-foreground);
+  background-color: var(--destructive);
+}
+
+/* Status variants */
+.badge.success {
+  color: var(--success-foreground);
+  background-color: var(--success);
+}
+
+.badge.warning {
+  color: var(--warning-foreground);
+  background-color: var(--warning);
+}
+
+/* Outline variant */
+.badge.outline {
+  color: var(--primary);
+  background-color: transparent;
+  border-color: var(--primary);
+}
+
+.badge.outline.secondary {
+  color: var(--foreground);
+  border-color: var(--border);
+}
+
+.badge.outline.destructive {
+  color: var(--destructive);
+  border-color: var(--destructive);
+}
+
+.badge.outline.success {
+  color: var(--success);
+  border-color: var(--success);
+}
+
+.badge.outline.warning {
+  color: var(--warning);
+  border-color: var(--warning);
+}
+
+/* Size variants */
+.badge.small {
+  padding: 0 var(--spacing-xs);
+}
+
+.badge.large {
+  padding: var(--spacing-sm) var(--spacing-md);
+}

package/src/components/button.css

@@ -0,0 +1,203 @@
+/**
+ * Button styles
+ * Primary, secondary, outline, ghost, and link variants
+ */
+
+/* Base button styles */
+:is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  height: var(--button-height);
+  padding: var(--spacing-sm) var(--spacing);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  line-height: calc(var(--button-height) - 2 * var(--border-width) - 2 * var(--spacing-sm));
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--button-radius);
+  transition: color var(--transition-default),
+              background-color var(--transition-default),
+              border-color var(--transition-default),
+              box-shadow var(--transition-default);
+
+  /* Primary variant (default) */
+  color: var(--primary-foreground);
+  background-color: var(--primary);
+  box-shadow: var(--button-shadow);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in oklch, var(--primary) var(--active-opacity), transparent);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--ring) var(--focus-ring-opacity), transparent);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Icon sizing */
+  & > svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    flex-shrink: 0;
+  }
+}
+
+/* Reset button defaults to a secondary look. */
+[type="reset"] {
+  color: var(--foreground);
+  background-color: var(--accent);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+  }
+}
+
+/* Link as button */
+a[role="button"] {
+  text-decoration: none;
+}
+
+/* Secondary variant */
+:is(button, [type="submit"], [type="button"], [role="button"]).secondary {
+  color: var(--foreground);
+  background-color: var(--accent);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--accent) 80%, var(--foreground) 5%);
+  }
+
+  &:active {
+    background-color: color-mix(in oklch, var(--accent) 70%, var(--foreground) 10%);
+  }
+}
+
+/* Destructive variant */
+:is(button, [role="button"]).destructive {
+  color: var(--destructive-foreground);
+  background-color: var(--destructive);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--destructive) var(--hover-opacity), transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in oklch, var(--destructive) var(--active-opacity), transparent);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--destructive) var(--focus-ring-opacity), transparent);
+  }
+}
+
+/* Outline variant */
+:is(button, [type="submit"], [type="button"], [role="button"]).outline {
+  color: var(--primary);
+  background-color: var(--background);
+  border-color: var(--primary);
+
+  &:hover {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  &:focus-visible {
+    box-shadow: var(--button-shadow), 0 0 0 var(--focus-ring-width) color-mix(in oklch, var(--primary) var(--focus-ring-opacity), transparent);
+  }
+}
+
+/* Outline secondary */
+:is(button, [role="button"]).outline.secondary {
+  color: var(--foreground);
+  border-color: var(--border);
+
+  &:hover {
+    background-color: var(--accent);
+  }
+}
+
+/* Ghost variant (no background) */
+:is(button, [role="button"]).ghost {
+  color: var(--foreground);
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+}
+
+/* Link variant (looks like a link) */
+:is(button, [role="button"]).link {
+  color: var(--primary);
+  background-color: transparent;
+  box-shadow: none;
+  text-underline-offset: 4px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+/* Active/current variant (e.g., selected item in a group) */
+:is(button, [role="button"])[aria-current="true"] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+
+  &:hover {
+    background-color: color-mix(in oklch, var(--primary) var(--hover-opacity), transparent);
+  }
+}
+
+/* Small button */
+:is(button, [role="button"]).small {
+  height: var(--button-height-sm);
+  padding: var(--spacing-xs) var(--spacing-md);
+  line-height: calc(var(--button-height-sm) - 2 * var(--border-width) - 2 * var(--spacing-xs));
+}
+
+/* Large button */
+:is(button, [role="button"]).large {
+  height: var(--button-height-lg);
+  padding: var(--spacing-sm) var(--spacing-xl);
+  line-height: calc(var(--button-height-lg) - 2 * var(--border-width) - 2 * var(--spacing-sm));
+}
+
+/* Icon-only button */
+:is(button, [role="button"]).icon {
+  width: var(--button-height);
+  padding: 0;
+}
+
+:is(button, [role="button"]).icon.small {
+  width: var(--button-height-sm);
+}
+
+:is(button, [role="button"]).icon.large {
+  width: var(--button-height-lg);
+}
+
+/* Full width button */
+:is(button, [role="button"]).full-width {
+  width: 100%;
+}

package/src/components/card.css

@@ -0,0 +1,97 @@
+/**
+ * Card styles
+ * Uses semantic <article> element
+ */
+
+article {
+  padding: var(--spacing-lg);
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  margin-bottom: var(--spacing);
+}
+
+article:last-child {
+  margin-bottom: 0;
+}
+
+/* Card header */
+article > header {
+  padding: 0;
+  margin-bottom: var(--spacing);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Card header with title styling */
+article > header > strong,
+article > header > h1,
+article > header > h2,
+article > header > h3,
+article > header > h4,
+article > header > h5,
+article > header > h6 {
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  line-height: var(--line-height-sm);
+}
+
+article > header > small,
+article > header > p {
+  color: var(--muted-foreground);
+  font-size: var(--text-sm);
+  margin-bottom: 0;
+}
+
+/* Card footer */
+article > footer {
+  padding: 0;
+  margin-top: var(--spacing);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+/* Nested articles have different styling */
+article article {
+  background-color: var(--muted);
+  border: none;
+  box-shadow: none;
+}
+
+/* Card inside grid */
+.grid > article {
+  margin-bottom: 0;
+}
+
+/* Clickable card (when wrapped in anchor) */
+a:has(> article) {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border-radius: var(--card-radius);
+  transition: box-shadow var(--transition-default);
+
+  &:hover > article {
+    border-color: color-mix(in oklch, var(--border) 80%, var(--foreground));
+  }
+
+  &:focus-visible {
+    outline: var(--outline-width) solid var(--ring);
+    outline-offset: var(--outline-offset);
+  }
+}
+
+/* Card with loading state */
+article[aria-busy="true"] {
+  min-height: 8rem;
+}

package/src/components/dropdown.css

@@ -0,0 +1,120 @@
+/**
+ * Dropdown styles
+ * Uses <details class="dropdown"> with <summary> and <ul>
+ */
+
+details.dropdown {
+  position: relative;
+  display: inline-block;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+details.dropdown > summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  height: var(--input-height);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--foreground);
+  background-color: var(--background);
+  border: var(--border-width) solid var(--input);
+  border-radius: var(--dropdown-radius);
+  cursor: pointer;
+  transition: border-color var(--transition-default),
+              background-color var(--transition-default);
+
+  &::after {
+    content: "";
+    width: var(--icon-size);
+    height: var(--icon-size);
+    background-color: currentColor;
+    mask-image: var(--icon-chevron);
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    transition: transform var(--transition-default);
+  }
+
+  &:hover {
+    border-color: var(--ring);
+  }
+}
+
+details.dropdown[open] > summary {
+  border-color: var(--ring);
+
+  &::after {
+    transform: rotate(180deg);
+  }
+}
+
+/* Dropdown menu */
+details.dropdown > ul {
+  position: absolute;
+  z-index: 50;
+  min-width: 10rem;
+  margin: 0;
+  margin-top: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  list-style: none;
+  background-color: var(--popover);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--dropdown-radius);
+  box-shadow: var(--dropdown-shadow);
+  opacity: 0;
+  transform: translateY(-0.5rem);
+  animation: dropdown-in var(--transition-default) forwards;
+}
+
+@keyframes dropdown-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+details.dropdown > ul > li {
+  margin: 0;
+}
+
+details.dropdown > ul > li > a,
+details.dropdown > ul > li > label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
+  color: var(--popover-foreground);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color var(--transition-default);
+
+  &:hover {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+}
+
+/* Right-aligned dropdown (RTL trick) */
+details.dropdown > ul[dir="rtl"] {
+  right: 0;
+  text-align: left;
+  direction: ltr;
+}
+
+/* Button-styled dropdown - inherits colors from button.css */
+details.dropdown > summary[role="button"] {
+  border-color: transparent;
+}
+
+/* Dropdown with checkboxes/radios */
+details.dropdown > ul label:has(input[type="checkbox"]),
+details.dropdown > ul label:has(input[type="radio"]) {
+  margin-bottom: 0;
+}
+