feat: add Select and SelectOption components with styles and integration into index page

2026-06-16 14:10:49 +02:00
parent 03a92db05e
commit 8c1e36aaa7
6 changed files with 295 additions and 1 deletions
@@ -0,0 +1,32 @@
+@use '../../styles/tokens/typography' as *;
+
+.select-option {
+  padding: var(--nds-spacing-xs) var(--nds-spacing-md);
+  cursor: pointer;
+  color: var(--nds-text);
+  background-color: var(--nds-neutral);
+  transition: background-color 0.15s ease;
+
+  &:hover:not(.select-option__disabled) {
+    background-color: var(--nds-secondary);
+  }
+
+  &:active {
+    background-color: var(--nds-accent);
+  }
+
+  &__selected {
+    background-color: var(--nds-primary);
+    color: var(--nds-text);
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background));
+    }
+  }
+
+  &__disabled {
+    background-color: var(--nds-disabled);
+    color: color-mix(in srgb, var(--nds-text) 40%, transparent);
+    cursor: not-allowed;
+  }
+}