Skip to content

Commit e4d3d0f

Browse files
committed
build digdir theme
1 parent cc7e37b commit e4d3d0f

1 file changed

Lines changed: 128 additions & 152 deletions

File tree

internal/digdir/themes/digdir.css

Lines changed: 128 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -107,22 +107,6 @@ design-tokens: v1.15.0
107107
--ds-color-accent-base-active: #003d75;
108108
--ds-color-accent-base-contrast-subtle: #dbe9f5;
109109
--ds-color-accent-base-contrast-default: #ffffff;
110-
--ds-color-neutral-background-default: #ffffff;
111-
--ds-color-neutral-background-tinted: #f3f4f4;
112-
--ds-color-neutral-surface-default: #ffffff;
113-
--ds-color-neutral-surface-tinted: #e7e9ea;
114-
--ds-color-neutral-surface-hover: #d8dadd;
115-
--ds-color-neutral-surface-active: #c7cacf;
116-
--ds-color-neutral-border-subtle: #b8bcc1;
117-
--ds-color-neutral-border-default: #717a84;
118-
--ds-color-neutral-border-strong: #545e6b;
119-
--ds-color-neutral-text-subtle: #545e6b;
120-
--ds-color-neutral-text-default: #1f2c3d;
121-
--ds-color-neutral-base-default: #1E2B3C;
122-
--ds-color-neutral-base-hover: #313d4d;
123-
--ds-color-neutral-base-active: #444f5d;
124-
--ds-color-neutral-base-contrast-subtle: #babec4;
125-
--ds-color-neutral-base-contrast-default: #ffffff;
126110
--ds-color-brand1-background-default: #ffffff;
127111
--ds-color-brand1-background-tinted: #fef0f1;
128112
--ds-color-brand1-surface-default: #ffffff;
@@ -171,6 +155,22 @@ design-tokens: v1.15.0
171155
--ds-color-brand3-base-active: #81c5f9;
172156
--ds-color-brand3-base-contrast-subtle: #010507;
173157
--ds-color-brand3-base-contrast-default: #000000;
158+
--ds-color-neutral-background-default: #ffffff;
159+
--ds-color-neutral-background-tinted: #f3f4f4;
160+
--ds-color-neutral-surface-default: #ffffff;
161+
--ds-color-neutral-surface-tinted: #e7e9ea;
162+
--ds-color-neutral-surface-hover: #d8dadd;
163+
--ds-color-neutral-surface-active: #c7cacf;
164+
--ds-color-neutral-border-subtle: #b8bcc1;
165+
--ds-color-neutral-border-default: #717a84;
166+
--ds-color-neutral-border-strong: #545e6b;
167+
--ds-color-neutral-text-subtle: #545e6b;
168+
--ds-color-neutral-text-default: #1f2c3d;
169+
--ds-color-neutral-base-default: #1E2B3C;
170+
--ds-color-neutral-base-hover: #313d4d;
171+
--ds-color-neutral-base-active: #444f5d;
172+
--ds-color-neutral-base-contrast-subtle: #babec4;
173+
--ds-color-neutral-base-contrast-default: #ffffff;
174174
--ds-color-info-background-default: #ffffff;
175175
--ds-color-info-background-tinted: #edf5fa;
176176
--ds-color-info-surface-default: #ffffff;
@@ -238,6 +238,22 @@ design-tokens: v1.15.0
238238
--ds-color-focus-inner: #ffffff;
239239
--ds-color-focus-outer: #1f2c3d;
240240
--ds-link-color-visited: #663299;
241+
--ds-background-default: #ffffff;
242+
--ds-background-tinted: #eef4fa;
243+
--ds-surface-default: #ffffff;
244+
--ds-surface-tinted: #ddeaf6;
245+
--ds-surface-hover: #c7ddf0;
246+
--ds-surface-active: #afcee9;
247+
--ds-border-subtle: #99c0e3;
248+
--ds-border-default: #2a7cc5;
249+
--ds-border-strong: #005db1;
250+
--ds-text-subtle: #005db1;
251+
--ds-text-default: #002c54;
252+
--ds-base-default: #0062BA;
253+
--ds-base-hover: #004f96;
254+
--ds-base-active: #003d75;
255+
--ds-base-contrast-subtle: #dbe9f5;
256+
--ds-base-contrast-default: #ffffff;
241257

