Skip to content

Commit 15b79cf

Browse files
blesildaramirezblesildaramirez
committed
pkp/pkp-lib#10850 Define css variables used for tailwind config
1 parent bae8ad5 commit 15b79cf

File tree

3 files changed

+194
-94
lines changed

3 files changed

+194
-94
lines changed

‎src/styles/_global.less

+1
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@
3131
@import 'variables';
3232
@import 'helpers';
3333
@import 'elements/screen-reader';
34+
@import (css) 'style.css';

‎src/styles/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
:root {
2+
--background-color-default: #eaedee;
3+
--background-color-secondary: #ffffff;
4+
--background-color-tertiary: rgba(234, 237, 238, 0.3);
5+
--background-color-blur: rgba(0, 0, 0, 0.5);
6+
--background-color-selection-light: #d5e9f2;
7+
--background-color-selection-dark: #002c40;
8+
--background-color-disabled: rgba(28, 27, 31, 0.1);
9+
10+
--text-color-default: #222222;
11+
--text-color-secondary: #505050;
12+
--text-color-heading: #01354f;
13+
--text-color-disabled: #4e4f4f;
14+
--text-color-on-dark: #ffffff;
15+
16+
--border-color-dark: #696969;
17+
--border-color-light: #bbbbbb;
18+
--border-color-form-fields: #777777;
19+
20+
--radius: 4px;
21+
--radius-full: 9999px;
22+
23+
--shadow: 0 0 4px rgba(0, 0, 0, 0.5);
24+
25+
--color-primary: #006798;
26+
--color-hover: #0082bf;
27+
--color-attention: #d00a0a;
28+
--color-success: #00b24e;
29+
--color-negative: #d00a6c;
30+
--color-stage-desk-review: #9b6ff8;
31+
--color-stage-in-review: #e08914;
32+
--color-stage-copyediting: #f66aaf;
33+
--color-stage-production: #4ac7e2;
34+
--color-stage-scheduled-for-publishing: #ded15d;
35+
--color-stage-incomplete-submission: #777777;
36+
--color-stage-published: #00b24e;
37+
--color-stage-declined: #d00a0a;
38+
--color-profile-1: #ab7d94;
39+
--color-profile-2: #598d70;
40+
--color-profile-3: #9b7cdc;
41+
--color-profile-4: #89aae0;
42+
--color-profile-5: #ebda68;
43+
--color-profile-6: #bd726c;
44+
--color-transparent: transparent;
45+
46+
--font-sans: 'Noto Sans', ui-sans-serif, system-ui, sans-serif,
47+
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
48+
49+
--text-xs-normal: 0.625rem;
50+
--text-xs-normal--line-height: 0.75rem;
51+
--text-xs-normal--font-weight: 400;
52+
--text-sm-light: 0.6875rem;
53+
--text-sm-light--line-height: 0.875rem;
54+
--text-sm-light--font-weight: 300;
55+
--text-sm-normal: 0.6875rem;
56+
--text-sm-normal--line-height: 0.875rem;
57+
--text-sm-normal--font-weight: 400;
58+
--text-base-light: 0.75rem;
59+
--text-base-light--line-height: 1rem;
60+
--text-base-light--font-weight: 300;
61+
--text-base-normal: 0.75rem;
62+
--text-base-normal--line-height: 1rem;
63+
--text-base-normal--font-weight: 400;
64+
--text-base-bold: 0.75rem;
65+
--text-base-bold--line-height: 1rem;
66+
--text-base-bold--font-weight: 700;
67+
--text-lg-normal: 0.875rem;
68+
--text-lg-normal--line-height: 1.25rem;
69+
--text-lg-normal--font-weight: 400;
70+
--text-lg-medium: 0.875rem;
71+
--text-lg-medium--line-height: 1.25rem;
72+
--text-lg-medium--font-weight: 500;
73+
--text-lg-semibold: 0.875rem;
74+
--text-lg-semibold--line-height: 1.25rem;
75+
--text-lg-semibold--font-weight: 600;
76+
--text-lg-bold: 0.875rem;
77+
--text-lg-bold--line-height: 1.25rem;
78+
--text-lg-bold--font-weight: 700;
79+
--text-xl-bold: 1rem;
80+
--text-xl-bold--line-height: 1.5rem;
81+
--text-xl-bold--font-weight: 700;
82+
--text-2xl-bold: 1.125rem;
83+
--text-2xl-bold--line-height: 1.75rem;
84+
--text-2xl-bold--font-weight: 700;
85+
--text-3xl-normal: 1.25rem;
86+
--text-3xl-normal--line-height: 1.75rem;
87+
--text-3xl-normal--font-weight: 400;
88+
--text-3xl-medium: 1.25rem;
89+
--text-3xl-medium--line-height: 1.75rem;
90+
--text-3xl-medium--font-weight: 500;
91+
--text-3xl-bold: 1.25rem;
92+
--text-3xl-bold--line-height: 1.75rem;
93+
--text-3xl-bold--font-weight: 700;
94+
--text-4xl-bold: 1.5rem;
95+
--text-4xl-bold--line-height: 2rem;
96+
--text-4xl-bold--font-weight: 700;
97+
--text-5xl-bold: 2.25rem;
98+
--text-5xl-bold--line-height: 2.5rem;
99+
--text-5xl-bold--font-weight: 700;
100+
}

