@godxjp/ui 5.0.2 → 6.0.0

package/src/styles/card-layout.css

@@ -0,0 +1,373 @@
+/*
+ * CARD LAYOUT — canonical slot padding (@godxjp/ui)
+ * -----------------------------------------------------------------
+ * Card* components emit data-slot + data-* flags ONLY. All inset/gap padding lives here.
+ *
+ * Uses card primitive tokens from src/tokens/primitives/card.css.
+ * Card tokens derive from foundation/layout primitives and are coordinated by tokens/base.css.
+ *
+ * Slot ownership — one token per vertical gap:
+ *   shell φ¹   title block top, card bottom, solo content
+ *   section φ⁰ header↔body (plain header pb=0; content owns gap)
+ *   band φ⁻¹   banded header, separated footer
+ *
+ * Modifiers (set on components, never Tailwind p-* in app/story code):
+ *   data-banded · data-flush · data-tight · data-solo · data-separated
+ */
+
+[data-slot="card"] {
+  min-width: 0;
+  border-color: hsl(var(--card-border-token));
+  border-radius: var(--card-radius);
+  background: hsl(var(--card-background));
+  color: hsl(var(--card-foreground-token));
+  overflow: hidden;
+}
+
+/* ── Surface variants — fill only; flat at rest (border, no shadow) ──── */
+[data-slot="card"][data-variant="muted"] {
+  background: hsl(var(--secondary));
+}
+
+[data-slot="card"][data-variant="outline"] {
+  background: transparent;
+}
+
+[data-slot="card"][data-variant="featured"] {
+  border-color: hsl(var(--primary));
+  box-shadow: 0 0 0 1px hsl(var(--primary));
+}
+
+/* ── Density — override the shell inset/body tokens ──────────────────── */
+[data-slot="card"][data-density="tight"] {
+  --card-space-inset: var(--space-3);
+  --card-space-body-y: var(--space-3);
+}
+
+[data-slot="card"][data-density="cozy"] {
+  --card-space-inset: var(--space-5);
+  --card-space-body-y: var(--space-5);
+}
+
+/* ── Accent edge — 3px semantic left stripe, content kept on the shell ─ */
+[data-slot="card"][data-accent] {
+  border-left-width: 3px;
+}
+
+[data-slot="card"][data-accent="primary"] {
+  border-left-color: hsl(var(--primary));
+}
+
+[data-slot="card"][data-accent="success"] {
+  border-left-color: hsl(var(--success));
+}
+
+[data-slot="card"][data-accent="warning"] {
+  border-left-color: hsl(var(--warning));
+}
+
+[data-slot="card"][data-accent="info"] {
+  border-left-color: hsl(var(--info));
+}
+
+[data-slot="card"][data-accent="attention"] {
+  border-left-color: hsl(var(--attention));
+}
+
+[data-slot="card"][data-accent="destructive"] {
+  border-left-color: hsl(var(--destructive));
+}
+
+[data-slot="card"][data-accent] > [data-slot="card-header"],
+[data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
+[data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
+  padding-inline-start: calc(var(--card-space-inset) - 3px);
+}
+
+/* ── Header ──────────────────────────────────────────────────────────── */
+[data-slot="card-header"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-space-gap);
+  padding-inline: var(--card-space-inset);
+}
+
+[data-slot="card-header"]:not([data-banded]) {
+  padding-top: var(--card-space-inset);
+  padding-bottom: 0;
+}
+
+.ui-card-header--banded {
+  border-bottom: 1px solid hsl(var(--card-border-token));
+  background-color: hsl(var(--card-header-background) / var(--card-header-background-alpha));
+}
+
+[data-slot="card-header"][data-banded] {
+  padding-inline: var(--card-space-inset);
+  padding-block: var(--card-space-header-y);
+  gap: var(--card-space-gap);
+}
+
+[data-slot="card-title"] {
+  font-size: var(--card-title-font-size);
+  font-weight: var(--card-title-font-weight);
+  letter-spacing: var(--letter-spacing-tight);
+  line-height: var(--card-title-line-height);
+}
+
+[data-slot="card-description"] {
+  color: hsl(var(--muted-foreground));
+  font-size: var(--card-description-font-size);
+  line-height: var(--card-description-line-height);
+}
+
+[data-slot="card-header"][data-banded]:has([data-slot="card-action"]) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-inline-md);
+}
+
+[data-slot="card-header"][data-banded]:has([data-slot="card-description"]):not(
+    :has([data-slot="card-action"])
+  ) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+[data-slot="card-action"] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--space-inline-sm);
+  margin-left: auto;
+}
+
+[data-slot="card"]:has([data-slot="card-header"][data-banded]) {
+  overflow: hidden;
+}
+
+[data-slot="card"]:has([data-slot="card-header"][data-banded])
+  [data-slot="card-content"]:not([data-tight]) {
+  padding-top: var(--card-space-body-y);
+}
+
+/* Flush / tight body — symmetric plain header band */
+[data-slot="card"]:has([data-slot="card-content"][data-tight]:not(:has([data-slot="tabs-list"])))
+  [data-slot="card-header"]:not([data-banded]) {
+  padding-top: var(--card-space-body-y);
+  padding-bottom: var(--card-space-body-y);
+}
+
+[data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
+  [data-slot="card-header"] {
+  padding-bottom: var(--card-space-body-y);
+}
+
+/* Toolbar header — title + CardAction, no description */
+[data-slot="card-header"]:has([data-slot="card-action"]):not(:has([data-slot="card-description"])) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-inline-md);
+  padding-top: var(--card-space-body-y);
+  padding-bottom: var(--card-space-body-y);
+}
+
+[data-slot="card"]:has(
+    [data-slot="card-header"]:has([data-slot="card-action"]):not(
+        :has([data-slot="card-description"])
+      )
+  )
+  [data-slot="card-content"]:not([data-tight]) {
+  padding-top: 0;
+}
+
+/* Header-only card — terminal slot owns bottom shell */
+[data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
+  [data-slot="card-header"] {
+  padding-bottom: var(--card-space-inset);
+}
+
+/* Cover — header below media uses section top, not shell */
+.ui-card-cover {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+[data-slot="card"]:has([data-slot="card-cover"]) [data-slot="card-header"] {
+  padding-top: var(--card-space-body-y);
+}
+
+/* ── Content ─────────────────────────────────────────────────────────── */
+[data-slot="card-content"] {
+  padding-inline: var(--card-space-inset);
+  padding-bottom: var(--card-space-inset);
+}
+
+[data-slot="card-content"]:not([data-tight]):not([data-solo]) {
+  padding-top: var(--card-space-body-y);
+}
+
+[data-slot="card-content"][data-solo] {
+  padding-top: var(--card-space-inset);
+}
+
+[data-slot="card-content"][data-flush] {
+  padding-inline: 0;
+}
+
+[data-slot="card-content"][data-flush]:has(.ui-data-table-root) {
+  padding-bottom: 0;
+}
+
+[data-slot="card-content"][data-tight] {
+  padding-top: 0;
+}
+
+[data-slot="card"]:has([data-slot="card-footer"]) [data-slot="card-content"] {
+  padding-bottom: var(--card-space-body-y);
+}
+
+/* Tabs in card */
+[data-slot="card"]:has([data-slot="tabs-list"]) [data-slot="card-content"][data-tight] {
+  padding-top: 0;
+  padding-inline: 0;
+}
+
+[data-slot="card"] [data-slot="tabs-list"] {
+  padding-inline: var(--card-space-inset);
+}
+
+[data-slot="card"] [data-slot="tabs-panel"] {
+  margin-top: 0;
+  padding: var(--card-space-body-y) var(--card-space-inset);
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────── */
+[data-slot="card-footer"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-inline-sm);
+  padding-inline: var(--card-space-inset);
+}
+
+@media (max-width: 639px) {
+  [data-slot="card-footer"][data-separated]:not([data-flush]) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+}
+
+[data-slot="card-footer"]:not([data-separated]) {
+  padding-top: 0;
+  padding-bottom: var(--card-space-inset);
+}
+
+[data-slot="card-footer"][data-separated] {
+  border-top: 1px solid hsl(var(--card-border-token));
+  padding-block: var(--card-space-footer-y);
+  justify-content: flex-end;
+}
+
+[data-slot="card-footer"][data-separated][data-flush] {
+  padding-inline: 0;
+  justify-content: stretch;
+}
+
+/* ── Nested insets (table cells, grid cells — align to shell, not slot padding) ─ */
+.ui-card-inset-x {
+  padding-inline: var(--card-space-inset);
+}
+
+.ui-card-inset {
+  padding: var(--card-space-body-y);
+}
+
+.ui-card-inset-y {
+  padding-block: var(--card-space-header-y);
+}
+
+.ui-card-grid-cell {
+  padding: var(--card-space-body-y);
+}
+
+.ui-card-footer-action-y {
+  padding-block: var(--card-space-footer-y);
+}
+
+/* ── CardStat — KPI tile aligned to dashboard design ─────────────── */
+[data-slot="card"][data-stat-card] {
+  padding: var(--card-space-header-y) var(--card-space-inset);
+}
+
+[data-slot="card"][data-stat-card][data-stat-layout="inline"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--space-inline-md);
+}
+
+[data-slot="card-stat-body"] {
+  min-width: 0;
+}
+
+[data-slot="card-stat-label"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-inline-xs);
+  color: hsl(var(--muted-foreground));
+  font-size: var(--card-stat-label-font-size);
+  font-weight: var(--card-stat-label-font-weight);
+  letter-spacing: var(--card-stat-label-letter-spacing);
+  line-height: var(--line-height-normal);
+  text-transform: uppercase;
+}
+
+[data-slot="card-stat-label"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  stroke-width: 1.6;
+}
+
+[data-slot="card-stat-value-row"] {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-inline-sm);
+  margin-top: var(--card-stat-gap);
+}
+
+[data-slot="card"][data-stat-align="end"] [data-slot="card-stat-value-row"],
+[data-slot="card"][data-stat-layout="inline"] [data-slot="card-stat-value-row"] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+[data-slot="card-stat-value"] {
+  font-size: var(--card-stat-value-font-size);
+  font-weight: var(--card-stat-value-font-weight);
+  letter-spacing: var(--letter-spacing-tight);
+  line-height: var(--card-stat-value-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-slot="card-stat-delta"] {
+  color: hsl(var(--muted-foreground));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-slot="card-stat-hint"] {
+  margin-top: var(--card-stat-gap);
+  color: hsl(var(--muted-foreground));
+  font-size: var(--card-stat-hint-font-size);
+  line-height: var(--line-height-normal);
+}