daftcss 1.3.0

package/src/components/table.css

@@ -0,0 +1,111 @@
+/**
+ * Table styles
+ */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--spacing);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Table headers */
+thead {
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+th {
+  height: 2.5rem;
+  padding: var(--spacing-sm);
+  font-weight: var(--font-medium);
+  text-align: left;
+  color: var(--muted-foreground);
+  background-color: transparent;
+}
+
+/* Table body */
+tbody tr {
+  border-bottom: var(--border-width) solid var(--border);
+  transition: background-color var(--transition-default);
+}
+
+tbody tr:last-child {
+  border-bottom: none;
+}
+
+tbody tr:hover {
+  background-color: color-mix(in oklch, var(--muted) 50%, transparent);
+}
+
+td {
+  padding: var(--spacing-sm);
+  vertical-align: middle;
+}
+
+/* Table footer */
+tfoot {
+  border-top: var(--border-width) solid var(--border);
+}
+
+tfoot td,
+tfoot th {
+  padding: var(--spacing-sm);
+  font-weight: var(--font-medium);
+  color: var(--muted-foreground);
+}
+
+/* Striped table */
+table.striped tbody tr:nth-child(odd) {
+  background-color: color-mix(in oklch, var(--muted) 30%, transparent);
+}
+
+table.striped tbody tr:nth-child(odd):hover {
+  background-color: color-mix(in oklch, var(--muted) 60%, transparent);
+}
+
+/* Caption */
+caption {
+  padding: var(--spacing-md) 0;
+  font-size: var(--text-sm);
+  color: var(--muted-foreground);
+  text-align: left;
+  caption-side: bottom;
+}
+
+/* Table inside figure (allows overflow) */
+figure > table {
+  margin-bottom: 0;
+}
+
+/* Responsive table wrapper */
+.overflow-auto > table,
+figure > table {
+  margin-bottom: 0;
+}
+
+/* Sortable column indicator (optional) */
+th[aria-sort] {
+  cursor: pointer;
+  user-select: none;
+}
+
+th[aria-sort]::after {
+  content: "";
+  display: inline-block;
+  width: 0.75em;
+  height: 0.75em;
+  margin-left: var(--spacing-xs);
+  vertical-align: middle;
+  opacity: 0.5;
+}
+
+th[aria-sort="ascending"]::after {
+  content: "↑";
+  opacity: 1;
+}
+
+th[aria-sort="descending"]::after {
+  content: "↓";
+  opacity: 1;
+}

package/src/components/tooltip.css

@@ -0,0 +1,77 @@
+/**
+ * Tooltip styles
+ * Uses data-tooltip attribute for tooltip content
+ * Uses data-placement for positioning (top, bottom, left, right)
+ */
+
+[data-tooltip] {
+  position: relative;
+  cursor: help;
+}
+
+/* Tooltip bubble */
+[data-tooltip]::before {
+  content: attr(data-tooltip);
+  position: absolute;
+  z-index: 50;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--line-height-sm);
+  color: var(--background);
+  background-color: var(--foreground);
+  border-radius: var(--tooltip-radius);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--transition-fast) var(--ease-default);
+}
+
+/* Default position: top */
+[data-tooltip]:not([data-placement])::before,
+[data-tooltip][data-placement="top"]::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Position: bottom */
+[data-tooltip][data-placement="bottom"]::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--spacing-sm);
+}
+
+/* Position: left */
+[data-tooltip][data-placement="left"]::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--spacing-sm);
+}
+
+/* Position: right */
+[data-tooltip][data-placement="right"]::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--spacing-sm);
+}
+
+/* Show tooltip on hover/focus */
+[data-tooltip]:hover::before,
+[data-tooltip]:focus-visible::before {
+  opacity: 1;
+}
+
+/* Button with tooltip */
+button[data-tooltip] {
+  cursor: pointer;
+}
+
+/* Link with tooltip */
+a[data-tooltip] {
+  cursor: pointer;
+}

package/src/content/code.css

