Skip to content

Commit 296b2e8

Browse files
dagfrodedagfrode
committed
feat(ffe-core): nye semantiske farger.
BREAKING CHANGE: nye farger. Ingen ting å gjøre hvis man ikke har justert fargene.
1 parent 7cc4c96 commit 296b2e8

File tree

6 files changed

+53
-148
lines changed

6 files changed

+53
-148
lines changed

‎packages/ffe-core/less/body.less

+2-13
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
// Sets default body color, font styles and background color for light and dark themes
22
.ffe-body {
3-
--color: var(--ffe-g-text-color);
4-
--background-color: var(--ffe-farge-hvit);
5-
6-
background-color: var(--background-color);
7-
color: var(--color);
8-
9-
&.regard-color-scheme-preference {
10-
@media (prefers-color-scheme: dark) {
11-
--color: var(--ffe-farge-lysgraa);
12-
--background-color: var(--ffe-farge-svart);
13-
}
14-
}
15-
3+
background-color: var(--ffe-color-foreground-default);
4+
color: var(--ffe-color-background-default);
165
font-family: var(--ffe-g-font);
176
font-variant-numeric: tabular-nums;
187

‎packages/ffe-core/less/colors-deprecated.less

-59
This file was deleted.

‎packages/ffe-core/less/colors.less

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// ======== Ny visuell identitet ========
33
//
44

5+
/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
56
// Primærpalett
67
@ffe-farge-fjell: #002776;
78
@ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);

‎packages/ffe-core/less/theme.less

+24-29
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
/**
44
* These variables are intended to support theming of components. Override any value to create your own look and feel.
55
*/
6-
76
:root,
87
:host {
8+
/* DEPRICATED, bruk colors-semantic i stedet for */
9+
910
/** Primærpalett */
1011
--ffe-farge-fjell: @ffe-farge-fjell;
1112
--ffe-farge-fjell-70: @ffe-farge-fjell-70;
@@ -61,6 +62,8 @@
6162
--ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
6263
--ffe-farge-hvit: @ffe-farge-hvit;
6364

65+
/* END depricated */
66+
6467
/** Font sizes */
6568
--ffe-fontsize-body-text: 1rem;
6669
--ffe-fontsize-small-text: 0.875rem;
@@ -125,18 +128,18 @@
125128
/** Theme base colors */
126129

127130
/* Links, buttons and similar */
128-
--ffe-g-primary-color: var(--ffe-farge-vann);
131+
--ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
129132

130133
/* Headings, labels, hover, etc */
131-
--ffe-g-secondary-color: var(--ffe-farge-fjell);
134+
--ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
132135

133136
/* Error messages, invalid inputs, etc */
134-
--ffe-g-error-color: var(--ffe-farge-baer);
137+
--ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
135138

136139
/** Theme borders */
137140

138141
/* Form element borders */
139-
--ffe-g-border-color: var(--ffe-farge-varmgraa);
142+
--ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
140143
--ffe-g-border-radius: 8px;
141144
--ffe-g-border-radius-lg: 16px;
142145
--ffe-g-border-width: 1px;
@@ -162,34 +165,26 @@
162165
/** Typography */
163166

164167
/* Default body text color */
165-
--ffe-g-text-color: var(--ffe-farge-svart);
168+
--ffe-g-text-color: var(--ffe-color-foreground-default);
166169

167170
/* Lead paragraph */
168-
--ffe-g-lead-color: var(--ffe-farge-fjell);
171+
--ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
169172

170173
/* Headings */
171-
--ffe-g-heading-color: var(--ffe-farge-fjell);
174+
--ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
172175

173176
/* Links */
174-
--ffe-g-link-color: var(--ffe-farge-vann);
175-
--ffe-g-link-color-hover: var(--ffe-farge-fjell);
176-
--ffe-g-link-color-visited: var(--ffe-farge-lyng);
177-
--ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
178-
--ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
179-
180-
@media (prefers-color-scheme: dark) {
181-
.regard-color-scheme-preference {
182-
--ffe-g-primary-color: var(--ffe-farge-vann-70);
183-
--ffe-g-secondary-color: var(--ffe-farge-vann-70);
184-
--ffe-g-border-color: var(--ffe-farge-graa);
185-
--ffe-g-text-color: var(--ffe-farge-lysgraa);
186-
--ffe-g-lead-color: var(--ffe-farge-vann-70);
187-
--ffe-g-heading-color: var(--ffe-farge-vann-70);
188-
--ffe-g-link-color: var(--ffe-farge-vann-70);
189-
--ffe-g-link-color-hover: var(--ffe-farge-vann-30);
190-
--ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
191-
--ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
192-
--ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
193-
}
194-
}
177+
--ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
178+
--ffe-g-link-color-hover: var(
179+
--ffe-color-foreground-interactive-link-hover
180+
);
181+
--ffe-g-link-color-visited: var(
182+
--ffe-color-foreground-interactive-link-pressed
183+
);
184+
--ffe-g-link-icon-color-hover: var(
185+
--ffe-color-foreground-interactive-link-hover
186+
);
187+
--ffe-g-link-icon-color-focus: var(
188+
--ffe-color-foreground-interactive-link-pressed
189+
);
195190
}

