@digiko-npm/designsystem 0.1.0

package/src/components/avatar.css

@@ -0,0 +1,109 @@
+/* ==========================================================================
+   Component: Avatar
+   User photos, token images, initials. Stackable in groups.
+   ========================================================================== */
+
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-full);
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-none);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.ds-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* --- Sizes --- */
+
+.ds-avatar--xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: var(--ds-text-xs);
+}
+
+.ds-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--ds-text-xs);
+}
+
+.ds-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--ds-text-base);
+}
+
+.ds-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--ds-text-lg);
+}
+
+/* --- Shape variants --- */
+
+.ds-avatar--square {
+  border-radius: var(--ds-radius-lg);
+}
+
+.ds-avatar--bordered {
+  border: 2px solid var(--ds-color-surface);
+}
+
+/* --- Avatar Group --- */
+
+.ds-avatar-group {
+  display: flex;
+  align-items: center;
+}
+
+.ds-avatar-group > .ds-avatar + .ds-avatar {
+  margin-left: -0.5rem;
+}
+
+.ds-avatar-group--sm > .ds-avatar + .ds-avatar {
+  margin-left: -0.375rem;
+}
+
+/* --- Status indicator --- */
+
+.ds-avatar__status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--ds-radius-full);
+  border: 2px solid var(--ds-color-surface);
+}
+
+.ds-avatar__status--online {
+  background-color: var(--ds-color-success);
+}
+
+.ds-avatar__status--offline {
+  background-color: var(--ds-color-text-tertiary);
+}
+
+.ds-avatar__status--busy {
+  background-color: var(--ds-color-error);
+}

package/src/components/badge.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Component: Badge
+   Pill shape, border + subtle bg, clean and refined.
+   ========================================================================== */
+
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  padding: var(--ds-space-0-5) var(--ds-space-2-5);
+  font-size: var(--ds-text-xs);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  border-radius: var(--ds-radius-full);
+  white-space: nowrap;
+  border: 1px solid var(--ds-color-border);
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+}
+
+/* Semantic variants — subtle bg + bright text + subtle border */
+.ds-badge--primary {
+  background-color: var(--ds-color-info-subtle);
+  color: var(--ds-color-info);
+  border-color: var(--ds-color-info-border);
+}
+
+.ds-badge--success {
+  background-color: var(--ds-color-success-subtle);
+  color: var(--ds-color-success);
+  border-color: var(--ds-color-success-border);
+}
+
+.ds-badge--warning {
+  background-color: var(--ds-color-warning-subtle);
+  color: var(--ds-color-warning);
+  border-color: var(--ds-color-warning-border);
+}
+
+.ds-badge--error {
+  background-color: var(--ds-color-error-subtle);
+  color: var(--ds-color-error);
+  border-color: var(--ds-color-error-border);
+}
+
+.ds-badge--info {
+  background-color: var(--ds-color-accent-blue-subtle);
+  color: var(--ds-color-accent-blue);
+  border-color: rgba(37, 99, 235, 0.2);
+}
+
+.ds-badge--purple {
+  background-color: var(--ds-color-accent-purple-subtle);
+  color: var(--ds-color-accent-purple);
+  border-color: rgba(124, 58, 237, 0.2);
+}
+
+/* Outline (no bg) */
+.ds-badge--outline {
+  background-color: transparent;
+  border-color: var(--ds-color-border);
+  color: var(--ds-color-text-secondary);
+}
+
+/* Dot indicator */
+.ds-badge--dot::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ds-radius-full);
+  background-color: currentColor;
+}
+
+/* Uppercase badge (like "NEW", "BETA") */
+.ds-badge--upper {
+  text-transform: uppercase;
+  font-size: 10px;
+  font-weight: var(--ds-weight-semibold);
+  letter-spacing: var(--ds-tracking-wide);
+}

package/src/components/breadcrumb.css

