Skip to content

Commit bb71759

Browse files
blesildaramirezblesildaramirez
committed
pkp/pkp-lib#10850 Rename css file for tailwind theme css variables
1 parent ccbb2cb commit bb71759

File tree

4 files changed

+155
-155
lines changed

4 files changed

+155
-155
lines changed

‎.storybook/preview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import VueScrollTo from 'vue-scrollto';
2929

3030
import '../src/styles/_import.less';
3131
import '../src/styles/_global.less';
32-
import '../src/styles/style.css';
32+
import '../src/styles/tw-theme-vars.css';
3333
import {allModes} from './modes';
3434
import {initialize, mswLoader} from 'msw-storybook-addon';
3535

‎src/docs/guide/DesignSystem/_CSSVariables.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as _CSSVariablesStories from './_CSSVariables.stories.js';
33

44
<Meta title="Guide/Style/CSS Variables" />
55

6-
# Css Variables
6+
# CSS Variables
77

88
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.
99

‎src/styles/style.css

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

‎src/styles/tw-theme-vars.css

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

0 commit comments

Comments
 (0)