From b2c277e8de7ca994646431a7c1dd8a838abf1551 Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Tue, 24 Mar 2026 20:43:18 +0000
Subject: [PATCH] decrease code duplication in UIKit's tokens.ts to reduce
 bundle size

---
 .../uk.tcsw.dashboard/backend/index.ts        |   43 +-
 .../web/pages/root/index.module.scss          |    6 +
 .../web/pages/root/index.tsx                  |  105 +-
 .../BooleanSetting/BooleanSetting.tsx         |   54 +-
 .../StringListSetting/StringListSetting.tsx   |    2 +-
 .../StringSetting/StringSetting.tsx           |    2 +-
 biome.json                                    |    2 +-
 instance/src/web/src/pages/app/App.tsx        |    8 +-
 .../components/dialog/UKDialog.module.scss    |   16 +
 .../src/components/dialog/UKDialog.tsx        |    4 +
 uikit-solid/src/core/design/tokens.ts         | 1784 ++++++-----------
 11 files changed, 844 insertions(+), 1182 deletions(-)

diff --git a/applications/uk.tcsw.dashboard/backend/index.ts b/applications/uk.tcsw.dashboard/backend/index.ts
index 5daf5f7..b899510 100644
--- a/applications/uk.tcsw.dashboard/backend/index.ts
+++ b/applications/uk.tcsw.dashboard/backend/index.ts
@@ -3,6 +3,7 @@
 import { WorkspacesEvent } from "@tcsw/workspaces-instance/src/systems/events.js";
 import { BooleanApplicationSetting } from "@tcsw/workspaces-instance/src/systems/settings/applicationSetting/booleanSetting.js";
 import { StringListApplicationSetting } from "@tcsw/workspaces-instance/src/systems/settings/applicationSetting/stringListSetting.js";
+import { StringApplicationSetting } from "@tcsw/workspaces-instance/src/systems/settings/applicationSetting/stringSetting.js";
 import { createTRPCContext, procedure } from "@tcsw/workspaces-instance/src/systems/trpcRouter.js";
 import { initTRPC } from "@trpc/server";
 import fs from "fs/promises";
@@ -54,7 +55,7 @@ const router = t.router({
         "widgets",
       );
     }),
