Add Clarity New Users and Roles

.yarnrc

@@ -0,0 +1,3 @@
+disable-self-update-check true
+yarn-offline-mirror "./node_modules_cache"
+yarn-offline-mirror-pruning true

client-extensions/liferay-clarity-global-css-2/assets/global.css

@@ -0,0 +1,7 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+
+body {
+  font-family: Times New Roman, serif;
+}

client-extensions/liferay-clarity-global-css-2/client-extension.yaml

@@ -0,0 +1,6 @@
+assemble:
+    - include: static/*.css
+liferay-sample-global-css-2:
+    name: Liferay Sample Global CSS 2
+    type: globalCSS
+    url: global.*.css

client-extensions/liferay-clarity-global-css-2/package.json

@@ -0,0 +1,15 @@
+{
+	"devDependencies": {
+		"css-loader": "6.10.0",
+		"mini-css-extract-plugin": "^2.8.0",
+		"style-loader": "3.3.4",
+		"webpack": "5.90.1",
+		"webpack-cli": "5.1.4"
+	},
+	"name": "@liferay/liferay-clarity-global-css-2",
+	"private": true,
+	"scripts": {
+		"build": "webpack"
+	},
+	"version": "0.0.0"
+}

client-extensions/liferay-clarity-global-css-2/static/global.fcacde1648101edbce50.css

@@ -0,0 +1,5 @@
+@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
+
+body {
+  font-family: Times New Roman, serif;
+}

client-extensions/liferay-clarity-global-css-2/webpack.config.js

@@ -0,0 +1,41 @@
+/**
+ * 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 MiniCssExtractPlugin = require('mini-css-extract-plugin');
+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.css',
+	},
+	mode: DEVELOPMENT ? 'development' : 'production',
+	module: {
+		rules: [
+			{
+				test: /\.css$/i,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+		],
+	},
+	optimization: {
+		minimize: !DEVELOPMENT,
+	},
+	output: {
+		clean: true,
+		path: path.resolve('static'),
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: '[name].[contenthash].css',
+		}),
+		new webpack.optimize.LimitChunkCountPlugin({
+			maxChunks: 1,
+		}),
+	],
+};

client-extensions/liferay-clarity-global-css/assets/global.css

@@ -0,0 +1,4 @@
+.card.card-container {
+    box-shadow: none; /* Removes the shadow */
+    border-radius: 0; /* Sets the rounded corners to 0 */
+}

client-extensions/liferay-clarity-global-css/client-extension.yaml

