add contrast colors to commandbar

medusajs · Oct 4, 2023 · 0bb607f · 0bb607f
1 parent 9c811e9
commit 0bb607f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 9 deletions.
diff --git a/packages/ui-preset/src/theme/extension/theme.ts b/packages/ui-preset/src/theme/extension/theme.ts
@@ -273,6 +273,38 @@ export const theme = {
           "muted": {
             "DEFAULT": "var(--fg-muted)"
           }
+        },
+        "contrast": {
+          "bg": {
+            "subtle": {
+              "DEFAULT": "var(--contrast-bg-subtle)"
+            },
+            "base": {
+              "DEFAULT": "var(--contrast-bg-base)",
+              "pressed": {
+                "DEFAULT": "var(--contrast-bg-base-pressed)"
+              },
+              "hover": {
+                "DEFAULT": "var(--contrast-bg-base-hover)"
+              }
+            },
+            "highlight": {
+              "DEFAULT": "var(--contrast-bg-highlight)"
+            }
+          },
+          "fg": {
+            "primary": {
+              "DEFAULT": "var(--contrast-fg-primary)"
+            },
+            "secondary": {
+              "DEFAULT": "var(--contrast-fg-secondary)"
+            }
+          },
+          "border": {
+            "base": {
+              "DEFAULT": "var(--contrast-border-base)"
+            }
+          }
         }
       }
     },

diff --git a/packages/ui-preset/src/theme/tokens/colors.ts b/packages/ui-preset/src/theme/tokens/colors.ts
@@ -85,7 +85,15 @@ export const colors = {
     "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
     "--bg-component": "rgba(39, 40, 45, 1)",
     "--bg-field": "rgba(39, 40, 45, 1)",
-    "--bg-field-hover": "rgba(46, 48, 53, 1)"
+    "--bg-field-hover": "rgba(46, 48, 53, 1)",
+    "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
+    "--contrast-bg-base": "rgba(228, 228, 233, 1)",
+    "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
+    "--contrast-border-base": "rgba(185, 187, 198, 1)",
+    "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
+    "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
+    "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
+    "--contrast-bg-highlight": "rgba(242, 242, 245, 1)"
   },
   "light": {
     "--button-inverted": "rgba(3, 7, 18, 1)",
@@ -185,6 +193,14 @@ export const colors = {
     "--bg-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
     "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
-    "--bg-disabled": "rgba(243, 244, 246, 1)"
+    "--bg-disabled": "rgba(243, 244, 246, 1)",
+    "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
+    "--contrast-bg-base": "rgba(27, 27, 31, 1)",
+    "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
+    "--contrast-border-base": "rgba(60, 63, 68, 1)",
+    "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
+    "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
+    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
+    "--contrast-fg-secondary": "rgba(173, 177, 184, 1)"
   }
 }
diff --git a/packages/ui/src/components/command-bar/command-bar.tsx b/packages/ui/src/components/command-bar/command-bar.tsx
@@ -61,7 +61,7 @@ const Value = React.forwardRef<
     <div
       ref={ref}
       className={clx(
-        "txt-compact-small-plus text-ui-fg-subtle px-3 py-2.5",
+        "txt-compact-small-plus text-ui-contrast-fg-secondary px-3 py-2.5",
         className
       )}
       {...props}
@@ -78,8 +78,8 @@ const Bar = React.forwardRef<
     <div
       ref={ref}
       className={clx(
-        "relatove bg-ui-bg-base flex items-center overflow-hidden rounded-full px-1",
-        "after:shadow-elevation-modal after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']",
+        "relatove bg-ui-contrast-bg-base flex items-center overflow-hidden rounded-full px-1",
+        "after:shadow-elevation-flyout after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:content-['']",
         className
       )}
       {...props}
@@ -95,7 +95,7 @@ const Seperator = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={clx("bg-ui-border-base h-10 w-px", className)}
+      className={clx("bg-ui-contrast-border-base h-10 w-px", className)}
       {...props}
     />
   )
@@ -139,8 +139,8 @@ const Command = React.forwardRef<HTMLButtonElement, CommandProps>(
       <button
         ref={ref}
         className={clx(
-          "bg-ui-bg-base txt-compact-small-plus transition-fg text-ui-fg-base flex items-center gap-x-2 px-3 py-2.5 outline-none",
-          "focus:bg-ui-bg-highlight focus:hover:bg-ui-bg-base-hover hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus:active:bg-ui-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+          "bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none",
+          "focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
           "last-of-type:-mr-1 last-of-type:pr-4",
           className
         )}
@@ -149,7 +149,9 @@ const Command = React.forwardRef<HTMLButtonElement, CommandProps>(
         {...props}
       >
         <span>{label}</span>
-        <Kbd>{shortcut.toUpperCase()}</Kbd>
+        <Kbd className="bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary">
+          {shortcut.toUpperCase()}
+        </Kbd>
       </button>
     )
   }