‎packages/ffe-core/less/typography.less

+26-46
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import 'breakpoints';
2-
@import 'colors';
32

43
.ffe-h1 {
54
line-height: 2.25rem;
@@ -33,7 +32,7 @@
3332

3433
.ffe-small-text,
3534
.ffe-micro-text {
36-
color: var(--ffe-g-text-color);
35+
color: var(--ffe-color-foreground-default);
3736
font-family: var(--ffe-g-font);
3837
font-weight: normal;
3938
font-variant-numeric: tabular-nums;
@@ -59,15 +58,15 @@
5958
.ffe-h4,
6059
.ffe-h5,
6160
.ffe-h6 {
62-
color: var(--ffe-g-heading-color);
61+
color: var(--ffe-color-foreground-emphasis);
6362
font-weight: normal;
6463
margin-bottom: var(--ffe-spacing-xs);
6564
margin-top: 0;
6665
text-wrap: balance;
6766
overflow-wrap: anywhere;
6867

6968
&--error {
70-
color: var(--ffe-g-error-color);
69+
color: var(--ffe-color-foreground-feedback-critical);
7170
}
7271

7372
&--inline {
@@ -79,13 +78,8 @@
7978
}
8079

8180
&--with-border {
82-
border-bottom: 1px solid var(--ffe-farge-lysgraa);
81+
border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
8382
padding-bottom: var(--ffe-spacing-xs);
84-
.regard-color-scheme-preference & {
85-
@media (prefers-color-scheme: dark) {
86-
border-color: var(--ffe-farge-graa);
87-
}
88-
}
8983
}
9084

9185
&--no-underline {
@@ -111,7 +105,7 @@
111105
}
112106

113107
.ffe-body-text {
114-
color: var(--ffe-g-text-color);
108+
color: var(--ffe-color-foreground-default);
115109
font-family: var(--ffe-g-font);
116110
font-variant-numeric: tabular-nums;
117111
line-height: 1.5rem;
@@ -124,7 +118,7 @@
124118
margin-bottom: 1em;
125119
margin-top: 0;
126120
line-height: 1.5rem;
127-
color: var(--ffe-g-text-color);
121+
color: var(--ffe-color-foreground-default);
128122
text-wrap: pretty;
129123

130124
&--text-center {
@@ -150,20 +144,20 @@
150144
}
151145

152146
.ffe-lead-paragraph {
153-
color: var(--ffe-g-lead-color);
147+
color: var(--ffe-color-foreground-emphasis);
154148
line-height: 1.5rem;
155149
font-size: var(--ffe-fontsize-lead-paragraph);
156150
}
157151

158152
.ffe-sub-lead-paragraph {
159-
color: var(--ffe-g-text-color);
153+
color: var(--ffe-color-foreground-default);
160154
line-height: 1.5rem;
161155
font-size: var(--ffe-fontsize-sub-lead-paragraph);
162156
}
163157

164158
.ffe-link-text {
165-
border-bottom: 1px solid var(--ffe-g-link-color);
166-
color: var(--ffe-g-link-color);
159+
border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
160+
color: var(--ffe-color-foreground-interactive-link);
167161
cursor: pointer;
168162
text-decoration: none;
169163
word-wrap: break-all;
@@ -172,15 +166,15 @@
172166

173167
@media (hover: hover) and (pointer: fine) {
174168
&:hover {
175-
border-bottom-color: var(--ffe-g-link-color-hover);
176-
color: var(--ffe-g-link-color-hover);
169+
border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
170+
color: var(--ffe-color-foreground-interactive-link-hover);
177171
text-decoration: none;
178172
}
179173
}
180174

181175
&:visited {
182-
border-bottom-color: var(--ffe-g-link-color-visited);
183-
color: var(--ffe-g-link-color-visited);
176+
border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
177+
color: var(--ffe-color-foreground-interactive-link-pressed);
184178
text-decoration: none;
185179
}
186180

@@ -189,24 +183,17 @@
189183
}
190184

191185
&:focus {
192-
border-color: var(--ffe-farge-hvit);
193-
color: var(--ffe-farge-hvit);
186+
border-color: var(--ffe-color-foreground-interactive-link-pressed);
187+
color: var(--ffe-color-foreground-interactive-link-pressed);
194188
border-radius: 1px;
195-
background-color: var(--ffe-g-link-color);
196-
box-shadow: 0 0 0 2px var(--ffe-g-link-color);
189+
background-color: var(--ffe-color-foreground-interactive-link);
190+
box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
197191
outline: none;
198-
199-
.regard-color-scheme-preference & {
200-
@media (prefers-color-scheme: dark) {
201-
border-color: var(--ffe-farge-svart) !important;
202-
color: var(--ffe-farge-svart) !important;
203-
}
204-
}
205192
}
206193
}
207194

208195
.ffe-link-icon {
209-
fill: var(--ffe-g-link-color);
196+
fill: var(--ffe-color-foreground-interactive-link);
210197
display: inline-flex;
211198
border-radius: 1.5rem;
212199
border: 2px solid transparent;
@@ -215,30 +202,26 @@
215202

216203
@media (hover: hover) and (pointer: fine) {
217204
&:hover {
218-
fill: var(--ffe-g-link-icon-color-hover);
205+
fill: var(--ffe-color-foreground-interactive-link-hover);
219206
}
220207
}
221208

222209
&:focus {
223-
box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
210+
box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
224211
}
225212
}
226213

227214
.ffe-divider-line {
228215
border: none;
229-
border-bottom: solid 1px var(--ffe-farge-lysgraa);
216+
border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
230217
padding-top: 1px;
231218
padding-bottom: 1px;
232219
width: 100%;
233-
.regard-color-scheme-preference & {
234-
@media (prefers-color-scheme: dark) {
235-
border-color: var(--ffe-farge-graa);
236-
}
237-
}
238220
}
239221

240222
.ffe-strong-text {
241223
font-family: var(--ffe-g-font-strong);
224+
color: var(--ffe-color-foreground-default);
242225
font-variant-numeric: tabular-nums;
243226
font-weight: normal;
244227
}
@@ -248,18 +231,15 @@
248231
font-variant-numeric: tabular-nums;
249232
font-weight: normal;
250233
font-style: normal;
234+
color: var(--ffe-color-foreground-default);
251235
}
252236

253237
.ffe-pre-text {
254-
background-color: var(--ffe-farge-sand-70);
238+
background-color: var(--ffe-color-background-subtle);
239+
color: var(--ffe-color-foreground-default);
255240
font-family: consolas, menlo, monaco, monospace;
256241
margin: 0;
257242
text-align: left;
258-
.regard-color-scheme-preference & {
259-
@media (prefers-color-scheme: dark) {
260-
background-color: var(--ffe-farge-koksgraa);
261-
}
262-
}
263243
}
264244

265245
.ffe-inline-separator {

‎packages/ffe-core/tokens.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ module.exports = {
22
sources: [
33
'less/breakpoints.less',
44
'less/colors.less',
5-
'less/colors-deprecated.less',
65
'less/dimensions.less',
76
'less/motion.less',
87
'less/spacing.less',

0 commit comments

Comments
 (0)