Extend NDS patterns and migrate shared UI surfaces

website/src/styles/design-system/attributes/_patterns.scss

@@ -0,0 +1,212 @@
+// Rôle : expose les primitives NDS publiques pour surfaces, feedback et overlays.
+@use "../controls";
+@use "../surfaces";
+
+.nds-panel {
+  @include controls.panel-surface;
+}
+
+.nds-panel[data-variant="interactive"] {
+  @include controls.panel-surface(true);
+}
+
+.nds-card {
+  @include controls.card-pattern;
+}
+
+@supports (corner-shape: scoop) {
+  .nds-card {
+    corner-shape: scoop;
+  }
+}
+
+.nds-card[data-variant="interactive"]:hover,
+.nds-card[data-variant="interactive"]:focus-within {
+  @include controls.card-pattern-hover;
+}
+
+.nds-card-cover {
+  min-height: 124px;
+  @include surfaces.card-cover-divider;
+}
+
+.nds-card-body {
+  padding: var(--space-5);
+}
+
+.nds-card-actions {
+  margin-top: var(--space-5);
+}
+
+.nds-tool-panel {
+  @include controls.tool-panel-surface;
+}
+
+.nds-tool-panel[data-variant="interactive"]:hover,
+.nds-tool-panel[data-variant="tool"]:hover {
+  box-shadow:
+    var(--shadow-sm),
+    0 0 14px rgba(139, 92, 246, 0.14),
+    0 0 24px rgba(196, 181, 253, 0.08);
+}
+
+.nds-toolbar {
+  @include controls.toolbar-pattern;
+}
+
+.nds-section-heading {
+  @include controls.section-heading-pattern;
+}
+
+.nds-page-hero {
+  @include controls.page-hero-pattern(true);
+}
+
+.nds-badge {
+  @include controls.badge-pattern;
+}
+
+.nds-badge[data-variant="neutral"] {
+  @include controls.badge-pattern(neutral);
+}
+
+.nds-badge[data-variant="gold"] {
+  @include controls.badge-pattern(gold);
+}
+
+.nds-badge[data-variant="success"] {
+  @include controls.badge-pattern(success);
+}
+
+.nds-badge[data-variant="warning"] {
+  @include controls.badge-pattern(warning);
+}
+
+.nds-badge[data-variant="danger"] {
+  @include controls.badge-pattern(danger);
+}
+
+.nds-chip {
+  @include controls.chip-pattern;
+}
+
+.nds-chip:hover,
+.nds-chip.active,
+.nds-chip.is-active,
+.nds-chip[aria-pressed="true"],
+.nds-chip:has(input:checked) {
+  @include controls.chip-active;
+}
+
+.nds-chip[data-size="sm"] {
+  min-height: 34px;
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+}
+
+.nds-empty-state {
+  @include controls.empty-state-pattern;
+}
+
+.nds-inline-notice {
+  @include controls.inline-notice-pattern;
+}
+
+.nds-inline-notice[data-variant="success"] {
+  @include controls.inline-notice-pattern(success);
+}
+
+.nds-inline-notice[data-variant="warning"] {
+  @include controls.inline-notice-pattern(warning);
+}
+
+.nds-inline-notice[data-variant="danger"] {
+  @include controls.inline-notice-pattern(danger);
+}
+
+.nds-progress {
+  @include controls.progress-pattern;
+}
+
+.nds-progress > span,
+.nds-progress-bar {
+  @include controls.progress-bar-pattern;
+}
+
+.nds-progress[data-variant="success"] > span,
+.nds-progress[data-variant="success"] .nds-progress-bar {
+  @include controls.progress-bar-pattern(success);
+}
+
+.nds-progress[data-variant="warning"] > span,
+.nds-progress[data-variant="warning"] .nds-progress-bar {
+  @include controls.progress-bar-pattern(warning);
+}
+
+.nds-progress[data-variant="danger"] > span,
+.nds-progress[data-variant="danger"] .nds-progress-bar {
+  @include controls.progress-bar-pattern(danger);
+}
+
+.nds-filter-panel {
+  @include controls.filter-panel-pattern;
+}
+
+.nds-reorder-indicator,
+.nds-reorder-indicator[data-axis="vertical"][data-placement="before"] {
+  @include controls.reorder-indicator-pattern(vertical, before);
+}
+
+.nds-reorder-indicator[data-axis="vertical"][data-placement="after"] {
+  @include controls.reorder-indicator-pattern(vertical, after);
+}
+
+.nds-reorder-indicator[data-axis="horizontal"][data-placement="before"] {
+  @include controls.reorder-indicator-pattern(horizontal, before);
+}
+
+.nds-reorder-indicator[data-axis="horizontal"][data-placement="after"] {
+  @include controls.reorder-indicator-pattern(horizontal, after);
+}
+
+.nds-modal {
+  @include controls.modal-panel-pattern;
+}
+
+.nds-modal-backdrop {
+  @include controls.overlay-backdrop-pattern;
+}
+
+.nds-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.nds-drawer-panel {
+  @include controls.drawer-panel-pattern;
+}
+
+.nds-drawer-resize-handle {
+  @include controls.drawer-resize-handle-pattern;
+}
+
+.nds-popover {
+  @include controls.popover-pattern;
+}
+
+.nds-toast-stack {
+  @include controls.toast-stack-pattern;
+}
+
+.nds-toast-stack[data-position="right"] {
+  right: var(--space-5);
+}
+
+.nds-toast-stack[data-position="left"] {
+  left: var(--space-5);
+}
+
+.nds-toast {
+  @include controls.toast-pattern;
+}