Merge remote-tracking branch 'origin/main' into auth-placeholder

package.json

@@ -10,8 +10,6 @@
         "dev": "concurrently \"bun run --cwd packages/client dev\" \"bun run --cwd packages/server dev\"",
         "build": "bun run --cwd packages/client build && bun run --cwd packages/server build && bun run copy-assets",
         "copy-assets": "cp -r packages/client/dist/assets packages/server/public/ && cp -r packages/client/dist/~partytown packages/server/public/",
-        "serve": "bun run --cwd packages/server serve",
-        "serve-dev": "concurrently \"bun run --cwd packages/server serve-local\" \"bun run --cwd packages/client build:watch\"",
         "prepare": "husky install",
         "benchmarking": "./benchmarking/run",
         "partytown": "partytown copylib packages/server/public/~partytown",

packages/client/src/main.css

@@ -1,110 +1,4 @@
-:root,
-:host {
-    --a-spacing-16: 4rem;
-    --a-spacing-12: 3rem;
-    --a-spacing-10: 2.5rem;
-    --a-spacing-9: 2.25rem;
-    --a-spacing-8: 2rem;
-    --a-spacing-6: 1.5rem;
-    --a-spacing-5: 1.25rem;
-    --a-spacing-4: 1rem;
-    --a-spacing-3: 0.75rem;
-    --a-spacing-2: 0.5rem;
-    --a-spacing-1: 0.25rem;
-    --a-shadow-xlarge: 0px 2px 5px 0px rgba(0, 0, 0, 0.15),
-        0px 10px 24px 0px rgba(0, 0, 0, 0.18),
-        0px 0px 1px 0px rgba(0, 0, 0, 0.08);
-    --a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
-        0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
-    --a-shadow-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15),
-        0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-    --a-lightblue-800: rgba(35, 107, 125, 1);
-    --a-lightblue-700: rgba(54, 141, 168, 1);
-    --a-lightblue-100: rgba(216, 249, 255, 1);
-    --a-deepblue-800: rgba(0, 52, 83, 1);
-    --a-deepblue-700: rgba(0, 67, 103, 1);
-    --a-deepblue-600: rgba(0, 80, 119, 1);
-    --a-deepblue-500: rgba(0, 91, 130, 1);
-    --a-deepblue-300: rgba(102, 163, 196, 1);
-    --a-deepblue-200: rgba(153, 196, 221, 1);
-    --a-red-500: rgba(195, 0, 0, 1);
-    --a-red-100: rgba(255, 194, 194, 1);
-    --a-blue-800: rgba(0, 52, 125, 1);
-    --a-blue-600: rgba(0, 86, 180, 1);
-    --a-blue-500: rgba(0, 103, 197, 1);
-    --a-blue-200: rgba(153, 195, 255, 1);
-    --a-blue-100: rgba(204, 225, 255, 1);
-    --a-blue-50: rgba(230, 240, 255, 1);
-    --a-grayalpha-700: rgba(0, 0, 0, 0.65);
-    --a-grayalpha-500: rgba(0, 0, 0, 0.44);
-    --a-grayalpha-300: rgba(0, 0, 0, 0.19);
-    --a-grayalpha-200: rgba(0, 0, 0, 0.1);
-    --a-gray-900: rgba(38, 38, 38, 1);
-    --a-gray-600: rgba(112, 112, 112, 1);
-    --a-gray-300: rgba(207, 207, 207, 1);
-    --a-gray-200: rgba(229, 229, 229, 1);
-    --a-gray-100: rgba(241, 241, 241, 1);
-    --a-gray-50: rgba(247, 247, 247, 1);
-    --a-white: rgba(255, 255, 255, 1);
-    --a-transparent: rgba(255, 255, 255, 0);
-    --a-border-radius-xlarge: 12px;
-    --a-border-radius-large: 8px;
-    --a-border-radius-medium: 4px;
-    --a-font-weight-regular: 400;
-    --a-font-weight-bold: 600;
-    --a-font-size-small: 0.875rem;
-    --a-font-size-medium: 1rem;
-    --a-font-size-large: 1.125rem;
-    --a-font-size-xlarge: 1.25rem;
-    --a-font-size-heading-small: 1.25rem;
-    --a-font-size-heading-medium: 1.5rem;
-    --a-font-size-heading-large: 1.75rem;
-    --a-font-size-heading-xlarge: 2rem;
-    --a-font-line-height-medium: 1.25rem;
-    --a-font-line-height-large: 1.5rem;
-    --a-font-line-height-xlarge: 1.75rem;
-    --a-font-line-height-heading-small: 1.75rem;
-    --a-font-line-height-heading-medium: 2rem;
-    --a-font-family: "Source Sans Pro", Arial, sans-serif;
-    --a-icon-default: var(--a-gray-900);
-    --a-icon-info: var(--a-lightblue-800);
-    --a-icon-danger: var(--a-red-500);
-    --a-nav-red: var(--a-red-500);
-    --a-icon-subtle: var(--a-grayalpha-700);
-    --a-surface-alt-3-strong: var(--a-deepblue-800);
-    --a-surface-info-subtle: var(--a-lightblue-100);
-    --a-surface-danger-subtle: var(--a-red-100);
-    --a-surface-action: var(--a-blue-500);
-    --a-surface-action-active: var(--a-deepblue-500);
-    --a-surface-action-hover: var(--a-blue-600);
-    --a-surface-action-subtle: var(--a-blue-50);
-    --a-surface-action-subtle-hover: var(--a-blue-100);
-    --a-surface-subtle: var(--a-gray-50);
-    --a-surface-active: var(--a-grayalpha-200);
-    --a-surface-default: var(--a-white);
-    --a-bg-subtle: var(--a-gray-100);
-    --a-bg-default: var(--a-white);
-    --a-text-on-action: var(--a-white);
-    --a-text-on-inverted: var(--a-white);
-    --a-text-action: var(--a-blue-500);
-    --a-text-action-on-action-subtle: var(--a-blue-600);
-    --a-text-danger: var(--a-red-500);
-    --a-text-subtle: var(--a-grayalpha-700);
-    --a-text-default: var(--a-gray-900);
-    --a-border-focus: var(--a-blue-800);
-    --a-border-focus-on-inverted: var(--a-blue-200);
-    --a-border-info: var(--a-lightblue-700);
-    --a-border-danger: var(--a-red-500);
-    --a-border-action: var(--a-blue-500);
-    --a-border-subtle: var(--a-grayalpha-200);
-    --a-border-divider: var(--a-grayalpha-300);
-    --a-border-default: var(--a-grayalpha-500);
-    --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
-
-    --header-height-mobil: 72px;
-    --header-height-desktop: 80px;
-    --desktop-min-width: 768px;
-}
+@import "@navikt/ds-tokens";
 
 /* Vurdere å kun ta med i dev -> Start */
 @font-face {
@@ -171,7 +65,11 @@ body {
         line-height: 1.333;
         font-size: 1.125rem;
         color: var(--a-text-default);
+
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
     }
+
     :where(#header-withmenu, #footer-withmenu) {
         font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
     }

packages/client/src/styles/read-more.module.css

@@ -1,33 +1,48 @@
 .summary {
-    color: var(--a-blue-500);
-    list-style-type: none;
-    list-style-image: url("/public/ikoner/read-more.svg");
-    height: 32px;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--a-spacing-05);
+    list-style: none;
+    border-radius: var(--a-border-radius-small);
+    color: var(--a-text-action);
+    cursor: pointer;
+    padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1)
+        var(--a-spacing-05);
+    width: fit-content;
 }
 
