Skip to content

[CCUBE-2094][XY] Add CareerCompass theme + secondary colour semantic tokens #1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
qroll merged 3 commits into from
Jun 1, 2026
Merged

[CCUBE-2094][XY] Add CareerCompass theme + secondary colour semantic tokens #1227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eadb7b
[CCUBE-2094][XY] Add CareerCompass theme + secondary colour semantic …
ninjasheeps May 29, 2026
f45cfaf
[CCUBE-2094][XY] Update CareerCompass fontScheme
ninjasheeps May 29, 2026
89f0293
[CCUBE-2094][XY] Reorder semantic colour docs
ninjasheeps May 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
SupportGoWhereTheme,
SGWDigitalLobbyTheme,
SMGSTheme,
CareerCompassTheme,
} from "../src/theme";
import { withThemeFromJSXProvider } from "./decorators/theme-decorator";

Expand All @@ -35,6 +36,7 @@ const preview: Preview = {
RBS: RBSTheme,
SPF: SPFTheme,
SMGS: SMGSTheme,
CareerCompass: CareerCompassTheme,
},
Provider: ThemeProvider,
}),
Expand Down
105 changes: 105 additions & 0 deletions src/theme/colour-primitive/specs/careercompass-colour-set.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { PrimitiveColourSet } from "../../types";

export const CareerCompassColourSet: PrimitiveColourSet = {
white: "#FFFFFF",
black: "#000000",
"brand-10": "#001731",
"brand-20": "#002752",
"brand-30": "#003874",
"brand-40": "#004D9F",
"brand-50": "#1768BE",
"brand-60": "#3C91EC",
"brand-70": "#6CB4FF",
"brand-80": "#A5CDFF",
"brand-90": "#CFE1FE",
"brand-95": "#E8F0FE",
"brand-100": "#F7F9FF",

"primary-10": "#001731",
"primary-20": "#002752",
"primary-30": "#003874",
"primary-40": "#004D9F",
"primary-50": "#1768BE",
"primary-60": "#3C91EC",
"primary-70": "#6CB4FF",
"primary-80": "#A5CDFF",
"primary-90": "#CFE1FE",
"primary-95": "#E8F0FE",
"primary-100": "#F7F9FF",

"secondary-10": "#001A19",
"secondary-20": "#002D2B",
"secondary-30": "#00413D",
"secondary-40": "#005954",
"secondary-50": "#00756F",
"secondary-60": "#03A098",
"secondary-70": "#55BFBA",
"secondary-80": "#92D6D2",
"secondary-90": "#BFE7E5",
"secondary-95": "#DDF2F1",
"secondary-100": "#F4FBFA",

"neutral-10": "#161616",
"neutral-20": "#282828",
"neutral-30": "#393939",
"neutral-40": "#4E4E4E",
"neutral-50": "#686868",
"neutral-60": "#8E8E8E",
"neutral-70": "#AFAFB0",
"neutral-80": "#C7CACA",
"neutral-90": "#DDE1E2",
"neutral-95": "#EDEFEF",
"neutral-100": "#F9F9F9",

"success-10": "#081A0F",
"success-20": "#0E2D1B",
"success-30": "#154126",
"success-40": "#1C5A34",
"success-50": "#257645",
"success-60": "#44A068",
"success-70": "#64C189",
"success-80": "#80DCA5",
"success-90": "#B4ECCB",
"success-95": "#D5F6E2",
"success-100": "#EFFCF4",

"warning-10": "#221302",
"warning-20": "#3B2204",
"warning-30": "#543106",
"warning-40": "#744408",
"warning-50": "#98590C",
"warning-60": "#D07A13",
"warning-70": "#E4A244",
"warning-80": "#F5C26C",
"warning-90": "#FADBA6",
"warning-95": "#FCECD4",
"warning-100": "#FDF7F0",

"error-10": "#330505",
"error-20": "#550808",
"error-30": "#750C0C",
"error-40": "#9E130F",
"error-50": "#CB2213",
"error-60": "#DE6C6C",
"error-70": "#E89B9B",
"error-80": "#EFBEBE",
"error-90": "#F5D9D9",
"error-95": "#F9ECEC",
"error-100": "#FCF7F7",

"info-10": "#021824",
"info-20": "#032B3F",
"info-30": "#053D59",
"info-40": "#06547B",
"info-50": "#176E9B",
"info-60": "#5296BE",
"info-70": "#82B5DA",
"info-80": "#ACCFE7",
"info-90": "#CCE3F1",
"info-95": "#E3F1F8",
"info-100": "#F4FAFD",

"primary-inverse": "#FEAB10",
};

