Use Aksel variables, prepare for dark mode

navikt · Oct 3, 2024 · 96d4d69 · 96d4d69
1 parent 539e3f7
commit 96d4d69
Show file tree

Hide file tree

Showing 235 changed files with 802 additions and 805 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}">
+<html lang="no" data-environment="{{ENVIRONMENT}}" data-version="{{VERSION}}" data-theme="light">
 
 <head>
   <meta charset="UTF-8" />

diff --git 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
@@ -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<StyledCellProps>`
 
 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
@@ -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)<StyledAngledHeaderDivProps>`
 `;
 
 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
@@ -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
@@ -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
@@ -82,37 +82,37 @@ export class AppErrorBoundary extends Component<Props, State> {
 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`
   display: flex;
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,41 +5,41 @@ 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;
   }
 `;
 
 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
@@ -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
@@ -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<HistoryEventTypes, string> = {