@db-vincent/components 0.0.0-stage → 0.1.0

package/src/styles/badge.css

@@ -0,0 +1,46 @@
+@layer components {
+  .ds-badge {
+    align-items: center;
+    background: var(--badge-neutral-bg);
+    border-radius: var(--badge-radius);
+    color: var(--badge-neutral-fg);
+    display: inline-flex;
+    font-family: var(--badge-font);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+    gap: var(--space-1);
+    height: var(--badge-height);
+    letter-spacing: var(--type-overline-tracking);
+    line-height: 1;
+    padding-inline: var(--badge-padding-x);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .ds-badge--accent {
+    background: var(--badge-accent-bg);
+    color: var(--badge-accent-fg);
+  }
+
+  .ds-badge--success {
+    background: var(--badge-success-bg);
+    color: var(--badge-success-fg);
+  }
+
+  .ds-badge--warning {
+    background: var(--badge-warning-bg);
+    color: var(--badge-warning-fg);
+  }
+
+  .ds-badge--danger {
+    background: var(--badge-danger-bg);
+    color: var(--badge-danger-fg);
+  }
+
+  .ds-badge__dot {
+    background: currentColor;
+    border-radius: var(--radius-full);
+    height: var(--badge-dot-size);
+    width: var(--badge-dot-size);
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,203 @@
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background: var(--color-canvas);
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    font-size: var(--text-base);
+    line-height: var(--leading-base);
+    font-feature-settings: "cv11", "ss01";
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  ::selection {
+    background: var(--color-selection);
+    color: var(--color-text-primary);
+  }
+
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: var(--color-text-primary);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--type-title-sm-tracking);
+    line-height: 1.2;
+    text-wrap: balance;
+  }
+
+  h1 {
+    font-size: var(--text-4xl);
+    line-height: var(--leading-4xl);
+    letter-spacing: var(--type-title-lg-tracking);
+  }
+
+  h2 {
+    font-size: var(--text-3xl);
+    line-height: var(--leading-3xl);
+  }
+
+  h3 {
+    font-size: var(--text-2xl);
+    line-height: var(--leading-2xl);
+  }
+
+  h4 {
+    font-size: var(--text-lg);
+    line-height: var(--leading-lg);
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  a {
+    color: var(--color-link);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.18em;
+  }
+
+  a:hover {
+    color: var(--color-link-hover);
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--font-mono);
+  }
+
+  :not(pre) > code {
+    background: var(--color-surface-sunken);
+    border-radius: var(--radius-xs);
+    font-size: 0.875em;
+    padding: 0.1em 0.35em;
+  }
+
+  kbd {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-default);
+    border-bottom-width: 2px;
+    border-radius: var(--radius-xs);
+    color: var(--color-text-secondary);
+    font-size: var(--text-xs);
+    padding: 0.1em 0.4em;
+  }
+
+  img,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid var(--color-border-subtle);
+  }
+
+  .ds-container {
+    margin-inline: auto;
+    max-width: var(--layout-container);
+    padding-inline: var(--space-5);
+    width: 100%;
+  }
+
+  .ds-prose {
+    color: var(--color-text-secondary);
+    max-width: var(--layout-prose);
+  }
+
+  .ds-prose > * + * {
+    margin-top: var(--space-4);
+  }
+
+  .ds-prose h2,
+  .ds-prose h3 {
+    color: var(--color-text-primary);
+    margin-top: var(--space-10);
+  }
+
+  .ds-prose h2 {
+    font-size: var(--text-2xl);
+  }
+
+  .ds-prose h3 {
+    font-size: var(--text-xl);
+  }
+
+  .ds-prose ul,
+  .ds-prose ol {
+    padding-left: var(--space-5);
+  }
+
+  .ds-prose li + li {
+    margin-top: var(--space-2);
+  }
+
+  .ds-prose strong {
+    color: var(--color-text-primary);
+    font-weight: var(--weight-semibold);
+  }
+
+  .ds-prose code {
+    color: var(--color-text-primary);
+  }
+
+  /* Shared icon geometry: every icon inherits the current text colour. */
+  .ds-icon {
+    flex: none;
+    stroke: currentColor;
+  }
+
+  .ds-sr-only {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+}

package/src/styles/breadcrumbs.css

@@ -0,0 +1,52 @@
+@layer components {
+  .ds-breadcrumbs {
+    font-size: var(--breadcrumbs-font-size);
+  }
+
+  .ds-breadcrumbs__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--breadcrumbs-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-breadcrumbs__item {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--breadcrumbs-gap);
+    min-width: 0;
+  }
+
+  .ds-breadcrumbs__link {
+    border-radius: var(--radius-xs);
+    color: var(--breadcrumbs-link-fg);
+    text-decoration: none;
+  }
+
+  .ds-breadcrumbs__link:hover {
+    color: var(--breadcrumbs-link-fg-hover);
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+  }
+
+  .ds-breadcrumbs__link:focus-visible {
+    outline: var(--breadcrumbs-focus-width) solid var(--breadcrumbs-focus-color);
+    outline-offset: var(--breadcrumbs-focus-offset);
+  }
+
+  .ds-breadcrumbs__current {
+    color: var(--breadcrumbs-current-fg);
+    font-weight: var(--weight-medium);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-breadcrumbs__separator {
+    color: var(--breadcrumbs-separator-fg);
+    flex: none;
+  }
+}