export default CareerCompassColourSet;
3 changes: 3 additions & 0 deletions src/theme/colour-primitive/theme-helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { SupportGoWhereColourSet } from "./specs/supportgowhere-colour-set";
import { IMDAColourSet } from "./specs/imda-colour-set";
import { SPFColourSet } from "./specs/spf-colour-set";
import { SMGSColourSet } from "./specs/smgs-colour-set";
import { CareerCompassColourSet } from "./specs/careercompass-colour-set";
import { ColourCollectionsMap } from "./types";

export const ColourSpec: ThemeCollectionSpec<
Expand All @@ -32,6 +33,7 @@ export const ColourSpec: ThemeCollectionSpec<
sgwdigitallobby: SupportGoWhereColourSet,
imda: IMDAColourSet,
spf: SPFColourSet,
careercompass: CareerCompassColourSet,
smgs: SMGSColourSet,
},
defaultValue: "lifesg",
Expand All @@ -58,6 +60,7 @@ export const DarkColourSpec: ThemeCollectionSpec<
sgwdigitallobby: SupportGoWhereColourSet,
imda: IMDAColourSet,
spf: SPFColourSet,
careercompass: CareerCompassColourSet,
smgs: SMGSColourSet,
},
defaultValue: "lifesg",
Expand Down
18 changes: 18 additions & 0 deletions src/theme/colour-semantic/specs/a11yplayground-semantic-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-60"),
"text-primary": getPrimitiveColour("primary-50"),
"text-primary-strongest": getPrimitiveColour("primary-20"),
"text-secondary": getPrimitiveColour("secondary-50"),
"text-secondary-subtle": getPrimitiveColour("secondary-60"),

"text-hover": getPrimitiveColour("primary-40"),
"text-selected": getPrimitiveColour("primary-50"),
Expand All @@ -36,6 +38,8 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-50"),
"icon-primary-subtle": getPrimitiveColour("primary-60"),
"icon-primary-subtlest": getPrimitiveColour("primary-70"),
"icon-secondary": getPrimitiveColour("secondary-50"),
"icon-secondary-subtle": getPrimitiveColour("secondary-60"),

"icon-hover": getPrimitiveColour("primary-40"),
"icon-selected": getPrimitiveColour("primary-50"),
Expand Down Expand Up @@ -134,6 +138,11 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-100"),
"bg-available": "#6DD0A1",

