Skip to content

Commit b80ed44

Browse files
LudvigHzLudvigHz
committed
Migrer til tailwindcss v4
1 parent 0fac840 commit b80ed44

21 files changed

+116
-100
lines changed

‎bun.lockb

-4.92 KB
Binary file not shown.

‎packages/internarbeidsflate-decorator-v3/package.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"private": true,
44
"version": "0.0.0",
55
"types": "./dist/index.d.ts",
6+
"type": "module",
67
"exports": {
78
".": {
89
"import": {
@@ -30,11 +31,8 @@
3031
"@types/react": "^18.3.12",
3132
"@types/react-dom": "^18.3.1",
3233
"@vitejs/plugin-react": "^4.3.4",
33-
"autoprefixer": "^10.4.20",
3434
"concurrently": "^9.1.2",
3535
"msw": "^2.7.0",
36-
"postcss": "^8.5.1",
37-
"postcss-import": "^16.1.0",
3836
"react": "^18.3.1",
3937
"react-dom": "^18.3.1",
4038
"tailwindcss": "^4.0.1",
@@ -64,4 +62,4 @@
6462
"public"
6563
]
6664
}
67-
}
65+
}

‎packages/internarbeidsflate-decorator-v3/postcss.config.cjs

-8
This file was deleted.

‎packages/internarbeidsflate-decorator-v3/src/Decorator.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Decorator: React.FC<PropsWithChildren<DecoratorProps>> = (props) => {
4444
return (
4545
<>
4646
<div className="dekorator" data-theme="internarbeidsflatedecorator-theme">
47-
<header ref={ref} className="dr-font-arial dr-text-white">
47+
<header ref={ref} className="dr:font-arial dr:text-white">
4848
<Banner />
4949
<Menu />
5050
<ErrorMessage />

‎packages/internarbeidsflate-decorator-v3/src/LandingPage.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ const LandingPage: React.FC<AppProps> = (props) => {
2222
<div
2323
className={classNames(
2424
'dekorator',
25-
'dr-text-white dr-font-arial dr-bg-background',
26-
'dr-min-h-screen',
27-
'dr-flex',
28-
'dr-flex-col',
29-
'dr-items-center',
30-
'dr-pt-10',
25+
'dr:text-white dr:font-arial dr:bg-background',
26+
'dr:min-h-screen',
27+
'dr:flex',
28+
'dr:flex-col',
29+
'dr:items-center',
30+
'dr:pt-10',
3131
)}
3232
data-theme="internarbeidsflatedecorator-theme"
3333
>
34-
<Heading className="dr-pb-3" size={'large'}>
34+
<Heading className="dr:pb-3" size={'large'}>
3535
Modia
3636
</Heading>
3737
<Enhet />

‎packages/internarbeidsflate-decorator-v3/src/components/Banner.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import VeilederDetails from './VeilederDetails';
1111
const Banner: React.FC = () => {
1212
const appName: string = useAppState((state) => state.appName);
1313
return (
14-
<div className="dr-bg-background dr-text-white dr-flex dr-justify-center">
15-
<InternalHeader className="dr-max-w-screen-hd dr-w-full dr-items-center">
16-
<InternalHeader.Title as="h1" className="dr-h-full">
14+
<div className="dr:bg-background dr:text-white dr:flex dr:justify-center">
15+
<InternalHeader className="dr:max-w-[theme(screens.hd)] dr:w-full dr:items-center">
16+
<InternalHeader.Title as="h1" className="dr:h-full">
1717
{appName}
1818
</InternalHeader.Title>
19-
<div className="dr-flex dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
19+
<div className="dr:flex dr:flex-1 dr:gap-4 dr:xl:gap-8 dr:w-full dr:justify-center dr:items-center">
2020
<EnhetVelger />
2121
<SearchArea />
2222
<Markup />

‎packages/internarbeidsflate-decorator-v3/src/components/ChevronIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ export const ChevronIcon: React.FC<{ isOpen: boolean }> = ({ isOpen }) => {
55
return (
66
<div
77
className={`${
8-
isOpen ? 'dr-rotate-180 ' : 'dr-rotate-0'
9-
} dr-transform dr-transition dr-duration-150`}
8+
isOpen ? 'dr:rotate-180 ' : 'dr:rotate-0'
9+
} dr:transform dr:transition dr:duration-150`}
1010
>
1111
<ChevronDownIcon className="w-full h-full" />
1212
</div>

‎packages/internarbeidsflate-decorator-v3/src/components/EnhetVelger.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const EnhetVelger: React.FC = () => {
4747
label="Velg enhet"
4848
onChange={onChange}
4949
hideLabel
50-
className="dr-w-64"
50+
className="dr:w-64"
5151
size="small"
5252
>
5353
{options}

‎packages/internarbeidsflate-decorator-v3/src/components/ErrorMessageDisplay.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ErrorMessageDisplay: React.FC<{ errorMessages: ErrorMessage[] }> = ({
1515
<Button
1616
variant="tertiary-neutral"
1717
size="small"
18-
className="!dr-ml-2 !dr-text-white hover:!dr-text-white hover:!dr-bg-red-700 focus:!dr-outline-none focus:!dr-ring focus:!dr-ring-white active:!dr-bg-red-600"
18+
className="dr:ml-2! dr:text-white! dr:hover:text-white! dr:hover:bg-red-700! dr:focus:outline-hidden! dr:focus:ring! dr:focus:ring-white! dr:active:bg-red-600!"
1919
onClick={() =>
2020
StoreHandler.errorManager.removeErrorMessage(firstMessage.code)
2121
}
@@ -59,7 +59,7 @@ const ErrorMessageWrapper: React.FC = () => {
5959
return (
6060
<div
6161
aria-hidden={!open}
62-
className={`dr-duration-1000 dr-transition-height ${open ? 'dr-h-auto' : 'dr-h-0'}`}
62+
className={`dr:duration-1000 dr:transition-height ${open ? 'dr:h-auto' : 'dr:h-0'}`}
6363
>
6464
{open ? <ErrorMessageDisplay errorMessages={messages} /> : null}
6565
</div>
@@ -69,7 +69,7 @@ const ErrorMessageWrapper: React.FC = () => {
6969
const ErrorMessageContainer: React.FC<PropsWithChildren> = ({ children }) => {
7070
return (
7171
<div
72-
className="dr-p-4 dr-bg-red-600 dr-text-center dr-block dr-text-white dr-italic"
72+
className="dr:p-4 dr:bg-red-600 dr:text-center dr:block dr:text-white dr:italic"
7373
aria-live="assertive"
7474
role="alert"
7575
>

‎packages/internarbeidsflate-decorator-v3/src/components/HotkeyMenuElement.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const HotkeyMenuElement: React.FC = () => {
1616
return (
1717
<>
1818
<Button
19-
className="hover:!dr-bg-gray-800 focus:!dr-outline-none focus:!dr-ring focus:!dr-ring-inset focus:!dr-ring-orange-500"
19+
className="dr:hover:bg-gray-800! dr:focus:outline-hidden! dr:focus:ring! dr:focus:ring-inset! dr:focus:ring-orange-500!"
2020
title="Åpne hurtigtaster"
2121
onClick={() => setIsOpen(true)}
2222
icon={<InformationIcon aria-hidden color="white" />}

‎packages/internarbeidsflate-decorator-v3/src/components/Links/Links.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import useGlobalHandlers from '../../store/GlobalHandlers';
55

66
export const DecoratorLinks: React.FC<LinkSections> = (links) => {
77
return (
8-
<div className="dr-max-w-6xl dr-mr-auto dr-ml-auto dr-p-4 dr-text-left">
9-
<div className="dr-flex dr-flex-wrap dr-mb-4">
8+
<div className="dr:max-w-6xl dr:mr-auto dr:ml-auto dr:p-4 dr:text-left">
9+
<div className="dr:flex dr:flex-wrap dr:mb-4">
1010
<Column linkSection={links.modia} />
1111
<Column linkSection={links.arbeidsrettet} />
1212
<Column linkSection={links.sykefravaer} />
@@ -18,11 +18,11 @@ export const DecoratorLinks: React.FC<LinkSections> = (links) => {
1818

1919
export const FullScreenLinks: React.FC<LinkSections> = (links) => {
2020
return (
21-
<div className="dr-max-w-6xl dr-mr-auto dr-ml-auto dr-p-8 dr-text-left dr-grid dr-grid-cols-1 sm:dr-grid-cols-3 dr-gap-y-8">
21+
<div className="dr:max-w-6xl dr:mr-auto dr:ml-auto dr:p-8 dr:text-left dr:grid dr:grid-cols-1 dr:sm:grid-cols-3 dr:gap-y-8">
2222
<Column linkSection={links.modia} />
2323
<Column linkSection={links.arbeidsrettet} />
2424
<Column linkSection={links.sykefravaer} />
25-
<div className="sm:dr-col-span-3">
25+
<div className="dr:sm:col-span-3">
2626
<Row linkSection={links.andre} />
2727
</div>
2828
</div>
@@ -31,8 +31,8 @@ export const FullScreenLinks: React.FC<LinkSections> = (links) => {
3131

3232
const Column: React.FC<{ linkSection: LinkSection }> = ({ linkSection }) => {
3333
return (
34-
<section className="dr-min-w-[25%] dr-px-6">
35-
<h2 className="dr-font-bold dr-border-white dr-border-solid dr-border-b dr-mb-2 dr-pb-1">
34+
<section className="dr:min-w-[25%] dr:px-6">
35+
<h2 className="dr:font-bold dr:border-white dr:border-solid dr:border-b dr:mb-2 dr:pb-1">
3636
{linkSection.title}
3737
</h2>
3838
<ul>
@@ -54,11 +54,11 @@ const Column: React.FC<{ linkSection: LinkSection }> = ({ linkSection }) => {
5454

5555
const Row: React.FC<{ linkSection: LinkSection }> = ({ linkSection }) => {
5656
return (
57-
<section className="dr-px-6">
58-
<h2 className="dr-font-bold dr-border-white dr-border-solid dr-border-b dr-mb-2">
57+
<section className="dr:px-6">
58+
<h2 className="dr:font-bold dr:border-white dr:border-solid dr:border-b dr:mb-2">
5959
{linkSection.title}
6060
</h2>
61-
<ul className="dr-flex dr-flex-wrap dr-gap-x-8">
61+
<ul className="dr:flex dr:flex-wrap dr:gap-x-8">
6262
{linkSection.links.map((link: LinkWithTitle) => {
6363
const href = `${link.url}${link.subPath}`;
6464
return (
@@ -89,12 +89,12 @@ const LinkComponent: React.FC<{
8989
};
9090

9191
return (
92-
<li className="dr-block dr-text-white dr-py-0.5">
92+
<li className="dr:block dr:text-white dr:py-0.5">
9393
<Link
9494
href={href}
9595
rel={target ? '' : 'nooppener noreferrer'}
9696
target={target ?? (newPage ? '_blank' : '_self')}
97-
className="!dr-block !dr-text-white !dr-no-underline focus:!dr-outline-none focus:!dr-ring focus:!dr-ring-orange-400 focus:!dr-bg-transparent hover:!dr-text-orange-400 hover:before:!dr-w-2 hover:before:!dr-h-2 hover:before:!-dr-mr-2 hover:before:!dr-bg-orange-400 hover:before:!dr-rounded-full hover:before:!dr-inline-block hover:before:!-dr-left-4 hover:before:!dr-relative hover:before:!dr-mb-[2px] hover:visited:!dr-text-orange-400"
97+
className="dr:block! dr:text-white! dr:no-underline! dr:focus:outline-hidden! dr:focus:ring! dr:focus:ring-orange-400! dr:focus:bg-transparent! dr:hover:text-orange-400! dr:hover:before:w-2! dr:hover:before:h-2! dr:hover:before:-mr-2! dr:hover:before:bg-orange-400! dr:hover:before:rounded-full! dr:hover:before:inline-block! dr:hover:before:-left-4! dr:hover:before:relative! dr:hover:before:mb-[2px]! dr:hover:visited:text-orange-400!"
9898
onClick={onClick}
9999
>
100100
{linkText}

‎packages/internarbeidsflate-decorator-v3/src/components/Menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Menu: React.FC = () => {
1818
if (!isOpen) return null;
1919

2020
return (
21-
<div className={classNames('dr-bg-background')}>
21+
<div className={classNames('dr:bg-background')}>
2222
<DecoratorLinks {...links} />
2323
</div>
2424
);

‎packages/internarbeidsflate-decorator-v3/src/components/MenuButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const MenuButton: React.FC = () => {
1717
icon={<ChevronIcon isOpen={isOpen} />}
1818
iconPosition="right"
1919
variant="tertiary-neutral"
20-
className="!dr-text-white hover:!dr-text-white hover:!dr-bg-gray-800 focus:!dr-outline-none focus:!dr-ring focus:!dr-ring-inset focus:!dr-ring-orange-500"
20+
className="dr:text-white! dr:hover:text-white! dr:hover:bg-gray-800! dr:focus:outline-hidden! dr:focus:ring! dr:focus:ring-inset! dr:focus:ring-orange-500!"
2121
>
2222
Meny
2323
</Button>

‎packages/internarbeidsflate-decorator-v3/src/components/SearchArea.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const SearchArea: React.FC = () => {
5353
onSearch();
5454
}}
5555
>
56-
<div className="dr-relative">
56+
<div className="dr:relative">
5757
<Search
5858
variant="secondary"
5959
ref={ref}

‎packages/internarbeidsflate-decorator-v3/src/components/VeilederDetails.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ const VeilederDetails: React.FC = () => {
66
const veileder = StoreHandler.store((state) => state.veileder);
77

88
return (
9-
<div className="dr-w-72">
9+
<div className="dr:w-72">
1010
{veileder ? (
1111
<>
1212
<InternalHeader.User
1313
name={veileder.navn}
1414
description={veileder.ident ?? EMDASH}
15-
className="dr-h-full"
15+
className="dr:h-full"
1616
/>
1717
</>
1818
) : (
1919
<>
20-
<Skeleton variant="text" className="dr-bg-gray-400" width="100%" />
21-
<Skeleton variant="text" className="dr-bg-gray-400" width="40%" />
20+
<Skeleton variant="text" className="dr:bg-gray-400" width="100%" />
21+
<Skeleton variant="text" className="dr:bg-gray-400" width="40%" />
2222
</>
2323
)}
2424
</div>

‎packages/internarbeidsflate-decorator-v3/src/components/modals/HotkeyModal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ const HotkeyModal: React.FC<Props> = ({ hotkeys, open, close }) => {
1313
<Modal
1414
open={open}
1515
onClose={close}
16-
className="!dr-text-gray-900"
16+
className="dr:text-gray-900!"
1717
header={{ heading: 'Hurtigtaster', closeButton: true }}
1818
>
1919
<Modal.Body>
2020
{hotkeys.length === 0 ? (
2121
<div>Ingen hurtigtaster er registrert</div>
2222
) : (
2323
<div>
24-
<Table className="!dr-min-w-[350px]">
24+
<Table className="dr:min-w-[350px]!">
2525
<Table.Header>
2626
<Table.Row>
2727
<Table.HeaderCell scope="col">Tast</Table.HeaderCell>

‎packages/internarbeidsflate-decorator-v3/src/components/modals/NewEnhetModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const NewEnhetModal: React.FC = () => {
1717
samtidig. Velger du 'endre' mister du arbeidet du ikke har lagret.
1818
</Alert>
1919
<Heading
20-
className="!dr-mt-4"
20+
className="dr:mt-4!"
2121
level="2"
2222
size="small"
2323
>{`Ønsker du å endre enhet til ${enhet.wsRequestedValue}?`}</Heading>

‎packages/internarbeidsflate-decorator-v3/src/components/modals/NewUserModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const NewUserModal: React.FC = () => {
1717
samtidig. Velger du å endre bruker mister du arbeidet du ikke har
1818
lagret.
1919
</Alert>
20-
<Heading className="!dr-mt-4" level="2" size="small">
20+
<Heading className="dr:mt-4!" level="2" size="small">
2121
{`Ønsker du å endre bruker til ${
2222
fnr?.wsRequestedValue ?? 'ukjent fnr'
2323
}?`}

‎packages/internarbeidsflate-decorator-v3/src/index.css

+32-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,35 @@
1-
@import 'tailwindcss/base';
2-
@import './preflight.css';
3-
@import '@navikt/ds-css';
4-
@import 'tailwindcss/components';
5-
@import 'tailwindcss/utilities';
1+
@import 'tailwindcss' prefix(dr);
2+
@import '@navikt/ds-css' layer(dr-aksel);
3+
4+
@config '../tailwind.config.js';
5+
6+
/*
7+
The default border color has changed to `currentColor` in Tailwind CSS v4,
8+
so we've added these compatibility styles to make sure everything still
9+
looks the same as it did with Tailwind CSS v3.
10+
11+
If we ever want to remove these styles, we need to add an explicit border
12+
color utility to any element that depends on these defaults.
13+
*/
14+
@layer base {
15+
*,
16+
::after,
17+
::before,
18+
::backdrop,
19+
::file-selector-button {
20+
border-color: var(--color-gray-200, currentColor);
21+
}
22+
}
23+
24+
/*
25+
* Tailwind preflight styles set margin: 0 on all elements. This breaks dialogs auto-centering so we
26+
* add it back.
27+
*/
28+
@layer base {
29+
dialog {
30+
margin: auto;
31+
}
32+
}
633

734
[data-theme='internarbeidsflatedecorator-theme'] {
835
--ac-select-bg: var(--a-gray-900);

0 commit comments

Comments
 (0)