Skip to content

Commit 80ab96f

Browse files
frodehansen2frodehansen2
committed
Frem til layers bug
1 parent a9e1b66 commit 80ab96f

File tree

70 files changed

+685
-397
lines changed

Some content is hidden

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

70 files changed

+685
-397
lines changed

‎apps/dine-pleiepenger/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161
"@storybook/nextjs": "8.6.7",
6262
"@storybook/react": "8.6.7",
6363
"@storybook/test": "8.6.7",
64+
"@tailwindcss/postcss": "4.0.15",
65+
"@tailwindcss/vite": "4.0.15",
6466
"@types/react": "19.0.12",
6567
"classnames": "2.5.1",
6668
"dayjs": "1.11.13",
@@ -79,7 +81,7 @@
7981
"react-dom": "19.0.0",
8082
"react-intl": "7.1.6",
8183
"storybook": "8.6.7",
82-
"tailwindcss": "3.4.17",
84+
"tailwindcss": "4.0.15",
8385
"typescript": "5.8.2",
8486
"uuid": "11.1.0",
8587
"vitest": "3.0.9",

‎apps/dine-pleiepenger/postcss.config.cjs

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
4-
tailwindcss: {},
5-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
64
},
75
};

‎apps/dine-pleiepenger/src/components/dine-mellomlagringer/MellomlagringLinkPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const MellomlagringLinkPanel: React.FunctionComponent<Props> = ({ title, descrip
1919
bg-transparent
2020
text-white
2121
hover:bg-deepblue-700
22-
hover:outline-none
22+
hover:outline-hidden
2323
hover:border-transparent
2424
focus-within:shadow-focus
2525
focus-within:bg-deepblue-700

‎apps/dine-pleiepenger/src/components/innsendt-søknad-liste/InnsendtSøknadListe.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const InnsendtSøknadListe: React.FunctionComponent<Props> = ({ søknader = [] }
4545
const labelId = `søknad-${søknad.journalpostId}`;
4646
return (
4747
<ExpansionCard
48-
className="shadow"
48+
className="shadow-xs"
4949
tabIndex={-1}
5050
ref={index === focusIndex ? ref : undefined}
5151
key={søknad.journalpostId}

‎apps/dine-pleiepenger/src/components/page-layout/page-header/PageHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const PageHeader: React.FunctionComponent<Props> = ({
1616
documentTitle,
1717
}) => {
1818
return (
19-
<div className="bg-[--a-deepblue-50]">
19+
<div className="bg-(--a-deepblue-50)">
2020
{documentTitle ? (
2121
<Head>
2222
<title>{documentTitle}</title>

‎apps/dine-pleiepenger/src/components/saksbehandlingstid/Saksbehandlingstid.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const Saksbehandlingstid: React.FunctionComponent<Props> = ({ frist, venteårsak
7979
<Heading size="medium" level="2" className="text-deepblue-800" spacing={true}>
8080
<AppText id="svarfrist.tittel" />
8181
</Heading>
82-
<BodyShort as="div" className="bg-deepblue-100 pt-4 pl-6 pr-6 pb-6 rounded">
82+
<BodyShort as="div" className="bg-deepblue-100 pt-4 pl-6 pr-6 pb-6 rounded-xs">
8383
<Box className="mb-4">
8484
<SaksbehandlingstidMelding
8585
frist={frist}

‎apps/dine-pleiepenger/src/components/snarvei-link-panel/SnarveiLinkPanel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface Props extends LinkPanelProps {
99

1010
const SnarveiLinkPanel: React.FunctionComponent<Props> = ({ icon, title, description, ...rest }) => {
1111
return (
12-
<LinkPanel border={false} {...rest} className={`rounded-lg shadow ${rest.className}`}>
12+
<LinkPanel border={false} {...rest} className={`rounded-lg shadow-xs ${rest.className}`}>
1313
<HStack gap="4" align={'center'} wrap={false}>
1414
<Hide below="sm">{icon ? <Box className="rounded-full bg-bg-subtle p-4">{icon}</Box> : undefined}</Hide>
1515
<Box>

‎apps/dine-pleiepenger/src/pages/_document.page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ class MyDocument extends Document<Props> {
7373
crossOrigin="anonymous"
7474
/>
7575
</Head>
76-
<body className="bg-[--a-deepblue-50]">
76+
<body className="bg-(--a-deepblue-50)">
7777
<Decorator.Header />
7878
<Main />
7979
<Decorator.Footer />

‎apps/dine-pleiepenger/src/storybook/hooks/withDefaultPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import DefaultPageLayout from '../../components/page-layout/default-page-layout/DefaultPageLayout';
22

33
export const withDefaultPage = (Story) => (
4-
<div className="bg-[--a-deepblue-50]">
4+
<div className="bg-(--a-deepblue-50)">
55
<DefaultPageLayout>
66
<Story />
77
</DefaultPageLayout>

‎apps/dine-pleiepenger/src/storybook/hooks/withEmptyPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { AmplitudeProvider } from '@navikt/sif-common-amplitude';
22
import EmptyPage from '../../components/page-layout/empty-page/EmptyPage';
33

44
export const withEmptyPage = (Story) => (
5-
<div className="bg-[--a-deepblue-50]">
5+
<div className="bg-(--a-deepblue-50)">
66
<AmplitudeProvider applicationKey={'storybook'} apiKey="default">
77
<EmptyPage>
88
<Story />

‎apps/dine-pleiepenger/src/style/global.css

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
1-
@import 'tailwindcss/base';
2-
@import '@navikt/ds-css';
3-
@import 'tailwindcss/components';
4-
@import 'tailwindcss/utilities';
5-
@import '../components/page-layout/sak-page-header/sakPageHeader.css';
1+
@import 'tailwindcss';
2+
@import '@navikt/ds-css' layer(base);
3+
@import '../components/page-layout/sak-page-header/sakPageHeader.css'
4+
layer(utilities);
5+
6+
@config '../../tailwind.config.ts';
7+
8+
/*
9+
The default border color has changed to `currentColor` in Tailwind CSS v4,
10+
so we've added these compatibility styles to make sure everything still
11+
looks the same as it did with Tailwind CSS v3.
12+
13+
If we ever want to remove these styles, we need to add an explicit border
14+
color utility to any element that depends on these defaults.
15+
*/
16+
@layer base {
17+
*,
18+
::after,
19+
::before,
20+
::backdrop,
21+
::file-selector-button {
22+
border-color: var(--color-gray-200, currentColor);
23+
}
24+
}
625

726
.contentWrapper {
827
margin-left: calc((100vw - 100%) / -2);

‎apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/postcss.config.cjs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

‎apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/app.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/* @tailwind base; */
2-
@tailwind components;
3-
@tailwind utilities;
2+
@import 'tailwindcss/utilities' layer(utilities);
3+
4+
@config '../../tailwind.config.js';

‎apps/endringsmelding-pleiepenger/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@
6161
"@storybook/node-logger": "8.6.7",
6262
"@storybook/react": "8.6.7",
6363
"@storybook/testing-library": "0.2.2",
64+
"@tailwindcss/postcss": "4.0.15",
65+
"@tailwindcss/vite": "4.0.15",
6466
"@testing-library/dom": "10.4.0",
6567
"@testing-library/react": "16.2.0",
6668
"@types/flat": "5.0.5",
@@ -88,7 +90,7 @@
8890
"react-responsive": "10.0.1",
8991
"storybook": "8.6.7",
9092
"storybook-addon-mock": "5.0.0",
91-
"tailwindcss": "3.4.17",
93+
"tailwindcss": "4.0.15",
9294
"typescript": "5.8.2",
9395
"vite": "6.2.2",
9496
"vite-plugin-checker": "0.9.1",

‎apps/endringsmelding-pleiepenger/postcss.config.cjs

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
4-
tailwindcss: {},
5-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
64
},
75
};

‎apps/omsorgsdager-aleneomsorg-dialog/postcss.config.cjs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

‎apps/omsorgsdager-aleneomsorg-dialog/src/app/app.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
/* @tailwind base; */
2-
@tailwind components;
3-
@tailwind utilities;
2+
@import 'tailwindcss/utilities' layer(utilities);
3+
4+
@config '../../tailwind.config.cjs';

‎apps/omsorgsdager-aleneomsorg-dialog/src/storybook/components/ShadowBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Box } from '@navikt/ds-react';
22

33
const ShadowBox = ({ children }: { children: React.ReactNode }) => {
44
return (
5-
<Box borderRadius="medium" borderWidth="1" borderColor="border-subtle" padding="6" shadow="medium">
5+
<Box borderRadius="medium" borderWidth="1" borderColor="border-subtle" padding="6" shadow-xs="medium">
66
{children}
77
</Box>
88
);

‎apps/omsorgsdager-aleneomsorg-dialog/src/storybook/components/StoryFormWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface Props {
88

99
const StoryFormWrapper = ({ children, maxWidth = '35rem' }: Props) => (
1010
<VStack gap="8" maxWidth={maxWidth}>
11-
<Box borderRadius="medium" borderWidth="1" borderColor="border-subtle" padding="6" shadow="medium">
11+
<Box borderRadius="medium" borderWidth="1" borderColor="border-subtle" padding="6" shadow-xs="medium">
1212
{children}
1313
</Box>
1414
</VStack>

‎apps/omsorgsdager-kalkulator/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
"devDependencies": {
4040
"@axe-core/playwright": "4.10.1",
4141
"@playwright/test": "1.51.1",
42+
"@tailwindcss/postcss": "4.0.15",
43+
"@tailwindcss/vite": "4.0.15",
4244
"@types/node": "22.13.10",
4345
"@types/react": "19.0.12",
4446
"@types/react-dom": "19.0.4",
@@ -50,7 +52,7 @@
5052
"jest-environment-jsdom": "29.7.0",
5153
"playwright-core": "1.51.1",
5254
"postcss": "8.5.3",
53-
"tailwindcss": "3.4.17",
55+
"tailwindcss": "4.0.15",
5456
"typescript": "5.8.2"
5557
}
5658
}

‎apps/omsorgsdager-kalkulator/postcss.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

‎apps/omsorgsdager-kalkulator/styles/globals.css

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@config '../tailwind.config.js';
4+
5+
/*
6+
The default border color has changed to `currentColor` in Tailwind CSS v4,
7+
so we've added these compatibility styles to make sure everything still
8+
looks the same as it did with Tailwind CSS v3.
9+
10+
If we ever want to remove these styles, we need to add an explicit border
11+
color utility to any element that depends on these defaults.
12+
*/
13+
@layer base {
14+
*,
15+
::after,
16+
::before,
17+
::backdrop,
18+
::file-selector-button {
19+
border-color: var(--color-gray-200, currentColor);
20+
}
21+
}
422

523
html,
624
body {

‎apps/omsorgspengerutbetaling-arbeidstaker-soknad/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363
"@storybook/react": "8.6.7",
6464
"@storybook/react-vite": "8.6.7",
6565
"@storybook/test": "8.6.7",
66+
"@tailwindcss/postcss": "4.0.15",
67+
"@tailwindcss/vite": "4.0.15",
6668
"@testing-library/dom": "10.4.0",
6769
"@types/node": "22.13.10",
6870
"@types/object-hash": "3.0.6",
@@ -86,7 +88,7 @@
8688
"postcss-nesting": "13.0.1",
8789
"storybook": "8.6.7",
8890
"storybook-addon-mock": "5.0.0",
89-
"tailwindcss": "3.4.17",
91+
"tailwindcss": "4.0.15",
9092
"typescript": "5.8.2",
9193
"vite": "6.2.2",
9294
"vite-plugin-checker": "0.9.1",

‎apps/omsorgspengerutbetaling-arbeidstaker-soknad/postcss.config.cjs

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
4-
'tailwindcss/nesting': 'postcss-nesting',
5-
tailwindcss: {},
6-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
74
},
85
};

‎apps/omsorgspengerutbetaling-arbeidstaker-soknad/src/app/app.css

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
1-
@import 'tailwindcss/base';
2-
@import '@navikt/ds-css';
3-
@import 'tailwindcss/components';
4-
@import 'tailwindcss/utilities';
5-
@import '@navikt/sif-common-core-ds/src/styles/sif-ds-theme.css';
1+
@import 'tailwindcss';
2+
@import '@navikt/ds-css' layer(base);
3+
@import '@navikt/sif-common-core-ds/src/styles/sif-ds-theme.css'
4+
layer(utilities);
5+
6+
@config '../../tailwind.config.js';
7+
8+
/*
9+
The default border color has changed to `currentColor` in Tailwind CSS v4,
10+
so we've added these compatibility styles to make sure everything still
11+
looks the same as it did with Tailwind CSS v3.
12+
13+
If we ever want to remove these styles, we need to add an explicit border
14+
color utility to any element that depends on these defaults.
15+
*/
16+
@layer base {
17+
*,
18+
::after,
19+
::before,
20+
::backdrop,
21+
::file-selector-button {
22+
border-color: var(--color-gray-200, currentColor);
23+
}
24+
}

‎apps/omsorgspengerutbetaling-soknad/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
"@storybook/react": "8.6.7",
5959
"@storybook/react-vite": "8.6.7",
6060
"@storybook/test": "8.6.7",
61+
"@tailwindcss/postcss": "4.0.15",
62+
"@tailwindcss/vite": "4.0.15",
6163
"@testing-library/dom": "10.4.0",
6264
"@testing-library/react": "16.2.0",
6365
"@types/node": "22.13.10",
@@ -82,7 +84,7 @@
8284
"postcss": "8.5.3",
8385
"postcss-nesting": "13.0.1",
8486
"storybook": "8.6.7",
85-
"tailwindcss": "3.4.17",
87+
"tailwindcss": "4.0.15",
8688
"typescript": "5.8.2",
8789
"vite": "6.2.2",
8890
"vite-plugin-checker": "0.9.1",

‎apps/omsorgspengerutbetaling-soknad/postcss.config.cjs

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
module.exports = {
22
plugins: {
3-
'postcss-import': {},
4-
'tailwindcss/nesting': 'postcss-nesting',
5-
tailwindcss: {},
6-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
74
},
85
};

‎apps/omsorgspengerutbetaling-soknad/src/app/app.css

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
1-
@import 'tailwindcss/base';
2-
@import '@navikt/ds-css';
3-
@import 'tailwindcss/components';
4-
@import 'tailwindcss/utilities';
5-
@import '@navikt/sif-common-core-ds/src/styles/sif-ds-theme.css';
1+
@import 'tailwindcss';
2+
@import '@navikt/ds-css' layer(base);
3+
@import '@navikt/sif-common-core-ds/src/styles/sif-ds-theme.css'
4+
layer(utilities);
5+
6+
@config '../../tailwind.config.cjs';
7+
8+
/*
9+
The default border color has changed to `currentColor` in Tailwind CSS v4,
10+
so we've added these compatibility styles to make sure everything still
11+
looks the same as it did with Tailwind CSS v3.
12+
13+
If we ever want to remove these styles, we need to add an explicit border
14+
color utility to any element that depends on these defaults.
15+
*/
16+
@layer base {
17+
*,
18+
::after,
19+
::before,
20+
::backdrop,
21+
::file-selector-button {
22+
border-color: var(--color-gray-200, currentColor);
23+
}
24+
}

‎apps/omsorgspengesoknad/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@
5656
"@storybook/node-logger": "8.6.7",
5757
"@storybook/react": "8.6.7",
5858
"@storybook/testing-library": "0.2.2",
59+
"@tailwindcss/postcss": "4.0.15",
60+
"@tailwindcss/vite": "4.0.15",
5961
"@testing-library/dom": "10.4.0",
6062
"@testing-library/react": "16.2.0",
6163
"@types/object-hash": "3.0.6",
@@ -78,7 +80,7 @@
7880
"playwright-core": "1.51.1",
7981
"postcss": "8.5.3",
8082
"storybook": "8.6.7",
81-
"tailwindcss": "3.4.17",
83+
"tailwindcss": "4.0.15",
8284
"typescript": "5.8.2",
8385
"vite": "6.2.2",
8486
"vite-plugin-checker": "0.9.1",

0 commit comments

Comments
 (0)