add contrast color

Author: carlosabadia

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.14.1
+    rev: v0.14.5
     hooks:
       - id: ruff-check
         files: ^reflex_ui/
@@ -28,7 +28,7 @@ repos:
   #       entry: python3 scripts/make_pyi.py
 
   - repo: https://github.com/RobertCraigie/pyright-python
-    rev: v1.1.406
+    rev: v1.1.407
     hooks:
       - id: pyright
         files: ^reflex_ui/

demo/assets/css/globals.css

@@ -153,6 +153,8 @@
 	--warning-a10: var(--amber-a10);
 	--warning-a11: var(--amber-a11);
 	--warning-a12: var(--amber-a12);
+	/* Contrast */
+	--primary-contrast: #ffffff;
 	/* Radius */
 	--radius: 0.5rem;
 	/* Font */
@@ -211,6 +213,8 @@
 	--color-secondary-a10: var(--secondary-a10);
 	--color-secondary-a11: var(--secondary-a11);
 	--color-secondary-a12: var(--secondary-a12);
+	/* Contrast */
+	--color-primary-contrast: var(--primary-contrast, #ffffff);
 	/* Info */
 	--color-info-1: var(--info-1);
 	--color-info-2: var(--info-2);

reflex_ui/components/base/button.py

@@ -20,8 +20,8 @@
 
 BUTTON_VARIANTS = {
     "variant": {
-        "primary": "bg-primary-9 text-white hover:bg-primary-10",
-        "destructive": "bg-destructive-9 hover:bg-destructive-10 text-white",
+        "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10",
+        "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast",
         "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12",
         "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5",
         "ghost": "hover:bg-secondary-3 text-secondary-11",

reflex_ui/components/base/button.pyi

@@ -22,8 +22,8 @@ LiteralButtonSize = Literal[
 DEFAULT_CLASS_NAME = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:border disabled:border-secondary-4/80 disabled:bg-secondary-3 disabled:text-secondary-8 shrink-0 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-medium cursor-pointer box-border"
 BUTTON_VARIANTS = {
     "variant": {
-        "primary": "bg-primary-9 text-white hover:bg-primary-10",
-        "destructive": "bg-destructive-9 hover:bg-destructive-10 text-white",
+        "primary": "bg-primary-9 text-primary-contrast hover:bg-primary-10",
+        "destructive": "bg-destructive-9 hover:bg-destructive-10 text-primary-contrast",
         "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12",
         "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5",
         "ghost": "hover:bg-secondary-3 text-secondary-11",

reflex_ui/components/base/checkbox.py

@@ -15,9 +15,7 @@ class ClassNames:
     """Class names for the checkbox component."""
 
     ROOT = "flex size-4 items-center justify-center rounded-[4px] data-[checked]:bg-primary-9 data-[unchecked]:border data-[unchecked]:border-secondary-8 data-[disabled]:cursor-not-allowed data-[disabled]:border data-[disabled]:border-secondary-4 data-[disabled]:bg-secondary-3 hover:bg-secondary-3 transition-colors cursor-default"
-    INDICATOR = (
-        "flex text-white data-[unchecked]:hidden data-[disabled]:text-secondary-8"
-    )
+    INDICATOR = "flex text-primary-contrast data-[unchecked]:hidden data-[disabled]:text-secondary-8"
     LABEL = "text-sm text-secondary-12 font-medium flex items-center gap-2"
     CONTAINER = "flex flex-row items-center gap-2"
 

reflex_ui/components/base/checkbox.pyi

@@ -15,9 +15,7 @@ from reflex_ui.components.base_ui import BaseUIComponent
 
 class ClassNames:
     ROOT = "flex size-4 items-center justify-center rounded-[4px] data-[checked]:bg-primary-9 data-[unchecked]:border data-[unchecked]:border-secondary-8 data-[disabled]:cursor-not-allowed data-[disabled]:border data-[disabled]:border-secondary-4 data-[disabled]:bg-secondary-3 hover:bg-secondary-3 transition-colors cursor-default"
-    INDICATOR = (
-        "flex text-white data-[unchecked]:hidden data-[disabled]:text-secondary-8"
-    )
+    INDICATOR = "flex text-primary-contrast data-[unchecked]:hidden data-[disabled]:text-secondary-8"
     LABEL = "text-sm text-secondary-12 font-medium flex items-center gap-2"
     CONTAINER = "flex flex-row items-center gap-2"