Skip to content

Commit ff3ee5e

Browse files
KenAJohKenAJoh
authored
[Sanity] Sanity presentation mode (dev only) (#3772)
* ✨ Introduce `Studio` component in `Studio.tsx` and `page.tsx` for admin interface * ♻️ Move Admin and tooling to app-router. * 🔥 Remove `[[...index]].js` from `legacy-admin` directory * ♻️ Update sanity to v3.86.1 * 🐛 Setup non-working presentation-mode for sanity * ✨ Update resolver * 🎉 Added iframe support for preview in tandem with presentation-mode * ✨ Integrate `stegaClean` in multiple components for consistent data handling * 🎉 Render exit draft button * ✨ Allow for better admin controls and preview * 🔒 Upgrade insecure requests in production-builds * 🐛 Update next-sanity to resolve SanityClient type mismatch * 🐛 Update sanity to 3.87 to fix mismatching sanityclient types * 🐛 Clean iframe URL to avoid using encoded data, causing errors since url is to long * ♻️ Use server actions to disable preview mode to stay on page after reload * 🔥 Remove unused lint-command
1 parent 8235e84 commit ff3ee5e

File tree

47 files changed

+2175
-2178
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2175
-2178
lines changed

‎@navikt/core/tokens/darkside/tokens/colors/semantic-roles/accent.tokens.ts

+36-18
Original file line numberDiff line numberDiff line change
@@ -6,93 +6,108 @@ export const accentSemanticTokenConfig = {
66
value: "{ax.accent.100.value}",
77
type: "color",
88
group: "background.accent",
9-
comment: "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
9+
comment:
10+
"En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
1011
},
1112
"accent-softA": {
1213
value: "{ax.accent.100A.value}",
1314
type: "color",
1415
group: "background.accent",
15-
comment: "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
16+
comment:
17+
"En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
1618
},
1719
"accent-moderate": {
1820
value: "{ax.accent.200.value}",
1921
type: "color",
2022
group: "background.accent",
21-
comment: "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
23+
comment:
24+
"En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
2225
},
2326
"accent-moderateA": {
2427
value: "{ax.accent.200A.value}",
2528
type: "color",
2629
group: "background.accent",
27-
comment: "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
30+
comment:
31+
"En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
2832
},
2933
"accent-moderate-hover": {
3034
value: "{ax.accent.300.value}",
3135
type: "color",
3236
group: "background.accent",
33-
comment: "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
37+
comment:
38+
"En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
3439
},
3540
"accent-moderate-hoverA": {
3641
value: "{ax.accent.300A.value}",
3742
type: "color",
3843
group: "background.accent",
39-
comment: "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
44+
comment:
45+
"En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent secondary hover). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
4046
},
4147
"accent-moderate-pressed": {
4248
value: "{ax.accent.400.value}",
4349
type: "color",
4450
group: "background.accent",
45-
comment: "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
51+
comment:
52+
"En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
4653
},
4754
"accent-moderate-pressedA": {
4855
value: "{ax.accent.400A.value}",
4956
type: "color",
5057
group: "background.accent",
51-
comment: "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
58+
comment:
59+
"En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent secondary active). Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
5260
},
5361
"accent-strong": {
5462
value: "{ax.accent.600.value}",
5563
type: "color",
5664
group: "background.accent",
57-
comment: "En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button accent primary).",
65+
comment:
66+
"En sterk bakgrunnsfarge som brukes på meningsbærende elementer (f.eks. button accent primary).",
5867
},
5968
"accent-strong-hover": {
6069
value: "{ax.accent.700.value}",
6170
type: "color",
6271
group: "background.accent",
63-
comment: "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent primary hover).",
72+
comment:
73+
"En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer (f.eks. button accent primary hover).",
6474
},
6575
"accent-strong-pressed": {
6676
value: "{ax.accent.800.value}",
6777
type: "color",
6878
group: "background.accent",
69-
comment: "En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent primary active).",
79+
comment:
80+
"En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer (f.eks. button accent primary active).",
7081
},
7182
},
7283
text: {
7384
accent: {
7485
value: "{ax.accent.1000.value}",
7586
type: "color",
7687
group: "text.accent",
77-
comment: "Sterk farge for tekst og ikoner for rollen accent. Godkjent på alle bakgrunner unntatt strong.",
88+
comment:
89+
"Sterk farge for tekst og ikoner for rollen accent. Godkjent på alle bakgrunner unntatt strong.",
7890
},
7991
"accent-subtle": {
8092
value: "{ax.accent.800.value}",
8193
type: "color",
8294
group: "text.accent",
83-
comment: "Standard farge for tekst og ikoner med rollen accent. Godkjent på alle bakgrunner unntatt strong.",
95+
comment:
96+
"Standard farge for tekst og ikoner med rollen accent. Godkjent på alle bakgrunner unntatt strong.",
8497
},
8598
"accent-icon": {
8699
value: "{ax.accent.600.value}",
87100
type: "color",
88101
group: "text.accent",
89-
comment: "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.",
102+
comment:
103+
"En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.",
90104
},
91105
"accent-contrast": {
92106
value: "{ax.neutral.000.value}",
93107
type: "color",
94108
group: "text.accent",
95-
comment: "En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong (f.eks. button accent primary).",
109+
comment:
110+
"En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong (f.eks. button accent primary).",
96111
},
97112
},
98113
border: {
@@ -106,19 +121,22 @@ export const accentSemanticTokenConfig = {
106121
value: "{ax.accent.400.value}",
107122
type: "color",
108123
group: "border.accent",
109-
comment: "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
124+
comment:
125+
"En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
110126
},
111127
"accent-subtleA": {
112128
value: "{ax.accent.400A.value}",
113129
type: "color",
114130
group: "border.accent",
115-
comment: "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
131+
comment:
132+
"En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
116133
},
117134
"accent-strong": {
118135
value: "{ax.accent.700.value}",
119136
type: "color",
120137
group: "border.accent",
121-
comment: "En sterk border-farge. Kan brukes som hover-state til border-default.",
138+
comment:
139+
"En sterk border-farge. Kan brukes som hover-state til border-default.",
122140
},
123141
},
124142
} satisfies StyleDictionaryTokenConfig<"color">;