@@ -0,0 +1,95 @@
+/* ==========================================================================
+   Breadcrumb Navigation
+   ==========================================================================
+   A horizontal breadcrumb trail for hierarchical navigation.
+
+   Usage:
+     <nav class="ds-breadcrumb" aria-label="Breadcrumb">
+       <span class="ds-breadcrumb__item">
+         <a href="/" class="ds-breadcrumb__link">Home</a>
+       </span>
+       <span class="ds-breadcrumb__item">
+         <a href="/products" class="ds-breadcrumb__link">Products</a>
+       </span>
+       <span class="ds-breadcrumb__item">
+         <span class="ds-breadcrumb__current" aria-current="page">Widget</span>
+       </span>
+     </nav>
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Container
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-size: var(--ds-text-sm);
+  font-family: var(--ds-font-sans);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Item
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+}
+
+/* Separator — rendered via ::after on every item except the last */
+.ds-breadcrumb__item:not(:last-child)::after {
+  content: "/";
+  color: var(--ds-color-text-tertiary);
+  flex-shrink: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Link
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__link {
+  color: var(--ds-color-text-tertiary);
+  text-decoration: none;
+  transition: color var(--ds-duration-fast) var(--ds-ease-out);
+}
+
+.ds-breadcrumb__link:hover {
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--ds-color-interactive);
+  outline-offset: 2px;
+  border-radius: var(--ds-radius-sm);
+}
+
+/* ---------------------------------------------------------------------------
+   Current page (non-interactive)
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb__current {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-medium);
+}
+
+/* ---------------------------------------------------------------------------
+   Modifier: Compact
+   --------------------------------------------------------------------------- */
+
+.ds-breadcrumb--compact {
+  gap: var(--ds-space-0-5, 0.125rem);
+  font-size: var(--ds-text-xs);
+}
+
+.ds-breadcrumb--compact .ds-breadcrumb__item {
+  gap: var(--ds-space-0-5, 0.125rem);
+}

package/src/components/button.css

@@ -0,0 +1,168 @@
+/* ==========================================================================
+   Component: Button
+   Inverted primary, rounded-full CTAs, refined sizing.
+   ========================================================================== */
+
+.ds-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-2) var(--ds-space-4);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-none);
+  white-space: nowrap;
+  border-radius: var(--ds-radius-lg);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--ds-duration-fast) ease;
+
+  /* Default: inverted (dark bg in light mode, light bg in dark mode) */
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+}
+
+.ds-btn:hover {
+  opacity: 0.9;
+}
+
+.ds-btn:focus-visible {
+  outline: var(--ds-ring-width) solid var(--ds-ring-color);
+  outline-offset: var(--ds-ring-offset);
+}
+
+.ds-btn:disabled,
+.ds-btn[aria-disabled="true"] {
+  opacity: var(--ds-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* --- Variants --- */
+
+.ds-btn--secondary {
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text);
+  border-color: var(--ds-color-border);
+}
+.ds-btn--secondary:hover {
+  border-color: var(--ds-color-border-hover);
+  background-color: var(--ds-color-surface);
+  opacity: 1;
+}
+
+.ds-btn--outline {
+  background-color: transparent;
+  color: var(--ds-color-text-secondary);
+  border-color: var(--ds-color-border);
+}
+.ds-btn--outline:hover {
+  color: var(--ds-color-text);
+  border-color: var(--ds-color-border-hover);
+  opacity: 1;
+}
+
+.ds-btn--ghost {
+  background-color: transparent;
+  color: var(--ds-color-text-secondary);
+}
+.ds-btn--ghost:hover {
+  color: var(--ds-color-text);
+  background-color: var(--ds-color-bg-elevated);
+  opacity: 1;
+}
+
+.ds-btn--danger {
+  background-color: var(--ds-color-error-subtle);
+  color: var(--ds-color-error);
+  border-color: var(--ds-color-error-border);
+}
+.ds-btn--danger:hover {
+  background-color: var(--ds-color-error);
+  color: #fff;
+  opacity: 1;
+}
+
+.ds-btn--success {
+  background-color: var(--ds-color-success-subtle);
+  color: var(--ds-color-success);
+  border-color: var(--ds-color-success-border);
+}
+.ds-btn--success:hover {
+  background-color: var(--ds-color-success);
+  color: #fff;
+  opacity: 1;
+}
+
+/* --- Sizes --- */
+
+.ds-btn--sm {
+  padding: var(--ds-space-1-5) var(--ds-space-3);
+  font-size: var(--ds-text-sm);
+  gap: var(--ds-space-1-5);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-btn--lg {
+  padding: var(--ds-space-3) var(--ds-space-6);
+  font-size: var(--ds-text-base);
+  border-radius: var(--ds-radius-lg);
+}
+
+/* --- Pill (rounded-full, like hero CTAs) --- */
+.ds-btn--pill {
+  border-radius: var(--ds-radius-full);
+  padding: var(--ds-space-3) var(--ds-space-6);
+}
+
+.ds-btn--pill.ds-btn--sm {
+  padding: var(--ds-space-2) var(--ds-space-5);
+}
+
+/* --- Full Width --- */
+.ds-btn--full { width: 100%; }
+
+/* --- Icon Only --- */
+.ds-btn--icon {
+  padding: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-btn--icon.ds-btn--sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* --- Button Group --- */
+.ds-btn-group {
+  display: inline-flex;
+}
+.ds-btn-group .ds-btn { border-radius: 0; }
+.ds-btn-group .ds-btn:first-child { border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg); }
+.ds-btn-group .ds-btn:last-child { border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0; }
+.ds-btn-group .ds-btn + .ds-btn { margin-left: -1px; }
+
+/* --- Loading spinner --- */
+.ds-btn--loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+}
+.ds-btn--loading::after {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--ds-radius-full);
+  animation: ds-btn-spin 0.6s linear infinite;
+  color: var(--ds-color-on-inverted);
+}
+@keyframes ds-btn-spin {
+  to { transform: rotate(360deg); }
+}

