pkp/pkp#10850 Update style guide pages that use css variables from ta…

…ilwind config

src/docs/guide/DesignSystem/ColorsDisplay.vue

@@ -2,7 +2,8 @@
 	<table class="min-w-full divide-y divide-light">
 		<tr>
 			<th class="text-left">Colour</th>
-			<th class="px-2 text-left">Class name</th>
+			<th class="px-2 text-left">Class Name</th>
+			<th class="px-2 text-left">CSS Variable Name</th>
 			<th class="px-2 text-left">Value</th>
 			<th class="px-2 text-left">Used In</th>
 		</tr>
@@ -23,6 +24,7 @@
 			<!-- First column -->
 
 			<td class="whitespace-nowrap px-2">{{ color.className }}</td>
+			<td class="px-2">{{ color.cssVar }}</td>
 			<td class="px-2">{{ color.value }}</td>
 			<td class="whitespace-pre-line px-2">
 				{{ color.usedIn }}
@@ -99,10 +101,14 @@ const colors = Object.keys(colorUsedIn).map((className) => {
 	} else if (displayAs === 'border') {
 		classNameToApply = `border-${className}`;
 	}
+	const cssVar = colorDefinition[className].replace(/^var\((.+)\)$/, '$1');
 	return {
 		className: classNameToApply,
 		classNameToApply,
-		value: colorDefinition[className],
+		value: getComputedStyle(document.documentElement)
+			.getPropertyValue(cssVar)
+			.trim(),
+		cssVar,
 		usedIn: colorUsedIn[className].trim(),
 	};
 });

src/docs/guide/DesignSystem/Fonts.mdx

@@ -8,6 +8,8 @@ import * as ColorsDisplayStories from './ColorsDisplay.stories.js';
 
 Some usage example can be checked [here](https://docs.google.com/spreadsheets/d/1S-gJUSw_hZyiANiKitxP_XOVgQPAgIa-PBSJNZFWPjE) for now. Later the examples will become part of the storybook.
 
+Click on the class name to get the CSS variable names for the font-size, font-weight and line height.
+
 <Story of={FontsDisplayStories.Default} />
 
 <br />

src/docs/guide/DesignSystem/FontsDisplay.vue

@@ -2,7 +2,7 @@
 	<table class="min-w-full">
 		<tr>
 			<th class="text-left">Sample text</th>
-			<th class="text-left">Class name</th>
+			<th class="text-left">Class Name</th>
 			<th class="text-left">Size (px)</th>
 			<th class="text-left">Weight</th>
 			<th class="text-left">Line Height</th>
@@ -13,7 +13,46 @@
 			:class="font.separator ? 'border-t border-light' : ''"
 		>
 			<td :class="font.className">{{ sampleText }}</td>
-			<td>{{ font.className }}</td>
+			<td>
+				<Popover>
+					<template #button>
+						<span style="font-weight: 400">{{ font.className }}</span>
+					</template>
+					<div>
+						<strong>{{ font.className }}</strong>
+						<br />
+						<table
+							class="border-gray-300 mt-1 w-full border-collapse border text-left"
+						>
+							<tbody>
+								<tr>
+									<td colspan="2" class="py-1 text-center font-semibold">
+										CSS Variable Names
+									</td>
+								</tr>
+								<tr>
+									<td class="border-gray-300 border px-2 py-1">Size</td>
+									<td class="border-gray-300 border px-2 py-1">
+										<i>{{ font.cssVar }}</i>
+									</td>
+								</tr>
+								<tr>
+									<td class="border-gray-300 border px-2 py-1">Font Weight</td>
+									<td class="border-gray-300 border px-2 py-1">
+										<i>{{ font.fwCssVar }}</i>
+									</td>
+								</tr>
+								<tr>
+									<td class="border-gray-300 border px-2 py-1">Line Height</td>
+									<td class="border-gray-300 border px-2 py-1">
+										<i>{{ font.lhCssVar }}</i>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</Popover>
+			</td>
 			<td>{{ font.sizePx }}</td>
 			<td>{{ font.fontWeight }}</td>
 			<td>{{ font.lineHeight }}</td>
@@ -23,6 +62,7 @@
 
 <script setup>
 import TailwindConfig from '../../../../tailwind.config.js';
+import Popover from '@/components/Popover/Popover.vue';
 
 // needs to be explicitely listed to force tailwind to include them in css
 [
@@ -52,22 +92,31 @@ const sampleText = 'Lorem ipsum dolor sit amet';
 const fontSizesObject = TailwindConfig.theme.fontSize;
 
 let prevSizeRem = null;
-console.log(
-	JSON.stringify(Object.keys(fontSizesObject).map((key) => `text-${key}`)),
-);
+
+const _getComputedStyleValue = (cssVar) => {
+	return getComputedStyle(document.documentElement)
+		.getPropertyValue(cssVar)
+		.trim();
+};
 const fonts = Object.keys(fontSizesObject).map((className, i) => {
 	const fontSizeValues = fontSizesObject[className];
+	const cssVar = fontSizeValues[0].replace(/^var\((.+)\)$/, '$1');
+	const fwCssVar = fontSizeValues[1].fontWeight.replace(/^var\((.+)\)$/, '$1');
+	const lhCssVar = fontSizeValues[1].lineHeight.replace(/^var\((.+)\)$/, '$1');
 
-	const sizeRem = fontSizeValues[0];
+	const sizeRem = _getComputedStyleValue(cssVar);
 
 	const showDividerBetweenSizes = prevSizeRem != sizeRem;
 	prevSizeRem = sizeRem;
 	return {
 		className: 'text-' + className,
 		sizePx: `${parseFloat(sizeRem) * 16}px`,
-		fontWeight: fontSizeValues[1].fontWeight,
-		lineHeight: `${parseFloat(fontSizeValues[1].lineHeight) * 16}px`,
+		fontWeight: _getComputedStyleValue(fwCssVar),
+		lineHeight: `${parseFloat(_getComputedStyleValue(lhCssVar)) * 16}px`,
 		separator: showDividerBetweenSizes,
+		cssVar,
+		fwCssVar,
+		lhCssVar,
 	};
 });
 </script>

src/docs/guide/DesignSystem/Radius.mdx

@@ -5,6 +5,6 @@ import * as RadiusDisplayStories from './RadiusDisplay.stories.js';
 
 # Radius
 
-Only one default radius is available. More might come later if necessary. Just use class `rounded`.
+Only one default radius is available. More might come later if necessary. Just use class `rounded`. The CSS variable for `border-radius` is `--radius`.
 
 <Story of={RadiusDisplayStories.Default} />

src/docs/guide/DesignSystem/Shadows.mdx

@@ -5,6 +5,6 @@ import * as ShadowDisplayStories from './ShadowDisplay.stories.js';
 
 # Shadows
 
-To keep shadows consistent, we are starting just with one shadow and one radius. More might come later. Just use class `shadow`.
+To keep shadows consistent, we are starting just with one shadow and one radius. More might come later. Just use class `shadow`. The CSS variable for `box-shadow` is `--shadow`.
 
 <Story of={ShadowDisplayStories.Default} />