Skip to content

Commit 0c5f061

Browse files
dpellierdpellier
committed
refactor(themes): setup new base tokens to build around
1 parent 5ee000e commit 0c5f061

File tree

1 file changed

+223
-0
lines changed

1 file changed

+223
-0
lines changed

‎packages/themes/src/default/index.scss‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,229 @@
55
@layer ods-quarks, ods-atoms, ods-molecules, ods-organisms;
66

77
:root {
8+
// TODO
9+
// -add z-indexes
10+
// - expose here the base we use
11+
// - expose each component z-index on its own
12+
// - update SCSS var to new notation (ex: $ods-color-background-disabled-default) + keep previous as deprecated + update usage in this file
13+
--ods-theme-background-color: #fff;
14+
--ods-theme-text-color: #{var.$ods-color-text};
15+
--ods-theme-heading-text-color: #{var.$ods-color-heading}; // TODO see select multiple merge text
16+
--ods-theme-background-color-selected: #{var.$ods-color-element-background-selected}; // TODO see pagination selected page button
17+
--ods-theme-border-color-selected: #{var.$ods-color-element-background-selected}; // TODO see pagination selected page button
18+
// --ods-theme-background-color-hover: #???; // TODO needed?
19+
// --ods-theme-background-color-active: #???; // TODO needed?
20+
--ods-theme-backdrop-background-color: #{var.$ods-color-primary-500};
21+
--ods-theme-backdrop-opacity: 0;
22+
--ods-theme-background-color-disabled: #{var.$ods-color-background-disabled-default};
23+
--ods-theme-border-color-disabled: #{var.$ods-color-border-disabled-default};
24+
--ods-theme-text-color-disabled: #{var.$ods-color-text-disabled-default};
25+
--ods-theme-background-color-readonly: #{var.$ods-color-background-readonly-default};
26+
--ods-theme-border-color-readonly: #{var.$ods-color-border-readonly-default};
27+
--ods-theme-outline-color: #{var.$ods-outline-color-default};
28+
--ods-theme-outline-offset: #{var.$ods-outline-offset};
29+
--ods-theme-outline-style: #{var.$ods-outline-style-default};
30+
--ods-theme-outline-width: #{var.$ods-outline-width};
31+
--ods-theme-border-radius: 8px;
32+
--ods-theme-border-width: 2px;
33+
--ods-theme-padding-horizontal: 8px;
34+
--ods-theme-padding-vertical: 8px;
35+
36+
// Critical
37+
--ods-theme-background-color-critical: #{var.$ods-color-critical-500};
38+
--ods-theme-background-color-critical-hover: #{var.$ods-color-critical-700};
39+
--ods-theme-background-color-critical-active: #{var.$ods-color-critical-800};
40+
--ods-theme-border-color-critical: #{var.$ods-color-critical-500};
41+
--ods-theme-border-color-critical-hover: #{var.$ods-color-critical-700};
42+
--ods-theme-border-color-critical-active: #{var.$ods-color-critical-800};
43+
--ods-theme-text-color-critical: #{var.$ods-color-critical-000};
44+
--ods-theme-text-color-critical-hover: #{var.$ods-color-critical-000};
45+
--ods-theme-text-color-critical-active: #{var.$ods-color-critical-000};
46+
--ods-theme-background-color-critical-ghost: inherit;
47+
--ods-theme-background-color-critical-ghost-hover: #{var.$ods-color-critical-100};
48+
--ods-theme-background-color-critical-ghost-active: #{var.$ods-color-critical-200};
49+
--ods-theme-border-color-critical-ghost: unset;
50+
--ods-theme-border-color-critical-ghost-hover: unset;
51+
--ods-theme-border-color-critical-ghost-active: unset;
52+
--ods-theme-text-color-critical-ghost: #{var.$ods-color-critical-500};
53+
--ods-theme-text-color-critical-ghost-hover: #{var.$ods-color-critical-700};
54+
--ods-theme-text-color-critical-ghost-active: #{var.$ods-color-critical-800};
55+
--ods-theme-background-color-critical-outline: #{var.$ods-color-critical-000};
56+
--ods-theme-background-color-critical-outline-hover: #{var.$ods-color-critical-100};
57+
--ods-theme-background-color-critical-outline-active: #{var.$ods-color-critical-200};
58+
--ods-theme-border-color-critical-outline: #{var.$ods-color-critical-500};
59+
--ods-theme-border-color-critical-outline-hover: #{var.$ods-color-critical-700};
60+
--ods-theme-border-color-critical-outline-active: #{var.$ods-color-critical-800};
61+
--ods-theme-text-color-critical-outline: #{var.$ods-color-critical-500};
62+
--ods-theme-text-color-critical-outline-hover: #{var.$ods-color-critical-700};
63+
--ods-theme-text-color-critical-outline-active: #{var.$ods-color-critical-800};
64+
65+
// Information (TODO use a dedicated information color palette)
66+
--ods-theme-background-color-information: #{var.$ods-color-information-100};
67+
--ods-theme-background-color-information-hover: #{var.$ods-color-information-200};
68+
--ods-theme-background-color-information-active: #{var.$ods-color-information-300};
69+
--ods-theme-border-color-information: #{var.$ods-color-information-100};
70+
--ods-theme-border-color-information-hover: #{var.$ods-color-information-200};
71+
--ods-theme-border-color-information-active: #{var.$ods-color-information-300};
72+
--ods-theme-text-color-information: #{var.$ods-color-information-700};
73+
--ods-theme-text-color-information-hover: #{var.$ods-color-information-700};
74+
--ods-theme-text-color-information-active: #{var.$ods-color-information-700};
75+
--ods-theme-background-color-information-ghost: inherit;
76+
--ods-theme-background-color-information-ghost-hover: #{var.$ods-color-information-100};
77+
--ods-theme-background-color-information-ghost-active: #{var.$ods-color-information-200};
78+
--ods-theme-border-color-information-ghost: unset;
79+
--ods-theme-border-color-information-ghost-hover: unset;
80+
--ods-theme-border-color-information-ghost-active: unset;
81+
--ods-theme-text-color-information-ghost: #{var.$ods-color-information-500};
82+
--ods-theme-text-color-information-ghost-hover: #{var.$ods-color-information-700};
83+
--ods-theme-text-color-information-ghost-active: #{var.$ods-color-information-800};
84+
--ods-theme-background-color-information-outline: #{var.$ods-color-information-000};
85+
--ods-theme-background-color-information-outline-hover: #{var.$ods-color-information-100};
86+
--ods-theme-background-color-information-outline-active: #{var.$ods-color-information-200};
87+
--ods-theme-border-color-information-outline: #{var.$ods-color-information-500};
88+
--ods-theme-border-color-information-outline-hover: #{var.$ods-color-information-700};
89+
--ods-theme-border-color-information-outline-active: #{var.$ods-color-information-800};
90+
--ods-theme-text-color-information-outline: #{var.$ods-color-information-500};
91+
--ods-theme-text-color-information-outline-hover: #{var.$ods-color-information-700};
92+
--ods-theme-text-color-information-outline-active: #{var.$ods-color-information-800};
93+
94+
// Neutral
95+
--ods-theme-background-color-neutral: #{var.$ods-color-neutral-600};
96+
--ods-theme-background-color-neutral-hover: #{var.$ods-color-neutral-700};
97+
--ods-theme-background-color-neutral-active: #{var.$ods-color-neutral-800};
98+
--ods-theme-border-color-neutral: #{var.$ods-color-neutral-600};
99+
--ods-theme-border-color-neutral-hover: #{var.$ods-color-neutral-700};
100+
--ods-theme-border-color-neutral-active: #{var.$ods-color-neutral-800};
101+
--ods-theme-text-color-neutral: #{var.$ods-color-neutral-000};
102+
--ods-theme-text-color-neutral-hover: #{var.$ods-color-neutral-000};
103+
--ods-theme-text-color-neutral-active: #{var.$ods-color-neutral-000};
104+
--ods-theme-background-color-neutral-ghost: inherit;
105+
--ods-theme-background-color-neutral-ghost-hover: #{var.$ods-color-neutral-100};
106+
--ods-theme-background-color-neutral-ghost-active: #{var.$ods-color-neutral-200};
107+
--ods-theme-border-color-neutral-ghost: unset;
108+
--ods-theme-border-color-neutral-ghost-hover: unset;
109+
--ods-theme-border-color-neutral-ghost-active: unset;
110+
--ods-theme-text-color-neutral-ghost: #{var.$ods-color-neutral-600};
111+
--ods-theme-text-color-neutral-ghost-hover: #{var.$ods-color-neutral-700};
112+
--ods-theme-text-color-neutral-ghost-active: #{var.$ods-color-neutral-800};
113+
--ods-theme-background-color-neutral-outline: #{var.$ods-color-neutral-000};
114+
--ods-theme-background-color-neutral-outline-hover: #{var.$ods-color-neutral-100};
115+
--ods-theme-background-color-neutral-outline-active: #{var.$ods-color-neutral-200};
116+
--ods-theme-border-color-neutral-outline: #{var.$ods-color-neutral-600};
117+
--ods-theme-border-color-neutral-outline-hover: #{var.$ods-color-neutral-700};
118+
--ods-theme-border-color-neutral-outline-active: #{var.$ods-color-neutral-800};
119+
--ods-theme-text-color-neutral-outline: #{var.$ods-color-neutral-600};
120+
--ods-theme-text-color-neutral-outline-hover: #{var.$ods-color-neutral-700};
121+
--ods-theme-text-color-neutral-outline-active: #{var.$ods-color-neutral-800};
122+
123+
// Primary
124+
--ods-theme-background-color-primary: #{var.$ods-color-primary-500};
125+
--ods-theme-background-color-primary-hover: #{var.$ods-color-primary-700};
126+
--ods-theme-background-color-primary-active: #{var.$ods-color-primary-800};
127+
--ods-theme-border-color-primary: #{var.$ods-color-primary-500};
128+
--ods-theme-border-color-primary-hover: #{var.$ods-color-primary-700};
129+
--ods-theme-border-color-primary-active: #{var.$ods-color-primary-800};
130+
--ods-theme-text-color-primary: #{var.$ods-color-primary-000};
131+
--ods-theme-text-color-primary-hover: #{var.$ods-color-primary-000};
132+
--ods-theme-text-color-primary-active: #{var.$ods-color-primary-000};
133+
--ods-theme-background-color-primary-ghost: inherit;
134+
--ods-theme-background-color-primary-ghost-hover: #{var.$ods-color-primary-100};
135+
--ods-theme-background-color-primary-ghost-active: #{var.$ods-color-primary-200};
136+
--ods-theme-border-color-primary-ghost: unset;
137+
--ods-theme-border-color-primary-ghost-hover: unset;
138+
--ods-theme-border-color-primary-ghost-active: unset;
139+
--ods-theme-text-color-primary-ghost: #{var.$ods-color-primary-500};
140+
--ods-theme-text-color-primary-ghost-hover: #{var.$ods-color-primary-700};
141+
--ods-theme-text-color-primary-ghost-active: #{var.$ods-color-primary-800};
142+
--ods-theme-background-color-primary-outline: #{var.$ods-color-primary-000};
143+
--ods-theme-background-color-primary-outline-hover: #{var.$ods-color-primary-100};
144+
--ods-theme-background-color-primary-outline-active: #{var.$ods-color-primary-200};
145+
--ods-theme-border-color-primary-outline: #{var.$ods-color-primary-500};
146+
--ods-theme-border-color-primary-outline-hover: #{var.$ods-color-primary-700};
147+
--ods-theme-border-color-primary-outline-active: #{var.$ods-color-primary-800};
148+
--ods-theme-text-color-primary-outline: #{var.$ods-color-primary-500};
149+
--ods-theme-text-color-primary-outline-hover: #{var.$ods-color-primary-700};
150+
--ods-theme-text-color-primary-outline-active: #{var.$ods-color-primary-800};
151+
152+
// Success
153+
--ods-theme-background-color-success: #{var.$ods-color-success-500};
154+
--ods-theme-background-color-success-hover: #{var.$ods-color-success-700};
155+
--ods-theme-background-color-success-active: #{var.$ods-color-success-800};
156+
--ods-theme-border-color-success: #{var.$ods-color-success-500};
157+
--ods-theme-border-color-success-hover: #{var.$ods-color-success-700};
158+
--ods-theme-border-color-success-active: #{var.$ods-color-success-800};
159+
--ods-theme-text-color-success: #{var.$ods-color-success-000};
160+
--ods-theme-text-color-success-hover: #{var.$ods-color-success-000};
161+
--ods-theme-text-color-success-active: #{var.$ods-color-success-000};
162+
--ods-theme-background-color-success-ghost: inherit;
163+
--ods-theme-background-color-success-ghost-hover: #{var.$ods-color-success-100};
164+
--ods-theme-background-color-success-ghost-active: #{var.$ods-color-success-200};
165+
--ods-theme-border-color-success-ghost: unset;
166+
--ods-theme-border-color-success-ghost-hover: unset;
167+
--ods-theme-border-color-success-ghost-active: unset;
168+
--ods-theme-text-color-success-ghost: #{var.$ods-color-success-500};
169+
--ods-theme-text-color-success-ghost-hover: #{var.$ods-color-success-700};
170+
--ods-theme-text-color-success-ghost-active: #{var.$ods-color-success-800};
171+
--ods-theme-background-color-success-outline: #{var.$ods-color-success-000};
172+
--ods-theme-background-color-success-outline-hover: #{var.$ods-color-success-100};
173+
--ods-theme-background-color-success-outline-active: #{var.$ods-color-success-200};
174+
--ods-theme-border-color-success-outline: #{var.$ods-color-success-500};
175+
--ods-theme-border-color-success-outline-hover: #{var.$ods-color-success-700};
176+
--ods-theme-border-color-success-outline-active: #{var.$ods-color-success-800};
177+
--ods-theme-text-color-success-outline: #{var.$ods-color-success-500};
178+
--ods-theme-text-color-success-outline-hover: #{var.$ods-color-success-700};
179+
--ods-theme-text-color-success-outline-active: #{var.$ods-color-success-800};
180+
181+
// Warning
182+
--ods-theme-background-color-warning: #{var.$ods-color-warning-400};
183+
--ods-theme-background-color-warning-hover: #{var.$ods-color-warning-500};
184+
--ods-theme-background-color-warning-active: #{var.$ods-color-warning-600};
185+
--ods-theme-border-color-warning: #{var.$ods-color-warning-400};
186+
--ods-theme-border-color-warning-hover: #{var.$ods-color-warning-500};
187+
--ods-theme-border-color-warning-active: #{var.$ods-color-warning-600};
188+
--ods-theme-text-color-warning: #{var.$ods-color-warning-900};
189+
--ods-theme-text-color-warning-hover: #{var.$ods-color-warning-900};
190+
--ods-theme-text-color-warning-active: #{var.$ods-color-warning-900};
191+
--ods-theme-background-color-warning-ghost: inherit;
192+
--ods-theme-background-color-warning-ghost-hover: #{var.$ods-color-warning-100};
193+
--ods-theme-background-color-warning-ghost-active: #{var.$ods-color-warning-200};
194+
--ods-theme-border-color-warning-ghost: unset;
195+
--ods-theme-border-color-warning-ghost-hover: unset;
196+
--ods-theme-border-color-warning-ghost-active: unset;
197+
--ods-theme-text-color-warning-ghost: #{var.$ods-color-warning-700};
198+
--ods-theme-text-color-warning-ghost-hover: #{var.$ods-color-warning-800};
199+
--ods-theme-text-color-warning-ghost-active: #{var.$ods-color-warning-900};
200+
--ods-theme-background-color-warning-outline: #{var.$ods-color-warning-000};
201+
--ods-theme-background-color-warning-outline-hover: #{var.$ods-color-warning-100};
202+
--ods-theme-background-color-warning-outline-active: #{var.$ods-color-warning-200};
203+
--ods-theme-border-color-warning-outline: #{var.$ods-color-warning-700};
204+
--ods-theme-border-color-warning-outline-hover: #{var.$ods-color-warning-800};
205+
--ods-theme-border-color-warning-outline-active: #{var.$ods-color-warning-900};
206+
--ods-theme-text-color-warning-outline: #{var.$ods-color-warning-700};
207+
--ods-theme-text-color-warning-outline-hover: #{var.$ods-color-warning-800};
208+
--ods-theme-text-color-warning-outline-active: #{var.$ods-color-warning-900};
209+
210+
// Form elements
211+
--ods-theme-input-border-color: #{var.$ods-color-form-element-border-default};;
212+
--ods-theme-input-border-color-hover: #{var.$ods-color-form-element-border-hover-default};
213+
--ods-theme-input-border-color-invalid: #{var.$ods-color-form-element-border-critical};;
214+
// --ods-theme-input-background-color-invalid: #fff; // TODO needed?
215+
// --ods-theme-input-text-color-invalid: #fff; // TODO needed?
216+
--ods-theme-input-border-radius: calc(var(--ods-theme-border-radius) / 2);
217+
--ods-theme-input-border-width: calc(var(--ods-theme-border-width) / 2);
218+
--ods-theme-input-height: #{var.$ods-form-element-input-height};
219+
--ods-theme-input-padding-horizontal: calc(var(--ods-theme-padding-horizontal) / 2);
220+
--ods-theme-input-padding-vertical: var(--ods-theme-padding-vertical);
221+
// --ods-theme-input-text-color: #fff; // TODO needed?
222+
--ods-theme-input-text-color-checked: var(--ods-theme-background-color);
223+
--ods-theme-input-placeholder-text-color: #{var.$ods-color-form-element-text-placeholder-default};
224+
--ods-theme-input-background-color-checked: #{var.$ods-color-primary-500};
225+
--ods-theme-input-border-color-checked: #{var.$ods-color-primary-500};
226+
--ods-theme-input-overlay-item-background-color-hover: #{var.$ods-color-primary-100};
227+
--ods-theme-input-overlay-item-background-color-selected: #{var.$ods-color-primary-050};
228+
--ods-theme-input-overlay-item-background-color-selected-hover: #{var.$ods-color-primary-100};
229+
230+
// Deprecated
8231
--ods-border-radius-xs: #{var.$ods-border-radius-xs};
9232
--ods-border-radius-sm: #{var.$ods-border-radius-sm};
10233
--ods-border-radius-md: #{var.$ods-border-radius-md};

0 commit comments

Comments
 (0)