From 24c2f68b546c9a822ab9cf254670083b74d166e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Skr=C3=B8vseth?= Date: Fri, 6 Sep 2024 13:11:59 +0200 Subject: [PATCH] Use Aksel variables, prepare for dark mode --- frontend/index.html | 2 +- .../access-rights/access-rights.tsx | 2 +- .../src/components/access-rights/cell.tsx | 6 +- .../src/components/access-rights/head.tsx | 10 +-- frontend/src/components/access-rights/row.tsx | 8 +-- frontend/src/components/admin/admin.tsx | 2 +- .../src/components/app/error-boundary.tsx | 28 ++++---- frontend/src/components/app/global-styles.ts | 18 +++++- frontend/src/components/app/loader.tsx | 2 +- .../behandling-section.tsx | 4 +- .../behandlingsdetaljer/extra-utfall.tsx | 8 +-- .../lovhjemmel/lovhjemmel.tsx | 4 +- .../lovhjemmel/styled-components.ts | 20 +++--- .../behandlingsdetaljer/utfall-resultat.tsx | 6 +- .../behandlingsdialog/history/common.tsx | 4 +- .../behandlingsdialog/history/event.tsx | 20 +++--- .../behandlingsdialog/history/history.tsx | 4 +- .../behandlingsdialog/history/tildeling.tsx | 2 +- .../history/varslet-behandlingstid.tsx | 2 +- .../medunderskriver/medunderskriver.tsx | 4 +- .../messages/styled-components.ts | 4 +- .../behandling/behandlingsdialog/rol/rol.tsx | 4 +- .../behandlingsdialog/saksbehandler.tsx | 4 +- .../behandling/styled-components.ts | 6 +- .../common-table-components/age.tsx | 2 +- .../common-table-components/deadline.tsx | 2 +- .../common-table-components/footer.tsx | 2 +- .../loading-cell-content.tsx | 2 +- .../oppgave-table/date-column-header.tsx | 2 +- .../date-picker-range/date-picker-range.tsx | 6 +- .../src/components/date-picker/warning.tsx | 2 +- frontend/src/components/datetime/datetime.tsx | 4 +- .../components/deassign/paa-vent-warning.tsx | 2 +- frontend/src/components/deassign/popup.tsx | 10 +-- .../components/documents/create-drag-ui.ts | 16 ++--- .../documents/expanded-documents.tsx | 14 ++-- .../document-list-item.tsx | 4 +- .../document/expanded-document.tsx | 20 +++--- .../document/journalposttype.tsx | 2 +- .../logiske-vedlegg/editable/editable.tsx | 6 +- .../editable/styled-components.ts | 2 +- .../editable/suggestions-dropdown.tsx | 2 +- .../logiske-vedlegg/shared/vedlegg-style.ts | 6 +- .../shared/document-title-actions.tsx | 4 +- .../document/shared/document-title-style.tsx | 3 +- .../document/shared/document-title.tsx | 10 +-- .../document/timeline/styled-components.ts | 26 ++++---- .../document/timeline/timeline.tsx | 2 +- .../documents/journalfoerte-documents/grid.ts | 2 +- .../header/date-filter.tsx | 2 +- .../journalfoerte-documents/header/header.tsx | 2 +- .../heading/heading.tsx | 8 +-- .../heading/invisible-warning.tsx | 2 +- .../heading/view-combined-pdf-button.tsx | 4 +- .../new-documents/attachment-list.tsx | 12 ++-- .../new-documents/header/drop-delete-area.tsx | 10 +-- .../new-documents/header/drop-header.tsx | 10 +-- .../documents/new-documents/header/header.tsx | 6 +- .../new-documents/modal/annen-inngaaende.tsx | 2 +- .../new-documents/modal/delete-button.tsx | 4 +- .../address/country/country.tsx | 2 +- .../modal/finish-document/address/layout.ts | 16 ++--- .../finish-document/address/postnummer.tsx | 4 +- .../finish-document/custom-recipients.tsx | 10 +-- .../modal/finish-document/errors.tsx | 2 +- .../modal/finish-document/options.tsx | 8 +-- .../finish-document/styled-components.ts | 14 ++-- .../unreachable-suggested-recipients.tsx | 10 +-- .../new-documents/modal/modal-content.tsx | 6 +- .../new-documents/modal/set-parent.tsx | 4 +- .../new-documents/new-attachment-buttons.tsx | 4 +- .../new-document/archiving-icon.tsx | 4 +- .../new-document/new-attachment.tsx | 2 +- .../new-document/new-document.tsx | 2 +- .../new-documents/new-document/title-style.ts | 3 +- .../new-documents/new-parent-document.tsx | 12 ++-- .../documents/new-documents/shared/title.tsx | 10 +-- .../styled-components/attachment-list.ts | 20 +++--- .../documents/styled-components/container.ts | 6 +- .../styled-components/document-link.ts | 38 ----------- .../styled-components/document-link.tsx | 64 +++++++++++++++++++ .../documents/styled-components/document.ts | 2 +- .../styled-components/list-header.ts | 8 +-- .../documents/upload-file/upload-file.tsx | 2 +- .../editable-title/editable-title.tsx | 4 +- .../feilregistrering/feilregistrering.tsx | 2 +- .../components/feilregistrering/register.tsx | 2 +- .../feilregistrering/styled-components.ts | 2 +- .../components/filter-dropdown/dropdown.tsx | 6 +- .../filter-dropdown/filter-dropdown.tsx | 6 +- .../filter-dropdown/filter-list.tsx | 6 +- .../filter-dropdown/grouped-filter-list.tsx | 12 ++-- .../src/components/filter-dropdown/header.tsx | 6 +- .../filter-dropdown/nested-filter-list.tsx | 14 ++-- .../src/components/filter-dropdown/option.tsx | 2 +- .../components/header/user-menu/dropdown.tsx | 14 ++-- .../kvalitetsvurdering/kvalitetsvurdering.tsx | 2 +- .../v1/styled-components.ts | 10 +-- .../v2/common/container-with-helptext.tsx | 2 +- .../v2/common/heading-with-helptext.tsx | 2 +- .../v2/common/styled-components.ts | 10 +-- .../kvalitetsvurdering/v2/common/textarea.tsx | 6 +- .../kvalitetsvurdering/v2/kvalitetsskjema.tsx | 2 +- .../maltekstseksjon-references.tsx | 4 +- .../malteksteksjon-references/preview.tsx | 6 +- .../components/maltekstseksjoner/filters.tsx | 2 +- .../maltekstseksjon/common.ts | 18 +++--- .../available-texts-by-type.tsx | 6 +- .../draft/available-texts/row.tsx | 2 +- .../maltekstseksjon/draft/sidebar.tsx | 4 +- .../maltekstseksjon/list-item.tsx | 6 +- .../maltekstseksjon-list-filters.tsx | 4 +- .../maltekstseksjon/maltekstseksjon-list.tsx | 21 +++--- .../maltekstseksjon-published.tsx | 4 +- .../maltekstseksjon-versions.tsx | 2 +- .../maltekstseksjon/maltekstseksjon.tsx | 10 +-- .../maltekstseksjon/preview.tsx | 2 +- .../maltekstseksjon/read-only.tsx | 16 ++--- .../maltekstseksjon/texts.tsx | 2 +- .../unpublish-maltekstseksjon-button.tsx | 2 +- .../maltekstseksjoner/styled-components.ts | 8 +-- .../maltekstseksjoner/text-link.tsx | 4 +- .../maltekstseksjoner/texts/preview.tsx | 2 +- .../texts/published-rich-text.tsx | 8 +-- .../texts/text-draft-footer.tsx | 4 +- .../texts/text-draft/styled-components.ts | 6 +- .../maltekstseksjoner/texts/text-list.tsx | 14 ++-- .../texts/text-published-footer.tsx | 2 +- frontend/src/components/nav/nav.tsx | 15 ++--- .../oppgavebehandling-controls.tsx | 14 ++-- .../oppgavebehandling-controls/user-info.tsx | 4 +- .../deassign/hjemmel-list.tsx | 12 ++-- .../sett-paa-vent/panel.tsx | 6 +- .../styled-components.ts | 10 +-- .../validation-summary-popup.tsx | 2 +- .../styled-components.tsx | 12 ++-- .../oppgavestyring/oppgavestyring.tsx | 2 +- .../oppgavestyring/saksbehandler.tsx | 2 +- .../src/components/oppgavestyring/toasts.tsx | 2 +- .../part-status-list/part-status-list.tsx | 2 +- frontend/src/components/part/edit-part.tsx | 2 +- frontend/src/components/part/lookup.tsx | 2 +- frontend/src/components/part/part.tsx | 2 +- .../popup-container/popup-container.tsx | 4 +- .../redaktoer-rich-text.tsx | 8 +-- .../relevant-oppgaver/relevant-oppgaver.tsx | 2 +- .../rich-text-preview/rich-text-preview.tsx | 4 +- .../components/role-list/role-list-item.tsx | 2 +- frontend/src/components/rows-per-page.tsx | 2 +- .../components/saved-status/saved-status.tsx | 2 +- .../src/components/search/common/oppgaver.tsx | 2 +- frontend/src/components/search/fnr/person.tsx | 10 +-- .../src/components/search/oppgave-search.tsx | 6 +- .../settings/abbreviations/abbreviation.tsx | 2 +- .../settings/abbreviations/abbreviations.tsx | 4 +- .../settings/abbreviations/example.tsx | 2 +- frontend/src/components/settings/settings.tsx | 2 +- .../src/components/settings/signature.tsx | 10 +-- .../components/settings/styled-components.ts | 13 ++-- .../create-translated-text.tsx | 2 +- .../smart-editor-texts/edit/edit.tsx | 6 +- .../smart-editor-texts/edit/footer.tsx | 6 +- .../smart-editor-texts/edit/header-footer.tsx | 2 +- .../smart-editor-texts/edit/load-text.tsx | 6 +- .../edit/published-plain-text.tsx | 16 ++--- .../edit/standalone-text-versions.tsx | 6 +- .../smart-editor-texts/edit/tags.tsx | 2 +- .../smart-editor-texts/filtered-text-list.tsx | 8 +-- .../components/smart-editor-texts/filters.tsx | 2 +- .../hjemler-select/popup.tsx | 8 +-- .../smart-editor-texts/smart-editor-texts.tsx | 12 ++-- .../text-list/styled-components.ts | 26 ++++---- .../unpublish-text-button.tsx | 2 +- .../utfall-set-filter/edit-utfall-set.tsx | 6 +- .../utfall-set-filter/read-utfall-set.tsx | 2 +- .../utfall-set-filter/utfall-set-filter.tsx | 10 +-- .../smart-editor/bookmarks/bookmarks.tsx | 4 +- .../smart-editor/comments/comment-list.tsx | 4 +- .../smart-editor/comments/comment-section.tsx | 2 +- .../smart-editor/comments/comment.tsx | 16 ++--- .../comments/number-of-comments.tsx | 16 ++--- .../smart-editor/comments/skeleton-thread.tsx | 14 ++-- .../comments/styled-components.ts | 16 ++--- .../smart-editor/comments/thread-list.tsx | 12 ++-- .../smart-editor/comments/thread.tsx | 6 +- .../gode-formuleringer/god-formulering.tsx | 16 ++--- .../gode-formuleringer/styles.tsx | 22 +++---- .../smart-editor/history/history-editor.tsx | 4 +- .../smart-editor/history/history.tsx | 8 +-- .../new-document/generated-icon.tsx | 2 +- .../new-document/styled-components.ts | 16 ++--- .../smart-editor/smart-editor-panel.tsx | 28 ++------ .../smart-editor/tabbed-editors/editor.tsx | 4 +- .../tabbed-editors/sticky-right.tsx | 2 +- .../tabbed-editors/tabbed-editors.tsx | 60 +++++++++-------- .../src/components/svarbrev/change-sets.tsx | 2 +- frontend/src/components/svarbrev/filters.tsx | 6 +- frontend/src/components/svarbrev/history.tsx | 22 +++---- .../svarbrev/modal/styled-components.ts | 12 ++-- .../svarbrev/row/styled-components.ts | 4 +- frontend/src/components/svarbrev/skeleton.tsx | 2 +- frontend/src/components/svarbrev/svarbrev.tsx | 4 +- .../components/text-history/text-history.tsx | 8 +-- .../src/components/toast/action-toast.tsx | 2 +- .../toast/toast-content/fetch-error-toast.tsx | 2 +- .../src/components/toast/toast/animations.ts | 2 +- .../toast/toast/styled-components.ts | 8 +-- frontend/src/components/toast/toasts.tsx | 10 +-- .../toggle-button/toggle-button.tsx | 6 +- .../components/versioned-tabs/tab-label.tsx | 2 +- frontend/src/components/view-pdf/container.ts | 6 +- frontend/src/components/view-pdf/header.ts | 18 +++--- .../src/error-boundary/error-boundary.tsx | 22 +++---- .../src/pages/access-rights/access-rights.tsx | 2 +- frontend/src/pages/page-wrapper.tsx | 12 ++-- .../components/common/delete-section.tsx | 4 +- .../common/toolbar-button-with-confirm.tsx | 2 +- .../src/plate/components/current-date.tsx | 2 +- .../components/maltekstseksjon/loading.tsx | 2 +- .../update-maltekstseksjon.tsx | 6 +- frontend/src/plate/components/page-break.tsx | 12 ++-- .../placeholder/styled-components.ts | 4 +- .../plate/components/styled-components.tsx | 20 +++--- frontend/src/plate/sheet.ts | 4 +- frontend/src/plate/status-bar/scaling.tsx | 10 +-- frontend/src/plate/status-bar/status-bar.tsx | 10 +-- frontend/src/plate/styled-components.ts | 4 +- frontend/src/plate/toolbar/abbreviation.tsx | 6 +- .../src/plate/toolbar/bookmark-button.tsx | 4 +- .../src/plate/toolbar/insert-placeholder.tsx | 6 +- frontend/src/plate/toolbar/separator.tsx | 8 +-- .../src/plate/toolbar/styled-components.ts | 8 +-- .../toolbar/toolbars/floating-toolbar.tsx | 2 +- .../toolbar/toolbars/redaktoer-settings.tsx | 4 +- .../toolbars/saksbehandler-settings.tsx | 4 +- .../behandling/event-handlers/hjemler.tsx | 2 +- .../event-handlers/satt-paa-vent.tsx | 4 +- .../behandling/event-handlers/tildeling.tsx | 2 +- 238 files changed, 877 insertions(+), 854 deletions(-) delete mode 100644 frontend/src/components/documents/styled-components/document-link.ts create mode 100644 frontend/src/components/documents/styled-components/document-link.tsx diff --git a/frontend/index.html b/frontend/index.html index 31eaaee6f..47d63d428 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,5 +1,5 @@ - + diff --git a/frontend/src/components/access-rights/access-rights.tsx b/frontend/src/components/access-rights/access-rights.tsx index 5787e4562..bc26a68b3 100644 --- a/frontend/src/components/access-rights/access-rights.tsx +++ b/frontend/src/components/access-rights/access-rights.tsx @@ -114,5 +114,5 @@ const TableWrapper = styled.div` const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/access-rights/cell.tsx b/frontend/src/components/access-rights/cell.tsx index b79ae9c83..094b5ed95 100644 --- a/frontend/src/components/access-rights/cell.tsx +++ b/frontend/src/components/access-rights/cell.tsx @@ -38,7 +38,7 @@ interface StyledCellProps { const getColor = ( { $isChecked, $isFocused, $isCurrentColumn, $isCurrentRow }: StyledCellProps, - defaultColor = 'white', + defaultColor = 'var(--a-bg-default)', ) => { if ($isFocused || $isCurrentColumn || $isCurrentRow) { if ($isChecked) { @@ -71,8 +71,8 @@ const StyledCell = styled.td` const StyledCheckbox = styled.input` display: block; - width: 32px; - height: 32px; + width: var(--a-spacing-8); + height: var(--a-spacing-8); border: none; margin: 0; padding: 0; diff --git a/frontend/src/components/access-rights/head.tsx b/frontend/src/components/access-rights/head.tsx index 36132b7b6..60cb723b1 100644 --- a/frontend/src/components/access-rights/head.tsx +++ b/frontend/src/components/access-rights/head.tsx @@ -60,7 +60,7 @@ const Thead = styled.thead` position: sticky; top: 0; z-index: 2; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-border-on-inverted) 0 1px 0 0, @@ -74,7 +74,7 @@ const CONTAINER_WIDTH = NON_ANGLED_HEADER_HEIGHT; const CONTAINER_HEIGHT = Math.sqrt(ANGLED_HEADER_WIDTH ** 2 / 2); const StyledHeader = styled.th` - padding-left: 8px; + padding-left: var(--a-spacing-2); vertical-align: bottom; text-align: left; `; @@ -85,10 +85,10 @@ const getBackgroundColor = (props: StyledAngledHeaderDivProps) => { } if (props.$grey) { - return 'rgb(247, 247, 247)'; + return 'var(--a-text-default)'; } - return 'white'; + return 'var(--a-bg-default)'; }; interface StyledAngledHeaderDivProps { @@ -113,7 +113,7 @@ const StyledAngledHeader = styled(StyledHeader)` `; const AngledHeaderDiv = styled(Label)` - padding-right: 12px; + padding-right: var(--a-spacing-3); width: ${ANGLED_HEADER_WIDTH}px; height: ${ANGLED_HEADER_HEIGHT}px; diff --git a/frontend/src/components/access-rights/row.tsx b/frontend/src/components/access-rights/row.tsx index fd1b168cc..ade8728c6 100644 --- a/frontend/src/components/access-rights/row.tsx +++ b/frontend/src/components/access-rights/row.tsx @@ -68,8 +68,8 @@ const StyledHeaderText = styled.span` overflow: hidden; height: 100%; min-width: 100%; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); white-space: nowrap; align-items: center; justify-content: left; @@ -78,13 +78,13 @@ const StyledHeaderText = styled.span` overflow: visible; text-overflow: unset; background-color: var(--a-blue-200); - box-shadow: 2px 2px 5px 0px var(--a-border-on-inverted); + box-shadow: var(--a-spacing-05) var(--a-spacing-05) 5px 0px var(--a-border-on-inverted); width: fit-content; } `; const StyledHeader = styled.th<{ $isHighlighted: boolean }>` - height: 32px; + height: var(--a-spacing-8); border-right: 1px solid var(--a-border-on-inverted); border-left: 1px solid var(--a-border-on-inverted); border-bottom: 1px solid var(--a-border-on-inverted); diff --git a/frontend/src/components/admin/admin.tsx b/frontend/src/components/admin/admin.tsx index ea428283d..bb1ad11ad 100644 --- a/frontend/src/components/admin/admin.tsx +++ b/frontend/src/components/admin/admin.tsx @@ -18,7 +18,7 @@ export const Admin = () => ( const StyledPageContent = styled.article` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); max-width: 400px; width: 100%; margin-left: auto; diff --git a/frontend/src/components/app/error-boundary.tsx b/frontend/src/components/app/error-boundary.tsx index f8629f699..e376d13c0 100644 --- a/frontend/src/components/app/error-boundary.tsx +++ b/frontend/src/components/app/error-boundary.tsx @@ -82,14 +82,14 @@ export class AppErrorBoundary extends Component { const ErrorContainer = styled.section` display: block; width: fit-content; - background: var(--a-bg-default); - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); overflow-y: auto; box-shadow: var(--a-shadow-medium); - margin-top: 32px; + margin-top: var(--a-spacing-8); margin-left: auto; margin-right: auto; - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); `; const ErrorContent = styled.div` @@ -97,22 +97,22 @@ const ErrorContent = styled.div` flex-direction: column; align-items: flex-start; justify-content: left; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const Code = styled.code` - background-color: #f5f5f5; - border: 1px solid #ddd; + background-color: var(--a-bg-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); `; const CodeBlock = styled.code` display: block; - padding: 16px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-4); + background-color: var(--a-bg-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); white-space: pre-wrap; word-break: normal; @@ -122,9 +122,9 @@ const CodeBlock = styled.code` const Row = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const StyledAlert = styled(Alert)` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/app/global-styles.ts b/frontend/src/components/app/global-styles.ts index 4ac15a76a..d92526410 100644 --- a/frontend/src/components/app/global-styles.ts +++ b/frontend/src/components/app/global-styles.ts @@ -9,7 +9,21 @@ const styles = css` html { box-sizing: border-box; font-family: 'Source Sans 3', Arial, sans-serif; - font-size: 16px; + font-size: var(--a-spacing-4); + + --kabal-bg-medium: var(--a-gray-200); + + &[data-theme='dark'] { + --a-bg-default: var(--a-surface-inverted); + --a-bg-subtle: var(--a-grayalpha-800); + --a-surface-default: var(--a-surface-inverted); + --a-surface-subtle: var(--a-grayalpha-800); + --a-text-default: var(--a-text-on-inverted); + + --kabal-bg-medium: var(--a-gray-800); + + background-color: var(--a-bg-default); + } } *, @@ -26,7 +40,7 @@ const styles = css` margin: 0; padding: 0; overflow: hidden; - font-size: 16px; + font-size: var(--a-spacing-4); } #app { diff --git a/frontend/src/components/app/loader.tsx b/frontend/src/components/app/loader.tsx index 326ad34ca..2d36a214c 100644 --- a/frontend/src/components/app/loader.tsx +++ b/frontend/src/components/app/loader.tsx @@ -20,7 +20,7 @@ const LoaderWrapper = styled.div` align-items: center; height: 100vh; width: 100vw; - background-color: #fafafa; + background-color: var(--a-surface-subtle); `; const Content = styled.div` diff --git a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx index fd11d0a3d..7300a65c0 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/behandling-section.tsx @@ -25,9 +25,9 @@ export const BehandlingSection = ({ label, children, testid }: Props) => { }; const StyledBehandlingSection = styled.section` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); display: flex; flex-direction: column; - gap: 4px; + gap: var(--a-spacing-1); white-space: break-spaces; `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx index 91811e43f..d231aa399 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/extra-utfall.tsx @@ -136,7 +136,7 @@ const ButtonContainer = styled.div` `; const Container = styled.div` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; const Popup = ({ isOpen, children }: { isOpen: boolean; children: ReactNode }) => { @@ -155,7 +155,7 @@ const StyledPopup = styled.div` const HelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const HelpTextContent = styled.div` @@ -166,7 +166,7 @@ const HelpTextContent = styled.div` const TagsContainer = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); flex-wrap: wrap; - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx index ec985d85e..774be26b4 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/lovhjemmel.tsx @@ -50,6 +50,6 @@ export const Lovhjemmel = () => { const StyledHeaderHelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; - margin-bottom: 8px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts index 22a638270..894bddcd8 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts +++ b/frontend/src/components/behandling/behandlingsdetaljer/lovhjemmel/styled-components.ts @@ -5,26 +5,26 @@ export const StyledLovhjemmelSelect = styled.div` `; export const StyledSelectedHjemler = styled.div` - margin-top: 10px; - padding-top: 10px; - padding-bottom: 10px; + margin-top: var(--a-spacing-2); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); padding-left: 1em; - border-left: 2px solid #ccc; + border-left: var(--a-spacing-05) solid var(--a-border-divider); `; export const StyledNoneSelected = styled.p` - color: #a0a0a0; + color: var(--a-text-subtle); margin: 0; `; export const StyledSelectedList = styled.ul` list-style: none; - padding-left: 10px; + padding-left: var(--a-spacing-2); margin: 0; `; export const StyledListItem = styled.li` - margin-bottom: 0.5em; + margin-bottom: var(--a-spacing-2); &:last-child { margin-bottom: 0; @@ -32,14 +32,14 @@ export const StyledListItem = styled.li` `; export const StyledSelectedSectionHeader = styled.h3` - font-size: 16px; + font-size: 1rem; font-weight: bold; margin-top: 0; - margin-bottom: 0.5em; + margin-bottom: var(--a-spacing-2); `; export const StyledSelectedSection = styled.div` - padding-top: 1em; + padding-top: var(--a-spacing-1); &:first-of-type { padding-top: 0; diff --git a/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx b/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx index 2d5444d85..0ec362d2c 100644 --- a/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx +++ b/frontend/src/components/behandling/behandlingsdetaljer/utfall-resultat.tsx @@ -109,13 +109,13 @@ const EditUtfallResultat = ({ utfall, oppgaveId }: UtfallResultatProps) => { const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); align-items: flex-start; `; const HelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/common.tsx b/frontend/src/components/behandling/behandlingsdialog/history/common.tsx index b1de912eb..299409ca5 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/common.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/common.tsx @@ -30,8 +30,8 @@ export const Reason = styled.p` margin: 0; padding: 0; font-style: italic; - padding-left: 4px; - border-left: 4px solid var(--a-border-subtle); + padding-left: var(--a-spacing-1); + border-left: var(--a-spacing-1) solid var(--a-border-subtle); `; export const HISTORY_COLORS: Record = { diff --git a/frontend/src/components/behandling/behandlingsdialog/history/event.tsx b/frontend/src/components/behandling/behandlingsdialog/history/event.tsx index a4c1ffc11..0a30d17f6 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/event.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/event.tsx @@ -36,7 +36,7 @@ const Container = styled.li<{ $accent: string }>` border-width: 1px; border-style: solid; border-color: ${({ $accent }) => `var(${$accent})`}; - padding-bottom: 8px; + padding-bottom: var(--a-spacing-2); padding-right: 0; padding-left: 3px; overflow: hidden; @@ -48,7 +48,7 @@ const Container = styled.li<{ $accent: string }>` left: -1px; top: -1px; bottom: -1px; - width: 4px; + width: var(--a-spacing-1); background-color: ${({ $accent }) => `var(${$accent})`}; border-top-left-radius: var(--a-border-radius-medium); border-bottom-left-radius: var(--a-border-radius-medium); @@ -59,7 +59,7 @@ const Header = styled.div` display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; const Time = styled.time` @@ -67,28 +67,28 @@ const Time = styled.time` font-weight: normal; font-style: italic; line-height: 1; - padding-top: 2px; + padding-top: var(--a-spacing-05); padding-right: 3px; `; const ContentContainer = styled.div` display: flex; flex-direction: column; - gap: 4px; - padding-left: 8px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); `; const Category = styled.span` display: flex; flex-direction: row; align-items: center; - gap: 4px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-right: var(--a-spacing-2); padding-top: 0; padding-left: 0; padding-bottom: 1px; font-weight: normal; - font-size: 16px; + font-size: var(--a-spacing-4); border-bottom-right-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/history.tsx b/frontend/src/components/behandling/behandlingsdialog/history/history.tsx index f1064dac7..319071355 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/history.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/history.tsx @@ -170,7 +170,7 @@ const toNodes = (events: T[], toNode: ToNodeFn): NodesCat const Container = styled.section` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const List = styled.ul` @@ -179,7 +179,7 @@ const List = styled.ul` padding: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const EmptyText = styled.span` diff --git a/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx b/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx index cc8e33a8d..e72700bf3 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/tildeling.tsx @@ -246,5 +246,5 @@ const getReason = ( const FlexRowContainer = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx b/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx index 528594cb7..77ac9d129 100644 --- a/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/history/varslet-behandlingstid.tsx @@ -126,5 +126,5 @@ const StyledListItem = styled.li` const StyledMottakere = styled.section` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx index 03bbe0927..cd1a3158e 100644 --- a/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/medunderskriver/medunderskriver.tsx @@ -58,6 +58,6 @@ export const Medunderskriver = () => { const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts b/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts index 7c3a55c3e..ffeecf262 100644 --- a/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts +++ b/frontend/src/components/behandling/behandlingsdialog/messages/styled-components.ts @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const StyledMessagesContainer = styled.section` - padding-bottom: 16px; + padding-bottom: var(--a-spacing-4); `; export const StyledAuthor = styled.p` @@ -37,5 +37,5 @@ export const StyledWriteMessage = styled.div` export const StyleSendMessage = styled.div` align-self: flex-end; - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx b/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx index bf92819f9..119679502 100644 --- a/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/rol/rol.tsx @@ -73,6 +73,6 @@ const RolInternal = ({ oppgave }: Props) => { const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx b/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx index 3fe5a630b..cf61e5b25 100644 --- a/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx +++ b/frontend/src/components/behandling/behandlingsdialog/saksbehandler.tsx @@ -93,6 +93,6 @@ const SelectSaksbehandler = ({ oppgave: { saksbehandler, id, typeId, ytelseId } const Container = styled.section` display: flex; flex-direction: column; - gap: 8px; - margin-bottom: 16px; + gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/behandling/styled-components.ts b/frontend/src/components/behandling/styled-components.ts index b41d2ae1c..428d2b00c 100644 --- a/frontend/src/components/behandling/styled-components.ts +++ b/frontend/src/components/behandling/styled-components.ts @@ -6,18 +6,16 @@ export const StyledContainer = styled.div` white-space: normal; width: 750px; grid-column-gap: 1px; - background-color: #c9c9c9; flex-grow: 1; `; export const StyledBehandlingSection = styled.section` - background-color: white; - padding: 16px; + padding: var(--a-spacing-4); min-height: 100%; `; export const DateContainer = styled.section` display: flex; flex-direction: column; - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/common-table-components/age.tsx b/frontend/src/components/common-table-components/age.tsx index a64a5a6e2..04a1fd1c7 100644 --- a/frontend/src/components/common-table-components/age.tsx +++ b/frontend/src/components/common-table-components/age.tsx @@ -106,7 +106,7 @@ const EditAge = ({ mottattDate, oppgaveId, closeCalendar, setUserAge }: EditAgeP const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledAge = styled.span` diff --git a/frontend/src/components/common-table-components/deadline.tsx b/frontend/src/components/common-table-components/deadline.tsx index 882e3d3e7..28df31b44 100644 --- a/frontend/src/components/common-table-components/deadline.tsx +++ b/frontend/src/components/common-table-components/deadline.tsx @@ -136,5 +136,5 @@ const StyledDeadline = styled.time` const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/common-table-components/footer.tsx b/frontend/src/components/common-table-components/footer.tsx index b34879068..5327dcb15 100644 --- a/frontend/src/components/common-table-components/footer.tsx +++ b/frontend/src/components/common-table-components/footer.tsx @@ -77,5 +77,5 @@ export const TableFooter = ({ const Left = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/common-table-components/loading-cell-content.tsx b/frontend/src/components/common-table-components/loading-cell-content.tsx index a14b34f5a..d2bf65ff7 100644 --- a/frontend/src/components/common-table-components/loading-cell-content.tsx +++ b/frontend/src/components/common-table-components/loading-cell-content.tsx @@ -12,6 +12,6 @@ const Container = styled.div` align-items: center; justify-content: center; height: 34px; - padding: 4px; + padding: var(--a-spacing-1); width: 100%; `; diff --git a/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx b/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx index 5f209fc0a..305df4139 100644 --- a/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx +++ b/frontend/src/components/common-table-components/oppgave-table/date-column-header.tsx @@ -110,7 +110,7 @@ const getSortIcon = (sorted: boolean, rekkefoelge: SortOrderEnum) => { const Container = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; interface StyledSortButtonProps { diff --git a/frontend/src/components/date-picker-range/date-picker-range.tsx b/frontend/src/components/date-picker-range/date-picker-range.tsx index 5f8cc8ff2..d20397369 100644 --- a/frontend/src/components/date-picker-range/date-picker-range.tsx +++ b/frontend/src/components/date-picker-range/date-picker-range.tsx @@ -103,7 +103,7 @@ const Time = ({ date }: TimeProps) => ( const Container = styled.div<{ $gridArea?: string }>` position: relative; - height: 32px; + height: var(--a-spacing-8); grid-area: ${({ $gridArea }) => $gridArea}; `; @@ -114,7 +114,7 @@ const DatepickerContainer = styled.div` z-index: 1; background-color: var(--a-surface-default); border-radius: var(--a-border-radius-medium); - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + box-shadow: 0px var(--a-spacing-1) var(--a-spacing-2) rgba(0, 0, 0, 0.1); font-weight: initial; `; @@ -126,7 +126,7 @@ const StyledButtons = styled.div` `; const StyledDateRange = styled.div` - height: 32px; + height: var(--a-spacing-8); width: 100%; padding-left: var(--a-spacing-3); padding-right: var(--a-spacing-3); diff --git a/frontend/src/components/date-picker/warning.tsx b/frontend/src/components/date-picker/warning.tsx index 6c56f2699..73f49f1f9 100644 --- a/frontend/src/components/date-picker/warning.tsx +++ b/frontend/src/components/date-picker/warning.tsx @@ -24,5 +24,5 @@ export const Warning = ({ date, threshhold }: Props) => { }; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/datetime/datetime.tsx b/frontend/src/components/datetime/datetime.tsx index 9b23e0bb2..000dedebc 100644 --- a/frontend/src/components/datetime/datetime.tsx +++ b/frontend/src/components/datetime/datetime.tsx @@ -26,7 +26,7 @@ export const ModifiedCreatedDateTime = ({ lastEdit, created }: Props) => { const Wrapper = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; interface DateTimeProps { @@ -45,6 +45,6 @@ export const DateTime = ({ dateTime, title, icon }: DateTimeProps) => ( const StyledTime = styled.time` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); white-space: nowrap; `; diff --git a/frontend/src/components/deassign/paa-vent-warning.tsx b/frontend/src/components/deassign/paa-vent-warning.tsx index b338ad76d..41a42aa9d 100644 --- a/frontend/src/components/deassign/paa-vent-warning.tsx +++ b/frontend/src/components/deassign/paa-vent-warning.tsx @@ -34,7 +34,7 @@ export const PaaVentWarning = ({ onConfirm, isOpen, close }: PaaVentWarningProps const Buttons = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/components/deassign/popup.tsx b/frontend/src/components/deassign/popup.tsx index 624660728..b8a9f18d4 100644 --- a/frontend/src/components/deassign/popup.tsx +++ b/frontend/src/components/deassign/popup.tsx @@ -115,14 +115,14 @@ const StyledPopup = styled.div` flex-direction: column; position: absolute; right: 0; - gap: 8px; + gap: var(--a-spacing-2); width: 280px; padding: var(--a-spacing-4); - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - border: 1px solid #c6c2bf; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); + border: 1px solid var(--a-border-divider); + box-shadow: 0 0 var(--a-spacing-1) rgba(0, 0, 0, 0.25); z-index: 10; `; @@ -130,5 +130,5 @@ const ButtonContainer = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/create-drag-ui.ts b/frontend/src/components/documents/create-drag-ui.ts index 5bf2e837c..76f1fa513 100644 --- a/frontend/src/components/documents/create-drag-ui.ts +++ b/frontend/src/components/documents/create-drag-ui.ts @@ -4,13 +4,13 @@ const MORE_THRESHOLD = MAX_DOCUMENT_LINES + 2; export const createDragUI = (documentTitleList: string[], e: React.DragEvent): (() => void) => { const dragElement = window.document.createElement('section'); - dragElement.style.backgroundColor = 'white'; - dragElement.style.border = '2px solid var(--a-surface-action-hover)'; - dragElement.style.padding = '4px'; - dragElement.style.paddingLeft = '16px'; - dragElement.style.borderTopRightRadius = '4px'; - dragElement.style.borderBottomRightRadius = '4px'; - dragElement.style.borderBottomLeftRadius = '4px'; + dragElement.style.backgroundColor = 'var(--a-bg-default)'; + dragElement.style.border = 'var(--a-spacing-05) solid var(--a-surface-action-hover)'; + dragElement.style.padding = 'var(--a-spacing-1)'; + dragElement.style.paddingLeft = 'var(--a-spacing-4)'; + dragElement.style.borderTopRightRadius = 'var(--a-spacing-4)'; + dragElement.style.borderBottomRightRadius = 'var(--a-spacing-4)'; + dragElement.style.borderBottomLeftRadius = 'var(--a-spacing-4)'; dragElement.style.boxShadow = 'var(--a-shadow-medium)'; const documentsCount = documentTitleList.length; @@ -26,7 +26,7 @@ export const createDragUI = (documentTitleList: string[], e: React.DragEvent 1) { const list = window.document.createElement('ul'); list.style.margin = '0'; - list.style.paddingLeft = '16px'; + list.style.paddingLeft = 'var(--a-spacing-4)'; list.style.paddingTop = '0'; list.style.paddingBottom = '0'; diff --git a/frontend/src/components/documents/expanded-documents.tsx b/frontend/src/components/documents/expanded-documents.tsx index 187726ba4..538016559 100644 --- a/frontend/src/components/documents/expanded-documents.tsx +++ b/frontend/src/components/documents/expanded-documents.tsx @@ -157,14 +157,14 @@ const DocumentsHeader = styled.div` flex-direction: row; justify-content: flex-start; align-items: flex-start; - column-gap: 8px; + column-gap: var(--a-spacing-2); position: relative; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 8px; - padding-top: 8px; - border-bottom: 1px solid #c6c2bf; - margin-bottom: 8px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-2); + padding-top: var(--a-spacing-2); + border-bottom: 1px solid var(--a-border-divider); + margin-bottom: var(--a-spacing-2); `; const ButtonContainer = styled.div` diff --git a/frontend/src/components/documents/journalfoerte-documents/document-list-item.tsx b/frontend/src/components/documents/journalfoerte-documents/document-list-item.tsx index 550a91586..42255f296 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document-list-item.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document-list-item.tsx @@ -3,8 +3,8 @@ import { styled } from 'styled-components'; export const StyledDocumentListItem = styled.li` position: absolute; display: block; - margin-left: 2px; - margin-right: 2px; + margin-left: var(--a-spacing-05); + margin-right: var(--a-spacing-05); border-radius: var(--a-border-radius-medium); left: 0; right: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx b/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx index f46b28dd0..97b06c8fd 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/expanded-document.tsx @@ -54,7 +54,7 @@ const MottattHelpText = () => ( ); const HelpTextContent = styled.p` - font-size: 16px; + font-size: var(--a-spacing-4); white-space: normal; line-height: var(--a-font-line-height-medium); margin: 0; @@ -63,20 +63,20 @@ const HelpTextContent = styled.p` const StyledExpandedDocument = styled.div` display: flex; flex-direction: column; - row-gap: 16px; - padding: 8px; + row-gap: var(--a-spacing-4); + padding: var(--a-spacing-2); height: ${EXPANDED_HEIGHT}px; - width: calc(100% - 16px); + width: calc(100% - var(--a-spacing-4)); overflow-x: auto; border-left: 1px solid var(--a-border-subtle); - padding-left: 16px; - margin-left: 16px; + padding-left: var(--a-spacing-4); + margin-left: var(--a-spacing-4); `; const TopRow = styled.div` display: grid; grid-template-columns: repeat(4, min-content); - grid-column-gap: 16px; + grid-column-gap: var(--a-spacing-4); white-space: nowrap; position: sticky; left: 0; @@ -91,14 +91,14 @@ const Section = styled.section` const MetadataRow = styled.div` display: flex; flex-direction: row; - column-gap: 32px; + column-gap: var(--a-spacing-8); `; const NowrapDetail = styled(Detail)` display: flex; align-items: center; - gap: 2px; - height: 24px; + gap: var(--a-spacing-05); + height: var(--a-spacing-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx b/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx index 0bbaf9c4e..71ea5e6fb 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/journalposttype.tsx @@ -49,5 +49,5 @@ const getJournalposttype = (type: Journalposttype | null) => { }; const StyledTag = styled(Tag)` - width: 24px; + width: var(--a-spacing-6); `; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx index ba8ff63cf..9c2b6ed37 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/editable.tsx @@ -132,8 +132,8 @@ const Title = styled.span` const AbsoluteTitle = styled.span` position: absolute; - left: 8px; - right: 80px; + left: var(--a-spacing-2); + right: var(--a-spacing-20); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -147,7 +147,7 @@ const ButtonContainer = styled.div` column-gap: 0; opacity: ${({ $isFocused }) => ($isFocused ? 1 : 0)}; position: absolute; - right: 8px; + right: var(--a-spacing-2); user-select: none; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts index d9abe2a47..212dd62ae 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/styled-components.ts @@ -3,7 +3,7 @@ import { ReadOnlyTag } from '@app/components/documents/journalfoerte-documents/d export const EditTag = styled(ReadOnlyTag)` max-width: 200px; - background-color: white; + background-color: var(--a-bg-default); &:empty::before { content: attr(aria-placeholder); diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx index f90d3094b..1c97fc061 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/editable/suggestions-dropdown.tsx @@ -62,7 +62,7 @@ const Container = styled.ul` left: 0; right: 0; width: fit-content; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); padding: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts index e482e6e04..8ccf4c2d3 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts +++ b/frontend/src/components/documents/journalfoerte-documents/document/logiske-vedlegg/shared/vedlegg-style.ts @@ -4,15 +4,15 @@ import { styled } from 'styled-components'; export const ReadOnlyTag = styled(Tag)` display: flex; flex-direction: row; - column-gap: 4px; + column-gap: var(--a-spacing-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border-radius: var(--a-border-radius-xlarge); position: relative; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); text-align: left; justify-content: left; max-width: 100%; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx index b9c0f1421..075b36d0e 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-actions.tsx @@ -45,11 +45,11 @@ export const DocumentTitleActions = ({ setEditMode, harTilgangTilArkivvariant, t }; const StyledEditIcon = styled(PencilIcon)` - font-size: 20px; + font-size: var(--a-spacing-5); `; const StyledSuccessIcon = styled(CheckmarkIcon)` - font-size: 20px; + font-size: var(--a-spacing-5); `; const Container = styled.div` diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx index b22dc6147..6424a84f1 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title-style.tsx @@ -6,11 +6,10 @@ export const StyledDocumentTitle = styled.h1` display: flex; align-items: center; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); font-size: 18px; font-weight: normal; margin: 0; - color: #0067c5; overflow: hidden; white-space: nowrap; height: 100%; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx index 26395346d..1a9947b1c 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/shared/document-title.tsx @@ -3,6 +3,7 @@ import { memo, useCallback, useContext, useMemo, useState } from 'react'; import { DragAndDropContext } from '@app/components/documents/drag-context'; import { StyledDocumentTitle } from '@app/components/documents/journalfoerte-documents/document/shared/document-title-style'; import { SetFilename } from '@app/components/documents/set-filename'; +import { DocumentLink, EllipsisTitle } from '@app/components/documents/styled-components/document-link'; import { TabContext } from '@app/components/documents/tab-context'; import { useIsTabOpen } from '@app/components/documents/use-is-tab-open'; import { toast } from '@app/components/toast/store'; @@ -14,7 +15,6 @@ import { useDocumentsPdfViewed } from '@app/hooks/settings/use-setting'; import { MouseButtons } from '@app/keys'; import { useSetTitleMutation } from '@app/redux-api/journalposter'; import { DocumentTypeEnum } from '@app/types/documents/documents'; -import { EllipsisTitle, StyledDocumentLink } from '../../../styled-components/document-link'; import { ConfirmEditButton, DocumentTitleActions } from './document-title-actions'; interface Props { @@ -144,10 +144,10 @@ const DocumentTitleInternal = memo( return ( - {tittel} - + ` position: relative; display: flex; flex-direction: column; - row-gap: 4px; - padding: 8px; + row-gap: var(--a-spacing-1); + padding: var(--a-spacing-2); border: 1px solid var(--a-border-default); border-radius: var(--a-border-radius-medium); background-color: ${({ $color }) => $color}; @@ -72,11 +72,11 @@ export const NextArrow = styled(ChevronRightIcon)` top: 50%; left: 100%; transform: translateY(-50%) translateX(-22.5%); - width: 16px; + width: var(--a-spacing-4); `; export const StyledLabel = styled(Label)` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx index 41f68d499..48d90293a 100644 --- a/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/document/timeline/timeline.tsx @@ -36,6 +36,6 @@ const TimelineContainer = styled.ol` display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 8px; + gap: var(--a-spacing-2); padding: 0; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/grid.ts b/frontend/src/components/documents/journalfoerte-documents/grid.ts index 74b9ce12c..2ce2e1585 100644 --- a/frontend/src/components/documents/journalfoerte-documents/grid.ts +++ b/frontend/src/components/documents/journalfoerte-documents/grid.ts @@ -2,7 +2,7 @@ import { css } from 'styled-components'; export const documentsGridCSS = css` display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; diff --git a/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx b/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx index 001e083b4..59135c0dc 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/date-filter.tsx @@ -13,7 +13,7 @@ interface Props extends DateRangeSetting { const StyledButton = styled(Button)` border: 1px solid var(--a-border-default); - height: 32px; + height: var(--a-spacing-8); font-weight: normal; .navds-label { diff --git a/frontend/src/components/documents/journalfoerte-documents/header/header.tsx b/frontend/src/components/documents/journalfoerte-documents/header/header.tsx index 8fd696555..68d6e5cd8 100644 --- a/frontend/src/components/documents/journalfoerte-documents/header/header.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/header/header.tsx @@ -110,7 +110,7 @@ interface StyledListHeaderProps { const StyledListHeader = styled.div` ${listHeaderCSS} - padding-top: 4px; + padding-top: var(--a-spacing-1); ${documentsGridCSS} ${getGridCss} white-space: nowrap; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx index 13ec3cb7c..5ca7023b3 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/heading.tsx @@ -74,7 +74,7 @@ const RemoveFilters = ({ resetFilters, noFiltersActive }: RemoveFiltersProps) => const LeftGroup = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; @@ -83,8 +83,8 @@ const Container = styled.div<{ $isExpanded: boolean }>` flex-direction: ${({ $isExpanded }) => ($isExpanded ? 'row' : 'column')}; align-items: ${({ $isExpanded }) => ($isExpanded ? 'center' : 'flex-start')}; justify-content: space-between; - padding-bottom: 4px; - column-gap: 16px; - row-gap: 8px; + padding-bottom: var(--a-spacing-1); + column-gap: var(--a-spacing-4); + row-gap: var(--a-spacing-2); flex-shrink: 0; `; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx index 76f23b943..4fb584e0a 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/invisible-warning.tsx @@ -85,5 +85,5 @@ const StyledAlert = styled(Alert)` const AlertContent = styled.div` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx b/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx index e90f88b5b..4aa9ca6d5 100644 --- a/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx +++ b/frontend/src/components/documents/journalfoerte-documents/heading/view-combined-pdf-button.tsx @@ -136,11 +136,11 @@ const OpenButton = forwardRef((props, ref) = OpenButton.displayName = 'OpenButton'; const StyledOpenButton = styled(OpenButton)` - text-shadow: ${({ $isActive }) => ($isActive ? '0 0 1px #262626' : 'none')}; + text-shadow: ${({ $isActive }) => ($isActive ? '0 0 1px var(--a-surface-neutral-active)' : 'none')}; margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3); &:visited { color: var(--a-text-visited); - box-shadow: inset 0 0 0 2px var(--a-text-visited); + box-shadow: inset 0 0 0 var(--a-spacing-05) var(--a-text-visited); } `; diff --git a/frontend/src/components/documents/new-documents/attachment-list.tsx b/frontend/src/components/documents/new-documents/attachment-list.tsx index de0713a7e..b52a1d507 100644 --- a/frontend/src/components/documents/new-documents/attachment-list.tsx +++ b/frontend/src/components/documents/new-documents/attachment-list.tsx @@ -130,9 +130,9 @@ const ListSeparator = styled.div` left: 0; right: 0; margin: 0; - margin-top: 12px; - margin-bottom: 12px; - margin-left: 4px; + margin-top: var(--a-spacing-3); + margin-bottom: var(--a-spacing-3); + margin-left: var(--a-spacing-1); border: none; border-bottom: 1px solid var(--a-border-subtle); @@ -141,10 +141,10 @@ const ListSeparator = styled.div` position: absolute; top: 50%; left: 17px; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); transform: translateY(-50%); - background-color: white; + background-color: var(--a-bg-default); font-size: 14px; } `; diff --git a/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx b/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx index 750338070..5f969eec1 100644 --- a/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx +++ b/frontend/src/components/documents/new-documents/header/drop-delete-area.tsx @@ -89,19 +89,19 @@ const DeleteDropAreaContainer = styled.div<{ $isDropTarget: boolean; $isDragOver display: flex; align-items: center; justify-content: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); flex-grow: 0; flex-shrink: 0; - padding-left: 48px; - padding-right: 48px; - margin-right: 8px; + padding-left: var(--a-spacing-12); + padding-right: var(--a-spacing-12); + margin-right: var(--a-spacing-2); white-space: nowrap; height: 100%; transition-property: opacity; transition-duration: 0.2s; transition-timing-function: ease-in-out; border-radius: var(--a-border-radius-medium); - outline: 2px dashed var(--a-surface-danger); + outline: var(--a-spacing-05) dashed var(--a-surface-danger); font-size: 18px; font-weight: bold; diff --git a/frontend/src/components/documents/new-documents/header/drop-header.tsx b/frontend/src/components/documents/new-documents/header/drop-header.tsx index b686f5a54..ac2e0eb67 100644 --- a/frontend/src/components/documents/new-documents/header/drop-header.tsx +++ b/frontend/src/components/documents/new-documents/header/drop-header.tsx @@ -103,12 +103,12 @@ const InternalHeading = ({ children, ...props }: IDragOver) => ` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: fit-content; white-space: nowrap; flex-shrink: 0; flex-grow: 1; - padding-left: 8px; + padding-left: var(--a-spacing-2); position: relative; &::after { @@ -117,7 +117,7 @@ const StyledHeading = styled(InternalHeading)` justify-content: center; content: 'Hoveddokument'; border-radius: var(--a-border-radius-medium); - outline: 2px dashed var(--a-border-action); + outline: var(--a-spacing-05) dashed var(--a-border-action); font-size: 18px; font-weight: bold; position: absolute; @@ -128,7 +128,7 @@ const StyledHeading = styled(InternalHeading)` background-color: ${({ $isDragOver }) => ($isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)')}; text-shadow: 1px 1px white, - -1px -1px white; - backdrop-filter: blur(2px); + -1px -1px var(--a-bg-default); + backdrop-filter: blur(var(--a-spacing-05)); } `; diff --git a/frontend/src/components/documents/new-documents/header/header.tsx b/frontend/src/components/documents/new-documents/header/header.tsx index b5d02af7a..2d216dea1 100644 --- a/frontend/src/components/documents/new-documents/header/header.tsx +++ b/frontend/src/components/documents/new-documents/header/header.tsx @@ -14,7 +14,9 @@ export const ListHeader = () => { Dokumenter under arbeid - {typeof errorMessage === 'string' ? : null} + {typeof errorMessage === 'string' ? ( + + ) : null} {isExpanded ? : null} @@ -25,6 +27,6 @@ const NewDocumentsStyledListHeader = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); ${listHeaderCSS} `; diff --git a/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx b/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx index 6f0de149b..1354fb22e 100644 --- a/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx +++ b/frontend/src/components/documents/new-documents/modal/annen-inngaaende.tsx @@ -80,5 +80,5 @@ export const AnnenInngaaende = ({ document, canEditDocument }: Props) => { const AvsenderContainer = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/delete-button.tsx b/frontend/src/components/documents/new-documents/modal/delete-button.tsx index 8fd35b07f..2a1628489 100644 --- a/frontend/src/components/documents/new-documents/modal/delete-button.tsx +++ b/frontend/src/components/documents/new-documents/modal/delete-button.tsx @@ -94,12 +94,12 @@ const Container = styled.div` display: flex; flex-direction: row; justify-content: flex-end; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; const StyledButton = styled(Button)` display: flex; - gap: 8px; + gap: var(--a-spacing-2); width: min-content; white-space: nowrap; `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx index 4fab06220..72ad91feb 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/country/country.tsx @@ -190,7 +190,7 @@ const DropdownList = styled.ul` width: 100%; left: 0; padding: 0; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); z-index: 1; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts b/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts index d2b5dfcb0..0782db5ae 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/layout.ts @@ -10,9 +10,9 @@ export const Container = styled.div<{ $state: AddressState }>` display: flex; flex-direction: column; justify-content: center; - min-height: 32px; - gap: 8px; - padding: 8px; + min-height: var(--a-spacing-8); + gap: var(--a-spacing-2); + padding: var(--a-spacing-2); position: relative; background-color: ${({ $state }) => getBackgroundColor($state)}; `; @@ -33,11 +33,11 @@ export const StyledRecipient = styled.div<{ $accent: string }>` flex-direction: column; border-radius: var(--a-border-radius-medium); padding: 0; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; - border-left-width: 4px; + border-left-width: var(--a-spacing-1); border-style: solid; border-color: var(--a-border-default); border-left-color: ${({ $accent }) => $accent}; @@ -51,13 +51,13 @@ export const Row = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; export const FieldLabel = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; - min-height: 24px; + column-gap: var(--a-spacing-1); + min-height: var(--a-spacing-6); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx index 6b077407e..24bb3e9d9 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/address/postnummer.tsx @@ -54,11 +54,11 @@ const PoststedContainer = styled.div` const StyledLabel = styled(Label)` display: flex; align-items: center; - min-height: 24px; + min-height: var(--a-spacing-6); `; const Poststed = styled(BodyShort)` display: flex; align-items: center; - height: 32px; + height: var(--a-spacing-8); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx index a57b142c5..33195b20d 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/custom-recipients.tsx @@ -121,21 +121,21 @@ const Recipients = ({ mottakerList, removeMottakere, changeMottaker, sendErrors, const StyledRecipientInnerContent = styled.div` display: flex; align-items: center; - padding-top: 4px; - padding-bottom: 4px; - gap: 4px; + padding-top: var(--a-spacing-1); + padding-bottom: var(--a-spacing-1); + gap: var(--a-spacing-1); `; const StyledRecipientList = styled.ul` list-style: none; padding: 0; margin: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); `; const StyledName = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx index 352908a0f..c2c275c43 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/errors.tsx @@ -83,5 +83,5 @@ const StyledOuterList = styled(List)` `; const Section = styled.section` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx index 96f2b2b58..18d583397 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/options.tsx @@ -101,10 +101,10 @@ export const Options = ({ part, handling, overriddenAddress, templateId, onChang const Row = styled.div` display: flex; align-items: center; - column-gap: 8px; - padding-left: 8px; - padding-right: 8px; - padding-bottom: 4px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-bottom: var(--a-spacing-1); `; const ensureIsHandling = (handling: string): HandlingEnum => { diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts b/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts index 39ee8c44b..5f4e3f332 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts +++ b/frontend/src/components/documents/new-documents/modal/finish-document/styled-components.ts @@ -3,30 +3,30 @@ import { styled } from 'styled-components'; export const StyledFinishDocument = styled.section` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); position: relative; `; export const StyledButtons = styled.div` display: flex; justify-content: flex-start; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; export const StyledBrevmottaker = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); flex-shrink: 0; - padding-left: 8px; - padding-right: 8px; - min-height: 32px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + min-height: var(--a-spacing-8); `; export const StyledRecipientContent = styled.div` display: flex; flex-direction: row; - gap: 4px; + gap: var(--a-spacing-1); align-items: center; `; diff --git a/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx b/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx index df7111546..5c9905e7b 100644 --- a/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx +++ b/frontend/src/components/documents/new-documents/modal/finish-document/unreachable-suggested-recipients.tsx @@ -101,14 +101,14 @@ const List = styled.ul` const Row = styled.div` display: flex; align-items: center; - column-gap: 8px; - padding-left: 8px; - padding-right: 8px; - padding-bottom: 4px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-bottom: var(--a-spacing-1); `; const AlertContent = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/new-documents/modal/modal-content.tsx b/frontend/src/components/documents/new-documents/modal/modal-content.tsx index 1c4ee150a..01455022c 100644 --- a/frontend/src/components/documents/new-documents/modal/modal-content.tsx +++ b/frontend/src/components/documents/new-documents/modal/modal-content.tsx @@ -151,7 +151,7 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const BottomAlignedRow = styled(Row)` @@ -162,14 +162,14 @@ const ModalBody = styled(Modal.Body)<{ $isMainDocument: boolean }>` display: flex; width: 100%; height: ${({ $isMainDocument }) => ($isMainDocument ? '80vh' : 'auto')}; - gap: 16px; + gap: var(--a-spacing-4); overflow: hidden; `; const Left = styled.div` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: fit-content; flex-shrink: 0; overflow-y: auto; diff --git a/frontend/src/components/documents/new-documents/modal/set-parent.tsx b/frontend/src/components/documents/new-documents/modal/set-parent.tsx index 9ff98f8f4..acbe64706 100644 --- a/frontend/src/components/documents/new-documents/modal/set-parent.tsx +++ b/frontend/src/components/documents/new-documents/modal/set-parent.tsx @@ -163,7 +163,7 @@ const RadioContent = styled.div` flex-direction: row; align-items: center; justify-content: flex-start; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; const RadioText = styled.span` @@ -175,6 +175,6 @@ const RadioText = styled.span` const VedleggSection = styled.section` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); align-items: flex-start; `; diff --git a/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx b/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx index 3287248ef..684ca6530 100644 --- a/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx +++ b/frontend/src/components/documents/new-documents/new-attachment-buttons.tsx @@ -93,6 +93,6 @@ const Container = styled.div` display: flex; align-items: center; flex-direction: row; - column-gap: 8px; - margin-left: 28px; + column-gap: var(--a-spacing-2); + margin-left: var(--a-spacing-7); `; diff --git a/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx b/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx index e0af27e83..ddac41301 100644 --- a/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx +++ b/frontend/src/components/documents/new-documents/new-document/archiving-icon.tsx @@ -10,8 +10,8 @@ const GRID_CSS = css` const IconContainer = styled.span` ${GRID_CSS} - width: 32px; - height: 32px; + width: var(--a-spacing-8); + height: var(--a-spacing-8); display: flex; align-items: center; justify-content: center; diff --git a/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx b/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx index e6b547453..dd16947a5 100644 --- a/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx +++ b/frontend/src/components/documents/new-documents/new-document/new-attachment.tsx @@ -161,7 +161,7 @@ interface StlyedNewAttachmentProps { export const StyledNewAttachment = styled.article` ${documentCSS} display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; diff --git a/frontend/src/components/documents/new-documents/new-document/new-document.tsx b/frontend/src/components/documents/new-documents/new-document/new-document.tsx index 31b181415..c219c407f 100644 --- a/frontend/src/components/documents/new-documents/new-document/new-document.tsx +++ b/frontend/src/components/documents/new-documents/new-document/new-document.tsx @@ -117,7 +117,7 @@ interface StlyedNewDocumentProps { const StyledNewDocument = styled.article` ${documentCSS} display: grid; - grid-column-gap: 8px; + grid-column-gap: var(--a-spacing-2); align-items: center; padding-left: 6px; padding-right: 0; diff --git a/frontend/src/components/documents/new-documents/new-document/title-style.ts b/frontend/src/components/documents/new-documents/new-document/title-style.ts index 98c9b3af4..49d3b5460 100644 --- a/frontend/src/components/documents/new-documents/new-document/title-style.ts +++ b/frontend/src/components/documents/new-documents/new-document/title-style.ts @@ -6,11 +6,10 @@ export const StyledDocumentTitle = styled.h1` grid-area: ${Fields.Title}; display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); font-size: 18px; font-weight: normal; margin: 0; - color: #0067c5; overflow: hidden; white-space: nowrap; height: 100%; diff --git a/frontend/src/components/documents/new-documents/new-parent-document.tsx b/frontend/src/components/documents/new-documents/new-parent-document.tsx index 2486011e1..16c2a4d3c 100644 --- a/frontend/src/components/documents/new-documents/new-parent-document.tsx +++ b/frontend/src/components/documents/new-documents/new-parent-document.tsx @@ -136,8 +136,8 @@ const isDroppableNewDocument = (dragged: IMainDocument | null, documentId: strin const StyledDocumentListItem = styled.li` display: block; - margin-left: 2px; - margin-right: 2px; + margin-left: var(--a-spacing-05); + margin-right: var(--a-spacing-05); border-radius: var(--a-border-radius-medium); `; @@ -155,13 +155,13 @@ const StyledParentDocumentListItem = styled(StyledDocumentListItem)` display: ${({ $isDropTarget }) => ($isDropTarget ? 'flex' : 'none')}; align-items: center; justify-content: center; - padding: 16px; + padding: var(--a-spacing-4); content: 'Vedlegg for «' attr(data-documentname) '»'; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--a-border-radius-medium); - outline: 2px dashed var(--a-border-action); + outline: var(--a-spacing-05) dashed var(--a-border-action); font-size: 18px; font-weight: bold; position: absolute; @@ -172,7 +172,7 @@ const StyledParentDocumentListItem = styled(StyledDocumentListItem)` background-color: ${({ $isDragOver }) => ($isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)')}; text-shadow: 1px 1px white, - -1px -1px white; - backdrop-filter: blur(2px); + -1px -1px var(--a-bg-default); + backdrop-filter: blur(var(--a-spacing-05)); } `; diff --git a/frontend/src/components/documents/new-documents/shared/title.tsx b/frontend/src/components/documents/new-documents/shared/title.tsx index cdcf75854..740f55047 100644 --- a/frontend/src/components/documents/new-documents/shared/title.tsx +++ b/frontend/src/components/documents/new-documents/shared/title.tsx @@ -1,5 +1,6 @@ import { useCallback, useContext, useMemo } from 'react'; import { StyledDocumentTitle } from '@app/components/documents/new-documents/new-document/title-style'; +import { DocumentLink, EllipsisTitle } from '@app/components/documents/styled-components/document-link'; import { TabContext } from '@app/components/documents/tab-context'; import { useIsTabOpen } from '@app/components/documents/use-is-tab-open'; import { toast } from '@app/components/toast/store'; @@ -12,7 +13,6 @@ import { useDocumentsPdfViewed } from '@app/hooks/settings/use-setting'; import { MouseButtons } from '@app/keys'; import { DocumentTypeEnum } from '@app/types/documents/documents'; import { IJournalfoertDokumentId } from '@app/types/oppgave-common'; -import { EllipsisTitle, StyledDocumentLink } from '../../styled-components/document-link'; interface BaseProps { title: string; @@ -143,9 +143,9 @@ export const SharedDocumentTitle = ({ title, url, documentId, icon, disabled = f return ( - {icon} {title} - + {children} ); diff --git a/frontend/src/components/documents/styled-components/attachment-list.ts b/frontend/src/components/documents/styled-components/attachment-list.ts index 353cf92df..e2731569d 100644 --- a/frontend/src/components/documents/styled-components/attachment-list.ts +++ b/frontend/src/components/documents/styled-components/attachment-list.ts @@ -2,8 +2,8 @@ import { css, styled } from 'styled-components'; const StyledDocumentListItem = styled.li` display: block; - margin-left: 2px; - margin-right: 2px; + margin-left: var(--a-spacing-05); + margin-right: var(--a-spacing-05); border-radius: var(--a-border-radius-medium); `; @@ -16,7 +16,7 @@ export const StyledAttachmentList = styled.ul` position: relative; padding: 0; margin: 0; - margin-left: 12px; + margin-left: var(--a-spacing-3); list-style-type: none; `; @@ -37,7 +37,7 @@ export const JournalfoerteDocumentsAttachments = styled(StyledAttachmentList)<{ &::before { ${treeRootStructureCss} height: ${({ $treeLineHeight }) => $treeLineHeight}px; - left: 4px; + left: var(--a-spacing-1); } `; @@ -56,17 +56,17 @@ export const StyledNewAttachmentListItem: typeof StyledDocumentListItem = styled position: absolute; left: 0; right: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); margin-left: 0; margin-right: 0; &::before { content: ''; display: block; - width: 12px; + width: var(--a-spacing-3); position: absolute; left: 3px; - top: 16px; + top: var(--a-spacing-4); border-bottom: 1px solid var(--a-border-subtle); } `; @@ -77,7 +77,7 @@ export const StyledAttachmentListItem: typeof StyledDocumentListItem = styled(St position: absolute; left: 0; right: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); margin-left: 0; margin-right: 0; @@ -87,7 +87,7 @@ export const StyledAttachmentListItem: typeof StyledDocumentListItem = styled(St width: ${BRANCH_WIDTH}px; position: absolute; left: 5px; - top: 16px; + top: var(--a-spacing-4); border-bottom: 1px solid var(--a-border-subtle); } `; @@ -132,7 +132,7 @@ export const LogiskeVedleggListItemStyle = styled.li<{ $connected: boolean; $pad content: ''; position: absolute; left: 1px; - top: 12px; + top: var(--a-spacing-3); height: 1px; width: ${BRANCH_WIDTH}px; background-color: var(--a-border-subtle); diff --git a/frontend/src/components/documents/styled-components/container.ts b/frontend/src/components/documents/styled-components/container.ts index 37e358967..76e614faa 100644 --- a/frontend/src/components/documents/styled-components/container.ts +++ b/frontend/src/components/documents/styled-components/container.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components'; export const commonStyles = css` display: flex; flex-direction: column; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 8px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-2); `; diff --git a/frontend/src/components/documents/styled-components/document-link.ts b/frontend/src/components/documents/styled-components/document-link.ts deleted file mode 100644 index d8321cda2..000000000 --- a/frontend/src/components/documents/styled-components/document-link.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { styled } from 'styled-components'; - -export const StyledDocumentLink = styled.a<{ $isActive: boolean; $disabled?: boolean }>` - display: flex; - gap: 8px; - align-items: center; - cursor: ${({ $disabled }) => ($disabled === true ? 'not-allowed' : 'pointer')}; - opacity: ${({ $disabled }) => ($disabled === true ? 0.5 : 1)}; - pointer-events: ${({ $disabled }) => ($disabled === true ? 'none' : 'auto')}; - text-shadow: ${({ $isActive }) => ($isActive ? '0 0 1px #262626' : 'none')}; - border: none; - padding: 0; - font-size: inherit; - background-color: transparent; - padding-top: 0; - padding-bottom: 0; - line-height: 1.25; - font-size: 1em; - overflow: hidden; - text-align: left; - text-decoration: none; - color: var(--a-text-action); - height: 100%; - user-select: text; - - &:hover { - color: #262626; - } - - &:visited { - color: var(--a-text-visited); - } -`; - -export const EllipsisTitle = styled.span` - overflow: hidden; - text-overflow: ellipsis; -`; diff --git a/frontend/src/components/documents/styled-components/document-link.tsx b/frontend/src/components/documents/styled-components/document-link.tsx new file mode 100644 index 000000000..fcc58a709 --- /dev/null +++ b/frontend/src/components/documents/styled-components/document-link.tsx @@ -0,0 +1,64 @@ +import { css, styled } from 'styled-components'; + +interface Props extends React.AnchorHTMLAttributes { + active?: boolean; + disabled?: boolean; +} + +export const DocumentLink = ({ active = false, disabled = false, children, href, ...rest }: Props) => { + if (disabled) { + return {children}; + } + + return ( + + {children} + + ); +}; + +const sharedCss = css` + display: flex; + gap: var(--a-spacing-2); + align-items: center; + border: none; + padding: 0; + font-size: inherit; + background-color: transparent; + padding-top: 0; + padding-bottom: 0; + line-height: 1.25; + font-size: 1em; + overflow: hidden; + text-align: left; + height: 100%; +`; + +const DisabledDocumentLink = styled.span` + ${sharedCss} + color: var(--a-text-subtle); + cursor: not-allowed; + opacity: 0.5; +`; + +const StyledDocumentLink = styled.a<{ $isActive: boolean }>` + ${sharedCss} + cursor: pointer; + text-decoration: none; + color: ${({ $isActive }) => ($isActive ? 'var(--a-text-action-selected)' : 'var(--a-text-action)')}; + text-shadow: ${({ $isActive }) => ($isActive ? '0 0 1px var(--a-text-action-selected)' : 'none')}; + user-select: text; + + &:hover { + color: var(--a-text-action-hover); + } + + &:visited { + color: ${({ $isActive }) => ($isActive ? 'var(--a-text-action-selected)' : 'var(--a-text-visited)')}; + } +`; + +export const EllipsisTitle = styled.span` + overflow: hidden; + text-overflow: ellipsis; +`; diff --git a/frontend/src/components/documents/styled-components/document.ts b/frontend/src/components/documents/styled-components/document.ts index cd04c96b2..8a1b27a17 100644 --- a/frontend/src/components/documents/styled-components/document.ts +++ b/frontend/src/components/documents/styled-components/document.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components'; export const documentCSS = css` position: relative; width: 100%; - height: 32px; + height: var(--a-spacing-8); padding-right: 0; border-radius: var(--a-border-radius-medium); background-color: transparent; diff --git a/frontend/src/components/documents/styled-components/list-header.ts b/frontend/src/components/documents/styled-components/list-header.ts index 094d57505..9ed740066 100644 --- a/frontend/src/components/documents/styled-components/list-header.ts +++ b/frontend/src/components/documents/styled-components/list-header.ts @@ -1,8 +1,8 @@ import { css } from 'styled-components'; export const listHeaderCSS = css` - padding-bottom: 8px; - border-bottom: 1px solid #c6c2bf; - margin-right: 2px; - margin-left: 2px; + padding-bottom: var(--a-spacing-2); + border-bottom: 1px solid var(--a-border-divider); + margin-right: var(--a-spacing-05); + margin-left: var(--a-spacing-05); `; diff --git a/frontend/src/components/documents/upload-file/upload-file.tsx b/frontend/src/components/documents/upload-file/upload-file.tsx index 27aaa6689..b8563b99c 100644 --- a/frontend/src/components/documents/upload-file/upload-file.tsx +++ b/frontend/src/components/documents/upload-file/upload-file.tsx @@ -37,7 +37,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const isDocumentType = (type: string): type is DistribusjonsType => diff --git a/frontend/src/components/editable-title/editable-title.tsx b/frontend/src/components/editable-title/editable-title.tsx index e990a0f7d..dfb64b475 100644 --- a/frontend/src/components/editable-title/editable-title.tsx +++ b/frontend/src/components/editable-title/editable-title.tsx @@ -75,7 +75,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-area: title; `; @@ -122,7 +122,7 @@ const StyledTextField = styled(TextField)` `; const NoStyleButton = styled.button` - background: none; + background-color: none; border: none; padding: 0; margin: 0; diff --git a/frontend/src/components/feilregistrering/feilregistrering.tsx b/frontend/src/components/feilregistrering/feilregistrering.tsx index f50ca9574..573839ef4 100644 --- a/frontend/src/components/feilregistrering/feilregistrering.tsx +++ b/frontend/src/components/feilregistrering/feilregistrering.tsx @@ -105,7 +105,7 @@ const FloatingBox = styled(Box)` left: ${({ $align }) => ($align === 'left' ? '0' : 'auto')}; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); z-index: 1; min-width: 400px; `; diff --git a/frontend/src/components/feilregistrering/register.tsx b/frontend/src/components/feilregistrering/register.tsx index 0809cb39e..a18c8ca02 100644 --- a/frontend/src/components/feilregistrering/register.tsx +++ b/frontend/src/components/feilregistrering/register.tsx @@ -69,7 +69,7 @@ export const Register = ({ oppgaveId }: OppgaveId) => { const Code = styled.code` background-color: var(--a-bg-subtle); - padding: 2px 4px; + padding: var(--a-spacing-05) var(--a-spacing-1); border-radius: var(--a-border-radius-medium); font-size: 13px; `; diff --git a/frontend/src/components/feilregistrering/styled-components.ts b/frontend/src/components/feilregistrering/styled-components.ts index 0855bc370..17199a0e7 100644 --- a/frontend/src/components/feilregistrering/styled-components.ts +++ b/frontend/src/components/feilregistrering/styled-components.ts @@ -4,5 +4,5 @@ export const Row = styled.div` display: flex; justify-content: space-between; align-items: center; - column-gap: 16px; + column-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/filter-dropdown/dropdown.tsx b/frontend/src/components/filter-dropdown/dropdown.tsx index 0025ddf76..a9222f2c2 100644 --- a/frontend/src/components/filter-dropdown/dropdown.tsx +++ b/frontend/src/components/filter-dropdown/dropdown.tsx @@ -58,10 +58,10 @@ const StyledDropdown = styled.div` flex-direction: column; padding: 0; margin: 0; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + border: 1px solid var(--a-border-divider); + box-shadow: 0 1px var(--a-spacing-1) 0 rgba(0, 0, 0, 0.3); z-index: 1; max-width: 100%; max-height: 100%; diff --git a/frontend/src/components/filter-dropdown/filter-dropdown.tsx b/frontend/src/components/filter-dropdown/filter-dropdown.tsx index 46b5ba8c2..5bec2698b 100644 --- a/frontend/src/components/filter-dropdown/filter-dropdown.tsx +++ b/frontend/src/components/filter-dropdown/filter-dropdown.tsx @@ -91,8 +91,8 @@ const StyledPopup = styled.div` max-height: ${({ $maxHeight = 500 }) => $maxHeight}px; max-width: ${({ $maxWidth }) => $maxWidth ?? 'unset'}; z-index: 22; - background-color: white; + background-color: var(--a-bg-default); border-radius: 0.25rem; - border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + border: 1px solid var(--a-border-divider); + box-shadow: 0 1px var(--a-spacing-1) 0 rgba(0, 0, 0, 0.3); `; diff --git a/frontend/src/components/filter-dropdown/filter-list.tsx b/frontend/src/components/filter-dropdown/filter-list.tsx index 2be38ab13..8a6a0bc7c 100644 --- a/frontend/src/components/filter-dropdown/filter-list.tsx +++ b/frontend/src/components/filter-dropdown/filter-list.tsx @@ -35,7 +35,7 @@ export const FilterList = ({ selected, options, focused, onCha ); const StyledCheckboxGroup = styled(CheckboxGroup)` - padding-left: 8px; - padding-right: 8px; - padding-top: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/filter-dropdown/grouped-filter-list.tsx b/frontend/src/components/filter-dropdown/grouped-filter-list.tsx index c1201c450..f804ee7db 100644 --- a/frontend/src/components/filter-dropdown/grouped-filter-list.tsx +++ b/frontend/src/components/filter-dropdown/grouped-filter-list.tsx @@ -149,8 +149,8 @@ const Container = styled.div<{ $openDirection: Direction }>` left: ${({ $openDirection }) => ($openDirection === 'down' ? '0' : '100%')}; z-index: 2; max-height: 400px; - scroll-margin-bottom: 16px; - background-color: white; + scroll-margin-bottom: var(--a-spacing-4); + background-color: var(--a-bg-default); border-radius: 0.25rem; border: 1px solid var(--a-border-subtle); box-shadow: var(--a-shadow-medium); @@ -160,11 +160,11 @@ const Container = styled.div<{ $openDirection: Direction }>` `; const StyledGroupHeader = styled.h3` - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: 600; - margin-left: 16px; - margin-top: 16px; - margin-bottom: 8px; + margin-left: var(--a-spacing-4); + margin-top: var(--a-spacing-4); + margin-bottom: var(--a-spacing-2); `; const GroupList = styled.ul` diff --git a/frontend/src/components/filter-dropdown/header.tsx b/frontend/src/components/filter-dropdown/header.tsx index 4c54ab77f..db79dee4e 100644 --- a/frontend/src/components/filter-dropdown/header.tsx +++ b/frontend/src/components/filter-dropdown/header.tsx @@ -102,9 +102,9 @@ const StyledButton = styled(Button)` const StyledHeader = styled.div` position: sticky; top: 0; - border-bottom: 1px solid #c6c2bf; - background-color: white; - padding: 8px; + border-bottom: 1px solid var(--a-border-divider); + background-color: var(--a-bg-default); + padding: var(--a-spacing-2); display: flex; justify-content: space-between; z-index: 1; diff --git a/frontend/src/components/filter-dropdown/nested-filter-list.tsx b/frontend/src/components/filter-dropdown/nested-filter-list.tsx index 681bd06a0..f6fa28cc3 100644 --- a/frontend/src/components/filter-dropdown/nested-filter-list.tsx +++ b/frontend/src/components/filter-dropdown/nested-filter-list.tsx @@ -288,7 +288,7 @@ const Container = styled.div` position: absolute; top: 100%; z-index: 22; - background-color: white; + background-color: var(--a-bg-default); padding: var(--a-spacing-2); margin: 0; overflow-y: auto; @@ -306,9 +306,9 @@ const StyledButton = styled(Button)` const StyledHeader = styled.div` position: sticky; top: 0; - border-bottom: 1px solid #c6c2bf; - background-color: white; - padding: 8px; + border-bottom: 1px solid var(--a-border-divider); + background-color: var(--a-bg-default); + padding: var(--a-spacing-2); display: flex; justify-content: space-between; `; @@ -340,19 +340,19 @@ const ExpandButton = styled(Button)` const StyledCheckbox = styled(Checkbox)` grid-area: checkbox; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const CheckboxLabel = styled.span` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const GroupLabel = styled(BodyShort)` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); height: 100%; overflow: hidden; `; diff --git a/frontend/src/components/filter-dropdown/option.tsx b/frontend/src/components/filter-dropdown/option.tsx index ee5d16629..b6bafcce3 100644 --- a/frontend/src/components/filter-dropdown/option.tsx +++ b/frontend/src/components/filter-dropdown/option.tsx @@ -50,6 +50,6 @@ Filter.displayName = 'Filter'; const CheckboxContent = styled.div` display: flex; flex-direction: row; - column-gap: 4px; + column-gap: var(--a-spacing-1); align-items: center; `; diff --git a/frontend/src/components/header/user-menu/dropdown.tsx b/frontend/src/components/header/user-menu/dropdown.tsx index 2c63fcc3a..4d525b4f5 100644 --- a/frontend/src/components/header/user-menu/dropdown.tsx +++ b/frontend/src/components/header/user-menu/dropdown.tsx @@ -44,21 +44,21 @@ const Menu = styled(Dropdown.Menu)` max-width: 300px; & .navds-body-short { - font-size: 16px; + font-size: var(--a-spacing-4); } `; const linkStyle = css` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; text-decoration: none; cursor: pointer; background: transparent; - padding-left: 16px; - padding-right: 16px; - padding-top: 12px; - padding-bottom: 12px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-top: var(--a-spacing-3); + padding-bottom: var(--a-spacing-3); `; const StyledLink = styled.a` @@ -97,7 +97,7 @@ const StyledCopyButton = styled(CopyButton)` `; const VersionIcon = styled(CogRotationIcon)` - margin-right: 8px; + margin-right: var(--a-spacing-2); `; const getShortVersion = (version: string): string => { diff --git a/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx b/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx index 6e3eadf20..4d5ffb214 100644 --- a/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx +++ b/frontend/src/components/kvalitetsvurdering/kvalitetsvurdering.tsx @@ -49,6 +49,6 @@ const Kvalitetsskjema = () => { }; const KvalitetsVurderingContainer = styled.div` - padding: 16px; + padding: var(--a-spacing-4); width: 400px; `; diff --git a/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts b/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts index a94edf556..d17323773 100644 --- a/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts +++ b/frontend/src/components/kvalitetsvurdering/v1/styled-components.ts @@ -2,7 +2,7 @@ import { Checkbox, HelpText } from '@navikt/ds-react'; import { styled } from 'styled-components'; export const FormSection = styled.section` - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); `; export const RadioButtonsRow = styled.div` @@ -12,14 +12,14 @@ export const RadioButtonsRow = styled.div` `; export const StyledCommentField = styled.div` - margin-left: 32px; - width: calc(100% - 32px); + margin-left: var(--a-spacing-8); + width: calc(100% - var(--a-spacing-8)); `; export const StyledCheckboxContainer = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; position: relative; `; @@ -38,5 +38,5 @@ export const StyledHelpText = styled(HelpText)` export const StyledHeaderHelpTextWrapper = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx index f41b5d6cc..b736b4cb6 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/container-with-helptext.tsx @@ -17,7 +17,7 @@ export const ContainerWithHelpText = ({ children, helpText, placement = 'right' const Container = styled.span` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; width: 100%; justify-content: space-between; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx index 97494ae99..8d951e926 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/heading-with-helptext.tsx @@ -19,6 +19,6 @@ export const HeadingWithHelpText = ({ children, helpText, size = 'small', placem const Container = styled(StyledHeading)` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts b/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts index a083e3d59..6e24f9be2 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts +++ b/frontend/src/components/kvalitetsvurdering/v2/common/styled-components.ts @@ -3,21 +3,21 @@ import { styled } from 'styled-components'; export const RadioButtonsRow = styled.div` display: flex; - gap: 16px; + gap: var(--a-spacing-4); width: 100%; `; export const SubSection = styled.div` - margin-bottom: 16px; - margin-left: 32px; + margin-bottom: var(--a-spacing-4); + margin-left: var(--a-spacing-8); `; export const StyledHeading = styled(Heading)` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; export const StyledRadioGroup = styled(RadioGroup)` - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx b/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx index b48610863..dbf81c007 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/common/textarea.tsx @@ -97,10 +97,10 @@ const StatusContainer = styled.div` display: flex; align-items: center; justify-content: flex-end; - margin-top: 4px; + margin-top: var(--a-spacing-1); `; const StyledBodyLong = styled(BodyLong)` - border-left: 2px solid var(--a-border-subtle); - padding-left: 8px; + border-left: var(--a-spacing-05) solid var(--a-border-subtle); + padding-left: var(--a-spacing-2); `; diff --git a/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx b/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx index 6cba77d17..b9578da4e 100644 --- a/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx +++ b/frontend/src/components/kvalitetsvurdering/v2/kvalitetsskjema.tsx @@ -47,5 +47,5 @@ export const KvalitetsskjemaV2 = () => { const StyledKvalitetsskjema = styled.section` display: flex; flex-direction: column; - row-gap: 32px; + row-gap: var(--a-spacing-8); `; diff --git a/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx b/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx index 39951c6a4..0a3487a60 100644 --- a/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx +++ b/frontend/src/components/malteksteksjon-references/maltekstseksjon-references.tsx @@ -113,7 +113,7 @@ const ListItemContent = styled.div<{ $selected: boolean }>` font-weight: ${({ $selected }) => ($selected ? 'bold' : 'normal')}; display: flex; align-items: center; - gap: 2px; + gap: var(--a-spacing-05); `; interface ListItemProps { @@ -161,5 +161,5 @@ const Container = styled.div` position: relative; display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/malteksteksjon-references/preview.tsx b/frontend/src/components/malteksteksjon-references/preview.tsx index 193e755f3..59044c000 100644 --- a/frontend/src/components/malteksteksjon-references/preview.tsx +++ b/frontend/src/components/malteksteksjon-references/preview.tsx @@ -70,9 +70,9 @@ export const Preview = ({ id }: Props) => { }; const PreviewBackground = styled.div` - background: var(--a-surface-subtle); + background-color: var(--a-surface-subtle); padding: var(--a-spacing-4); - border-radius: 4px; + border-radius: var(--a-spacing-1); display: flex; flex-direction: column; align-items: center; @@ -83,7 +83,7 @@ const Sheet = styled.div` padding: 20mm; padding-top: 15mm; box-shadow: var(--a-shadow-medium); - background: white; + background-color: var(--a-bg-default); width: 210mm; `; diff --git a/frontend/src/components/maltekstseksjoner/filters.tsx b/frontend/src/components/maltekstseksjoner/filters.tsx index 7c752e780..2ba5fe820 100644 --- a/frontend/src/components/maltekstseksjoner/filters.tsx +++ b/frontend/src/components/maltekstseksjoner/filters.tsx @@ -51,6 +51,6 @@ export const Filters = ({ maltekst, query }: Props) => { const Container = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); grid-area: filters; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts b/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts index cd0258f67..defa37217 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/common.ts @@ -8,8 +8,8 @@ export const Container = styled.section` grid-template-areas: 'header header' 'sidebar text-list'; - row-gap: 8px; - column-gap: 8px; + row-gap: var(--a-spacing-2); + column-gap: var(--a-spacing-2); overflow-y: hidden; height: 100%; border-radius: var(--a-border-radius-medium); @@ -21,7 +21,7 @@ export const Container = styled.section` export const Header = styled.header` grid-area: header; display: grid; - gap: 8px; + gap: var(--a-spacing-2); grid-template-areas: 'title actions' 'metadata actions' @@ -29,7 +29,7 @@ export const Header = styled.header` 'tags tags'; grid-template-columns: 1fr fit-content; white-space: nowrap; - padding-right: 8px; + padding-right: var(--a-spacing-2); `; export const MetadataContainer = styled.div` @@ -37,7 +37,7 @@ export const MetadataContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const StyledHeading = styled(Heading)` @@ -52,8 +52,8 @@ export const SidebarContainer = styled.div` grid-area: sidebar; display: flex; flex-direction: column; - row-gap: 8px; - padding-top: 4px; + row-gap: var(--a-spacing-2); + padding-top: var(--a-spacing-1); `; export const List = styled.ul` @@ -69,12 +69,12 @@ export const DateTimeContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const ActionsContainer = styled.div` grid-area: actions; display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx index 5187f65db..f0bb61a91 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/available-texts-by-type.tsx @@ -165,8 +165,8 @@ const isRichtext = (text: IText): text is IRichText => const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; - margin-top: 16px; + gap: var(--a-spacing-2); + margin-top: var(--a-spacing-4); height: 75vh; overflow-y: hidden; `; @@ -185,5 +185,5 @@ const StyledTableHeader = styled(Table.Header)` const Row = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/row.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/row.tsx index 8fba90ab0..d0e7acd6c 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/row.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/available-texts/row.tsx @@ -63,6 +63,6 @@ export const Row = ({ textId, draftMaltekstseksjonIdList, publishedMaltekstseksj const List = styled.ul` list-style: none; padding: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); margin: 0; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/sidebar.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/sidebar.tsx index 435184c28..87ab22db6 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/sidebar.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/draft/sidebar.tsx @@ -156,7 +156,7 @@ export const Sidebar = ({ maltekstseksjon, query }: Props) => { const ButtonsContainer = styled.section` display: flex; flex-direction: column; - row-gap: 8px; - margin-top: 8px; + row-gap: var(--a-spacing-2); + margin-top: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx index 621f289d1..1ea8faf06 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/list-item.tsx @@ -140,8 +140,8 @@ const Container = styled.div` const ErrorContainer = styled(Container)` display: flex; align-items: center; - margin-left: 8px; - gap: 8px; + margin-left: var(--a-spacing-2); + gap: var(--a-spacing-2); `; const HelpTextContainer = styled.div` @@ -152,7 +152,7 @@ const HelpTextContainer = styled.div` const SkeletonContainer = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx index d2e4fe834..647ae2d12 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list-filters.tsx @@ -58,7 +58,7 @@ const Container = styled.div` grid-area: filters; display: flex; flex-direction: row; - column-gap: 8px; - padding: 4px; + column-gap: var(--a-spacing-2); + padding: var(--a-spacing-1); padding-top: 0; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx index 2eb3c6df2..08d74e317 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-list.tsx @@ -93,24 +93,23 @@ const Placeholder = styled.div` width: fit-content; min-width: 1330px; grid-area: content; - margin-bottom: 4px; - margin-top: 4px; - margin-right: 4px; + margin-bottom: var(--a-spacing-1); + margin-top: var(--a-spacing-1); `; const StyledSearch = styled(Search)` grid-area: search; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); `; const StyledList = styled(List)` display: flex; flex-direction: column; overflow-y: auto; - row-gap: 4px; - margin-top: 4px; - padding: 4px; + row-gap: var(--a-spacing-1); + margin-top: var(--a-spacing-1); + padding: var(--a-spacing-1); grid-area: list; `; @@ -119,7 +118,7 @@ const Container = styled.article` grid-template-columns: 700px min-content; grid-template-rows: min-content min-content min-content 1fr; grid-template-areas: 'header content' 'filters content' 'search content' 'list content'; - column-gap: 8px; + column-gap: var(--a-spacing-2); height: 100%; overflow-y: hidden; `; @@ -129,7 +128,7 @@ const Header = styled.header` flex-direction: row; justify-content: left; align-items: center; - column-gap: 16px; - margin-bottom: 8px; + column-gap: var(--a-spacing-4); + margin-bottom: var(--a-spacing-2); grid-area: header; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx index f8a7018c0..affdfbbe4 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-published.tsx @@ -91,7 +91,7 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-area: metadata; `; @@ -99,5 +99,5 @@ const LabelValue = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx index 7ed0450ec..beab651f6 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon-versions.tsx @@ -99,7 +99,7 @@ const PanelContent = styled.div` display: flex; flex-direction: column; overflow: hidden; - margin-top: 8px; + margin-top: var(--a-spacing-2); flex-grow: 1; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx index fbbb95255..c9539b904 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/maltekstseksjon.tsx @@ -29,12 +29,12 @@ const MaltekstseksjonContainer = styled.div` overflow: hidden; border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); - padding: 8px; + padding: var(--a-spacing-2); padding-top: 0; padding-right: 0; - margin-right: 4px; - margin-bottom: 4px; - margin-top: 4px; + margin-right: var(--a-spacing-1); + margin-bottom: var(--a-spacing-1); + margin-top: var(--a-spacing-1); grid-area: content; `; @@ -42,6 +42,6 @@ const MaltekstseksjonHeader = styled.div` display: flex; align-items: center; justify-content: flex-end; - padding: 16px; + padding: var(--a-spacing-4); padding-bottom: 0; `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx index b85163903..c3bee130a 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/preview.tsx @@ -120,5 +120,5 @@ const Overlay = styled.div` `; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx index c76833c56..3cc4554eb 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/read-only.tsx @@ -42,7 +42,7 @@ export const MaltekstseksjonReadOnly = ({ id, textToHighlight }: Props) => { }; const Section = styled.section` - margin-top: 16px; + margin-top: var(--a-spacing-4); `; const List = styled.ul` @@ -51,18 +51,18 @@ const List = styled.ul` margin: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); border-bottom-left-radius: var(--a-border-radius-medium); border-top-left-radius: var(--a-border-radius-medium); - padding-bottom: 8px; - padding-top: 16px; - padding-left: 12px; - border-left: 4px solid var(--a-surface-info); + padding-bottom: var(--a-spacing-2); + padding-top: var(--a-spacing-4); + padding-left: var(--a-spacing-3); + border-left: var(--a-spacing-1) solid var(--a-surface-info); `; const StyledTextPreview = styled(TextPreview)<{ $highlight: boolean }>` outline: ${({ $highlight }) => ($highlight ? '4px solid var(--a-border-action-selected)' : 'none')}; - outline-offset: 2px; + outline-offset: var(--a-spacing-05); border-radius: var(--a-border-radius-medium); `; @@ -70,5 +70,5 @@ const Header = styled.header` display: flex; justify-content: flex-start; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx index 1664579ba..47234729a 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/texts.tsx @@ -55,7 +55,7 @@ const StyledTabs = styled(Tabs)` overflow: hidden; display: flex; flex-direction: column; - padding-right: 8px; + padding-right: var(--a-spacing-2); `; const StyledTabPanel = styled(Tabs.Panel)` diff --git a/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx b/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx index 31c2a993f..37e758b0c 100644 --- a/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx +++ b/frontend/src/components/maltekstseksjoner/maltekstseksjon/unpublish-maltekstseksjon-button.tsx @@ -93,5 +93,5 @@ const ConfirmUnpublishMaltekstseksjonButton = ({ const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/styled-components.ts b/frontend/src/components/maltekstseksjoner/styled-components.ts index 14f7d85ea..2784a56db 100644 --- a/frontend/src/components/maltekstseksjoner/styled-components.ts +++ b/frontend/src/components/maltekstseksjoner/styled-components.ts @@ -33,8 +33,8 @@ export const TextListItem = styled.li` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; - padding-left: 8px; + column-gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); position: relative; transition-property: background-color; transition-duration: 0.2s; @@ -82,12 +82,12 @@ export const ListItem = styled.li` width: 100%; height: 100%; border-radius: var(--a-border-radius-medium); - outline: 2px dashed var(--a-border-action); + outline: var(--a-spacing-05) dashed var(--a-border-action); background-color: ${({ $isDragOver = false }) => $isDragOver ? 'rgba(153, 195, 255, 0.5)' : 'rgba(230, 240, 255, 0.5)'}; text-shadow: 1px 1px white, - -1px -1px white; + -1px -1px var(--a-bg-default); backdrop-filter: blur(2px); } `; diff --git a/frontend/src/components/maltekstseksjoner/text-link.tsx b/frontend/src/components/maltekstseksjoner/text-link.tsx index 3d19061c9..540056420 100644 --- a/frontend/src/components/maltekstseksjoner/text-link.tsx +++ b/frontend/src/components/maltekstseksjoner/text-link.tsx @@ -55,12 +55,12 @@ const EllipsisTitle = styled.span` const StyledLink = styled(Link)` display: grid; grid-template-columns: min-content 1fr 85px min-content; - gap: 8px; + gap: var(--a-spacing-2); align-content: center; align-items: center; width: 100%; color: inherit; text-decoration: none; - padding: 8px; + padding: var(--a-spacing-2); border-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/preview.tsx b/frontend/src/components/maltekstseksjoner/texts/preview.tsx index 19e5de630..f103a1f4f 100644 --- a/frontend/src/components/maltekstseksjoner/texts/preview.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/preview.tsx @@ -86,5 +86,5 @@ const Header = styled.header` display: flex; justify-content: flex-start; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx b/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx index 12bc630bd..a7e2c13bc 100644 --- a/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/published-rich-text.tsx @@ -86,7 +86,7 @@ const Container = styled.section` flex-direction: column; flex-grow: 1; position: relative; - padding-top: 8px; + padding-top: var(--a-spacing-2); overflow-y: auto; `; @@ -95,7 +95,7 @@ const Header = styled.header` flex-direction: row; justify-content: flex-start; align-items: center; - column-gap: 8px; - margin-bottom: 4px; - min-height: 32px; + column-gap: var(--a-spacing-2); + margin-bottom: var(--a-spacing-1); + min-height: var(--a-spacing-8); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx index 847996224..04353c8c1 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft-footer.tsx @@ -66,8 +66,8 @@ const ButtonsContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; - margin-top: 8px; + column-gap: var(--a-spacing-2); + margin-top: var(--a-spacing-2); `; const Right = styled.div` diff --git a/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts b/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts index 84504b20b..a20521bbb 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts +++ b/frontend/src/components/maltekstseksjoner/texts/text-draft/styled-components.ts @@ -4,7 +4,7 @@ export const Container = styled.section` display: flex; flex-direction: column; position: relative; - padding-top: 8px; + padding-top: var(--a-spacing-2); `; export const Header = styled.header` @@ -12,12 +12,12 @@ export const Header = styled.header` flex-direction: row; justify-content: space-between; align-items: center; - margin-bottom: 4px; + margin-bottom: var(--a-spacing-1); `; export const HeaderGroup = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-list.tsx b/frontend/src/components/maltekstseksjoner/texts/text-list.tsx index f82dc51eb..20ba39991 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-list.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-list.tsx @@ -154,7 +154,7 @@ export const TextList = ({ maltekstseksjon, query }: Props) => { const List = styled.div` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); margin: 0; overflow-y: auto; overflow-x: hidden; @@ -175,20 +175,20 @@ const ArrowButtonsContainer = styled.div` const StyledTextVersions = styled(TextVersions)` border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); - border-width: 4px; + border-width: var(--a-spacing-1); border-style: solid; border-color: ${({ isActive }) => (isActive ? 'var(--a-border-action-selected)' : 'transparent')}; flex-grow: 1; - padding: 4px; - margin-left: 4px; - margin-right: 4px; + padding: var(--a-spacing-1); + margin-left: var(--a-spacing-1); + margin-right: var(--a-spacing-1); flex-grow: 1; &:last-child { - margin-bottom: 4px; + margin-bottom: var(--a-spacing-1); } `; const StyledAlert = styled(Alert)` - margin-top: 8px; + margin-top: var(--a-spacing-2); `; diff --git a/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx b/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx index 517063843..f2d5240db 100644 --- a/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx +++ b/frontend/src/components/maltekstseksjoner/texts/text-published-footer.tsx @@ -52,7 +52,7 @@ const Container = styled.div` flex-direction: row; justify-content: space-between; align-items: center; - margin-top: 8px; + margin-top: var(--a-spacing-2); white-space: nowrap; `; diff --git a/frontend/src/components/nav/nav.tsx b/frontend/src/components/nav/nav.tsx index 329e8b5fa..d30aa7c33 100644 --- a/frontend/src/components/nav/nav.tsx +++ b/frontend/src/components/nav/nav.tsx @@ -121,7 +121,7 @@ const StyledNavLinkList = styled.ul` padding: 0; align-items: center; margin: 0; - gap: 16px; + gap: var(--a-spacing-4); `; const StyledNavListItem = styled.li` @@ -130,26 +130,25 @@ const StyledNavListItem = styled.li` const StyledNavLink = styled(NavLink)` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; width: 100%; - border-bottom: 4px solid transparent; + border-bottom: var(--a-spacing-1) solid transparent; word-break: keep-all; white-space: nowrap; border-left: none; text-decoration: none; color: var(--a-text-on-inverted); padding: 0; - padding-left: 4px; - padding-right: 4px; + padding-left: var(--a-spacing-1); + padding-right: var(--a-spacing-1); transition: border-bottom-color 0.2s ease-in-out; &.active { - border-bottom: 4px solid var(--a-blue-300); + border-bottom: var(--a-spacing-1) solid var(--a-blue-300); } &:hover { - /* border-bottom: 4px solid var(--a-text-action); */ - border-bottom: 4px solid #666; + border-bottom: var(--a-spacing-1) solid var(--a-text-subtle); } `; diff --git a/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx b/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx index d00f30388..1675ecf24 100644 --- a/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx +++ b/frontend/src/components/oppgavebehandling-controls/oppgavebehandling-controls.tsx @@ -30,13 +30,13 @@ const ControlPanel = styled.header` display: flex; flex-direction: row; flex-wrap: wrap; - column-gap: 16px; - row-gap: 8px; - padding: 0 16px; - background-color: #f8f8f8; - padding-top: 8px; - padding-bottom: 8px; - border-bottom: 1px solid #c9c9c9; + column-gap: var(--a-spacing-4); + row-gap: var(--a-spacing-2); + padding: 0 var(--a-spacing-4); + background-color: var(--a-bg-default); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); + border-bottom: 1px solid var(--a-border-divider); `; const OppgavebehandlingInformation = styled.div` diff --git a/frontend/src/components/oppgavebehandling-controls/user-info.tsx b/frontend/src/components/oppgavebehandling-controls/user-info.tsx index 222d2fa42..ff2ff2544 100644 --- a/frontend/src/components/oppgavebehandling-controls/user-info.tsx +++ b/frontend/src/components/oppgavebehandling-controls/user-info.tsx @@ -21,7 +21,7 @@ export const UserInfo = ({ sakenGjelder, id }: IOppgavebehandlingBase) => ( const User = styled.section` display: flex; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); border-right: 1px solid #c9c9c9; - padding-right: 16px; + padding-right: var(--a-spacing-4); `; diff --git a/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx b/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx index 3646931bb..d08c118fd 100644 --- a/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx +++ b/frontend/src/components/oppgavebehandling-footer/deassign/hjemmel-list.tsx @@ -59,7 +59,7 @@ export const HjemmelList = ({ selected, ytelseId, direction, onChange, error }: }; const StyledLoader = styled(Loader)` - margin: 8px; + margin: var(--a-spacing-2); `; const StyledHr = styled.hr` @@ -77,13 +77,13 @@ const Container = styled.div` display: flex; flex-direction: column; position: absolute; - gap: 8px; + gap: var(--a-spacing-2); right: 100%; min-width: 200px; - padding: 8px; + padding: var(--a-spacing-2); - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - border: 1px solid #c6c2bf; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); + border: 1px solid var(--a-border-divider); + box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx index 4af6abbf4..819877f9d 100644 --- a/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx +++ b/frontend/src/components/oppgavebehandling-footer/sett-paa-vent/panel.tsx @@ -171,7 +171,7 @@ const StyledBox = styled(Box)` position: absolute; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); z-index: 1; bottom: 100%; left: 0; @@ -180,7 +180,7 @@ const StyledBox = styled(Box)` const Row = styled.div` display: flex; - column-gap: 16px; + column-gap: var(--a-spacing-4); align-items: center; flex-direction: row; `; @@ -188,5 +188,5 @@ const Row = styled.div` const Column = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/oppgavebehandling-footer/styled-components.ts b/frontend/src/components/oppgavebehandling-footer/styled-components.ts index 5a4b6aa81..cee3b3fd8 100644 --- a/frontend/src/components/oppgavebehandling-footer/styled-components.ts +++ b/frontend/src/components/oppgavebehandling-footer/styled-components.ts @@ -26,11 +26,11 @@ export const StyledPopup = styled.div` width: 400px; bottom: 100%; right: 0; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; export const StyledButton = styled.button` - background: transparent; + background-color: transparent; border: 0; padding: 0; margin: 0; @@ -40,7 +40,7 @@ export const StyledButton = styled.button` export const StyledIconButton = styled(StyledButton)` position: absolute; right: 0; - padding: 16px; + padding: var(--a-spacing-4); `; export const StyledButtons = styled.div` @@ -48,7 +48,7 @@ export const StyledButtons = styled.div` align-items: center; align-content: center; justify-content: space-between; - gap: 16px; + gap: var(--a-spacing-4); `; export enum FooterType { @@ -105,6 +105,6 @@ export const StyledFooter = styled.div<{ $type: FooterType }>` export const StyledFinishOppgaveButtons = styled.div<{ $width: number }>` display: flex; justify-content: space-between; - gap: 16px; + gap: var(--a-spacing-4); width: ${({ $width }) => $width}px; `; diff --git a/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx b/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx index 37a6426ce..cc55c9862 100644 --- a/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx +++ b/frontend/src/components/oppgavebehandling-footer/validation-summary-popup.tsx @@ -69,5 +69,5 @@ const Popup = ({ open, setOpen, hasErrors }: PopupProps) => { const StyledAlertStripeChildren = styled.div` display: flex; align-items: center; - gap: 12px; + gap: var(--a-spacing-3); `; diff --git a/frontend/src/components/oppgavebehandling-panels/styled-components.tsx b/frontend/src/components/oppgavebehandling-panels/styled-components.tsx index b8355caca..e964091f8 100644 --- a/frontend/src/components/oppgavebehandling-panels/styled-components.tsx +++ b/frontend/src/components/oppgavebehandling-panels/styled-components.tsx @@ -6,7 +6,7 @@ export const PanelContainer = styled.section` min-width: fit-content; height: 100%; max-height: 100%; - background: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); overflow-x: hidden; @@ -16,11 +16,11 @@ export const PanelContainer = styled.section` export const PageContainer = styled.main` display: flex; flex-direction: row; - column-gap: 12px; - padding-bottom: 12px; - padding-top: 8px; - padding-left: 8px; - padding-right: 8px; + column-gap: var(--a-spacing-3); + padding-bottom: var(--a-spacing-3); + padding-top: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); width: 100%; flex-grow: 1; overflow-x: scroll; diff --git a/frontend/src/components/oppgavestyring/oppgavestyring.tsx b/frontend/src/components/oppgavestyring/oppgavestyring.tsx index 6f207e4df..7ddd71e70 100644 --- a/frontend/src/components/oppgavestyring/oppgavestyring.tsx +++ b/frontend/src/components/oppgavestyring/oppgavestyring.tsx @@ -14,7 +14,7 @@ export const Oppgavestyring = (oppgave: IOppgave) => ( const Container = styled.div` display: grid; - column-gap: 8px; + column-gap: var(--a-spacing-2); grid-template-columns: 110px 400px; grid-template-areas: 'tildel saksbehandler'; `; diff --git a/frontend/src/components/oppgavestyring/saksbehandler.tsx b/frontend/src/components/oppgavestyring/saksbehandler.tsx index 360997320..8e90bbdc4 100644 --- a/frontend/src/components/oppgavestyring/saksbehandler.tsx +++ b/frontend/src/components/oppgavestyring/saksbehandler.tsx @@ -144,7 +144,7 @@ const StyledSaksbehandler = styled.span` padding: 0.25rem; border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - background-color: white; + background-color: var(--a-bg-default); `; const StyledErrorMessage = styled(ErrorMessage)` diff --git a/frontend/src/components/oppgavestyring/toasts.tsx b/frontend/src/components/oppgavestyring/toasts.tsx index a97f794c7..ab9f8fd89 100644 --- a/frontend/src/components/oppgavestyring/toasts.tsx +++ b/frontend/src/components/oppgavestyring/toasts.tsx @@ -66,5 +66,5 @@ const ButtonRow = styled.div` display: flex; flex-direction: row; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/part-status-list/part-status-list.tsx b/frontend/src/components/part-status-list/part-status-list.tsx index 09dac5ac6..ac5c106db 100644 --- a/frontend/src/components/part-status-list/part-status-list.tsx +++ b/frontend/src/components/part-status-list/part-status-list.tsx @@ -53,7 +53,7 @@ const Container = styled.div` display: flex; flex-direction: row; flex-wrap: wrap; - gap: 4px; + gap: var(--a-spacing-1); `; const STATUS_NAMES: Record = { diff --git a/frontend/src/components/part/edit-part.tsx b/frontend/src/components/part/edit-part.tsx index c554668bc..d3b86a11e 100644 --- a/frontend/src/components/part/edit-part.tsx +++ b/frontend/src/components/part/edit-part.tsx @@ -115,5 +115,5 @@ const Result = ({ part, search, isError, ...props }: ResultProps) => { const StyledEditPart = styled.div` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/part/lookup.tsx b/frontend/src/components/part/lookup.tsx index 4c0f004a4..d4d1092a2 100644 --- a/frontend/src/components/part/lookup.tsx +++ b/frontend/src/components/part/lookup.tsx @@ -59,7 +59,7 @@ const StyledResult = styled(Tag)` display: flex; flex-direction: column; align-items: start; - gap: 8px; + gap: var(--a-spacing-2); `; const getUnreachableText = (statusList: IPart['statusList']): string | null => { diff --git a/frontend/src/components/part/part.tsx b/frontend/src/components/part/part.tsx index 79635ef71..f2500aa2c 100644 --- a/frontend/src/components/part/part.tsx +++ b/frontend/src/components/part/part.tsx @@ -110,7 +110,7 @@ interface EditButtonProps { const Container = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); flex-wrap: wrap; align-items: center; `; diff --git a/frontend/src/components/popup-container/popup-container.tsx b/frontend/src/components/popup-container/popup-container.tsx index aa7f64bc4..4c61bf22f 100644 --- a/frontend/src/components/popup-container/popup-container.tsx +++ b/frontend/src/components/popup-container/popup-container.tsx @@ -31,8 +31,8 @@ const StyledPanel = styled.div<{ $direction: Direction }>` bottom: 100%; display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); box-shadow: var(--a-shadow-medium); - background: var(--a-bg-default); + background-color: var(--a-bg-default); padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx b/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx index 9a429ca45..f21df1656 100644 --- a/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx +++ b/frontend/src/components/redaktoer-rich-text/redaktoer-rich-text.tsx @@ -75,16 +75,14 @@ export const RedaktoerRichText = forwardRef( RedaktoerRichText.displayName = 'RedaktoerRichText'; -const PADDING = '16px'; - const Content = styled.div` - padding: ${PADDING}; - background: var(--a-surface-subtle); + padding: var(--a-spacing-4); + background-color: var(--a-surface-subtle); flex-grow: 1; overflow: hidden; overflow-y: auto; position: relative; display: flex; flex-direction: column; - min-width: calc(210mm + ${PADDING} + ${PADDING}); + min-width: calc(210mm + var(--a-spacing-4) + var(--a-spacing-4)); `; diff --git a/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx b/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx index 15a83a680..03fc92c59 100644 --- a/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx +++ b/frontend/src/components/relevant-oppgaver/relevant-oppgaver.tsx @@ -153,5 +153,5 @@ const VENTENDE_COLUMNS: ColumnKeyEnum[] = [ const StyledBody = styled(Modal.Body)` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/rich-text-preview/rich-text-preview.tsx b/frontend/src/components/rich-text-preview/rich-text-preview.tsx index 2d88b5fd7..cc331ef53 100644 --- a/frontend/src/components/rich-text-preview/rich-text-preview.tsx +++ b/frontend/src/components/rich-text-preview/rich-text-preview.tsx @@ -75,10 +75,10 @@ const PreviewContainer = styled.div` `; const ContentContainer = styled.div<{ $openSide: OpenSide; $openDirection: OpenDirection }>` - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); position: absolute; - padding: 8px; + padding: var(--a-spacing-2); left: ${({ $openSide }) => ($openSide === 'left' ? 'auto' : '0')}; right: ${({ $openSide }) => ($openSide === 'left' ? '0' : 'auto')}; bottom: ${({ $openDirection }) => ($openDirection === 'up' ? '100%' : 'auto')}; diff --git a/frontend/src/components/role-list/role-list-item.tsx b/frontend/src/components/role-list/role-list-item.tsx index e177940fa..1742327dd 100644 --- a/frontend/src/components/role-list/role-list-item.tsx +++ b/frontend/src/components/role-list/role-list-item.tsx @@ -24,7 +24,7 @@ export const RoleItem = ({ role, variant }: Props) => { const RoleContent = styled.button` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; cursor: pointer; margin: 0; diff --git a/frontend/src/components/rows-per-page.tsx b/frontend/src/components/rows-per-page.tsx index ae4549c47..bf402f7ea 100644 --- a/frontend/src/components/rows-per-page.tsx +++ b/frontend/src/components/rows-per-page.tsx @@ -43,7 +43,7 @@ export const RowsPerPage = ({ settingKey, pageSize, 'data-testid': testId }: Pro const StyledRowsPerPage = styled.div` display: flex; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; justify-self: right; `; diff --git a/frontend/src/components/saved-status/saved-status.tsx b/frontend/src/components/saved-status/saved-status.tsx index 94df0b498..ef0aaff77 100644 --- a/frontend/src/components/saved-status/saved-status.tsx +++ b/frontend/src/components/saved-status/saved-status.tsx @@ -65,7 +65,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; const StatusText = styled.span` diff --git a/frontend/src/components/search/common/oppgaver.tsx b/frontend/src/components/search/common/oppgaver.tsx index e4b75f7e0..b68137d0e 100644 --- a/frontend/src/components/search/common/oppgaver.tsx +++ b/frontend/src/components/search/common/oppgaver.tsx @@ -48,7 +48,7 @@ export const Oppgaver = ({ data, isFetching, isLoading, error, refetch }: Oppgav const ErrorContainer = styled.div` display: flex; - margin: 16px; + margin: var(--a-spacing-4); `; const SkeletonTables = () => ( diff --git a/frontend/src/components/search/fnr/person.tsx b/frontend/src/components/search/fnr/person.tsx index f9c24f16a..db417b53a 100644 --- a/frontend/src/components/search/fnr/person.tsx +++ b/frontend/src/components/search/fnr/person.tsx @@ -63,13 +63,13 @@ const StyledPerson = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 16px; - padding-left: 16px; - padding-right: 16px; + column-gap: var(--a-spacing-4); + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); `; const SkeletonContainer = styled.div` display: flex; - gap: 16px; - margin-left: 16px; + gap: var(--a-spacing-4); + margin-left: var(--a-spacing-4); `; diff --git a/frontend/src/components/search/oppgave-search.tsx b/frontend/src/components/search/oppgave-search.tsx index 965945493..bd0162ca2 100644 --- a/frontend/src/components/search/oppgave-search.tsx +++ b/frontend/src/components/search/oppgave-search.tsx @@ -126,8 +126,8 @@ export const OppgaveSearch = () => { const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; - padding: 16px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const StyledSearch = styled(Search)` @@ -136,5 +136,5 @@ const StyledSearch = styled(Search)` const Line = styled.div` display: flex; - gap: 2px; + gap: var(--a-spacing-05); `; diff --git a/frontend/src/components/settings/abbreviations/abbreviation.tsx b/frontend/src/components/settings/abbreviations/abbreviation.tsx index 3890ad015..2937f87cb 100644 --- a/frontend/src/components/settings/abbreviations/abbreviation.tsx +++ b/frontend/src/components/settings/abbreviations/abbreviation.tsx @@ -125,7 +125,7 @@ export const Abbreviation = ({ const StyledAbbreviation = styled.div` display: grid; - gap: 8px; + gap: var(--a-spacing-2); grid-template-columns: 250px 500px min-content min-content; align-items: start; `; diff --git a/frontend/src/components/settings/abbreviations/abbreviations.tsx b/frontend/src/components/settings/abbreviations/abbreviations.tsx index d5aec2399..aaebaf954 100644 --- a/frontend/src/components/settings/abbreviations/abbreviations.tsx +++ b/frontend/src/components/settings/abbreviations/abbreviations.tsx @@ -75,7 +75,7 @@ export const AbbreviationsContent = ({ headingSize = 'small' }: ContentProps) => }; const SpacedSection = styled.section` - margin-bottom: 24px; + margin-bottom: var(--a-spacing-6); `; const AbbreviationList = styled.ul` @@ -84,5 +84,5 @@ const AbbreviationList = styled.ul` list-style: none; display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/settings/abbreviations/example.tsx b/frontend/src/components/settings/abbreviations/example.tsx index 8bf63828d..df294573d 100644 --- a/frontend/src/components/settings/abbreviations/example.tsx +++ b/frontend/src/components/settings/abbreviations/example.tsx @@ -33,5 +33,5 @@ const StyledHeading = styled(Heading)` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/settings/settings.tsx b/frontend/src/components/settings/settings.tsx index 618dacc00..2d0ae66c7 100644 --- a/frontend/src/components/settings/settings.tsx +++ b/frontend/src/components/settings/settings.tsx @@ -17,5 +17,5 @@ const StyledSettings = styled.article` grid-template-areas: 'filters abbreviations' 'signature abbreviations'; - gap: 16px; + gap: var(--a-spacing-4); `; diff --git a/frontend/src/components/settings/signature.tsx b/frontend/src/components/settings/signature.tsx index e27da2706..4eab0e187 100644 --- a/frontend/src/components/settings/signature.tsx +++ b/frontend/src/components/settings/signature.tsx @@ -164,20 +164,20 @@ const Status = ({ isError, isLoading, isSuccess }: StatusProps) => { }; const StyledInput = styled(TextField)` - margin-top: 16px; + margin-top: var(--a-spacing-4); margin-right: 6px; width: 350px; `; const StyledRadioGroup = styled(RadioGroup)` - margin-top: 16px; + margin-top: var(--a-spacing-4); `; const StyledSignature = styled.div` display: flex; align-items: flex-end; width: 100%; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledSuccess = styled(CheckmarkCircleIcon)` @@ -188,11 +188,11 @@ const StyledError = styled(XMarkOctagonIcon)` color: #ba3a26; `; const StyledStatus = styled.span` - margin-bottom: 12px; + margin-bottom: var(--a-spacing-3); display: flex; align-items: center; `; const StyledStatusText = styled.span` - font-size: 12px; + font-size: var(--a-spacing-3); margin-left: 3px; `; diff --git a/frontend/src/components/settings/styled-components.ts b/frontend/src/components/settings/styled-components.ts index 26c43fa84..fad8e338d 100644 --- a/frontend/src/components/settings/styled-components.ts +++ b/frontend/src/components/settings/styled-components.ts @@ -6,23 +6,24 @@ export const SettingsSection = styled.section<{ $area: string }>` box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); width: fit-content; - padding: 24px; + padding: var(--a-spacing-6); width: 100%; height: fit-content; + background-color: var(--a-bg-subtle); `; export const SectionHeader = styled.h1` - font-size: 24px; + font-size: var(--a-spacing-6); margin: 0; - margin-bottom: 24px; + margin-bottom: var(--a-spacing-6); display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; export const StyledFilters = styled.div` display: flex; - gap: 20px; + gap: var(--a-spacing-5); width: 100%; flex-wrap: wrap; `; @@ -42,7 +43,7 @@ export const StyledFieldset = styled(Fieldset)` export const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); position: absolute; top: 0; right: 0; diff --git a/frontend/src/components/smart-editor-texts/create-translated-text.tsx b/frontend/src/components/smart-editor-texts/create-translated-text.tsx index a37332235..e465d9a3d 100644 --- a/frontend/src/components/smart-editor-texts/create-translated-text.tsx +++ b/frontend/src/components/smart-editor-texts/create-translated-text.tsx @@ -45,5 +45,5 @@ export const CreateTranslatedPlainText = ({ id }: Props) => { const ButtonWrapper = styled.div` display: flex; justify-content: center; - padding: 16px; + padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor-texts/edit/edit.tsx b/frontend/src/components/smart-editor-texts/edit/edit.tsx index 6966b8027..35ea4d60c 100644 --- a/frontend/src/components/smart-editor-texts/edit/edit.tsx +++ b/frontend/src/components/smart-editor-texts/edit/edit.tsx @@ -134,13 +134,13 @@ const Container = styled.div` const Header = styled.div` display: flex; flex-direction: column; - row-gap: 8px; - padding: 16px; + row-gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const LineContainer = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/edit/footer.tsx b/frontend/src/components/smart-editor-texts/edit/footer.tsx index 96d339778..43c6717dc 100644 --- a/frontend/src/components/smart-editor-texts/edit/footer.tsx +++ b/frontend/src/components/smart-editor-texts/edit/footer.tsx @@ -132,8 +132,8 @@ const LastEdit = ({ edits, textType }: LastEditProps) => { const Container = styled.div` display: flex; flex-direction: column; - row-gap: 8px; - padding: 16px; + row-gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const LastEditContainer = styled.span` @@ -145,7 +145,7 @@ const LastEditContainer = styled.span` const Row = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); width: 100%; justify-content: flex-end; `; diff --git a/frontend/src/components/smart-editor-texts/edit/header-footer.tsx b/frontend/src/components/smart-editor-texts/edit/header-footer.tsx index 17dff6aa8..9f70a8888 100644 --- a/frontend/src/components/smart-editor-texts/edit/header-footer.tsx +++ b/frontend/src/components/smart-editor-texts/edit/header-footer.tsx @@ -33,7 +33,7 @@ const getLabel = (type: PlainTextTypes.HEADER | PlainTextTypes.FOOTER) => type === PlainTextTypes.HEADER ? 'Topptekst' : 'Bunntekst'; const StyledTextarea = styled(Textarea)` - margin: 16px; + margin: var(--a-spacing-4); `; const Container = styled.div` diff --git a/frontend/src/components/smart-editor-texts/edit/load-text.tsx b/frontend/src/components/smart-editor-texts/edit/load-text.tsx index bcb6ac592..f20454235 100644 --- a/frontend/src/components/smart-editor-texts/edit/load-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/load-text.tsx @@ -29,8 +29,8 @@ const Container = styled.article` position: relative; display: flex; flex-direction: column; - width: calc(210mm * var(--kabal-editor-scale) + 64px); - min-width: calc(210mm + 64px); + width: calc(210mm * var(--kabal-editor-scale) + var(--a-spacing-16)); + min-width: calc(210mm + var(--a-spacing-16)); flex-shrink: 0; height: 100%; box-shadow: var(--a-shadow-small); @@ -41,5 +41,5 @@ const EmptyContainer = styled(Container)` justify-content: center; align-items: center; color: var(--a-surface-subtle); - min-width: calc(210mm + 64px); + min-width: calc(210mm + var(--a-spacing-16)); `; diff --git a/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx b/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx index 90b5b0718..c673a09ce 100644 --- a/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx +++ b/frontend/src/components/smart-editor-texts/edit/published-plain-text.tsx @@ -32,23 +32,23 @@ export const PublishedPlainText = ({ text, onDraftCreated, hasDraft }: Props) => }; const Background = styled.div` - background: var(--a-bg-subtle); - padding: 16px; + background-color: var(--a-bg-subtle); + padding: var(--a-spacing-4); display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); `; const PublishedContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; - padding: 16px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-4); `; const StyledBodyLong = styled(BodyLong)` - background: var(--a-bg-default); - padding: 16px; - border-radius: 4px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); + border-radius: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx b/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx index 4dbe58570..ea2f3b2fc 100644 --- a/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx +++ b/frontend/src/components/smart-editor-texts/edit/standalone-text-versions.tsx @@ -88,7 +88,7 @@ const VersionsLoaded = ({ versions, firstText, id, textType }: VersionsLoadedPro const Header = styled.div` display: flex; justify-content: space-between; - padding: 16px; + padding: var(--a-spacing-4); padding-bottom: 0; `; @@ -152,7 +152,7 @@ const StyledVersionTabs: typeof VersionTabs = styled(VersionTabs)` const PublishedContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; - padding: 16px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-4); height: 100%; `; diff --git a/frontend/src/components/smart-editor-texts/edit/tags.tsx b/frontend/src/components/smart-editor-texts/edit/tags.tsx index 0bf335d0d..612a272ec 100644 --- a/frontend/src/components/smart-editor-texts/edit/tags.tsx +++ b/frontend/src/components/smart-editor-texts/edit/tags.tsx @@ -175,7 +175,7 @@ export const TagContainer = styled.div` flex-direction: row; flex-wrap: wrap; align-content: start; - gap: 8px; + gap: var(--a-spacing-2); flex-grow: 0; grid-area: tags; max-height: 250px; diff --git a/frontend/src/components/smart-editor-texts/filtered-text-list.tsx b/frontend/src/components/smart-editor-texts/filtered-text-list.tsx index 9df5b13d6..854ea9ad9 100644 --- a/frontend/src/components/smart-editor-texts/filtered-text-list.tsx +++ b/frontend/src/components/smart-editor-texts/filtered-text-list.tsx @@ -38,11 +38,11 @@ export const FilteredTextList = ({ textType }: Props) => { const Row = styled.div` display: flex; flex-direction: row; - gap: 4px; + gap: var(--a-spacing-1); `; const Container = styled.div` - row-gap: 8px; + row-gap: var(--a-spacing-2); z-index: 22; overflow: visible; display: flex; @@ -52,7 +52,7 @@ const Container = styled.div` const Header = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); position: relative; - background-color: #fff; + background-color: var(--a-bg-default); `; diff --git a/frontend/src/components/smart-editor-texts/filters.tsx b/frontend/src/components/smart-editor-texts/filters.tsx index b080e5aca..865a4b2d7 100644 --- a/frontend/src/components/smart-editor-texts/filters.tsx +++ b/frontend/src/components/smart-editor-texts/filters.tsx @@ -84,5 +84,5 @@ export const Filters = ({ textType, className }: Props) => { const Container = styled.div` display: flex; flex-direction: row; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx b/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx index 580ccd34d..8103585e2 100644 --- a/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx +++ b/frontend/src/components/smart-editor-texts/hjemler-select/popup.tsx @@ -29,11 +29,11 @@ const StyledPopup = styled.div` left: 0; max-height: 400px; max-width: 275px; - scroll-margin-bottom: 16px; + scroll-margin-bottom: var(--a-spacing-4); z-index: 22; - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - border: 1px solid #c6c2bf; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3); + border: 1px solid var(--a-border-divider); + box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx b/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx index 79d452fbc..344d26dc7 100644 --- a/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx +++ b/frontend/src/components/smart-editor-texts/smart-editor-texts.tsx @@ -84,16 +84,16 @@ const Header = styled.header` display: flex; flex-direction: row; justify-content: flex-start; - column-gap: 16px; - padding-bottom: 16px; + column-gap: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); `; const Content = styled.div` display: flex; - column-gap: 16px; - padding-bottom: 16px; - padding-top: 8px; - padding-right: 8px; + column-gap: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); + padding-top: var(--a-spacing-2); + padding-right: var(--a-spacing-2); overflow-y: hidden; flex-grow: 1; `; diff --git a/frontend/src/components/smart-editor-texts/text-list/styled-components.ts b/frontend/src/components/smart-editor-texts/text-list/styled-components.ts index bb540131e..f79ff6b72 100644 --- a/frontend/src/components/smart-editor-texts/text-list/styled-components.ts +++ b/frontend/src/components/smart-editor-texts/text-list/styled-components.ts @@ -8,7 +8,7 @@ export const LoaderOverlay = styled.div` justify-content: center; align-items: center; height: 100%; - background-color: #fafafa; + background-color: var(--a-bg-default); `; export const Container = styled.div` @@ -22,22 +22,22 @@ export const Container = styled.div` export const StyledHeaders = styled.div` display: grid; - grid-template-columns: 1fr 85px 160px 48px; - gap: 8px; - padding-left: 8px; - padding-right: 8px; + grid-template-columns: 1fr 85px 160px var(--a-spacing-12); + gap: var(--a-spacing-2); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); position: sticky; top: 0; - background-color: #fff; + background-color: var(--a-bg-default); box-shadow: 0px 5px 5px -3px rgb(0, 0, 0, 20%); - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-bottom-left-radius: var(--a-spacing-1); + border-bottom-right-radius: var(--a-spacing-1); `; export const StyledList = styled.ul` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); width: 100%; list-style: none; padding: 0; @@ -58,20 +58,20 @@ export const ListItem = styled.li<{ $active: boolean }>` export const StyledLink = styled(Link)` display: grid; - grid-template-columns: 1fr 85px 160px 48px; - gap: 8px; + grid-template-columns: 1fr 85px 160px var(--a-spacing-12); + gap: var(--a-spacing-2); align-content: center; align-items: center; width: 100%; color: inherit; text-decoration: none; - padding: 8px; + padding: var(--a-spacing-2); `; export const StyledTitle = styled.span` display: flex; align-items: center; - gap: 2px; + gap: var(--a-spacing-05); overflow: hidden; white-space: nowrap; `; diff --git a/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx b/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx index d0f00e3e1..607e937d8 100644 --- a/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx +++ b/frontend/src/components/smart-editor-texts/unpublish-text-button.tsx @@ -147,7 +147,7 @@ const getSuffix = (draftList: string[], publishedList: string[]) => { const Container = styled.div` display: flex; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const StyledReferences = styled(MaltekstseksjonReferences)` diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx index 9e746ed8d..8f7b58795 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/edit-utfall-set.tsx @@ -123,18 +123,18 @@ const getAvailableUtfall = (selected: UtfallEnum[], sakstyperToUtfall: ISakstype const Container = styled.section` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const Legend = styled.span` display: flex; flex-direction: row; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; const ButtonContainer = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx index b78385013..208e9bc39 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/read-utfall-set.tsx @@ -58,5 +58,5 @@ const UtfallTags = styled.div` flex-direction: row; flex-wrap: wrap; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx b/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx index 4752811ff..b5ecf6b2d 100644 --- a/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx +++ b/frontend/src/components/smart-editor-texts/utfall-set-filter/utfall-set-filter.tsx @@ -126,23 +126,23 @@ const Dropdown = styled.div` position: absolute; top: 100%; left: 0; - background-color: white; + background-color: var(--a-bg-default); border: 1px solid black; z-index: 100; width: 400px; overflow: auto; - padding: 8px; + padding: var(--a-spacing-2); border-radius: var(--a-border-radius-medium); box-shadow: var(--a-shadow-medium); display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const StyledList = styled.ul` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); list-style: none; padding: 0; margin: 0; @@ -150,7 +150,7 @@ const StyledList = styled.ul` const BaseListItem = styled.li` border-radius: var(--a-border-radius-medium); - padding: 8px; + padding: var(--a-spacing-2); `; const StyledListItem = styled(BaseListItem)` diff --git a/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx b/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx index 42a5926f8..a0802e58b 100644 --- a/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx +++ b/frontend/src/components/smart-editor/bookmarks/bookmarks.tsx @@ -72,8 +72,8 @@ const BookmarkList = styled.ul` width: 100%; margin: 0; padding: 0; - padding-left: 16px; - padding-right: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); position: relative; max-width: 350px; `; diff --git a/frontend/src/components/smart-editor/comments/comment-list.tsx b/frontend/src/components/smart-editor/comments/comment-list.tsx index 03a840e14..53884a2f7 100644 --- a/frontend/src/components/smart-editor/comments/comment-list.tsx +++ b/frontend/src/components/smart-editor/comments/comment-list.tsx @@ -18,9 +18,9 @@ export const CommentList = ({ comments, isExpanded }: CommentListProps) => ( const List = styled.ul` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); padding: 0; margin: 0; list-style: none; - font-size: 16px; + font-size: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/comments/comment-section.tsx b/frontend/src/components/smart-editor/comments/comment-section.tsx index 86f1a2bf2..d3a18d5ef 100644 --- a/frontend/src/components/smart-editor/comments/comment-section.tsx +++ b/frontend/src/components/smart-editor/comments/comment-section.tsx @@ -25,5 +25,5 @@ export const CommentSection = () => { const StyledCommentSection = styled.div` width: fit-content; - padding-right: 16px; + padding-right: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/comments/comment.tsx b/frontend/src/components/smart-editor/comments/comment.tsx index ec26a8e6e..84aa80990 100644 --- a/frontend/src/components/smart-editor/comments/comment.tsx +++ b/frontend/src/components/smart-editor/comments/comment.tsx @@ -94,18 +94,18 @@ const StyledButtons = styled.div` right: 0; display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); - background-color: white; - padding: 4px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-1); border-radius: var(--a-border-radius-medium); white-space: nowrap; z-index: 1; `; const StyledListItem = styled.li` - padding-left: 4px; - border-left: 4px solid lightgrey; + padding-left: var(--a-spacing-1); + border-left: var(--a-spacing-1) solid lightgrey; &:first-child { padding-left: 0; @@ -123,7 +123,7 @@ const StyledComment = styled.article` const StyledName = styled.div` display: block; width: 100%; - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: bold; flex-grow: 1; overflow: hidden; @@ -138,9 +138,9 @@ const StyledDate = styled.time` `; const StyledText = styled.p` - font-size: 16px; + font-size: var(--a-spacing-4); margin: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); white-space: break-spaces; overflow-wrap: break-word; `; diff --git a/frontend/src/components/smart-editor/comments/number-of-comments.tsx b/frontend/src/components/smart-editor/comments/number-of-comments.tsx index 5fbb58fb1..702ae664e 100644 --- a/frontend/src/components/smart-editor/comments/number-of-comments.tsx +++ b/frontend/src/components/smart-editor/comments/number-of-comments.tsx @@ -39,30 +39,30 @@ const Wrapper = ({ children }: WrapperProps) => ( const WrapperContainer = styled.div` position: sticky; - top: 16px; + top: var(--a-spacing-4); z-index: 10; grid-area: counters; display: flex; width: 100%; min-width: 382px; height: 52px; - padding-left: 16px; - padding-right: 16px; - padding-bottom: 16px; + padding-left: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-bottom: var(--a-spacing-4); flex-shrink: 0; `; const StyledAlert = styled.div` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); align-items: center; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); width: 100%; min-width: 350px; height: 100%; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); `; diff --git a/frontend/src/components/smart-editor/comments/skeleton-thread.tsx b/frontend/src/components/smart-editor/comments/skeleton-thread.tsx index 4b70745d1..97a963b62 100644 --- a/frontend/src/components/smart-editor/comments/skeleton-thread.tsx +++ b/frontend/src/components/smart-editor/comments/skeleton-thread.tsx @@ -15,13 +15,13 @@ export const SkeletonThread = () => ( const StyledThread = styled.section` display: flex; flex-direction: column; - gap: 16px; - background-color: white; - padding: 16px; + gap: var(--a-spacing-4); + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); border: 1px solid #c9c9c9; border-radius: var(--a-border-radius-medium); - margin-left: 12px; - margin-right: 12px; + margin-left: var(--a-spacing-3); + margin-right: var(--a-spacing-3); user-select: none; opacity: 0.5; transition-duration: 0.2s; @@ -30,14 +30,14 @@ const StyledThread = styled.section` scroll-snap-align: start; &:hover { - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + box-shadow: var(--a-shadow-medium); } `; const ThreadContent = styled.div` display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; const RightSkeleton = styled(Skeleton)` diff --git a/frontend/src/components/smart-editor/comments/styled-components.ts b/frontend/src/components/smart-editor/comments/styled-components.ts index 0654393cd..839e832f2 100644 --- a/frontend/src/components/smart-editor/comments/styled-components.ts +++ b/frontend/src/components/smart-editor/comments/styled-components.ts @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; export const StyledNewReply = styled.div` border-radius: var(--a-border-radius-medium); - font-size: 16px; + font-size: var(--a-spacing-4); `; export const StyledNewThread = styled.div` @@ -10,11 +10,11 @@ export const StyledNewThread = styled.div` right: -2px; transform: translateX(100%); width: ${350 - 12 - 12}px; - background-color: white; + background-color: var(--a-bg-default); z-index: 5; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - padding: 16px; - margin-bottom: 40px; + box-shadow: var(--a-shadow-medium); + padding: var(--a-spacing-4); + margin-bottom: var(--a-spacing-10); border-radius: var(--a-border-radius-medium); border: 1px solid #c9c9c9; `; @@ -23,8 +23,8 @@ export const StyledCommentButtonContainer = styled.div` display: flex; justify-content: space-between; flex-wrap: wrap; - gap: 16px; - margin-top: 16px; - margin-right: 20px; + gap: var(--a-spacing-4); + margin-top: var(--a-spacing-4); + margin-right: var(--a-spacing-5); width: 100%; `; diff --git a/frontend/src/components/smart-editor/comments/thread-list.tsx b/frontend/src/components/smart-editor/comments/thread-list.tsx index c9b8f3600..b80e4f5bc 100644 --- a/frontend/src/components/smart-editor/comments/thread-list.tsx +++ b/frontend/src/components/smart-editor/comments/thread-list.tsx @@ -33,23 +33,23 @@ const StyledThreadSections = styled.div` display: flex; flex-direction: column; align-items: flex-end; - row-gap: 16px; - padding-left: 16px; + row-gap: var(--a-spacing-4); + padding-left: var(--a-spacing-4); flex-shrink: 0; width: 100%; height: 100%; - padding-bottom: 32px; + padding-bottom: var(--a-spacing-8); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; - scroll-padding-bottom: 24px; - scroll-padding-top: 48px; + scroll-padding-bottom: var(--a-spacing-6); + scroll-padding-top: var(--a-spacing-12); `; const StyledThreadListContainer = styled.section` position: relative; display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); height: 100%; `; diff --git a/frontend/src/components/smart-editor/comments/thread.tsx b/frontend/src/components/smart-editor/comments/thread.tsx index 8fd0cf6fd..0c6058acf 100644 --- a/frontend/src/components/smart-editor/comments/thread.tsx +++ b/frontend/src/components/smart-editor/comments/thread.tsx @@ -39,11 +39,11 @@ interface StyledProps { const StyledThread = styled.section` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: ${THREAD_WIDTH}px; position: ${({ $isAbsolute }) => ($isAbsolute ? 'absolute' : 'static')}; background-color: var(--a-surface-default); - padding: 16px; + padding: var(--a-spacing-4); border: 1px solid #c9c9c9; border-radius: var(--a-border-radius-medium); will-change: transform, opacity, box-shadow; @@ -67,5 +67,5 @@ const Replies = styled.div` font-style: italic; color: var(--a-gray-700); text-align: right; - font-size: 16px; + font-size: var(--a-spacing-4); `; diff --git a/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx b/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx index 587254acc..752055724 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/god-formulering.tsx @@ -85,7 +85,7 @@ const ShowMore = ({ isExpanded, setIsExpanded }: ShowMoreProps) => ( const Left = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); `; const ActionWrapper = styled.div` @@ -106,18 +106,18 @@ const StyledGodFormulering = styled.section<{ $isFocused: boolean }>` ${godFormuleringBaseStyle} display: flex; flex-direction: column; - gap: 8px; - padding: 8px; + gap: var(--a-spacing-2); + padding: var(--a-spacing-2); background-color: var(--a-bg-subtle); outline: ${OUTLINE_WIDTH} solid ${({ $isFocused }) => ($isFocused ? 'var(--a-border-focus)' : 'transparent')}; white-space: normal; `; const StyledContent = styled.div<{ $isExpanded: boolean }>` - background-color: white; + background-color: var(--a-bg-default); border-radius: var(--a-border-radius-medium); - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); max-height: ${({ $isExpanded }) => ($isExpanded ? 'unset' : '200px')}; overflow: hidden; position: relative; @@ -129,8 +129,8 @@ const StyledContent = styled.div<{ $isExpanded: boolean }>` bottom: 0; left: 0; width: 100%; - height: 40px; - box-shadow: inset 0 -40px 20px -5px rgb(245, 245, 245, 0.9); + height: var(--a-spacing-10); + box-shadow: inset 0 -40px var(--a-spacing-5) -5px rgb(245, 245, 245, 0.9); } > :first-child { diff --git a/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx b/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx index 41c944b9e..cabd08aa9 100644 --- a/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx +++ b/frontend/src/components/smart-editor/gode-formuleringer/styles.tsx @@ -2,12 +2,12 @@ import { Skeleton } from '@navikt/ds-react'; import { css, styled } from 'styled-components'; export const StyledGodeFormuleringer = styled.section` - padding-top: 16px; + padding-top: var(--a-spacing-4); display: flex; flex-direction: column; position: sticky; top: 0; - gap: 16px; + gap: var(--a-spacing-4); width: 350px; height: 100%; `; @@ -16,9 +16,9 @@ export const Top = styled.div` display: flex; flex-direction: column; flex-shrink: 0; - row-gap: 8px; - padding-right: 16px; - padding-left: 4px; + row-gap: var(--a-spacing-2); + padding-right: var(--a-spacing-4); + padding-left: var(--a-spacing-1); `; export const Header = styled.header` @@ -32,18 +32,18 @@ export const ListContainer = styled.div` flex-direction: column; overflow-y: auto; flex-grow: 1; - row-gap: 16px; - padding-right: 16px; - padding-left: 4px; + row-gap: var(--a-spacing-4); + padding-right: var(--a-spacing-4); + padding-left: var(--a-spacing-1); `; export const GodeFormuleringerTitle = styled.h1` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); margin: 0; - font-size: 20px; + font-size: var(--a-spacing-5); `; export const OUTLINE_WIDTH = '3px'; @@ -57,7 +57,7 @@ export const godFormuleringBaseStyle = css` } &:last-child { - margin-bottom: 32px; + margin-bottom: var(--a-spacing-8); } `; diff --git a/frontend/src/components/smart-editor/history/history-editor.tsx b/frontend/src/components/smart-editor/history/history-editor.tsx index a1672c9bc..aba861f8c 100644 --- a/frontend/src/components/smart-editor/history/history-editor.tsx +++ b/frontend/src/components/smart-editor/history/history-editor.tsx @@ -105,8 +105,8 @@ const HistoryEditorContainer = styled.div` position: relative; overflow-y: auto; overflow-x: visible; - padding-top: 16px; - padding-right: 16px; + padding-top: var(--a-spacing-4); + padding-right: var(--a-spacing-4); height: max-content; min-width: 210mm; diff --git a/frontend/src/components/smart-editor/history/history.tsx b/frontend/src/components/smart-editor/history/history.tsx index 0a8d6ebaa..9c0da1346 100644 --- a/frontend/src/components/smart-editor/history/history.tsx +++ b/frontend/src/components/smart-editor/history/history.tsx @@ -132,10 +132,10 @@ const HistoryItem = ({ documentVersion, isActive, setSelectedVersion }: HistoryI const ListContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); align-items: center; - margin-bottom: 16px; - margin-right: 16px; + margin-bottom: var(--a-spacing-4); + margin-right: var(--a-spacing-4); min-width: 300px; position: sticky; top: 0; @@ -164,7 +164,7 @@ const StyledHistory = styled.ul` margin: 0; padding: 0; white-space: nowrap; - row-gap: 8px; + row-gap: var(--a-spacing-2); background-color: var(--a-surface-default); padding: var(--a-spacing-2); box-shadow: var(--a-shadow-medium); diff --git a/frontend/src/components/smart-editor/new-document/generated-icon.tsx b/frontend/src/components/smart-editor/new-document/generated-icon.tsx index a3c258ed9..b45a864f8 100644 --- a/frontend/src/components/smart-editor/new-document/generated-icon.tsx +++ b/frontend/src/components/smart-editor/new-document/generated-icon.tsx @@ -225,6 +225,6 @@ const StyledSvg = styled.svg` box-shadow: var(--a-shadow-medium); border: 1px solid var(--a-border-default); border-radius: var(--a-border-radius-medium); - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); width: 100%; `; diff --git a/frontend/src/components/smart-editor/new-document/styled-components.ts b/frontend/src/components/smart-editor/new-document/styled-components.ts index 4a28f4f30..d916cf1bf 100644 --- a/frontend/src/components/smart-editor/new-document/styled-components.ts +++ b/frontend/src/components/smart-editor/new-document/styled-components.ts @@ -1,11 +1,11 @@ import { styled } from 'styled-components'; export const StyledTemplateButton = styled.button` - background: transparent; - font-size: 16px; + background-color: transparent; + font-size: var(--a-spacing-4); font-weight: 600; border: none; - padding: 16px; + padding: var(--a-spacing-4); cursor: pointer; display: flex; flex-direction: column; @@ -16,16 +16,16 @@ export const StyledTemplateButton = styled.button` min-width: 190px; &:hover { - background: var(--a-surface-hover); + background-color: var(--a-surface-hover); } `; export const StyledNewDocument = styled.section` width: 826px; height: 100%; - padding: 32px; - padding-top: 16px; - background: var(--a-bg-default); + padding: var(--a-spacing-8); + padding-top: var(--a-spacing-4); + background-color: var(--a-bg-default); overflow-y: auto; `; @@ -47,6 +47,6 @@ export const StyledLoadingOverlay = styled.div` align-items: center; height: 100%; width: 100%; - background: rgba(0, 0, 0, 0.25); + background-color: rgba(0, 0, 0, 0.25); top: 0; `; diff --git a/frontend/src/components/smart-editor/smart-editor-panel.tsx b/frontend/src/components/smart-editor/smart-editor-panel.tsx index 9bd2bc50c..4199ea6bd 100644 --- a/frontend/src/components/smart-editor/smart-editor-panel.tsx +++ b/frontend/src/components/smart-editor/smart-editor-panel.tsx @@ -1,38 +1,22 @@ -import { styled } from 'styled-components'; import { Behandling } from '@app/components/behandling/behandling'; +import { TabbedEditors } from '@app/components/smart-editor/tabbed-editors/tabbed-editors'; import { useOppgave } from '@app/hooks/oppgavebehandling/use-oppgave'; import { useSmartEditorEnabled } from '@app/hooks/settings/use-setting'; -import { PanelContainer } from '../oppgavebehandling-panels/styled-components'; -import { TabbedEditors } from './tabbed-editors/tabbed-editors'; export const SmartEditorPanel = () => { const { value: shown = true } = useSmartEditorEnabled(); const { data: oppgave } = useOppgave(); - const hide = !shown || typeof oppgave === 'undefined' || oppgave.feilregistrering !== null; + const hide = !shown || oppgave === undefined || oppgave.feilregistrering !== null; if (hide) { return null; } return ( - - - - - - + <> + + + ); }; - -const SmartEditorContainer = styled.div` - display: flex; - gap: 16px; - padding: 0; - min-height: 100%; - overflow: hidden; -`; - -const StyledPanelContainer = styled(PanelContainer)` - background: transparent; -`; diff --git a/frontend/src/components/smart-editor/tabbed-editors/editor.tsx b/frontend/src/components/smart-editor/tabbed-editors/editor.tsx index 5c8ea046c..c6c5ba1c4 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/editor.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/editor.tsx @@ -322,8 +322,8 @@ const MainContainer = styled.div` max-height: 100%; flex-shrink: 1; overflow-y: scroll; - scroll-padding-top: 64px; - padding-left: 16px; + scroll-padding-top: var(--a-spacing-16); + padding-left: var(--a-spacing-4); `; const EditorContainer = styled.div` diff --git a/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx b/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx index 46c97f59a..e31504872 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/sticky-right.tsx @@ -19,7 +19,7 @@ const StickyRightContainer = styled.div` grid-area: right; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); position: sticky; top: 0; overflow-y: auto; diff --git a/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx b/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx index aed13a165..9c582e4c1 100644 --- a/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx +++ b/frontend/src/components/smart-editor/tabbed-editors/tabbed-editors.tsx @@ -2,6 +2,8 @@ import { DocPencilIcon, TabsAddIcon } from '@navikt/aksel-icons'; import { Alert, Heading, Tabs, Tooltip } from '@navikt/ds-react'; import { useEffect } from 'react'; import { styled } from 'styled-components'; +import { PanelContainer } from '@app/components/oppgavebehandling-panels/styled-components'; +import { NewDocument } from '@app/components/smart-editor/new-document/new-document'; import { StyledTabsPanel, TabPanel } from '@app/components/smart-editor/tabbed-editors/tab-panel'; import { useFirstEditor } from '@app/components/smart-editor/tabbed-editors/use-first-editor'; import { useOppgaveId } from '@app/hooks/oppgavebehandling/use-oppgave-id'; @@ -12,7 +14,6 @@ import { useIsMedunderskriver } from '@app/hooks/use-is-medunderskriver'; import { useIsRol } from '@app/hooks/use-is-rol'; import { useSmartDocuments } from '@app/hooks/use-smart-documents'; import { ISmartDocument } from '@app/types/documents/documents'; -import { NewDocument } from '../new-document/new-document'; const NEW_TAB_ID = 'NEW_TAB_ID'; @@ -55,33 +56,37 @@ const Tabbed = ({ documents }: TabbedProps) => { if (documents.length === 0 && !hasDocumentsAccess) { return ( - - - Ingen redigerbare dokumenter. - - - Ingen redigerbare dokumenter å vise. Om du forventet å se noen dokumenter her, be saksbehandler om å opprette - dem. - - + + + + Ingen redigerbare dokumenter. + + + Ingen redigerbare dokumenter å vise. Om du forventet å se noen dokumenter her, be saksbehandler om å + opprette dem. + + + ); } return ( - - - {documents.map(({ id, tittel }) => ( - } /> - ))} - - - - {documents.map((d) => ( - - ))} - - - + + + + {documents.map(({ id, tittel }) => ( + } /> + ))} + + + + {documents.map((d) => ( + + ))} + + + + ); }; @@ -126,7 +131,6 @@ const StyledTabs = styled(Tabs)` flex-direction: column; height: 100%; overflow: hidden; - background: white; `; const StyledTabsList = styled(Tabs.List)` @@ -135,12 +139,12 @@ const StyledTabsList = styled(Tabs.List)` `; const StyledTabPanels = styled.div` - background-color: var(--a-surface-subtle); overflow: hidden; flex-grow: 1; + background-color: var(--a-bg-subtle); `; const StyledNoDocuments = styled.div` - background: white; - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); `; diff --git a/frontend/src/components/svarbrev/change-sets.tsx b/frontend/src/components/svarbrev/change-sets.tsx index 4c9fd4688..f0ea67d39 100644 --- a/frontend/src/components/svarbrev/change-sets.tsx +++ b/frontend/src/components/svarbrev/change-sets.tsx @@ -140,7 +140,7 @@ export const getChangeSetText = ({ const StyledVersionList = styled.ul` margin: 0; padding: 0; - padding-left: 16px; + padding-left: var(--a-spacing-4); `; const formatSvartid = (behandlingstidUnits: number, behandlingstidUnitTypeId: BehandlingstidUnitType) => diff --git a/frontend/src/components/svarbrev/filters.tsx b/frontend/src/components/svarbrev/filters.tsx index 2a62ddf67..8fd44acbc 100644 --- a/frontend/src/components/svarbrev/filters.tsx +++ b/frontend/src/components/svarbrev/filters.tsx @@ -91,11 +91,11 @@ const FilterContainer = styled.div` display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 16px; + gap: var(--a-spacing-4); width: 100%; padding-right: 3px; - padding-bottom: 16px; - background-color: white; + padding-bottom: var(--a-spacing-4); + background-color: var(--a-bg-default); position: sticky; top: 0; z-index: 1; diff --git a/frontend/src/components/svarbrev/history.tsx b/frontend/src/components/svarbrev/history.tsx index 3cbbf835c..5dc5e96ff 100644 --- a/frontend/src/components/svarbrev/history.tsx +++ b/frontend/src/components/svarbrev/history.tsx @@ -71,7 +71,7 @@ const StyledEntryList = styled.ul` padding: 0; display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; const HistoryEntry = (changeSet: InitialVersion | ChangeSet) => { @@ -103,7 +103,7 @@ const StyledEntry = styled.li` border-width: 1px; border-style: solid; border-color: ${({ $backgroundColor }) => $backgroundColor}; - padding-bottom: 8px; + padding-bottom: var(--a-spacing-2); padding-right: 0; padding-left: 3px; overflow: hidden; @@ -115,7 +115,7 @@ const StyledEntry = styled.li` left: -1px; top: -1px; bottom: -1px; - width: 4px; + width: var(--a-spacing-1); background-color: ${({ $backgroundColor }) => $backgroundColor}; border-top-left-radius: var(--a-border-radius-medium); border-bottom-left-radius: var(--a-border-radius-medium); @@ -126,20 +126,20 @@ const EntryHeader = styled.div` display: flex; justify-content: space-between; align-items: flex-start; - margin-bottom: 8px; + margin-bottom: var(--a-spacing-2); `; const EntryLabel = styled.span` display: flex; flex-direction: row; align-items: center; - gap: 4px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-right: var(--a-spacing-2); padding-top: 0; padding-left: 0; padding-bottom: 1px; font-weight: normal; - font-size: 16px; + font-size: var(--a-spacing-4); border-bottom-right-radius: var(--a-border-radius-medium); background-color: ${({ $backgroundColor }) => $backgroundColor}; `; @@ -149,14 +149,14 @@ const EntryTime = styled.time` font-weight: normal; font-style: italic; line-height: 1; - padding-top: 2px; + padding-top: var(--a-spacing-05); padding-right: 3px; `; const EntryContent = styled.div` display: flex; flex-direction: column; - gap: 4px; - padding-left: 8px; - padding-right: 8px; + gap: var(--a-spacing-1); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); `; diff --git a/frontend/src/components/svarbrev/modal/styled-components.ts b/frontend/src/components/svarbrev/modal/styled-components.ts index 58be944d3..0a50ffe9d 100644 --- a/frontend/src/components/svarbrev/modal/styled-components.ts +++ b/frontend/src/components/svarbrev/modal/styled-components.ts @@ -4,7 +4,7 @@ import { styled } from 'styled-components'; export const Details = styled.div` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); `; const Flex = styled.div` @@ -13,19 +13,19 @@ const Flex = styled.div` `; export const Row = styled(Flex)` - column-gap: 16px; + column-gap: var(--a-spacing-4); `; export const TimeInputContainer = styled(Flex)` - column-gap: 8px; + column-gap: var(--a-spacing-2); `; export const TimeContainer = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); font-style: italic; - font-size: 16px; + font-size: var(--a-spacing-4); `; export const StyledTime = styled.time` @@ -57,6 +57,6 @@ export const StyledPDF = styled.object` export const ModalBody = styled(Modal.Body)` display: flex; flex-direction: column; - gap: 16px; + gap: var(--a-spacing-4); width: min(90vw, 1100px); `; diff --git a/frontend/src/components/svarbrev/row/styled-components.ts b/frontend/src/components/svarbrev/row/styled-components.ts index cd339632e..cf914d9e2 100644 --- a/frontend/src/components/svarbrev/row/styled-components.ts +++ b/frontend/src/components/svarbrev/row/styled-components.ts @@ -28,13 +28,13 @@ export const Behandlingstid = styled.div` display: flex; align-items: center; width: max-content; - gap: 4px; + gap: var(--a-spacing-1); `; export const Horizontal = styled.div` display: flex; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const Buttons = styled(Horizontal)` diff --git a/frontend/src/components/svarbrev/skeleton.tsx b/frontend/src/components/svarbrev/skeleton.tsx index 0fccad189..561328f57 100644 --- a/frontend/src/components/svarbrev/skeleton.tsx +++ b/frontend/src/components/svarbrev/skeleton.tsx @@ -46,7 +46,7 @@ const Row = styled.div` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; const Buttons = styled(Row)` diff --git a/frontend/src/components/svarbrev/svarbrev.tsx b/frontend/src/components/svarbrev/svarbrev.tsx index d7037907f..093e28f92 100644 --- a/frontend/src/components/svarbrev/svarbrev.tsx +++ b/frontend/src/components/svarbrev/svarbrev.tsx @@ -149,11 +149,11 @@ export const Svarbrev = ({ modal }: Props) => { const StyledTableHeader = styled(Table.Header)` position: sticky; - top: 32px; + top: var(--a-spacing-8); background-color: var(--a-surface-default); z-index: 1; white-space: nowrap; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); + box-shadow: var(--a-shadow-medium); `; const StyledContainer = styled.div` diff --git a/frontend/src/components/text-history/text-history.tsx b/frontend/src/components/text-history/text-history.tsx index c159a8885..09bd02685 100644 --- a/frontend/src/components/text-history/text-history.tsx +++ b/frontend/src/components/text-history/text-history.tsx @@ -105,16 +105,16 @@ const EditorList = styled.ul` position: absolute; top: 100%; right: 0; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); z-index: 1; list-style: none; margin: 0; - padding: 8px; + padding: var(--a-spacing-2); display: flex; flex-direction: column; - row-gap: 4px; + row-gap: var(--a-spacing-1); `; const ListItem = styled.li` @@ -128,5 +128,5 @@ const StyledTag = styled(Tag)` display: flex; flex-direction: row; align-items: center; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/toast/action-toast.tsx b/frontend/src/components/toast/action-toast.tsx index 7cd0a15ee..77a510888 100644 --- a/frontend/src/components/toast/action-toast.tsx +++ b/frontend/src/components/toast/action-toast.tsx @@ -24,5 +24,5 @@ const ButtonRow = styled.div` display: flex; flex-direction: row-reverse; justify-content: space-between; - column-gap: 8px; + column-gap: var(--a-spacing-2); `; diff --git a/frontend/src/components/toast/toast-content/fetch-error-toast.tsx b/frontend/src/components/toast/toast-content/fetch-error-toast.tsx index 642e3070c..7c573a85b 100644 --- a/frontend/src/components/toast/toast-content/fetch-error-toast.tsx +++ b/frontend/src/components/toast/toast-content/fetch-error-toast.tsx @@ -40,6 +40,6 @@ const DetailLabel = styled.span` `; const StyledCode = styled.code` - font-size: 12px; + font-size: var(--a-spacing-3); word-break: break-word; `; diff --git a/frontend/src/components/toast/toast/animations.ts b/frontend/src/components/toast/toast/animations.ts index 38fcd0574..2b0c3cef6 100644 --- a/frontend/src/components/toast/toast/animations.ts +++ b/frontend/src/components/toast/toast/animations.ts @@ -4,7 +4,7 @@ export const SLIDE_DURATION = 150; export const SLIDE_OUT_KEYFRAMES: Keyframe[] = [ { transform: 'translateX(0%)' }, - { transform: 'translateX(calc(100% + 8px))' }, + { transform: 'translateX(calc(100% + var(--a-spacing-2)))' }, ]; export const SLIDE_OUT_OPTIONS: KeyframeAnimationOptions = { diff --git a/frontend/src/components/toast/toast/styled-components.ts b/frontend/src/components/toast/toast/styled-components.ts index a1fb41c31..bf5750bb1 100644 --- a/frontend/src/components/toast/toast/styled-components.ts +++ b/frontend/src/components/toast/toast/styled-components.ts @@ -5,9 +5,9 @@ import { ToastType } from '@app/components/toast/types'; export const Container = styled.div` display: grid; - grid-template-columns: 24px 1fr; + grid-template-columns: var(--a-spacing-6) 1fr; align-items: center; - column-gap: 8px; + column-gap: var(--a-spacing-2); white-space: pre-wrap; hyphens: auto; `; @@ -15,7 +15,7 @@ export const Container = styled.div` export const Content = styled.div` display: flex; flex-direction: column; - row-gap: 8px; + row-gap: var(--a-spacing-2); `; export const StyledCloseButton = styled(Button)` @@ -60,7 +60,7 @@ export const TimedToastStyle = styled(BaseToastStyle)` bottom: 0; left: 0; width: 100%; - height: 4px; + height: var(--a-spacing-1); background-color: ${({ $type }) => getColor($type)}; transform-origin: left; diff --git a/frontend/src/components/toast/toasts.tsx b/frontend/src/components/toast/toasts.tsx index 526e7c816..55eccedeb 100644 --- a/frontend/src/components/toast/toasts.tsx +++ b/frontend/src/components/toast/toasts.tsx @@ -33,17 +33,17 @@ export const Toasts = () => { const Container = styled.div` position: fixed; - bottom: 8px; + bottom: var(--a-spacing-2); right: 0; z-index: 1000; display: flex; flex-direction: column; - row-gap: 8px; - padding-right: 8px; + row-gap: var(--a-spacing-2); + padding-right: var(--a-spacing-2); margin-right: 0; margin-bottom: 0; - margin-top: 8px; - max-height: calc(100% - 16px); + margin-top: var(--a-spacing-2); + max-height: calc(100% - var(--a-spacing-4)); overflow-y: auto; overflow-x: visible; `; diff --git a/frontend/src/components/toggle-button/toggle-button.tsx b/frontend/src/components/toggle-button/toggle-button.tsx index 471c8bf83..77d7c26a5 100644 --- a/frontend/src/components/toggle-button/toggle-button.tsx +++ b/frontend/src/components/toggle-button/toggle-button.tsx @@ -14,7 +14,7 @@ export const ToggleButton = styled.button` border-radius: 0.25rem; transition: box-shadow 0.1s ease; cursor: pointer; - background: none; + background-color: none; user-select: none; position: relative; font-size: 14px; @@ -32,8 +32,8 @@ export const ToggleButton = styled.button` &:disabled { cursor: not-allowed; - border-color: #6a6a6a; - background: #f1f1f1; + border-color: var(--a-border-subtle); + background-color: var(--a-bg-default); opacity: 0.7; } `; diff --git a/frontend/src/components/versioned-tabs/tab-label.tsx b/frontend/src/components/versioned-tabs/tab-label.tsx index 7e3f9fcd0..35a7f67fa 100644 --- a/frontend/src/components/versioned-tabs/tab-label.tsx +++ b/frontend/src/components/versioned-tabs/tab-label.tsx @@ -43,5 +43,5 @@ export const TabLabel = ({ isDraft, isPublished, children }: TabLabelProps) => { const Container = styled.span` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/components/view-pdf/container.ts b/frontend/src/components/view-pdf/container.ts index 94dc50b03..fa0b4824b 100644 --- a/frontend/src/components/view-pdf/container.ts +++ b/frontend/src/components/view-pdf/container.ts @@ -3,9 +3,9 @@ import { styled } from 'styled-components'; export const Container = styled.section` display: flex; flex-direction: column; - margin: 4px 8px; - background: white; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + margin: var(--a-spacing-1) var(--a-spacing-2); + background-color: var(--a-bg-default); + box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); position: relative; height: 100%; diff --git a/frontend/src/components/view-pdf/header.ts b/frontend/src/components/view-pdf/header.ts index 0ec562b29..fa701c1f3 100644 --- a/frontend/src/components/view-pdf/header.ts +++ b/frontend/src/components/view-pdf/header.ts @@ -1,25 +1,25 @@ import { styled } from 'styled-components'; export const Header = styled.div` - background: var(--a-green-100); + background-color: var(--a-green-100); display: flex; justify-content: left; align-items: center; position: relative; - padding-left: 8px; - padding-right: 8px; - padding-top: 8px; - padding-bottom: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); + padding-top: var(--a-spacing-2); + padding-bottom: var(--a-spacing-2); z-index: 1; - column-gap: 4px; + column-gap: var(--a-spacing-1); `; export const StyledDocumentTitle = styled.h1` - font-size: 16px; + font-size: var(--a-spacing-4); font-weight: bold; margin: 0; - padding-left: 8px; - padding-right: 8px; + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/frontend/src/error-boundary/error-boundary.tsx b/frontend/src/error-boundary/error-boundary.tsx index 4ae8598dc..db97004ca 100644 --- a/frontend/src/error-boundary/error-boundary.tsx +++ b/frontend/src/error-boundary/error-boundary.tsx @@ -74,36 +74,36 @@ const ActionButton = ({ buttonText, buttonIcon, ...rest }: ActionButtonProps) => const ErrorContainer = styled.section` display: block; width: 100%; - background: var(--a-bg-default); - padding: 16px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-4); overflow-y: auto; box-shadow: var(--a-shadow-medium); `; export const StyledDescriptionTerm = styled.dt` font-weight: bold; - margin-top: 16px; + margin-top: var(--a-spacing-4); `; export const StyledPreDescriptionDetails = styled.dd` display: block; - padding: 8px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-2); + background-color: var(--a-surface-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); margin-left: 0; - margin-top: 4px; + margin-top: var(--a-spacing-1); white-space: pre-wrap; word-break: break-all; `; const StyledErrorMessage = styled.code` display: block; - padding: 16px; - background-color: #f5f5f5; - border: 1px solid #ddd; + padding: var(--a-spacing-4); + background-color: var(--a-surface-subtle); + border: 1px solid var(--a-border-divider); border-radius: var(--a-border-radius-medium); - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; diff --git a/frontend/src/pages/access-rights/access-rights.tsx b/frontend/src/pages/access-rights/access-rights.tsx index a796207fa..954aaa268 100644 --- a/frontend/src/pages/access-rights/access-rights.tsx +++ b/frontend/src/pages/access-rights/access-rights.tsx @@ -15,5 +15,5 @@ const AccessRightsArticle = styled.article` overflow: hidden; display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; diff --git a/frontend/src/pages/page-wrapper.tsx b/frontend/src/pages/page-wrapper.tsx index c9766397d..452c4804e 100644 --- a/frontend/src/pages/page-wrapper.tsx +++ b/frontend/src/pages/page-wrapper.tsx @@ -10,7 +10,7 @@ export const PageWrapper = ({ children }: Props) => {children} * { min-width: 100%; diff --git a/frontend/src/plate/components/common/delete-section.tsx b/frontend/src/plate/components/common/delete-section.tsx index 9d65e9fd4..dbd01a6d5 100644 --- a/frontend/src/plate/components/common/delete-section.tsx +++ b/frontend/src/plate/components/common/delete-section.tsx @@ -115,7 +115,7 @@ const IsChanged = ({ onConfirm, isChangedWarning, side = 'left' }: IsChangedProp const Buttons = styled.div` display: flex; - gap: 4px; + gap: var(--a-spacing-1); `; const StyledAlert = styled(Alert)<{ $side: Side }>` @@ -129,7 +129,7 @@ const StyledAlert = styled(Alert)<{ $side: Side }>` const DeleteMaltekstseksjonContainer = styled.div` position: relative; display: flex; - gap: 4px; + gap: var(--a-spacing-1); > ${MaltekstseksjonToolbarStyle} { opacity: 1; diff --git a/frontend/src/plate/components/common/toolbar-button-with-confirm.tsx b/frontend/src/plate/components/common/toolbar-button-with-confirm.tsx index e0753a896..705e75309 100644 --- a/frontend/src/plate/components/common/toolbar-button-with-confirm.tsx +++ b/frontend/src/plate/components/common/toolbar-button-with-confirm.tsx @@ -64,7 +64,7 @@ const ConfirmContainer = styled.div` background-color: var(--a-bg-subtle); display: flex; flex-direction: column; - border-radius: 4px; + border-radius: var(--a-spacing-1); border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: var(--a-shadow-medium); diff --git a/frontend/src/plate/components/current-date.tsx b/frontend/src/plate/components/current-date.tsx index dbe002064..c66cbfd27 100644 --- a/frontend/src/plate/components/current-date.tsx +++ b/frontend/src/plate/components/current-date.tsx @@ -74,7 +74,7 @@ const CurrentDateContainer = styled.time<{ $isFocused: boolean }>` display: block; text-align: right; width: 100%; - border-radius: 2px; + border-radius: var(--a-spacing-05); transition: background-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; diff --git a/frontend/src/plate/components/maltekstseksjon/loading.tsx b/frontend/src/plate/components/maltekstseksjon/loading.tsx index c7b4a7005..1cf5eea26 100644 --- a/frontend/src/plate/components/maltekstseksjon/loading.tsx +++ b/frontend/src/plate/components/maltekstseksjon/loading.tsx @@ -26,5 +26,5 @@ const StyledAlert = styled(Alert)` const AlertContent = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/plate/components/maltekstseksjon/update-maltekstseksjon.tsx b/frontend/src/plate/components/maltekstseksjon/update-maltekstseksjon.tsx index 9f2007c67..8ce977efd 100644 --- a/frontend/src/plate/components/maltekstseksjon/update-maltekstseksjon.tsx +++ b/frontend/src/plate/components/maltekstseksjon/update-maltekstseksjon.tsx @@ -85,11 +85,11 @@ const ButtonContainer = styled.div` width: 100%; display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); align-items: center; border-radius: var(--a-border-radius-medium); - margin-bottom: 8px; - padding-top: 24px; + margin-bottom: var(--a-spacing-2); + padding-top: var(--a-spacing-6); user-select: none; `; diff --git a/frontend/src/plate/components/page-break.tsx b/frontend/src/plate/components/page-break.tsx index 84d4989c5..eba3b29fb 100644 --- a/frontend/src/plate/components/page-break.tsx +++ b/frontend/src/plate/components/page-break.tsx @@ -104,15 +104,15 @@ const StyledPageBreak = styled.div` height: calc(var(${EDITOR_SCALE_CSS_VAR}) * 8mm); margin-top: calc(var(${EDITOR_SCALE_CSS_VAR}) * 20mm); margin-bottom: calc(var(${EDITOR_SCALE_CSS_VAR}) * 20mm); - margin-left: calc((var(${EDITOR_SCALE_CSS_VAR}) * -20mm) - 16px); - margin-right: calc((var(${EDITOR_SCALE_CSS_VAR}) * -20mm) - 16px); + margin-left: calc((var(${EDITOR_SCALE_CSS_VAR}) * -20mm) - var(--a-spacing-4)); + margin-right: calc((var(${EDITOR_SCALE_CSS_VAR}) * -20mm) - var(--a-spacing-4)); &::before { content: ''; position: absolute; top: 0; - left: 16px; - right: 16px; + left: var(--a-spacing-4); + right: var(--a-spacing-4); height: 10px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); } @@ -121,8 +121,8 @@ const StyledPageBreak = styled.div` content: ''; position: absolute; bottom: 0; - left: 16px; - right: 16px; + left: var(--a-spacing-4); + right: var(--a-spacing-4); height: 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); } diff --git a/frontend/src/plate/components/placeholder/styled-components.ts b/frontend/src/plate/components/placeholder/styled-components.ts index 703476115..f2a52be12 100644 --- a/frontend/src/plate/components/placeholder/styled-components.ts +++ b/frontend/src/plate/components/placeholder/styled-components.ts @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; export const DeleteButton = styled.button` - background: none; + background-color: none; border: none; cursor: pointer; margin: 0; @@ -26,7 +26,7 @@ export const DeleteButton = styled.button` &:focus-visible { box-shadow: - inset 0 0 0 2px var(--a-border-strong), + inset 0 0 0 var(--a-spacing-05) var(--a-border-strong), var(--a-shadow-focus); } `; diff --git a/frontend/src/plate/components/styled-components.tsx b/frontend/src/plate/components/styled-components.tsx index 68e560f28..3d86bc48c 100644 --- a/frontend/src/plate/components/styled-components.tsx +++ b/frontend/src/plate/components/styled-components.tsx @@ -52,9 +52,9 @@ const sectionToolbarCss = css` const SectionToolbarStyle = styled.div` ${sectionToolbarCss} - right: calc(100% + 8px); - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + right: calc(100% + var(--a-spacing-2)); + border-top-left-radius: var(--a-spacing-1); + border-bottom-left-radius: var(--a-spacing-1); `; export const SectionToolbar = ({ children, ...rest }: HtmlHTMLAttributes) => { @@ -71,9 +71,9 @@ export const SectionToolbar = ({ children, ...rest }: HtmlHTMLAttributes) => { @@ -90,11 +90,11 @@ export const MaltekstseksjonToolbar = ({ children, ...rest }: HtmlHTMLAttributes const StickyContent = styled.div` position: sticky; - top: 48px; + top: var(--a-spacing-12); display: grid; grid-template-columns: auto auto; flex-direction: row; - gap: 4px; + gap: var(--a-spacing-1); background-color: var(--a-bg-subtle); color: var(--a-icon-action); box-shadow: var(--a-shadow-medium); @@ -134,7 +134,7 @@ export const SectionContainer = styled.div` ${sectionBeforeCss} left: -8px; transition: border-left-color 0.2s ease-in-out; - border-left-width: 4px; + border-left-width: var(--a-spacing-1); } &:hover { @@ -158,7 +158,7 @@ export const MaltekstseksjonContainer = styled.div` ${sectionBeforeCss} right: -8px; transition: border-right-color 0.2s ease-in-out; - border-right-width: 4px; + border-right-width: var(--a-spacing-1); } &:hover { diff --git a/frontend/src/plate/sheet.ts b/frontend/src/plate/sheet.ts index 7fb2ee120..3c82e0f4b 100644 --- a/frontend/src/plate/sheet.ts +++ b/frontend/src/plate/sheet.ts @@ -8,9 +8,9 @@ interface Props { export const Sheet = styled.div` position: relative; - background-color: white; + background-color: var(--a-bg-default); flex-shrink: 0; - margin-top: 16px; + margin-top: var(--a-spacing-4); box-shadow: var(--a-shadow-medium); &:first-of-type { diff --git a/frontend/src/plate/status-bar/scaling.tsx b/frontend/src/plate/status-bar/scaling.tsx index c488fcff7..3ace91968 100644 --- a/frontend/src/plate/status-bar/scaling.tsx +++ b/frontend/src/plate/status-bar/scaling.tsx @@ -50,7 +50,7 @@ const Container = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; const ScaleSelectorContainer = styled.div` @@ -157,19 +157,19 @@ const ScaleSelector = ({ close }: ScaleSelectorProps) => { const ScaleSelectorContent = styled.div` position: absolute; bottom: 100%; - background-color: white; + background-color: var(--a-bg-default); box-shadow: var(--a-shadow-medium); - padding: 8px; + padding: var(--a-spacing-2); border-radius: var(--a-border-radius-medium); white-space: nowrap; display: flex; flex-direction: column; - gap: 8px; + gap: var(--a-spacing-2); `; const Row = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 8px; + gap: var(--a-spacing-2); `; diff --git a/frontend/src/plate/status-bar/status-bar.tsx b/frontend/src/plate/status-bar/status-bar.tsx index c8d3239a8..21768ddac 100644 --- a/frontend/src/plate/status-bar/status-bar.tsx +++ b/frontend/src/plate/status-bar/status-bar.tsx @@ -14,16 +14,16 @@ export const StatusBar = ({ children }: Props) => ( const Container = styled.div` width: 100%; - padding-top: 2px; - padding-bottom: 2px; - padding-left: 8px; - padding-right: 8px; + padding-top: var(--a-spacing-05); + padding-bottom: var(--a-spacing-05); + padding-left: var(--a-spacing-2); + padding-right: var(--a-spacing-2); display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom-left-radius: var(--a-border-radius-medium); border-bottom-right-radius: var(--a-border-radius-medium); - background-color: var(--a-gray-200); + background-color: var(--kabal-bg-medium); border-top: 1px solid var(--a-border-default); `; diff --git a/frontend/src/plate/styled-components.ts b/frontend/src/plate/styled-components.ts index 3eb842e47..9eba6c888 100644 --- a/frontend/src/plate/styled-components.ts +++ b/frontend/src/plate/styled-components.ts @@ -22,8 +22,8 @@ export const PlateEditorContent = styled.div<{ $showAnnotationsAtOrigin: boolean display: grid; ${({ $showAnnotationsAtOrigin }) => ($showAnnotationsAtOrigin ? positioned : sticky)} overflow: visible; - scroll-padding-top: 64px; - padding-top: 16px; + scroll-padding-top: var(--a-spacing-16); + padding-top: var(--a-spacing-4); position: relative; text-underline-offset: 0.25em; // To match PDF. word-wrap: normal; diff --git a/frontend/src/plate/toolbar/abbreviation.tsx b/frontend/src/plate/toolbar/abbreviation.tsx index f23fd1436..0e4624170 100644 --- a/frontend/src/plate/toolbar/abbreviation.tsx +++ b/frontend/src/plate/toolbar/abbreviation.tsx @@ -144,9 +144,9 @@ const Popup = styled.div` right: 0; display: flex; flex-direction: row; - column-gap: 4px; - background-color: white; - padding: 4px; + column-gap: var(--a-spacing-1); + background-color: var(--a-bg-default); + padding: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/plate/toolbar/bookmark-button.tsx b/frontend/src/plate/toolbar/bookmark-button.tsx index e23ddbbd7..4c60f1a76 100644 --- a/frontend/src/plate/toolbar/bookmark-button.tsx +++ b/frontend/src/plate/toolbar/bookmark-button.tsx @@ -121,8 +121,8 @@ const Bookmarks = styled.div` display: flex; flex-direction: row; column-gap: 0; - background-color: white; - padding: 4px; + background-color: var(--a-bg-default); + padding: var(--a-spacing-1); box-shadow: var(--a-shadow-medium); border-radius: var(--a-border-radius-medium); `; diff --git a/frontend/src/plate/toolbar/insert-placeholder.tsx b/frontend/src/plate/toolbar/insert-placeholder.tsx index 29007b9b0..387522830 100644 --- a/frontend/src/plate/toolbar/insert-placeholder.tsx +++ b/frontend/src/plate/toolbar/insert-placeholder.tsx @@ -110,9 +110,9 @@ const PlaceholderText = ({ show, close, placeholder, setPlaceholder }: Placehold const StyledPlaceholderText = styled.div` position: absolute; display: flex; - gap: 4px; - background: var(--a-surface-subtle); - padding: 8px; + gap: var(--a-spacing-1); + background-color: var(--a-surface-subtle); + padding: var(--a-spacing-2); border: 1px solid var(--a-border-strong); border-radius: var(--a-border-radius-medium); min-width: 220px; diff --git a/frontend/src/plate/toolbar/separator.tsx b/frontend/src/plate/toolbar/separator.tsx index cf122fabe..1e403e7c1 100644 --- a/frontend/src/plate/toolbar/separator.tsx +++ b/frontend/src/plate/toolbar/separator.tsx @@ -2,9 +2,9 @@ import { styled } from 'styled-components'; export const ToolbarSeparator = styled.div` display: flex; - background-color: #c9c9c9; + background-color: var(--a-bg-subtle); width: 1px; - height: 32px; - margin-left: 4px; - margin-right: 4px; + height: var(--a-spacing-8); + margin-left: var(--a-spacing-1); + margin-right: var(--a-spacing-1); `; diff --git a/frontend/src/plate/toolbar/styled-components.ts b/frontend/src/plate/toolbar/styled-components.ts index 517b3e801..967609050 100644 --- a/frontend/src/plate/toolbar/styled-components.ts +++ b/frontend/src/plate/toolbar/styled-components.ts @@ -7,13 +7,13 @@ export const StyledToolbar = styled.section` flex-direction: row; flex-wrap: nowrap; position: sticky; - top: 16px; + top: var(--a-spacing-4); left: 0; - background-color: white; + background-color: var(--a-bg-default); z-index: 21; - padding: 2px; + padding: var(--a-spacing-05); box-shadow: var(--a-shadow-medium); - margin-bottom: 16px; + margin-bottom: var(--a-spacing-4); grid-area: toolbar; `; diff --git a/frontend/src/plate/toolbar/toolbars/floating-toolbar.tsx b/frontend/src/plate/toolbar/toolbars/floating-toolbar.tsx index a767c202a..c38a42655 100644 --- a/frontend/src/plate/toolbar/toolbars/floating-toolbar.tsx +++ b/frontend/src/plate/toolbar/toolbars/floating-toolbar.tsx @@ -75,7 +75,7 @@ export const StyledFloatingToolbar = styled.section` flex-direction: row; align-items: center; position: absolute; - padding: 2px; + padding: var(--a-spacing-05); box-shadow: var(--a-shadow-medium); background-color: var(--a-surface-default); z-index: 21; diff --git a/frontend/src/plate/toolbar/toolbars/redaktoer-settings.tsx b/frontend/src/plate/toolbar/toolbars/redaktoer-settings.tsx index 399964979..6ae850d4c 100644 --- a/frontend/src/plate/toolbar/toolbars/redaktoer-settings.tsx +++ b/frontend/src/plate/toolbar/toolbars/redaktoer-settings.tsx @@ -57,12 +57,12 @@ export const RedkatoerSettings = () => { const StyledModalBody = styled(Modal.Body)` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; const StyledHeading = styled(Heading)` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx b/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx index 2e87005fe..8e099e521 100644 --- a/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx +++ b/frontend/src/plate/toolbar/toolbars/saksbehandler-settings.tsx @@ -116,12 +116,12 @@ enum Placement { const StyledModalBody = styled(Modal.Body)` display: flex; flex-direction: column; - row-gap: 16px; + row-gap: var(--a-spacing-4); `; const StyledHeading = styled(Heading)` display: flex; flex-direction: row; - column-gap: 8px; + column-gap: var(--a-spacing-2); align-items: center; `; diff --git a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/hjemler.tsx b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/hjemler.tsx index c43bd3825..0d27115d4 100644 --- a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/hjemler.tsx +++ b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/hjemler.tsx @@ -111,5 +111,5 @@ const HjemmelList = ({ hjemler }: { hjemler: string[] }) => { const TagContainer = styled.span` display: flex; flex-wrap: wrap; - gap: 4px; + gap: var(--a-spacing-1); `; diff --git a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/satt-paa-vent.tsx b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/satt-paa-vent.tsx index 538edbd8e..b594dde4c 100644 --- a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/satt-paa-vent.tsx +++ b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/satt-paa-vent.tsx @@ -83,6 +83,6 @@ const Reason = styled.p` margin: 0; padding: 0; font-style: italic; - padding-left: 4px; - border-left: 4px solid var(--a-border-subtle); + padding-left: var(--a-spacing-1); + border-left: var(--a-spacing-1) solid var(--a-border-subtle); `; diff --git a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/tildeling.tsx b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/tildeling.tsx index 91b9ecf25..743d766e3 100644 --- a/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/tildeling.tsx +++ b/frontend/src/redux-api/oppgaver/queries/behandling/event-handlers/tildeling.tsx @@ -248,7 +248,7 @@ const getToastContent = ( const FlexRowContainer = styled.div` display: flex; align-items: center; - gap: 4px; + gap: var(--a-spacing-1); `; const getFromText = (userId: string, employee: INavEmployee | null) => {