@fremtind/jokul 5.0.0-next.10 → 5.0.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/codemods/CODEMODS.md +133 -0
  2. package/codemods/__tests__/import-paths.test.mjs +467 -92
  3. package/codemods/import-paths.mjs +25 -354
  4. package/codemods/transforms/color-tokens.mjs +77 -0
  5. package/codemods/transforms/font-family.mjs +23 -0
  6. package/codemods/transforms/import-specifiers.mjs +230 -0
  7. package/codemods/transforms/warnings.mjs +41 -0
  8. package/codemods/utils.mjs +35 -0
  9. package/package.json +1 -1
  10. package/styles/base.css +32 -50
  11. package/styles/base.min.css +1 -1
  12. package/styles/components/countdown/countdown.css +2 -2
  13. package/styles/components/countdown/countdown.min.css +1 -1
  14. package/styles/components/expander/expandable.css +13 -14
  15. package/styles/components/expander/expandable.min.css +1 -1
  16. package/styles/components/expander/expandable.scss +16 -17
  17. package/styles/components/feedback/feedback.css +2 -2
  18. package/styles/components/feedback/feedback.min.css +1 -1
  19. package/styles/components/file-input/file-input.css +9 -9
  20. package/styles/components/file-input/file-input.min.css +1 -1
  21. package/styles/components/input-group/input-group.css +2 -2
  22. package/styles/components/input-group/input-group.min.css +1 -1
  23. package/styles/components/list/list.css +37 -21
  24. package/styles/components/list/list.min.css +1 -1
  25. package/styles/components/list/list.scss +27 -23
  26. package/styles/components/loader/loader.css +6 -6
  27. package/styles/components/loader/loader.min.css +1 -1
  28. package/styles/components/loader/skeleton-loader.css +3 -3
  29. package/styles/components/loader/skeleton-loader.min.css +1 -1
  30. package/styles/components/message/message.css +2 -2
  31. package/styles/components/message/message.min.css +1 -1
  32. package/styles/components/progress-bar/progress-bar.css +1 -1
  33. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  34. package/styles/components/segmented-control/segmented-control.css +2 -2
  35. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  36. package/styles/components/system-message/system-message.css +2 -2
  37. package/styles/components/system-message/system-message.min.css +1 -1
  38. package/styles/components/toast/toast.css +4 -4
  39. package/styles/components/toast/toast.min.css +1 -1
  40. package/styles/components/typography/text.scss +2 -2
  41. package/styles/components/typography/title.scss +2 -2
  42. package/styles/components.css +74 -59
  43. package/styles/components.min.css +1 -1
  44. package/styles/tailwind.css +2 -2
  45. package/styles/theme/_dynamic-spacing.scss +21 -15
  46. package/styles/theme/_fonts.scss +3 -12
  47. package/styles/theme/_size.scss +20 -20
  48. package/styles/theme/_tokens.scss +11 -11
  49. package/styles/core/utility/_paragraphs.scss +0 -39
