Design system color theming updates

src/@chakra-ui/semanticTokens.ts

@@ -40,7 +40,7 @@ const semanticTokens = {
       base: { _light: "purple.600", _dark: "purple.400" },
       highContrast: { _light: "purple.800", _dark: "purple.200" },
       lowContrast: { _light: "purple.100", _dark: "purple.900" },
-      hover: { _light: "purple.500", _dark: "purple.500" },
+      hover: { _light: "purple.500", _dark: "purple.300" },
       visited: { _light: "purple.700", _dark: "purple.300" },
       action: { _light: "purple.600", _dark: "purple.600" },
       actionHover: { _light: "purple.500", _dark: "purple.500" },
@@ -55,11 +55,9 @@ const semanticTokens = {
       base: { _light: "gray.800", _dark: "gray.100" },
       medium: { _light: "gray.500", _dark: "gray.400" },
       light: { _light: "gray.200", _dark: "gray.600" },
-      // ! Deprecating body.inverted
-      inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.950" },
+      base: { _light: "white", _dark: "black" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },

src/@chakra-ui/stories/Colors.stories.tsx

@@ -113,7 +113,7 @@ export const SemanticScheme: StoryObj = {
     ] as const
     const deprecatedTokens: Record<(typeof tokenNames)[number], string[]> = {
       primary: ["light", "dark", "pressed"],
-      body: ["inverted"],
+      body: [],
       background: [],
       disabled: [],
       success: ["neutral", "outline"],

src/components/Quiz/QuizzesStats.tsx

@@ -9,7 +9,6 @@ import {
   Highlight,
   HStack,
   ListItem,
-  Progress,
   SimpleGrid,
   Stack,
   Text,
@@ -24,6 +23,7 @@ import { ethereumBasicsQuizzes, usingEthereumQuizzes } from "../../data/quizzes"
 import { Button } from "../Buttons"
 import { TrophyIcon } from "../icons/quiz"
 import Translation from "../Translation"
+import { Progress } from "../ui/progress"
 
 import {
   getFormattedStats,
@@ -131,6 +131,7 @@ const QuizzesStats = ({
 
               <Progress
                 value={(totalCorrectAnswers / totalQuizzesPoints) * 100}
+                className="h-2.5 bg-primary-low-contrast [&>div]:bg-primary"
               />
 
               <Flex columnGap="10" direction={{ base: "column", lg: "row" }}>

src/components/ui/command.tsx

@@ -136,7 +136,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-primary-low-contrast aria-selected:text-body data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-body-inverse aria-selected:text-body data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}

src/styles/colors.css

@@ -4,19 +4,19 @@
 
 @layer base {
   :root {
-    --white: 0, 0%, 100%; /* #ffffff */
-    --gray-50: 0, 0%, 97%; /* #f7f7f7 */
-    --gray-100: 0, 0%, 93%; /* #eeeeee */
-    --gray-150: 0, 0%, 93%; /* #ececec */ /* TODO: Confirm this shade, used in nav menu */
-    --gray-200: 0, 0%, 81%; /*#cecece */
-    --gray-300: 0, 0%, 67%; /* #acacac */
-    --gray-400: 0, 0%, 55%; /* #8C8C8C */
-    --gray-500: 0, 0%, 38%; /* #616161 */
-    --gray-600: 0, 0%, 20%; /* #333333 */
-    --gray-700: 0, 0%, 13%; /* #222222 */
-    --gray-800: 0, 0%, 11%; /* #1b1b1b */
-    --gray-900: 0, 0%, 7%; /* #121212 */
-    --gray-950: 0, 0%, 4%; /* #0a0a0a */
+    --white: 0, 0%, 100%; /* #FFFFFF */
+    --gray-50: 0, 0%, 97%; /* #F7F7F7 +1 */
+    --gray-100: 0, 0%, 93%; /* #EDEDED ±1 */ /* TODO: Confirm */
+    --gray-150: 0, 0%, 87%; /* #DEDEDE ±1 */ /*  TODO: Confirm */
+    --gray-200: 0, 0%, 81%; /* #CECECE +1 */
+    --gray-300: 0, 0%, 67%; /* #ABABAB ±1 */
+    --gray-400: 0, 0%, 55%; /* #8C8C8C ±1 */
+    --gray-500: 0, 0%, 38%; /* #616161 ±1 */
+    --gray-600: 0, 0%, 20%; /* #333333 ±1 */
+    --gray-700: 0, 0%, 13%; /* #222222 -2 */
+    --gray-800: 0, 0%, 11%; /* #1B1B1B +2 */
+    --gray-900: 0, 0%, 7%; /* #121212 ±1 */
+    --gray-950: 0, 0%, 4%; /* #0A0A0A ±1 */
     --black: 0, 0%, 0%; /* #000000 */
 
     --purple-50: 262, 100%, 96%; /* #F3ECFF */
@@ -82,6 +82,5 @@
     --green-900: 140, 37%, 6%; /* #0a160e */
     --yellow-200: 47, 100%, 94%; /* #fff8df */
     --yellow-500: 42, 100%, 37%; /* #bd8400 */
-
   }
 }

tailwind.config.ts

@@ -145,6 +145,7 @@ const config = {
           DEFAULT: "hsla(var(--body))",
           medium: "hsla(var(--body-medium))",
           light: "hsla(var(--body-light))",
+          inverse: "hsla(var(--body-inverse))",
         },
         background: {
           DEFAULT: "hsla(var(--background))",