Skip to content

Commit bfa3d23

Browse files
blesildaramirezblesildaramirez
committed
pkp/pkp-lib#10850 Remove reference of tailwind.config.js file in story displays for color and fonts
1 parent 9b7e1f0 commit bfa3d23

File tree

4 files changed

+94
-86
lines changed

4 files changed

+94
-86
lines changed

‎src/docs/guide/DesignSystem/ColorsDisplay.stories.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import ColorsDisplay from './ColorsDisplay.vue';
2-
import TailwindConfig from '../../../../tailwind.config.js';
32
export default {
43
title: 'DocsHelpers/ColorsDisplay',
54
component: ColorsDisplay,
@@ -91,29 +90,29 @@ const ColorBorderUsedIn = {
9190
export const Common = {
9291
args: {
9392
colorUsedIn: ColorUsedIn,
94-
colorDefinition: TailwindConfig.theme.colors,
93+
colorDefinition: 'common',
9594
},
9695
};
9796

9897
export const Text = {
9998
args: {
10099
displayAs: 'text',
101100
colorUsedIn: ColorTextUsedIn,
102-
colorDefinition: TailwindConfig.theme.textColor,
101+
colorDefinition: 'text',
103102
},
104103
};
105104

106105
export const Background = {
107106
args: {
108107
colorUsedIn: ColorBackgroundUsedIn,
109-
colorDefinition: TailwindConfig.theme.backgroundColor,
108+
colorDefinition: 'background',
110109
},
111110
};
112111

113112
export const Border = {
114113
args: {
115114
displayAs: 'border',
116115
colorUsedIn: ColorBorderUsedIn,
117-
colorDefinition: TailwindConfig.theme.borderColor,
116+
colorDefinition: 'border',
118117
},
119118
};

‎src/docs/guide/DesignSystem/ColorsDisplay.vue

+55-44
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<table class="min-w-full divide-y divide-light">
2+
<table class="divide-light min-w-full divide-y">
33
<tr>
44
<th class="text-left">Colour</th>
55
<th class="px-2 text-left">Class name</th>
@@ -22,9 +22,9 @@
2222

2323
<!-- First column -->
2424

25-
<td class="whitespace-nowrap px-2">{{ color.className }}</td>
25+
<td class="px-2 whitespace-nowrap">{{ color.className }}</td>
2626
<td class="px-2">{{ color.value }}</td>
27-
<td class="whitespace-pre-line px-2">
27+
<td class="px-2 whitespace-pre-line">
2828
{{ color.usedIn }}
2929
</td>
3030
</tr>
@@ -47,46 +47,57 @@ const {colorUsedIn, colorDefinition, displayAs} = defineProps({
4747
colorDefinition: Object,
4848
});
4949
// needs to be explicitely listed to force tailwind to include them in css
50-
[
51-
// common ones
52-
'bg-primary',
53-
'bg-hover',
54-
'bg-attention',
55-
'bg-success',
56-
'bg-negative',
57-
'bg-stage-desk-review',
58-
'bg-stage-in-review',
59-
'bg-stage-copyediting',
60-
'bg-stage-production',
61-
'bg-stage-scheduled-for-publishing',
62-
'bg-stage-incomplete-submission',
63-
'bg-stage-published',
64-
'bg-stage-declined',
65-
'bg-profile-1',
66-
'bg-profile-2',
67-
'bg-profile-3',
68-
'bg-profile-4',
69-
'bg-profile-5',
70-
'bg-profile-6',
71-
'bg-transparent',
72-
// text specific
73-
'text-default',
74-
'text-secondary',
75-
'text-on-dark',
76-
'text-heading',
77-
'text-disabled',
78-
// bg specific
79-
'bg-default',
80-
'bg-secondary',
81-
'bg-tertiary',
82-
'bg-blur',
83-
'bg-selection-light',
84-
'bg-selection-dark',
85-
'bg-disabled',
86-
// border specific
87-
'border-light',
88-
'border-dark',
89-
];
50+
const colorDefinitions = {
51+
common: [
52+
// common ones
53+
'bg-red-950',
54+
'bg-primary',
55+
'bg-hover',
56+
'bg-attention',
57+
'bg-success',
58+
'bg-negative',
59+
'bg-stage-desk-review',
60+
'bg-stage-in-review',
61+
'bg-stage-copyediting',
62+
'bg-stage-production',
63+
'bg-stage-scheduled-for-publishing',
64+
'bg-stage-incomplete-submission',
65+
'bg-stage-published',
66+
'bg-stage-declined',
67+
'bg-profile-1',
68+
'bg-profile-2',
69+
'bg-profile-3',
70+
'bg-profile-4',
71+
'bg-profile-5',
72+
'bg-profile-6',
73+
'bg-transparent',
74+
],
75+
text: [
76+
// text specific
77+
'text-default',
78+
'text-secondary',
79+
'text-on-dark',
80+
'text-heading',
81+
'text-disabled',
82+
],
83+
background: [
84+
// bg specific
85+
'bg-default',
86+
'bg-secondary',
87+
'bg-tertiary',
88+
'bg-blur',
89+
'bg-selection-light',
90+
'bg-selection-dark',
91+
'bg-disabled',
92+
],
93+
border: [
94+
// border specific
95+
'border-light',
96+
'border-dark',
97+
],
98+
};
99+
100+
const colorDefinitionObj = colorDefinitions[colorDefinition];
90101
91102
const colors = Object.keys(colorUsedIn).map((className) => {
92103
let classNameToApply = `bg-${className}`;
@@ -102,7 +113,7 @@ const colors = Object.keys(colorUsedIn).map((className) => {
102113
return {
103114
className: classNameToApply,
104115
classNameToApply,
105-
value: colorDefinition[className],
116+
value: colorDefinitionObj[className],
106117
usedIn: colorUsedIn[className].trim(),
107118
};
108119
});

‎src/docs/guide/DesignSystem/FontsDisplay.vue

+34-32
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<tr
1111
v-for="font in fonts"
1212
:key="font.className"
13-
:class="font.separator ? 'border-t border-light' : ''"
13+
:class="font.separator ? 'border-light border-t' : ''"
1414
>
1515
<td :class="font.className">{{ sampleText }}</td>
1616
<td>{{ font.className }}</td>
@@ -22,48 +22,50 @@
2222
</template>
2323

2424
<script setup>
25-
import TailwindConfig from '../../../../tailwind.config.js';
26-
2725
// needs to be explicitely listed to force tailwind to include them in css
28-
[
29-
[
30-
[
31-
'text-xs-normal',
32-
'text-sm-light',
33-
'text-sm-normal',
34-
'text-base-light',
35-
'text-base-normal',
36-
'text-base-bold',
37-
'text-lg-normal',
38-
'text-lg-medium',
39-
'text-lg-semibold',
40-
'text-lg-bold',
41-
'text-xl-bold',
42-
'text-2xl-bold',
43-
'text-3xl-normal',
44-
'text-3xl-medium',
45-
'text-3xl-bold',
46-
'text-4xl-bold',
47-
'text-5xl-bold',
48-
],
49-
],
26+
const fontSizeDefinitions = [
27+
'text-xs-normal',
28+
'text-sm-light',
29+
'text-sm-normal',
30+
'text-base-light',
31+
'text-base-normal',
32+
'text-base-bold',
33+
'text-lg-normal',
34+
'text-lg-medium',
35+
'text-lg-semibold',
36+
'text-lg-bold',
37+
'text-xl-bold',
38+
'text-2xl-bold',
39+
'text-3xl-normal',
40+
'text-3xl-medium',
41+
'text-3xl-bold',
42+
'text-4xl-bold',
43+
'text-5xl-bold',
5044
];
5145
const sampleText = 'Lorem ipsum dolor sit amet';
52-
const fontSizesObject = TailwindConfig.theme.fontSize;
46+
47+
const _getComputedStyleValue = (cssVar) => {
48+
return getComputedStyle(document.documentElement)
49+
.getPropertyValue(cssVar)
50+
.trim();
51+
};
5352
5453
let prevSizeRem = null;
55-
console.log(
56-
JSON.stringify(Object.keys(fontSizesObject).map((key) => `text-${key}`)),
57-
);
58-
const fonts = Object.keys(fontSizesObject).map((className, i) => {
59-
const fontSizeValues = fontSizesObject[className];
54+
const fonts = fontSizeDefinitions.map((className, i) => {
55+
const fontSizeValues = [
56+
_getComputedStyleValue(`--${className}`),
57+
{
58+
lineHeight: _getComputedStyleValue(`--${className}--line-height`),
59+
fontWeight: _getComputedStyleValue(`--${className}--font-weight`),
60+
},
61+
];
6062
6163
const sizeRem = fontSizeValues[0];
6264
6365
const showDividerBetweenSizes = prevSizeRem != sizeRem;
6466
prevSizeRem = sizeRem;
6567
return {
66-
className: 'text-' + className,
68+
className,
6769
sizePx: `${parseFloat(sizeRem) * 16}px`,
6870
fontWeight: fontSizeValues[1].fontWeight,
6971
lineHeight: `${parseFloat(fontSizeValues[1].lineHeight) * 16}px`,

‎src/styles/_global.less

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// disabled for now as its different normalisation than existing one
22

3-
@tailwind base;
4-
@reference '../../tailwind.css';
3+
@import 'tailwindcss';
54

65
/*
76
Apply some styles for backward-compatibility as tailwind by
@@ -26,9 +25,6 @@
2625
}
2726
}
2827

29-
@tailwind components;
30-
@tailwind utilities;
31-
3228
@import 'variables';
3329
@import 'helpers';
3430
@import 'elements/screen-reader';

0 commit comments

Comments
 (0)