From 7de576b596b932066609f2dda5e1b900d383c2de Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 11 Sep 2024 13:02:34 -0500 Subject: [PATCH] feat: add premium license banner for custom roles page (#14595) * feat: initial commit for premium banners * feat: update design and copy * fix: fix format * fix: cleanup * fix: paywall stories and popoverpaywall * fix: updates for review comments * chore: remove references to enterprise license * chore:n remove references to enterprise license * fix: format * chore: simplify branding colors * fix: fix color references --- site/src/components/Badges/Badges.stories.tsx | 6 +- site/src/components/Badges/Badges.tsx | 21 +-- .../components/Paywall/Paywall.stories.tsx | 4 +- site/src/components/Paywall/Paywall.tsx | 62 ++++---- .../Paywall/PopoverPaywall.stories.tsx | 9 -- .../src/components/Paywall/PopoverPaywall.tsx | 49 ++++--- site/src/pages/AuditPage/AuditPageView.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 6 +- .../ExternalAuthSettingsPageView.tsx | 6 +- .../LicensesSettingsPage/LicenseCard.tsx | 2 +- .../LicensesSettingsPageView.tsx | 2 +- .../ObservabilitySettingsPageView.tsx | 4 +- .../SecuritySettingsPageView.tsx | 4 +- site/src/pages/GroupsPage/GroupsPageView.tsx | 4 +- .../CreateOrganizationPageView.tsx | 1 - .../CustomRolesPageView.stories.tsx | 8 ++ .../CustomRolesPage/CustomRolesPageView.tsx | 132 +++++++++--------- .../GroupsPage/GroupsPageView.tsx | 4 +- .../IdpSyncPage/IdpSyncPageView.tsx | 2 +- .../TemplateSettingsForm.tsx | 14 +- .../TemplatePermissionsPage.tsx | 2 +- .../UsersPage/UsersTable/UsersTableBody.tsx | 4 +- site/src/theme/branding.ts | 6 + site/src/theme/dark/branding.ts | 9 ++ site/src/theme/dark/index.ts | 2 + site/src/theme/darkBlue/branding.ts | 9 ++ site/src/theme/darkBlue/index.ts | 2 + site/src/theme/index.ts | 5 + site/src/theme/light/branding.ts | 9 ++ site/src/theme/light/index.ts | 2 + 30 files changed, 215 insertions(+), 177 deletions(-) create mode 100644 site/src/theme/branding.ts create mode 100644 site/src/theme/dark/branding.ts create mode 100644 site/src/theme/darkBlue/branding.ts create mode 100644 site/src/theme/light/branding.ts diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx index 7738cede96..2a0a60498f 100644 --- a/site/src/components/Badges/Badges.stories.tsx +++ b/site/src/components/Badges/Badges.stories.tsx @@ -4,12 +4,12 @@ import { Badges, DisabledBadge, EnabledBadge, - EnterpriseBadge, EntitledBadge, HealthyBadge, NotHealthyBadge, NotReachableBadge, NotRegisteredBadge, + PremiumBadge, PreviewBadge, } from "./Badges"; @@ -50,9 +50,9 @@ export const Disabled: Story = { children: , }, }; -export const Enterprise: Story = { +export const Premium: Story = { args: { - children: , + children: , }, }; export const Preview: Story = { diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 6e04dd3a5a..9492184a27 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -106,31 +106,14 @@ export const DisabledBadge: FC = forwardRef< ); }); -export const EnterpriseBadge: FC = () => { - return ( - ({ - backgroundColor: theme.roles.notice.background, - border: `1px solid ${theme.roles.notice.outline}`, - color: theme.roles.notice.text, - }), - ]} - > - Enterprise - - ); -}; - export const PremiumBadge: FC = () => { return ( ({ - backgroundColor: theme.roles.notice.background, - border: `1px solid ${theme.roles.notice.outline}`, + backgroundColor: theme.branding.background, + border: `1px solid ${theme.branding.border}`, color: theme.roles.notice.text, }), ]} diff --git a/site/src/components/Paywall/Paywall.stories.tsx b/site/src/components/Paywall/Paywall.stories.tsx index 57c43bb211..c75c74c402 100644 --- a/site/src/components/Paywall/Paywall.stories.tsx +++ b/site/src/components/Paywall/Paywall.stories.tsx @@ -9,12 +9,10 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const Example: Story = { +export const Premium: Story = { args: { message: "Black Lotus", description: "Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.", }, }; - -export { Example as Paywall }; diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index 82a5285ae5..37b1546457 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/site/src/components/Paywall/Paywall.tsx @@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import TaskAltIcon from "@mui/icons-material/TaskAlt"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; -import { EnterpriseBadge } from "components/Badges/Badges"; +import { PremiumBadge } from "components/Badges/Badges"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; import { docs } from "utils/docs"; @@ -19,11 +19,19 @@ export const Paywall: FC = ({ documentationLink, }) => { return ( -
+
({ + backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`, + border: `1px solid ${theme.branding.border}`, + }), + ]} + >
{message}
- + {description &&

{description}

} @@ -36,20 +44,24 @@ export const Paywall: FC = ({ Read the documentation
-
+
  • - Template access control + + High availability & workspace proxies
  • - User groups + + Multi-org & role-based access control
  • - 24 hour support + + 24x7 global support with SLA
  • - Audit logs + + Unlimited Git & external auth integrations
@@ -68,21 +80,25 @@ export const Paywall: FC = ({ }; const FeatureIcon: FC = () => { - return ; + return ( + ({ + color: theme.branding.border, + }), + ]} + /> + ); }; const styles = { - root: (theme) => ({ + root: () => ({ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", - minHeight: 300, - maxWidth: 920, - margin: "auto", + minHeight: 280, padding: 24, - backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`, - border: `1px solid ${theme.roles.active.fill.outline}`, borderRadius: 8, gap: 32, }), @@ -92,25 +108,21 @@ const styles = { fontSize: 22, margin: 0, }, - description: (theme) => ({ - marginTop: 16, + description: () => ({ fontFamily: "inherit", - maxWidth: 420, - lineHeight: "160%", - color: theme.palette.text.secondary, - fontSize: 16, + maxWidth: 460, + fontSize: 14, }), separator: (theme) => ({ width: 1, height: 220, - backgroundColor: theme.palette.divider, + backgroundColor: theme.branding.divider, marginLeft: 8, }), featureList: { listStyle: "none", margin: 0, - marginRight: 8, - padding: "0 12px", + padding: "0 24px", fontSize: 14, fontWeight: 500, }, diff --git a/site/src/components/Paywall/PopoverPaywall.stories.tsx b/site/src/components/Paywall/PopoverPaywall.stories.tsx index aff769e2ca..2d9b1c7c4b 100644 --- a/site/src/components/Paywall/PopoverPaywall.stories.tsx +++ b/site/src/components/Paywall/PopoverPaywall.stories.tsx @@ -9,19 +9,10 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Enterprise: Story = { - args: { - message: "Black Lotus", - description: - "Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.", - }, -}; - export const Premium: Story = { args: { message: "Black Lotus", description: "Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.", - licenseType: "premium", }, }; diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx index f07d7eebf1..eac7fafcae 100644 --- a/site/src/components/Paywall/PopoverPaywall.tsx +++ b/site/src/components/Paywall/PopoverPaywall.tsx @@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react"; import TaskAltIcon from "@mui/icons-material/TaskAlt"; import Button from "@mui/material/Button"; import Link from "@mui/material/Link"; -import { EnterpriseBadge, PremiumBadge } from "components/Badges/Badges"; +import { PremiumBadge } from "components/Badges/Badges"; import { Stack } from "components/Stack/Stack"; import type { FC, ReactNode } from "react"; import { docs } from "utils/docs"; @@ -11,21 +11,27 @@ export interface PopoverPaywallProps { message: string; description?: ReactNode; documentationLink?: string; - licenseType?: "enterprise" | "premium"; } export const PopoverPaywall: FC = ({ message, description, documentationLink, - licenseType = "enterprise", }) => { return ( -
+
({ + backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`, + border: `1px solid ${theme.branding.border}`, + }), + ]} + >
{message}
- {licenseType === "premium" ? : } + {description &&

{description}

} @@ -38,26 +44,21 @@ export const PopoverPaywall: FC = ({ Read the documentation
-
+
  • - Template access control + High availability & workspace proxies
  • - User groups + Multi-org & role-based access control
  • - 24 hour support + 24x7 global support with SLA
  • - Audit logs + Unlimited Git & external auth integrations
    • - {licenseType === "premium" && ( -
  • - Organizations -
    • - )}
@@ -75,7 +76,15 @@ export const PopoverPaywall: FC = ({ }; const FeatureIcon: FC = () => { - return ; + return ( + ({ + color: theme.branding.border, + }), + ]} + /> + ); }; const styles = { @@ -85,8 +94,6 @@ const styles = { alignItems: "center", maxWidth: 600, padding: "24px 36px", - backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`, - border: `1px solid ${theme.roles.active.fill.outline}`, borderRadius: 8, gap: 18, }), @@ -118,10 +125,6 @@ const styles = { fontSize: 13, fontWeight: 500, }, - featureIcon: (theme) => ({ - color: theme.roles.active.fill.outline, - fontSize: "1.5em", - }), feature: { display: "flex", alignItems: "center", diff --git a/site/src/pages/AuditPage/AuditPageView.tsx b/site/src/pages/AuditPage/AuditPageView.tsx index c04b12c435..eeb930e95d 100644 --- a/site/src/pages/AuditPage/AuditPageView.tsx +++ b/site/src/pages/AuditPage/AuditPageView.tsx @@ -138,7 +138,7 @@ export const AuditPageView: FC = ({ diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx index 5313d0972b..8c4e2f3285 100644 --- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx @@ -5,8 +5,8 @@ import type { UpdateAppearanceConfig } from "api/typesGenerated"; import { Badges, DisabledBadge, - EnterpriseBadge, EntitledBadge, + PremiumBadge, } from "components/Badges/Badges"; import { PopoverPaywall } from "components/Paywall/PopoverPaywall"; import { @@ -64,13 +64,13 @@ export const AppearanceSettingsPageView: FC< - + diff --git a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx index 5bee1c3c7f..e64986c578 100644 --- a/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx @@ -7,7 +7,7 @@ import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; -import { EnterpriseBadge } from "components/Badges/Badges"; +import { PremiumBadge } from "components/Badges/Badges"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import type { FC } from "react"; import { docs } from "utils/docs"; @@ -45,9 +45,9 @@ export const ExternalAuthSettingsPageView: FC< marginBottom: 24, }} > - }> + }> Integrating with multiple External authentication providers is an - Enterprise feature. + Premium feature.
diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx index 5fd3b63400..30ea89c72f 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx @@ -58,7 +58,7 @@ export const LicenseCard: FC = ({ title="Confirm License Removal" confirmLoading={isRemoving} confirmText="Remove" - description="Removing this license will disable all Enterprise features. You add a new license at any time." + description="Removing this license will disable all Premium features. You add a new license at any time." /> = ({ > diff --git a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx index c3f898fd8c..bdf7b47722 100644 --- a/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx @@ -3,7 +3,7 @@ import { Badges, DisabledBadge, EnabledBadge, - EnterpriseBadge, + PremiumBadge, } from "components/Badges/Badges"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; @@ -34,7 +34,7 @@ export const ObservabilitySettingsPageView: FC< {featureAuditLogEnabled ? : } - +
diff --git a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx index 6efd98f85e..22365d069a 100644 --- a/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx @@ -3,7 +3,7 @@ import { Badges, DisabledBadge, EnabledBadge, - EnterpriseBadge, + PremiumBadge, } from "components/Badges/Badges"; import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; @@ -56,7 +56,7 @@ export const SecuritySettingsPageView: FC = ({ {featureBrowserOnlyEnabled ? : } - +
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 51187329f3..093ea25fec 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -47,7 +47,7 @@ export const GroupsPageView: FC = ({ @@ -58,7 +58,7 @@ export const GroupsPageView: FC = ({ Name Users - + diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index b0dc451728..82f7bf7b8d 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -86,7 +86,6 @@ export const CreateOrganizationPageView: FC< message="Organizations" description="Organizations allow you to run a Coder deployment with multiple platform teams, all with unique use cases, templates, and even underlying infrastructure." documentationLink={docs("/guides/using-organizations")} - licenseType="premium" /> diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx index 26565985e1..0f7add6aa0 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.stories.tsx @@ -21,6 +21,14 @@ export const NotEnabled: Story = { }, }; +export const NotEnabledEmptyTable: Story = { + args: { + roles: [], + canAssignOrgRole: true, + isCustomRolesEnabled: false, + }, +}; + export const Enabled: Story = { args: { roles: [MockRoleWithOrgPermissions], diff --git a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx index 80208aa4b4..4dc526cf6e 100644 --- a/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CustomRolesPage/CustomRolesPageView.tsx @@ -19,6 +19,7 @@ import { ThreeDotsButton, } from "components/MoreMenu/MoreMenu"; import { Paywall } from "components/Paywall/Paywall"; +import { Stack } from "components/Stack/Stack"; import { TableLoaderSkeleton, TableRowSkeleton, @@ -44,75 +45,74 @@ export const CustomRolesPageView: FC = ({ const isLoading = roles === undefined; const isEmpty = Boolean(roles && roles.length === 0); return ( - <> - - - - - - - - + + {!isCustomRolesEnabled && ( + + )} + +
+ + + Name + Permissions + + + + + + + + + + - Name - Permissions - + + } + variant="contained" + > + Create custom role + + ) + } + /> + - - - - - - + - - - - } - variant="contained" - > - Create custom role - - ) - } - /> - - - - - - {roles?.map((role) => ( - onDeleteRole(role)} - /> - ))} - - - -
- - - - + + {roles?.map((role) => ( + onDeleteRole(role)} + /> + ))} + + + + + + ); }; diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx index 4f66ff537f..54741bac3f 100644 --- a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPageView.tsx @@ -47,7 +47,7 @@ export const GroupsPageView: FC = ({ @@ -58,7 +58,7 @@ export const GroupsPageView: FC = ({ Name Users - + diff --git a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx index 44552f11f7..5744d6e582 100644 --- a/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/IdpSyncPage/IdpSyncPageView.tsx @@ -40,7 +40,7 @@ export const IdpSyncPageView: FC = ({ oidcConfig }) => { diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx index 9dfcb8f7d7..6b2e80567f 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx @@ -8,7 +8,7 @@ import { type UpdateTemplateMeta, WorkspaceAppSharingLevels, } from "api/typesGenerated"; -import { EnterpriseBadge } from "components/Badges/Badges"; +import { PremiumBadge } from "components/Badges/Badges"; import { FormFields, FormFooter, @@ -212,8 +212,8 @@ export const TemplateSettingsForm: FC = ({ alignItems="center" css={{ marginTop: 16 }} > - - Enterprise license required to enabled. + + Premium license required to enabled. )} @@ -241,9 +241,9 @@ export const TemplateSettingsForm: FC = ({ /> {!accessControlEnabled && ( - + - Enterprise license required to deprecate templates. + Premium license required to deprecate templates. {template.deprecated && " You cannot change the message, but you may remove it to mark this template as no longer deprecated."} @@ -281,9 +281,9 @@ export const TemplateSettingsForm: FC = ({ {!portSharingControlsEnabled && ( - + - Enterprise license required to control max port sharing level. + Premium license required to control max port sharing level. )} diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx index a9acbc4c08..eaa90dd2e7 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage.tsx @@ -32,7 +32,7 @@ export const TemplatePermissionsPage: FC = () => { {!isTemplateRBACEnabled ? ( ) : ( diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx index fe085022aa..81b98ffdc5 100644 --- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx +++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx @@ -12,7 +12,7 @@ import type { GroupsByUserId } from "api/queries/groups"; import type * as TypesGen from "api/typesGenerated"; import { AvatarData } from "components/AvatarData/AvatarData"; import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"; -import { EnterpriseBadge } from "components/Badges/Badges"; +import { PremiumBadge } from "components/Badges/Badges"; import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"; import { EmptyState } from "components/EmptyState/EmptyState"; import { LastSeen } from "components/LastSeen/LastSeen"; @@ -208,7 +208,7 @@ export const UsersTableBody: FC = ({ disabled={!canViewActivity} > View activity - {!canViewActivity && } + {!canViewActivity && } onResetUserPassword(user)} diff --git a/site/src/theme/branding.ts b/site/src/theme/branding.ts new file mode 100644 index 0000000000..d3b29ab7fd --- /dev/null +++ b/site/src/theme/branding.ts @@ -0,0 +1,6 @@ +export interface Branding { + background: string; + divider: string; + border: string; + text: string; +} diff --git a/site/src/theme/dark/branding.ts b/site/src/theme/dark/branding.ts new file mode 100644 index 0000000000..c44a7326c8 --- /dev/null +++ b/site/src/theme/dark/branding.ts @@ -0,0 +1,9 @@ +import type { Branding } from "../branding"; +import colors from "../tailwindColors"; + +export default { + background: colors.violet[950], + divider: colors.violet[900], + border: colors.violet[400], + text: colors.violet[50], +} satisfies Branding; diff --git a/site/src/theme/dark/index.ts b/site/src/theme/dark/index.ts index d9644e7494..29cec24923 100644 --- a/site/src/theme/dark/index.ts +++ b/site/src/theme/dark/index.ts @@ -1,4 +1,5 @@ import { forDarkThemes } from "../externalImages"; +import branding from "./branding"; import experimental from "./experimental"; import monaco from "./monaco"; import muiTheme from "./mui"; @@ -8,6 +9,7 @@ export default { ...muiTheme, externalImages: forDarkThemes, experimental, + branding, monaco, roles, }; diff --git a/site/src/theme/darkBlue/branding.ts b/site/src/theme/darkBlue/branding.ts new file mode 100644 index 0000000000..c44a7326c8 --- /dev/null +++ b/site/src/theme/darkBlue/branding.ts @@ -0,0 +1,9 @@ +import type { Branding } from "../branding"; +import colors from "../tailwindColors"; + +export default { + background: colors.violet[950], + divider: colors.violet[900], + border: colors.violet[400], + text: colors.violet[50], +} satisfies Branding; diff --git a/site/src/theme/darkBlue/index.ts b/site/src/theme/darkBlue/index.ts index d9644e7494..29cec24923 100644 --- a/site/src/theme/darkBlue/index.ts +++ b/site/src/theme/darkBlue/index.ts @@ -1,4 +1,5 @@ import { forDarkThemes } from "../externalImages"; +import branding from "./branding"; import experimental from "./experimental"; import monaco from "./monaco"; import muiTheme from "./mui"; @@ -8,6 +9,7 @@ export default { ...muiTheme, externalImages: forDarkThemes, experimental, + branding, monaco, roles, }; diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts index f161ec88cf..8509ccb413 100644 --- a/site/src/theme/index.ts +++ b/site/src/theme/index.ts @@ -1,6 +1,7 @@ // biome-ignore lint/nursery/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now. import type { Theme as MuiTheme } from "@mui/material/styles"; import type * as monaco from "monaco-editor"; +import type { Branding } from "./branding"; import dark from "./dark"; import darkBlue from "./darkBlue"; import type { NewTheme } from "./experimental"; @@ -20,6 +21,10 @@ export interface Theme extends Omit { /** Theme properties that we're testing out but haven't committed to. */ experimental: NewTheme; + + //** Theme colors related to marketing */ + branding: Branding; + monaco: monaco.editor.IStandaloneThemeData; externalImages: ExternalImageModeStyles; } diff --git a/site/src/theme/light/branding.ts b/site/src/theme/light/branding.ts new file mode 100644 index 0000000000..4b9ff1f3c8 --- /dev/null +++ b/site/src/theme/light/branding.ts @@ -0,0 +1,9 @@ +import type { Branding } from "../branding"; +import colors from "../tailwindColors"; + +export default { + background: colors.violet[100], + divider: colors.violet[300], + border: colors.violet[600], + text: colors.violet[950], +} satisfies Branding; diff --git a/site/src/theme/light/index.ts b/site/src/theme/light/index.ts index 466ff8d6fb..fd50cbd9f9 100644 --- a/site/src/theme/light/index.ts +++ b/site/src/theme/light/index.ts @@ -1,4 +1,5 @@ import { forLightThemes } from "../externalImages"; +import branding from "./branding"; import experimental from "./experimental"; import monaco from "./monaco"; import muiTheme from "./mui"; @@ -8,6 +9,7 @@ export default { ...muiTheme, externalImages: forLightThemes, experimental, + branding, monaco, roles, };