@highfivve/ad-tag 5.8.30 → 5.8.32

package/lib/console/tailwind.config.js

@@ -0,0 +1,205 @@
+import daisyui from 'daisyui';
+import daisyuiThemes from 'daisyui/src/theming/themes';
+import tailwindAnimate from 'tailwindcss-animate';
+import tailwindColors from 'tailwindcss/colors';
+const colorSafeList = [];
+const deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray'];
+const themeColors = {
+    turquoise: {
+        '50': 'rgba(130, 218, 216, 0.5)',
+        '200': '#82dad8',
+        '300': '#42cbc9',
+        '400': '#00c8c8',
+        '600': '#56a9a8'
+    },
+    blue: {
+        '50': 'rgba(183, 203, 226, 0.5)',
+        '200': '#b7cbe2',
+        '300': '#7da6d7',
+        '400': '#052e53'
+    },
+    berry: {
+        '50': '#bba1b0',
+        '200': '#c45f8d',
+        '400': '#ba0e5f',
+        '500': '#c5015d'
+    },
+    purple: {
+        '50': 'rgba(172, 149, 232, 0.5)',
+        '400': '#ac95e8',
+        '500': '#8a7de0'
+    },
+    pink: {
+        '50': 'rgba(241, 118, 175, 0.5)',
+        '400': '#f176af'
+    },
+    yellow: {
+        '50': 'rgba(232, 208, 106, 0.5)',
+        '400': '#e8d06a'
+    },
+    orange: {
+        '50': 'rgba(234, 148, 69, 0.5)',
+        '400': '#ea9445'
+    },
+    red: {
+        '50': 'rgba(248, 131, 131, 0.5)',
+        '400': '#f88383'
+    },
+    gray: {
+        '50': 'rgba(66, 203, 201, 0.05)',
+        '200': 'rgba(203, 0, 95, 0.04)',
+        '400': '#e7e7e7',
+        '450': '#e1e1e1'
+    },
+    darkgray: {
+        '200': '#a2a3a5'
+    },
+    green: {
+        '400': '#49817B',
+        '600': '#006E65'
+    },
+    background: 'hsl(var(--background))',
+    foreground: 'hsl(var(--foreground))',
+    card: {
+        DEFAULT: 'hsl(var(--card))',
+        foreground: 'hsl(var(--card-foreground))'
+    },
+    popover: {
+        DEFAULT: 'hsl(var(--popover))',
+        foreground: 'hsl(var(--popover-foreground))'
+    },
+    primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))'
+    },
+    secondary: {
+        DEFAULT: 'hsl(var(--secondary))',
+        foreground: 'hsl(var(--secondary-foreground))'
+    },
+    muted: {
+        DEFAULT: 'hsl(var(--muted))',
+        foreground: 'hsl(var(--muted-foreground))'
+    },
+    accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        foreground: 'hsl(var(--accent-foreground))'
+    },
+    destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))'
+    },
+    border: 'hsl(var(--border))',
+    input: 'hsl(var(--input))',
+    ring: 'hsl(var(--ring))',
+    chart: {
+        '1': 'hsl(var(--chart-1))',
+        '2': 'hsl(var(--chart-2))',
+        '3': 'hsl(var(--chart-3))',
+        '4': 'hsl(var(--chart-4))',
+        '5': 'hsl(var(--chart-5))'
+    }
+};
+const themeAndTailwindColors = { ...themeColors, ...tailwindColors };
+for (const colorName in themeAndTailwindColors) {
+    if (deprecated.includes(colorName)) {
+        continue;
+    }
+    const shades = [50, 200, 300, 400, 500, 600];
+    const color = colorName;
+    const pallette = themeAndTailwindColors[color];
+    if (typeof pallette === 'object') {
+        shades.forEach(shade => {
+            if (shade in pallette) {
+                colorSafeList.push(`stroke-${color}-${shade}`);
+                colorSafeList.push(`fill-${color}-${shade}`);
+                colorSafeList.push(`bg-${color}-${shade}`);
+                colorSafeList.push(`text-${color}-${shade}`);
+            }
+        });
+    }
+}
+export default {
+    darkMode: ['class'],
+    corePlugins: {
+        preflight: false
+    },
+    content: ['./ad-tag/source/ts/console/**/*.{js,ts,jsx,tsx}'],
+    theme: {
+        extend: {
+            gridTemplateRows: {
+                layout: 'auto 1fr auto auto'
+            },
+            gridTemplateColumns: {
+                layout: 'minmax(300px, max-content) minmax(0, 1fr)'
+            },
+            colors: themeColors,
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)'
+            },
+            keyframes: {
+                fadeInOut: {
+                    '0%, 100%': { opacity: '0' },
+                    '50%': { opacity: '1' }
+                }
+            },
+            animation: {
+                'loading-screen-rotate': 'loading-screen-rotate 2s linear infinite',
+                'loading-screen-dash': 'loading-screen-dash 1.5s ease-in-out infinite',
+                fadeIn: 'fadeInOut 1s ease-in-out'
+            },
+            fontFamily: {
+                sans: ['Brownfox-Formular', 'ui-sans-serif', 'system-ui'],
+                BrownfoxFormular: ['Brownfox-Formular'],
+                roboto: ['Roboto', 'Arial', 'sans-serif']
+            }
+        },
+        screens: {
+            sm: '640px',
+            md: '768px',
+            lg: '1024px',
+            xl: '1515px',
+            tall: {
+                raw: '(min-height: 1100px)'
+            },
+            xTall: {
+                raw: '(min-height: 1300px)'
+            },
+            xxTall: {
+                raw: '(min-height: 1500px)'
+            }
+        }
+    },
+    safelist: colorSafeList,
+    plugins: [tailwindAnimate, daisyui],
+    daisyui: {
+        prefix: 'd-',
+        logs: false,
+        themes: [
+            {
+                light: {
+                    ...daisyuiThemes.light,
+                    primary: '#000000',
+                    secondary: '#00c8c8',
+                    accent: '#ba0e5f',
+                    info: '#7da6d7',
+                    success: '#006e65',
+                    warning: '#e8d06a',
+                    error: '#c5015d'
+                },
+                dark: {
+                    ...daisyuiThemes.dark,
+                    primary: '#ffffff',
+                    secondary: '#00c8c8',
+                    accent: '#ba0e5f',
+                    info: '#7da6d7',
+                    success: '#42cbc9',
+                    warning: '#e8d06a',
+                    error: '#f88383'
+                }
+            }
+        ],
+        darkTheme: 'dark'
+    }
+};

