🎨(react) add UIKit theme support

Introduce new UIKit theme with light and dark variants, including
comprehensive color tokens for both themes. Update relevant components
and styles to accommodate the new theme architecture.

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",
+        },
+      },
+    },
   },
 };
 

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<Theme, Record<Variant, string | undefined>> = {
     light: undefined,
     dark: "blueney_dark",
   },
+  [Theme.UIKIT]: {
+    light: "uikit_light",
+    dark: "uikit_dark",
+  },
 };
 
 export type PageProps = ReturnType<typeof useModal>;

apps/demo/src/Create.tsx

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

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

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;

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

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;