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

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