242258
color-scheme: light;
243259
}
@@ -260,22 +276,6 @@ design-tokens: v1.15.0
260276
--ds-color-accent-base-active: #003d75;
261277
--ds-color-accent-base-contrast-subtle: #dbe9f5;
262278
--ds-color-accent-base-contrast-default: #ffffff;
263-
--ds-color-neutral-background-default: #ffffff;
264-
--ds-color-neutral-background-tinted: #f3f4f4;
265-
--ds-color-neutral-surface-default: #ffffff;
266-
--ds-color-neutral-surface-tinted: #e7e9ea;
267-
--ds-color-neutral-surface-hover: #d8dadd;
268-
--ds-color-neutral-surface-active: #c7cacf;
269-
--ds-color-neutral-border-subtle: #b8bcc1;
270-
--ds-color-neutral-border-default: #717a84;
271-
--ds-color-neutral-border-strong: #545e6b;
272-
--ds-color-neutral-text-subtle: #545e6b;
273-
--ds-color-neutral-text-default: #1f2c3d;
274-
--ds-color-neutral-base-default: #1E2B3C;
275-
--ds-color-neutral-base-hover: #313d4d;
276-
--ds-color-neutral-base-active: #444f5d;
277-
--ds-color-neutral-base-contrast-subtle: #babec4;
278-
--ds-color-neutral-base-contrast-default: #ffffff;
279279
--ds-color-brand1-background-default: #ffffff;
280280
--ds-color-brand1-background-tinted: #fef0f1;
281281
--ds-color-brand1-surface-default: #ffffff;
@@ -324,6 +324,22 @@ design-tokens: v1.15.0
324324
--ds-color-brand3-base-active: #81c5f9;
325325
--ds-color-brand3-base-contrast-subtle: #010507;
326326
--ds-color-brand3-base-contrast-default: #000000;
327+
--ds-color-neutral-background-default: #ffffff;
328+
--ds-color-neutral-background-tinted: #f3f4f4;
329+
--ds-color-neutral-surface-default: #ffffff;
330+
--ds-color-neutral-surface-tinted: #e7e9ea;
331+
--ds-color-neutral-surface-hover: #d8dadd;
332+
--ds-color-neutral-surface-active: #c7cacf;
333+
--ds-color-neutral-border-subtle: #b8bcc1;
334+
--ds-color-neutral-border-default: #717a84;
335+
--ds-color-neutral-border-strong: #545e6b;
336+
--ds-color-neutral-text-subtle: #545e6b;
337+
--ds-color-neutral-text-default: #1f2c3d;
338+
--ds-color-neutral-base-default: #1E2B3C;
339+
--ds-color-neutral-base-hover: #313d4d;
340+
--ds-color-neutral-base-active: #444f5d;
341+
--ds-color-neutral-base-contrast-subtle: #babec4;
342+
--ds-color-neutral-base-contrast-default: #ffffff;
327343
--ds-color-info-background-default: #ffffff;
328344
--ds-color-info-background-tinted: #edf5fa;
329345
--ds-color-info-surface-default: #ffffff;
@@ -391,6 +407,22 @@ design-tokens: v1.15.0
391407
--ds-color-focus-inner: #ffffff;
392408
--ds-color-focus-outer: #1f2c3d;
393409
--ds-link-color-visited: #663299;
410+
--ds-background-default: #ffffff;
411+
--ds-background-tinted: #eef4fa;
412+
--ds-surface-default: #ffffff;
413+
--ds-surface-tinted: #ddeaf6;
414+
--ds-surface-hover: #c7ddf0;
415+
--ds-surface-active: #afcee9;
416+
--ds-border-subtle: #99c0e3;
417+
--ds-border-default: #2a7cc5;
418+
--ds-border-strong: #005db1;
419+
--ds-text-subtle: #005db1;
420+
--ds-text-default: #002c54;
421+
--ds-base-default: #0062BA;
422+
--ds-base-hover: #004f96;
423+
--ds-base-active: #003d75;
424+
--ds-base-contrast-subtle: #dbe9f5;
425+
--ds-base-contrast-default: #ffffff;
394426