package/src/styles/button.css

@@ -0,0 +1,163 @@
+@layer components {
+  .ds-button {
+    align-items: center;
+    background: var(--button-secondary-bg);
+    border: 1px solid var(--button-secondary-border);
+    border-radius: var(--button-radius);
+    color: var(--button-secondary-fg);
+    display: inline-flex;
+    font-family: var(--button-font);
+    font-size: var(--button-font-md);
+    font-weight: var(--button-font-weight);
+    gap: var(--button-gap);
+    height: var(--button-height-md);
+    justify-content: center;
+    line-height: 1;
+    padding-inline: var(--button-padding-x-md);
+    position: relative;
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .ds-button:hover {
+    background: var(--button-secondary-bg-hover);
+    border-color: var(--button-secondary-border-hover);
+  }
+
+  .ds-button:active {
+    background: var(--button-secondary-bg-active);
+  }
+
+  .ds-button:focus-visible {
+    outline: var(--button-focus-width) solid var(--button-focus-color);
+    outline-offset: var(--button-focus-offset);
+  }
+
+  .ds-button--primary {
+    background: var(--button-primary-bg);
+    border-color: var(--button-primary-border);
+    color: var(--button-primary-fg);
+  }
+
+  .ds-button--primary:hover {
+    background: var(--button-primary-bg-hover);
+    border-color: var(--button-primary-border-hover);
+  }
+
+  .ds-button--primary:active {
+    background: var(--button-primary-bg-active);
+  }
+
+  .ds-button--ghost {
+    background: var(--button-ghost-bg);
+    border-color: var(--button-ghost-border);
+    color: var(--button-ghost-fg);
+  }
+
+  .ds-button--ghost:hover {
+    background: var(--button-ghost-bg-hover);
+    color: var(--button-ghost-fg-hover);
+  }
+
+  .ds-button--ghost:active {
+    background: var(--button-ghost-bg-active);
+  }
+
+  .ds-button--danger {
+    background: var(--button-danger-bg);
+    border-color: var(--button-danger-border);
+    color: var(--button-danger-fg);
+  }
+
+  .ds-button--danger:hover {
+    background: var(--button-danger-bg-hover);
+  }
+
+  .ds-button--sm {
+    font-size: var(--button-font-sm);
+    height: var(--button-height-sm);
+    padding-inline: var(--button-padding-x-sm);
+  }
+
+  .ds-button--lg {
+    font-size: var(--button-font-lg);
+    height: var(--button-height-lg);
+    padding-inline: var(--button-padding-x-lg);
+  }
+
+  .ds-button--block {
+    width: 100%;
+  }
+
+  .ds-button--icon {
+    aspect-ratio: 1;
+    padding-inline: var(--space-0);
+    width: var(--button-height-md);
+  }
+
+  .ds-button--icon.ds-button--sm {
+    width: var(--button-height-sm);
+  }
+
+  .ds-button--icon.ds-button--lg {
+    width: var(--button-height-lg);
+  }
+
+  .ds-button__icon {
+    align-items: center;
+    display: inline-flex;
+    height: var(--button-icon-size-md);
+    justify-content: center;
+    width: var(--button-icon-size-md);
+  }
+
+  .ds-button--sm .ds-button__icon {
+    height: var(--button-icon-size-sm);
+    width: var(--button-icon-size-sm);
+  }
+
+  .ds-button--lg .ds-button__icon {
+    height: var(--button-icon-size-lg);
+    width: var(--button-icon-size-lg);
+  }
+
+  .ds-button[aria-disabled="true"],
+  .ds-button:disabled {
+    background: var(--button-disabled-bg);
+    border-color: var(--button-disabled-border);
+    color: var(--button-disabled-fg);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .ds-button__spinner {
+    animation: ds-button-spin var(--duration-slower) linear infinite;
+    border: var(--spinner-stroke) solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--radius-full);
+    height: var(--space-4);
+    width: var(--space-4);
+  }
+
+  .ds-button[aria-busy="true"] {
+    cursor: progress;
+  }
+
+  @keyframes ds-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-button__spinner {
+      animation-duration: 1.6s;
+    }
+  }
+}

package/src/styles/card.css

