🎨(react) add UIKit theme support
Introduce new UIKit theme with light and dark variants, including comprehensive color tokens for both themes. Update relevant components and styles to accommodate the new theme architecture.
This commit is contained in:
Nathan Panchout
committed by
NathanVss
NathanVss
parent
186f0b86b7
commit
9cc9214e9a
@@ -278,6 +278,300 @@ const defaultConfig: Configuration = {
|
||||
},
|
||||
},
|
||||
},
|
||||
uikit_light: {
|
||||
globals: {
|
||||
colors: {
|
||||
"toto-text": "red",
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
colors: {
|
||||
"toto-text": "red",
|
||||
"primary-text": "#FFFFFF",
|
||||
"primary-050": "#EAF1FB",
|
||||
"primary-100": "#D6E4F6",
|
||||
"primary-150": "#C1D6F2",
|
||||
"primary-200": "#ACC9EE",
|
||||
"primary-250": "#97BBEA",
|
||||
"primary-300": "#82AEE6",
|
||||
"primary-350": "#6BA0E4",
|
||||
"primary-400": "#5693E0",
|
||||
"primary-450": "#4085DC",
|
||||
"primary-500": "#2976D8",
|
||||
"primary-550": "#1167D4",
|
||||
"primary-600": "#0559C5",
|
||||
"primary-650": "#054EAC",
|
||||
"primary-700": "#13458B",
|
||||
"primary-750": "#183C6E",
|
||||
"primary-800": "#193154",
|
||||
"primary-850": "#16273E",
|
||||
"primary-900": "#131C2A",
|
||||
"primary-950": "#0C1117",
|
||||
"secondary-text": "#FFF",
|
||||
"secondary-050": "#EAF1FB",
|
||||
"secondary-100": "#D6E4F6",
|
||||
"secondary-150": "#C1D6F2",
|
||||
"secondary-200": "#ACC9EE",
|
||||
"secondary-250": "#97BBEA",
|
||||
"secondary-300": "#82AEE6",
|
||||
"secondary-350": "#6BA0E4",
|
||||
"secondary-400": "#5693E0",
|
||||
"secondary-450": "#4085DC",
|
||||
"secondary-500": "#2976D8",
|
||||
"secondary-550": "#1167D4",
|
||||
"secondary-600": "#0559C5",
|
||||
"secondary-650": "#054EAC",
|
||||
"secondary-700": "#13458B",
|
||||
"secondary-750": "#183C6E",
|
||||
"secondary-800": "#193154",
|
||||
"secondary-850": "#16273E",
|
||||
"secondary-900": "#131C2A",
|
||||
"secondary-950": "#0C1117",
|
||||
"greyscale-000": "#FFFFFF",
|
||||
"greyscale-025": "#F8F8F9",
|
||||
"greyscale-050": "#F0F1F2",
|
||||
"greyscale-100": "#E1E2E4",
|
||||
"greyscale-150": "#D2D4D7",
|
||||
"greyscale-200": "#C4C7CA",
|
||||
"greyscale-250": "#B6B9BE",
|
||||
"greyscale-300": "#A7ABB1",
|
||||
"greyscale-350": "#999EA5",
|
||||
"greyscale-400": "#8B919A",
|
||||
"greyscale-450": "#7D848E",
|
||||
"greyscale-500": "#707882",
|
||||
"greyscale-550": "#626B77",
|
||||
"greyscale-600": "#565F6B",
|
||||
"greyscale-650": "#495360",
|
||||
"greyscale-700": "#3D4855",
|
||||
"greyscale-750": "#303C4B",
|
||||
"greyscale-800": "#26313F",
|
||||
"greyscale-850": "#1D2633",
|
||||
"greyscale-900": "#141C26",
|
||||
"greyscale-950": "#0D1117",
|
||||
"greyscale-1000": "#000000",
|
||||
"info-050": "#EAF1FB",
|
||||
"info-100": "#D5E4F7",
|
||||
"info-150": "#C0D6F4",
|
||||
"info-200": "#ABC9F0",
|
||||
"info-250": "#96BCEC",
|
||||
"info-300": "#80AEE8",
|
||||
"info-350": "#6BA0E4",
|
||||
"info-400": "#5693E1",
|
||||
"info-450": "#4085DD",
|
||||
"info-500": "#2976D8",
|
||||
"info-550": "#1167D4",
|
||||
"info-600": "#0559C5",
|
||||
"info-650": "#044EAD",
|
||||
"info-700": "#13458C",
|
||||
"info-750": "#183C6E",
|
||||
"info-800": "#183255",
|
||||
"info-850": "#16273E",
|
||||
"info-900": "#121C2A",
|
||||
"info-950": "#0C1117",
|
||||
"success-050": "#E4F7D4",
|
||||
"success-100": "#C7EEA7",
|
||||
"success-150": "#A9E578",
|
||||
"success-200": "#89DC45",
|
||||
"success-250": "#72CF27",
|
||||
"success-300": "#6AC024",
|
||||
"success-350": "#61B121",
|
||||
"success-400": "#59A21E",
|
||||
"success-450": "#51941C",
|
||||
"success-500": "#4A8519",
|
||||
"success-550": "#427816",
|
||||
"success-600": "#3A6A14",
|
||||
"success-650": "#335D11",
|
||||
"success-700": "#2F4F19",
|
||||
"success-750": "#2A411B",
|
||||
"success-800": "#25351A",
|
||||
"success-850": "#1E2818",
|
||||
"success-900": "#171D13",
|
||||
"success-950": "#0F110C",
|
||||
"warning-050": "#FFF1BD",
|
||||
"warning-100": "#FFE176",
|
||||
"warning-150": "#FFCF25",
|
||||
"warning-200": "#F4BF05",
|
||||
"warning-250": "#E3B204",
|
||||
"warning-300": "#D3A504",
|
||||
"warning-350": "#C29804",
|
||||
"warning-400": "#B28C03",
|
||||
"warning-450": "#A27F03",
|
||||
"warning-500": "#937303",
|
||||
"warning-550": "#836703",
|
||||
"warning-600": "#745B02",
|
||||
"warning-650": "#665002",
|
||||
"warning-700": "#554512",
|
||||
"warning-750": "#463B16",
|
||||
"warning-800": "#383017",
|
||||
"warning-850": "#2B2615",
|
||||
"warning-900": "#1E1C12",
|
||||
"warning-950": "#12110C",
|
||||
"danger-050": "#FCEDED",
|
||||
"danger-100": "#F9DCDC",
|
||||
"danger-150": "#F6CACA",
|
||||
"danger-200": "#F3B8B8",
|
||||
"danger-250": "#F0A5A5",
|
||||
"danger-300": "#ED9393",
|
||||
"danger-350": "#EA7F7F",
|
||||
"danger-400": "#E86969",
|
||||
"danger-450": "#E45151",
|
||||
"danger-500": "#DF3434",
|
||||
"danger-550": "#D80000",
|
||||
"danger-600": "#C00000",
|
||||
"danger-650": "#AA0000",
|
||||
"danger-700": "#8C1912",
|
||||
"danger-750": "#721F17",
|
||||
"danger-800": "#591F18",
|
||||
"danger-850": "#431C17",
|
||||
"danger-900": "#2F1613",
|
||||
"danger-950": "#1C0F0D",
|
||||
},
|
||||
},
|
||||
},
|
||||
uikit_dark: {
|
||||
theme: {
|
||||
colors: {
|
||||
"primary-text": "#FFFFFF",
|
||||
"primary-050": "#EAF1FB",
|
||||
"primary-100": "#D6E4F6",
|
||||
"primary-150": "#C1D6F2",
|
||||
"primary-200": "#ACC9EE",
|
||||
"primary-250": "#97BBEA",
|
||||
"primary-300": "#82AEE6",
|
||||
"primary-350": "#6BA0E4",
|
||||
"primary-400": "#5693E0",
|
||||
"primary-450": "#4085DC",
|
||||
"primary-500": "#2976D8",
|
||||
"primary-550": "#1167D4",
|
||||
"primary-600": "#0559C5",
|
||||
"primary-650": "#054EAC",
|
||||
"primary-700": "#13458B",
|
||||
"primary-750": "#183C6E",
|
||||
"primary-800": "#193154",
|
||||
"primary-850": "#16273E",
|
||||
"primary-900": "#131C2A",
|
||||
"primary-950": "#0C1117",
|
||||
"secondary-text": "#FFF",
|
||||
"secondary-050": "#EAF1FB",
|
||||
"secondary-100": "#D6E4F6",
|
||||
"secondary-150": "#C1D6F2",
|
||||
"secondary-200": "#ACC9EE",
|
||||
"secondary-250": "#97BBEA",
|
||||
"secondary-300": "#82AEE6",
|
||||
"secondary-350": "#6BA0E4",
|
||||
"secondary-400": "#5693E0",
|
||||
"secondary-450": "#4085DC",
|
||||
"secondary-500": "#2976D8",
|
||||
"secondary-550": "#1167D4",
|
||||
"secondary-600": "#0559C5",
|
||||
"secondary-650": "#054EAC",
|
||||
"secondary-700": "#13458B",
|
||||
"secondary-750": "#183C6E",
|
||||
"secondary-800": "#193154",
|
||||
"secondary-850": "#16273E",
|
||||
"secondary-900": "#131C2A",
|
||||
"secondary-950": "#0C1117",
|
||||
"greyscale-1000": "#FFFFFF",
|
||||
"greyscale-950": "#F8F8F9",
|
||||
"greyscale-900": "#F0F1F2",
|
||||
"greyscale-850": "#E1E2E4",
|
||||
"greyscale-800": "#D2D4D7",
|
||||
"greyscale-750": "#C4C7CA",
|
||||
"greyscale-700": "#B6B9BE",
|
||||
"greyscale-650": "#A7ABB1",
|
||||
"greyscale-600": "#999EA5",
|
||||
"greyscale-550": "#8B919A",
|
||||
"greyscale-500": "#7D848E",
|
||||
"greyscale-450": "#707882",
|
||||
"greyscale-400": "#626B77",
|
||||
"greyscale-350": "#565F6B",
|
||||
"greyscale-300": "#495360",
|
||||
"greyscale-250": "#3D4855",
|
||||
"greyscale-200": "#303C4B",
|
||||
"greyscale-150": "#26313F",
|
||||
"greyscale-100": "#1D2633",
|
||||
"greyscale-050": "#141C26",
|
||||
"greyscale-025": "#0D1117",
|
||||
"greyscale-000": "#000000",
|
||||
"info-050": "#EAF1FB",
|
||||
"info-100": "#D5E4F7",
|
||||
"info-150": "#C0D6F4",
|
||||
"info-200": "#ABC9F0",
|
||||
"info-250": "#96BCEC",
|
||||
"info-300": "#80AEE8",
|
||||
"info-350": "#6BA0E4",
|
||||
"info-400": "#5693E1",
|
||||
"info-450": "#4085DD",
|
||||
"info-500": "#2976D8",
|
||||
"info-550": "#1167D4",
|
||||
"info-600": "#0559C5",
|
||||
"info-650": "#044EAD",
|
||||
"info-700": "#13458C",
|
||||
"info-750": "#183C6E",
|
||||
"info-800": "#183255",
|
||||
"info-850": "#16273E",
|
||||
"info-900": "#121C2A",
|
||||
"info-950": "#0C1117",
|
||||
"success-050": "#E4F7D4",
|
||||
"success-100": "#C7EEA7",
|
||||
"success-150": "#A9E578",
|
||||
"success-200": "#89DC45",
|
||||
"success-250": "#72CF27",
|
||||
"success-300": "#6AC024",
|
||||
"success-350": "#61B121",
|
||||
"success-400": "#59A21E",
|
||||
"success-450": "#51941C",
|
||||
"success-500": "#4A8519",
|
||||
"success-550": "#427816",
|
||||
"success-600": "#3A6A14",
|
||||
"success-650": "#335D11",
|
||||
"success-700": "#2F4F19",
|
||||
"success-750": "#2A411B",
|
||||
"success-800": "#25351A",
|
||||
"success-850": "#1E2818",
|
||||
"success-900": "#171D13",
|
||||
"success-950": "#0F110C",
|
||||
"warning-050": "#FFF1BD",
|
||||
"warning-100": "#FFE176",
|
||||
"warning-150": "#FFCF25",
|
||||
"warning-200": "#F4BF05",
|
||||
"warning-250": "#E3B204",
|
||||
"warning-300": "#D3A504",
|
||||
"warning-350": "#C29804",
|
||||
"warning-400": "#B28C03",
|
||||
"warning-450": "#A27F03",
|
||||
"warning-500": "#937303",
|
||||
"warning-550": "#836703",
|
||||
"warning-600": "#745B02",
|
||||
"warning-650": "#665002",
|
||||
"warning-700": "#554512",
|
||||
"warning-750": "#463B16",
|
||||
"warning-800": "#383017",
|
||||
"warning-850": "#2B2615",
|
||||
"warning-900": "#1E1C12",
|
||||
"warning-950": "#12110C",
|
||||
"danger-050": "#FCEDED",
|
||||
"danger-100": "#F9DCDC",
|
||||
"danger-150": "#F6CACA",
|
||||
"danger-200": "#F3B8B8",
|
||||
"danger-250": "#F0A5A5",
|
||||
"danger-300": "#ED9393",
|
||||
"danger-350": "#EA7F7F",
|
||||
"danger-400": "#E86969",
|
||||
"danger-450": "#E45151",
|
||||
"danger-500": "#DF3434",
|
||||
"danger-550": "#D80000",
|
||||
"danger-600": "#C00000",
|
||||
"danger-650": "#AA0000",
|
||||
"danger-700": "#8C1912",
|
||||
"danger-750": "#721F17",
|
||||
"danger-800": "#591F18",
|
||||
"danger-850": "#431C17",
|
||||
"danger-900": "#2F1613",
|
||||
"danger-950": "#1C0F0D",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user