[monorepo][lg] - move over examples

examples/ckan/themes/utils.ts

@@ -0,0 +1,47 @@
+import { themes } from './index';
+
+export interface ITheme {
+  [key: string]: string;
+}
+
+export interface IThemes {
+  [key: string]: ITheme;
+}
+
+export interface IMappedTheme {
+  [key: string]: string | null;
+}
+
+export const mapTheme = (variables: ITheme): IMappedTheme => {
+  return {
+    '--color-primary': variables.primary || '',
+    '--color-secondary': variables.secondary || '',
+    '--color-positive': variables.positive || '',
+    '--color-negative': variables.negative || '',
+    '--color-text-primary': variables.textPrimary || '',
+    '--background-primary': variables.backgroundPrimary || '',
+    '--background-sec': variables.backgroundSecondary || '',
+    '--font-size-small': variables.fontSmall || '18px',
+    '--font-size-medium': variables.fontMedium || '30px',
+    '--font-size-large': variables.fontLarge || '45px',
+  };
+};
+
+export const applyTheme = (theme: string): void => {
+  const themeObject: IMappedTheme = mapTheme(themes[theme]);
+  if (!themeObject) return;
+
+  const root = document.documentElement;
+
+  Object.keys(themeObject).forEach((property) => {
+    if (property === 'name') {
+      return;
+    }
+
+    root.style.setProperty(property, themeObject[property]);
+  });
+};
+
+export const extend = (extending: ITheme, newTheme: ITheme): ITheme => {
+  return { ...extending, ...newTheme };
+};