@usefidel/design-system 0.13.0 → 0.15.0

package/dist/index.css

@@ -127,6 +127,44 @@
   color: #a3a3a3;
   cursor: not-allowed;
 }
+.fds-button--danger {
+  background-color: var(--color-error, #b91c1c);
+  color: #ffffff;
+}
+.fds-button--danger:hover:not(:disabled) {
+  background-color: var(--color-error-text, #991b1b);
+}
+.fds-button--danger:active:not(:disabled) {
+  background-color: #7f1d1d;
+}
+.fds-button--danger:focus-visible {
+  outline-color: var(--color-error, #b91c1c);
+}
+.fds-button--danger:disabled {
+  background-color: var(--color-error-bg, #fef2f2);
+  color: #f87171;
+  cursor: not-allowed;
+}
+.fds-button--danger-outlined {
+  background-color: #ffffff;
+  border-color: var(--color-error-border, #fecaca);
+  color: var(--color-error, #b91c1c);
+}
+.fds-button--danger-outlined:hover:not(:disabled) {
+  background-color: var(--color-error-bg, #fef2f2);
+  border-color: #fca5a5;
+}
+.fds-button--danger-outlined:active:not(:disabled) {
+  background-color: #fee2e2;
+}
+.fds-button--danger-outlined:focus-visible {
+  outline-color: var(--color-error, #b91c1c);
+}
+.fds-button--danger-outlined:disabled {
+  border-color: #e5e5e5;
+  color: #a3a3a3;
+  cursor: not-allowed;
+}
 .fds-button--neutral {
   background-color: var(--color-surface-subtle, #fafafa);
   color: var(--color-text-on-neutral, #404040);
@@ -778,3 +816,608 @@
   line-height: var(--line-height-text-sm, 22px);
   color: var(--color-text-secondary, #525252);
 }
+
+/* src/components/AppNav/app-nav.css */
+.fds-app-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-5, 20px);
+  height: 64px;
+  padding: 0 var(--spacing-5, 20px);
+  background: var(--color-surface, #f4f4f4);
+  border-bottom: 1px solid var(--color-border-light, #e5e5e5);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+.fds-app-nav__logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.fds-app-nav__links {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex: 1;
+  min-width: 0;
+}
+.fds-app-nav__links > * {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex-shrink: 0;
+  padding: 10px var(--spacing-3, 12px);
+  color: var(--color-text-muted, #a3a3a3);
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-app-nav__links > *:hover,
+.fds-app-nav__links > [aria-current=page] {
+  color: var(--color-text, #171717);
+}
+.fds-app-nav__links > *:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm, 6px);
+}
+.fds-app-nav__links > [aria-current=page]::after {
+  content: "";
+  position: absolute;
+  left: var(--spacing-3, 12px);
+  right: var(--spacing-3, 12px);
+  bottom: 2px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--color-accent, #ea580c);
+}
+.fds-app-nav__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.fds-app-nav__toggle {
+  display: none;
+}
+@media (max-width: 640px) {
+  .fds-app-nav {
+    gap: var(--spacing-2, 8px);
+    padding: 0 var(--spacing-3, 12px) 0 var(--spacing-4, 16px);
+  }
+  .fds-app-nav__toggle {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-md, 8px);
+    background: transparent;
+    color: var(--color-text, #171717);
+    cursor: pointer;
+    transition: background-color var(--duration-quick, 150ms) var(--ease-out, ease);
+  }
+  .fds-app-nav__toggle:hover,
+  .fds-app-nav__toggle[aria-expanded=true] {
+    background: var(--color-surface-hover, #ebebeb);
+  }
+  .fds-app-nav__toggle:focus-visible {
+    outline: 2px solid var(--color-accent, #ea580c);
+    outline-offset: 2px;
+  }
+  .fds-app-nav__links {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    padding: var(--spacing-2, 8px);
+    background: var(--color-surface-raised, #ffffff);
+    border-bottom: 1px solid var(--color-border-light, #e5e5e5);
+    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
+  }
+  .fds-app-nav__links[data-open] {
+    display: flex;
+    animation: fds-app-nav-menu-in var(--duration-quick, 150ms) var(--ease-out, ease) both;
+  }
+  .fds-app-nav__links > * {
+    padding: 12px var(--spacing-3, 12px);
+    border-radius: var(--radius-md, 8px);
+    font-size: 15px;
+    line-height: 22px;
+    color: var(--color-text-secondary, #525252);
+  }
+  .fds-app-nav__links > *:hover {
+    background: var(--color-surface, #f4f4f4);
+  }
+  .fds-app-nav__links > [aria-current=page] {
+    color: var(--color-text, #171717);
+    background: var(--color-surface, #f4f4f4);
+  }
+  .fds-app-nav__links > [aria-current=page]::after {
+    display: none;
+  }
+}
+@keyframes fds-app-nav-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-app-nav__links[data-open] {
+    animation: none;
+  }
+}
+
+/* src/components/TabNav/tab-nav.css */
+.fds-tab-nav {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-1, 4px);
+  overflow-x: auto;
+  scrollbar-width: none;
+  box-shadow: inset 0 -1px 0 var(--color-border-light, #e5e5e5);
+}
+.fds-tab-nav::-webkit-scrollbar {
+  display: none;
+}
+.fds-tab-nav > * {
+  position: relative;
+  flex-shrink: 0;
+  padding: 10px 14px;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  color: var(--color-text-muted, #a3a3a3);
+  background: transparent;
+  text-decoration: none;
+  transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-tab-nav > *:hover {
+  color: var(--color-text, #171717);
+}
+.fds-tab-nav > *:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+  border-radius: var(--radius-xs, 4px);
+}
+.fds-tab-nav > [aria-current=page] {
+  color: var(--color-text, #171717);
+  font-weight: 600;
+}
+.fds-tab-nav > [aria-current=page]::after {
+  content: "";
+  position: absolute;
+  left: var(--spacing-2, 8px);
+  right: var(--spacing-2, 8px);
+  bottom: 0;
+  height: 2px;
+  border-radius: 1px 1px 0 0;
+  background: var(--color-accent, #ea580c);
+}
+@media (max-width: 640px) {
+  .fds-tab-nav {
+    -webkit-mask-image:
+      linear-gradient(
+        to right,
+        #000 calc(100% - 24px),
+        transparent);
+    mask-image:
+      linear-gradient(
+        to right,
+        #000 calc(100% - 24px),
+        transparent);
+    padding-right: 24px;
+  }
+  .fds-tab-nav > * {
+    padding: 10px var(--spacing-3, 12px);
+  }
+}
+
+/* src/components/SettingsSection/settings-section.css */
+.fds-settings-section {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: var(--spacing-12, 48px);
+  align-items: start;
+  padding: var(--spacing-8, 32px) 0;
+  border-bottom: 1px solid var(--color-border-light, #e5e5e5);
+}
+.fds-settings-section:first-child {
+  padding-top: 0;
+}
+.fds-settings-section:last-child {
+  border-bottom: none;
+}
+.fds-settings-section__head {
+  position: sticky;
+  top: var(--spacing-6, 24px);
+}
+.fds-settings-section__title {
+  margin: 0 0 var(--spacing-2, 8px);
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 14.5px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--color-text, #171717);
+}
+.fds-settings-section__description {
+  margin: 0;
+  max-width: 32ch;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-settings-section__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+  min-width: 0;
+}
+@media (max-width: 900px) {
+  .fds-settings-section {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-4, 16px);
+    padding: var(--spacing-6, 24px) 0;
+  }
+  .fds-settings-section__head {
+    position: static;
+  }
+  .fds-settings-section__description {
+    max-width: none;
+  }
+}
+
+/* src/components/Modal/modal.css */
+.fds-modal__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  place-items: center;
+  padding: var(--spacing-6, 24px);
+  background: rgba(10, 10, 10, 0.42);
+  animation: fds-modal-scrim-in var(--duration-moderate, 200ms) var(--ease-out, ease) both;
+}
+.fds-modal {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  max-height: calc(100dvh - 2 * var(--spacing-6, 24px));
+  overflow-y: auto;
+  padding: var(--spacing-8, 32px) var(--spacing-8, 32px) var(--spacing-6, 24px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 16px);
+  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
+  animation: fds-modal-in var(--duration-slow, 300ms) var(--ease-out, ease) both;
+}
+.fds-modal:focus {
+  outline: none;
+}
+.fds-modal--small {
+  max-width: 420px;
+}
+.fds-modal--medium {
+  max-width: 560px;
+}
+.fds-modal__close {
+  position: absolute;
+  top: var(--spacing-4, 16px);
+  right: var(--spacing-4, 16px);
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  background: transparent;
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: pointer;
+  transition: color var(--duration-quick, 150ms) var(--ease-out, ease), background-color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-modal__close:hover:not(:disabled) {
+  color: var(--color-text, #171717);
+  background: var(--color-surface, #f4f4f4);
+}
+.fds-modal__close:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-modal__close:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.fds-modal__icon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: var(--spacing-4, 16px);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-error-bg, #fef2f2);
+  color: var(--color-error, #b91c1c);
+}
+.fds-modal__title {
+  margin: 0 var(--spacing-8, 32px) var(--spacing-3, 12px) 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+  color: var(--color-text, #171717);
+}
+.fds-modal__description {
+  margin: 0 0 var(--spacing-5, 20px);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-modal__content {
+  margin-bottom: var(--spacing-5, 20px);
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-2, 8px);
+}
+@keyframes fds-modal-scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fds-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-modal__scrim,
+  .fds-modal {
+    animation: none;
+  }
+}
+@media (max-width: 480px) {
+  .fds-modal__scrim {
+    padding: var(--spacing-4, 16px);
+  }
+  .fds-modal {
+    max-height: calc(100dvh - 2 * var(--spacing-4, 16px));
+    padding: var(--spacing-6, 24px) var(--spacing-5, 20px) var(--spacing-5, 20px);
+  }
+  .fds-modal__actions {
+    flex-direction: column-reverse;
+  }
+  .fds-modal__actions > * {
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
+
+/* src/components/SegmentedControl/segmented-control.css */
+.fds-segmented {
+  box-sizing: border-box;
+  display: flex;
+  max-width: 100%;
+  gap: var(--spacing-1, 4px);
+  overflow-x: auto;
+  scrollbar-width: none;
+  box-shadow: inset 0 -1px 0 var(--color-border-light, #e5e5e5);
+}
+.fds-segmented::-webkit-scrollbar {
+  display: none;
+}
+.fds-segmented__option {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 10px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted, #a3a3a3);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-segmented__option:hover:not(:disabled) {
+  color: var(--color-text, #171717);
+}
+.fds-segmented__option:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+  border-radius: var(--radius-xs, 4px);
+}
+.fds-segmented__option[aria-selected=true] {
+  color: var(--color-text, #171717);
+  font-weight: 600;
+}
+.fds-segmented__option[aria-selected=true]::after {
+  content: "";
+  position: absolute;
+  left: var(--spacing-2, 8px);
+  right: var(--spacing-2, 8px);
+  bottom: 0;
+  height: 2px;
+  border-radius: 1px 1px 0 0;
+  background: var(--color-text, #171717);
+}
+.fds-segmented__option:disabled {
+  color: #d4d4d4;
+  cursor: not-allowed;
+}
+.fds-segmented__count {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-accent-subtle, #ffedd5);
+  color: var(--color-accent-text, #c2410c);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.fds-segmented__option[aria-selected=true] .fds-segmented__count {
+  background: var(--color-accent, #ea580c);
+  color: #ffffff;
+}
+.fds-segmented__option:disabled .fds-segmented__count {
+  background: #f5f5f5;
+  color: #a3a3a3;
+}
+@media (max-width: 640px) {
+  .fds-segmented {
+    padding-right: 24px;
+    -webkit-mask-image:
+      linear-gradient(
+        to right,
+        #000 calc(100% - 24px),
+        transparent);
+    mask-image:
+      linear-gradient(
+        to right,
+        #000 calc(100% - 24px),
+        transparent);
+  }
+}
+
+/* src/components/Avatar/avatar.css */
+.fds-avatar {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-accent-subtle, #ffedd5);
+  color: var(--color-accent-text, #c2410c);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+.fds-avatar--small {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+}
+.fds-avatar--medium {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+.fds-avatar--large {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+.fds-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* src/components/SectionHeader/section-header.css */
+.fds-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  min-width: 0;
+}
+.fds-section-header__title {
+  margin: 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 14.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.005em;
+  color: var(--color-text, #171717);
+}
+.fds-section-header__description {
+  margin: 0;
+  max-width: 60ch;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--color-text-muted, #a3a3a3);
+}
+
+/* src/components/Split/split.css */
+.fds-split {
+  display: grid;
+  grid-template-columns: var(--fds-split-aside, 280px) minmax(0, 1fr);
+  gap: var(--spacing-12, 48px);
+  align-items: start;
+}
+.fds-split__aside,
+.fds-split__main {
+  min-width: 0;
+}
+.fds-split__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+}
+.fds-split--sticky .fds-split__aside {
+  position: sticky;
+  top: var(--spacing-6, 24px);
+}
+@media (max-width: 900px) {
+  .fds-split--collapse-lg {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-4, 16px);
+  }
+  .fds-split--collapse-lg .fds-split__aside {
+    position: static;
+  }
+}
+@media (max-width: 640px) {
+  .fds-split--collapse-md {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-4, 16px);
+  }
+  .fds-split--collapse-md .fds-split__aside {
+    position: static;
+  }
+}