pkp/pkp-lib#10850 Remove reference of tailwind.config.js file in stor…

…y displays for color and fonts
blesildaramirez · Feb 12, 2025 · 295b0a4 · 295b0a4
1 parent ca2631e
commit 295b0a4
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 84 deletions.
diff --git a/src/docs/guide/DesignSystem/ColorsDisplay.stories.js b/src/docs/guide/DesignSystem/ColorsDisplay.stories.js
@@ -1,5 +1,4 @@
 import ColorsDisplay from './ColorsDisplay.vue';
-import TailwindConfig from '../../../../tailwind.config.js';
 export default {
 	title: 'DocsHelpers/ColorsDisplay',
 	component: ColorsDisplay,
@@ -91,29 +90,29 @@ const ColorBorderUsedIn = {
 export const Common = {
 	args: {
 		colorUsedIn: ColorUsedIn,
-		colorDefinition: TailwindConfig.theme.colors,
+		colorDefinition: 'common',
 	},
 };
 
 export const Text = {
 	args: {
 		displayAs: 'text',
 		colorUsedIn: ColorTextUsedIn,
-		colorDefinition: TailwindConfig.theme.textColor,
+		colorDefinition: 'text',
 	},
 };
 
 export const Background = {
 	args: {
 		colorUsedIn: ColorBackgroundUsedIn,
-		colorDefinition: TailwindConfig.theme.backgroundColor,
+		colorDefinition: 'background',
 	},
 };
 
 export const Border = {
 	args: {
 		displayAs: 'border',
 		colorUsedIn: ColorBorderUsedIn,
-		colorDefinition: TailwindConfig.theme.borderColor,
+		colorDefinition: 'border',
 	},
 };
diff --git a/src/docs/guide/DesignSystem/ColorsDisplay.vue b/src/docs/guide/DesignSystem/ColorsDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-	<table class="min-w-full divide-y divide-light">
+	<table class="divide-light min-w-full divide-y">
 		<tr>
 			<th class="text-left">Colour</th>
 			<th class="px-2 text-left">Class name</th>
@@ -22,9 +22,9 @@
 
 			<!-- First column -->
 
-			<td class="whitespace-nowrap px-2">{{ color.className }}</td>
+			<td class="px-2 whitespace-nowrap">{{ color.className }}</td>
 			<td class="px-2">{{ color.value }}</td>
-			<td class="whitespace-pre-line px-2">
+			<td class="px-2 whitespace-pre-line">
 				{{ color.usedIn }}
 			</td>
 		</tr>
@@ -47,46 +47,57 @@ const {colorUsedIn, colorDefinition, displayAs} = defineProps({
 	colorDefinition: Object,
 });
 // needs to be explicitely listed to force tailwind to include them in css
-[
-	// common ones
-	'bg-primary',
-	'bg-hover',
-	'bg-attention',
-	'bg-success',
-	'bg-negative',
-	'bg-stage-desk-review',
-	'bg-stage-in-review',
-	'bg-stage-copyediting',
-	'bg-stage-production',
-	'bg-stage-scheduled-for-publishing',
-	'bg-stage-incomplete-submission',
-	'bg-stage-published',
-	'bg-stage-declined',
-	'bg-profile-1',
-	'bg-profile-2',
-	'bg-profile-3',
-	'bg-profile-4',
-	'bg-profile-5',
-	'bg-profile-6',
-	'bg-transparent',
-	// text specific
-	'text-default',
-	'text-secondary',
-	'text-on-dark',
-	'text-heading',
-	'text-disabled',
-	// bg specific
-	'bg-default',
-	'bg-secondary',
-	'bg-tertiary',
-	'bg-blur',
-	'bg-selection-light',
-	'bg-selection-dark',
-	'bg-disabled',
-	// border specific
-	'border-light',
-	'border-dark',
-];
+const colorDefinitions = {
+	common: [
+		// common ones
+		'bg-red-950',
+		'bg-primary',
+		'bg-hover',
+		'bg-attention',
+		'bg-success',
+		'bg-negative',
+		'bg-stage-desk-review',
+		'bg-stage-in-review',
+		'bg-stage-copyediting',
+		'bg-stage-production',
+		'bg-stage-scheduled-for-publishing',
+		'bg-stage-incomplete-submission',
+		'bg-stage-published',
+		'bg-stage-declined',
+		'bg-profile-1',
+		'bg-profile-2',
+		'bg-profile-3',
+		'bg-profile-4',
+		'bg-profile-5',
+		'bg-profile-6',
+		'bg-transparent',
+	],
+	text: [
+		// text specific
+		'text-default',
+		'text-secondary',
+		'text-on-dark',
+		'text-heading',
+		'text-disabled',
+	],
+	background: [
+		// bg specific
+		'bg-default',
+		'bg-secondary',
+		'bg-tertiary',
+		'bg-blur',
+		'bg-selection-light',
+		'bg-selection-dark',
+		'bg-disabled',
+	],
+	border: [
+		// border specific
+		'border-light',
+		'border-dark',
+	],
+};
+
+const colorDefinitionObj = colorDefinitions[colorDefinition];
 
 const colors = Object.keys(colorUsedIn).map((className) => {
 	let classNameToApply = `bg-${className}`;
@@ -102,7 +113,7 @@ const colors = Object.keys(colorUsedIn).map((className) => {
 	return {
 		className: classNameToApply,
 		classNameToApply,
-		value: colorDefinition[className],
+		value: colorDefinitionObj[className],
 		usedIn: colorUsedIn[className].trim(),
 	};
 });

diff --git a/src/docs/guide/DesignSystem/FontsDisplay.vue b/src/docs/guide/DesignSystem/FontsDisplay.vue
@@ -10,7 +10,7 @@
 		<tr
 			v-for="font in fonts"
 			:key="font.className"
-			:class="font.separator ? 'border-t border-light' : ''"
+			:class="font.separator ? 'border-light border-t' : ''"
 		>
 			<td :class="font.className">{{ sampleText }}</td>
 			<td>{{ font.className }}</td>
@@ -22,48 +22,50 @@
 </template>
 
 <script setup>
-import TailwindConfig from '../../../../tailwind.config.js';
-
 // needs to be explicitely listed to force tailwind to include them in css
-[
-	[
-		[
-			'text-xs-normal',
-			'text-sm-light',
-			'text-sm-normal',
-			'text-base-light',
-			'text-base-normal',
-			'text-base-bold',
-			'text-lg-normal',
-			'text-lg-medium',
-			'text-lg-semibold',
-			'text-lg-bold',
-			'text-xl-bold',
-			'text-2xl-bold',
-			'text-3xl-normal',
-			'text-3xl-medium',
-			'text-3xl-bold',
-			'text-4xl-bold',
-			'text-5xl-bold',
-		],
-	],
+const fontSizeDefinitions = [
+	'text-xs-normal',
+	'text-sm-light',
+	'text-sm-normal',
+	'text-base-light',
+	'text-base-normal',
+	'text-base-bold',
+	'text-lg-normal',
+	'text-lg-medium',
+	'text-lg-semibold',
+	'text-lg-bold',
+	'text-xl-bold',
+	'text-2xl-bold',
+	'text-3xl-normal',
+	'text-3xl-medium',
+	'text-3xl-bold',
+	'text-4xl-bold',
+	'text-5xl-bold',
 ];
 const sampleText = 'Lorem ipsum dolor sit amet';
-const fontSizesObject = TailwindConfig.theme.fontSize;
+
+const _getComputedStyleValue = (cssVar) => {
+	return getComputedStyle(document.documentElement)
+		.getPropertyValue(cssVar)
+		.trim();
+};
 
 let prevSizeRem = null;
-console.log(
-	JSON.stringify(Object.keys(fontSizesObject).map((key) => `text-${key}`)),
-);
-const fonts = Object.keys(fontSizesObject).map((className, i) => {
-	const fontSizeValues = fontSizesObject[className];
+const fonts = fontSizeDefinitions.map((className, i) => {
+	const fontSizeValues = [
+		_getComputedStyleValue(`--${className}`),
+		{
+			lineHeight: _getComputedStyleValue(`--${className}--line-height`),
+			fontWeight: _getComputedStyleValue(`--${className}--font-weight`),
+		},
+	];
 
 	const sizeRem = fontSizeValues[0];
 
 	const showDividerBetweenSizes = prevSizeRem != sizeRem;
 	prevSizeRem = sizeRem;
 	return {
-		className: 'text-' + className,
+		className,
 		sizePx: `${parseFloat(sizeRem) * 16}px`,
 		fontWeight: fontSizeValues[1].fontWeight,
 		lineHeight: `${parseFloat(fontSizeValues[1].lineHeight) * 16}px`,

diff --git a/src/styles/_global.less b/src/styles/_global.less
@@ -23,9 +23,6 @@
 	}
 }
 
-@tailwind components;
-@tailwind utilities;
-
 @import 'variables';
 @import 'helpers';
 @import 'elements/screen-reader';