Add pixelaw theme preset (#319)

cartridge-gg · May 30, 2024 · 2d2b26f · 2d2b26f
1 parent ad76970
commit 2d2b26f
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 6 deletions.
diff --git a/examples/starknet-react-next/src/components/StarknetProvider.tsx b/examples/starknet-react-next/src/components/StarknetProvider.tsx
@@ -27,14 +27,14 @@ export function StarknetProvider({ children }: PropsWithChildren) {
 
 const url =
   !process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ||
-  process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
+    process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL.split(".")[0] ===
     "cartridge-starknet-react-next"
     ? process.env.XFRAME_URL
     : "https://" +
-      (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
-        "cartridge-starknet-react-next",
-        "keychain",
-      );
+    (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL ?? "").replace(
+      "cartridge-starknet-react-next",
+      "keychain",
+    );
 
 const connectors = [
   new CartridgeConnector(

diff --git a/packages/controller/src/presets.ts b/packages/controller/src/presets.ts
@@ -28,6 +28,16 @@ export const defaultPresets: ControllerThemePresets = {
       primary: "#B0CAF8",
     },
   },
+  pixelaw: {
+    id: "pixelaw",
+    name: "Pixelaw",
+    icon: "/whitelabel/pixelaw/icon.svg",
+    cover: "/whitelabel/pixelaw/cover.png",
+    colors: {
+      primary: "#7C00B1",
+      primaryForeground: "white",
+    },
+  },
   rollyourown: {
     id: "rollyourown",
     name: "Roll Your Own",

diff --git a/packages/controller/src/types.ts b/packages/controller/src/types.ts
@@ -177,6 +177,7 @@ export type ControllerThemePreset = Omit<ControllerTheme, "colorMode"> & {
 
 export type ControllerColors = {
   primary?: ControllerColor;
+  primaryForeground?: ControllerColor;
 };
 
 export type ControllerColor = ThemeValue<string>;

diff --git a/packages/keychain/public/whitelabel/pixelaw/cover.png b/packages/keychain/public/whitelabel/pixelaw/cover.png
diff --git a/packages/keychain/public/whitelabel/pixelaw/icon.svg b/packages/keychain/public/whitelabel/pixelaw/icon.svg
diff --git a/packages/keychain/src/hooks/theme.tsx b/packages/keychain/src/hooks/theme.tsx
@@ -65,6 +65,9 @@ export function useChakraTheme(preset: ControllerThemePreset) {
             primary:
               toThemeColor(preset?.colors?.primary) ??
               CartridgeTheme.semanticTokens.colors.brand.primary,
+            primaryForeground:
+              toThemeColor(preset?.colors?.primaryForeground) ??
+              CartridgeTheme.semanticTokens.colors.solid.bg,
           },
         },
       },

diff --git a/packages/ui/src/theme/components/Button.ts b/packages/ui/src/theme/components/Button.ts
@@ -77,7 +77,7 @@ function getColorProps({ colorScheme }: StyleFunctionProps) {
   switch (colorScheme as ButtonColorScheme) {
     case "colorful":
       return {
-        color: "solid.bg",
+        color: "brand.primaryForeground",
         bg: "brand.primary",
         _hover: {
           opacity: 0.8,

diff --git a/packages/ui/src/theme/semanticTokens.ts b/packages/ui/src/theme/semanticTokens.ts
@@ -61,6 +61,10 @@ export const semanticTokens = {
         default: "darkGray.700",
         _light: "blueGray.200",
       },
+      primaryForeground: {
+        default: "darkGray.800",
+        _light: "blueGray.100",
+      },
       secondary: {
         default: "darkGray.600",
         _light: "blueGray.300",