"bg-secondary": getPrimitiveColour("secondary-50"),
"bg-secondary-subtle": getPrimitiveColour("secondary-60"),
"bg-secondary-subtler": getPrimitiveColour("secondary-95"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-100"),

"bg-primary-hover": getPrimitiveColour("primary-40"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
Expand Down Expand Up @@ -165,6 +174,8 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-50"),
"text-primary": getPrimitiveColour("primary-60"),
"text-primary-strongest": getPrimitiveColour("primary-90"),
"text-secondary": getPrimitiveColour("secondary-60"),
"text-secondary-subtle": getPrimitiveColour("secondary-50"),

"text-hover": getPrimitiveColour("primary-70"),
"text-selected": getPrimitiveColour("primary-60"),
Expand All @@ -188,6 +199,8 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-60"),
"icon-primary-subtle": getPrimitiveColour("primary-50"),
"icon-primary-subtlest": getPrimitiveColour("primary-40"),
"icon-secondary": getPrimitiveColour("secondary-60"),
"icon-secondary-subtle": getPrimitiveColour("secondary-50"),

"icon-hover": getPrimitiveColour("primary-70"),
"icon-selected": getPrimitiveColour("primary-60"),
Expand Down Expand Up @@ -286,6 +299,11 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-10"),
"bg-available": "#185339", // Darker green for dark mode

"bg-secondary": getPrimitiveColour("secondary-60"),
"bg-secondary-subtle": getPrimitiveColour("secondary-50"),
"bg-secondary-subtler": getPrimitiveColour("secondary-20"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-10"),

"bg-primary-hover": getPrimitiveColour("primary-70"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
Expand Down
18 changes: 18 additions & 0 deletions src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const LifeSGColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-60"),
"text-primary": getPrimitiveColour("primary-50"),
"text-primary-strongest": getPrimitiveColour("primary-20"),
"text-secondary": getPrimitiveColour("secondary-50"),
"text-secondary-subtle": getPrimitiveColour("secondary-60"),

"text-hover": getPrimitiveColour("primary-40"),
"text-selected": getPrimitiveColour("primary-50"),
Expand All @@ -36,6 +38,8 @@ export const LifeSGColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-50"),
"icon-primary-subtle": getPrimitiveColour("primary-60"),
"icon-primary-subtlest": getPrimitiveColour("primary-70"),
"icon-secondary": getPrimitiveColour("secondary-50"),
"icon-secondary-subtle": getPrimitiveColour("secondary-60"),

"icon-hover": getPrimitiveColour("primary-40"),
"icon-selected": getPrimitiveColour("primary-50"),
Expand Down Expand Up @@ -134,6 +138,11 @@ export const LifeSGColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-100"),
"bg-available": "#6DD0A1",

"bg-secondary": getPrimitiveColour("secondary-50"),
"bg-secondary-subtle": getPrimitiveColour("secondary-60"),
"bg-secondary-subtler": getPrimitiveColour("secondary-95"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-100"),

"bg-primary-hover": getPrimitiveColour("primary-40"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
Expand Down Expand Up @@ -166,6 +175,8 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-50"),
"text-primary": getPrimitiveColour("primary-60"),
"text-primary-strongest": getPrimitiveColour("primary-90"),
"text-secondary": getPrimitiveColour("secondary-60"),
"text-secondary-subtle": getPrimitiveColour("secondary-50"),

"text-hover": getPrimitiveColour("primary-70"),
"text-selected": getPrimitiveColour("primary-60"),
Expand All @@ -189,6 +200,8 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-60"),
"icon-primary-subtle": getPrimitiveColour("primary-50"),
"icon-primary-subtlest": getPrimitiveColour("primary-40"),
"icon-secondary": getPrimitiveColour("secondary-60"),
"icon-secondary-subtle": getPrimitiveColour("secondary-50"),

"icon-hover": getPrimitiveColour("primary-70"),
"icon-selected": getPrimitiveColour("primary-60"),
Expand Down Expand Up @@ -287,6 +300,11 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-10"),
"bg-available": "#185339", // Darker green for dark mode

"bg-secondary": getPrimitiveColour("secondary-60"),
"bg-secondary-subtle": getPrimitiveColour("secondary-50"),
"bg-secondary-subtler": getPrimitiveColour("secondary-20"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-10"),

"bg-primary-hover": getPrimitiveColour("primary-70"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
Expand Down
9 changes: 9 additions & 0 deletions src/theme/colour-semantic/specs/pa-semantic-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const PAColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-70"),
"text-primary": getPrimitiveColour("neutral-10"),
"text-primary-strongest": getPrimitiveColour("neutral-10"),
"text-secondary": getPrimitiveColour("secondary-50"),
"text-secondary-subtle": getPrimitiveColour("secondary-60"),

"text-hover": getPrimitiveColour("neutral-70"),
"text-selected": getPrimitiveColour("neutral-20"),
Expand All @@ -36,6 +38,8 @@ export const PAColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("neutral-10"),
"icon-primary-subtle": getPrimitiveColour("neutral-30"),
"icon-primary-subtlest": getPrimitiveColour("neutral-60"),
"icon-secondary": getPrimitiveColour("secondary-50"),
"icon-secondary-subtle": getPrimitiveColour("secondary-60"),

"icon-hover": getPrimitiveColour("neutral-70"),
"icon-selected": getPrimitiveColour("brand-20"),
Expand Down Expand Up @@ -134,6 +138,11 @@ export const PAColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("brand-100"),
"bg-available": getPrimitiveColour("success-60"),

"bg-secondary": getPrimitiveColour("secondary-50"),
"bg-secondary-subtle": getPrimitiveColour("secondary-60"),
"bg-secondary-subtler": getPrimitiveColour("secondary-95"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-100"),

"bg-primary-hover": getPrimitiveColour("brand-10"),
"bg-primary-subtlest-hover": getPrimitiveColour("brand-80"),
"bg-primary-subtlest-selected": getPrimitiveColour("brand-40"),
Expand Down
18 changes: 18 additions & 0 deletions src/theme/colour-semantic/specs/sgwdigitallobby-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-60"),
"text-primary": getPrimitiveColour("primary-50"),
"text-primary-strongest": getPrimitiveColour("primary-20"),
"text-secondary": getPrimitiveColour("secondary-50"),
"text-secondary-subtle": getPrimitiveColour("secondary-60"),

"text-hover": getPrimitiveColour("primary-40"),
"text-selected": getPrimitiveColour("primary-50"),
Expand All @@ -36,6 +38,8 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-50"),
"icon-primary-subtle": getPrimitiveColour("primary-60"),
"icon-primary-subtlest": getPrimitiveColour("primary-70"),
"icon-secondary": getPrimitiveColour("secondary-50"),
"icon-secondary-subtle": getPrimitiveColour("secondary-60"),

"icon-hover": getPrimitiveColour("primary-40"),
"icon-selected": getPrimitiveColour("primary-50"),
Expand Down Expand Up @@ -134,6 +138,11 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-100"),
"bg-available": "#6DD0A1",

"bg-secondary": getPrimitiveColour("secondary-50"),
"bg-secondary-subtle": getPrimitiveColour("secondary-60"),
"bg-secondary-subtler": getPrimitiveColour("secondary-95"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-100"),

"bg-primary-hover": getPrimitiveColour("primary-40"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
Expand Down Expand Up @@ -166,6 +175,8 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
"text-subtlest": getPrimitiveColour("neutral-50"),
"text-primary": getPrimitiveColour("primary-60"),
"text-primary-strongest": getPrimitiveColour("primary-90"),
"text-secondary": getPrimitiveColour("secondary-60"),
"text-secondary-subtle": getPrimitiveColour("secondary-50"),

"text-hover": getPrimitiveColour("primary-70"),
"text-selected": getPrimitiveColour("primary-60"),
Expand All @@ -189,6 +200,8 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
"icon-primary": getPrimitiveColour("primary-60"),
"icon-primary-subtle": getPrimitiveColour("primary-50"),
"icon-primary-subtlest": getPrimitiveColour("primary-40"),
"icon-secondary": getPrimitiveColour("secondary-60"),
"icon-secondary-subtle": getPrimitiveColour("secondary-50"),

"icon-hover": getPrimitiveColour("primary-70"),
"icon-selected": getPrimitiveColour("primary-60"),
Expand Down Expand Up @@ -287,6 +300,11 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
"bg-primary-subtlest": getPrimitiveColour("primary-10"),
"bg-available": "#185339", // Darker green for dark mode

"bg-secondary": getPrimitiveColour("secondary-60"),
"bg-secondary-subtle": getPrimitiveColour("secondary-50"),
"bg-secondary-subtler": getPrimitiveColour("secondary-20"),
"bg-secondary-subtlest": getPrimitiveColour("secondary-10"),

"bg-primary-hover": getPrimitiveColour("primary-70"),
"bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
"bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
Expand Down
Loading