‎tailwind.config.js

+93-94
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
/** @type {import('tailwindcss').Config} */
22

3-
import defaultTheme from 'tailwindcss/defaultTheme.js';
4-
53
const colors = {
6-
primary: '#006798',
7-
hover: '#0082BF',
8-
attention: '#D00A0A',
9-
success: '#00B24E',
10-
negative: '#D00A6C',
11-
'stage-desk-review': '#9B6FF8',
12-
'stage-in-review': '#E08914',
13-
'stage-in-internal-review': '#42427F',
14-
'stage-copyediting': '#F66AAF',
15-
'stage-production': '#4AC7E2',
16-
'stage-scheduled-for-publishing': '#DED15D',
17-
'stage-incomplete-submission': '#777777',
18-
'stage-published': '#00B24E',
19-
'stage-declined': '#D00A0A',
20-
'profile-1': '#AB7D94',
21-
'profile-2': '#598D70',
22-
'profile-3': '#9B7CDC',
23-
'profile-4': '#89AAE0',
24-
'profile-5': '#EBDA68',
25-
'profile-6': '#BD726C',
26-
transparent: 'transparent',
4+
primary: 'var(--color-primary)',
5+
hover: 'var(--color-hover)',
6+
attention: 'var(--color-attention)',
7+
success: 'var(--color-success)',
8+
negative: 'var(--color-negative)',
9+
'stage-desk-review': 'var(--color-stage-desk-review)',
10+
'stage-in-review': 'var(--color-stage-in-review)',
11+
'stage-in-internal-review': 'var(--color-stage-in-internal-review)',
12+
'stage-copyediting': 'var(--color-stage-copyediting)',
13+
'stage-production': 'var(--color-stage-production)',
14+
'stage-scheduled-for-publishing':
15+
'var(--color-stage-scheduled-for-publishing)',
16+
'stage-incomplete-submission': 'var(--color-stage-incomplete-submission)',
17+
'stage-published': 'var(--color-stage-published)',
18+
'stage-declined': 'var(--color-stage-declined)',
19+
'profile-1': 'var(--color-profile-1)',
20+
'profile-2': 'var(--color-profile-2)',
21+
'profile-3': 'var(--color-profile-3)',
22+
'profile-4': 'var(--color-profile-4)',
23+
'profile-5': 'var(--color-profile-5)',
24+
'profile-6': 'var(--color-profile-6)',
25+
transparent: 'var(--color-transparent)',
2726
};
2827

