theme: color and token adjustments

Author: wackerow

src/@chakra-ui/semanticTokens.ts

@@ -58,7 +58,7 @@ const semanticTokens = {
       inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "black" },
+      base: { _light: "white", _dark: "gray.950" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },

src/components/ui/buttons/Button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         solid:
-          "text-white bg-primary-action border-transparent disabled:bg-disabled disabled:text-background hover:text-background hover:bg-primary-hover hover:shadow-button-hover active:shadow-none",
+          "text-white bg-primary-action border-transparent disabled:bg-disabled disabled:text-background hover:text-white hover:bg-primary-action-hover hover:shadow-button-hover active:shadow-none",
         outline: "hover:shadow-button-hover active:shadow-none text-body",
         "outline-color":
           "hover:shadow-button-hover active:shadow-none border-primary",

src/components/ui/card.tsx

@@ -102,7 +102,7 @@ const CardHighlight = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm uppercase text-accent-a", className)}
+    className={cn("text-sm uppercase text-body-medium", className)}
     {...props}
   />
 ))

src/styles/global.css

@@ -124,7 +124,7 @@
 
 @layer base {
   body {
-    @apply !bg-background font-body text-sm text-body lg:text-md;
+    @apply !bg-background font-body text-sm !text-body lg:text-md;
   }
 
   a {

src/styles/semantic-tokens.css

@@ -19,7 +19,7 @@
     --primary-hover: var(--purple-500);
     --primary-visited: var(--purple-700);
     --primary-action: var(--purple-600);
-    --primary-action-hover: var(--purple-700);
+    --primary-action-hover: var(--purple-500);
 
     --accent-a: var(--blue-600);
     --accent-a-hover: var(--blue-500);
@@ -80,7 +80,7 @@
 
   /* Dark mode token declarations */
   .dark {
-    --body: var(--gray-50);
+    --body: var(--gray-100);
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);
     --body-inverse: var(--black);
@@ -94,7 +94,6 @@
     --primary-low-contrast: var(--purple-900);
     --primary-hover: var(--purple-300);
     --primary-visited: var(--purple-500);
-    --primary-action-hover: var(--purple-600);
     /* TODO: hover same as action in dark mode: */
 
     --accent-a: var(--blue-400);

tailwind.config.ts

@@ -122,7 +122,9 @@ const config = {
           "high-contrast": "hsla(var(--primary-high-contrast))",
           "low-contrast": "hsla(var(--primary-low-contrast))",
           hover: "hsla(var(--primary-hover))",
+          visited: "hsla(var(--primary-visited))",
           action: "hsla(var(--primary-action))",
+          "action-hover": "hsla(var(--primary-action-hover))",
           light: "hsla(var(--primary-light))" /* TODO: Migrate/deprecate */,
           dark: "hsla(var(--primary-dark))" /* TODO: Migrate/deprecate */,
         },