pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind config

Author: blesildaramirez

.storybook/preview.js

@@ -29,6 +29,7 @@ import VueScrollTo from 'vue-scrollto';
 
 import '../src/styles/_import.less';
 import '../src/styles/_global.less';
+import '../src/styles/style.css';
 import {allModes} from './modes';
 import {initialize, mswLoader} from 'msw-storybook-addon';
 

src/docs/guide/DesignSystem/_CSSVariables.mdx

@@ -0,0 +1,10 @@
+import {Meta, Story, ArgTypes} from '@storybook/blocks';
+import * as _CSSVariablesStories from './_CSSVariables.stories.js';
+
+<Meta title="Guide/Style/CSS Variables" />
+
+# Css Variables
+
+List of CSS variables that you can use directly when designing a plugin. These variables are derived from Tailwind's utility classes, specifically based on our theme configuration.
+
+<Story of={_CSSVariablesStories.Default} />

src/docs/guide/DesignSystem/_CSSVariables.stories.js

@@ -0,0 +1,11 @@
+import CssVariables from './_CSSVariables.vue';
+
+export default {
+	title: 'DocsHelpers/CSS Variables',
+	component: CssVariables,
+};
+
+export const Default = () => ({
+	components: {CssVariables},
+	template: '<CssVariables />',
+});

src/docs/guide/DesignSystem/_CSSVariables.vue

@@ -0,0 +1,77 @@
+<template>
+	<table class="min-w-full divide-y divide-light">
+		<tr class="">
+			<th class="text-left rtl:text-right">Variable</th>
+			<th class="px-2 text-left rtl:text-right">Value</th>
+		</tr>
+		<tr v-for="(variable, index) in cssVariables" :key="index">
+			<td class="whitespace-nowrap rtl:text-right" dir="ltr">
+				{{ variable.name }}
+			</td>
+			<td class="inline-flex p-2">
+				<div
+					v-if="variable.styles"
+					class="h-6 w-6"
+					:style="variable.styles"
+				></div>
+				<span class="px-1" dir="ltr">{{ variable.value }}</span>
+			</td>
+		</tr>
+	</table>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue';
+
+const cssVariables = ref([]);
+
+onMounted(() => {
+	const vars = [];
+
+	for (const sheet of document.styleSheets) {
+		try {
+			for (const rule of sheet.cssRules) {
+				if (rule.style) {
+					let primaryColor;
+					for (let i = 0; i < rule.style.length; i++) {
+						const prop = rule.style[i];
+						if (prop.startsWith('--') && !prop.startsWith('--tw')) {
+							const value = rule.style.getPropertyValue(prop).trim();
+
+							if (prop === '--background-color-primary') {
+								primaryColor = value;
+							}
+							let styles;
+							if (prop.includes('color')) {
+								styles = {
+									backgroundColor: value,
+								};
+							} else if (prop.includes('shadow')) {
+								styles = {
+									boxShadow: value,
+									borderRadius: '1px',
+								};
+							} else if (prop.includes('radius')) {
+								styles = {
+									backgroundColor: primaryColor,
+									borderRadius: value,
+								};
+							}
+
+							vars.push({
+								name: prop,
+								value,
+								styles,
+							});
+						}
+					}
+				}
+			}
+		} catch (error) {
+			console.warn('Cannot get all the stylesheets on the page.', error);
+		}
+	}
+
+	cssVariables.value = vars;
+});
+</script>

src/styles/_global.less

@@ -31,4 +31,3 @@
 @import 'variables';
 @import 'helpers';
 @import 'elements/screen-reader';
-@import (css) 'style.css';