2928
export default {
@@ -37,161 +36,161 @@ export default {
3736
theme: {
3837
backgroundColor: {
3938
...colors,
40-
default: '#EAEDEE',
41-
secondary: '#FFFFFF',
42-
tertiary: 'rgba(234, 237, 238, 0.3)',
43-
blur: 'rgba(0,0,0,0.5)',
44-
'selection-light': '#D5E9F2',
45-
'selection-dark': '#002C40',
46-
disabled: 'rgba(28, 27, 31, 0.1)',
39+
default: 'var(--background-color-default)',
40+
secondary: 'var(--background-color-secondary)',
41+
tertiary: 'var(--background-color-tertiary)',
42+
blur: 'var(--background-color-blur)',
43+
'selection-light': 'var(--background-color-selection-light)',
44+
'selection-dark': 'var(--background-color-selection-dark)',
45+
disabled: 'var(--background-color-disabled)',
4746
},
4847
textColor: {
4948
...colors,
50-
default: '#222222',
51-
secondary: '#505050',
52-
heading: '#01354F',
53-
disabled: '#4E4F4F',
54-
'on-dark': '#FFFFFF',
49+
default: 'var(--text-color-default)',
50+
secondary: 'var(--text-color-secondary)',
51+
heading: 'var(--text-color-heading)',
52+
disabled: 'var(--text-color-disabled)',
53+
'on-dark': 'var(--text-color-on-dark)',
5554
},
5655
borderColor: {
5756
...colors,
58-
dark: '#696969',
59-
light: '#BBBBBB',
60-
'form-fields': '#777777',
61-
transparent: 'transparent',
57+
dark: 'var(--border-color-dark)',
58+
light: 'var(--border-color-light)',
59+
'form-fields': 'var(--border-color-form-fields)',
60+
transparent: 'var(--border-color-transparent)',
6261
},
6362
borderRadius: {
64-
DEFAULT: '4px',
65-
full: '9999px',
63+
DEFAULT: 'var(--radius)',
64+
full: 'var(--radius-full)',
6665
},
6766
boxShadow: {
68-
DEFAULT: '0 0 4px rgba(0, 0, 0, 0.5);',
67+
DEFAULT: 'var(--shadow)',
6968
},
7069
colors: {
7170
...colors,
7271
},
7372
fontFamily: {
7473
// this sets default font
75-
sans: ['"Noto Sans"', ...defaultTheme.fontFamily.sans],
74+
sans: 'var(--font-sans)',
7675
},
7776
fontSize: {
7877
'xs-normal': [
79-
'0.625rem' /** 10px */,
78+
'var(--text-xs-normal)' /** 10px */,
8079
{
81-
lineHeight: '0.75rem',
82-
fontWeight: '400',
80+
lineHeight: 'var(--text-xs-normal--line-height)',
81+
fontWeight: 'var(--text-xs-normal--font-weight)',
8382
},
8483
],
8584
'sm-light': [
86-
'0.6875rem' /** 11px */,
85+
'var(--text-sm-light)' /** 11px */,
8786
{
88-
lineHeight: '0.875rem',
89-
fontWeight: '300',
87+
lineHeight: 'var(--text-sm-light--line-height)',
88+
fontWeight: 'var(--text-sm-light--font-weight)',
9089
},
9190
],
9291
'sm-normal': [
93-
'0.6875rem' /** 11px */,
92+
'var(--text-sm-normal)' /** 11px */,
9493
{
95-
lineHeight: '0.875rem',
96-
fontWeight: '400',
94+
lineHeight: 'var(--text-sm-normal--line-height)',
95+
fontWeight: 'var(--text-sm-normal-font-weight)',
9796
},
9897
],
9998
'base-light': [
100-
'0.75rem' /** 12px */,
99+
'var(--text-base-light)' /** 12px */,
101100
{
102-
lineHeight: '1rem',
103-
fontWeight: '300',
101+
lineHeight: 'var(--text-base-light--line-height)',
102+
fontWeight: 'var(--text-base-light--font-weight)',
104103
},
105104
],
106105
'base-normal': [
107-
'0.75rem' /** 12px */,
106+
'var(--text-base-normal)' /** 12px */,
108107
{
109-
lineHeight: '1rem',
110-
fontWeight: '400',
108+
lineHeight: 'var(--text-base-normal--line-height)',
109+
fontWeight: 'var(--text-base-normal--font-weight)',
111110
},
112111
],
113112
'base-bold': [
114-
'0.75rem' /** 12px */,
113+
'var(--text-base-bold)' /** 12px */,
115114
{
116-
lineHeight: '1rem',
117-
fontWeight: '700',
115+
lineHeight: 'var(--text-base-bold--line-height)',
116+
fontWeight: 'var(--text-base-bold--font-weight)',
118117
},
119118
],
120119
'lg-normal': [
121-
'0.875rem' /** 14px */,
120+
'var(--text-lg-normal)' /** 14px */,
122121
{
123-
lineHeight: '1.25rem',
124-
fontWeight: '400',
122+
lineHeight: 'var(--text-lg-normal--line-height)',
123+
fontWeight: 'var(--text-lg-normal--font-weight)',
125124
},
126125
],
127126
'lg-medium': [
128-
'0.875rem' /** 14px */,
127+
'var(--text-lg-medium)' /** 14px */,
129128
{
130-
lineHeight: '1.25rem',
131-
fontWeight: '500',
129+
lineHeight: 'var(--text-lg-medium--line-height)',
130+
fontWeight: 'var(--text-lg-medium--font-weight)',
132131
},
133132
],
134133
'lg-semibold': [
135-
'0.875rem' /** 14px */,
134+
'var(--text-lg-semibold)' /** 14px */,
136135
{
137-
lineHeight: '1.25rem',
138-
fontWeight: '600',
136+
lineHeight: 'var(--text-lg-semibold--line-height)',
137+
fontWeight: 'var(--text-lg-semibold--font-weight)',
139138
},
140139
],
141140
'lg-bold': [
142-
'0.875rem' /** 14px */,
141+
'var(--text-lg-bold)' /** 14px */,
143142
{
144-
lineHeight: '1.25rem',
145-
fontWeight: '700',
143+
lineHeight: 'var(--text-lg-bold--line-height)',
144+
fontWeight: 'var(--text-lg-bold--font-weight)',
146145
},
147146
],
148147
'xl-bold': [
149-
'1rem' /** 16px */,
148+
'var(--text-xl-bold)' /** 16px */,
150149
{
151-
lineHeight: '1.5rem',
152-
fontWeight: '700',
150+
lineHeight: 'var(--text-xl-bold--line-height)',
151+
fontWeight: 'var(--text-xl-bold--font-weight)',
153152
},
154153
],
155154
'2xl-bold': [
156-
'1.125rem' /** 18px */,
155+
'var(--text-2xl-bold)' /** 18px */,
157156
{
158-
lineHeight: '1.75rem',
159-
fontWeight: '700',
157+
lineHeight: 'var(--text-2xl-bold--line-height)',
158+
fontWeight: 'var(--text-2xl-bold--font-weight)',
160159
},
161160
],
162161
'3xl-normal': [
163-
'1.25rem' /** 20px */,
162+
'var(--text-3xl-normal)' /** 20px */,
164163
{
165-
lineHeight: '1.75rem',
166-
fontWeight: '400',
164+
lineHeight: 'var(--text-3xl-normal--line-height)',
165+
fontWeight: 'var(--text-3xl-normal--font-weight)',
167166
},
168167
],
169168
'3xl-medium': [
170-
'1.25rem' /** 20px */,
169+
'var(--text-3xl-medium)' /** 20px */,
171170
{
172-
lineHeight: '1.75rem',
173-
fontWeight: '500',
171+
lineHeight: 'var(--text-3xl-medium--line-height)',
172+
fontWeight: 'var(--text-3xl-medium--font-weight)',
174173
},
175174
],
176175
'3xl-bold': [
177-
'1.25rem' /** 20px */,
176+
'var(--text-3xl-bold)' /** 20px */,
178177
{
179-
lineHeight: '1.75rem',
180-
fontWeight: '700',
178+
lineHeight: 'var(--text-3xl-bold--line-height)',
179+
fontWeight: 'var(--text-3xl-bold--font-weight)',
181180
},
182181
],
183182
'4xl-bold': [
184-
'1.5rem' /** 24px */,
183+
'var(--text-4xl-bold)' /** 24px */,
185184
{
186-
lineHeight: '2rem',
187-
fontWeight: '700',
185+
lineHeight: 'var(--text-4xl-bold--line-height)',
186+
fontWeight: 'var(--text-4xl-bold--font-weight)',
188187
},
189188
],
190189
'5xl-bold': [
191-
'2.25rem' /** 36px */,
190+
'var(--text-5xl-bold)' /** 36px */,
192191
{
193-
lineHeight: '2.5rem',
194-
fontWeight: '700',
192+
lineHeight: 'var(--text-5xl-bold--line-height)',
193+
fontWeight: 'var(--text-5xl-bold--font-weight)',
195194
},
196195
],
197196
},

0 commit comments

Comments
 (0)