395427
color-scheme: light;
396428
}
@@ -578,22 +610,6 @@ design-tokens: v1.15.0
578610
--ds-color-accent-base-active: #92bce1;
579611
--ds-color-accent-base-contrast-subtle: #0d1924;
580612
--ds-color-accent-base-contrast-default: #000000;
581-
--ds-color-neutral-background-default: #13181f;
582-
--ds-color-neutral-background-tinted: #192029;
583-
--ds-color-neutral-surface-default: #202834;
584-
--ds-color-neutral-surface-tinted: #262e3a;
585-
--ds-color-neutral-surface-hover: #2e3641;
586-
--ds-color-neutral-surface-active: #3c444e;
587-
--ds-color-neutral-border-subtle: #49515a;
588-
--ds-color-neutral-border-default: #7c8289;
589-
--ds-color-neutral-border-strong: #a4a8ad;
590-
--ds-color-neutral-text-subtle: #a4a8ad;
591-
--ds-color-neutral-text-default: #ebeced;
592-
--ds-color-neutral-base-default: #a6acb2;
593-
--ds-color-neutral-base-hover: #90979f;
594-
--ds-color-neutral-base-active: #7a828c;
595-
--ds-color-neutral-base-contrast-subtle: #1b1c1d;
596-
--ds-color-neutral-base-contrast-default: #000000;
597613
--ds-color-brand1-background-default: #241313;
598614
--ds-color-brand1-background-tinted: #301919;
599615
--ds-color-brand1-surface-default: #3c2020;
@@ -642,6 +658,22 @@ design-tokens: v1.15.0
642658
--ds-color-brand3-base-active: #0b395d;
643659
--ds-color-brand3-base-contrast-subtle: #fbfcfd;
644660
--ds-color-brand3-base-contrast-default: #ffffff;
661+
--ds-color-neutral-background-default: #13181f;
662+
--ds-color-neutral-background-tinted: #192029;
663+
--ds-color-neutral-surface-default: #202834;
664+
--ds-color-neutral-surface-tinted: #262e3a;
665+
--ds-color-neutral-surface-hover: #2e3641;
666+
--ds-color-neutral-surface-active: #3c444e;
667+
--ds-color-neutral-border-subtle: #49515a;
668+
--ds-color-neutral-border-default: #7c8289;
669+
--ds-color-neutral-border-strong: #a4a8ad;
670+
--ds-color-neutral-text-subtle: #a4a8ad;
671+
--ds-color-neutral-text-default: #ebeced;
672+
--ds-color-neutral-base-default: #a6acb2;
673+
--ds-color-neutral-base-hover: #90979f;
674+
--ds-color-neutral-base-active: #7a828c;
675+
--ds-color-neutral-base-contrast-subtle: #1b1c1d;
676+
--ds-color-neutral-base-contrast-default: #000000;
645677
--ds-color-info-background-default: #0d1925;
646678
--ds-color-info-background-tinted: #112130;
647679
--ds-color-info-surface-default: #15293d;
@@ -709,6 +741,22 @@ design-tokens: v1.15.0
709741
--ds-color-focus-inner: #13181f;
710742
--ds-color-focus-outer: #ebeced;
711743
--ds-link-color-visited: #b49acd;
744+
--ds-background-default: #0c1927;
745+
--ds-background-tinted: #102033;
746+
--ds-surface-default: #142941;
747+
--ds-surface-tinted: #172f4b;
748+
--ds-surface-hover: #1a3757;
749+
--ds-surface-active: #21446d;
750+
--ds-border-subtle: #285182;
751+
--ds-border-default: #5a84b4;
752+
--ds-border-strong: #8eaacb;
753+
--ds-text-subtle: #8eaacb;
754+
--ds-text-default: #e7edf4;
755+
--ds-base-default: #4c91cf;
756+
--ds-base-hover: #6fa6d8;
757+
--ds-base-active: #92bce1;
758+
--ds-base-contrast-subtle: #0d1924;
759+
--ds-base-contrast-default: #000000;
712760

