@codenhub/styles 0.0.2

package/src/components.css

@@ -0,0 +1,657 @@
+@import "tailwindcss";
+@import "./theme.css";
+
+@keyframes codenhub-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@layer components {
+  .sect {
+    @apply flex flex-col items-center justify-center gap-[clamp(2rem,5vw,4rem)] px-(--layout-gutter) py-(--layout-section-block);
+  }
+
+  .sect-container,
+  .sect-inn {
+    @apply mx-auto flex w-full flex-col gap-[clamp(1.5rem,4vw,3rem)];
+
+    max-width: var(--container-max);
+
+    &.narrow {
+      max-width: var(--container-narrow);
+    }
+
+    &.wide {
+      max-width: var(--container-wide);
+    }
+
+    &.left {
+      @apply items-start;
+    }
+
+    &.right {
+      @apply items-end;
+    }
+
+    &.center {
+      @apply items-center;
+    }
+  }
+
+  .stack {
+    @apply flex flex-col gap-(--layout-stack-gap);
+
+    &.tight {
+      --layout-stack-gap: 0.5rem;
+    }
+
+    &.loose {
+      --layout-stack-gap: 1.5rem;
+    }
+  }
+
+  .cluster {
+    @apply flex flex-wrap items-center gap-(--layout-cluster-gap);
+
+    &.between {
+      @apply justify-between;
+    }
+  }
+
+  .auto-grid {
+    @apply grid gap-(--layout-stack-gap);
+
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
+  }
+
+  .card,
+  .panel {
+    --surface-bg: var(--color-background);
+    --surface-border: var(--color-border);
+    --surface-border-hover: var(--color-border-hover);
+    --surface-radius: var(--radius-surface);
+    --surface-elevation: var(--elevation-low);
+
+    @apply text-text flex flex-col gap-4 rounded-(--surface-radius) border border-(--surface-border) bg-(--surface-bg) p-[clamp(1rem,3vw,2rem)] shadow-(--surface-elevation) transition-[border-color,box-shadow,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    &.interactive {
+      @apply cursor-pointer;
+
+      &:hover {
+        transform: translateY(-1px);
+        border-color: var(--surface-border-hover);
+      }
+    }
+
+    &[data-state="open"] {
+      transform: translateY(-1px);
+      border-color: var(--surface-border-hover);
+    }
+  }
+
+  .card {
+    --surface-bg: var(--color-background);
+  }
+
+  .panel {
+    --surface-bg: var(--color-foreground);
+  }
+
+  .btn {
+    --button-color: var(--color-primary);
+    --button-contrast: var(--color-primary-contrast);
+    --button-hover: var(--color-primary-hover);
+    --button-subtle: var(--color-primary-subtle);
+    --button-strong: var(--color-primary-strong);
+    --button-bg: var(--button-color);
+    --button-fg: var(--button-contrast);
+    --button-border: var(--button-bg);
+    --button-hover-bg: var(--button-hover);
+    --button-hover-fg: var(--button-fg);
+    --button-hover-border: var(--button-hover-bg);
+    --button-text: var(--button-strong);
+    --button-soft-bg: var(--button-subtle);
+    --button-subtle-hover-bg: color-mix(in srgb, var(--button-soft-bg) 80%, transparent);
+    --button-soft-hover-bg: color-mix(in srgb, var(--button-soft-bg) 84%, var(--button-text));
+    --button-spinner: var(--button-fg);
+
+    @apply relative inline-flex min-h-(--control-height,2.5rem) w-fit items-center justify-center gap-2 rounded-(--radius-control) border border-(--button-border) bg-(--button-bg) px-4 py-2 font-semibold whitespace-nowrap text-(--button-fg) no-underline transition-[background-color,border-color,color,opacity,transform] duration-(--motion-duration-fast) ease-(--motion-ease) select-none;
+
+    &.primary {
+      --button-color: var(--color-primary);
+      --button-contrast: var(--color-primary-contrast);
+      --button-hover: var(--color-primary-hover);
+      --button-subtle: var(--color-primary-subtle);
+      --button-strong: var(--color-primary-strong);
+    }
+
+    &.secondary {
+      --button-color: var(--color-accent);
+      --button-contrast: var(--color-accent-contrast);
+      --button-hover: var(--color-accent-hover);
+      --button-subtle: var(--color-accent-subtle);
+      --button-strong: var(--color-accent-strong);
+    }
+
+    &.success {
+      --button-color: var(--color-success);
+      --button-contrast: var(--color-success-contrast);
+      --button-hover: var(--color-success-hover);
+      --button-subtle: var(--color-success-subtle);
+      --button-strong: var(--color-success-strong);
+    }
+
+    &.warning {
+      --button-color: var(--color-warning);
+      --button-contrast: var(--color-warning-contrast);
+      --button-hover: var(--color-warning-hover);
+      --button-subtle: var(--color-warning-subtle);
+      --button-strong: var(--color-warning-strong);
+    }
+
+    &.destructive,
+    &.danger,
+    &.error {
+      --button-color: var(--color-destructive);
+      --button-contrast: var(--color-destructive-contrast);
+      --button-hover: var(--color-destructive-hover);
+      --button-subtle: var(--color-destructive-subtle);
+      --button-strong: var(--color-destructive-strong);
+    }
+
+    &.info {
+      --button-color: var(--color-info);
+      --button-contrast: var(--color-info-contrast);
+      --button-hover: var(--color-info-hover);
+      --button-subtle: var(--color-info-subtle);
+      --button-strong: var(--color-info-strong);
+    }
+
+    &.out {
+      --button-spinner: var(--button-text);
+
+      @apply border-2 border-(--button-color) bg-transparent text-(--button-color);
+
+      &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+        @apply border-(--button-color) bg-(--button-subtle) text-(--button-color);
+      }
+
+      &.fill {
+        &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+          @apply border-(--button-color) bg-(--button-color) text-(--button-contrast);
+        }
+      }
+    }
+
+    &.ghost {
+      --button-spinner: var(--button-text);
+
+      @apply border-transparent bg-transparent text-(--button-text);
+
+      &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+        @apply border-transparent bg-(--button-subtle-hover-bg) text-(--button-text);
+      }
+    }
+
+    &.soft {
+      --button-spinner: var(--button-text);
+
+      @apply border-transparent bg-(--button-soft-bg) text-(--button-text);
+
+      &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+        @apply border-transparent bg-(--button-soft-hover-bg) text-(--button-text);
+      }
+    }
+
+    &.sm {
+      @apply min-h-8 px-3 py-1 text-sm;
+    }
+
+    &.lg {
+      @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
+    }
+
+    &.icon {
+      @apply aspect-square min-w-(--control-height,2.5rem) p-2;
+
+      aspect-ratio: 1;
+    }
+
+    &.pill {
+      @apply rounded-full;
+    }
+
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      &:not(.out, .ghost, .soft) {
+        @apply border-(--button-hover-border) bg-(--button-hover-bg) text-(--button-hover-fg);
+      }
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled="true"],
+    &[data-disabled] {
+      @apply cursor-not-allowed;
+
+      opacity: 0.58;
+    }
+
+    &.loading {
+      @apply pointer-events-none text-transparent! transition-[opacity,transform];
+
+      &::after {
+        @apply absolute top-[calc(50%+var(--border-width))] left-[calc(50%+var(--border-width))] block size-4 -translate-1/2 rounded-full bg-(--button-spinner);
+
+        content: "";
+        mask-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
+        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
+        mask-size: contain;
+        -webkit-mask-size: contain;
+      }
+    }
+  }
+
+  .field {
+    @apply flex w-full flex-col gap-1.5;
+
+    .label {
+      @apply text-text text-sm font-semibold;
+    }
+
+    .hint {
+      @apply text-text-secondary text-[0.8125rem];
+    }
+
+    .error:not(.btn),
+    &-error {
+      @apply text-destructive text-[0.8125rem] font-medium;
+    }
+  }
+
+  .ipt,
+  .textarea,
+  .select {
+    --control-bg: var(--color-background);
+    --control-border: var(--color-border);
+    --control-border-active: var(--color-primary);
+    --control-fg: var(--color-text);
+    --control-placeholder: var(--color-text-secondary);
+
+    @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) border border-(--control-border) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
+
+    &::placeholder {
+      color: var(--control-placeholder);
+    }
+
+    &:focus {
+      @apply outline-none;
+    }
+
+    &:focus-visible {
+      border-color: var(--control-border-active);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    }
+
+    &[aria-invalid="true"] {
+      --control-border: var(--color-destructive);
+      --control-border-active: var(--color-destructive);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"],
+    &[data-disabled] {
+      @apply cursor-not-allowed;
+
+      opacity: 0.58;
+    }
+  }
+
+  .textarea {
+    @apply min-h-28 resize-y;
+  }
+
+  .select {
+    appearance: none;
+  }
+
+  input[type="checkbox"].checkbox {
+    --control-color: var(--color-primary);
+    --control-contrast: var(--color-primary-contrast);
+
+    @apply inline-grid size-4 cursor-pointer appearance-none place-content-center rounded-sm border border-(--color-border) bg-(--color-background) transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    &:hover {
+      @apply border-(--color-border-hover);
+    }
+
+    &:focus {
+      @apply outline-none;
+    }
+
+    &:focus-visible {
+      border-color: var(--control-color);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    }
+
+    &::after {
+      @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
+
+      background-color: var(--control-contrast);
+      content: "";
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
+      mask-size: contain;
+      -webkit-mask-size: contain;
+    }
+
+    &:checked {
+      border-color: var(--control-color);
+      background-color: var(--control-color);
+
+      &::after {
+        @apply opacity-100;
+      }
+    }
+
+    &.success {
+      --control-color: var(--color-success);
+      --control-contrast: var(--color-success-contrast);
+    }
+
+    &.warning {
+      --control-color: var(--color-warning);
+      --control-contrast: var(--color-warning-contrast);
+    }
+
+    &.destructive,
+    &.danger,
+    &.error {
+      --control-color: var(--color-destructive);
+      --control-contrast: var(--color-destructive-contrast);
+    }
+
+    &.info {
+      --control-color: var(--color-info);
+      --control-contrast: var(--color-info-contrast);
+    }
+
+    &[aria-invalid="true"] {
+      @apply border-(--color-destructive);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"],
+    &[data-disabled] {
+      @apply cursor-not-allowed opacity-[0.58];
+    }
+  }
+
+  input[type="checkbox"].switch {
+    --control-color: var(--color-primary);
+    --control-contrast: var(--color-primary-contrast);
+
+    @apply relative h-4.5 w-9 cursor-pointer appearance-none rounded-full bg-(--color-surface) transition-[background-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+    &::after {
+      @apply absolute top-0.5 left-0.5 size-3.5 rounded-full bg-(--color-text-secondary) transition-[transform,translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+      content: "";
+    }
+
+    &:hover {
+      @apply border-(--color-border-hover);
+    }
+
+    &:focus {
+      @apply outline-none;
+    }
+
+    &:focus-visible {
+      border-color: var(--control-color);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
+    }
+
+    &:checked {
+      border-color: var(--control-color);
+      background-color: var(--control-color);
+
+      &::after {
+        @apply translate-x-4.5;
+
+        background-color: var(--control-contrast);
+      }
+    }
+
+    &.success {
+      --control-color: var(--color-success);
+      --control-contrast: var(--color-success-contrast);
+    }
+
+    &.warning {
+      --control-color: var(--color-warning);
+      --control-contrast: var(--color-warning-contrast);
+    }
+
+    &.destructive,
+    &.danger,
+    &.error {
+      --control-color: var(--color-destructive);
+      --control-contrast: var(--color-destructive-contrast);
+    }
+
+    &.info {
+      --control-color: var(--color-info);
+      --control-contrast: var(--color-info-contrast);
+    }
+
+    &[aria-invalid="true"] {
+      @apply border-(--color-destructive);
+    }
+
+    &:disabled,
+    &[aria-disabled="true"],
+    &[data-disabled] {
+      @apply cursor-not-allowed opacity-[0.58];
+    }
+  }
+
+  .alert,
+  .toast,
+  .badge,
+  .banner {
+    --feedback-color: var(--color-info);
+    --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
+    --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
+
+    @apply border border-(--feedback-border) text-(--feedback-color);
+
+    &.success {
+      --feedback-color: var(--color-success);
+    }
+
+    &.warning {
+      --feedback-color: var(--color-warning);
+    }
+
+    &.destructive,
+    &.danger,
+    &.error {
+      --feedback-color: var(--color-destructive);
+    }
+
+    &.info {
+      --feedback-color: var(--color-info);
+    }
+  }
+
+  .alert,
+  .toast,
+  .banner {
+    @apply flex gap-3 p-4;
+  }
+
+  .alert {
+    @apply rounded-(--radius-surface) bg-(--feedback-surface);
+  }
+
+  .toast {
+    @apply fixed top-4 right-4 z-(--z-toast) max-w-[min(24rem,calc(100vw-2rem))] rounded-(--radius-overlay) bg-[color-mix(in_srgb,var(--color-background)_92%,var(--feedback-color))] shadow-(--elevation-overlay);
+  }
+
+  .banner {
+    @apply rounded-none border-x-0 bg-(--feedback-surface);
+  }
+
+  .badge {
+    @apply inline-flex min-h-6 w-fit items-center gap-1 rounded-full bg-(--feedback-surface) px-2.5 text-xs font-bold;
+  }
+
+  .spinner {
+    @apply bg-text inline-block size-6 rounded-full [&.lg]:size-8 [&.sm]:size-4;
+
+    content: "";
+    mask-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
+    mask-size: contain;
+    -webkit-mask-size: contain;
+  }
+
+  .skeleton {
+    @apply min-h-4 w-full rounded-(--radius-control);
+
+    animation: codenhub-skeleton var(--motion-duration-slow) linear infinite;
+    background: linear-gradient(90deg, var(--color-surface), var(--color-foreground), var(--color-surface));
+    background-size: 200% 100%;
+  }
+
+  .progress {
+    --progress-color: var(--color-primary);
+    --progress-surface: var(--color-surface);
+
+    @apply h-2.5 w-full overflow-hidden rounded-full bg-(--progress-surface);
+
+    > * {
+      @apply block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
+
+      background-color: var(--progress-color);
+      width: var(--progress-value, 0%);
+    }
+
+    &.success {
+      --progress-color: var(--color-success);
+      --progress-surface: color-mix(var(--color-success-subtle) 60%, transparent);
+    }
+
+    &.warning {
+      --progress-color: var(--color-warning);
+      --progress-surface: color-mix(var(--color-warning-subtle) 60%, transparent);
+    }
+
+    &.destructive,
+    &.danger,
+    &.error {
+      --progress-color: var(--color-destructive);
+      --progress-surface: color-mix(var(--color-destructive-subtle) 60%, transparent);
+    }
+
+    &.info {
+      --progress-color: var(--color-info);
+      --progress-surface: color-mix(var(--color-info-subtle) 60%, transparent);
+    }
+  }
+
+  .empty-state {
+    @apply text-text-secondary flex flex-col items-center gap-3 p-[clamp(2rem,8vw,5rem)] text-center;
+  }
+
+  .tooltip {
+    --tooltip-bg: var(--color-surface);
+    --tooltip-fg: var(--color-text);
+    --tooltip-gap: 0.5rem;
+    --tooltip-top: calc(var(--tooltip-gap) * -1);
+    --tooltip-right: auto;
+    --tooltip-bottom: auto;
+    --tooltip-left: 50%;
+    --tooltip-origin: bottom;
+    --tooltip-transform: translate(-50%, -100%);
+
+    @apply relative;
+
+    &.icon {
+      @apply bg-surface text-text inline-flex size-5 cursor-default items-center justify-center rounded-full text-sm font-bold;
+    }
+
+    &[data-tooltip-position="bottom"] {
+      --tooltip-top: auto;
+      --tooltip-bottom: calc(var(--tooltip-gap) * -1);
+      --tooltip-origin: top;
+      --tooltip-transform: translate(-50%, 100%);
+    }
+
+    &[data-tooltip-position="left"] {
+      --tooltip-top: 50%;
+      --tooltip-left: calc(var(--tooltip-gap) * -1);
+      --tooltip-origin: right;
+      --tooltip-transform: translate(-100%, -50%);
+    }
+
+    &[data-tooltip-position="right"] {
+      --tooltip-top: 50%;
+      --tooltip-left: auto;
+      --tooltip-right: calc(var(--tooltip-gap) * -1);
+      --tooltip-origin: left;
+      --tooltip-transform: translate(100%, -50%);
+    }
+
+    &::after {
+      @apply pointer-events-none absolute z-(--z-popover) w-max max-w-72 rounded-(--radius-control) bg-(--tooltip-bg) px-2.5 py-2 text-sm font-normal whitespace-normal text-(--tooltip-fg) opacity-0 shadow-(--elevation-high) transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+      content: attr(data-tooltip);
+      left: var(--tooltip-left);
+      right: var(--tooltip-right);
+      top: var(--tooltip-top);
+      bottom: var(--tooltip-bottom);
+      transform: var(--tooltip-transform) scale(0);
+      transform-origin: var(--tooltip-origin);
+    }
+
+    &:hover::after,
+    &:focus-visible::after,
+    &[data-state="open"]::after {
+      opacity: 1;
+      transform: var(--tooltip-transform) scale(1);
+    }
+  }
+
+  [aria-current="page"] {
+    @apply text-primary font-bold;
+  }
+
+  @media (width < 40rem) {
+    .sect {
+      @apply items-stretch;
+    }
+
+    .toast {
+      @apply right-4 left-4 max-w-none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .btn,
+    .ipt,
+    .textarea,
+    .select,
+    .card,
+    .panel,
+    .alert,
+    .toast,
+    .badge {
+      border-color: CanvasText;
+    }
+  }
+}