@db-vincent/components 0.0.0-stage → 0.1.1

package/src/styles/accordion.css

@@ -0,0 +1,79 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-accordion {
+    display: grid;
+    gap: var(--accordion-gap);
+    max-width: var(--accordion-max-width);
+    width: 100%;
+  }
+
+  .ds-accordion__item {
+    background: var(--accordion-item-bg);
+    border: 1px solid var(--accordion-item-border);
+    border-radius: var(--accordion-item-radius);
+    overflow: hidden;
+  }
+
+  .ds-accordion__trigger {
+    align-items: center;
+    background: transparent;
+    color: var(--accordion-trigger-fg);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--accordion-font-size);
+    font-weight: var(--weight-medium);
+    gap: var(--space-4);
+    justify-content: space-between;
+    list-style: none;
+    padding: var(--accordion-trigger-padding-y)
+      var(--accordion-trigger-padding-x);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+    width: 100%;
+  }
+
+  .ds-accordion__trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  .ds-accordion__trigger:hover {
+    background: var(--accordion-trigger-bg-hover);
+  }
+
+  .ds-accordion__item[open] .ds-accordion__trigger {
+    background: var(--accordion-trigger-bg-open);
+  }
+
+  .ds-accordion__trigger:focus-visible {
+    outline: var(--accordion-focus-width) solid var(--accordion-focus-color);
+    outline-offset: var(--accordion-focus-offset);
+  }
+
+  .ds-accordion__icon {
+    color: var(--accordion-icon);
+    transition: transform var(--duration-base) var(--ease-standard);
+  }
+
+  .ds-accordion__item[open] .ds-accordion__icon {
+    transform: rotate(180deg);
+  }
+
+  .ds-accordion__panel {
+    background: var(--accordion-panel-bg);
+    border-top: 1px solid var(--accordion-panel-border);
+    color: var(--accordion-panel-fg);
+    font-size: var(--accordion-font-size);
+    line-height: var(--leading-base);
+    padding: var(--accordion-panel-padding);
+  }
+
+  .ds-accordion__panel > * + * {
+    margin-top: var(--space-3);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-accordion__icon {
+      transition: none;
+    }
+  }
+}

package/src/styles/alert.css

@@ -0,0 +1,108 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-alert {
+    background: var(--alert-info-bg);
+    border: 1px solid var(--alert-info-border);
+    border-radius: var(--alert-radius);
+    color: var(--alert-info-fg);
+    display: flex;
+    gap: var(--alert-gap);
+    padding: var(--alert-padding);
+  }
+
+  .ds-alert--success {
+    background: var(--alert-success-bg);
+    border-color: var(--alert-success-border);
+    color: var(--alert-success-fg);
+  }
+
+  .ds-alert--warning {
+    background: var(--alert-warning-bg);
+    border-color: var(--alert-warning-border);
+    color: var(--alert-warning-fg);
+  }
+
+  .ds-alert--danger {
+    background: var(--alert-danger-bg);
+    border-color: var(--alert-danger-border);
+    color: var(--alert-danger-fg);
+  }
+
+  .ds-alert__icon {
+    flex: none;
+    margin-block-start: 0.1rem;
+  }
+
+  .ds-alert__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .ds-alert__title {
+    font-size: var(--alert-title-size);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-sm);
+  }
+
+  .ds-alert__body {
+    color: var(--alert-body-fg);
+    font-size: var(--alert-body-size);
+    line-height: var(--leading-sm);
+    margin-block-start: var(--space-1);
+  }
+
+  .ds-alert__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-block-start: var(--space-3);
+  }
+
+  .ds-alert__close {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: var(--alert-info-close-fg);
+    display: inline-flex;
+    flex: none;
+    height: var(--space-7);
+    justify-content: center;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+    width: var(--space-7);
+  }
+
+  .ds-alert--success .ds-alert__close {
+    color: var(--alert-success-close-fg);
+  }
+
+  .ds-alert--warning .ds-alert__close {
+    color: var(--alert-warning-close-fg);
+  }
+
+  .ds-alert--danger .ds-alert__close {
+    color: var(--alert-danger-close-fg);
+  }
+
+  .ds-alert__close:hover {
+    background: var(--alert-info-close-bg-hover);
+  }
+
+  .ds-alert--success .ds-alert__close:hover {
+    background: var(--alert-success-close-bg-hover);
+  }
+
+  .ds-alert--warning .ds-alert__close:hover {
+    background: var(--alert-warning-close-bg-hover);
+  }
+
+  .ds-alert--danger .ds-alert__close:hover {
+    background: var(--alert-danger-close-bg-hover);
+  }
+
+  .ds-alert__close:focus-visible {
+    outline: var(--alert-focus-width) solid var(--alert-focus-color);
+    outline-offset: var(--alert-focus-offset);
+  }
+}