package/src/components/card.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   Component: Card
+   Surface + border, hover with shadow lift, rounded-xl.
+   ========================================================================== */
+
+.ds-card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  overflow: hidden;
+  transition: all var(--ds-duration-normal) var(--ds-ease-default);
+}
+
+/* Interactive card — lifts on hover (like ProjectCard) */
+.ds-card--interactive {
+  cursor: pointer;
+}
+.ds-card--interactive:hover {
+  border-color: var(--ds-color-border-hover);
+  box-shadow: var(--ds-shadow-lg);
+  transform: translateY(-4px);
+}
+
+/* Elevated card — visible shadow */
+.ds-card--elevated {
+  background-color: var(--ds-color-bg-elevated);
+  box-shadow: var(--ds-shadow-lg);
+}
+
+/* Hover card — subtle bg change */
+.ds-card--hover:hover {
+  border-color: var(--ds-color-border-hover);
+}
+
+.ds-card__header {
+  padding: var(--ds-space-5);
+  border-bottom: 1px solid var(--ds-color-border);
+}
+
+.ds-card__header h3,
+.ds-card__header .ds-card__title {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-lg);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+}
+
+.ds-card__description {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-card__body {
+  padding: var(--ds-space-5);
+}
+
+.ds-card__footer {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  border-top: 1px solid var(--ds-color-border);
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+.ds-card__media {
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+  background-color: var(--ds-color-bg-elevated);
+}
+
+/* Compact */
+.ds-card--compact .ds-card__header,
+.ds-card--compact .ds-card__body,
+.ds-card--compact .ds-card__footer {
+  padding: var(--ds-space-3) var(--ds-space-4);
+}
+
+/* Flush — no internal dividers */
+.ds-card--flush .ds-card__header { border-bottom: none; }
+.ds-card--flush .ds-card__footer { border-top: none; }
+
+/* Stat card (like StatCard component) */
+.ds-stat-card {
+  background-color: var(--ds-color-surface);
+  border: 1px solid var(--ds-color-border);
+  border-radius: var(--ds-radius-xl);
+  padding: var(--ds-space-5);
+}
+
+.ds-stat-card__label {
+  font-size: var(--ds-text-sm);
+  color: var(--ds-color-text-tertiary);
+}
+
+.ds-stat-card__value {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  font-size: var(--ds-text-2xl);
+  color: var(--ds-color-text);
+  margin-top: var(--ds-space-1);
+}
+
+.ds-stat-card__detail {
+  font-size: var(--ds-text-xs);
+  color: var(--ds-color-text-tertiary);
+  margin-top: var(--ds-space-0-5);
+}
+
+.ds-stat-card__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ds-radius-xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ds-color-bg-elevated);
+  color: var(--ds-color-text-secondary);
+}