package/codemods/CODEMODS.md ADDED
@@ -0,0 +1,133 @@
1
+ # Jøkul codemods
2
+
3
+ Codemods er automatiserte kodeendringsverktøy for å lette migrering mellom Jøkul-versjoner.
4
+
5
+ ## Bruk
6
+
7
+ ```bash
8
+ # Tørrkjøring — se hva som ville bli endret
9
+ pnpm exec jokul codemod --dry-run
10
+
11
+ # Kjør på hele prosjektet
12
+ pnpm exec jokul codemod
13
+
14
+ # Kjør bare på spesifikke mapper/filer
15
+ pnpm exec jokul codemod src app/components
16
+
17
+ # Med verbose-utskrift (viser alle behandlede filer)
18
+ pnpm exec jokul codemod --verbose
19
+ ```
20
+
21
+ Codemoden leser alle tekstfiler med disse endingene: `.ts`, `.tsx`, `.js`, `.jsx`, `.mjs`, `.mts`, `.cjs`, `.cts`, `.css`, `.scss`, `.sass`, `.md`, `.mdx`.
22
+
23
+ Mapper som hoppes over: `node_modules`, `build`, `dist`, `.git`, `.next`, `.turbo`, `coverage`, `storybook-static`, `.changeset`, `.github`.
24
+
25
+ ---
26
+
27
+ ## `import-paths` (standard)
28
+
29
+ Standardcodemoden for Jøkul 4 → 5-migrering. Kjøres automatisk med `jokul codemod`.
30
+
31
+ ### Automatiske endringer
32
+
33
+ #### Importstier for stilark og Sass-hjelpere
34
+
35
+ | Gammel import | Ny import |
36
+ |---|---|
37
+ | `@fremtind/jokul/styles/core` | `@fremtind/jokul/styles/base.scss` |
38
+ | `@fremtind/jokul/styles/core/core` | `@fremtind/jokul/styles/base` |
39
+ | `@fremtind/jokul/styles/core/core.scss` | `@fremtind/jokul/styles/base.scss` |
40
+ | `@fremtind/jokul/styles/core/core.css` | `@fremtind/jokul/styles/base.css` |
41
+ | `@fremtind/jokul/styles/core/core.min.css` | `@fremtind/jokul/styles/base.min.css` |
42
+ | `@fremtind/jokul/styles` | `@fremtind/jokul/styles/components.scss` |
43
+ | `@fremtind/jokul/styles/styles` | `@fremtind/jokul/styles/components` |
44
+ | `@fremtind/jokul/styles/styles.scss` | `@fremtind/jokul/styles/components.scss` |
45
+ | `@fremtind/jokul/styles/styles.css` | `@fremtind/jokul/styles/components.css` |
46
+ | `@fremtind/jokul/styles/styles.min.css` | `@fremtind/jokul/styles/components.min.css` |
47
+ | `@fremtind/jokul/styles/core/jkl` | `@fremtind/jokul/styles/jkl` |
48
+ | `@fremtind/jokul/styles/core/jkl/index` | `@fremtind/jokul/styles/jkl` |
49
+ | `@fremtind/jokul/styles/fonts/webfonts` | `@fremtind/jokul/styles/theme/fonts` |
50
+ | `@fremtind/jokul/styles/fonts/webfonts.scss` | `@fremtind/jokul/styles/theme/fonts` |
51
+ | `@fremtind/jokul/styles/fonts` | `@fremtind/jokul/styles/theme/fonts` |
52
+ | `@fremtind/jokul/tailwind/v4` | `@fremtind/jokul/styles/tailwind` |
53
+ | `@fremtind/jokul/core` | `@fremtind/jokul/utilities` |
54
+ | `../core/jkl` (relativ) | `../styles/jkl` |
55
+ | `../../core/jkl` (relativ) | `../../styles/jkl` |
56
+ | `../../../core/jkl` (relativ) | `../../../styles/jkl` |
57
+
58
+ #### Fjerning av `webfonts.css`-import (CSS)
59
+
60
+ `@font-face`-definisjonene er flyttet inn i `styles/base.css` i Jøkul 5. Standalone CSS-importer av `webfonts.css` og `webfonts.min.css` fjernes automatisk (både `import`, `require()` og CSS `@import`).
61
+
62
+ Hvis `webfonts.css` fjernes uten at `base.css` eller `components.css` er importert i samme fil, gis det et varsel.
63
+
64
+ #### Stilimporter for beta-komponenter
65
+
66
+ | Gammel import | Ny import |
67
+ |---|---|
68
+ | `@fremtind/jokul/styles/components/description-list` | `@fremtind/jokul/styles/components/beta/description-list` |
69
+ | `@fremtind/jokul/styles/components/nav-link` | `@fremtind/jokul/styles/components/beta/nav-link` |
70
+ | `@fremtind/jokul/styles/components/select` | `@fremtind/jokul/styles/components/beta/select` |
71
+
72
+ Erstatningen skjer bare hvis beta-komponent-identifikatoren (`BETA_Select` o.l.) finnes i samme fil. Hvis stilimporten finnes uten komponentreferanse gis det et varsel om manuell vurdering.
73
+
74
+ #### Resortering av font-import (SCSS)
75
+
76
+ I SCSS-filer flyttes `@use "@fremtind/jokul/styles/theme/fonts"` til å stå _før_ `@use "@fremtind/jokul/styles/base"`, som kreves av Jøkul 5.
77
+
78
+ #### Font-familienavn
79
+
80
+ | Gammelt navn | Nytt navn |
81
+ |---|---|
82
+ | `"Fremtind Material Symbols"` | `"Jokul Icons"` |
83
+ | `"Fremtind Material Symbols Fallback"` | `"Jokul Icons Fallback"` |
84
+
85
+ #### CSS-fargetokens
86
+
87
+ Semantiske `--jkl-color-*` custom properties omdøpt fra v4 til v5. Gjelder både `var()`-bruk og direktedefinerte properties.
88
+
89
+ | Gammel token | Ny token |
90
+ |---|---|
91
+ | `--jkl-color-background-action` | `--jkl-color-background-contrast` |
92
+ | `--jkl-color-text-on-action` | `--jkl-color-text-on-contrast` |
93
+ | `--jkl-color-text-inverted` | `--jkl-color-text-on-contrast` |
94
+ | `--jkl-color-background-container-high` | `--jkl-color-background-container` |
95
+ | `--jkl-color-background-container-low` | `--jkl-color-background-container` |
96
+ | `--jkl-color-background-container-inverted` | `--jkl-color-background-contrast` |
97
+ | `--jkl-color-background-alert-info` | `--jkl-color-info-background-container` |
98
+ | `--jkl-color-background-alert-warning` | `--jkl-color-warning-background-container` |
99
+ | `--jkl-color-background-alert-error` | `--jkl-color-error-background-container` |
100
+ | `--jkl-color-background-alert-success` | `--jkl-color-success-background-container` |
101
+
102
+ #### Tailwind-fargeklasser
103
+
104
+ Tilsvarende omdøping for alle Tailwind v4-fargeklasser generert fra `--color-*`-variabler. Alle vanlige prefikser håndteres: `bg-`, `text-`, `border-`, `ring-`, `shadow-`, `fill-`, `stroke-`, `accent-`, `caret-`, `outline-`, `placeholder-`, `divide-`, `from-`, `via-`, `to-`, `decoration-`.
105
+
106
+ | Gammelt fargenøkkel | Nytt fargenøkkel | Eksempel på klasse |
107
+ |---|---|---|
108
+ | `background-action` | `background-contrast` | `bg-background-action` → `bg-background-contrast` |
109
+ | `text-on-action` | `text-on-contrast` | `text-text-on-action` → `text-text-on-contrast` |
110
+ | `text-inverted` | `text-on-contrast` | `text-text-inverted` → `text-text-on-contrast` |
111
+ | `background-container-high` | `background-container` | `bg-background-container-high` → `bg-background-container` |
112
+ | `background-container-low` | `background-container` | `bg-background-container-low` → `bg-background-container` |
113
+ | `background-container-inverted` | `background-contrast` | `bg-background-container-inverted` → `bg-background-contrast` |
114
+ | `background-alert-info` | `info-background-container` | `bg-background-alert-info` → `bg-info-background-container` |
115
+ | `background-alert-warning` | `warning-background-container` | `bg-background-alert-warning` → `bg-warning-background-container` |
116
+ | `background-alert-error` | `error-background-container` | `bg-background-alert-error` → `bg-error-background-container` |
117
+ | `background-alert-success` | `success-background-container` | `bg-background-alert-success` → `bg-success-background-container` |
118
+
119
+ Tailwind-modifikatorer (`hover:`, `dark:`, `md:`, `focus:` o.l.), opacity-modifikatorer (`/50`) og viktig-prefiks (`!`) håndteres korrekt.
120
+
121
+ ---
122
+
123
+ ### Varsler (krever manuell vurdering)
124
+
125
+ Disse mønstrene kan ikke omdøpes automatisk. Codemoden skriver ut ett varsel per fil der mønsteret finnes.
126
+
127
+ | Mønster | Varsel |
128
+ |---|---|
129
+ | `--jkl-color-text-on-alert-*` | Fjernede tokens. Bruk `--jkl-color-<rolle>-text-default`, f.eks. `--jkl-color-info-text-default`. |
130
+ | `--jkl-color-background-interactive` / `--jkl-color-text-interactive` | Fjernede tokens. Skal ikke brukes lenger. |
131
+ | `variant="outlined\|high\|low"` (på `Card`) | `variant`-prop er fjernet. Bruk `outlined` (boolean) for ramme, fjern `high`/`low`. |
132
+ | `bg-background-interactive` o.l. (Tailwind) | Fjernede Tailwind-klasser basert på `background-interactive`/`text-interactive`. |
133
+ | `border-border-separator` o.l. (Tailwind) | Fjernede Tailwind-kantklasser. Bruk `border-border-default`, `-subdued` eller `-strong`. |