@@ -0,0 +1,99 @@
+/**
+ * Code and preformatted text styles
+ * Code, pre, kbd, samp, var
+ */
+
+/* Inline code */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: var(--font-medium);
+  background-color: var(--muted);
+  color: var(--foreground);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+/* Code inside links */
+a > code {
+  color: inherit;
+}
+
+/* Code blocks */
+pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: var(--line-height-lg);
+  background-color: var(--muted);
+  color: var(--foreground);
+  padding: var(--spacing);
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: var(--spacing);
+  tab-size: 2;
+
+  /* Reset inline code styles when inside pre */
+  & > code {
+    font-size: inherit;
+    background: none;
+    padding: 0;
+    border-radius: 0;
+    white-space: pre;
+  }
+}
+
+/* Dark mode code blocks get slightly different background */
+[data-theme="dark"] pre {
+  background-color: oklch(0.18 0 0);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) pre {
+    background-color: oklch(0.18 0 0);
+  }
+}
+
+/* Keyboard input */
+kbd {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  font-weight: var(--font-medium);
+  background-color: var(--muted);
+  color: var(--foreground);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+  border: var(--border-width) solid var(--border);
+  box-shadow: 0 2px 0 var(--border);
+}
+
+/* Nested kbd (for key combinations) */
+kbd > kbd {
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  background: none;
+}
+
+/* Sample output */
+samp {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+  padding: 0.2em 0.4em;
+  border-radius: var(--radius-sm);
+}
+
+/* Variable */
+var {
+  font-family: var(--font-mono);
+  font-style: italic;
+  color: var(--primary);
+}
+
+/* Data element */
+data {
+  font-variant-numeric: tabular-nums;
+}

package/src/content/embedded.css

@@ -0,0 +1,85 @@
+/**
+ * Embedded content styles
+ * Images, figures, video, audio, and iframe
+ */
+
+/* Images */
+img {
+  height: auto;
+  max-width: 100%;
+  border-radius: var(--radius-md);
+}
+
+/* Figures */
+figure {
+  margin: var(--spacing) 0;
+
+  & > img,
+  & > picture > img,
+  & > video,
+  & > iframe {
+    border-radius: var(--radius-lg);
+  }
+
+  & > figcaption {
+    font-size: var(--text-sm);
+    color: var(--muted-foreground);
+    margin-top: var(--spacing-sm);
+    text-align: center;
+  }
+}
+
+/* Allow figure to wrap tables with overflow */
+figure:has(> table) {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  & > table {
+    margin: 0;
+  }
+}
+
+/* Picture element */
+picture {
+  display: block;
+}
+
+/* Video */
+video {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-lg);
+}
+
+/* Audio */
+audio {
+  width: 100%;
+}
+
+/* Iframe */
+iframe {
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-lg);
+  max-width: 100%;
+}
+
+/* SVG */
+svg {
+  fill: currentColor;
+}
+
+svg:not([width]) {
+  width: 1em;
+  height: 1em;
+}
+
+/* Object and embed */
+object,
+embed {
+  max-width: 100%;
+}
+
+/* Canvas */
+canvas {
+  display: block;
+}

package/src/content/typography.css