713761
color-scheme: dark;
714762
}
@@ -731,22 +779,6 @@ design-tokens: v1.15.0
731779
--ds-color-accent-base-active: #92bce1;
732780
--ds-color-accent-base-contrast-subtle: #0d1924;
733781
--ds-color-accent-base-contrast-default: #000000;
734-
--ds-color-neutral-background-default: #13181f;
735-
--ds-color-neutral-background-tinted: #192029;
736-
--ds-color-neutral-surface-default: #202834;
737-
--ds-color-neutral-surface-tinted: #262e3a;
738-
--ds-color-neutral-surface-hover: #2e3641;
739-
--ds-color-neutral-surface-active: #3c444e;
740-
--ds-color-neutral-border-subtle: #49515a;
741-
--ds-color-neutral-border-default: #7c8289;
742-
--ds-color-neutral-border-strong: #a4a8ad;
743-
--ds-color-neutral-text-subtle: #a4a8ad;
744-
--ds-color-neutral-text-default: #ebeced;
745-
--ds-color-neutral-base-default: #a6acb2;
746-
--ds-color-neutral-base-hover: #90979f;
747-
--ds-color-neutral-base-active: #7a828c;
748-
--ds-color-neutral-base-contrast-subtle: #1b1c1d;
749-
--ds-color-neutral-base-contrast-default: #000000;
750782
--ds-color-brand1-background-default: #241313;
751783
--ds-color-brand1-background-tinted: #301919;
752784
--ds-color-brand1-surface-default: #3c2020;
@@ -795,6 +827,22 @@ design-tokens: v1.15.0
795827
--ds-color-brand3-base-active: #0b395d;
796828
--ds-color-brand3-base-contrast-subtle: #fbfcfd;
797829
--ds-color-brand3-base-contrast-default: #ffffff;
830+
--ds-color-neutral-background-default: #13181f;
831+
--ds-color-neutral-background-tinted: #192029;
832+
--ds-color-neutral-surface-default: #202834;
833+
--ds-color-neutral-surface-tinted: #262e3a;
834+
--ds-color-neutral-surface-hover: #2e3641;
835+
--ds-color-neutral-surface-active: #3c444e;
836+
--ds-color-neutral-border-subtle: #49515a;
837+
--ds-color-neutral-border-default: #7c8289;
838+
--ds-color-neutral-border-strong: #a4a8ad;
839+
--ds-color-neutral-text-subtle: #a4a8ad;
840+
--ds-color-neutral-text-default: #ebeced;
841+
--ds-color-neutral-base-default: #a6acb2;
842+
--ds-color-neutral-base-hover: #90979f;
843+
--ds-color-neutral-base-active: #7a828c;
844+
--ds-color-neutral-base-contrast-subtle: #1b1c1d;
845+
--ds-color-neutral-base-contrast-default: #000000;
798846
--ds-color-info-background-default: #0d1925;
799847
--ds-color-info-background-tinted: #112130;
800848
--ds-color-info-surface-default: #15293d;
@@ -862,6 +910,22 @@ design-tokens: v1.15.0
862910
--ds-color-focus-inner: #13181f;
863911
--ds-color-focus-outer: #ebeced;
864912
--ds-link-color-visited: #b49acd;
913+
--ds-background-default: #0c1927;
914+
--ds-background-tinted: #102033;
915+
--ds-surface-default: #142941;
916+
--ds-surface-tinted: #172f4b;
917+
--ds-surface-hover: #1a3757;
918+
--ds-surface-active: #21446d;
919+
--ds-border-subtle: #285182;
920+
--ds-border-default: #5a84b4;
921+
--ds-border-strong: #8eaacb;
922+
--ds-text-subtle: #8eaacb;
923+
--ds-text-default: #e7edf4;
924+
--ds-base-default: #4c91cf;
925+
--ds-base-hover: #6fa6d8;
926+
--ds-base-active: #92bce1;
927+
--ds-base-contrast-subtle: #0d1924;
928+
--ds-base-contrast-default: #000000;
865929

