UI kit: add brand colors to the theme (#169)

liquity · May 10, 2024 · a5fc3be · a5fc3be
1 parent f92cfe8
commit a5fc3be
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 19 deletions.
diff --git a/frontend/uikit-gallery/src/Theme/1. Colors.fixture.tsx b/frontend/uikit-gallery/src/Theme/1. Colors.fixture.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { brand, colors } from "@liquity2/uikit";
+import { colors } from "@liquity2/uikit";
 import { ColorGroup, filterColors } from "./shared";
 
 export default function ColorsFixture() {
@@ -24,7 +24,7 @@ export default function ColorsFixture() {
       >
         <ColorGroup
           name="Brand"
-          colors={brand}
+          colors={filterColors(colors, "brand:")}
         />
         <ColorGroup
           name="Blue"

diff --git a/frontend/uikit-gallery/src/Theme/2. Theme.fixture.tsx b/frontend/uikit-gallery/src/Theme/2. Theme.fixture.tsx
@@ -36,7 +36,7 @@ export default function ThemeFixture() {
                 .entries(lightTheme.colors)
                 .map(([key, value]) => [
                   key,
-                  colors[value],
+                  colors[value as keyof typeof colors],
                 ]),
             )}
             secondary={(name) => lightTheme.colors[name as keyof typeof lightTheme.colors]}

diff --git a/frontend/uikit/panda.config.ts b/frontend/uikit/panda.config.ts
@@ -13,7 +13,8 @@ const semanticColors = Object.fromEntries(
     key,
     {
       value: `{colors.${value}}`,
-      // this is where the dark theme can be added, see https://panda-css.com/docs/theming/tokens
+      // this is where the dark theme can be added,
+      // see https://panda-css.com/docs/theming/tokens
       // _dark: `{colors.${otherValue}}`,
     },
   ]),

diff --git a/frontend/uikit/src/Theme/Theme.tsx b/frontend/uikit/src/Theme/Theme.tsx
@@ -2,19 +2,6 @@ import type { ReactNode } from "react";
 
 import { createContext, useContext, useState } from "react";
 
-// The Liquity v2 brand colors.
-export const brand = {
-  "blue": "#405AE5",
-  "green": "#63D77D",
-  "darkBlue": "#121B44",
-  "golden": "#F5D93A",
-  "cyan": "#95CBF3",
-  "coral": "#FB7C59",
-  "brown": "#DBB79B",
-};
-
-export type BrandColorName = keyof typeof brand;
-
 // The Liquity v2 base color palette, meant
 // to be used by themes rather than directly.
 export const colors = {
@@ -85,6 +72,15 @@ export const colors = {
 
   // White
   "white": "#FFFFFF",
+
+  // Brand colors
+  "brand:blue": "#405AE5",
+  "brand:green": "#63D77D",
+  "brand:darkBlue": "#121B44",
+  "brand:golden": "#F5D93A",
+  "brand:cyan": "#95CBF3",
+  "brand:coral": "#FB7C59",
+  "brand:brown": "#DBB79B",
 };
 
 // The light theme, which is the only theme for now. These
@@ -107,6 +103,7 @@ export const lightTheme = {
     backgroundActive: "gray:50",
     border: "gray:200",
     content: "gray:950",
+    content2: "blue:950",
     contentAlt: "gray:600",
     controlBorder: "gray:300",
     controlSurface: "white",
@@ -134,6 +131,24 @@ export const lightTheme = {
     disabledBorder: "gray:200",
     disabledContent: "gray:500",
     disabledSurface: "gray:50",
+
+    brandBlue: "brand:blue",
+    brandBlueContent: "white",
+    brandBlueContentAlt: "blue:50",
+    brandDarkBlue: "brand:darkBlue",
+    brandDarkBlueContent: "white",
+    brandDarkBlueContentAlt: "gray:50",
+    brandGolden: "brand:golden",
+    brandGoldenContent: "yellow:950",
+    brandGoldenContentAlt: "yellow:800",
+    brandGreen: "brand:green",
+    brandGreenContent: "green:950",
+    brandGreenContentAlt: "green:800",
+
+    // not used yet
+    brandCyan: "brand:cyan",
+    brandCoral: "brand:coral",
+    brandBrown: "brand:brown",
   } satisfies Record<string, keyof typeof colors>,
 } as const;
 

diff --git a/frontend/uikit/src/index.ts b/frontend/uikit/src/index.ts
@@ -1,5 +1,5 @@
 export type { DropdownItem } from "./Dropdown/Dropdown";
-export type { BrandColorName, ThemeColorName, ThemeDescriptor } from "./Theme/Theme";
+export type { ThemeColorName, ThemeDescriptor } from "./Theme/Theme";
 
 export { Button } from "./Button/Button";
 export { Checkbox } from "./Checkbox/Checkbox";
@@ -15,6 +15,6 @@ export { RadioGroup, useRadioGroup } from "./Radio/RadioGroup";
 export { Root, RootEntryPoint } from "./Root/Root";
 export { Tabs } from "./Tabs/Tabs";
 export { TextButton } from "./TextButton/TextButton";
-export { brand, colors, lightTheme, Theme, themeColor, useTheme } from "./Theme/Theme";
+export { colors, lightTheme, Theme, themeColor, useTheme } from "./Theme/Theme";
 export { TokenIcon, TokenIconGroup } from "./TokenIcon/TokenIcon";
 export { UiKit } from "./UiKit/UiKit";