package/lib/console/util/themingService.js

@@ -1,4 +1,7 @@
+import { BrowserStorageKeys } from 'ad-tag/util/browserStorageKeys';
+import { getBrowserStorageValue, setBrowserStorageValue } from 'ad-tag/util/localStorage';
 export const allThemes = ['light', 'dark'];
+const isThemeConfig = (value) => value === 'system' || allThemes.some(theme => theme === value);
 export class ThemingService {
     constructor(rootElement) {
         this.rootElement = rootElement;
@@ -6,17 +9,20 @@ export class ThemingService {
             this.rootElement = rootElement;
         };
         this.currentTheme = () => (this.rootElement?.classList.contains('dark') ? 'dark' : 'light');
-        this.applyTheme = (themeConfig = 'system') => {
+        this.currentThemeConfig = () => {
+            const stored = getBrowserStorageValue(BrowserStorageKeys.moliConsoleTheme, window.localStorage);
+            return stored && isThemeConfig(stored) ? stored : 'system';
+        };
+        this.setThemeConfig = (themeConfig) => {
+            setBrowserStorageValue(BrowserStorageKeys.moliConsoleTheme, themeConfig, window.localStorage);
+            this.applyTheme(themeConfig);
+        };
+        this.applyTheme = (themeConfig = this.currentThemeConfig()) => {
             const theme = themeConfig === 'system' ? ThemingService.currentSystemTheme() : themeConfig;
             this.updateThemeCssClass(theme);
         };
-        this.enableSystemThemeListener = () => window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-            if (e.matches) {
-                this.applyTheme('dark');
-            }
-            else {
-                this.applyTheme('light');
-            }
+        this.enableSystemThemeListener = () => window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            this.applyTheme();
         });
         this.updateThemeCssClass = (theme) => {
             if (theme !== 'light') {
@@ -25,6 +31,7 @@ export class ThemingService {
             else {
                 this.rootElement?.classList.remove('dark');
             }
+            this.rootElement?.setAttribute('data-theme', theme);
         };
     }
 }

package/lib/console/validations/sizesConfigValidations.js

@@ -75,7 +75,7 @@ const formatSizesConfigMsg = (missingSizes) => {
     };
     return (React.createElement("div", null,
         "The following slots have sizes that need to be supported/defined:",
-        React.createElement("table", { className: 'size-valid-table' },
+        React.createElement("table", { className: "d-table d-table-xs w-auto text-center [&_td]:border [&_th]:border [&_th]:bg-base-200" },
             React.createElement("thead", null,
                 React.createElement("tr", null,
                     React.createElement("th", null, "Slot ID"),

package/lib/gen/packageJson.js

@@ -1,3 +1,3 @@
 export const packageJson = {
-    version: '5.8.30'
+    version: '5.8.32'
 };

package/lib/util/browserStorageKeys.js

@@ -3,6 +3,7 @@ export const BrowserStorageKeys = {
     moliPubCode: 'moli-pub-code',
     moliVersion: 'moli-version',
     molyAnalyticsSession: 'moli-analytics-session',
+    moliConsoleTheme: 'moli-console-theme',
     testSlotSize: (id) => `moli-test-slot-size-${id}`,
     debugDelay: 'moli-debug-delay',
     abTest: 'moli-ab-test'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highfivve/ad-tag",
-  "version": "5.8.30",
+  "version": "5.8.32",
   "license": "Apache-2.0",
   "description": "An ad tag implementation called moli",
   "main": "./lib/index.js",
@@ -82,6 +82,7 @@
     "chai-as-promised": "^7.1.1",
     "commander": "^12.1.0",
     "cssnano": "^5.1.15",
+    "daisyui": "^4.12.24",
     "esbuild": "^0.23.0",
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
@@ -107,6 +108,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "sinon": "10.0.0",
     "sinon-chai": "3.6.0",
+    "tailwindcss": "^3.4.19",
+    "tailwindcss-animate": "^1.0.7",
     "ts-json-schema-generator": "2.3.0",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",