-.summary:global(::marker) {
-    /* display: grid; */
-    /* justify-content: center; */
-    /* align-items: center; */
+.summary:hover {
+    background-color: var(--a-surface-hover);
+    color: var(--a-text-action-hover);
 }
 
-.summary:hover {
-    list-style-image: none;
-    background-color: var(--a-bg-subtle);
-    display: inline-block;
-    cursor: pointer;
+.summary:active {
+    background-color: var(--a-surface-active);
 }
 
-.answer {
-    border-left: 2px solid var(--a-border-divider);
-    padding-left: var(--a-spacing-3);
-    margin-left: var(--a-spacing-2);
-    line-height: 1.5;
+.icon {
+    font-size: 1.5rem;
 }
 
-.details[open] .summary {
-    list-style-image: url("/public/ikoner/read-less.svg");
+.details[open] .icon {
+    transform: rotate(180deg);
 }
 
-.details {
+.summary:hover .icon {
+    position: relative;
+    top: 1px;
+}
+
+.details[open] .summary:hover .icon {
+    top: -1px;
+}
+
+.answer {
+    border-left: 2px solid var(--a-border-divider);
+    color: var(--a-text-default);
+    margin-left: 0.8125rem;
+    margin-top: var(--a-spacing-1);
+    padding-left: 0.8125rem;
+    font-weight: var(--a-font-weight-regular);
+    line-height: var(--a-font-line-height-xlarge);
 }