@@ -0,0 +1,6 @@
+assemble:
+    - include: static/*.css
+liferay-clarity-global-css:
+    name: Liferay Clarity Global CSS
+    type: globalCSS
+    url: global.*.css

client-extensions/liferay-clarity-global-css/package.json

@@ -0,0 +1,15 @@
+{
+	"devDependencies": {
+		"css-loader": "6.10.0",
+		"mini-css-extract-plugin": "^2.8.0",
+		"style-loader": "3.3.4",
+		"webpack": "5.90.1",
+		"webpack-cli": "5.1.4"
+	},
+	"name": "@liferay/liferay-clarity-global-css",
+	"private": true,
+	"scripts": {
+		"build": "webpack"
+	},
+	"version": "0.1.0"
+}

client-extensions/liferay-clarity-global-css/webpack.config.js

@@ -0,0 +1,41 @@
+/**
+ * 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 MiniCssExtractPlugin = require('mini-css-extract-plugin');
+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.css',
+	},
+	mode: DEVELOPMENT ? 'development' : 'production',
+	module: {
+		rules: [
+			{
+				test: /\.css$/i,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+		],
+	},
+	optimization: {
+		minimize: !DEVELOPMENT,
+	},
+	output: {
+		clean: true,
+		path: path.resolve('static'),
+	},
+	plugins: [
+		new MiniCssExtractPlugin({
+			filename: '[name].[contenthash].css',
+		}),
+		new webpack.optimize.LimitChunkCountPlugin({
+			maxChunks: 1,
+		}),
+	],
+};

client-extensions/liferay-clarity-global-js/assets/global.js

@@ -0,0 +1,58 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const settings = {
+        fontSize: parseFloat(getComputedStyle(document.documentElement).fontSize),
+        isGrayscale: false
+    };
+
+    const controlPanel = document.createElement("div");
+    controlPanel.style.position = "fixed";
+    controlPanel.style.bottom = "20px";
+    controlPanel.style.right = "20px";
+    controlPanel.style.backgroundColor = "#fff";
+    controlPanel.style.border = "1px solid #ccc";
+    controlPanel.style.borderRadius = "4px";
+    controlPanel.style.padding = "10px";
+    controlPanel.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.1)";
+
+    // Font size label and input
+    const fontSizeLabel = document.createElement("label");
+    fontSizeLabel.textContent = "Font Size: ";
+    const fontSizeInput = document.createElement("input");
+    fontSizeInput.type = "range";
+    fontSizeInput.min = "12";
+    fontSizeInput.max = "24";
+    fontSizeInput.value = settings.fontSize;
+    fontSizeInput.style.margin = "5px";
+    fontSizeLabel.appendChild(fontSizeInput);
+
+    fontSizeInput.addEventListener("input", function() {
+        const newSize = `${this.value}px`;
+        document.documentElement.style.fontSize = newSize;
+        settings.fontSize = this.value;
+    });
+
+    // Grayscale label and checkbox
+    const grayscaleLabel = document.createElement("label");
+    grayscaleLabel.textContent = "Grayscale: ";
+    const grayscaleCheckbox = document.createElement("input");
+    grayscaleCheckbox.type = "checkbox";
+    grayscaleLabel.appendChild(grayscaleCheckbox);
+
+    grayscaleCheckbox.addEventListener("change", function() {
+        if (this.checked) {
+            document.documentElement.style.filter = "grayscale(100%)";
+            settings.isGrayscale = true;
+        } else {
+            document.documentElement.style.filter = "none";
+            settings.isGrayscale = false;
+        }
+    });
+
+    // Add elements to control panel
+    controlPanel.appendChild(fontSizeLabel);
+    controlPanel.appendChild(document.createElement("br"));
+    controlPanel.appendChild(grayscaleLabel);
+
+    // Append control panel to body
+    document.body.appendChild(controlPanel);
+});

client-extensions/liferay-clarity-global-js/client-extension.yaml

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

client-extensions/liferay-clarity-global-js/package.json

@@ -0,0 +1,12 @@
+{
+	"devDependencies": {
+		"webpack": "5.90.1",
+		"webpack-cli": "5.1.4"
+	},
+	"name": "@liferay/liferay-clarity-global-js",
+	"private": true,
+	"scripts": {
+		"build": "webpack"
+	},
+	"version": "0.1.0"
+}

client-extensions/liferay-clarity-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,
+		}),
+	],
+};

client-extensions/liferay-clarity-theme-css/client-extension.yaml

@@ -4,5 +4,6 @@ assemble:
 liferay-clarity-theme-css-2:
     clayURL: css/clay.css
     mainURL: css/main.css
+    frontendTokenDefinitionJSON: src/frontend-token-definition.json
     name: Liferay Clarity Theme CSS
     type: themeCSS

client-extensions/liferay-clarity-theme-css/src/css/_clay_variables.scss

@@ -3,3 +3,19 @@
 @import 'classic_clay_variables';
 
 @import 'dialect/clay_variables';
+
+
+
+// Buttons
+$btn-primary-bg: var(--clay-button-primary-bg);
+$btn-primary-color: var(--clay-button-text-color);
+
+// Cards
+$card-bg: var(--clay-card-bg-color);
+$card-border-color: var(--clay-card-border-color);
+$card-title-color: var(--clay-card-title-color);
+
+
+// Fronts (Headings and Text)
+$heading-color: var(--clay-heading-color);
+$text-color: var(--clay-text-color);

client-extensions/liferay-clarity-theme-css/src/css/_custom.scss

@@ -99,4 +99,6 @@ button.facet-clear-btn > strong {
 
 .lfr-layout-structure-item-com-liferay-commerce-product-content-search-web-internal-portlet-cpspecificationoptionfacetsportlet .panel-collapse{
     padding-left: 1rem;
-}
+}
+
+