@db-vincent/components 0.0.0-stage → 0.1.1

package/src/styles/motion.css

@@ -0,0 +1,114 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer motion {
+  .ds-motion-lift,
+  .ds-motion-underline,
+  .ds-motion-arrow,
+  .ds-motion-row {
+    --ds-motion-time: var(--motion-duration);
+    --ds-motion-delay: var(--motion-delay-none);
+  }
+
+  .ds-motion-fast {
+    --ds-motion-time: var(--motion-duration-fast);
+  }
+
+  .ds-motion-slow {
+    --ds-motion-time: var(--motion-duration-slow);
+  }
+
+  .ds-motion-delay {
+    --ds-motion-delay: var(--motion-delay-short);
+  }
+
+  .ds-motion-delay-long {
+    --ds-motion-delay: var(--motion-delay-long);
+  }
+
+  .ds-motion-lift {
+    transition:
+      transform var(--ds-motion-time) var(--motion-ease) var(--ds-motion-delay),
+      box-shadow var(--ds-motion-time) var(--motion-ease) var(--ds-motion-delay),
+      border-color var(--ds-motion-time) var(--motion-ease)
+        var(--ds-motion-delay);
+  }
+
+  .ds-motion-lift:focus-visible {
+    box-shadow: var(--motion-lift-shadow);
+    transform: translateY(var(--motion-lift-y));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-lift:hover {
+      box-shadow: var(--motion-lift-shadow);
+      transform: translateY(var(--motion-lift-y));
+    }
+  }
+
+  .ds-motion-underline {
+    background-image: linear-gradient(currentColor, currentColor);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    background-size: 0 var(--motion-underline-thickness);
+    padding-block-end: var(--motion-underline-offset);
+    text-decoration: none;
+    transition: background-size var(--ds-motion-time) var(--motion-ease)
+      var(--ds-motion-delay);
+  }
+
+  .ds-motion-underline:hover,
+  .ds-motion-underline:focus-visible {
+    background-size: 100% var(--motion-underline-thickness);
+  }
+
+  .ds-motion-arrow {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--space-2);
+    text-decoration: none;
+  }
+
+  .ds-motion-arrow__target {
+    display: inline-flex;
+    transition: transform var(--ds-motion-time) var(--motion-ease)
+      var(--ds-motion-delay);
+  }
+
+  .ds-motion-arrow:focus-visible .ds-motion-arrow__target {
+    transform: translateX(var(--motion-nudge));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-arrow:hover .ds-motion-arrow__target {
+      transform: translateX(var(--motion-nudge));
+    }
+  }
+
+  .ds-motion-row {
+    transition:
+      background-color var(--ds-motion-time) var(--motion-ease)
+        var(--ds-motion-delay),
+      transform var(--ds-motion-time) var(--motion-ease) var(--ds-motion-delay);
+  }
+
+  .ds-motion-row:focus-within {
+    transform: translateX(var(--motion-row-nudge));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .ds-motion-row:hover {
+      transform: translateX(var(--motion-row-nudge));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-motion-lift:hover,
+    .ds-motion-lift:focus-visible,
+    .ds-motion-arrow:hover .ds-motion-arrow__target,
+    .ds-motion-arrow:focus-visible .ds-motion-arrow__target,
+    .ds-motion-row:hover,
+    .ds-motion-row:focus-within {
+      transform: none;
+    }
+  }
+}

package/src/styles/nav.css