@@ -0,0 +1,108 @@
+@layer components {
+  .ds-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: var(--card-radius);
+    color: var(--card-fg);
+    display: block;
+    overflow: hidden;
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard),
+      transform var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-card--accent {
+    background: var(--card-accent-bg);
+    border-color: var(--card-accent-border);
+  }
+
+  .ds-card--raised {
+    background: var(--card-raised-bg);
+    border-color: var(--card-raised-border);
+    box-shadow: var(--card-raised-shadow);
+  }
+
+  .ds-card--flat {
+    background: var(--card-flat-bg);
+    border-color: var(--card-flat-border);
+    box-shadow: none;
+  }
+
+  a.ds-card {
+    text-decoration: none;
+  }
+
+  a.ds-card:hover {
+    border-color: var(--card-hover-border);
+    box-shadow: var(--card-raised-shadow);
+    transform: translateY(-1px);
+  }
+
+  a.ds-card:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .ds-card__header {
+    padding: var(--card-padding) var(--card-padding) 0;
+  }
+
+  .ds-card__header > * + * {
+    margin-block-start: var(--card-header-gap);
+  }
+
+  .ds-card__eyebrow {
+    color: var(--card-meta-fg);
+    font-family: var(--font-body);
+    font-size: var(--type-overline-size);
+    font-weight: var(--type-overline-weight);
+    letter-spacing: var(--type-overline-tracking);
+    margin-block-end: var(--space-2);
+    text-transform: uppercase;
+  }
+
+  .ds-card__title {
+    color: var(--card-title-fg);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--type-heading-tracking);
+    line-height: var(--leading-lg);
+  }
+
+  .ds-card__meta {
+    color: var(--card-meta-fg);
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-card__body {
+    color: var(--card-body-fg);
+    font-size: var(--text-sm);
+    line-height: var(--leading-base);
+    padding: var(--card-padding);
+  }
+
+  .ds-card__header + .ds-card__body {
+    padding-block-start: var(--space-3);
+  }
+
+  .ds-card__footer {
+    align-items: center;
+    background: var(--card-footer-bg);
+    border-top: 1px solid var(--card-footer-border);
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--card-padding);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-card {
+      transition: none;
+    }
+
+    a.ds-card:hover {
+      transform: none;
+    }
+  }
+}

package/src/styles/chip.css

@@ -0,0 +1,104 @@
+@layer components {
+  .ds-chip {
+    align-items: center;
+    background: var(--chip-bg);
+    border: 1px solid var(--chip-border);
+    border-radius: var(--chip-radius);
+    color: var(--chip-fg);
+    display: inline-flex;
+    font-family: var(--font-body);
+    font-size: var(--chip-font-size);
+    gap: var(--space-1-5);
+    height: var(--chip-height);
+    line-height: 1;
+    padding-inline: var(--chip-padding-x);
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      border-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard);
+    white-space: nowrap;
+  }
+
+  button.ds-chip {
+    cursor: pointer;
+  }
+
+  .ds-chip--sm {
+    font-size: var(--text-xs);
+    gap: var(--space-1);
+    height: var(--chip-height-sm);
+    padding-inline: var(--space-2-5);
+  }
+
+  /* Selection is never color alone: a pressed toggle shows a check. */
+  .ds-chip__check {
+    display: none;
+    margin-inline-start: calc(-1 * var(--space-0-5));
+  }
+
+  .ds-chip[aria-pressed="true"] .ds-chip__check {
+    display: block;
+  }
+
+  .ds-chip.is-disabled,
+  .ds-chip:disabled {
+    color: var(--chip-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .ds-chip:hover {
+    background: var(--chip-bg-hover);
+    border-color: var(--chip-border-hover);
+    color: var(--chip-fg-hover);
+  }
+
+  .ds-chip[aria-pressed="true"],
+  .ds-chip.is-selected {
+    background: var(--chip-bg-selected);
+    border-color: var(--chip-border-selected);
+    color: var(--chip-fg-selected);
+  }
+
+  .ds-chip:focus-visible {
+    outline: var(--chip-focus-width) solid var(--chip-focus-color);
+    outline-offset: var(--chip-focus-offset);
+  }
+
+  .ds-chip__remove {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-full);
+    color: inherit;
+    display: inline-flex;
+    height: var(--space-4);
+    justify-content: center;
+    margin-inline-end: calc(-1 * var(--space-1));
+    padding: 0;
+    position: relative;
+    width: var(--space-4);
+  }
+
+  /* Keep the 14px glyph but give it a 24px pointer target. */
+  .ds-chip__remove::after {
+    content: "";
+    inset: calc(-1 * var(--space-1));
+    position: absolute;
+  }
+
+  .ds-chip__remove:hover {
+    background: var(--chip-remove-bg-hover);
+  }
+
+  .ds-chip__remove:focus-visible {
+    outline: var(--chip-focus-width) solid var(--chip-focus-color);
+    outline-offset: var(--chip-focus-offset);
+  }
+
+  .ds-chip__remove:disabled {
+    color: var(--chip-fg-disabled);
+    cursor: not-allowed;
+  }
+}