diff --git a/apps/demo/cunningham.ts b/apps/demo/cunningham.ts index 1d2fae3..a704496 100644 --- a/apps/demo/cunningham.ts +++ b/apps/demo/cunningham.ts @@ -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", + }, + }, + }, }, }; diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx index ccff576..903151b 100644 --- a/apps/demo/src/App.tsx +++ b/apps/demo/src/App.tsx @@ -13,6 +13,7 @@ enum Theme { CUNNINGHAM = "cunningham", REDFLUX = "redflux", BLUENEY = "blueney", + UIKIT = "uikit" } enum Variant { @@ -33,6 +34,10 @@ const THEMES: Record> = { light: undefined, dark: "blueney_dark", }, + [Theme.UIKIT]: { + light: "uikit_light", + dark: "uikit_dark", + }, }; export type PageProps = ReturnType; diff --git a/apps/demo/src/Create.tsx b/apps/demo/src/Create.tsx index 0b76194..3d03682 100644 --- a/apps/demo/src/Create.tsx +++ b/apps/demo/src/Create.tsx @@ -53,7 +53,7 @@ export const Create = (props: PageProps) => { title="Add character" closeOnClickOutside > -
+

General Information

diff --git a/apps/demo/src/Home.tsx b/apps/demo/src/Home.tsx index 3fedc3b..f0de512 100644 --- a/apps/demo/src/Home.tsx +++ b/apps/demo/src/Home.tsx @@ -42,14 +42,14 @@ export const Home = ({ modal }: { modal: PageProps }) => { // Set the pagination length. pagination.setPagesCount( - Math.ceil(sortedDatabase.length / pagination.pageSize), + Math.ceil(sortedDatabase.length / pagination.pageSize) ); // Select the rows to display on the current page. setRows( sortedDatabase.slice( (pagination.page - 1) * pagination.pageSize, - pagination.page * pagination.pageSize, - ), + pagination.page * pagination.pageSize + ) ); setIsLoading(false); }, [pagination.page, sortModel, modal.isOpen, refresh]); @@ -57,11 +57,11 @@ export const Home = ({ modal }: { modal: PageProps }) => { return (
-

+

{/* eslint-disable-next-line react/no-unescaped-entities */} - 🍿Cunningham's Cast + 🍿Cunningham's Cast

-

+

Happy Days is an American television sitcom that aired first-run from January 15, 1974, to September 24, 1984, on ABC-TV
with a total of 255 half-hour episodes spanning over eleven @@ -134,13 +134,13 @@ export const Home = ({ modal }: { modal: PageProps }) => { return; } const index = database.findIndex( - (character) => character.id === params.row.id, + (character) => character.id === params.row.id ); database.splice(index, 1); setRefresh(refresh + 1); toast( "Character deleted successfully", - VariantType.WARNING, + VariantType.WARNING ); }} icon={delete} diff --git a/apps/demo/src/cunningham-tokens-sass.scss b/apps/demo/src/cunningham-tokens-sass.scss index cb3bc77..5254be9 100644 --- a/apps/demo/src/cunningham-tokens-sass.scss +++ b/apps/demo/src/cunningham-tokens-sass.scss @@ -457,5 +457,293 @@ $themes: ( 'box-shadow': #{rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px} ) ) + ), + 'uikit_light': ( + '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-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 + ) + ) ) ) !default; diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css index 817507f..4d072f7 100644 --- a/apps/demo/src/cunningham-tokens.css +++ b/apps/demo/src/cunningham-tokens.css @@ -1241,3 +1241,283 @@ --c--components--modal--border-color: transparent; --c--components--modal--box-shadow: rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px; } +.cunningham-theme--uikit_light{ + --c--theme--colors--primary-text: #FFFFFF; + --c--theme--colors--primary-050: #EAF1FB; + --c--theme--colors--primary-100: #D6E4F6; + --c--theme--colors--primary-150: #C1D6F2; + --c--theme--colors--primary-200: #ACC9EE; + --c--theme--colors--primary-250: #97BBEA; + --c--theme--colors--primary-300: #82AEE6; + --c--theme--colors--primary-350: #6BA0E4; + --c--theme--colors--primary-400: #5693E0; + --c--theme--colors--primary-450: #4085DC; + --c--theme--colors--primary-500: #2976D8; + --c--theme--colors--primary-550: #1167D4; + --c--theme--colors--primary-600: #0559C5; + --c--theme--colors--primary-650: #054EAC; + --c--theme--colors--primary-700: #13458B; + --c--theme--colors--primary-750: #183C6E; + --c--theme--colors--primary-800: #193154; + --c--theme--colors--primary-850: #16273E; + --c--theme--colors--primary-900: #131C2A; + --c--theme--colors--primary-950: #0C1117; + --c--theme--colors--secondary-text: #FFF; + --c--theme--colors--secondary-050: #EAF1FB; + --c--theme--colors--secondary-100: #D6E4F6; + --c--theme--colors--secondary-150: #C1D6F2; + --c--theme--colors--secondary-200: #ACC9EE; + --c--theme--colors--secondary-250: #97BBEA; + --c--theme--colors--secondary-300: #82AEE6; + --c--theme--colors--secondary-350: #6BA0E4; + --c--theme--colors--secondary-400: #5693E0; + --c--theme--colors--secondary-450: #4085DC; + --c--theme--colors--secondary-500: #2976D8; + --c--theme--colors--secondary-550: #1167D4; + --c--theme--colors--secondary-600: #0559C5; + --c--theme--colors--secondary-650: #054EAC; + --c--theme--colors--secondary-700: #13458B; + --c--theme--colors--secondary-750: #183C6E; + --c--theme--colors--secondary-800: #193154; + --c--theme--colors--secondary-850: #16273E; + --c--theme--colors--secondary-900: #131C2A; + --c--theme--colors--secondary-950: #0C1117; + --c--theme--colors--greyscale-000: #FFFFFF; + --c--theme--colors--greyscale-025: #F8F8F9; + --c--theme--colors--greyscale-050: #F0F1F2; + --c--theme--colors--greyscale-100: #E1E2E4; + --c--theme--colors--greyscale-150: #D2D4D7; + --c--theme--colors--greyscale-200: #C4C7CA; + --c--theme--colors--greyscale-250: #B6B9BE; + --c--theme--colors--greyscale-300: #A7ABB1; + --c--theme--colors--greyscale-350: #999EA5; + --c--theme--colors--greyscale-400: #8B919A; + --c--theme--colors--greyscale-450: #7D848E; + --c--theme--colors--greyscale-500: #707882; + --c--theme--colors--greyscale-550: #626B77; + --c--theme--colors--greyscale-600: #565F6B; + --c--theme--colors--greyscale-650: #495360; + --c--theme--colors--greyscale-700: #3D4855; + --c--theme--colors--greyscale-750: #303C4B; + --c--theme--colors--greyscale-800: #26313F; + --c--theme--colors--greyscale-850: #1D2633; + --c--theme--colors--greyscale-900: #141C26; + --c--theme--colors--greyscale-950: #0D1117; + --c--theme--colors--greyscale-1000: #000000; + --c--theme--colors--info-050: #EAF1FB; + --c--theme--colors--info-100: #D5E4F7; + --c--theme--colors--info-150: #C0D6F4; + --c--theme--colors--info-200: #ABC9F0; + --c--theme--colors--info-250: #96BCEC; + --c--theme--colors--info-300: #80AEE8; + --c--theme--colors--info-350: #6BA0E4; + --c--theme--colors--info-400: #5693E1; + --c--theme--colors--info-450: #4085DD; + --c--theme--colors--info-500: #2976D8; + --c--theme--colors--info-550: #1167D4; + --c--theme--colors--info-600: #0559C5; + --c--theme--colors--info-650: #044EAD; + --c--theme--colors--info-700: #13458C; + --c--theme--colors--info-750: #183C6E; + --c--theme--colors--info-800: #183255; + --c--theme--colors--info-850: #16273E; + --c--theme--colors--info-900: #121C2A; + --c--theme--colors--info-950: #0C1117; + --c--theme--colors--success-050: #E4F7D4; + --c--theme--colors--success-100: #C7EEA7; + --c--theme--colors--success-150: #A9E578; + --c--theme--colors--success-200: #89DC45; + --c--theme--colors--success-250: #72CF27; + --c--theme--colors--success-300: #6AC024; + --c--theme--colors--success-350: #61B121; + --c--theme--colors--success-400: #59A21E; + --c--theme--colors--success-450: #51941C; + --c--theme--colors--success-500: #4A8519; + --c--theme--colors--success-550: #427816; + --c--theme--colors--success-600: #3A6A14; + --c--theme--colors--success-650: #335D11; + --c--theme--colors--success-700: #2F4F19; + --c--theme--colors--success-750: #2A411B; + --c--theme--colors--success-800: #25351A; + --c--theme--colors--success-850: #1E2818; + --c--theme--colors--success-900: #171D13; + --c--theme--colors--success-950: #0F110C; + --c--theme--colors--warning-050: #FFF1BD; + --c--theme--colors--warning-100: #FFE176; + --c--theme--colors--warning-150: #FFCF25; + --c--theme--colors--warning-200: #F4BF05; + --c--theme--colors--warning-250: #E3B204; + --c--theme--colors--warning-300: #D3A504; + --c--theme--colors--warning-350: #C29804; + --c--theme--colors--warning-400: #B28C03; + --c--theme--colors--warning-450: #A27F03; + --c--theme--colors--warning-500: #937303; + --c--theme--colors--warning-550: #836703; + --c--theme--colors--warning-600: #745B02; + --c--theme--colors--warning-650: #665002; + --c--theme--colors--warning-700: #554512; + --c--theme--colors--warning-750: #463B16; + --c--theme--colors--warning-800: #383017; + --c--theme--colors--warning-850: #2B2615; + --c--theme--colors--warning-900: #1E1C12; + --c--theme--colors--warning-950: #12110C; + --c--theme--colors--danger-050: #FCEDED; + --c--theme--colors--danger-100: #F9DCDC; + --c--theme--colors--danger-150: #F6CACA; + --c--theme--colors--danger-200: #F3B8B8; + --c--theme--colors--danger-250: #F0A5A5; + --c--theme--colors--danger-300: #ED9393; + --c--theme--colors--danger-350: #EA7F7F; + --c--theme--colors--danger-400: #E86969; + --c--theme--colors--danger-450: #E45151; + --c--theme--colors--danger-500: #DF3434; + --c--theme--colors--danger-550: #D80000; + --c--theme--colors--danger-600: #C00000; + --c--theme--colors--danger-650: #AA0000; + --c--theme--colors--danger-700: #8C1912; + --c--theme--colors--danger-750: #721F17; + --c--theme--colors--danger-800: #591F18; + --c--theme--colors--danger-850: #431C17; + --c--theme--colors--danger-900: #2F1613; + --c--theme--colors--danger-950: #1C0F0D; +} +.cunningham-theme--uikit_dark{ + --c--theme--colors--primary-text: #FFFFFF; + --c--theme--colors--primary-050: #EAF1FB; + --c--theme--colors--primary-100: #D6E4F6; + --c--theme--colors--primary-150: #C1D6F2; + --c--theme--colors--primary-200: #ACC9EE; + --c--theme--colors--primary-250: #97BBEA; + --c--theme--colors--primary-300: #82AEE6; + --c--theme--colors--primary-350: #6BA0E4; + --c--theme--colors--primary-400: #5693E0; + --c--theme--colors--primary-450: #4085DC; + --c--theme--colors--primary-500: #2976D8; + --c--theme--colors--primary-550: #1167D4; + --c--theme--colors--primary-600: #0559C5; + --c--theme--colors--primary-650: #054EAC; + --c--theme--colors--primary-700: #13458B; + --c--theme--colors--primary-750: #183C6E; + --c--theme--colors--primary-800: #193154; + --c--theme--colors--primary-850: #16273E; + --c--theme--colors--primary-900: #131C2A; + --c--theme--colors--primary-950: #0C1117; + --c--theme--colors--secondary-text: #FFF; + --c--theme--colors--secondary-050: #EAF1FB; + --c--theme--colors--secondary-100: #D6E4F6; + --c--theme--colors--secondary-150: #C1D6F2; + --c--theme--colors--secondary-200: #ACC9EE; + --c--theme--colors--secondary-250: #97BBEA; + --c--theme--colors--secondary-300: #82AEE6; + --c--theme--colors--secondary-350: #6BA0E4; + --c--theme--colors--secondary-400: #5693E0; + --c--theme--colors--secondary-450: #4085DC; + --c--theme--colors--secondary-500: #2976D8; + --c--theme--colors--secondary-550: #1167D4; + --c--theme--colors--secondary-600: #0559C5; + --c--theme--colors--secondary-650: #054EAC; + --c--theme--colors--secondary-700: #13458B; + --c--theme--colors--secondary-750: #183C6E; + --c--theme--colors--secondary-800: #193154; + --c--theme--colors--secondary-850: #16273E; + --c--theme--colors--secondary-900: #131C2A; + --c--theme--colors--secondary-950: #0C1117; + --c--theme--colors--greyscale-1000: #FFFFFF; + --c--theme--colors--greyscale-950: #F8F8F9; + --c--theme--colors--greyscale-900: #F0F1F2; + --c--theme--colors--greyscale-850: #E1E2E4; + --c--theme--colors--greyscale-800: #D2D4D7; + --c--theme--colors--greyscale-750: #C4C7CA; + --c--theme--colors--greyscale-700: #B6B9BE; + --c--theme--colors--greyscale-650: #A7ABB1; + --c--theme--colors--greyscale-600: #999EA5; + --c--theme--colors--greyscale-550: #8B919A; + --c--theme--colors--greyscale-500: #7D848E; + --c--theme--colors--greyscale-450: #707882; + --c--theme--colors--greyscale-400: #626B77; + --c--theme--colors--greyscale-350: #565F6B; + --c--theme--colors--greyscale-300: #495360; + --c--theme--colors--greyscale-250: #3D4855; + --c--theme--colors--greyscale-200: #303C4B; + --c--theme--colors--greyscale-150: #26313F; + --c--theme--colors--greyscale-100: #1D2633; + --c--theme--colors--greyscale-050: #141C26; + --c--theme--colors--greyscale-025: #0D1117; + --c--theme--colors--greyscale-000: #000000; + --c--theme--colors--info-050: #EAF1FB; + --c--theme--colors--info-100: #D5E4F7; + --c--theme--colors--info-150: #C0D6F4; + --c--theme--colors--info-200: #ABC9F0; + --c--theme--colors--info-250: #96BCEC; + --c--theme--colors--info-300: #80AEE8; + --c--theme--colors--info-350: #6BA0E4; + --c--theme--colors--info-400: #5693E1; + --c--theme--colors--info-450: #4085DD; + --c--theme--colors--info-500: #2976D8; + --c--theme--colors--info-550: #1167D4; + --c--theme--colors--info-600: #0559C5; + --c--theme--colors--info-650: #044EAD; + --c--theme--colors--info-700: #13458C; + --c--theme--colors--info-750: #183C6E; + --c--theme--colors--info-800: #183255; + --c--theme--colors--info-850: #16273E; + --c--theme--colors--info-900: #121C2A; + --c--theme--colors--info-950: #0C1117; + --c--theme--colors--success-050: #E4F7D4; + --c--theme--colors--success-100: #C7EEA7; + --c--theme--colors--success-150: #A9E578; + --c--theme--colors--success-200: #89DC45; + --c--theme--colors--success-250: #72CF27; + --c--theme--colors--success-300: #6AC024; + --c--theme--colors--success-350: #61B121; + --c--theme--colors--success-400: #59A21E; + --c--theme--colors--success-450: #51941C; + --c--theme--colors--success-500: #4A8519; + --c--theme--colors--success-550: #427816; + --c--theme--colors--success-600: #3A6A14; + --c--theme--colors--success-650: #335D11; + --c--theme--colors--success-700: #2F4F19; + --c--theme--colors--success-750: #2A411B; + --c--theme--colors--success-800: #25351A; + --c--theme--colors--success-850: #1E2818; + --c--theme--colors--success-900: #171D13; + --c--theme--colors--success-950: #0F110C; + --c--theme--colors--warning-050: #FFF1BD; + --c--theme--colors--warning-100: #FFE176; + --c--theme--colors--warning-150: #FFCF25; + --c--theme--colors--warning-200: #F4BF05; + --c--theme--colors--warning-250: #E3B204; + --c--theme--colors--warning-300: #D3A504; + --c--theme--colors--warning-350: #C29804; + --c--theme--colors--warning-400: #B28C03; + --c--theme--colors--warning-450: #A27F03; + --c--theme--colors--warning-500: #937303; + --c--theme--colors--warning-550: #836703; + --c--theme--colors--warning-600: #745B02; + --c--theme--colors--warning-650: #665002; + --c--theme--colors--warning-700: #554512; + --c--theme--colors--warning-750: #463B16; + --c--theme--colors--warning-800: #383017; + --c--theme--colors--warning-850: #2B2615; + --c--theme--colors--warning-900: #1E1C12; + --c--theme--colors--warning-950: #12110C; + --c--theme--colors--danger-050: #FCEDED; + --c--theme--colors--danger-100: #F9DCDC; + --c--theme--colors--danger-150: #F6CACA; + --c--theme--colors--danger-200: #F3B8B8; + --c--theme--colors--danger-250: #F0A5A5; + --c--theme--colors--danger-300: #ED9393; + --c--theme--colors--danger-350: #EA7F7F; + --c--theme--colors--danger-400: #E86969; + --c--theme--colors--danger-450: #E45151; + --c--theme--colors--danger-500: #DF3434; + --c--theme--colors--danger-550: #D80000; + --c--theme--colors--danger-600: #C00000; + --c--theme--colors--danger-650: #AA0000; + --c--theme--colors--danger-700: #8C1912; + --c--theme--colors--danger-750: #721F17; + --c--theme--colors--danger-800: #591F18; + --c--theme--colors--danger-850: #431C17; + --c--theme--colors--danger-900: #2F1613; + --c--theme--colors--danger-950: #1C0F0D; +} diff --git a/apps/demo/src/cunningham-tokens.ts b/apps/demo/src/cunningham-tokens.ts index 8b9ad5f..a72a6bb 100644 --- a/apps/demo/src/cunningham-tokens.ts +++ b/apps/demo/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}},"components":{"card":{"border-width":"none","box-shadow":"rgba(0, 8, 16, 0.3) 0px 16px 24px"}}},"redflux_dark":{"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#FA8D92","primary-200":"#F95B63","primary-300":"#F72A35","primary-400":"#E50914","primary-500":"#C30811","primary-600":"#A0060E","primary-700":"#7E050B","primary-800":"#5C0408","primary-900":"#390205","secondary-text":"#FFF","secondary-100":"#1b5ad7","secondary-200":"#146cea","secondary-300":"#007ffe","secondary-400":"#008eff","secondary-500":"#279eff","secondary-600":"#56b0ff","secondary-700":"#8ac6ff","secondary-800":"#b9dcff","secondary-900":"#e2f1ff","greyscale-000":"#000000BB","greyscale-100":"#191919BB","greyscale-200":"#232323","greyscale-300":"#292929","greyscale-400":"#343434","greyscale-500":"#404040","greyscale-600":"#aaaaaa","greyscale-700":"#cccccc","greyscale-800":"#eeeeee","greyscale-900":"#f7f7f7","danger-900":"#FACED0","danger-800":"#F7A9AD","danger-700":"#F38389","danger-600":"#F05E66","danger-500":"#EC3942","danger-400":"#D8151F","danger-300":"#A51017","danger-200":"#720B10","danger-100":"#3F0609","info-900":"#53A4FD","info-800":"#2B8FFC","info-700":"#047AFA","info-600":"#0366D2","info-500":"#0255AF","info-400":"#02448C","info-300":"#013368","info-200":"#012245","info-100":"#001122","success-900":"#A9F7C0","success-800":"#8DF4AC","success-700":"#71F198","success-600":"#55EF83","success-500":"#39EC6F","success-400":"#14CF4C","success-300":"#0E9236","success-200":"#085620","success-100":"#021909","warning-900":"#EAC88B","warning-800":"#E4BA6D","warning-700":"#DFAB4F","warning-600":"#D99D31","warning-500":"#B68121","warning-400":"#8A621A","warning-300":"#5F4412","warning-200":"#34250A","warning-100":"#090702"},"font":{"families":{"base":"Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif","accent":"Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif"}}},"components":{"button":{"border-radius":"0.1875rem"},"forms-input":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","label-color--focus":"#555F6B"},"forms-select":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B","menu-background-color":"#191919","item-background-color--selected":"#0556BF"},"forms-datepicker":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B","menu-background-color":"#191919","grid-cell--border-color--today":"#303C4B","grid-cell--color--today":"#303C4B","range-selection-background-color":"#022858","item-background-color--selected":"#0556BF"},"forms-fileuploader":{"border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","background-color--active":"#9EA3AA","accent-color":"#303C4B"},"forms-textarea":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B"},"forms-checkbox":{"border-radius":"0.1875rem","accent-color":"#FAFAFB","background-color":"#303C4B"},"forms-switch":{"handle-border-radius":"0.3rem","rail-border-radius":"0.500rem","accent-color":"#303C4B","handle-background-color":"#FAFAFB","rail-background-color":"#C2C6CA"},"forms-radio":{"accent-color":"#FAFAFB","background-color":"#303C4B"},"modal":{"border-radius":"0.1875rem","background-color":"#191919","backdrop-color":"#FFFFFF"},"card":{"border-radius":"0.1875rem","border-width":"none","box-shadow":"rgba(255, 220, 220, 0.05) 0px 0px 60px 10px"}}},"blueney_dark":{"theme":{"colors":{"primary-text":"#FFFFFF","primary-900":"#53B0FF","primary-800":"#39A4FF","primary-700":"#2099FF","primary-600":"#068DFF","primary-500":"#0080EB","primary-400":"#0072D2","primary-300":"#00549A","primary-200":"#003562","primary-100":"#00172A","greyscale-900":"#FAFAFC","greyscale-800":"#DBDDE7","greyscale-700":"#BCC0D3","greyscale-600":"#9EA2BF","greyscale-500":"#7F85AB","greyscale-400":"#626995","greyscale-300":"#4E5376","greyscale-200":"#393E57","greyscale-100":"#1B1D29","greyscale-000":"#151823"},"font":{"families":{"base":"Avenir, sans-serif","accent":"Avenir, sans-serif"}}},"components":{"card":{"border-radius":"0.25rem","border-width":"none","box-shadow":"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px"},"button":{"border-radius":"0.25rem"},"forms-input":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","label-color":"#555F6B"},"forms-select":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","menu-background-color":"#F3F4F4","item-background-color--hover":"#E7E8EA","item-background-color--selected":"#377FDB"},"forms-datepicker":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","menu-background-color":"#F3F4F4","grid-cell--border-color--today":"#9EA3AA","grid-cell--color--today":"#555F6B","grid-cell--color--selected":"#0556BF","range-selection-background-color":"#EBF2FC","item-background-color--hover":"#E7E8EA","item-background-color--selected":"#377FDB"},"forms-fileuploader":{"background-color":"#F3F4F4","background-color--active":"#E7E8EA","border-color":"transparent"},"forms-textarea":{"border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","border-radius":"0.25rem","background-color":"#F3F4F4","label-color--focus":"#555F6B"},"forms-checkbox":{"border-radius":"0.25rem","border-color":"#E7E8EA","accent-color":"#0C1A2B","background-color":"#F3F4F4"},"forms-switch":{"rail-background-color":"#F3F4F4","accent-color":"#377FDB"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#0C1A2B","background-color":"#F3F4F4"},"modal":{"border-radius":"0.25rem","background-color":"#FAFAFB","backdrop-color":"#00172AAB","border-color":"transparent","box-shadow":"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px"}}}}}; +export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}},"components":{"card":{"border-width":"none","box-shadow":"rgba(0, 8, 16, 0.3) 0px 16px 24px"}}},"redflux_dark":{"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#FA8D92","primary-200":"#F95B63","primary-300":"#F72A35","primary-400":"#E50914","primary-500":"#C30811","primary-600":"#A0060E","primary-700":"#7E050B","primary-800":"#5C0408","primary-900":"#390205","secondary-text":"#FFF","secondary-100":"#1b5ad7","secondary-200":"#146cea","secondary-300":"#007ffe","secondary-400":"#008eff","secondary-500":"#279eff","secondary-600":"#56b0ff","secondary-700":"#8ac6ff","secondary-800":"#b9dcff","secondary-900":"#e2f1ff","greyscale-000":"#000000BB","greyscale-100":"#191919BB","greyscale-200":"#232323","greyscale-300":"#292929","greyscale-400":"#343434","greyscale-500":"#404040","greyscale-600":"#aaaaaa","greyscale-700":"#cccccc","greyscale-800":"#eeeeee","greyscale-900":"#f7f7f7","danger-900":"#FACED0","danger-800":"#F7A9AD","danger-700":"#F38389","danger-600":"#F05E66","danger-500":"#EC3942","danger-400":"#D8151F","danger-300":"#A51017","danger-200":"#720B10","danger-100":"#3F0609","info-900":"#53A4FD","info-800":"#2B8FFC","info-700":"#047AFA","info-600":"#0366D2","info-500":"#0255AF","info-400":"#02448C","info-300":"#013368","info-200":"#012245","info-100":"#001122","success-900":"#A9F7C0","success-800":"#8DF4AC","success-700":"#71F198","success-600":"#55EF83","success-500":"#39EC6F","success-400":"#14CF4C","success-300":"#0E9236","success-200":"#085620","success-100":"#021909","warning-900":"#EAC88B","warning-800":"#E4BA6D","warning-700":"#DFAB4F","warning-600":"#D99D31","warning-500":"#B68121","warning-400":"#8A621A","warning-300":"#5F4412","warning-200":"#34250A","warning-100":"#090702"},"font":{"families":{"base":"Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif","accent":"Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif"}}},"components":{"button":{"border-radius":"0.1875rem"},"forms-input":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","label-color--focus":"#555F6B"},"forms-select":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B","menu-background-color":"#191919","item-background-color--selected":"#0556BF"},"forms-datepicker":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B","menu-background-color":"#191919","grid-cell--border-color--today":"#303C4B","grid-cell--color--today":"#303C4B","range-selection-background-color":"#022858","item-background-color--selected":"#0556BF"},"forms-fileuploader":{"border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","background-color--active":"#9EA3AA","accent-color":"#303C4B"},"forms-textarea":{"border-radius":"0.1875rem","border-color":"#9EA3AA","border-color--hover":"#79818A","background-color":"#FAFAFB","border-color--focus":"#555F6B","label-color--focus":"#555F6B"},"forms-checkbox":{"border-radius":"0.1875rem","accent-color":"#FAFAFB","background-color":"#303C4B"},"forms-switch":{"handle-border-radius":"0.3rem","rail-border-radius":"0.500rem","accent-color":"#303C4B","handle-background-color":"#FAFAFB","rail-background-color":"#C2C6CA"},"forms-radio":{"accent-color":"#FAFAFB","background-color":"#303C4B"},"modal":{"border-radius":"0.1875rem","background-color":"#191919","backdrop-color":"#FFFFFF"},"card":{"border-radius":"0.1875rem","border-width":"none","box-shadow":"rgba(255, 220, 220, 0.05) 0px 0px 60px 10px"}}},"blueney_dark":{"theme":{"colors":{"primary-text":"#FFFFFF","primary-900":"#53B0FF","primary-800":"#39A4FF","primary-700":"#2099FF","primary-600":"#068DFF","primary-500":"#0080EB","primary-400":"#0072D2","primary-300":"#00549A","primary-200":"#003562","primary-100":"#00172A","greyscale-900":"#FAFAFC","greyscale-800":"#DBDDE7","greyscale-700":"#BCC0D3","greyscale-600":"#9EA2BF","greyscale-500":"#7F85AB","greyscale-400":"#626995","greyscale-300":"#4E5376","greyscale-200":"#393E57","greyscale-100":"#1B1D29","greyscale-000":"#151823"},"font":{"families":{"base":"Avenir, sans-serif","accent":"Avenir, sans-serif"}}},"components":{"card":{"border-radius":"0.25rem","border-width":"none","box-shadow":"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px"},"button":{"border-radius":"0.25rem"},"forms-input":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","label-color":"#555F6B"},"forms-select":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","menu-background-color":"#F3F4F4","item-background-color--hover":"#E7E8EA","item-background-color--selected":"#377FDB"},"forms-datepicker":{"border-radius":"0.25rem","border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","background-color":"#F3F4F4","label-color--focus":"#555F6B","menu-background-color":"#F3F4F4","grid-cell--border-color--today":"#9EA3AA","grid-cell--color--today":"#555F6B","grid-cell--color--selected":"#0556BF","range-selection-background-color":"#EBF2FC","item-background-color--hover":"#E7E8EA","item-background-color--selected":"#377FDB"},"forms-fileuploader":{"background-color":"#F3F4F4","background-color--active":"#E7E8EA","border-color":"transparent"},"forms-textarea":{"border-color":"transparent","border-color--hover":"transparent","border-color--focus":"#555F6B","border-radius":"0.25rem","background-color":"#F3F4F4","label-color--focus":"#555F6B"},"forms-checkbox":{"border-radius":"0.25rem","border-color":"#E7E8EA","accent-color":"#0C1A2B","background-color":"#F3F4F4"},"forms-switch":{"rail-background-color":"#F3F4F4","accent-color":"#377FDB"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#0C1A2B","background-color":"#F3F4F4"},"modal":{"border-radius":"0.25rem","background-color":"#FAFAFB","backdrop-color":"#00172AAB","border-color":"transparent","box-shadow":"rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px"}}},"uikit_light":{"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-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"}}}}}; diff --git a/apps/demo/src/index.scss b/apps/demo/src/index.scss index 3d17ac1..ec32fb9 100644 --- a/apps/demo/src/index.scss +++ b/apps/demo/src/index.scss @@ -74,7 +74,7 @@ html { min-height: 100%; display: flex; flex-direction: column; - + @media (max-width: 1200px) { width: calc(100% - 2rem); } @@ -105,6 +105,7 @@ html { } } +html[data-theme="uikit"][data-variant="light"] body, html[data-theme="cunningham"] body { background-repeat: no-repeat; background-position: -300px -300px; @@ -115,10 +116,16 @@ html[data-theme="cunningham"][data-variant="dark"] body { background-image: url(/pattern_dark.png); } +html[data-theme="uikit"][data-variant="light"] body, html[data-theme="cunningham"][data-variant="light"] body { background-image: url(/pattern_default.png); } +html[data-theme="uikit"] { + background: linear-gradient(153deg, var(--c--theme--colors--greyscale-025) 0%, var(--c--theme--colors--greyscale-000) 100%); + background-blend-mode: darken; +} + html[data-theme="redflux"] { background: #000000D7 url(/redflux_bg.webp) 50%/cover no-repeat fixed; background-blend-mode: darken;