@@ -0,0 +1,232 @@
+@layer reset, tokens, base, components, motion, utilities;
+
+@layer components {
+  .ds-nav {
+    background: var(--nav-bg);
+    border-inline-end: 1px solid var(--nav-border);
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    padding: var(--space-4);
+    width: var(--nav-width);
+  }
+
+  .ds-nav__brand {
+    align-items: center;
+    color: var(--nav-brand-fg);
+    display: flex;
+    font-size: var(--nav-brand-size);
+    font-weight: var(--weight-semibold);
+    gap: var(--space-2-5);
+    letter-spacing: var(--type-heading-tracking);
+    min-height: var(--space-10);
+    padding-inline: var(--nav-item-padding-x);
+    text-decoration: none;
+  }
+
+  .ds-nav__brand-mark {
+    align-items: center;
+    background: var(--nav-brand-mark-bg);
+    border-radius: var(--radius-sm);
+    color: var(--nav-brand-mark-fg);
+    display: inline-flex;
+    height: var(--space-7);
+    justify-content: center;
+    width: var(--space-7);
+  }
+
+  .ds-nav__scroll {
+    flex: 1;
+    margin-block-start: var(--space-6);
+    overflow-y: auto;
+    scrollbar-color: var(--nav-scrollbar) transparent;
+    scrollbar-width: thin;
+  }
+
+  .ds-nav__group + .ds-nav__group {
+    margin-block-start: var(--space-6);
+  }
+
+  .ds-nav__group-label {
+    color: var(--nav-group-label-fg);
+    font-family: var(--font-body);
+    font-size: var(--nav-group-label-size);
+    font-weight: var(--type-overline-weight);
+    letter-spacing: var(--type-overline-tracking);
+    padding-inline: var(--nav-item-padding-x);
+    text-transform: uppercase;
+  }
+
+  .ds-nav__list {
+    display: grid;
+    gap: var(--space-0-5);
+    list-style: none;
+    margin-block-start: var(--space-2);
+    padding: 0;
+  }
+
+  .ds-nav__link,
+  .ds-nav__summary {
+    align-items: center;
+    border-radius: var(--nav-item-radius);
+    color: var(--nav-item-fg);
+    display: flex;
+    font-size: var(--text-sm);
+    gap: var(--nav-item-gap);
+    min-height: var(--nav-item-height);
+    padding: var(--space-1) var(--nav-item-padding-x);
+    text-decoration: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard);
+    width: 100%;
+  }
+
+  .ds-nav__link:hover,
+  .ds-nav__summary:hover {
+    background: var(--nav-item-bg-hover);
+    color: var(--nav-item-fg-hover);
+  }
+
+  .ds-nav__link[aria-current="page"] {
+    background: var(--nav-item-bg-active);
+    color: var(--nav-item-fg-active);
+    font-weight: var(--weight-medium);
+  }
+
+  .ds-nav__link[aria-current="page"] .ds-nav__icon {
+    color: var(--nav-item-indicator);
+  }
+
+  .ds-nav__link:focus-visible,
+  .ds-nav__summary:focus-visible {
+    outline: var(--nav-focus-width) solid var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+
+  .ds-nav__icon {
+    color: var(--nav-icon);
+    flex: none;
+  }
+
+  .ds-nav__summary[data-active="true"] {
+    color: var(--nav-item-fg-active);
+    font-weight: var(--weight-medium);
+  }
+
+  .ds-nav__summary[data-active="true"] .ds-nav__icon {
+    color: var(--nav-item-indicator);
+  }
+
+  .ds-nav__badge {
+    margin-inline-start: auto;
+  }
+
+  .ds-nav__summary {
+    cursor: pointer;
+    justify-content: flex-start;
+    list-style: none;
+  }
+
+  .ds-nav__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .ds-nav__summary .ds-nav__chevron {
+    margin-inline-start: auto;
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-nav__submenu[open] > .ds-nav__summary .ds-nav__chevron {
+    transform: rotate(90deg);
+  }
+
+  .ds-nav__submenu .ds-nav__list {
+    border-inline-start: 1px solid var(--nav-border);
+    margin-block-start: var(--space-1);
+    margin-inline-start: calc(var(--nav-item-padding-x) + var(--space-2));
+    padding-inline-start: var(--space-2);
+  }
+
+  .ds-nav__footer {
+    border-top: 1px solid var(--nav-border);
+    margin-block-start: var(--space-4);
+    padding-block-start: var(--space-4);
+  }
+
+  .ds-nav__mobilebar {
+    align-items: center;
+    background: var(--nav-mobilebar-bg);
+    border-bottom: 1px solid var(--nav-border);
+    display: none;
+    gap: var(--space-3);
+    justify-content: space-between;
+    min-height: var(--layout-header);
+    padding-inline: var(--space-4);
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+  }
+
+  .ds-nav__toggle {
+    align-items: center;
+    background: var(--nav-toggle-bg);
+    border: 1px solid var(--nav-toggle-border);
+    border-radius: var(--radius-sm);
+    color: var(--nav-toggle-fg);
+    display: inline-flex;
+    height: var(--space-10);
+    justify-content: center;
+    width: var(--space-10);
+  }
+
+  .ds-nav__toggle:focus-visible {
+    outline: var(--nav-focus-width) solid var(--nav-focus-color);
+    outline-offset: var(--nav-focus-offset);
+  }
+
+  .ds-nav__backdrop {
+    background: var(--nav-mobile-backdrop);
+    inset: 0;
+    opacity: 0;
+    position: fixed;
+    transition: opacity var(--duration-base) var(--ease-standard);
+    visibility: hidden;
+    z-index: var(--z-overlay);
+  }
+
+  @media (max-width: 900px) {
+    .ds-nav {
+      inset-block: 0;
+      inset-inline-start: 0;
+      position: fixed;
+      transform: translateX(-100%);
+      transition: transform var(--duration-base) var(--ease-standard);
+      z-index: var(--z-modal);
+    }
+
+    .ds-nav__mobilebar {
+      display: flex;
+    }
+
+    .ds-nav__backdrop {
+      display: block;
+    }
+
+    .ds-nav[data-open="true"] {
+      transform: none;
+    }
+
+    .ds-nav[data-open="true"] + .ds-nav__backdrop {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-nav,
+    .ds-nav__backdrop {
+      transition: none;
+    }
+  }
+}