studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) add UIKit theme support

Browse Source 
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
2025-08-22 10:17:00 +02:00
committed by NathanVss
parent 186f0b86b7
commit 9cc9214e9a
8 changed files with 885 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/demo/src/App.tsx
View File

@@ -13,6 +13,7 @@ enum Theme {
CUNNINGHAM = "cunningham",
REDFLUX = "redflux",
BLUENEY = "blueney",
UIKIT = "uikit"
}
enum Variant {
@@ -33,6 +34,10 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
light: undefined,
dark: "blueney_dark",
},
[Theme.UIKIT]: {
light: "uikit_light",
dark: "uikit_dark",
},
};
export type PageProps = ReturnType<typeof useModal>;

2
apps/demo/src/Create.tsx
View File

@@ -53,7 +53,7 @@ export const Create = (props: PageProps) => {
title="Add character"
closeOnClickOutside
>
<form className="page__create clr-greyscale-900" onSubmit={submit}>
<form className="page__create clr-gray-900" onSubmit={submit}>
<div className="page__create__group">
<h3 className="fw-bold fs-h3">General Information</h3>
<Alert type={VariantType.INFO}>

16
apps/demo/src/Home.tsx
View File

@@ -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 (
<main className="page__home">
<header className="page__home__title">
<h1 className="clr-greyscale-900">
<h1 className="clr-gray-900">
{/* eslint-disable-next-line react/no-unescaped-entities */}
🍿Cunningham's <span className="clr-primary-400">Cast</span>
🍿Cunningham's <span className="clr-brand-400">Cast</span>
</h1>
<p className="clr-greyscale-600 fs-m fw-regular">
<p className="clr-gray-600 fs-m fw-regular">
Happy Days is an American television sitcom that aired first-run from
January 15, 1974, to September 24, 1984, on ABC-TV
<br /> 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={<span className="material-icons">delete</span>}

288
apps/demo/src/cunningham-tokens-sass.scss
View File

@@ -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;

280
apps/demo/src/cunningham-tokens.css
View File

@@ -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;
}

2
apps/demo/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long

9
apps/demo/src/index.scss
View File

@@ -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;