feat(config): Update the theme to use brand colors instead of hierarc…

…hy colors
storm-software · May 4, 2024 · bcff6b8 · bcff6b8
1 parent 5aaffee
commit bcff6b8
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 80 deletions.
diff --git a/packages/config-tools/src/env/get-env.ts b/packages/config-tools/src/env/get-env.ts
@@ -168,8 +168,8 @@ const getThemeColorConfigEnv = (
   const themeName =
     `COLOR_${theme && theme !== "base" ? `${theme}_` : ""}`.toUpperCase();
 
-  return process.env[`${prefix}${themeName}LIGHT_PRIMARY`] ||
-    process.env[`${prefix}${themeName}DARK_PRIMARY`]
+  return process.env[`${prefix}${themeName}LIGHT_BRAND1`] ||
+    process.env[`${prefix}${themeName}DARK_BRAND1`]
     ? getMultiThemeColorConfigEnv(prefix + themeName)
     : getSingleThemeColorConfigEnv(prefix + themeName);
 };
@@ -180,10 +180,9 @@ const getSingleThemeColorConfigEnv = (
   return {
     dark: process.env[`${prefix}DARK`],
     light: process.env[`${prefix}LIGHT`],
-    primary: process.env[`${prefix}PRIMARY`],
-    secondary: process.env[`${prefix}SECONDARY`],
-    tertiary: process.env[`${prefix}TERTIARY`],
-    accent: process.env[`${prefix}ACCENT`],
+    brand1: process.env[`${prefix}BRAND1`],
+    brand2: process.env[`${prefix}BRAND2`],
+    brand3: process.env[`${prefix}BRAND3`],
     success: process.env[`${prefix}SUCCESS`],
     info: process.env[`${prefix}INFO`],
     warning: process.env[`${prefix}WARNING`],
@@ -217,10 +216,9 @@ const getBaseThemeColorConfigEnv = <
   return {
     foreground: process.env[`${prefix}FOREGROUND`],
     background: process.env[`${prefix}BACKGROUND`],
-    primary: process.env[`${prefix}PRIMARY`],
-    secondary: process.env[`${prefix}SECONDARY`],
-    tertiary: process.env[`${prefix}TERTIARY`],
-    accent: process.env[`${prefix}ACCENT`],
+    brand1: process.env[`${prefix}BRAND1`],
+    brand2: process.env[`${prefix}BRAND2`],
+    brand3: process.env[`${prefix}BRAND3`],
     success: process.env[`${prefix}SUCCESS`],
     info: process.env[`${prefix}INFO`],
     warning: process.env[`${prefix}WARNING`],

diff --git a/packages/config-tools/src/env/set-env.ts b/packages/config-tools/src/env/set-env.ts
@@ -212,8 +212,8 @@ const setThemeColorConfigEnv = (
 ) => {
   // Check if the color configuration is set using separate dark and light color
   // palettes or a single multi-theme color palettes
-  return (config as MultiThemeColorConfig)?.light?.primary ||
-    (config as MultiThemeColorConfig)?.dark?.primary
+  return (config as MultiThemeColorConfig)?.light?.brand1 ||
+    (config as MultiThemeColorConfig)?.dark?.brand1
     ? setMultiThemeColorConfigEnv(prefix, config as MultiThemeColorConfig)
     : setSingleThemeColorConfigEnv(prefix, config as SingleThemeColorConfig);
 };
@@ -228,17 +228,14 @@ const setSingleThemeColorConfigEnv = (
   if (config.light) {
     process.env[`${prefix}LIGHT`] = config.light;
   }
-  if (config.primary) {
-    process.env[`${prefix}PRIMARY`] = config.primary;
+  if (config.brand1) {
+    process.env[`${prefix}BRAND1`] = config.brand1;
   }
-  if (config.secondary) {
-    process.env[`${prefix}SECONDARY`] = config.secondary;
+  if (config.brand2) {
+    process.env[`${prefix}BRAND2`] = config.brand2;
   }
-  if (config.tertiary) {
-    process.env[`${prefix}TERTIARY`] = config.tertiary;
-  }
-  if (config.accent) {
-    process.env[`${prefix}ACCENT`] = config.accent;
+  if (config.brand3) {
+    process.env[`${prefix}BRAND3`] = config.brand3;
   }
   if (config.success) {
     process.env[`${prefix}SUCCESS`] = config.success;
@@ -277,17 +274,14 @@ const setBaseThemeColorConfigEnv = (
   if (config.background) {
     process.env[`${prefix}BACKGROUND`] = config.background;
   }
-  if (config.primary) {
-    process.env[`${prefix}PRIMARY`] = config.primary;
-  }
-  if (config.secondary) {
-    process.env[`${prefix}SECONDARY`] = config.secondary;
+  if (config.brand1) {
+    process.env[`${prefix}BRAND1`] = config.brand1;
   }
-  if (config.tertiary) {
-    process.env[`${prefix}TERTIARY`] = config.tertiary;
+  if (config.brand2) {
+    process.env[`${prefix}BRAND2`] = config.brand2;
   }
-  if (config.accent) {
-    process.env[`${prefix}ACCENT`] = config.accent;
+  if (config.brand3) {
+    process.env[`${prefix}BRAND3`] = config.brand3;
   }
   if (config.success) {
     process.env[`${prefix}SUCCESS`] = config.success;

diff --git a/packages/config-tools/src/utilities/get-default-config.ts b/packages/config-tools/src/utilities/get-default-config.ts
@@ -13,10 +13,9 @@ import { findWorkspaceRoot } from "./find-workspace-root";
 export const DEFAULT_COLOR_CONFIG: ColorConfig = {
   dark: "#1d232a",
   light: "#f4f4f5",
-  primary: "#1fb2a6",
-  secondary: "#0ea5e9",
-  tertiary: "#ec5990",
-  accent: "#6366f1",
+  brand1: "#1fb2a6",
+  brand2: "#6366f1",
+  brand3: "#ec5990",
   success: "#087f5b",
   info: "#0ea5e9",
   warning: "#fcc419",

diff --git a/packages/config-tools/src/utilities/logger.ts b/packages/config-tools/src/utilities/logger.ts
@@ -133,22 +133,22 @@ export const getLogFn = (
   ) {
     return (message?: any) => {
       console.debug(
-        `\n${_chalk.bold.hex(colors.primary ?? "#1fb2a6")(">")} ${_chalk.bold
-          .bgHex(colors.primary ?? "#1fb2a6")
+        `\n${_chalk.bold.hex(colors.brand1 ?? "#1fb2a6")(">")} ${_chalk.bold
+          .bgHex(colors.brand1 ?? "#1fb2a6")
           .whiteBright(
             " 🛠  Debug "
-          )}  ${_chalk.hex(colors.primary ?? "#1fb2a6")(formatLogMessage(message))}\n`
+          )}  ${_chalk.hex(colors.brand1 ?? "#1fb2a6")(formatLogMessage(message))}\n`
       );
     };
   }
 
   return (message?: any) => {
     console.log(
-      `\n${_chalk.bold.hex(colors.primary ?? "#1fb2a6")(">")} ${_chalk.bold
-        .bgHex(colors.primary ?? "#1fb2a6")
+      `\n${_chalk.bold.hex(colors.brand1 ?? "#1fb2a6")(">")} ${_chalk.bold
+        .bgHex(colors.brand1 ?? "#1fb2a6")
         .whiteBright(
           " ✉ System "
-        )}  ${_chalk.hex(colors.primary ?? "#1fb2a6")(formatLogMessage(message))}\n`
+        )}  ${_chalk.hex(colors.brand1 ?? "#1fb2a6")(formatLogMessage(message))}\n`
     );
   };
 };

diff --git a/packages/config/presets/base.json b/packages/config/presets/base.json
@@ -15,10 +15,9 @@
     "light": {
       "background": "#f4f4f5",
       "foreground": "#1c2128",
-      "primary": "#1fb2a6",
-      "secondary": "#0ea5e9",
-      "tertiary": "#ec5990",
-      "accent": "#6366f1",
+      "brand1": "#1fb2a6",
+      "brand2": "#6366f1",
+      "brand3": "#ec5990",
       "success": "#087f5b",
       "info": "#0ea5e9",
       "warning": "#fcc419",
@@ -28,10 +27,9 @@
     "dark": {
       "background": "#1c2128",
       "foreground": "#fcfcf5",
-      "primary": "#1fb2a6",
-      "secondary": "#0ea5e9",
-      "tertiary": "#f778ba",
-      "accent": "#8957e5",
+      "brand1": "#1fb2a6",
+      "brand2": "#8957e5",
+      "brand3": "#f778ba",
       "success": "#56d364",
       "info": "#58a6ff",
       "warning": "#e3b341",

diff --git a/packages/config/src/schema.ts b/packages/config/src/schema.ts
@@ -16,38 +16,30 @@ const LightColorSchema = z
   .length(7)
   .default("#f4f4f5")
   .describe("The light background color of the workspace");
-const PrimaryColorSchema = z
+const Brand1ColorSchema = z
   .string()
   .trim()
   .toLowerCase()
   .regex(/^#([0-9a-f]{3}){1,2}$/i)
   .length(7)
   .default("#1fb2a6")
-  .describe("The primary color of the workspace");
-const SecondaryColorSchema = z
+  .describe("The first brand specific color of the workspace");
+const Brand2ColorSchema = z
   .string()
   .trim()
   .toLowerCase()
   .regex(/^#([0-9a-f]{3}){1,2}$/i)
   .length(7)
-  .default("#0ea5e9")
-  .describe("The secondary color of the workspace");
-const TertiaryColorSchema = z
+  .default("#6366f1")
+  .describe("The second brand specific color of the workspace");
+const Brand3ColorSchema = z
   .string()
   .trim()
   .toLowerCase()
   .regex(/^#([0-9a-f]{3}){1,2}$/i)
   .length(7)
   .default("#ec5990")
-  .describe("The tertiary color of the workspace");
-const AccentColorSchema = z
-  .string()
-  .trim()
-  .toLowerCase()
-  .regex(/^#([0-9a-f]{3}){1,2}$/i)
-  .length(7)
-  .default("#6366f1")
-  .describe("The accent color of the workspace");
+  .describe("The third brand specific color of the workspace");
 const SuccessColorSchema = z
   .string()
   .trim()
@@ -92,10 +84,9 @@ const FatalColorSchema = z
 export const DarkThemeColorConfigSchema = z.object({
   foreground: LightColorSchema,
   background: DarkColorSchema,
-  primary: PrimaryColorSchema,
-  secondary: SecondaryColorSchema,
-  tertiary: TertiaryColorSchema,
-  accent: AccentColorSchema,
+  brand1: Brand1ColorSchema,
+  brand2: Brand2ColorSchema,
+  brand3: Brand3ColorSchema,
   success: SuccessColorSchema,
   info: InfoColorSchema,
   warning: WarningColorSchema,
@@ -106,10 +97,9 @@ export const DarkThemeColorConfigSchema = z.object({
 export const LightThemeColorConfigSchema = z.object({
   foreground: DarkColorSchema,
   background: LightColorSchema,
-  primary: PrimaryColorSchema,
-  secondary: SecondaryColorSchema,
-  tertiary: TertiaryColorSchema,
-  accent: AccentColorSchema,
+  brand1: Brand1ColorSchema,
+  brand2: Brand2ColorSchema,
+  brand3: Brand3ColorSchema,
   success: SuccessColorSchema,
   info: InfoColorSchema,
   warning: WarningColorSchema,
@@ -125,10 +115,9 @@ export const MultiThemeColorConfigSchema = z.object({
 export const SingleThemeColorConfigSchema = z.object({
   dark: DarkColorSchema,
   light: LightColorSchema,
-  primary: PrimaryColorSchema,
-  secondary: SecondaryColorSchema,
-  tertiary: TertiaryColorSchema,
-  accent: AccentColorSchema,
+  brand1: Brand1ColorSchema,
+  brand2: Brand2ColorSchema,
+  brand3: Brand3ColorSchema,
   success: SuccessColorSchema,
   info: InfoColorSchema,
   warning: WarningColorSchema,

diff --git a/packages/config/src/types.ts b/packages/config/src/types.ts
@@ -56,10 +56,9 @@ export type StormConfig<
 export const COLOR_KEYS = [
   "dark",
   "light",
-  "primary",
-  "secondary",
-  "tertiary",
-  "accent",
+  "brand1",
+  "brand2",
+  "brand3",
   "success",
   "info",
   "warning",

diff --git a/packages/workspace-tools/src/executors/tsup-browser/schema.json b/packages/workspace-tools/src/executors/tsup-browser/schema.json
@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/schema",
   "$id": "tsup-browser",
-  "extends": "../tsup-browser/schema.json",
+  "extends": "../tsup/schema.json",
   "version": 2,
   "title": "Browser TypeScript Builder",
   "description": "Runs a browser platform TypeScript build",