866930
color-scheme: dark;
867931
}
@@ -956,94 +1020,6 @@ design-tokens: v1.15.0
9561020
--ds-body-long-xs-letter-spacing: 0.0015em;
9571021
}
9581022
}
959-
@layer ds.theme.color {
960-
:root, [data-color-scheme], [data-color="accent"] {
961-
--ds-color-background-default: var(--ds-color-accent-background-default);
962-
--ds-color-background-tinted: var(--ds-color-accent-background-tinted);
963-
--ds-color-surface-default: var(--ds-color-accent-surface-default);
964-
--ds-color-surface-tinted: var(--ds-color-accent-surface-tinted);
965-
--ds-color-surface-hover: var(--ds-color-accent-surface-hover);
966-
--ds-color-surface-active: var(--ds-color-accent-surface-active);
967-
--ds-color-border-subtle: var(--ds-color-accent-border-subtle);
968-
--ds-color-border-default: var(--ds-color-accent-border-default);
969-
--ds-color-border-strong: var(--ds-color-accent-border-strong);
970-
--ds-color-text-subtle: var(--ds-color-accent-text-subtle);
971-
--ds-color-text-default: var(--ds-color-accent-text-default);
972-
--ds-color-base-default: var(--ds-color-accent-base-default);
973-
--ds-color-base-hover: var(--ds-color-accent-base-hover);
974-
--ds-color-base-active: var(--ds-color-accent-base-active);
975-
--ds-color-base-contrast-subtle: var(--ds-color-accent-base-contrast-subtle);
976-
--ds-color-base-contrast-default: var(--ds-color-accent-base-contrast-default);
977-
}
978-
979-
}
980-
981-
@layer ds.theme.color {
982-
[data-color="brand1"], [data-color-scheme][data-color="brand1"] {
983-
--ds-color-background-default: var(--ds-color-brand1-background-default);
984-
--ds-color-background-tinted: var(--ds-color-brand1-background-tinted);
985-
--ds-color-surface-default: var(--ds-color-brand1-surface-default);
986-
--ds-color-surface-tinted: var(--ds-color-brand1-surface-tinted);
987-
--ds-color-surface-hover: var(--ds-color-brand1-surface-hover);
988-
--ds-color-surface-active: var(--ds-color-brand1-surface-active);
989-
--ds-color-border-subtle: var(--ds-color-brand1-border-subtle);
990-
--ds-color-border-default: var(--ds-color-brand1-border-default);
991-
--ds-color-border-strong: var(--ds-color-brand1-border-strong);
992-
--ds-color-text-subtle: var(--ds-color-brand1-text-subtle);
993-
--ds-color-text-default: var(--ds-color-brand1-text-default);
994-
--ds-color-base-default: var(--ds-color-brand1-base-default);
995-
--ds-color-base-hover: var(--ds-color-brand1-base-hover);
996-
--ds-color-base-active: var(--ds-color-brand1-base-active);
997-
--ds-color-base-contrast-subtle: var(--ds-color-brand1-base-contrast-subtle);
998-
--ds-color-base-contrast-default: var(--ds-color-brand1-base-contrast-default);
999-
}
1000-
1001-
}
1002-
1003-
@layer ds.theme.color {
1004-
[data-color="brand2"], [data-color-scheme][data-color="brand2"] {
1005-
--ds-color-background-default: var(--ds-color-brand2-background-default);
1006-
--ds-color-background-tinted: var(--ds-color-brand2-background-tinted);
1007-
--ds-color-surface-default: var(--ds-color-brand2-surface-default);
1008-
--ds-color-surface-tinted: var(--ds-color-brand2-surface-tinted);
1009-
--ds-color-surface-hover: var(--ds-color-brand2-surface-hover);
1010-
--ds-color-surface-active: var(--ds-color-brand2-surface-active);
1011-
--ds-color-border-subtle: var(--ds-color-brand2-border-subtle);
1012-
--ds-color-border-default: var(--ds-color-brand2-border-default);
1013-
--ds-color-border-strong: var(--ds-color-brand2-border-strong);
1014-
--ds-color-text-subtle: var(--ds-color-brand2-text-subtle);
1015-
--ds-color-text-default: var(--ds-color-brand2-text-default);
1016-
--ds-color-base-default: var(--ds-color-brand2-base-default);
1017-
--ds-color-base-hover: var(--ds-color-brand2-base-hover);
1018-
--ds-color-base-active: var(--ds-color-brand2-base-active);
1019-
--ds-color-base-contrast-subtle: var(--ds-color-brand2-base-contrast-subtle);
1020-
--ds-color-base-contrast-default: var(--ds-color-brand2-base-contrast-default);
1021-
}
1022-
1023-
}
1024-
1025-
@layer ds.theme.color {
1026-
[data-color="brand3"], [data-color-scheme][data-color="brand3"] {
1027-
--ds-color-background-default: var(--ds-color-brand3-background-default);
1028-
--ds-color-background-tinted: var(--ds-color-brand3-background-tinted);
1029-
--ds-color-surface-default: var(--ds-color-brand3-surface-default);
1030-
--ds-color-surface-tinted: var(--ds-color-brand3-surface-tinted);
1031-
--ds-color-surface-hover: var(--ds-color-brand3-surface-hover);
1032-
--ds-color-surface-active: var(--ds-color-brand3-surface-active);
1033-
--ds-color-border-subtle: var(--ds-color-brand3-border-subtle);
1034-
--ds-color-border-default: var(--ds-color-brand3-border-default);
1035-
--ds-color-border-strong: var(--ds-color-brand3-border-strong);
1036-
--ds-color-text-subtle: var(--ds-color-brand3-text-subtle);
1037-
--ds-color-text-default: var(--ds-color-brand3-text-default);
1038-
--ds-color-base-default: var(--ds-color-brand3-base-default);
1039-
--ds-color-base-hover: var(--ds-color-brand3-base-hover);
1040-
--ds-color-base-active: var(--ds-color-brand3-base-active);
1041-
--ds-color-base-contrast-subtle: var(--ds-color-brand3-base-contrast-subtle);
1042-
--ds-color-base-contrast-default: var(--ds-color-brand3-base-contrast-default);
1043-
}
1044-
1045-
}
1046-
10471023
@layer ds.theme.color {
10481024
[data-color="danger"], [data-color-scheme][data-color="danger"] {
10491025
--ds-color-background-default: var(--ds-color-danger-background-default);

0 commit comments

Comments
 (0)