chore: create featureStage branding namespace

Parkreiner · Parkreiner · commit 0b46ecab21f7 · 2024-09-20T03:22:54.000Z
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -31,18 +31,18 @@ const styles = {
 		padding: "4px 8px",
 		lineHeight: 1,
 		whiteSpace: "nowrap",
-		border: `1px solid ${theme.roles.preview.outline}`,
-		color: theme.roles.preview.text,
-		backgroundColor: theme.roles.preview.background,
+		border: `1px solid ${theme.branding.featureStage.border}`,
+		color: theme.branding.featureStage.text,
+		backgroundColor: theme.branding.featureStage.background,
 		borderRadius: "6px",
 		transition:
 			"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
 	}),
 
 	badgeHover: (theme) => ({
-		color: theme.roles.preview.hover.text,
-		borderColor: theme.roles.preview.hover.outline,
-		backgroundColor: theme.roles.preview.hover.background,
+		color: theme.branding.featureStage.hover.text,
+		borderColor: theme.branding.featureStage.hover.border,
+		backgroundColor: theme.branding.featureStage.hover.background,
 	}),
 
 	badgeLargeText: {
diff --git a/site/src/theme/branding.ts b/site/src/theme/branding.ts
@@ -1,14 +1,29 @@
-export interface Branding {
-	enterprise: {
+export type Branding = Readonly<{
+	enterprise: Readonly<{
 		background: string;
 		divider: string;
 		border: string;
 		text: string;
-	};
-	premium: {
+	}>;
+
+	premium: Readonly<{
 		background: string;
 		divider: string;
 		border: string;
 		text: string;
-	};
-}
+	}>;
+
+	featureStage: Readonly<{
+		background: string;
+		divider: string;
+		border: string;
+		text: string;
+
+		hover: Readonly<{
+			background: string;
+			divider: string;
+			border: string;
+			text: string;
+		}>;
+	}>;
+}>;
diff --git a/site/src/theme/dark/branding.ts b/site/src/theme/dark/branding.ts
@@ -1,7 +1,7 @@
 import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
-export default {
+export const branding: Branding = {
 	enterprise: {
 		background: colors.blue[950],
 		divider: colors.blue[900],
@@ -14,4 +14,20 @@ export default {
 		border: colors.violet[400],
 		text: colors.violet[50],
 	},
-} satisfies Branding;
+
+	featureStage: {
+		background: colors.sky[950],
+		divider: colors.sky[900],
+		border: colors.sky[400],
+		text: colors.sky[400],
+
+		hover: {
+			background: colors.zinc[950],
+			divider: colors.zinc[900],
+			border: colors.sky[400],
+			text: colors.sky[400],
+		},
+	},
+};
+
+export default branding;
diff --git a/site/src/theme/darkBlue/branding.ts b/site/src/theme/darkBlue/branding.ts
@@ -1,7 +1,7 @@
 import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
-export default {
+export const branding: Branding = {
 	enterprise: {
 		background: colors.blue[950],
 		divider: colors.blue[900],
@@ -14,4 +14,20 @@ export default {
 		border: colors.violet[400],
 		text: colors.violet[50],
 	},
-} satisfies Branding;
+
+	featureStage: {
+		background: colors.sky[900],
+		divider: colors.sky[800],
+		border: colors.sky[400],
+		text: colors.sky[400],
+
+		hover: {
+			background: colors.gray[900],
+			divider: colors.gray[800],
+			border: colors.sky[400],
+			text: colors.sky[400],
+		},
+	},
+};
+
+export default branding;
diff --git a/site/src/theme/light/branding.ts b/site/src/theme/light/branding.ts
@@ -1,7 +1,7 @@
 import type { Branding } from "../branding";
 import colors from "../tailwindColors";
 
-export default {
+export const branding: Branding = {
 	enterprise: {
 		background: colors.blue[100],
 		divider: colors.blue[300],
@@ -14,4 +14,20 @@ export default {
 		border: colors.violet[600],
 		text: colors.violet[950],
 	},
-} satisfies Branding;
+
+	featureStage: {
+		background: colors.sky[50],
+		divider: colors.sky[100],
+		border: colors.sky[700],
+		text: colors.sky[700],
+
+		hover: {
+			background: colors.white,
+			divider: colors.zinc[100],
+			border: colors.sky[700],
+			text: colors.sky[700],
+		},
+	},
+};
+
+export default branding;
