style: add dark theme style in chip (#1177)

Brisanet · Nov 12, 2024 · 6fe9336 · 6fe9336
1 parent 79be212
commit 6fe9336
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/projects/ion/src/lib/chip/_chip.theme.scss b/projects/ion/src/lib/chip/_chip.theme.scss
@@ -84,9 +84,94 @@ $default: (
   ),
 );
 
+$dark: (
+  border-radius: 100px,
+  text: (
+    font-weight: 600,
+    font-family: ion-theme(font-family-main),
+  ),
+  size: (
+    sm: (
+      height: 24px,
+      padding: 4px 8px,
+      text-font-size: 12px,
+      text-line-height: 16px,
+    ),
+    md: (
+      height: 32px,
+      padding: 6px 12px,
+      text-font-size: 14px,
+      text-line-height: 20px,
+    ),
+  ),
+  unselected: (
+    background-color: ion-theme(neutral-6),
+    text-color: ion-theme(primary-3),
+    icon-color: ion-theme(primary-3),
+    border-color: ion-theme(neutral-5),
+    border-width: 1px,
+    hover: (
+      background-color: ion-theme(primary-3),
+      text-color: ion-theme(primary-6),
+      icon-color: ion-theme(primary-6),
+      border-color: ion-theme(primary-6),
+    ),
+    focus: (
+      background-color: ion-theme(primary-3),
+      text-color: ion-theme(primary-6),
+      icon-color: ion-theme(primary-6),
+      border-color: ion-theme(primary-6),
+    ),
+    active: (
+      background-color: ion-theme(primary-5),
+      text-color: ion-theme(primary-1),
+      icon-color: ion-theme(primary-1),
+      border-color: ion-theme(primary-1),
+    ),
+    disabled: (
+      background-color: ion-theme(neutral-7),
+      text-color: ion-theme(neutral-4),
+      icon-color: ion-theme(neutral-4),
+      border-color: ion-theme(neutral-4),
+    ),
+  ),
+  selected: (
+    background-color: ion-theme(neutral-6),
+    text-color: ion-theme(primary-3),
+    icon-color: ion-theme(primary-3),
+    border-color: ion-theme(primary-3),
+    border-width: 1.5px,
+    hover: (
+      background-color: ion-theme(primary-4),
+      text-color: ion-theme(primary-6),
+      icon-color: ion-theme(primary-6),
+      border-color: ion-theme(primary-6),
+    ),
+    focus: (
+      background-color: ion-theme(primary-4),
+      text-color: ion-theme(primary-6),
+      icon-color: ion-theme(primary-6),
+      border-color: ion-theme(primary-6),
+    ),
+    active: (
+      background-color: ion-theme(primary-6),
+      text-color: ion-theme(neutral-1),
+      icon-color: ion-theme(neutral-1),
+      border-color: ion-theme(neutral-1),
+    ),
+    disabled: (
+      background-color: ion-theme(neutral-7),
+      text-color: ion-theme(neutral-4),
+      icon-color: ion-theme(neutral-4),
+      border-color: ion-theme(neutral-4),
+    ),
+  ),
+);
+
 @include register-component(
   chip,
   (
     default: $default,
+    dark: $dark,
   )
 );