‎@navikt/core/tokens/darkside/tokens/colors/semantic-roles/brand-beige.tokens.ts

+36-18
Original file line numberDiff line numberDiff line change
@@ -6,93 +6,108 @@ export const brandBeigeSemanticTokenConfig = {
66
value: "{ax.brand-beige.100.value}",
77
type: "color",
88
group: "background.brand-beige",
9-
comment: "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
9+
comment:
10+
"En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav.",
1011
},
1112
"brand-beige-softA": {
1213
value: "{ax.brand-beige.100A.value}",
1314
type: "color",
1415
group: "background.brand-beige",
15-
comment: "En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
16+
comment:
17+
"En svak bakgrunnsfarge som kun brukes til dekor. Dekker ingen kontrastkrav. Er delvis gjennomsiktig.",
1618
},
1719
"brand-beige-moderate": {
1820
value: "{ax.brand-beige.200.value}",
1921
type: "color",
2022
group: "background.brand-beige",
21-
comment: "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
23+
comment:
24+
"En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border.",
2225
},
2326
"brand-beige-moderateA": {
2427
value: "{ax.brand-beige.200A.value}",
2528
type: "color",
2629
group: "background.brand-beige",
27-
comment: "En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
30+
comment:
31+
"En medium-svak bakgrunnsfarge som brukes til dekor. Om den brukes på meningsbærende elementer må den kombineres med en godkjent border. Er delvis gjennomsiktig.",
2832
},
2933
"brand-beige-moderate-hover": {
3034
value: "{ax.brand-beige.300.value}",
3135
type: "color",
3236
group: "background.brand-beige",
33-
comment: "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
37+
comment:
38+
"En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border.",
3439
},
3540
"brand-beige-moderate-hoverA": {
3641
value: "{ax.brand-beige.300A.value}",
3742
type: "color",
3843
group: "background.brand-beige",
39-
comment: "En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
44+
comment:
45+
"En medium-svak bakgrunnsfarge som brukes til hover-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
4046
},
4147
"brand-beige-moderate-pressed": {
4248
value: "{ax.brand-beige.400.value}",
4349
type: "color",
4450
group: "background.brand-beige",
45-
comment: "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
51+
comment:
52+
"En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border.",
4653
},
4754
"brand-beige-moderate-pressedA": {
4855
value: "{ax.brand-beige.400A.value}",
4956
type: "color",
5057
group: "background.brand-beige",
51-
comment: "En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
58+
comment:
59+
"En medium-svak bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer. Må kombineres med en godkjent border. Er delvis gjennomsiktig.",
5260
},
5361
"brand-beige-strong": {
5462
value: "{ax.brand-beige.600.value}",
5563
type: "color",
5664
group: "background.brand-beige",
57-
comment: "En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
65+
comment:
66+
"En sterk bakgrunnsfarge som brukes på meningsbærende elementer.",
5867
},
5968
"brand-beige-strong-hover": {
6069
value: "{ax.brand-beige.700.value}",
6170
type: "color",
6271
group: "background.brand-beige",
63-
comment: "En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
72+
comment:
73+
"En sterk bakgrunnsfarge som brukes til hover-state på meningsbærende elementer.",
6474
},
6575
"brand-beige-strong-pressed": {
6676
value: "{ax.brand-beige.800.value}",
6777
type: "color",
6878
group: "background.brand-beige",
69-
comment: "En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.",
79+
comment:
80+
"En sterk bakgrunnsfarge som brukes til active/selected-state på meningsbærende elementer.",
7081
},
7182
},
7283
text: {
7384
"brand-beige": {
7485
value: "{ax.brand-beige.1000.value}",
7586
type: "color",
7687
group: "text.brand-beige",
77-
comment: "Sterk farge for tekst og ikoner for rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
88+
comment:
89+
"Sterk farge for tekst og ikoner for rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
7890
},
7991
"brand-beige-subtle": {
8092
value: "{ax.brand-beige.800.value}",
8193
type: "color",
8294
group: "text.brand-beige",
83-
comment: "Standard farge for tekst og ikoner med rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
95+
comment:
96+
"Standard farge for tekst og ikoner med rollen brand beige. Godkjent på alle bakgrunner unntatt strong.",
8497
},
8598
"brand-beige-icon": {
8699
value: "{ax.brand-beige.600.value}",
87100
type: "color",
88101
group: "text.brand-beige",
89-
comment: "En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.",
102+
comment:
103+
"En farge som kun brukes på ikke-tekstlig innhold (ikoner og andre grafiske elementer). Ikke godkjent på tekst altså.",
90104
},
91105
"brand-beige-contrast": {
92106
value: "{ax.neutral.000.value}",
93107
type: "color",
94108
group: "text.brand-beige",
95-
comment: "En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.",
109+
comment:
110+
"En farge som brukes på tekst og ikoner som plasseres oppå bakgrunnen strong.",
96111
},
97112
},
98113
border: {
@@ -106,19 +121,22 @@ export const brandBeigeSemanticTokenConfig = {
106121
value: "{ax.brand-beige.400.value}",
107122
type: "color",
108123
group: "border.brand-beige",
109-
comment: "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
124+
comment:
125+
"En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon.",
110126
},
111127
"brand-beige-subtleA": {
112128
value: "{ax.brand-beige.400A.value}",
113129
type: "color",
114130
group: "border.brand-beige",
115-
comment: "En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
131+
comment:
132+
"En svak border-farge som brukes til dekor. Om den brukes på interaktive elementer må den kombineres med elementer som tydelig signaliserer interaksjon. Er delvis gjennomsiktig.",
116133
},
117134
"brand-beige-strong": {
118135
value: "{ax.brand-beige.700.value}",
119136
type: "color",
120137
group: "border.brand-beige",
121-
comment: "En sterk border-farge. Kan brukes som hover-state til border-default.",
138+
comment:
139+
"En sterk border-farge. Kan brukes som hover-state til border-default.",
122140
},
123141
},
124142
} satisfies StyleDictionaryTokenConfig<"color">;

0 commit comments

Comments
 (0)