package/src/styles/avatar.css

@@ -0,0 +1,131 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-avatar {
+    --ds-avatar-size: var(--avatar-size-md);
+    --ds-avatar-font-size: var(--avatar-font-size-md);
+    --ds-avatar-status-size: var(--avatar-status-size-md);
+    --ds-avatar-radius: var(--avatar-radius-circle);
+
+    border-radius: var(--ds-avatar-radius);
+    display: inline-flex;
+    flex: none;
+    height: var(--ds-avatar-size);
+    position: relative;
+    vertical-align: middle;
+    width: var(--ds-avatar-size);
+  }
+
+  .ds-avatar--sm {
+    --ds-avatar-size: var(--avatar-size-sm);
+    --ds-avatar-font-size: var(--avatar-font-size-sm);
+    --ds-avatar-status-size: var(--avatar-status-size-sm);
+  }
+
+  .ds-avatar--lg {
+    --ds-avatar-size: var(--avatar-size-lg);
+    --ds-avatar-font-size: var(--avatar-font-size-lg);
+    --ds-avatar-status-size: var(--avatar-status-size-lg);
+  }
+
+  .ds-avatar--square {
+    --ds-avatar-radius: var(--avatar-radius-square);
+  }
+
+  .ds-avatar__face {
+    background: var(--avatar-bg);
+    border: 1px solid var(--avatar-border);
+    border-radius: inherit;
+    color: var(--avatar-fg);
+    display: grid;
+    inset: 0;
+    overflow: hidden;
+    place-items: center;
+    position: absolute;
+  }
+
+  .ds-avatar__fallback {
+    font-family: var(--avatar-font);
+    font-size: var(--ds-avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+    letter-spacing: var(--type-label-tracking);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ds-avatar__count {
+    font-family: var(--avatar-count-font);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ds-avatar__img {
+    grid-area: 1 / 1;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .ds-avatar__fallback {
+    grid-area: 1 / 1;
+  }
+
+  .ds-avatar[data-failed] .ds-avatar__img {
+    display: none;
+  }
+
+  /* Status is never colour alone: busy carries a bar, away and offline are
+     hollow, and the text lives in the avatar's accessible name. */
+  .ds-avatar__status {
+    --ds-avatar-status-color: var(--avatar-status-online);
+
+    background: var(--ds-avatar-status-color);
+    border: 1px solid var(--ds-avatar-status-color);
+    border-radius: var(--avatar-radius-circle);
+    height: var(--ds-avatar-status-size);
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    outline: var(--avatar-ring-width) solid var(--avatar-ring);
+    position: absolute;
+    width: var(--ds-avatar-status-size);
+  }
+
+  .ds-avatar__status--away {
+    --ds-avatar-status-color: var(--avatar-status-away);
+
+    background: var(--avatar-status-mark);
+  }
+
+  .ds-avatar__status--busy {
+    --ds-avatar-status-color: var(--avatar-status-busy);
+  }
+
+  .ds-avatar__status--busy::after {
+    background: var(--avatar-status-mark);
+    content: "";
+    height: var(--avatar-ring-width);
+    inset-inline: 20%;
+    position: absolute;
+    top: calc(50% - var(--avatar-ring-width) / 2);
+  }
+
+  .ds-avatar__status--offline {
+    --ds-avatar-status-color: var(--avatar-status-offline);
+
+    background: var(--avatar-status-mark);
+  }
+
+  .ds-avatar-group {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .ds-avatar-group .ds-avatar {
+    outline: var(--avatar-ring-width) solid var(--avatar-ring);
+  }
+
+  .ds-avatar-group .ds-avatar + .ds-avatar {
+    margin-inline-start: calc(
+      var(--ds-avatar-size) * -1 * var(--avatar-overlap-ratio)
+    );
+  }
+}

package/src/styles/badge.css

@@ -0,0 +1,48 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@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,205 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@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,54 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@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;
+  }
+}