Themecss1 improved

workspaces/liferay-courseclarity-workspace/client-extensions/liferay-courseclarity-global-js/assets/global.js

@@ -0,0 +1,86 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+const DEFAULT_FONT_SIZE = 16;
+
+document.addEventListener('DOMContentLoaded', () => {
+	let currentFontSize = DEFAULT_FONT_SIZE;
+
+	const controlPanel = document.createElement('div');
+
+	controlPanel.id = 'accessibility-control-panel';
+	controlPanel.style.position = 'fixed';
+	controlPanel.style.top = '20px';
+	controlPanel.style.right = '20px';
+	controlPanel.style.backgroundColor = 'transparent';
+	controlPanel.style.border = 'none';
+	controlPanel.style.padding = '5px';
+	controlPanel.style.zIndex = '9999';
+	controlPanel.style.fontFamily = 'Arial, sans-serif';
+	controlPanel.style.display = 'flex';
+	controlPanel.style.gap = '5px';
+	controlPanel.style.alignItems = 'center';
+
+	const increaseButton = document.createElement('button');
+
+	increaseButton.textContent = 'A+';
+	increaseButton.style.padding = '5px 10px';
+	increaseButton.style.border = '1px solid #1e6f6f';
+	increaseButton.style.backgroundColor = '#1e6f6f';
+	increaseButton.style.color = '#fff';
+	increaseButton.style.borderRadius = '4px';
+	increaseButton.style.cursor = 'pointer';
+	increaseButton.style.fontSize = '12px';
+	increaseButton.addEventListener('click', () => {
+		if (currentFontSize < 24) {
+			currentFontSize += 2;
+			document.documentElement.style.fontSize = `${currentFontSize}px`;
+		}
+	});
+
+	const decreaseButton = document.createElement('button');
+
+	decreaseButton.textContent = 'A-';
+	decreaseButton.style.padding = '5px 10px';
+	decreaseButton.style.border = '1px solid #1e6f6f';
+	decreaseButton.style.backgroundColor = '#1e6f6f';
+	decreaseButton.style.color = '#fff';
+	decreaseButton.style.borderRadius = '4px';
+	decreaseButton.style.cursor = 'pointer';
+	decreaseButton.style.fontSize = '12px';
+	decreaseButton.addEventListener('click', () => {
+		if (currentFontSize > 12) {
+			currentFontSize -= 2;
+			document.documentElement.style.fontSize = `${currentFontSize}px`;
+		}
+	});
+
+	const grayscaleToggle = document.createElement('div');
+
+	grayscaleToggle.style.width = '20px';
+	grayscaleToggle.style.height = '20px';
+	grayscaleToggle.style.borderRadius = '50%';
+	grayscaleToggle.style.background =
+		'linear-gradient(to right, black 50%, white 50%)';
+	grayscaleToggle.style.cursor = 'pointer';
+	grayscaleToggle.style.border = '1px solid #ccc';
+	grayscaleToggle.addEventListener('click', (event) => {
+		const clickX = event.offsetX;
+		const toggleWidth = grayscaleToggle.offsetWidth;
+
+		if (clickX < toggleWidth / 2) {
+			document.documentElement.style.filter = 'grayscale(100%)';
+		}
+		else {
+			document.documentElement.style.filter = 'none';
+		}
+	});
+
+	controlPanel.appendChild(decreaseButton);
+	controlPanel.appendChild(increaseButton);
+	controlPanel.appendChild(grayscaleToggle);
+
+	document.body.appendChild(controlPanel);
+});

workspaces/liferay-courseclarity-workspace/client-extensions/liferay-courseclarity-global-js/client-extension.yaml

@@ -0,0 +1,7 @@
+assemble:
+    - from: assets
+      into: static
+liferay-courseclarity-global-js:
+    name: Liferay Course Clarity Global JS
+    type: globalJS
+    url: global.*.js

workspaces/liferay-courseclarity-workspace/client-extensions/liferay-courseclarity-global-js/package.json

@@ -0,0 +1,18 @@
+{
+	"dependencies": {
+	},
+	"devDependencies": {
+		"webpack": "5.90.1",
+		"webpack-cli": "5.1.4"
+	},
+	"liferayDesignPack": {
+		"baseTheme": "styled"
+	},
+	"main": "package.json",
+	"name": "@liferay/clarity-theme",
+	"private": true,
+	"scripts": {
+		"build": "webpack"
+	},
+	"version": "0.1.0"
+}

workspaces/liferay-courseclarity-workspace/client-extensions/liferay-courseclarity-global-js/webpack.config.js

@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+const path = require('path');
+const webpack = require('webpack');
+
+const DEVELOPMENT = process.env.NODE_ENV === 'development';
+
+module.exports = {
+	devtool: DEVELOPMENT ? 'source-map' : false,
+	entry: {
+		global: './assets/global.js',
+	},
+	mode: DEVELOPMENT ? 'development' : 'production',
+	optimization: {
+		minimize: !DEVELOPMENT,
+	},
+	output: {
+		filename: '[name].[contenthash].js',
+		path: path.resolve('build', 'static'),
+	},
+	plugins: [
+		new webpack.optimize.LimitChunkCountPlugin({
+			maxChunks: 1,
+		}),
+	],
+};

workspaces/liferay-courseclarity-workspace/client-extensions/liferay-courseclarity-theme-css/client-extension.yaml

@@ -0,0 +1,11 @@
+assemble:
+    - from: build/buildTheme/img
+      into: static/img
+    - from: build/buildTheme/images
+      into: static/images
+liferay-courseclarity-theme-css:
+    clayURL: css/clay.css
+    frontendTokenDefinitionJSON: src/frontend-token-definition.json
+    mainURL: css/main.css
+    name: Liferay Course Clarity Theme CSS
+    type: themeCSS