@@ -0,0 +1,241 @@
+/**
+ * Typography styles
+ * Headings, paragraphs, and inline text elements
+ */
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--foreground);
+  font-weight: var(--font-semibold);
+  line-height: var(--line-height-sm);
+  letter-spacing: -0.025em;
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+h1 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-extrabold);
+  line-height: 1;
+}
+
+h2 {
+  font-size: var(--text-3xl);
+}
+
+h3 {
+  font-size: var(--text-2xl);
+}
+
+h4 {
+  font-size: var(--text-xl);
+}
+
+h5 {
+  font-size: var(--text-lg);
+}
+
+h6 {
+  font-size: var(--text-base);
+}
+
+/* Heading groups */
+hgroup {
+  margin-bottom: var(--spacing);
+
+  & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  & > p {
+    color: var(--muted-foreground);
+    margin-bottom: 0;
+  }
+}
+
+/* Paragraphs */
+p {
+  margin-bottom: var(--spacing);
+  line-height: var(--line-height-lg);
+}
+
+/* Remove margin from last child */
+p:last-child,
+h1:last-child,
+h2:last-child,
+h3:last-child,
+h4:last-child,
+h5:last-child,
+h6:last-child {
+  margin-bottom: 0;
+}
+
+/* Inline elements */
+strong, b {
+  font-weight: var(--font-semibold);
+}
+
+em, i {
+  font-style: italic;
+}
+
+small {
+  font-size: var(--text-sm);
+}
+
+/* Links */
+a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  transition: color var(--transition-default);
+
+  &:hover {
+    color: color-mix(in oklch, var(--primary) 80%, var(--foreground));
+  }
+
+  &:focus-visible {
+    outline: var(--outline-width) solid var(--ring);
+    outline-offset: var(--outline-offset);
+    border-radius: var(--radius-sm);
+  }
+}
+
+/* Semantic text elements */
+mark {
+  background-color: color-mix(in oklch, var(--muted) 40%, transparent);
+  color: var(--foreground);
+  padding: 0.125em 0.25em;
+  border-radius: var(--radius-sm);
+}
+
+del {
+  text-decoration: line-through;
+  color: var(--muted-foreground);
+}
+
+ins {
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--primary);
+}
+
+u {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+s {
+  text-decoration: line-through;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+}
+
+cite {
+  font-style: italic;
+}
+
+dfn {
+  font-style: italic;
+  font-weight: var(--font-medium);
+}
+
+sub, sup {
+  font-size: 0.75em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Horizontal rule */
+hr {
+  border: none;
+  height: var(--border-width);
+  background-color: var(--border);
+  margin: var(--spacing-lg) 0;
+}
+
+/* Blockquote */
+blockquote {
+  border-left: 4px solid var(--border);
+  padding-left: var(--spacing);
+  margin: var(--spacing) 0;
+  font-style: italic;
+  color: var(--muted-foreground);
+
+  & > p {
+    margin-bottom: var(--spacing-sm);
+  }
+
+  & > footer {
+    font-size: var(--text-sm);
+    color: var(--muted-foreground);
+    font-style: normal;
+  }
+}
+
+/* Lists */
+ul, ol {
+  margin-bottom: var(--spacing);
+  padding-left: calc(var(--spacing) * 1.25);
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+li {
+  line-height: var(--line-height-lg);
+}
+
+/* Nested lists */
+ul ul, ol ol, ul ol, ol ul {
+  margin-top: var(--spacing-xs);
+  margin-bottom: 0;
+}
+
+/* Definition lists */
+dl {
+  margin-bottom: var(--spacing);
+}
+
+dt {
+  font-weight: var(--font-semibold);
+  margin-bottom: var(--spacing-xs);
+}
+
+dd {
+  margin-left: var(--spacing);
+  margin-bottom: var(--spacing-md);
+  color: var(--muted-foreground);
+}
+
+dd:last-child {
+  margin-bottom: 0;
+}
+
+/* Address */
+address {
+  font-style: normal;
+  margin-bottom: var(--spacing);
+}
+
+/* Time */
+time {
+  font-variant-numeric: tabular-nums;
+}

package/src/daft.css

@@ -0,0 +1,51 @@
+/**
+ * Daft CSS v1.0.0
+ * A semantic-first, utility-second CSS framework
+ * https://github.com/pietz/daft-css
+ */
+
+/* Define layer order for specificity management */
+@layer tokens, reset, base, layout, content, forms, components, utilities;
+
+/* Design tokens (first in output) */
+@import "base/variables.css" layer(tokens);
+
+/* Base */
+@import "base/reset.css" layer(reset);
+@import "base/root.css" layer(base);
+@import "base/document.css" layer(base);
+
+/* Content */
+@import "content/typography.css" layer(content);
+@import "content/embedded.css" layer(content);
+@import "content/code.css" layer(content);
+
+/* Layout */
+@import "layout/container.css" layer(layout);
+@import "layout/landmarks.css" layer(layout);
+@import "layout/grid.css" layer(layout);
+@import "layout/overflow.css" layer(layout);
+
+/* Forms */
+@import "forms/input.css" layer(forms);
+@import "forms/checkbox.css" layer(forms);
+@import "forms/range.css" layer(forms);
+@import "forms/validation.css" layer(forms);
+
+/* Components */
+@import "components/button.css" layer(components);
+@import "components/table.css" layer(components);
+@import "components/card.css" layer(components);
+@import "components/accordion.css" layer(components);
+@import "components/dropdown.css" layer(components);
+@import "components/modal.css" layer(components);
+@import "components/nav.css" layer(components);
+@import "components/progress.css" layer(components);
+@import "components/loading.css" layer(components);
+@import "components/tooltip.css" layer(components);
+@import "components/group.css" layer(components);
+@import "components/badge.css" layer(components);
+@import "layout/sidebar.css" layer(components);
+
+/* Utilities */
+@import "utilities/helpers.css" layer(utilities);