WIP: Began implementation of the new module to manage styles

Dnn.AdminExperience/ClientSide/Styles.Web/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

Dnn.AdminExperience/ClientSide/Styles.Web/.gitignore

@@ -0,0 +1,25 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

Dnn.AdminExperience/ClientSide/Styles.Web/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

Dnn.AdminExperience/ClientSide/Styles.Web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "styles",
+  "version": "10.0.0",
+  "private": true,
+  "description": "Allows managing DNN css variables for styles",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/third-party-elements/third-party-elements.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build --docs && cpy ./dist/**/* ../../Dnn.PersonaBar.Extensions/admin/PersonaBar/Dnn.Styles/scripts",
+    "watch": "stencil build --config stencil.dnn.config.ts --watch",
+    "start": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.22.2"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@dnncommunity/dnn-elements": "^0.24.1",
+    "@stencil/sass": "^3.0.12",
+    "@types/node": "^22.9.0",
+    "cpy-cli": "^5.0.0"
+  }
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/clients/styles-client.ts

@@ -0,0 +1,87 @@
+export default class StylesClient {
+    private serviceRoot: string;
+
+    constructor() {
+        const dnnStyles = window.dnn as unknown as IDnnWrapper;
+        const config = dnnStyles.initStyles();
+        if (!config) {
+            throw new Error("dnn.initStyles() is not defined.");
+        }
+        if (!config.utility) {
+            throw new Error("dnn.initStyles().utility is not defined.");
+        }
+
+        const sf = config.utility.sf;
+        sf.moduleRoot = "PersonaBar";
+        this.serviceRoot = sf.getServiceRoot();
+        this.serviceRoot += "Styles/";
+    }
+
+    getStyles(){
+        return new Promise<IDnnStyles>((resolve, reject) => {
+            fetch(`${this.serviceRoot}GetStyles`, {
+                method: "GET",
+            })
+            .then((response) => response.json())
+            .then((response) => {
+                resolve(response);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+}
+export interface IDnnStyles {
+    ColorPrimary: IDnnColorInfo;
+    ColorPrimaryLight: IDnnColorInfo;
+    ColorPrimaryDark: IDnnColorInfo;
+    ColorPrimaryContrast: IDnnColorInfo;
+    ColorSecondary: IDnnColorInfo;
+    ColorSecondaryLight: IDnnColorInfo;
+    ColorSecondaryDark: IDnnColorInfo;
+    ColorSecondaryContrast: IDnnColorInfo;
+    ColorTertiary: IDnnColorInfo;
+    ColorTertiaryLight: IDnnColorInfo;
+    ColorTertiaryDark: IDnnColorInfo;
+    ColorTertiaryContrast: IDnnColorInfo;
+    ColorNeutral: IDnnColorInfo;
+    ColorNeutralLight: IDnnColorInfo;
+    ColorNeutralDark: IDnnColorInfo;
+    ColorNeutralContrast: IDnnColorInfo;
+    ColorBackground: IDnnColorInfo;
+    ColorBackgroundLight: IDnnColorInfo;
+    ColorBackgroundDark: IDnnColorInfo;
+    ColorBackgroundContrast: IDnnColorInfo;
+    ColorForeground: IDnnColorInfo;
+    ColorForegroundLight: IDnnColorInfo;
+    ColorForegroundDark: IDnnColorInfo;
+    ColorForegroundContrast: IDnnColorInfo;
+    ColorInfo: IDnnColorInfo;
+    ColorInfoLight: IDnnColorInfo;
+    ColorInfoDark: IDnnColorInfo;
+    ColorInfoContrast: IDnnColorInfo;
+    ColorSuccess: IDnnColorInfo;
+    ColorSuccessLight: IDnnColorInfo;
+    ColorSuccessDark: IDnnColorInfo;
+    ColorSuccessContrast: IDnnColorInfo;
+    ColorWarning: IDnnColorInfo;
+    ColorWarningLight: IDnnColorInfo;
+    ColorWarningDark: IDnnColorInfo;
+    ColorWarningContrast: IDnnColorInfo;
+    ColorDanger: IDnnColorInfo;
+    ColorDangerLight: IDnnColorInfo;
+    ColorDangerDark: IDnnColorInfo;
+    ColorDangerContrast: IDnnColorInfo;
+    ControlsRadius: number;
+    ControlsPadding: number;
+    BaseFontSize: number;
+}
+
+export interface IDnnColorInfo {
+    Red: number;
+    Green: number;
+    Blue: number;
+    HexValue: string;
+    MinifiedHex: string;
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface DnnStylesModule {
+    }
+}
+declare global {
+    interface HTMLDnnStylesModuleElement extends Components.DnnStylesModule, HTMLStencilElement {
+    }
+    var HTMLDnnStylesModuleElement: {
+        prototype: HTMLDnnStylesModuleElement;
+        new (): HTMLDnnStylesModuleElement;
+    };
+    interface HTMLElementTagNameMap {
+        "dnn-styles-module": HTMLDnnStylesModuleElement;
+    }
+}
+declare namespace LocalJSX {
+    interface DnnStylesModule {
+    }
+    interface IntrinsicElements {
+        "dnn-styles-module": DnnStylesModule;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "dnn-styles-module": LocalJSX.DnnStylesModule & JSXBase.HTMLAttributes<HTMLDnnStylesModuleElement>;
+        }
+    }
+}

Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.scss

@@ -0,0 +1,29 @@
+:host
+{
+  display: block;
+  --columns: 1;
+}
+
+:host(.medium),
+:host(.large)
+{
+  --columns: 2;
+}
+
+.sections
+{
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  .section
+  {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.controls{
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}