-    welcomeMessage: procedure
+    getWelcomeMessage: procedure
       .input(z.number())
       .output(z.string().or(z.undefined()))
       .query(async (opt) => {
@@ -122,27 +123,41 @@ const router = t.router({
 
         return undefined;
       }),
-    contentBackground: procedure.output(z.boolean()).query(async (opt) => {
+    getShowContentBackground: procedure.output(z.boolean()).query(async (opt) => {
       return await opt.ctx.instance.sys.settings.getUserApplicationSetting<BooleanApplicationSetting>(
         opt.ctx.userId,
         "uk.tcsw.dashboard",
         "content_background",
       );
     }),
-    showEditButton: procedure.output(z.boolean()).query(async (opt) => {
+    getShowEditButton: procedure.output(z.boolean()).query(async (opt) => {
       return await opt.ctx.instance.sys.settings.getUserApplicationSetting<BooleanApplicationSetting>(
         opt.ctx.userId,
         "uk.tcsw.dashboard",
         "show_edit_button",
       );
     }),
-    showSearchBar: procedure.output(z.boolean()).query(async (opt) => {
+    getShowSearchBar: procedure.output(z.boolean()).query(async (opt) => {
       return await opt.ctx.instance.sys.settings.getUserApplicationSetting<BooleanApplicationSetting>(
         opt.ctx.userId,
         "uk.tcsw.dashboard",
         "show_search_bar",
       );
     }),
+    getSearchBarSearchEngine: procedure.output(z.string()).query(async (opt) => {
+      return await opt.ctx.instance.sys.settings.getUserApplicationSetting<StringApplicationSetting>(
+        opt.ctx.userId,
+        "uk.tcsw.dashboard",
+        "search_bar_search_engine",
+      );
+    }),
+    getOpenSearchInNewTab: procedure.output(z.boolean()).query(async (opt) => {
+      return await opt.ctx.instance.sys.settings.getUserApplicationSetting<BooleanApplicationSetting>(
+        opt.ctx.userId,
+        "uk.tcsw.dashboard",
+        "open_search_in_new_tab",
+      );
+    }),
     getWallpaperOptions: procedure
       .output(
         z.object({
@@ -263,9 +278,27 @@ instance.sys.event.on(WorkspacesEvent.BeforeStartupComplete, () => {
   );
   instance.sys.settings.registerApplicationSetting(
     new BooleanApplicationSetting("uk.tcsw.dashboard", "show_search_bar", false)
-      .setDisplayName("Show Search Bar on Dashboard")
+      .setDisplayName("Show a search bar on the Dashboard")
       .setDescription(
         "Should a search bar be displayed on the dashboard to allow for quick web searches.",
       ),
   );
+  instance.sys.settings.registerApplicationSetting(
+    new BooleanApplicationSetting("uk.tcsw.dashboard", "open_search_in_new_tab", false)
+      .setDisplayName("Open search results in a new tab")
+      .setDescription(
+        "When using the dashboard search bar, should the search results be opened in a new tab or in the current tab?",
+      ),
+  );
+  instance.sys.settings.registerApplicationSetting(
+    new StringApplicationSetting(
+      "uk.tcsw.dashboard",
+      "search_bar_search_engine",
+      "https://duckduckgo.com/?q=%s",
+    )
+      .setDisplayName("Search engine for the dashboard search bar")
+      .setDescription(
+        "The search engine URL template for the dashboard search bar. Use %s as a placeholder for the search query. For example, https://duckduckgo.com/?q=%s",
+      ),
+  );
 });
diff --git a/applications/uk.tcsw.dashboard/web/pages/root/index.module.scss b/applications/uk.tcsw.dashboard/web/pages/root/index.module.scss
index 564a9a9..324af71 100644
--- a/applications/uk.tcsw.dashboard/web/pages/root/index.module.scss
+++ b/applications/uk.tcsw.dashboard/web/pages/root/index.module.scss
@@ -144,3 +144,9 @@
   height: 100% !important;
   aspect-ratio: 1;
 }
+
+.editButtonContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
diff --git a/applications/uk.tcsw.dashboard/web/pages/root/index.tsx b/applications/uk.tcsw.dashboard/web/pages/root/index.tsx
index 9873452..fb5d258 100644
--- a/applications/uk.tcsw.dashboard/web/pages/root/index.tsx
+++ b/applications/uk.tcsw.dashboard/web/pages/root/index.tsx
@@ -1,12 +1,21 @@
 import EDIT_ICON from "@material-symbols/svg-700/outlined/edit.svg";
 import SEARCH_ICON from "@material-symbols/svg-700/outlined/search.svg";
-import { useNavigate } from "@solidjs/router";
+import SETTINGS_ICON from "@material-symbols/svg-700/outlined/settings.svg";
+import { useNavigate, useSearchParams } from "@solidjs/router";
 import UKButton from "@tcsw/uikit-solid/src/components/button/UKButton.jsx";
+import UKDialog from "@tcsw/uikit-solid/src/components/dialog/UKDialog.jsx";
 import UKIconButton from "@tcsw/uikit-solid/src/components/iconButton/UKIconButton.jsx";
 import UKIndeterminateSpinner from "@tcsw/uikit-solid/src/components/indeterminateSpinner/UKIndeterminateSpinner.jsx";
 import UKText from "@tcsw/uikit-solid/src/components/text/UKText.jsx";
 import clsx from "clsx";
-import { type Component, createResource, createSignal, For, Suspense } from "solid-js";
+import {
+  type Component,
+  createEffect,
+  createResource,
+  createSignal,
+  For,
+  Suspense,
+} from "solid-js";
 import PLACEHOLDER_WALLPAPER from "./../../assets/placeholder_wallpaper.png";
 import trpc from "../../lib/trpc";
 import Widgets from "../../widgets/widgets";
@@ -22,11 +31,27 @@ const RootPage: Component = () => {
   );
   const [widgets] = createResource(() => trpc.dashboard.getWidgets.query());
   const [wallpaperOptions] = createResource(() => trpc.dashboard.getWallpaperOptions.query());
-  const [welcomeMessage] = createResource(() => trpc.dashboard.welcomeMessage.query(Date.now()));
-  const [contentBackground] = createResource(() => trpc.dashboard.contentBackground.query());
-  const [showEditButton] = createResource(() => trpc.dashboard.showEditButton.query());
-  const [showSearchBar] = createResource(() => trpc.dashboard.showSearchBar.query());
+  const [welcomeMessage] = createResource(() => trpc.dashboard.getWelcomeMessage.query(Date.now()));
+  const [contentBackground] = createResource(() => trpc.dashboard.getShowContentBackground.query());
+  const [showEditButton] = createResource(() => trpc.dashboard.getShowEditButton.query());
+  const [showSearchBar] = createResource(() => trpc.dashboard.getShowSearchBar.query());
+  const [searchBarOpenInNewTab] = createResource(() =>
+    trpc.dashboard.getOpenSearchInNewTab.query(),
+  );
+  const [searchBarSearchEngine] = createResource(() =>
+    trpc.dashboard.getSearchBarSearchEngine.query(),
+  );
   const [searchQuery, setSearchQuery] = createSignal("");
+  const [showEditWidgets, setShowEditWidgets] = createSignal(false);
+  const [searchParams] = useSearchParams();
+
+  createEffect(() => {
+    if (searchParams.editWidgets === "true") {
+      setShowEditWidgets(true);
+    } else {
+      setShowEditWidgets(false);
+    }
+  });
 
   return (
     <div class={styles.root} data-show-background={contentBackground()}>
@@ -56,20 +81,47 @@ const RootPage: Component = () => {
             type="text"
             class={styles.searchBarInput}
             placeholder="Search..."
-            onKeyDown={(e) => {
+            value={searchQuery()}
+            onChange={(e) => {
+              setSearchQuery(e.currentTarget.value);
+            }}
+            onKeyUp={(e) => {
               setSearchQuery(e.currentTarget.value);
               if (e.key === "Enter") {
-                window.location.href = `https://duckduckgo.com/?q=${encodeURIComponent(searchQuery())}`;
+                const url = searchBarSearchEngine()!.replace(
+                  "%s",
+                  encodeURIComponent(searchQuery()),
+                )!;
+
+                if (searchBarOpenInNewTab()) {
+                  window.open(url, "_blank");
+                } else {
+                  window.location.href = url;
+                }
+
+                setSearchQuery("");
               }
             }}
           />
           <UKIconButton
             class={styles.searchBarSearch}
             icon={SEARCH_ICON}
+            disabled={searchQuery().length === 0}
             shape="square"
             color={"filled"}
             onClick={() => {
-              window.location.href = `https://duckduckgo.com/?q=${encodeURIComponent(searchQuery())}`;
+              const url = searchBarSearchEngine()!.replace(
+                "%s",
+                encodeURIComponent(searchQuery()),
+              )!;
+
+              if (searchBarOpenInNewTab()) {
+                window.open(url, "_blank");
+              } else {
+                window.location.href = url;
+              }
+
+              setSearchQuery("");
             }}
             alt="search"
           />
@@ -93,17 +145,30 @@ const RootPage: Component = () => {
         </For>
       </div>
       {showEditButton() && (
-        <UKButton
-          leadingIcon={EDIT_ICON}
-          onClick={() => {
-            navigate(
-              "/app/uk.tcsw.settings/applications/uk.tcsw.dashboard?origin=/app/uk.tcsw.dashboard",
-            );
-          }}
-          color={"tonal"}
-        >
-          Edit widgets
-        </UKButton>
+        <div class={styles.editButtonContainer}>
+          <UKButton
+            leadingIcon={EDIT_ICON}
+            onClick={() => {
+              setShowEditWidgets(true);
+              // navigate(
+              //   "/app/uk.tcsw.settings/applications/uk.tcsw.dashboard?origin=/app/uk.tcsw.dashboard",
+              // );
+            }}
+            color={"tonal"}
+          >
+            Edit widgets
+          </UKButton>
+          <UKIconButton
+            alt="open settings"
+            icon={SETTINGS_ICON}
+            onClick={() => {
+              navigate(
+                "/app/uk.tcsw.settings/applications/uk.tcsw.dashboard?origin=/app/uk.tcsw.dashboard",
+              );
+            }}
+            color={"tonal"}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/BooleanSetting/BooleanSetting.tsx b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/BooleanSetting/BooleanSetting.tsx
index 26015f9..5fc829a 100644
--- a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/BooleanSetting/BooleanSetting.tsx
+++ b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/BooleanSetting/BooleanSetting.tsx
@@ -1,41 +1,41 @@
+import { useParams } from "@solidjs/router";
 import UKStackItem from "@tcsw/uikit-solid/src/components/stack/UKStackItem.jsx";
 import UKSwitch from "@tcsw/uikit-solid/src/components/switch/UKSwitch.jsx";
-import { createEffect, createSignal, type Component } from "solid-js";
+import { type Component, createEffect, createSignal } from "solid-js";
 import trpc from "../../../../../lib/trpc.ts";
-import { useParams } from "@solidjs/router";
 import styles from "./BooleanSetting.module.scss";
 
 const BooleanSetting: Component<{
-    displayName: string;
-    id: string;
-    defaultValue: boolean;
-    currentValue: boolean;
-    description: string;
+  displayName: string;
+  id: string;
+  defaultValue: boolean;
+  currentValue: boolean;
+  description: string;
 }> = (props) => {
-    const params = useParams();
-    const [value, setValue] = createSignal(props.currentValue ?? props.defaultValue);
+  const params = useParams();
+  const [value, setValue] = createSignal(props.currentValue ?? props.defaultValue);
 
-    createEffect(async () => {
-        if (!params.applicationId) return;
+  createEffect(async () => {
+    if (!params.applicationId) return;
 
-        await trpc.application.setApplicationBooleanSettingValue.mutate({
-            applicationId: params.applicationId as string,
-            id: props.id,
-            value: value(),
-        });
+    await trpc.application.setApplicationBooleanSettingValue.mutate({
+      applicationId: params.applicationId as string,
+      id: props.id,
+      value: value(),
     });
+  });
 
-    return (
-        <UKStackItem
-            labelText={`${props.displayName} (${props.id})`}
-            supportingText={props.description}
-            inlineComponent={
-                <>
-                    <UKSwitch class={styles.switch} getValue={setValue} value={value()} />
-                </>
-            }
-        />
-    );
+  return (
+    <UKStackItem
+      labelText={`${props.displayName}`}
+      supportingText={props.description}
+      inlineComponent={
+        <>
+          <UKSwitch class={styles.switch} getValue={setValue} value={value()} />
+        </>
+      }
+    />
+  );
 };
 
 export default BooleanSetting;
diff --git a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringListSetting/StringListSetting.tsx b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringListSetting/StringListSetting.tsx
index 7bae296..d37200b 100644
--- a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringListSetting/StringListSetting.tsx
+++ b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringListSetting/StringListSetting.tsx
@@ -33,7 +33,7 @@ const StringListSetting: Component<{
 
   return (
     <UKStackItem
-      labelText={`${props.displayName} (${props.id})`}
+      labelText={`${props.displayName}`}
       supportingText={props.description}
       leading={
         items() !== props.defaultValue
diff --git a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringSetting/StringSetting.tsx b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringSetting/StringSetting.tsx
index a2fb812..492d67b 100644
--- a/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringSetting/StringSetting.tsx
+++ b/applications/uk.tcsw.settings/web/pages/applications/applicationId/components/StringSetting/StringSetting.tsx
@@ -28,7 +28,7 @@ const StringSetting: Component<{
 
   return (
     <UKStackItem
-      labelText={`${props.displayName} (${props.id})`}
+      labelText={`${props.displayName}`}
       supportingText={props.description}
       leading={
         value() !== props.defaultValue
diff --git a/biome.json b/biome.json
index 5b24a39..b713628 100644
--- a/biome.json
+++ b/biome.json
@@ -22,6 +22,6 @@
     "indentStyle": "space",
     "indentWidth": 2,
     "lineEnding": "lf",
-    "lineWidth": 100
+    "lineWidth": 160
   }
 }
diff --git a/instance/src/web/src/pages/app/App.tsx b/instance/src/web/src/pages/app/App.tsx
index 948312b..5feb073 100644
--- a/instance/src/web/src/pages/app/App.tsx
+++ b/instance/src/web/src/pages/app/App.tsx
@@ -2,12 +2,12 @@ import { useNavigate } from "@solidjs/router";
 import type { Component } from "solid-js";
 
 const AppIndex: Component = () => {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    // this should be a trpc request to allow the user to change it
-    navigate("/app/uk.tcsw.dashboard");
+  // this should be a trpc request to allow the user to change it
+  navigate("/app/uk.tcsw.dashboard");
 
-    return <></>;
+  return null;
 };
 
 export default AppIndex;
diff --git a/uikit-solid/src/components/dialog/UKDialog.module.scss b/uikit-solid/src/components/dialog/UKDialog.module.scss
index 7570fb8..df569a8 100644
--- a/uikit-solid/src/components/dialog/UKDialog.module.scss
+++ b/uikit-solid/src/components/dialog/UKDialog.module.scss
@@ -44,6 +44,22 @@
       }
     }
   }
+
+  &[data-bottom-attach="true"] > .card {
+    position: absolute;
+    bottom: 0;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  &[data-no-darken="true"] {
+    pointer-events: none;
+    background-color: transparent !important;
+
+    > .card {
+      pointer-events: auto;
+    }
+  }
 }
 
 @keyframes fadeBackground {
diff --git a/uikit-solid/src/components/dialog/UKDialog.tsx b/uikit-solid/src/components/dialog/UKDialog.tsx
index d3f2fc0..2b6be37 100644
--- a/uikit-solid/src/components/dialog/UKDialog.tsx
+++ b/uikit-solid/src/components/dialog/UKDialog.tsx
@@ -13,6 +13,8 @@ const UKDialog: Component<
     maxWidth?: string;
     adaptToMobile?: boolean;
     dialogColor?: CardColor;
+    bottomAttach?: boolean;
+    noDarken?: boolean;
   }>
 > = (props) => {
   const rootContext = useContext(RootContext);
@@ -25,7 +27,9 @@ const UKDialog: Component<
           {/** biome-ignore lint/a11y/noStaticElementInteractions: clickable background */}
           <div
             class={styles.component}
+            data-no-darken={props.noDarken}
             data-mobile={isMobile() && props.adaptToMobile}
+            data-bottom-attach={props.bottomAttach}
             style={{ "--dialog-max-width": props.maxWidth }}
             onMouseDown={(e) => {
               e.stopPropagation();
diff --git a/uikit-solid/src/core/design/tokens.ts b/uikit-solid/src/core/design/tokens.ts
index 67551d9..8b26066 100644
--- a/uikit-solid/src/core/design/tokens.ts
+++ b/uikit-solid/src/core/design/tokens.ts
@@ -1,6 +1,6 @@
 import dpToRem from "../dp.ts";
-import {baselineTheme} from "./themes/baseline.ts";
-import type {UKDesignTheme} from "./theme.ts";
+import type { UKDesignTheme } from "./theme.ts";
+import { baselineTheme } from "./themes/baseline.ts";
 
 export interface UKDesignTokens {
   raw: {
@@ -464,13 +464,13 @@ export interface UKDesignTokens {
         level0(): number;
       };
       state: {
-        dragged: {"state-layer-opacity"(): number};
-        pressed: {"state-layer-opacity"(): number};
-        focus: {"state-layer-opacity"(): number};
-        hover: {"state-layer-opacity"(): number};
+        dragged: { "state-layer-opacity"(): number };
+        pressed: { "state-layer-opacity"(): number };
+        focus: { "state-layer-opacity"(): number };
+        hover: { "state-layer-opacity"(): number };
         "focus-indicator": {
           "outer-offset"(): string;
-          "thickness"(): string;
+          thickness(): string;
         };
       };
       shape: {
@@ -1077,10 +1077,10 @@ export interface UKDesignTokens {
       level0: string;
     };
     state: {
-      dragged: {"state-layer-opacity": string};
-      pressed: {"state-layer-opacity": string};
-      focus: {"state-layer-opacity": string};
-      hover: {"state-layer-opacity": string};
+      dragged: { "state-layer-opacity": string };
+      pressed: { "state-layer-opacity": string };
+      focus: { "state-layer-opacity": string };
+      hover: { "state-layer-opacity": string };
       "focus-indicator": {
         "outer-offset": string;
         thickness: string;
@@ -1198,7 +1198,7 @@ export interface UKDesignTokens {
   };
 }
 
-let tokens: UKDesignTokens = {
+const tokens: UKDesignTokens = {
   raw: {
     ref: baselineTheme.ref,
     sys: {
@@ -1211,7 +1211,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(16),
           tracking: () => dpToRem(0.5),
           size: () => dpToRem(11),
-          weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+          weight: () => tokens.raw.ref.typeface["weight-medium"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "label-medium": {
@@ -1222,7 +1222,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(16),
           tracking: () => dpToRem(0.5),
           size: () => dpToRem(12),
-          weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+          weight: () => tokens.raw.ref.typeface["weight-medium"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "label-large": {
@@ -1233,7 +1233,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(20),
           tracking: () => dpToRem(0.10000000149011612),
           size: () => dpToRem(14),
-          weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+          weight: () => tokens.raw.ref.typeface["weight-medium"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "body-small": {
@@ -1244,7 +1244,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(16),
           tracking: () => dpToRem(0.4000000059604645),
           size: () => dpToRem(12),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "body-medium": {
@@ -1255,7 +1255,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(20),
           tracking: () => dpToRem(0.25),
           size: () => dpToRem(14),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "body-large": {
@@ -1266,7 +1266,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(24),
           tracking: () => dpToRem(0.5),
           size: () => dpToRem(16),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "title-small": {
@@ -1277,7 +1277,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(20),
           tracking: () => dpToRem(0.10000000149011612),
           size: () => dpToRem(14),
-          weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+          weight: () => tokens.raw.ref.typeface["weight-medium"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "title-medium": {
@@ -1288,7 +1288,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(24),
           tracking: () => dpToRem(0.15000000596046448),
           size: () => dpToRem(16),
-          weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+          weight: () => tokens.raw.ref.typeface["weight-medium"](),
           font: () => tokens.raw.ref.typeface.plain(),
         },
         "title-large": {
@@ -1299,7 +1299,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(28),
           tracking: () => dpToRem(0),
           size: () => dpToRem(22),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         "headline-small": {
@@ -1310,7 +1310,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(32),
           tracking: () => dpToRem(0),
           size: () => dpToRem(24),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         "headline-medium": {
@@ -1321,7 +1321,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(36),
           tracking: () => dpToRem(0),
           size: () => dpToRem(28),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         "headline-large": {
@@ -1333,7 +1333,7 @@ let tokens: UKDesignTokens = {
           tracking: () => dpToRem(0),
           size: () => dpToRem(32),
           font: () => tokens.raw.ref.typeface.brand(),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
         },
         "display-small": {
           "text-transform": () => "unset",
@@ -1343,7 +1343,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(44),
           tracking: () => dpToRem(0),
           size: () => dpToRem(36),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         "display-medium": {
@@ -1354,7 +1354,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(52),
           tracking: () => dpToRem(0),
           size: () => dpToRem(45),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         "display-large": {
@@ -1365,7 +1365,7 @@ let tokens: UKDesignTokens = {
           "line-height": () => dpToRem(64),
           tracking: () => dpToRem(-0.25),
           size: () => dpToRem(57),
-          weight: () => tokens.raw.ref.typeface[ "weight-regular" ](),
+          weight: () => tokens.raw.ref.typeface["weight-regular"](),
           font: () => tokens.raw.ref.typeface.brand(),
         },
         emphasized: {
@@ -1377,7 +1377,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(16),
             tracking: () => dpToRem(0.5),
             size: () => dpToRem(11),
-            weight: () => tokens.raw.ref.typeface[ "weight-bold" ](),
+            weight: () => tokens.raw.ref.typeface["weight-bold"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "label-medium": {
@@ -1388,7 +1388,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(16),
             tracking: () => dpToRem(0.5),
             size: () => dpToRem(12),
-            weight: () => tokens.raw.ref.typeface[ "weight-bold" ](),
+            weight: () => tokens.raw.ref.typeface["weight-bold"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "label-large": {
@@ -1399,7 +1399,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(20),
             tracking: () => dpToRem(0.1),
             size: () => dpToRem(14),
-            weight: () => tokens.raw.ref.typeface[ "weight-bold" ](),
+            weight: () => tokens.raw.ref.typeface["weight-bold"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "body-small": {
@@ -1410,7 +1410,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(16),
             tracking: () => dpToRem(0.4),
             size: () => dpToRem(12),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "body-medium": {
@@ -1421,7 +1421,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(20),
             tracking: () => dpToRem(0.25),
             size: () => dpToRem(14),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "body-large": {
@@ -1432,7 +1432,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(24),
             tracking: () => dpToRem(0.5),
             size: () => dpToRem(16),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "title-small": {
@@ -1443,7 +1443,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(20),
             tracking: () => dpToRem(0.1),
             size: () => dpToRem(14),
-            weight: () => tokens.raw.ref.typeface[ "weight-bold" ](),
+            weight: () => tokens.raw.ref.typeface["weight-bold"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "title-medium": {
@@ -1454,7 +1454,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(24),
             tracking: () => dpToRem(0.15),
             size: () => dpToRem(16),
-            weight: () => tokens.raw.ref.typeface[ "weight-bold" ](),
+            weight: () => tokens.raw.ref.typeface["weight-bold"](),
             font: () => tokens.raw.ref.typeface.emphasized.plain(),
           },
           "title-large": {
@@ -1465,7 +1465,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(28),
             tracking: () => dpToRem(0),
             size: () => dpToRem(22),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
           "headline-small": {
@@ -1476,7 +1476,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(32),
             tracking: () => dpToRem(0),
             size: () => dpToRem(24),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
           "headline-medium": {
@@ -1487,7 +1487,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(36),
             tracking: () => dpToRem(0),
             size: () => dpToRem(28),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
           "headline-large": {
@@ -1499,7 +1499,7 @@ let tokens: UKDesignTokens = {
             tracking: () => dpToRem(0),
             size: () => dpToRem(32),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
           },
           "display-small": {
             "text-transform": () => "unset",
@@ -1509,7 +1509,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(44),
             tracking: () => dpToRem(0),
             size: () => dpToRem(36),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
           "display-medium": {
@@ -1520,7 +1520,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(52),
             tracking: () => dpToRem(0),
             size: () => dpToRem(45),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
           "display-large": {
@@ -1531,7 +1531,7 @@ let tokens: UKDesignTokens = {
             "line-height": () => dpToRem(64),
             tracking: () => dpToRem(-0.25),
             size: () => dpToRem(57),
-            weight: () => tokens.raw.ref.typeface[ "weight-medium" ](),
+            weight: () => tokens.raw.ref.typeface["weight-medium"](),
             font: () => tokens.raw.ref.typeface.emphasized.brand(),
           },
         },
@@ -1554,10 +1554,10 @@ let tokens: UKDesignTokens = {
         level0: () => 0,
       },
       state: {
-        dragged: {"state-layer-opacity": () => 0.1599999964237213},
-        pressed: {"state-layer-opacity": () => 0.11999999731779099},
-        focus: {"state-layer-opacity": () => 0.11999999731779099},
-        hover: {"state-layer-opacity": () => 0.07999999821186066},
+        dragged: { "state-layer-opacity": () => 0.1599999964237213 },
+        pressed: { "state-layer-opacity": () => 0.11999999731779099 },
+        focus: { "state-layer-opacity": () => 0.11999999731779099 },
+        hover: { "state-layer-opacity": () => 0.07999999821186066 },
         "focus-indicator": {
           "outer-offset": () => dpToRem(2),
           thickness: () => dpToRem(3),
@@ -1652,15 +1652,15 @@ let tokens: UKDesignTokens = {
           tertiary: () => tokens.raw.ref.palette.tertiary80(),
           shadow: () => tokens.raw.ref.palette.neutral0(),
           error: () => tokens.raw.ref.palette.error80(),
-          outline: () => tokens.raw.ref.palette[ "neutral-variant60" ](),
-          "outline-variant": () => tokens.raw.ref.palette[ "neutral-variant30" ](),
+          outline: () => tokens.raw.ref.palette["neutral-variant60"](),
+          "outline-variant": () => tokens.raw.ref.palette["neutral-variant30"](),
           "on-background": () => tokens.raw.ref.palette.neutral90(),
           background: () => tokens.raw.ref.palette.neutral10(),
           "inverse-on-surface": () => tokens.raw.ref.palette.neutral20(),
           "inverse-surface": () => tokens.raw.ref.palette.neutral90(),
-          "on-surface-variant": () => tokens.raw.ref.palette[ "neutral-variant80" ](),
+          "on-surface-variant": () => tokens.raw.ref.palette["neutral-variant80"](),
           "on-surface": () => tokens.raw.ref.palette.neutral90(),
-          "surface-variant": () => tokens.raw.ref.palette[ "neutral-variant30" ](),
+          "surface-variant": () => tokens.raw.ref.palette["neutral-variant30"](),
           surface: () => tokens.raw.ref.palette.neutral10(),
           "surface-container": () => tokens.raw.ref.palette.neutral12(),
           "surface-container-low": () => tokens.raw.ref.palette.neutral10(),
@@ -1687,15 +1687,15 @@ let tokens: UKDesignTokens = {
           tertiary: () => tokens.raw.ref.palette.tertiary80(),
           shadow: () => tokens.raw.ref.palette.neutral0(),
           error: () => tokens.raw.ref.palette.error80(),
-          outline: () => tokens.raw.ref.palette[ "neutral-variant60" ](),
-          "outline-variant": () => tokens.raw.ref.palette[ "neutral-variant30" ](),
+          outline: () => tokens.raw.ref.palette["neutral-variant60"](),
+          "outline-variant": () => tokens.raw.ref.palette["neutral-variant30"](),
           "on-background": () => tokens.raw.ref.palette.neutral90(),
           background: () => tokens.raw.ref.palette.neutral10(),
           "inverse-on-surface": () => tokens.raw.ref.palette.neutral20(),
           "inverse-surface": () => tokens.raw.ref.palette.neutral90(),
-          "on-surface-variant": () => tokens.raw.ref.palette[ "neutral-variant80" ](),
+          "on-surface-variant": () => tokens.raw.ref.palette["neutral-variant80"](),
           "on-surface": () => tokens.raw.ref.palette.neutral90(),
-          "surface-variant": () => tokens.raw.ref.palette[ "neutral-variant30" ](),
+          "surface-variant": () => tokens.raw.ref.palette["neutral-variant30"](),
           surface: () => tokens.raw.ref.palette.neutral10(),
           "surface-container": () => tokens.raw.ref.palette.neutral12(),
           "surface-container-low": () => tokens.raw.ref.palette.neutral95(),
@@ -2169,10 +2169,10 @@ let tokens: UKDesignTokens = {
       level0: "var(--uk-sys-elevation-level0)",
     },
     state: {
-      dragged: {"state-layer-opacity": "var(--uk-sys-state-dragged-state-layer-opacity)"},
-      pressed: {"state-layer-opacity": "var(--uk-sys-state-pressed-state-layer-opacity)"},
-      focus: {"state-layer-opacity": "var(--uk-sys-state-focus-state-layer-opacity)"},
-      hover: {"state-layer-opacity": "var(--uk-sys-state-hover-state-layer-opacity)"},
+      dragged: { "state-layer-opacity": "var(--uk-sys-state-dragged-state-layer-opacity)" },
+      pressed: { "state-layer-opacity": "var(--uk-sys-state-pressed-state-layer-opacity)" },
+      focus: { "state-layer-opacity": "var(--uk-sys-state-focus-state-layer-opacity)" },
+      hover: { "state-layer-opacity": "var(--uk-sys-state-hover-state-layer-opacity)" },
       "focus-indicator": {
         "outer-offset": "var(--uk-sys-state-focus-indicator-outer-offset)",
         thickness: "var(--uk-sys-state-focus-indicator-thickness)",
@@ -2292,1099 +2292,637 @@ let tokens: UKDesignTokens = {
 };
 
 function hexToRgb(hex: string) {
-  let r = parseInt(hex.slice(1, 3), 16);
-  let g = parseInt(hex.slice(3, 5), 16);
-  let b = parseInt(hex.slice(5, 7), 16);
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
   return `${r}, ${g}, ${b}`;
 }
 
 function applyTheme(theme: UKDesignTheme, element: HTMLDivElement, mode: "light" | "dark") {
   for (const key of Object.keys(theme.sys.color.lightMode)) {
-    let val = theme.sys.color.lightMode[ key as keyof typeof theme.sys.color.lightMode ]();
+    const val = theme.sys.color.lightMode[key as keyof typeof theme.sys.color.lightMode]();
 
-    uk.raw.sys.color.lightMode[ key as keyof typeof theme.sys.color.lightMode ] = () => hexToRgb(val);
+    uk.raw.sys.color.lightMode[key as keyof typeof theme.sys.color.lightMode] = () => hexToRgb(val);
   }
 
   for (const key of Object.keys(theme.sys.color.darkMode)) {
-    let val = theme.sys.color.darkMode[ key as keyof typeof theme.sys.color.darkMode ]();
+    const val = theme.sys.color.darkMode[key as keyof typeof theme.sys.color.darkMode]();
 
-    uk.raw.sys.color.darkMode[ key as keyof typeof theme.sys.color.darkMode ] = () => hexToRgb(val);
+    uk.raw.sys.color.darkMode[key as keyof typeof theme.sys.color.darkMode] = () => hexToRgb(val);
   }
 
-  tokens.raw.ref.palette = {...tokens.raw.ref.palette, ...theme.ref.palette};
-  tokens.raw.ref.typeface = {...tokens.raw.ref.typeface, ...theme.ref.typeface};
+  tokens.raw.ref.palette = { ...tokens.raw.ref.palette, ...theme.ref.palette };
+  tokens.raw.ref.typeface = { ...tokens.raw.ref.typeface, ...theme.ref.typeface };
 
-  let cssVars: [ string, string ][] = [];
+  const cssVars: [string, string][] = [];
 
   const randomClassName = "uk" + Math.floor(Math.random() * 100000000);
 
   function applyProperty(key: string, value: () => string) {
-    cssVars.push([ key.slice(4, -1), value() ]);
+    cssVars.push([key.slice(4, -1), value()]);
   }
 
-  applyProperty(uk.ref.palette.error0, uk.raw.ref.palette.error0);
-  applyProperty(uk.ref.palette.error10, uk.raw.ref.palette.error10);
-  applyProperty(uk.ref.palette.error20, uk.raw.ref.palette.error20);
-  applyProperty(uk.ref.palette.error30, uk.raw.ref.palette.error30);
-  applyProperty(uk.ref.palette.error40, uk.raw.ref.palette.error40);
-  applyProperty(uk.ref.palette.error50, uk.raw.ref.palette.error50);
-  applyProperty(uk.ref.palette.error60, uk.raw.ref.palette.error60);
-  applyProperty(uk.ref.palette.error70, uk.raw.ref.palette.error70);
-  applyProperty(uk.ref.palette.error80, uk.raw.ref.palette.error80);
-  applyProperty(uk.ref.palette.error90, uk.raw.ref.palette.error90);
-  applyProperty(uk.ref.palette.error95, uk.raw.ref.palette.error95);
-  applyProperty(uk.ref.palette.error99, uk.raw.ref.palette.error99);
-  applyProperty(uk.ref.palette.error100, uk.raw.ref.palette.error100);
-  applyProperty(uk.ref.palette.tertiary0, uk.raw.ref.palette.tertiary0);
-  applyProperty(uk.ref.palette.tertiary10, uk.raw.ref.palette.tertiary10);
-  applyProperty(uk.ref.palette.tertiary20, uk.raw.ref.palette.tertiary20);
-  applyProperty(uk.ref.palette.tertiary30, uk.raw.ref.palette.tertiary30);
-  applyProperty(uk.ref.palette.tertiary40, uk.raw.ref.palette.tertiary40);
-  applyProperty(uk.ref.palette.tertiary50, uk.raw.ref.palette.tertiary50);
-  applyProperty(uk.ref.palette.tertiary60, uk.raw.ref.palette.tertiary60);
-  applyProperty(uk.ref.palette.tertiary70, uk.raw.ref.palette.tertiary70);
-  applyProperty(uk.ref.palette.tertiary80, uk.raw.ref.palette.tertiary80);
-  applyProperty(uk.ref.palette.tertiary90, uk.raw.ref.palette.tertiary90);
-  applyProperty(uk.ref.palette.tertiary95, uk.raw.ref.palette.tertiary95);
-  applyProperty(uk.ref.palette.tertiary99, uk.raw.ref.palette.tertiary99);
-  applyProperty(uk.ref.palette.tertiary100, uk.raw.ref.palette.tertiary100);
-  applyProperty(uk.ref.palette.secondary0, uk.raw.ref.palette.secondary0);
-  applyProperty(uk.ref.palette.secondary10, uk.raw.ref.palette.secondary10);
-  applyProperty(uk.ref.palette.secondary20, uk.raw.ref.palette.secondary20);
-  applyProperty(uk.ref.palette.secondary30, uk.raw.ref.palette.secondary30);
-  applyProperty(uk.ref.palette.secondary40, uk.raw.ref.palette.secondary40);
-  applyProperty(uk.ref.palette.secondary50, uk.raw.ref.palette.secondary50);
-  applyProperty(uk.ref.palette.secondary60, uk.raw.ref.palette.secondary60);
-  applyProperty(uk.ref.palette.secondary70, uk.raw.ref.palette.secondary70);
-  applyProperty(uk.ref.palette.secondary80, uk.raw.ref.palette.secondary80);
-  applyProperty(uk.ref.palette.secondary90, uk.raw.ref.palette.secondary90);
-  applyProperty(uk.ref.palette.secondary95, uk.raw.ref.palette.secondary95);
-  applyProperty(uk.ref.palette.secondary99, uk.raw.ref.palette.secondary99);
-  applyProperty(uk.ref.palette.secondary100, uk.raw.ref.palette.secondary100);
-  applyProperty(uk.ref.palette.primary0, uk.raw.ref.palette.primary0);
-  applyProperty(uk.ref.palette.primary10, uk.raw.ref.palette.primary10);
-  applyProperty(uk.ref.palette.primary20, uk.raw.ref.palette.primary20);
-  applyProperty(uk.ref.palette.primary30, uk.raw.ref.palette.primary30);
-  applyProperty(uk.ref.palette.primary40, uk.raw.ref.palette.primary40);
-  applyProperty(uk.ref.palette.primary50, uk.raw.ref.palette.primary50);
-  applyProperty(uk.ref.palette.primary60, uk.raw.ref.palette.primary60);
-  applyProperty(uk.ref.palette.primary70, uk.raw.ref.palette.primary70);
-  applyProperty(uk.ref.palette.primary80, uk.raw.ref.palette.primary80);
-  applyProperty(uk.ref.palette.primary90, uk.raw.ref.palette.primary90);
-  applyProperty(uk.ref.palette.primary95, uk.raw.ref.palette.primary95);
-  applyProperty(uk.ref.palette.primary99, uk.raw.ref.palette.primary99);
-  applyProperty(uk.ref.palette.primary100, uk.raw.ref.palette.primary100);
-  applyProperty(uk.ref.palette[ "neutral-variant0" ], uk.raw.ref.palette[ "neutral-variant0" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant10" ], uk.raw.ref.palette[ "neutral-variant10" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant20" ], uk.raw.ref.palette[ "neutral-variant20" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant30" ], uk.raw.ref.palette[ "neutral-variant30" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant40" ], uk.raw.ref.palette[ "neutral-variant40" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant50" ], uk.raw.ref.palette[ "neutral-variant50" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant60" ], uk.raw.ref.palette[ "neutral-variant60" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant70" ], uk.raw.ref.palette[ "neutral-variant70" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant80" ], uk.raw.ref.palette[ "neutral-variant80" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant90" ], uk.raw.ref.palette[ "neutral-variant90" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant95" ], uk.raw.ref.palette[ "neutral-variant95" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant98" ], uk.raw.ref.palette[ "neutral-variant98" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant99" ], uk.raw.ref.palette[ "neutral-variant99" ]);
-  applyProperty(uk.ref.palette[ "neutral-variant100" ], uk.raw.ref.palette[ "neutral-variant100" ]);
-  applyProperty(uk.ref.palette.neutral0, uk.raw.ref.palette.neutral0);
-  applyProperty(uk.ref.palette.neutral4, uk.raw.ref.palette.neutral4);
-  applyProperty(uk.ref.palette.neutral6, uk.raw.ref.palette.neutral6);
-  applyProperty(uk.ref.palette.neutral10, uk.raw.ref.palette.neutral10);
-  applyProperty(uk.ref.palette.neutral12, uk.raw.ref.palette.neutral12);
-  applyProperty(uk.ref.palette.neutral17, uk.raw.ref.palette.neutral17);
-  applyProperty(uk.ref.palette.neutral20, uk.raw.ref.palette.neutral20);
-  applyProperty(uk.ref.palette.neutral22, uk.raw.ref.palette.neutral22);
-  applyProperty(uk.ref.palette.neutral24, uk.raw.ref.palette.neutral24);
-  applyProperty(uk.ref.palette.neutral30, uk.raw.ref.palette.neutral30);
-  applyProperty(uk.ref.palette.neutral40, uk.raw.ref.palette.neutral40);
-  applyProperty(uk.ref.palette.neutral50, uk.raw.ref.palette.neutral50);
-  applyProperty(uk.ref.palette.neutral60, uk.raw.ref.palette.neutral60);
-  applyProperty(uk.ref.palette.neutral70, uk.raw.ref.palette.neutral70);
-  applyProperty(uk.ref.palette.neutral80, uk.raw.ref.palette.neutral80);
-  applyProperty(uk.ref.palette.neutral87, uk.raw.ref.palette.neutral87);
-  applyProperty(uk.ref.palette.neutral90, uk.raw.ref.palette.neutral90);
-  applyProperty(uk.ref.palette.neutral92, uk.raw.ref.palette.neutral92);
-  applyProperty(uk.ref.palette.neutral94, uk.raw.ref.palette.neutral94);
-  applyProperty(uk.ref.palette.neutral95, uk.raw.ref.palette.neutral95);
-  applyProperty(uk.ref.palette.neutral96, uk.raw.ref.palette.neutral96);
-  applyProperty(uk.ref.palette.neutral98, uk.raw.ref.palette.neutral98);
-  applyProperty(uk.ref.palette.neutral99, uk.raw.ref.palette.neutral99);
-  applyProperty(uk.ref.palette.neutral100, uk.raw.ref.palette.neutral100);
-  applyProperty(uk.ref.palette.black, uk.raw.ref.palette.black);
-  applyProperty(uk.ref.palette.white, uk.raw.ref.palette.white);
-
-  applyProperty(uk.ref.typeface.plain, uk.raw.ref.typeface.plain);
-  applyProperty(uk.ref.typeface.brand, uk.raw.ref.typeface.brand);
-  applyProperty(uk.ref.typeface[ "weight-bold" ], uk.raw.ref.typeface[ "weight-bold" ]);
-  applyProperty(uk.ref.typeface[ "weight-medium" ], uk.raw.ref.typeface[ "weight-medium" ]);
-  applyProperty(uk.ref.typeface[ "weight-regular" ], uk.raw.ref.typeface[ "weight-regular" ]);
-
-  applyProperty(
-    uk.sys.typescale[ "label-small" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "label-small" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-small" ][ "axis-value" ], uk.raw.sys.typescale[ "label-small" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "label-small" ][ "font-style" ], uk.raw.sys.typescale[ "label-small" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "label-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "label-small" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-small" ][ "line-height" ], uk.raw.sys.typescale[ "label-small" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "label-small" ].tracking, uk.raw.sys.typescale[ "label-small" ].tracking);
-  applyProperty(uk.sys.typescale[ "label-small" ].size, uk.raw.sys.typescale[ "label-small" ].size);
-  applyProperty(uk.sys.typescale[ "label-small" ].weight, uk.raw.sys.typescale[ "label-small" ].weight);
-  applyProperty(uk.sys.typescale[ "label-small" ].font, uk.raw.sys.typescale[ "label-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "label-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "label-medium" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-medium" ][ "axis-value" ], uk.raw.sys.typescale[ "label-medium" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "label-medium" ][ "font-style" ], uk.raw.sys.typescale[ "label-medium" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "label-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "label-medium" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-medium" ][ "line-height" ], uk.raw.sys.typescale[ "label-medium" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "label-medium" ].tracking, uk.raw.sys.typescale[ "label-medium" ].tracking);
-  applyProperty(uk.sys.typescale[ "label-medium" ].size, uk.raw.sys.typescale[ "label-medium" ].size);
-  applyProperty(uk.sys.typescale[ "label-medium" ].weight, uk.raw.sys.typescale[ "label-medium" ].weight);
-  applyProperty(uk.sys.typescale[ "label-medium" ].font, uk.raw.sys.typescale[ "label-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "label-large" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "label-large" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-large" ][ "axis-value" ], uk.raw.sys.typescale[ "label-large" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "label-large" ][ "font-style" ], uk.raw.sys.typescale[ "label-large" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "label-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "label-large" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "label-large" ][ "line-height" ], uk.raw.sys.typescale[ "label-large" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "label-large" ].tracking, uk.raw.sys.typescale[ "label-large" ].tracking);
-  applyProperty(uk.sys.typescale[ "label-large" ].size, uk.raw.sys.typescale[ "label-large" ].size);
-  applyProperty(uk.sys.typescale[ "label-large" ].weight, uk.raw.sys.typescale[ "label-large" ].weight);
-  applyProperty(uk.sys.typescale[ "label-large" ].font, uk.raw.sys.typescale[ "label-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "body-small" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "body-small" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-small" ][ "axis-value" ], uk.raw.sys.typescale[ "body-small" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "body-small" ][ "font-style" ], uk.raw.sys.typescale[ "body-small" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "body-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "body-small" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-small" ][ "line-height" ], uk.raw.sys.typescale[ "body-small" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "body-small" ].tracking, uk.raw.sys.typescale[ "body-small" ].tracking);
-  applyProperty(uk.sys.typescale[ "body-small" ].size, uk.raw.sys.typescale[ "body-small" ].size);
-  applyProperty(uk.sys.typescale[ "body-small" ].weight, uk.raw.sys.typescale[ "body-small" ].weight);
-  applyProperty(uk.sys.typescale[ "body-small" ].font, uk.raw.sys.typescale[ "body-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "body-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "body-medium" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-medium" ][ "axis-value" ], uk.raw.sys.typescale[ "body-medium" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "body-medium" ][ "font-style" ], uk.raw.sys.typescale[ "body-medium" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "body-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "body-medium" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-medium" ][ "line-height" ], uk.raw.sys.typescale[ "body-medium" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "body-medium" ].tracking, uk.raw.sys.typescale[ "body-medium" ].tracking);
-  applyProperty(uk.sys.typescale[ "body-medium" ].size, uk.raw.sys.typescale[ "body-medium" ].size);
-  applyProperty(uk.sys.typescale[ "body-medium" ].weight, uk.raw.sys.typescale[ "body-medium" ].weight);
-  applyProperty(uk.sys.typescale[ "body-medium" ].font, uk.raw.sys.typescale[ "body-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "body-large" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "body-large" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-large" ][ "axis-value" ], uk.raw.sys.typescale[ "body-large" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "body-large" ][ "font-style" ], uk.raw.sys.typescale[ "body-large" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "body-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "body-large" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "body-large" ][ "line-height" ], uk.raw.sys.typescale[ "body-large" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "body-large" ].tracking, uk.raw.sys.typescale[ "body-large" ].tracking);
-  applyProperty(uk.sys.typescale[ "body-large" ].size, uk.raw.sys.typescale[ "body-large" ].size);
-  applyProperty(uk.sys.typescale[ "body-large" ].weight, uk.raw.sys.typescale[ "body-large" ].weight);
-  applyProperty(uk.sys.typescale[ "body-large" ].font, uk.raw.sys.typescale[ "body-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "title-small" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "title-small" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-small" ][ "axis-value" ], uk.raw.sys.typescale[ "title-small" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "title-small" ][ "font-style" ], uk.raw.sys.typescale[ "title-small" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "title-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "title-small" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-small" ][ "line-height" ], uk.raw.sys.typescale[ "title-small" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "title-small" ].tracking, uk.raw.sys.typescale[ "title-small" ].tracking);
-  applyProperty(uk.sys.typescale[ "title-small" ].size, uk.raw.sys.typescale[ "title-small" ].size);
-  applyProperty(uk.sys.typescale[ "title-small" ].weight, uk.raw.sys.typescale[ "title-small" ].weight);
-  applyProperty(uk.sys.typescale[ "title-small" ].font, uk.raw.sys.typescale[ "title-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "title-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "title-medium" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-medium" ][ "axis-value" ], uk.raw.sys.typescale[ "title-medium" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "title-medium" ][ "font-style" ], uk.raw.sys.typescale[ "title-medium" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "title-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "title-medium" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-medium" ][ "line-height" ], uk.raw.sys.typescale[ "title-medium" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "title-medium" ].tracking, uk.raw.sys.typescale[ "title-medium" ].tracking);
-  applyProperty(uk.sys.typescale[ "title-medium" ].size, uk.raw.sys.typescale[ "title-medium" ].size);
-  applyProperty(uk.sys.typescale[ "title-medium" ].weight, uk.raw.sys.typescale[ "title-medium" ].weight);
-  applyProperty(uk.sys.typescale[ "title-medium" ].font, uk.raw.sys.typescale[ "title-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "title-large" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "title-large" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-large" ][ "axis-value" ], uk.raw.sys.typescale[ "title-large" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "title-large" ][ "font-style" ], uk.raw.sys.typescale[ "title-large" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "title-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "title-large" ][ "text-decoration" ],
-  );
-  applyProperty(uk.sys.typescale[ "title-large" ][ "line-height" ], uk.raw.sys.typescale[ "title-large" ][ "line-height" ]);
-  applyProperty(uk.sys.typescale[ "title-large" ].tracking, uk.raw.sys.typescale[ "title-large" ].tracking);
-  applyProperty(uk.sys.typescale[ "title-large" ].size, uk.raw.sys.typescale[ "title-large" ].size);
-  applyProperty(uk.sys.typescale[ "title-large" ].weight, uk.raw.sys.typescale[ "title-large" ].weight);
-  applyProperty(uk.sys.typescale[ "title-large" ].font, uk.raw.sys.typescale[ "title-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "headline-small" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "headline-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-small" ][ "axis-value" ],
-    uk.raw.sys.typescale[ "headline-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-small" ][ "font-style" ],
-    uk.raw.sys.typescale[ "headline-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "headline-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-small" ][ "line-height" ],
-    uk.raw.sys.typescale[ "headline-small" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "headline-small" ].tracking, uk.raw.sys.typescale[ "headline-small" ].tracking);
-  applyProperty(uk.sys.typescale[ "headline-small" ].size, uk.raw.sys.typescale[ "headline-small" ].size);
-  applyProperty(uk.sys.typescale[ "headline-small" ].weight, uk.raw.sys.typescale[ "headline-small" ].weight);
-  applyProperty(uk.sys.typescale[ "headline-small" ].font, uk.raw.sys.typescale[ "headline-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "headline-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "headline-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale[ "headline-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-medium" ][ "font-style" ],
-    uk.raw.sys.typescale[ "headline-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "headline-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-medium" ][ "line-height" ],
-    uk.raw.sys.typescale[ "headline-medium" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "headline-medium" ].tracking, uk.raw.sys.typescale[ "headline-medium" ].tracking);
-  applyProperty(uk.sys.typescale[ "headline-medium" ].size, uk.raw.sys.typescale[ "headline-medium" ].size);
-  applyProperty(uk.sys.typescale[ "headline-medium" ].weight, uk.raw.sys.typescale[ "headline-medium" ].weight);
-  applyProperty(uk.sys.typescale[ "headline-medium" ].font, uk.raw.sys.typescale[ "headline-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "headline-large" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "headline-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-large" ][ "axis-value" ],
-    uk.raw.sys.typescale[ "headline-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-large" ][ "font-style" ],
-    uk.raw.sys.typescale[ "headline-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "headline-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "headline-large" ][ "line-height" ],
-    uk.raw.sys.typescale[ "headline-large" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "headline-large" ].tracking, uk.raw.sys.typescale[ "headline-large" ].tracking);
-  applyProperty(uk.sys.typescale[ "headline-large" ].size, uk.raw.sys.typescale[ "headline-large" ].size);
-  applyProperty(uk.sys.typescale[ "headline-large" ].weight, uk.raw.sys.typescale[ "headline-large" ].weight);
-  applyProperty(uk.sys.typescale[ "headline-large" ].font, uk.raw.sys.typescale[ "headline-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "display-small" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "display-small" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "display-small" ][ "axis-value" ], uk.raw.sys.typescale[ "display-small" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "display-small" ][ "font-style" ], uk.raw.sys.typescale[ "display-small" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "display-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "display-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-small" ][ "line-height" ],
-    uk.raw.sys.typescale[ "display-small" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "display-small" ].tracking, uk.raw.sys.typescale[ "display-small" ].tracking);
-  applyProperty(uk.sys.typescale[ "display-small" ].size, uk.raw.sys.typescale[ "display-small" ].size);
-  applyProperty(uk.sys.typescale[ "display-small" ].weight, uk.raw.sys.typescale[ "display-small" ].weight);
-  applyProperty(uk.sys.typescale[ "display-small" ].font, uk.raw.sys.typescale[ "display-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "display-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "display-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale[ "display-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-medium" ][ "font-style" ],
-    uk.raw.sys.typescale[ "display-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "display-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-medium" ][ "line-height" ],
-    uk.raw.sys.typescale[ "display-medium" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "display-medium" ].tracking, uk.raw.sys.typescale[ "display-medium" ].tracking);
-  applyProperty(uk.sys.typescale[ "display-medium" ].size, uk.raw.sys.typescale[ "display-medium" ].size);
-  applyProperty(uk.sys.typescale[ "display-medium" ].weight, uk.raw.sys.typescale[ "display-medium" ].weight);
-  applyProperty(uk.sys.typescale[ "display-medium" ].font, uk.raw.sys.typescale[ "display-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale[ "display-large" ][ "text-transform" ],
-    uk.raw.sys.typescale[ "display-large" ][ "text-transform" ],
-  );
-  applyProperty(uk.sys.typescale[ "display-large" ][ "axis-value" ], uk.raw.sys.typescale[ "display-large" ][ "axis-value" ]);
-  applyProperty(uk.sys.typescale[ "display-large" ][ "font-style" ], uk.raw.sys.typescale[ "display-large" ][ "font-style" ]);
-  applyProperty(
-    uk.sys.typescale[ "display-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale[ "display-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale[ "display-large" ][ "line-height" ],
-    uk.raw.sys.typescale[ "display-large" ][ "line-height" ],
-  );
-  applyProperty(uk.sys.typescale[ "display-large" ].tracking, uk.raw.sys.typescale[ "display-large" ].tracking);
-  applyProperty(uk.sys.typescale[ "display-large" ].size, uk.raw.sys.typescale[ "display-large" ].size);
-  applyProperty(uk.sys.typescale[ "display-large" ].weight, uk.raw.sys.typescale[ "display-large" ].weight);
-  applyProperty(uk.sys.typescale[ "display-large" ].font, uk.raw.sys.typescale[ "display-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "label-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "label-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "label-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "label-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "label-small" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "label-small" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "label-small" ].size, uk.raw.sys.typescale.emphasized[ "label-small" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-small" ].weight,
-    uk.raw.sys.typescale.emphasized[ "label-small" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "label-small" ].font, uk.raw.sys.typescale.emphasized[ "label-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "label-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "label-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "label-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "label-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "label-medium" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "label-medium" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ].size,
-    uk.raw.sys.typescale.emphasized[ "label-medium" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ].weight,
-    uk.raw.sys.typescale.emphasized[ "label-medium" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-medium" ].font,
-    uk.raw.sys.typescale.emphasized[ "label-medium" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "label-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "label-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "label-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "label-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "label-large" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "label-large" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "label-large" ].size, uk.raw.sys.typescale.emphasized[ "label-large" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "label-large" ].weight,
-    uk.raw.sys.typescale.emphasized[ "label-large" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "label-large" ].font, uk.raw.sys.typescale.emphasized[ "label-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "body-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "body-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "body-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "body-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "body-small" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "body-small" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-small" ].size, uk.raw.sys.typescale.emphasized[ "body-small" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-small" ].weight,
-    uk.raw.sys.typescale.emphasized[ "body-small" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-small" ].font, uk.raw.sys.typescale.emphasized[ "body-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "body-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "body-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "body-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "body-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "body-medium" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "body-medium" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-medium" ].size, uk.raw.sys.typescale.emphasized[ "body-medium" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-medium" ].weight,
-    uk.raw.sys.typescale.emphasized[ "body-medium" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-medium" ].font, uk.raw.sys.typescale.emphasized[ "body-medium" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "body-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "body-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "body-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "body-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "body-large" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "body-large" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-large" ].size, uk.raw.sys.typescale.emphasized[ "body-large" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "body-large" ].weight,
-    uk.raw.sys.typescale.emphasized[ "body-large" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "body-large" ].font, uk.raw.sys.typescale.emphasized[ "body-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "title-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "title-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "title-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "title-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "title-small" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "title-small" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "title-small" ].size, uk.raw.sys.typescale.emphasized[ "title-small" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-small" ].weight,
-    uk.raw.sys.typescale.emphasized[ "title-small" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "title-small" ].font, uk.raw.sys.typescale.emphasized[ "title-small" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "title-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "title-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "title-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "title-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "title-medium" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "title-medium" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ].size,
-    uk.raw.sys.typescale.emphasized[ "title-medium" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ].weight,
-    uk.raw.sys.typescale.emphasized[ "title-medium" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-medium" ].font,
-    uk.raw.sys.typescale.emphasized[ "title-medium" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "title-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "title-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "title-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "title-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "title-large" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "title-large" ].tracking,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "title-large" ].size, uk.raw.sys.typescale.emphasized[ "title-large" ].size);
-  applyProperty(
-    uk.sys.typescale.emphasized[ "title-large" ].weight,
-    uk.raw.sys.typescale.emphasized[ "title-large" ].weight,
-  );
-  applyProperty(uk.sys.typescale.emphasized[ "title-large" ].font, uk.raw.sys.typescale.emphasized[ "title-large" ].font);
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "headline-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "headline-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "headline-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "headline-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "headline-small" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "headline-small" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ].size,
-    uk.raw.sys.typescale.emphasized[ "headline-small" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ].weight,
-    uk.raw.sys.typescale.emphasized[ "headline-small" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-small" ].font,
-    uk.raw.sys.typescale.emphasized[ "headline-small" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ].size,
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ].weight,
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-medium" ].font,
-    uk.raw.sys.typescale.emphasized[ "headline-medium" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "headline-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "headline-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "headline-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "headline-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "headline-large" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "headline-large" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ].size,
-    uk.raw.sys.typescale.emphasized[ "headline-large" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ].weight,
-    uk.raw.sys.typescale.emphasized[ "headline-large" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "headline-large" ].font,
-    uk.raw.sys.typescale.emphasized[ "headline-large" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "display-small" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "display-small" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "display-small" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "display-small" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "display-small" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "display-small" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ].size,
-    uk.raw.sys.typescale.emphasized[ "display-small" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ].weight,
-    uk.raw.sys.typescale.emphasized[ "display-small" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-small" ].font,
-    uk.raw.sys.typescale.emphasized[ "display-small" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "display-medium" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "display-medium" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "display-medium" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "display-medium" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "display-medium" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "display-medium" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ].size,
-    uk.raw.sys.typescale.emphasized[ "display-medium" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ].weight,
-    uk.raw.sys.typescale.emphasized[ "display-medium" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-medium" ].font,
-    uk.raw.sys.typescale.emphasized[ "display-medium" ].font,
-  );
-
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ][ "text-transform" ],
-    uk.raw.sys.typescale.emphasized[ "display-large" ][ "text-transform" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ][ "axis-value" ],
-    uk.raw.sys.typescale.emphasized[ "display-large" ][ "axis-value" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ][ "font-style" ],
-    uk.raw.sys.typescale.emphasized[ "display-large" ][ "font-style" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ][ "text-decoration" ],
-    uk.raw.sys.typescale.emphasized[ "display-large" ][ "text-decoration" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ][ "line-height" ],
-    uk.raw.sys.typescale.emphasized[ "display-large" ][ "line-height" ],
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ].tracking,
-    uk.raw.sys.typescale.emphasized[ "display-large" ].tracking,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ].size,
-    uk.raw.sys.typescale.emphasized[ "display-large" ].size,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ].weight,
-    uk.raw.sys.typescale.emphasized[ "display-large" ].weight,
-  );
-  applyProperty(
-    uk.sys.typescale.emphasized[ "display-large" ].font,
-    uk.raw.sys.typescale.emphasized[ "display-large" ].font,
-  );
-
-  applyProperty(uk.sys.elevation.surface[ "tint-color" ], uk.raw.sys.elevation.surface[ "tint-color" ]);
-
-  applyProperty(uk.sys.state.dragged[ "state-layer-opacity" ], () =>
-    uk.raw.sys.state.dragged[ "state-layer-opacity" ]().toString(),
-  );
-  applyProperty(uk.sys.state.pressed[ "state-layer-opacity" ], () =>
-    uk.raw.sys.state.pressed[ "state-layer-opacity" ]().toString(),
-  );
-  applyProperty(uk.sys.state.focus[ "state-layer-opacity" ], () =>
-    uk.raw.sys.state.focus[ "state-layer-opacity" ]().toString(),
-  );
-  applyProperty(uk.sys.state.hover[ "state-layer-opacity" ], () =>
-    uk.raw.sys.state.hover[ "state-layer-opacity" ]().toString(),
-  );
-  applyProperty(uk.sys.state[ "focus-indicator" ][ "outer-offset" ], uk.raw.sys.state[ "focus-indicator" ][ "outer-offset" ]);
-  applyProperty(uk.sys.state[ "focus-indicator" ][ "thickness" ], uk.raw.sys.state[ "focus-indicator" ][ "thickness" ]);
-
-  applyProperty(uk.sys.shape.corner[ "extra-large" ].top.size, uk.raw.sys.shape.corner[ "extra-large" ].top.size);
-  applyProperty(
-    uk.sys.shape.corner[ "extra-large" ].top[ "top-left" ],
-    uk.raw.sys.shape.corner[ "extra-large" ].top[ "top-left" ],
-  );
-  applyProperty(
-    uk.sys.shape.corner[ "extra-large" ].top[ "top-right" ],
-    uk.raw.sys.shape.corner[ "extra-large" ].top[ "top-right" ],
-  );
-
-  applyProperty(uk.sys.shape.corner[ "extra-large" ].size, uk.raw.sys.shape.corner[ "extra-large" ].size);
-
-  applyProperty(uk.sys.shape.corner[ "large" ].top.size, uk.raw.sys.shape.corner[ "large" ].top.size);
-  applyProperty(uk.sys.shape.corner[ "large" ].top[ "top-left" ], uk.raw.sys.shape.corner[ "large" ].top[ "top-left" ]);
-  applyProperty(uk.sys.shape.corner[ "large" ].top[ "top-right" ], uk.raw.sys.shape.corner[ "large" ].top[ "top-right" ]);
-
-  applyProperty(uk.sys.shape.corner[ "large" ].end.size, uk.raw.sys.shape.corner[ "large" ].end.size);
-  applyProperty(uk.sys.shape.corner[ "large" ].end[ "top-right" ], uk.raw.sys.shape.corner[ "large" ].end[ "top-right" ]);
-  applyProperty(
-    uk.sys.shape.corner[ "large" ].end[ "bottom-right" ],
-    uk.raw.sys.shape.corner[ "large" ].end[ "bottom-right" ],
-  );
-
-  applyProperty(uk.sys.shape.corner[ "large" ].size, uk.raw.sys.shape.corner[ "large" ].size);
-
-  applyProperty(uk.sys.shape.corner[ "medium" ], uk.raw.sys.shape.corner[ "medium" ]);
-
-  applyProperty(uk.sys.shape.corner[ "small" ], uk.raw.sys.shape.corner[ "small" ]);
-
-  applyProperty(uk.sys.shape.corner[ "extra-small" ].top.size, uk.raw.sys.shape.corner[ "extra-small" ].top.size);
-  applyProperty(
-    uk.sys.shape.corner[ "extra-small" ].top[ "top-left" ],
-    uk.raw.sys.shape.corner[ "extra-small" ].top[ "top-left" ],
-  );
-  applyProperty(
-    uk.sys.shape.corner[ "extra-small" ].top[ "top-right" ],
-    uk.raw.sys.shape.corner[ "extra-small" ].top[ "top-right" ],
-  );
-
-  applyProperty(uk.sys.shape.corner[ "extra-small" ].size, uk.raw.sys.shape.corner[ "extra-small" ].size);
-
-  applyProperty(uk.sys.shape.corner[ "none" ], uk.raw.sys.shape.corner[ "none" ]);
-
-  applyProperty(uk.sys.shape.corner[ "full" ], uk.raw.sys.shape.corner[ "full" ]);
-
-  applyProperty(uk.sys.motion.easing.emphasized.normal, uk.raw.sys.motion.easing.emphasized.normal);
-  applyProperty(uk.sys.motion.easing.emphasized.accelerate, uk.raw.sys.motion.easing.emphasized.accelerate);
-  applyProperty(uk.sys.motion.easing.emphasized.decelerate, uk.raw.sys.motion.easing.emphasized.decelerate);
-
-  applyProperty(uk.sys.motion.easing.standard.normal, uk.raw.sys.motion.easing.standard.normal);
-  applyProperty(uk.sys.motion.easing.standard.accelerate, uk.raw.sys.motion.easing.standard.accelerate);
-  applyProperty(uk.sys.motion.easing.standard.decelerate, uk.raw.sys.motion.easing.standard.decelerate);
-
-  applyProperty(uk.sys.motion.easing.linear, uk.raw.sys.motion.easing.linear);
-
-  applyProperty(uk.sys.motion[ "duration-1000" ], uk.raw.sys.motion[ "duration-1000" ]);
-  applyProperty(uk.sys.motion[ "duration-900" ], uk.raw.sys.motion[ "duration-900" ]);
-  applyProperty(uk.sys.motion[ "duration-800" ], uk.raw.sys.motion[ "duration-800" ]);
-  applyProperty(uk.sys.motion[ "duration-700" ], uk.raw.sys.motion[ "duration-700" ]);
-  applyProperty(uk.sys.motion[ "duration-600" ], uk.raw.sys.motion[ "duration-600" ]);
-  applyProperty(uk.sys.motion[ "duration-550" ], uk.raw.sys.motion[ "duration-550" ]);
-  applyProperty(uk.sys.motion[ "duration-500" ], uk.raw.sys.motion[ "duration-500" ]);
-  applyProperty(uk.sys.motion[ "duration-450" ], uk.raw.sys.motion[ "duration-450" ]);
-  applyProperty(uk.sys.motion[ "duration-400" ], uk.raw.sys.motion[ "duration-400" ]);
-  applyProperty(uk.sys.motion[ "duration-350" ], uk.raw.sys.motion[ "duration-350" ]);
-  applyProperty(uk.sys.motion[ "duration-300" ], uk.raw.sys.motion[ "duration-300" ]);
-  applyProperty(uk.sys.motion[ "duration-250" ], uk.raw.sys.motion[ "duration-250" ]);
-  applyProperty(uk.sys.motion[ "duration-200" ], uk.raw.sys.motion[ "duration-200" ]);
-  applyProperty(uk.sys.motion[ "duration-150" ], uk.raw.sys.motion[ "duration-150" ]);
-  applyProperty(uk.sys.motion[ "duration-100" ], uk.raw.sys.motion[ "duration-100" ]);
-  applyProperty(uk.sys.motion[ "duration-50" ], uk.raw.sys.motion[ "duration-50" ]);
-  applyProperty(uk.sys.motion[ "path-standard-path" ], uk.raw.sys.motion[ "path-standard-path" ]);
+  function recurseLevel(rootObject: Record<string, string | object>, rawRootObject: Record<string, string | object>) {
+    console.log(rawRootObject);
+    switch (typeof rawRootObject) {
+      case "function": {
+        // @ts-expect-error
+        applyProperty(rootObject, rawRootObject);
+        break;
+      }
+      case "object": {
+        for (const key of Object.keys(rootObject)) {
+          // @ts-expect-error
+          recurseLevel(rootObject[key], rawRootObject[key]);
+        }
+        break;
+      }
+      default: {
+        console.warn("Unknown type for", rootObject, rawRootObject);
+        break;
+      }
+    }
+  }
+
+  // applyProperty(uk.ref.palette.error0, uk.raw.ref.palette.error0);
+  // applyProperty(uk.ref.palette.error10, uk.raw.ref.palette.error10);
+  // applyProperty(uk.ref.palette.error20, uk.raw.ref.palette.error20);
+  // applyProperty(uk.ref.palette.error30, uk.raw.ref.palette.error30);
+  // applyProperty(uk.ref.palette.error40, uk.raw.ref.palette.error40);
+  // applyProperty(uk.ref.palette.error50, uk.raw.ref.palette.error50);
+  // applyProperty(uk.ref.palette.error60, uk.raw.ref.palette.error60);
+  // applyProperty(uk.ref.palette.error70, uk.raw.ref.palette.error70);
+  // applyProperty(uk.ref.palette.error80, uk.raw.ref.palette.error80);
+  // applyProperty(uk.ref.palette.error90, uk.raw.ref.palette.error90);
+  // applyProperty(uk.ref.palette.error95, uk.raw.ref.palette.error95);
+  // applyProperty(uk.ref.palette.error99, uk.raw.ref.palette.error99);
+  // applyProperty(uk.ref.palette.error100, uk.raw.ref.palette.error100);
+  // applyProperty(uk.ref.palette.tertiary0, uk.raw.ref.palette.tertiary0);
+  // applyProperty(uk.ref.palette.tertiary10, uk.raw.ref.palette.tertiary10);
+  // applyProperty(uk.ref.palette.tertiary20, uk.raw.ref.palette.tertiary20);
+  // applyProperty(uk.ref.palette.tertiary30, uk.raw.ref.palette.tertiary30);
+  // applyProperty(uk.ref.palette.tertiary40, uk.raw.ref.palette.tertiary40);
+  // applyProperty(uk.ref.palette.tertiary50, uk.raw.ref.palette.tertiary50);
+  // applyProperty(uk.ref.palette.tertiary60, uk.raw.ref.palette.tertiary60);
+  // applyProperty(uk.ref.palette.tertiary70, uk.raw.ref.palette.tertiary70);
+  // applyProperty(uk.ref.palette.tertiary80, uk.raw.ref.palette.tertiary80);
+  // applyProperty(uk.ref.palette.tertiary90, uk.raw.ref.palette.tertiary90);
+  // applyProperty(uk.ref.palette.tertiary95, uk.raw.ref.palette.tertiary95);
+  // applyProperty(uk.ref.palette.tertiary99, uk.raw.ref.palette.tertiary99);
+  // applyProperty(uk.ref.palette.tertiary100, uk.raw.ref.palette.tertiary100);
+  // applyProperty(uk.ref.palette.secondary0, uk.raw.ref.palette.secondary0);
+  // applyProperty(uk.ref.palette.secondary10, uk.raw.ref.palette.secondary10);
+  // applyProperty(uk.ref.palette.secondary20, uk.raw.ref.palette.secondary20);
+  // applyProperty(uk.ref.palette.secondary30, uk.raw.ref.palette.secondary30);
+  // applyProperty(uk.ref.palette.secondary40, uk.raw.ref.palette.secondary40);
+  // applyProperty(uk.ref.palette.secondary50, uk.raw.ref.palette.secondary50);
+  // applyProperty(uk.ref.palette.secondary60, uk.raw.ref.palette.secondary60);
+  // applyProperty(uk.ref.palette.secondary70, uk.raw.ref.palette.secondary70);
+  // applyProperty(uk.ref.palette.secondary80, uk.raw.ref.palette.secondary80);
+  // applyProperty(uk.ref.palette.secondary90, uk.raw.ref.palette.secondary90);
+  // applyProperty(uk.ref.palette.secondary95, uk.raw.ref.palette.secondary95);
+  // applyProperty(uk.ref.palette.secondary99, uk.raw.ref.palette.secondary99);
+  // applyProperty(uk.ref.palette.secondary100, uk.raw.ref.palette.secondary100);
+  // applyProperty(uk.ref.palette.primary0, uk.raw.ref.palette.primary0);
+  // applyProperty(uk.ref.palette.primary10, uk.raw.ref.palette.primary10);
+  // applyProperty(uk.ref.palette.primary20, uk.raw.ref.palette.primary20);
+  // applyProperty(uk.ref.palette.primary30, uk.raw.ref.palette.primary30);
+  // applyProperty(uk.ref.palette.primary40, uk.raw.ref.palette.primary40);
+  // applyProperty(uk.ref.palette.primary50, uk.raw.ref.palette.primary50);
+  // applyProperty(uk.ref.palette.primary60, uk.raw.ref.palette.primary60);
+  // applyProperty(uk.ref.palette.primary70, uk.raw.ref.palette.primary70);
+  // applyProperty(uk.ref.palette.primary80, uk.raw.ref.palette.primary80);
+  // applyProperty(uk.ref.palette.primary90, uk.raw.ref.palette.primary90);
+  // applyProperty(uk.ref.palette.primary95, uk.raw.ref.palette.primary95);
+  // applyProperty(uk.ref.palette.primary99, uk.raw.ref.palette.primary99);
+  // applyProperty(uk.ref.palette.primary100, uk.raw.ref.palette.primary100);
+  // applyProperty(uk.ref.palette["neutral-variant0"], uk.raw.ref.palette["neutral-variant0"]);
+  // applyProperty(uk.ref.palette["neutral-variant10"], uk.raw.ref.palette["neutral-variant10"]);
+  // applyProperty(uk.ref.palette["neutral-variant20"], uk.raw.ref.palette["neutral-variant20"]);
+  // applyProperty(uk.ref.palette["neutral-variant30"], uk.raw.ref.palette["neutral-variant30"]);
+  // applyProperty(uk.ref.palette["neutral-variant40"], uk.raw.ref.palette["neutral-variant40"]);
+  // applyProperty(uk.ref.palette["neutral-variant50"], uk.raw.ref.palette["neutral-variant50"]);
+  // applyProperty(uk.ref.palette["neutral-variant60"], uk.raw.ref.palette["neutral-variant60"]);
+  // applyProperty(uk.ref.palette["neutral-variant70"], uk.raw.ref.palette["neutral-variant70"]);
+  // applyProperty(uk.ref.palette["neutral-variant80"], uk.raw.ref.palette["neutral-variant80"]);
+  // applyProperty(uk.ref.palette["neutral-variant90"], uk.raw.ref.palette["neutral-variant90"]);
+  // applyProperty(uk.ref.palette["neutral-variant95"], uk.raw.ref.palette["neutral-variant95"]);
+  // applyProperty(uk.ref.palette["neutral-variant98"], uk.raw.ref.palette["neutral-variant98"]);
+  // applyProperty(uk.ref.palette["neutral-variant99"], uk.raw.ref.palette["neutral-variant99"]);
+  // applyProperty(uk.ref.palette["neutral-variant100"], uk.raw.ref.palette["neutral-variant100"]);
+  // applyProperty(uk.ref.palette.neutral0, uk.raw.ref.palette.neutral0);
+  // applyProperty(uk.ref.palette.neutral4, uk.raw.ref.palette.neutral4);
+  // applyProperty(uk.ref.palette.neutral6, uk.raw.ref.palette.neutral6);
+  // applyProperty(uk.ref.palette.neutral10, uk.raw.ref.palette.neutral10);
+  // applyProperty(uk.ref.palette.neutral12, uk.raw.ref.palette.neutral12);
+  // applyProperty(uk.ref.palette.neutral17, uk.raw.ref.palette.neutral17);
+  // applyProperty(uk.ref.palette.neutral20, uk.raw.ref.palette.neutral20);
+  // applyProperty(uk.ref.palette.neutral22, uk.raw.ref.palette.neutral22);
+  // applyProperty(uk.ref.palette.neutral24, uk.raw.ref.palette.neutral24);
+  // applyProperty(uk.ref.palette.neutral30, uk.raw.ref.palette.neutral30);
+  // applyProperty(uk.ref.palette.neutral40, uk.raw.ref.palette.neutral40);
+  // applyProperty(uk.ref.palette.neutral50, uk.raw.ref.palette.neutral50);
+  // applyProperty(uk.ref.palette.neutral60, uk.raw.ref.palette.neutral60);
+  // applyProperty(uk.ref.palette.neutral70, uk.raw.ref.palette.neutral70);
+  // applyProperty(uk.ref.palette.neutral80, uk.raw.ref.palette.neutral80);
+  // applyProperty(uk.ref.palette.neutral87, uk.raw.ref.palette.neutral87);
+  // applyProperty(uk.ref.palette.neutral90, uk.raw.ref.palette.neutral90);
+  // applyProperty(uk.ref.palette.neutral92, uk.raw.ref.palette.neutral92);
+  // applyProperty(uk.ref.palette.neutral94, uk.raw.ref.palette.neutral94);
+  // applyProperty(uk.ref.palette.neutral95, uk.raw.ref.palette.neutral95);
+  // applyProperty(uk.ref.palette.neutral96, uk.raw.ref.palette.neutral96);
+  // applyProperty(uk.ref.palette.neutral98, uk.raw.ref.palette.neutral98);
+  // applyProperty(uk.ref.palette.neutral99, uk.raw.ref.palette.neutral99);
+  // applyProperty(uk.ref.palette.neutral100, uk.raw.ref.palette.neutral100);
+  // applyProperty(uk.ref.palette.black, uk.raw.ref.palette.black);
+  // applyProperty(uk.ref.palette.white, uk.raw.ref.palette.white);
+
+  recurseLevel(uk.ref.palette, uk.raw.ref.palette);
+
+  // applyProperty(uk.ref.typeface.plain, uk.raw.ref.typeface.plain);
+  // applyProperty(uk.ref.typeface.brand, uk.raw.ref.typeface.brand);
+  // applyProperty(uk.ref.typeface["weight-bold"], uk.raw.ref.typeface["weight-bold"]);
+  // applyProperty(uk.ref.typeface["weight-medium"], uk.raw.ref.typeface["weight-medium"]);
+  // applyProperty(uk.ref.typeface["weight-regular"], uk.raw.ref.typeface["weight-regular"]);
+
+  recurseLevel(uk.ref.typeface, uk.raw.ref.typeface);
+
+  // for (const parentKey of Object.keys(uk.sys.typescale)) {
+  //   for (const childKey of Object.keys(uk.sys.typescale[parentKey as keyof typeof uk.sys.typescale])) {
+  //     // @ts-expect-error
+  //     if (typeof uk.raw.sys.typescale[parentKey][childKey] === "object") {
+  //       console.log("Skipping nested object for", parentKey, childKey);
+
+  //       // @ts-expect-error
+  //       for (const nestedKey of Object.keys(uk.sys.typescale[parentKey][childKey])) {
+  //         applyProperty(
+  //           // @ts-expect-error
+  //           uk.sys.typescale[parentKey][childKey][nestedKey],
+  //           // @ts-expect-error
+  //           uk.raw.sys.typescale[parentKey][childKey][nestedKey],
+  //         );
+  //       }
+
+  //       continue;
+  //     }
+
+  //     applyProperty(
+  //       // @ts-expect-error
+  //       uk.sys.typescale[parentKey][childKey],
+  //       // @ts-expect-error
+  //       uk.raw.sys.typescale[parentKey][childKey],
+  //     );
+  //   }
+  // }
+
+  recurseLevel(uk.sys.typescale, uk.raw.sys.typescale);
+
+  // applyProperty(uk.sys.typescale["label-small"]["text-transform"], uk.raw.sys.typescale["label-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["label-small"]["axis-value"], uk.raw.sys.typescale["label-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["label-small"]["font-style"], uk.raw.sys.typescale["label-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale["label-small"]["text-decoration"], uk.raw.sys.typescale["label-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["label-small"]["line-height"], uk.raw.sys.typescale["label-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale["label-small"].tracking, uk.raw.sys.typescale["label-small"].tracking);
+  // applyProperty(uk.sys.typescale["label-small"].size, uk.raw.sys.typescale["label-small"].size);
+  // applyProperty(uk.sys.typescale["label-small"].weight, uk.raw.sys.typescale["label-small"].weight);
+  // applyProperty(uk.sys.typescale["label-small"].font, uk.raw.sys.typescale["label-small"].font);
+
+  // applyProperty(uk.sys.typescale["label-medium"]["text-transform"], uk.raw.sys.typescale["label-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["label-medium"]["axis-value"], uk.raw.sys.typescale["label-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["label-medium"]["font-style"], uk.raw.sys.typescale["label-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale["label-medium"]["text-decoration"], uk.raw.sys.typescale["label-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["label-medium"]["line-height"], uk.raw.sys.typescale["label-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale["label-medium"].tracking, uk.raw.sys.typescale["label-medium"].tracking);
+  // applyProperty(uk.sys.typescale["label-medium"].size, uk.raw.sys.typescale["label-medium"].size);
+  // applyProperty(uk.sys.typescale["label-medium"].weight, uk.raw.sys.typescale["label-medium"].weight);
+  // applyProperty(uk.sys.typescale["label-medium"].font, uk.raw.sys.typescale["label-medium"].font);
+
+  // applyProperty(uk.sys.typescale["label-large"]["text-transform"], uk.raw.sys.typescale["label-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["label-large"]["axis-value"], uk.raw.sys.typescale["label-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["label-large"]["font-style"], uk.raw.sys.typescale["label-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale["label-large"]["text-decoration"], uk.raw.sys.typescale["label-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["label-large"]["line-height"], uk.raw.sys.typescale["label-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale["label-large"].tracking, uk.raw.sys.typescale["label-large"].tracking);
+  // applyProperty(uk.sys.typescale["label-large"].size, uk.raw.sys.typescale["label-large"].size);
+  // applyProperty(uk.sys.typescale["label-large"].weight, uk.raw.sys.typescale["label-large"].weight);
+  // applyProperty(uk.sys.typescale["label-large"].font, uk.raw.sys.typescale["label-large"].font);
+
+  // applyProperty(uk.sys.typescale["body-small"]["text-transform"], uk.raw.sys.typescale["body-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["body-small"]["axis-value"], uk.raw.sys.typescale["body-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["body-small"]["font-style"], uk.raw.sys.typescale["body-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale["body-small"]["text-decoration"], uk.raw.sys.typescale["body-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["body-small"]["line-height"], uk.raw.sys.typescale["body-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale["body-small"].tracking, uk.raw.sys.typescale["body-small"].tracking);
+  // applyProperty(uk.sys.typescale["body-small"].size, uk.raw.sys.typescale["body-small"].size);
+  // applyProperty(uk.sys.typescale["body-small"].weight, uk.raw.sys.typescale["body-small"].weight);
+  // applyProperty(uk.sys.typescale["body-small"].font, uk.raw.sys.typescale["body-small"].font);
+
+  // applyProperty(uk.sys.typescale["body-medium"]["text-transform"], uk.raw.sys.typescale["body-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["body-medium"]["axis-value"], uk.raw.sys.typescale["body-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["body-medium"]["font-style"], uk.raw.sys.typescale["body-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale["body-medium"]["text-decoration"], uk.raw.sys.typescale["body-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["body-medium"]["line-height"], uk.raw.sys.typescale["body-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale["body-medium"].tracking, uk.raw.sys.typescale["body-medium"].tracking);
+  // applyProperty(uk.sys.typescale["body-medium"].size, uk.raw.sys.typescale["body-medium"].size);
+  // applyProperty(uk.sys.typescale["body-medium"].weight, uk.raw.sys.typescale["body-medium"].weight);
+  // applyProperty(uk.sys.typescale["body-medium"].font, uk.raw.sys.typescale["body-medium"].font);
+
+  // applyProperty(uk.sys.typescale["body-large"]["text-transform"], uk.raw.sys.typescale["body-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["body-large"]["axis-value"], uk.raw.sys.typescale["body-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["body-large"]["font-style"], uk.raw.sys.typescale["body-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale["body-large"]["text-decoration"], uk.raw.sys.typescale["body-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["body-large"]["line-height"], uk.raw.sys.typescale["body-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale["body-large"].tracking, uk.raw.sys.typescale["body-large"].tracking);
+  // applyProperty(uk.sys.typescale["body-large"].size, uk.raw.sys.typescale["body-large"].size);
+  // applyProperty(uk.sys.typescale["body-large"].weight, uk.raw.sys.typescale["body-large"].weight);
+  // applyProperty(uk.sys.typescale["body-large"].font, uk.raw.sys.typescale["body-large"].font);
+
+  // applyProperty(uk.sys.typescale["title-small"]["text-transform"], uk.raw.sys.typescale["title-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["title-small"]["axis-value"], uk.raw.sys.typescale["title-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["title-small"]["font-style"], uk.raw.sys.typescale["title-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale["title-small"]["text-decoration"], uk.raw.sys.typescale["title-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["title-small"]["line-height"], uk.raw.sys.typescale["title-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale["title-small"].tracking, uk.raw.sys.typescale["title-small"].tracking);
+  // applyProperty(uk.sys.typescale["title-small"].size, uk.raw.sys.typescale["title-small"].size);
+  // applyProperty(uk.sys.typescale["title-small"].weight, uk.raw.sys.typescale["title-small"].weight);
+  // applyProperty(uk.sys.typescale["title-small"].font, uk.raw.sys.typescale["title-small"].font);
+
+  // applyProperty(uk.sys.typescale["title-medium"]["text-transform"], uk.raw.sys.typescale["title-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["title-medium"]["axis-value"], uk.raw.sys.typescale["title-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["title-medium"]["font-style"], uk.raw.sys.typescale["title-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale["title-medium"]["text-decoration"], uk.raw.sys.typescale["title-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["title-medium"]["line-height"], uk.raw.sys.typescale["title-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale["title-medium"].tracking, uk.raw.sys.typescale["title-medium"].tracking);
+  // applyProperty(uk.sys.typescale["title-medium"].size, uk.raw.sys.typescale["title-medium"].size);
+  // applyProperty(uk.sys.typescale["title-medium"].weight, uk.raw.sys.typescale["title-medium"].weight);
+  // applyProperty(uk.sys.typescale["title-medium"].font, uk.raw.sys.typescale["title-medium"].font);
+
+  // applyProperty(uk.sys.typescale["title-large"]["text-transform"], uk.raw.sys.typescale["title-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["title-large"]["axis-value"], uk.raw.sys.typescale["title-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["title-large"]["font-style"], uk.raw.sys.typescale["title-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale["title-large"]["text-decoration"], uk.raw.sys.typescale["title-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["title-large"]["line-height"], uk.raw.sys.typescale["title-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale["title-large"].tracking, uk.raw.sys.typescale["title-large"].tracking);
+  // applyProperty(uk.sys.typescale["title-large"].size, uk.raw.sys.typescale["title-large"].size);
+  // applyProperty(uk.sys.typescale["title-large"].weight, uk.raw.sys.typescale["title-large"].weight);
+  // applyProperty(uk.sys.typescale["title-large"].font, uk.raw.sys.typescale["title-large"].font);
+
+  // applyProperty(uk.sys.typescale["headline-small"]["text-transform"], uk.raw.sys.typescale["headline-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["headline-small"]["axis-value"], uk.raw.sys.typescale["headline-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["headline-small"]["font-style"], uk.raw.sys.typescale["headline-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale["headline-small"]["text-decoration"], uk.raw.sys.typescale["headline-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["headline-small"]["line-height"], uk.raw.sys.typescale["headline-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale["headline-small"].tracking, uk.raw.sys.typescale["headline-small"].tracking);
+  // applyProperty(uk.sys.typescale["headline-small"].size, uk.raw.sys.typescale["headline-small"].size);
+  // applyProperty(uk.sys.typescale["headline-small"].weight, uk.raw.sys.typescale["headline-small"].weight);
+  // applyProperty(uk.sys.typescale["headline-small"].font, uk.raw.sys.typescale["headline-small"].font);
+
+  // applyProperty(uk.sys.typescale["headline-medium"]["text-transform"], uk.raw.sys.typescale["headline-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["headline-medium"]["axis-value"], uk.raw.sys.typescale["headline-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["headline-medium"]["font-style"], uk.raw.sys.typescale["headline-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale["headline-medium"]["text-decoration"], uk.raw.sys.typescale["headline-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["headline-medium"]["line-height"], uk.raw.sys.typescale["headline-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale["headline-medium"].tracking, uk.raw.sys.typescale["headline-medium"].tracking);
+  // applyProperty(uk.sys.typescale["headline-medium"].size, uk.raw.sys.typescale["headline-medium"].size);
+  // applyProperty(uk.sys.typescale["headline-medium"].weight, uk.raw.sys.typescale["headline-medium"].weight);
+  // applyProperty(uk.sys.typescale["headline-medium"].font, uk.raw.sys.typescale["headline-medium"].font);
+
+  // applyProperty(uk.sys.typescale["headline-large"]["text-transform"], uk.raw.sys.typescale["headline-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["headline-large"]["axis-value"], uk.raw.sys.typescale["headline-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["headline-large"]["font-style"], uk.raw.sys.typescale["headline-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale["headline-large"]["text-decoration"], uk.raw.sys.typescale["headline-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["headline-large"]["line-height"], uk.raw.sys.typescale["headline-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale["headline-large"].tracking, uk.raw.sys.typescale["headline-large"].tracking);
+  // applyProperty(uk.sys.typescale["headline-large"].size, uk.raw.sys.typescale["headline-large"].size);
+  // applyProperty(uk.sys.typescale["headline-large"].weight, uk.raw.sys.typescale["headline-large"].weight);
+  // applyProperty(uk.sys.typescale["headline-large"].font, uk.raw.sys.typescale["headline-large"].font);
+
+  // applyProperty(uk.sys.typescale["display-small"]["text-transform"], uk.raw.sys.typescale["display-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["display-small"]["axis-value"], uk.raw.sys.typescale["display-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["display-small"]["font-style"], uk.raw.sys.typescale["display-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale["display-small"]["text-decoration"], uk.raw.sys.typescale["display-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["display-small"]["line-height"], uk.raw.sys.typescale["display-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale["display-small"].tracking, uk.raw.sys.typescale["display-small"].tracking);
+  // applyProperty(uk.sys.typescale["display-small"].size, uk.raw.sys.typescale["display-small"].size);
+  // applyProperty(uk.sys.typescale["display-small"].weight, uk.raw.sys.typescale["display-small"].weight);
+  // applyProperty(uk.sys.typescale["display-small"].font, uk.raw.sys.typescale["display-small"].font);
+
+  // applyProperty(uk.sys.typescale["display-medium"]["text-transform"], uk.raw.sys.typescale["display-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["display-medium"]["axis-value"], uk.raw.sys.typescale["display-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["display-medium"]["font-style"], uk.raw.sys.typescale["display-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale["display-medium"]["text-decoration"], uk.raw.sys.typescale["display-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["display-medium"]["line-height"], uk.raw.sys.typescale["display-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale["display-medium"].tracking, uk.raw.sys.typescale["display-medium"].tracking);
+  // applyProperty(uk.sys.typescale["display-medium"].size, uk.raw.sys.typescale["display-medium"].size);
+  // applyProperty(uk.sys.typescale["display-medium"].weight, uk.raw.sys.typescale["display-medium"].weight);
+  // applyProperty(uk.sys.typescale["display-medium"].font, uk.raw.sys.typescale["display-medium"].font);
+
+  // applyProperty(uk.sys.typescale["display-large"]["text-transform"], uk.raw.sys.typescale["display-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale["display-large"]["axis-value"], uk.raw.sys.typescale["display-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale["display-large"]["font-style"], uk.raw.sys.typescale["display-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale["display-large"]["text-decoration"], uk.raw.sys.typescale["display-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale["display-large"]["line-height"], uk.raw.sys.typescale["display-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale["display-large"].tracking, uk.raw.sys.typescale["display-large"].tracking);
+  // applyProperty(uk.sys.typescale["display-large"].size, uk.raw.sys.typescale["display-large"].size);
+  // applyProperty(uk.sys.typescale["display-large"].weight, uk.raw.sys.typescale["display-large"].weight);
+  // applyProperty(uk.sys.typescale["display-large"].font, uk.raw.sys.typescale["display-large"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["label-small"]["text-transform"], uk.raw.sys.typescale.emphasized["label-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"]["axis-value"], uk.raw.sys.typescale.emphasized["label-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"]["font-style"], uk.raw.sys.typescale.emphasized["label-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"]["text-decoration"], uk.raw.sys.typescale.emphasized["label-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"]["line-height"], uk.raw.sys.typescale.emphasized["label-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"].tracking, uk.raw.sys.typescale.emphasized["label-small"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"].size, uk.raw.sys.typescale.emphasized["label-small"].size);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"].weight, uk.raw.sys.typescale.emphasized["label-small"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["label-small"].font, uk.raw.sys.typescale.emphasized["label-small"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"]["text-transform"], uk.raw.sys.typescale.emphasized["label-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"]["axis-value"], uk.raw.sys.typescale.emphasized["label-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"]["font-style"], uk.raw.sys.typescale.emphasized["label-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"]["text-decoration"], uk.raw.sys.typescale.emphasized["label-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"]["line-height"], uk.raw.sys.typescale.emphasized["label-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"].tracking, uk.raw.sys.typescale.emphasized["label-medium"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"].size, uk.raw.sys.typescale.emphasized["label-medium"].size);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"].weight, uk.raw.sys.typescale.emphasized["label-medium"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["label-medium"].font, uk.raw.sys.typescale.emphasized["label-medium"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["label-large"]["text-transform"], uk.raw.sys.typescale.emphasized["label-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"]["axis-value"], uk.raw.sys.typescale.emphasized["label-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"]["font-style"], uk.raw.sys.typescale.emphasized["label-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"]["text-decoration"], uk.raw.sys.typescale.emphasized["label-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"]["line-height"], uk.raw.sys.typescale.emphasized["label-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"].tracking, uk.raw.sys.typescale.emphasized["label-large"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"].size, uk.raw.sys.typescale.emphasized["label-large"].size);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"].weight, uk.raw.sys.typescale.emphasized["label-large"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["label-large"].font, uk.raw.sys.typescale.emphasized["label-large"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["body-small"]["text-transform"], uk.raw.sys.typescale.emphasized["body-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"]["axis-value"], uk.raw.sys.typescale.emphasized["body-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"]["font-style"], uk.raw.sys.typescale.emphasized["body-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"]["text-decoration"], uk.raw.sys.typescale.emphasized["body-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"]["line-height"], uk.raw.sys.typescale.emphasized["body-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"].tracking, uk.raw.sys.typescale.emphasized["body-small"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"].size, uk.raw.sys.typescale.emphasized["body-small"].size);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"].weight, uk.raw.sys.typescale.emphasized["body-small"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["body-small"].font, uk.raw.sys.typescale.emphasized["body-small"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"]["text-transform"], uk.raw.sys.typescale.emphasized["body-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"]["axis-value"], uk.raw.sys.typescale.emphasized["body-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"]["font-style"], uk.raw.sys.typescale.emphasized["body-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"]["text-decoration"], uk.raw.sys.typescale.emphasized["body-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"]["line-height"], uk.raw.sys.typescale.emphasized["body-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"].tracking, uk.raw.sys.typescale.emphasized["body-medium"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"].size, uk.raw.sys.typescale.emphasized["body-medium"].size);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"].weight, uk.raw.sys.typescale.emphasized["body-medium"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["body-medium"].font, uk.raw.sys.typescale.emphasized["body-medium"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["body-large"]["text-transform"], uk.raw.sys.typescale.emphasized["body-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"]["axis-value"], uk.raw.sys.typescale.emphasized["body-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"]["font-style"], uk.raw.sys.typescale.emphasized["body-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"]["text-decoration"], uk.raw.sys.typescale.emphasized["body-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"]["line-height"], uk.raw.sys.typescale.emphasized["body-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"].tracking, uk.raw.sys.typescale.emphasized["body-large"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"].size, uk.raw.sys.typescale.emphasized["body-large"].size);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"].weight, uk.raw.sys.typescale.emphasized["body-large"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["body-large"].font, uk.raw.sys.typescale.emphasized["body-large"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["title-small"]["text-transform"], uk.raw.sys.typescale.emphasized["title-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"]["axis-value"], uk.raw.sys.typescale.emphasized["title-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"]["font-style"], uk.raw.sys.typescale.emphasized["title-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"]["text-decoration"], uk.raw.sys.typescale.emphasized["title-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"]["line-height"], uk.raw.sys.typescale.emphasized["title-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"].tracking, uk.raw.sys.typescale.emphasized["title-small"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"].size, uk.raw.sys.typescale.emphasized["title-small"].size);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"].weight, uk.raw.sys.typescale.emphasized["title-small"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["title-small"].font, uk.raw.sys.typescale.emphasized["title-small"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"]["text-transform"], uk.raw.sys.typescale.emphasized["title-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"]["axis-value"], uk.raw.sys.typescale.emphasized["title-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"]["font-style"], uk.raw.sys.typescale.emphasized["title-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"]["text-decoration"], uk.raw.sys.typescale.emphasized["title-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"]["line-height"], uk.raw.sys.typescale.emphasized["title-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"].tracking, uk.raw.sys.typescale.emphasized["title-medium"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"].size, uk.raw.sys.typescale.emphasized["title-medium"].size);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"].weight, uk.raw.sys.typescale.emphasized["title-medium"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["title-medium"].font, uk.raw.sys.typescale.emphasized["title-medium"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["title-large"]["text-transform"], uk.raw.sys.typescale.emphasized["title-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"]["axis-value"], uk.raw.sys.typescale.emphasized["title-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"]["font-style"], uk.raw.sys.typescale.emphasized["title-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"]["text-decoration"], uk.raw.sys.typescale.emphasized["title-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"]["line-height"], uk.raw.sys.typescale.emphasized["title-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"].tracking, uk.raw.sys.typescale.emphasized["title-large"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"].size, uk.raw.sys.typescale.emphasized["title-large"].size);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"].weight, uk.raw.sys.typescale.emphasized["title-large"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["title-large"].font, uk.raw.sys.typescale.emphasized["title-large"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"]["text-transform"], uk.raw.sys.typescale.emphasized["headline-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"]["axis-value"], uk.raw.sys.typescale.emphasized["headline-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"]["font-style"], uk.raw.sys.typescale.emphasized["headline-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"]["text-decoration"], uk.raw.sys.typescale.emphasized["headline-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"]["line-height"], uk.raw.sys.typescale.emphasized["headline-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"].tracking, uk.raw.sys.typescale.emphasized["headline-small"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"].size, uk.raw.sys.typescale.emphasized["headline-small"].size);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"].weight, uk.raw.sys.typescale.emphasized["headline-small"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["headline-small"].font, uk.raw.sys.typescale.emphasized["headline-small"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"]["text-transform"], uk.raw.sys.typescale.emphasized["headline-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"]["axis-value"], uk.raw.sys.typescale.emphasized["headline-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"]["font-style"], uk.raw.sys.typescale.emphasized["headline-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"]["text-decoration"], uk.raw.sys.typescale.emphasized["headline-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"]["line-height"], uk.raw.sys.typescale.emphasized["headline-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"].tracking, uk.raw.sys.typescale.emphasized["headline-medium"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"].size, uk.raw.sys.typescale.emphasized["headline-medium"].size);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"].weight, uk.raw.sys.typescale.emphasized["headline-medium"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["headline-medium"].font, uk.raw.sys.typescale.emphasized["headline-medium"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"]["text-transform"], uk.raw.sys.typescale.emphasized["headline-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"]["axis-value"], uk.raw.sys.typescale.emphasized["headline-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"]["font-style"], uk.raw.sys.typescale.emphasized["headline-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"]["text-decoration"], uk.raw.sys.typescale.emphasized["headline-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"]["line-height"], uk.raw.sys.typescale.emphasized["headline-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"].tracking, uk.raw.sys.typescale.emphasized["headline-large"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"].size, uk.raw.sys.typescale.emphasized["headline-large"].size);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"].weight, uk.raw.sys.typescale.emphasized["headline-large"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["headline-large"].font, uk.raw.sys.typescale.emphasized["headline-large"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["display-small"]["text-transform"], uk.raw.sys.typescale.emphasized["display-small"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"]["axis-value"], uk.raw.sys.typescale.emphasized["display-small"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"]["font-style"], uk.raw.sys.typescale.emphasized["display-small"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"]["text-decoration"], uk.raw.sys.typescale.emphasized["display-small"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"]["line-height"], uk.raw.sys.typescale.emphasized["display-small"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"].tracking, uk.raw.sys.typescale.emphasized["display-small"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"].size, uk.raw.sys.typescale.emphasized["display-small"].size);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"].weight, uk.raw.sys.typescale.emphasized["display-small"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["display-small"].font, uk.raw.sys.typescale.emphasized["display-small"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"]["text-transform"], uk.raw.sys.typescale.emphasized["display-medium"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"]["axis-value"], uk.raw.sys.typescale.emphasized["display-medium"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"]["font-style"], uk.raw.sys.typescale.emphasized["display-medium"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"]["text-decoration"], uk.raw.sys.typescale.emphasized["display-medium"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"]["line-height"], uk.raw.sys.typescale.emphasized["display-medium"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"].tracking, uk.raw.sys.typescale.emphasized["display-medium"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"].size, uk.raw.sys.typescale.emphasized["display-medium"].size);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"].weight, uk.raw.sys.typescale.emphasized["display-medium"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["display-medium"].font, uk.raw.sys.typescale.emphasized["display-medium"].font);
+
+  // applyProperty(uk.sys.typescale.emphasized["display-large"]["text-transform"], uk.raw.sys.typescale.emphasized["display-large"]["text-transform"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"]["axis-value"], uk.raw.sys.typescale.emphasized["display-large"]["axis-value"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"]["font-style"], uk.raw.sys.typescale.emphasized["display-large"]["font-style"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"]["text-decoration"], uk.raw.sys.typescale.emphasized["display-large"]["text-decoration"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"]["line-height"], uk.raw.sys.typescale.emphasized["display-large"]["line-height"]);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"].tracking, uk.raw.sys.typescale.emphasized["display-large"].tracking);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"].size, uk.raw.sys.typescale.emphasized["display-large"].size);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"].weight, uk.raw.sys.typescale.emphasized["display-large"].weight);
+  // applyProperty(uk.sys.typescale.emphasized["display-large"].font, uk.raw.sys.typescale.emphasized["display-large"].font);
+
+  applyProperty(uk.sys.elevation.surface["tint-color"], uk.raw.sys.elevation.surface["tint-color"]);
+
+  // applyProperty(uk.sys.state.dragged["state-layer-opacity"], () => uk.raw.sys.state.dragged["state-layer-opacity"]().toString());
+  // applyProperty(uk.sys.state.pressed["state-layer-opacity"], () => uk.raw.sys.state.pressed["state-layer-opacity"]().toString());
+  // applyProperty(uk.sys.state.focus["state-layer-opacity"], () => uk.raw.sys.state.focus["state-layer-opacity"]().toString());
+  // applyProperty(uk.sys.state.hover["state-layer-opacity"], () => uk.raw.sys.state.hover["state-layer-opacity"]().toString());
+  // applyProperty(uk.sys.state["focus-indicator"]["outer-offset"], uk.raw.sys.state["focus-indicator"]["outer-offset"]);
+  // applyProperty(uk.sys.state["focus-indicator"]["thickness"], uk.raw.sys.state["focus-indicator"]["thickness"]);
+
+  recurseLevel(uk.sys.state, uk.raw.sys.state);
+
+  // applyProperty(uk.sys.shape.corner["extra-large"].top.size, uk.raw.sys.shape.corner["extra-large"].top.size);
+  // applyProperty(uk.sys.shape.corner["extra-large"].top["top-left"], uk.raw.sys.shape.corner["extra-large"].top["top-left"]);
+  // applyProperty(uk.sys.shape.corner["extra-large"].top["top-right"], uk.raw.sys.shape.corner["extra-large"].top["top-right"]);
+
+  // applyProperty(uk.sys.shape.corner["extra-large"].size, uk.raw.sys.shape.corner["extra-large"].size);
+
+  // applyProperty(uk.sys.shape.corner["large"].top.size, uk.raw.sys.shape.corner["large"].top.size);
+  // applyProperty(uk.sys.shape.corner["large"].top["top-left"], uk.raw.sys.shape.corner["large"].top["top-left"]);
+  // applyProperty(uk.sys.shape.corner["large"].top["top-right"], uk.raw.sys.shape.corner["large"].top["top-right"]);
+
+  // applyProperty(uk.sys.shape.corner["large"].end.size, uk.raw.sys.shape.corner["large"].end.size);
+  // applyProperty(uk.sys.shape.corner["large"].end["top-right"], uk.raw.sys.shape.corner["large"].end["top-right"]);
+  // applyProperty(uk.sys.shape.corner["large"].end["bottom-right"], uk.raw.sys.shape.corner["large"].end["bottom-right"]);
+
+  // applyProperty(uk.sys.shape.corner["large"].size, uk.raw.sys.shape.corner["large"].size);
+
+  // applyProperty(uk.sys.shape.corner["medium"], uk.raw.sys.shape.corner["medium"]);
+
+  // applyProperty(uk.sys.shape.corner["small"], uk.raw.sys.shape.corner["small"]);
+
+  // applyProperty(uk.sys.shape.corner["extra-small"].top.size, uk.raw.sys.shape.corner["extra-small"].top.size);
+  // applyProperty(uk.sys.shape.corner["extra-small"].top["top-left"], uk.raw.sys.shape.corner["extra-small"].top["top-left"]);
+  // applyProperty(uk.sys.shape.corner["extra-small"].top["top-right"], uk.raw.sys.shape.corner["extra-small"].top["top-right"]);
+
+  // applyProperty(uk.sys.shape.corner["extra-small"].size, uk.raw.sys.shape.corner["extra-small"].size);
+
+  // applyProperty(uk.sys.shape.corner["none"], uk.raw.sys.shape.corner["none"]);
+
+  // applyProperty(uk.sys.shape.corner["full"], uk.raw.sys.shape.corner["full"]);
+
+  recurseLevel(uk.sys.shape, uk.raw.sys.shape);
+
+  // applyProperty(uk.sys.motion.easing.emphasized.normal, uk.raw.sys.motion.easing.emphasized.normal);
+  // applyProperty(uk.sys.motion.easing.emphasized.accelerate, uk.raw.sys.motion.easing.emphasized.accelerate);
+  // applyProperty(uk.sys.motion.easing.emphasized.decelerate, uk.raw.sys.motion.easing.emphasized.decelerate);
+
+  // applyProperty(uk.sys.motion.easing.standard.normal, uk.raw.sys.motion.easing.standard.normal);
+  // applyProperty(uk.sys.motion.easing.standard.accelerate, uk.raw.sys.motion.easing.standard.accelerate);
+  // applyProperty(uk.sys.motion.easing.standard.decelerate, uk.raw.sys.motion.easing.standard.decelerate);
+
+  // applyProperty(uk.sys.motion.easing.linear, uk.raw.sys.motion.easing.linear);
+
+  // applyProperty(uk.sys.motion["duration-1000"], uk.raw.sys.motion["duration-1000"]);
+  // applyProperty(uk.sys.motion["duration-900"], uk.raw.sys.motion["duration-900"]);
+  // applyProperty(uk.sys.motion["duration-800"], uk.raw.sys.motion["duration-800"]);
+  // applyProperty(uk.sys.motion["duration-700"], uk.raw.sys.motion["duration-700"]);
+  // applyProperty(uk.sys.motion["duration-600"], uk.raw.sys.motion["duration-600"]);
+  // applyProperty(uk.sys.motion["duration-550"], uk.raw.sys.motion["duration-550"]);
+  // applyProperty(uk.sys.motion["duration-500"], uk.raw.sys.motion["duration-500"]);
+  // applyProperty(uk.sys.motion["duration-450"], uk.raw.sys.motion["duration-450"]);
+  // applyProperty(uk.sys.motion["duration-400"], uk.raw.sys.motion["duration-400"]);
+  // applyProperty(uk.sys.motion["duration-350"], uk.raw.sys.motion["duration-350"]);
+  // applyProperty(uk.sys.motion["duration-300"], uk.raw.sys.motion["duration-300"]);
+  // applyProperty(uk.sys.motion["duration-250"], uk.raw.sys.motion["duration-250"]);
+  // applyProperty(uk.sys.motion["duration-200"], uk.raw.sys.motion["duration-200"]);
+  // applyProperty(uk.sys.motion["duration-150"], uk.raw.sys.motion["duration-150"]);
+  // applyProperty(uk.sys.motion["duration-100"], uk.raw.sys.motion["duration-100"]);
+  // applyProperty(uk.sys.motion["duration-50"], uk.raw.sys.motion["duration-50"]);
+  // applyProperty(uk.sys.motion["path-standard-path"], uk.raw.sys.motion["path-standard-path"]);
+
+  recurseLevel(uk.sys.motion, uk.raw.sys.motion);
 
   if (mode === "light") {
-    applyProperty(uk.sys.color[ "surface-tint" ], uk.raw.sys.color.lightMode[ "surface-tint" ]);
-    applyProperty(uk.sys.color[ "surface-tint-color" ], uk.raw.sys.color.lightMode[ "surface-tint-color" ]);
-    applyProperty(uk.sys.color[ "on-error-container" ], uk.raw.sys.color.lightMode[ "on-error-container" ]);
-    applyProperty(uk.sys.color[ "on-error" ], uk.raw.sys.color.lightMode[ "on-error" ]);
-    applyProperty(uk.sys.color[ "error-container" ], uk.raw.sys.color.lightMode[ "error-container" ]);
-    applyProperty(uk.sys.color[ "on-tertiary-container" ], uk.raw.sys.color.lightMode[ "on-tertiary-container" ]);
-    applyProperty(uk.sys.color[ "on-tertiary" ], uk.raw.sys.color.lightMode[ "on-tertiary" ]);
-    applyProperty(uk.sys.color[ "tertiary-container" ], uk.raw.sys.color.lightMode[ "tertiary-container" ]);
-    applyProperty(uk.sys.color[ "tertiary" ], uk.raw.sys.color.lightMode[ "tertiary" ]);
-    applyProperty(uk.sys.color[ "shadow" ], uk.raw.sys.color.lightMode[ "shadow" ]);
-    applyProperty(uk.sys.color[ "error" ], uk.raw.sys.color.lightMode[ "error" ]);
-    applyProperty(uk.sys.color[ "outline" ], uk.raw.sys.color.lightMode[ "outline" ]);
-    applyProperty(uk.sys.color[ "outline-variant" ], uk.raw.sys.color.lightMode[ "outline-variant" ]);
-    applyProperty(uk.sys.color[ "on-background" ], uk.raw.sys.color.lightMode[ "on-background" ]);
-    applyProperty(uk.sys.color[ "background" ], uk.raw.sys.color.lightMode[ "background" ]);
-    applyProperty(uk.sys.color[ "inverse-on-surface" ], uk.raw.sys.color.lightMode[ "inverse-on-surface" ]);
-    applyProperty(uk.sys.color[ "inverse-surface" ], uk.raw.sys.color.lightMode[ "inverse-surface" ]);
-    applyProperty(uk.sys.color[ "on-surface-variant" ], uk.raw.sys.color.lightMode[ "on-surface-variant" ]);
-    applyProperty(uk.sys.color[ "on-surface" ], uk.raw.sys.color.lightMode[ "on-surface" ]);
-    applyProperty(uk.sys.color[ "surface-variant" ], uk.raw.sys.color.lightMode[ "surface-variant" ]);
-    applyProperty(uk.sys.color[ "surface" ], uk.raw.sys.color.lightMode[ "surface" ]);
-    applyProperty(uk.sys.color[ "surface-container" ], uk.raw.sys.color.lightMode[ "surface-container" ]);
-    applyProperty(uk.sys.color[ "surface-container-low" ], uk.raw.sys.color.lightMode[ "surface-container-low" ]);
-    applyProperty(
-      uk.sys.color[ "surface-container-highest" ],
-      uk.raw.sys.color.lightMode[ "surface-container-highest" ],
-    );
-    applyProperty(uk.sys.color[ "on-secondary-container" ], uk.raw.sys.color.lightMode[ "on-secondary-container" ]);
-    applyProperty(uk.sys.color[ "on-secondary" ], uk.raw.sys.color.lightMode[ "on-secondary" ]);
-    applyProperty(uk.sys.color[ "secondary-container" ], uk.raw.sys.color.lightMode[ "secondary-container" ]);
-    applyProperty(uk.sys.color[ "secondary" ], uk.raw.sys.color.lightMode[ "secondary" ]);
-    applyProperty(uk.sys.color[ "inverse-primary" ], uk.raw.sys.color.lightMode[ "inverse-primary" ]);
-    applyProperty(uk.sys.color[ "on-primary-container" ], uk.raw.sys.color.lightMode[ "on-primary-container" ]);
-    applyProperty(uk.sys.color[ "on-primary" ], uk.raw.sys.color.lightMode[ "on-primary" ]);
-    applyProperty(uk.sys.color[ "primary-container" ], uk.raw.sys.color.lightMode[ "primary-container" ]);
-    applyProperty(uk.sys.color[ "primary" ], uk.raw.sys.color.lightMode[ "primary" ]);
+    applyProperty(uk.sys.color["surface-tint"], uk.raw.sys.color.lightMode["surface-tint"]);
+    applyProperty(uk.sys.color["surface-tint-color"], uk.raw.sys.color.lightMode["surface-tint-color"]);
+    applyProperty(uk.sys.color["on-error-container"], uk.raw.sys.color.lightMode["on-error-container"]);
+    applyProperty(uk.sys.color["on-error"], uk.raw.sys.color.lightMode["on-error"]);
+    applyProperty(uk.sys.color["error-container"], uk.raw.sys.color.lightMode["error-container"]);
+    applyProperty(uk.sys.color["on-tertiary-container"], uk.raw.sys.color.lightMode["on-tertiary-container"]);
+    applyProperty(uk.sys.color["on-tertiary"], uk.raw.sys.color.lightMode["on-tertiary"]);
+    applyProperty(uk.sys.color["tertiary-container"], uk.raw.sys.color.lightMode["tertiary-container"]);
+    applyProperty(uk.sys.color["tertiary"], uk.raw.sys.color.lightMode["tertiary"]);
+    applyProperty(uk.sys.color["shadow"], uk.raw.sys.color.lightMode["shadow"]);
+    applyProperty(uk.sys.color["error"], uk.raw.sys.color.lightMode["error"]);
+    applyProperty(uk.sys.color["outline"], uk.raw.sys.color.lightMode["outline"]);
+    applyProperty(uk.sys.color["outline-variant"], uk.raw.sys.color.lightMode["outline-variant"]);
+    applyProperty(uk.sys.color["on-background"], uk.raw.sys.color.lightMode["on-background"]);
+    applyProperty(uk.sys.color["background"], uk.raw.sys.color.lightMode["background"]);
+    applyProperty(uk.sys.color["inverse-on-surface"], uk.raw.sys.color.lightMode["inverse-on-surface"]);
+    applyProperty(uk.sys.color["inverse-surface"], uk.raw.sys.color.lightMode["inverse-surface"]);
+    applyProperty(uk.sys.color["on-surface-variant"], uk.raw.sys.color.lightMode["on-surface-variant"]);
+    applyProperty(uk.sys.color["on-surface"], uk.raw.sys.color.lightMode["on-surface"]);
+    applyProperty(uk.sys.color["surface-variant"], uk.raw.sys.color.lightMode["surface-variant"]);
+    applyProperty(uk.sys.color["surface"], uk.raw.sys.color.lightMode["surface"]);
+    applyProperty(uk.sys.color["surface-container"], uk.raw.sys.color.lightMode["surface-container"]);
+    applyProperty(uk.sys.color["surface-container-low"], uk.raw.sys.color.lightMode["surface-container-low"]);
+    applyProperty(uk.sys.color["surface-container-highest"], uk.raw.sys.color.lightMode["surface-container-highest"]);
+    applyProperty(uk.sys.color["on-secondary-container"], uk.raw.sys.color.lightMode["on-secondary-container"]);
+    applyProperty(uk.sys.color["on-secondary"], uk.raw.sys.color.lightMode["on-secondary"]);
+    applyProperty(uk.sys.color["secondary-container"], uk.raw.sys.color.lightMode["secondary-container"]);
+    applyProperty(uk.sys.color["secondary"], uk.raw.sys.color.lightMode["secondary"]);
+    applyProperty(uk.sys.color["inverse-primary"], uk.raw.sys.color.lightMode["inverse-primary"]);
+    applyProperty(uk.sys.color["on-primary-container"], uk.raw.sys.color.lightMode["on-primary-container"]);
+    applyProperty(uk.sys.color["on-primary"], uk.raw.sys.color.lightMode["on-primary"]);
+    applyProperty(uk.sys.color["primary-container"], uk.raw.sys.color.lightMode["primary-container"]);
+    applyProperty(uk.sys.color["primary"], uk.raw.sys.color.lightMode["primary"]);
   }
 
   if (mode === "dark") {
-    applyProperty(uk.sys.color[ "on-error" ], uk.raw.sys.color.darkMode[ "on-error" ]);
-    applyProperty(uk.sys.color[ "error-container" ], uk.raw.sys.color.darkMode[ "error-container" ]);
-    applyProperty(uk.sys.color[ "on-tertiary-container" ], uk.raw.sys.color.darkMode[ "on-tertiary-container" ]);
-    applyProperty(uk.sys.color[ "on-tertiary" ], uk.raw.sys.color.darkMode[ "on-tertiary" ]);
-    applyProperty(uk.sys.color[ "tertiary-container" ], uk.raw.sys.color.darkMode[ "tertiary-container" ]);
-    applyProperty(uk.sys.color[ "tertiary" ], uk.raw.sys.color.darkMode[ "tertiary" ]);
-    applyProperty(uk.sys.color[ "shadow" ], uk.raw.sys.color.darkMode[ "shadow" ]);
-    applyProperty(uk.sys.color[ "error" ], uk.raw.sys.color.darkMode[ "error" ]);
-    applyProperty(uk.sys.color[ "outline" ], uk.raw.sys.color.darkMode[ "outline" ]);
-    applyProperty(uk.sys.color[ "outline-variant" ], uk.raw.sys.color.darkMode[ "outline-variant" ]);
-    applyProperty(uk.sys.color[ "on-background" ], uk.raw.sys.color.darkMode[ "on-background" ]);
-    applyProperty(uk.sys.color[ "background" ], uk.raw.sys.color.darkMode[ "background" ]);
-    applyProperty(uk.sys.color[ "inverse-on-surface" ], uk.raw.sys.color.darkMode[ "inverse-on-surface" ]);
-    applyProperty(uk.sys.color[ "inverse-surface" ], uk.raw.sys.color.darkMode[ "inverse-surface" ]);
-    applyProperty(uk.sys.color[ "on-surface-variant" ], uk.raw.sys.color.darkMode[ "on-surface-variant" ]);
-    applyProperty(uk.sys.color[ "on-surface" ], uk.raw.sys.color.darkMode[ "on-surface" ]);
-    applyProperty(uk.sys.color[ "surface-variant" ], uk.raw.sys.color.darkMode[ "surface-variant" ]);
-    applyProperty(uk.sys.color[ "surface" ], uk.raw.sys.color.darkMode[ "surface" ]);
-    applyProperty(uk.sys.color[ "surface-container" ], uk.raw.sys.color.darkMode[ "surface-container" ]);
-    applyProperty(uk.sys.color[ "surface-container-low" ], uk.raw.sys.color.darkMode[ "surface-container-low" ]);
-    applyProperty(
-      uk.sys.color[ "surface-container-highest" ],
-      uk.raw.sys.color.darkMode[ "surface-container-highest" ],
-    );
-    applyProperty(uk.sys.color[ "on-secondary-container" ], uk.raw.sys.color.darkMode[ "on-secondary-container" ]);
-    applyProperty(uk.sys.color[ "on-secondary" ], uk.raw.sys.color.darkMode[ "on-secondary" ]);
-    applyProperty(uk.sys.color[ "secondary-container" ], uk.raw.sys.color.darkMode[ "secondary-container" ]);
-    applyProperty(uk.sys.color[ "secondary" ], uk.raw.sys.color.darkMode[ "secondary" ]);
-    applyProperty(uk.sys.color[ "inverse-primary" ], uk.raw.sys.color.darkMode[ "inverse-primary" ]);
-    applyProperty(uk.sys.color[ "on-primary-container" ], uk.raw.sys.color.darkMode[ "on-primary-container" ]);
-    applyProperty(uk.sys.color[ "on-primary" ], uk.raw.sys.color.darkMode[ "on-primary" ]);
-    applyProperty(uk.sys.color[ "primary-container" ], uk.raw.sys.color.darkMode[ "primary-container" ]);
-    applyProperty(uk.sys.color[ "primary" ], uk.raw.sys.color.darkMode[ "primary" ]);
+    applyProperty(uk.sys.color["on-error"], uk.raw.sys.color.darkMode["on-error"]);
+    applyProperty(uk.sys.color["error-container"], uk.raw.sys.color.darkMode["error-container"]);
+    applyProperty(uk.sys.color["on-tertiary-container"], uk.raw.sys.color.darkMode["on-tertiary-container"]);
+    applyProperty(uk.sys.color["on-tertiary"], uk.raw.sys.color.darkMode["on-tertiary"]);
+    applyProperty(uk.sys.color["tertiary-container"], uk.raw.sys.color.darkMode["tertiary-container"]);
+    applyProperty(uk.sys.color["tertiary"], uk.raw.sys.color.darkMode["tertiary"]);
+    applyProperty(uk.sys.color["shadow"], uk.raw.sys.color.darkMode["shadow"]);
+    applyProperty(uk.sys.color["error"], uk.raw.sys.color.darkMode["error"]);
+    applyProperty(uk.sys.color["outline"], uk.raw.sys.color.darkMode["outline"]);
+    applyProperty(uk.sys.color["outline-variant"], uk.raw.sys.color.darkMode["outline-variant"]);
+    applyProperty(uk.sys.color["on-background"], uk.raw.sys.color.darkMode["on-background"]);
+    applyProperty(uk.sys.color["background"], uk.raw.sys.color.darkMode["background"]);
+    applyProperty(uk.sys.color["inverse-on-surface"], uk.raw.sys.color.darkMode["inverse-on-surface"]);
+    applyProperty(uk.sys.color["inverse-surface"], uk.raw.sys.color.darkMode["inverse-surface"]);
+    applyProperty(uk.sys.color["on-surface-variant"], uk.raw.sys.color.darkMode["on-surface-variant"]);
+    applyProperty(uk.sys.color["on-surface"], uk.raw.sys.color.darkMode["on-surface"]);
+    applyProperty(uk.sys.color["surface-variant"], uk.raw.sys.color.darkMode["surface-variant"]);
+    applyProperty(uk.sys.color["surface"], uk.raw.sys.color.darkMode["surface"]);
+    applyProperty(uk.sys.color["surface-container"], uk.raw.sys.color.darkMode["surface-container"]);
+    applyProperty(uk.sys.color["surface-container-low"], uk.raw.sys.color.darkMode["surface-container-low"]);
+    applyProperty(uk.sys.color["surface-container-highest"], uk.raw.sys.color.darkMode["surface-container-highest"]);
+    applyProperty(uk.sys.color["on-secondary-container"], uk.raw.sys.color.darkMode["on-secondary-container"]);
+    applyProperty(uk.sys.color["on-secondary"], uk.raw.sys.color.darkMode["on-secondary"]);
+    applyProperty(uk.sys.color["secondary-container"], uk.raw.sys.color.darkMode["secondary-container"]);
+    applyProperty(uk.sys.color["secondary"], uk.raw.sys.color.darkMode["secondary"]);
+    applyProperty(uk.sys.color["inverse-primary"], uk.raw.sys.color.darkMode["inverse-primary"]);
+    applyProperty(uk.sys.color["on-primary-container"], uk.raw.sys.color.darkMode["on-primary-container"]);
+    applyProperty(uk.sys.color["on-primary"], uk.raw.sys.color.darkMode["on-primary"]);
+    applyProperty(uk.sys.color["primary-container"], uk.raw.sys.color.darkMode["primary-container"]);
+    applyProperty(uk.sys.color["primary"], uk.raw.sys.color.darkMode["primary"]);
   }
 
   element.querySelector("[data-uikit-styles]")!.innerHTML = `.${randomClassName} {
     ${cssVars
       .map((v) => {
-        return `${v[ 0 ]}:${v[ 1 ]}`;
+        return `${v[0]}:${v[1]}`;
       })
       .join(";")}
 }
@@ -3414,4 +2952,4 @@ function applyTheme(theme: UKDesignTheme, element: HTMLDivElement, mode: "light"
 
 const uk = tokens;
 
-export {uk, applyTheme};
+export { applyTheme, uk };
-- 
2.51.2