feat(css): Add button active and disabled classes

marcmarine · Jun 13, 2024 · ebb69c0 · ebb69c0
1 parent 6ebde68
commit ebb69c0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/blue-lions-lie.md b/.changeset/blue-lions-lie.md
@@ -0,0 +1,5 @@
+---
+"varvara-css": minor
+---
+
+Add button active and disabled classes
diff --git a/packages/css/src/components.css b/packages/css/src/components.css
@@ -20,11 +20,17 @@
     background-color: color-mix(in srgb, var(--va-text-normal) 8%, transparent);
   }
 
-  &:active {
+  &:active,
+  &--active {
     color: var(--va-surface-primary);
     background-color: var(--va-text-normal);
   }
 
+  &--disabled {
+    @apply pointer-events-none;
+    color: var(--va-text-weak);
+  }
+
   &--action {
     @apply uppercase;
   }

diff --git a/packages/css/src/variables.css b/packages/css/src/variables.css
@@ -12,6 +12,7 @@
   --va-background-primary: var(--va-color-primary);
 
   --va-text-normal: #ffffff;
+  --va-text-weak: color-mix(in srgb, var(--va-text-normal) 20%, transparent);
 
   --va-surface-primary: color-mix(
     in srgb,