[monorepo][lg] - move over examples

examples/ckan/themes/base.ts

@@ -0,0 +1,13 @@
+export default {
+  primary: '#896A00',
+  secondary: '#254E70',
+  black: '#0C0C0C',
+  positive: '#0C0C0C',
+  textPrimary: '#896A00',
+  backgroundPrimary: '#FAEEC5',
+
+  // Define font size variables
+  fontSmall: '18px',
+  fontMedium: '30px',
+  fontLarge: '45px',
+};

examples/ckan/themes/index.ts

@@ -0,0 +1,11 @@
+import base from './base';
+import { IThemes } from './utils';
+
+/**
+ * The default theme to load
+ */
+export const DEFAULT_THEME = 'base';
+
+export const themes: IThemes = {
+  base,
+};

examples/ckan/themes/primary.ts

@@ -0,0 +1,6 @@
+import { extend } from './utils';
+import base from './base';
+
+export default extend(base, {
+  // Custom styles for primary theme
+});

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