From 70ded8e3c38c2cfc21744b7fe085c10f72111ab8 Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Mon, 12 Oct 2026 13:47:38 +0200
Subject: [PATCH] =?UTF-8?q?La=20til=20figma=20styling=20med=20komponenter?=
 =?UTF-8?q?=20og=20theme.=20Endret=20litt=20p=C3=A5=20App.tsx=20slik=20at?=
 =?UTF-8?q?=20test=20siden=20ogs=C3=A5=20har=20mer=20v=C3=A5rt=20tema?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          |  20 +-
 frontend/src/App.tsx                          |   2 +-
 frontend/src/components/badge/Badge.css       |  27 +++
 frontend/src/components/button/Button.css     |  66 +++++++
 frontend/src/components/card/Card.css         |  15 ++
 .../components/categoryCard/CategoryCard.css  |  74 ++++++++
 frontend/src/components/checkbox/Checkbox.css |  40 ++++
 .../src/components/filterChip/FilterChip.css  |  22 +++
 .../src/components/filterRow/FilterRow.css    |  25 +++
 frontend/src/components/header/Header.css     |  45 +++++
 frontend/src/components/logo/Logo.css         |  35 ++++
 frontend/src/components/noteItem/NoteItem.css |  26 +++
 frontend/src/components/priceRow/PriceRow.css |   0
 .../quantityStepper/QuantityStepper.css       |  31 +++
 .../src/components/resultRow/ResultRow.css    | 112 +++++++++++
 .../components/searchfield/Searchfield.css    |  86 +++++++++
 .../segmentedControl/SegmentedControl.css     |  28 +++
 .../shoppingListRow/ShoppingListRow.css       |  68 +++++++
 frontend/src/main.tsx                         |   3 +-
 frontend/src/tema.css                         |  90 ---------
 frontend/src/theme.css                        | 176 ++++++++++++++++++
 21 files changed, 889 insertions(+), 102 deletions(-)
 create mode 100644 frontend/src/components/badge/Badge.css
 create mode 100644 frontend/src/components/button/Button.css
 create mode 100644 frontend/src/components/card/Card.css
 create mode 100644 frontend/src/components/categoryCard/CategoryCard.css
 create mode 100644 frontend/src/components/checkbox/Checkbox.css
 create mode 100644 frontend/src/components/filterChip/FilterChip.css
 create mode 100644 frontend/src/components/filterRow/FilterRow.css
 create mode 100644 frontend/src/components/header/Header.css
 create mode 100644 frontend/src/components/logo/Logo.css
 create mode 100644 frontend/src/components/noteItem/NoteItem.css
 create mode 100644 frontend/src/components/priceRow/PriceRow.css
 create mode 100644 frontend/src/components/quantityStepper/QuantityStepper.css
 create mode 100644 frontend/src/components/resultRow/ResultRow.css
 create mode 100644 frontend/src/components/searchfield/Searchfield.css
 create mode 100644 frontend/src/components/segmentedControl/SegmentedControl.css
 create mode 100644 frontend/src/components/shoppingListRow/ShoppingListRow.css
 delete mode 100644 frontend/src/tema.css
 create mode 100644 frontend/src/theme.css

diff --git a/frontend/src/App.css b/frontend/src/App.css
index f987250..1223237 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,5 +1,5 @@
 /* Hjemskjerm – styling etter Figma (Handlelappen – notatbok).
-   Farger og skrift kommer fra tema.css. */
+   Farger og skrift kommer fra styles/theme.css. */
 
 #root {
   max-width: 1100px;
@@ -21,20 +21,20 @@
   max-width: 480px;
   padding: 10px 14px;
   font: 15px var(--font-ui);
-  color: var(--blekk);
-  background: var(--hvit);
-  border: 1px solid var(--blekk);
+  color: var(--text-primary);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
   border-radius: 8px;
 }
 
 .search input:focus {
-  outline: 2px solid var(--bringebaer);
+  outline: 2px solid var(--text-accent);
   outline-offset: 2px;
 }
 
 .search button {
-  background: var(--bringebaer);
-  color: var(--hvit);
+  background: var(--bg-primary);
+  color: var(--text-on-dark);
   border: none;
   border-radius: 8px;
   padding: 10px 16px;
@@ -55,7 +55,7 @@
   gap: 1rem;
   align-items: center;
   padding: 0.75rem 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .product img,
@@ -63,8 +63,8 @@
   width: 64px;
   height: 64px;
   object-fit: contain;
-  background: var(--hvit);
-  border: 1px solid var(--burgunder);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-brand);
   border-radius: 6px;
   flex-shrink: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fd4dd23..ab7dfc1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -86,7 +86,7 @@ function App() {
       )}
 
       {data && data.products.length > 0 && (
-        <ul className="product-list kort">
+        <ul>
           {data.products.map((product) => {
             const price = lowestPrice(product.prices);
             return (
diff --git a/frontend/src/components/badge/Badge.css b/frontend/src/components/badge/Badge.css
new file mode 100644
index 0000000..8e78c14
--- /dev/null
+++ b/frontend/src/components/badge/Badge.css
@@ -0,0 +1,27 @@
+/* Badge – fra Figma (Components → Badge) */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+/* Style */
+.badge--primary {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}
+
+.badge--dark {
+    background: var(--bg-brand);
+    color: var(--text-on-dark);
+}
+
+.badge--tinted {
+    background: var(--bg-tint);
+    color: var(--text-brand);
+}
\ No newline at end of file
diff --git a/frontend/src/components/button/Button.css b/frontend/src/components/button/Button.css
new file mode 100644
index 0000000..7ff3d37
--- /dev/null
+++ b/frontend/src/components/button/Button.css
@@ -0,0 +1,66 @@
+/* Button – mål og farger fra Figma (Components → Button) */
+.button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    font: 500 14px var(--font-ui);
+    cursor: pointer;
+    transition: filter 0.15s;
+}
+
+.button:hover {
+    filter: brightness(0.95);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 2px;
+}
+
+/* Størrelse */
+.button--l {
+    height: 46px;
+    padding: 0 20px;
+}
+
+.button--m {
+    height: 42px;
+    padding: 0 18px;
+}
+
+.button--s {
+    height: 36px;
+    padding: 0 14px;
+    font-size: 13px;
+}
+
+/* Type */
+.button--primary {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}
+
+.button--dark {
+    background: var(--bg-brand);
+    color: var(--text-on-dark);
+}
+
+.button--secondary {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border-color: var(--border-hairline);
+}
+
+.button--tinted {
+    background: var(--bg-tint);
+    color: var(--text-brand);
+}
+
+/* Liten teller, f.eks. «Min lapp 08» */
+.button__count {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    opacity: 0.8;
+}
\ No newline at end of file
diff --git a/frontend/src/components/card/Card.css b/frontend/src/components/card/Card.css
new file mode 100644
index 0000000..f826eba
--- /dev/null
+++ b/frontend/src/components/card/Card.css
@@ -0,0 +1,15 @@
+/* Kort: hvit flate med burgunder kant og skarp skygge */
+.card {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border-brand);
+    border-radius: 10px;
+    box-shadow: 3px 3px 0 var(--border-brand);
+    padding: 16px;
+    transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.card:hover {
+    box-shadow: 5px 5px 0 var(--border-brand);
+    transform: translate(-1px, -1px);
+}
\ No newline at end of file
diff --git a/frontend/src/components/categoryCard/CategoryCard.css b/frontend/src/components/categoryCard/CategoryCard.css
new file mode 100644
index 0000000..37bd1c9
--- /dev/null
+++ b/frontend/src/components/categoryCard/CategoryCard.css
@@ -0,0 +1,74 @@
+/* CategoryCard – fra Figma (Components → CategoryCard) */
+.category-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 200px;
+    max-width: 400px;
+    height: 150px;
+    padding: 20px;
+    text-align: left;
+    font-family: var(--font-ui);
+    background: var(--bg-surface);
+    border: 1.25px solid var(--border-brand);
+    border-radius: 12px;
+    box-shadow: 3px 3px 0 var(--border-brand);
+    cursor: pointer;
+    transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.category-card:hover {
+    border-width: 1.75px;
+    box-shadow: 4px 4px 0 var(--border-brand);
+    transform: translate(-1px, -1px);
+}
+
+.category-card__top {
+    display: flex;
+    justify-content: space-between;
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.category-card__top> :first-child {
+    color: var(--text-accent);
+}
+
+.category-card__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.category-card__name {
+    display: block;
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+}
+
+.category-card__description {
+    display: block;
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.category-card__arrow {
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--bg-muted);
+    color: var(--text-primary);
+    transition: background 0.15s, color 0.15s;
+}
+
+.category-card:hover .category-card__arrow {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}
\ No newline at end of file
diff --git a/frontend/src/components/checkbox/Checkbox.css b/frontend/src/components/checkbox/Checkbox.css
new file mode 100644
index 0000000..cb5b06d
--- /dev/null
+++ b/frontend/src/components/checkbox/Checkbox.css
@@ -0,0 +1,40 @@
+/* Checkbox – fra Figma (Components → Checkbox)
+   Bruker en ekte <input type="checkbox">, så den virker med tastatur og skjermleser. */
+.checkbox {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    background: var(--bg-surface);
+    border: 1.25px solid var(--border-brand);
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.checkbox--large {
+    width: 18px;
+    height: 18px;
+}
+
+/* Avkrysset: fylt burgunder med hvit hake */
+.checkbox:checked {
+    background: var(--bg-brand);
+    border-color: var(--bg-brand);
+}
+
+.checkbox:checked::after {
+    content: "";
+    width: 8px;
+    height: 4px;
+    border-left: 1.8px solid var(--text-on-dark);
+    border-bottom: 1.8px solid var(--text-on-dark);
+    transform: translateY(-1px) rotate(-45deg);
+}
+
+.checkbox:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 2px;
+}
diff --git a/frontend/src/components/filterChip/FilterChip.css b/frontend/src/components/filterChip/FilterChip.css
new file mode 100644
index 0000000..8031354
--- /dev/null
+++ b/frontend/src/components/filterChip/FilterChip.css
@@ -0,0 +1,22 @@
+/* FilterChip – fra Figma (Components → FilterChip)
+   Viser et aktivt filter, med × for å fjerne det. */
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 28px;
+    padding: 0 10px;
+    border: none;
+    border-radius: 4px;
+    background: var(--bg-tint);
+    color: var(--text-brand);
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.filter-chip__close {
+    font: 400 14px var(--font-ui);
+    line-height: 1;
+}
\ No newline at end of file
diff --git a/frontend/src/components/filterRow/FilterRow.css b/frontend/src/components/filterRow/FilterRow.css
new file mode 100644
index 0000000..385a703
--- /dev/null
+++ b/frontend/src/components/filterRow/FilterRow.css
@@ -0,0 +1,25 @@
+/* FilterRow – én rad i filterlisten (Components → FilterRow) */
+.filter-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 160px;
+    cursor: pointer;
+}
+
+.filter-row__name {
+    flex: 1;
+    font: 400 14px var(--font-ui);
+    color: var(--text-primary);
+}
+
+.filter-row__count {
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+}
+
+/* Valgt: navnet blir litt tykkere */
+.filter-row:has(.checkbox:checked) .filter-row__name {
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/frontend/src/components/header/Header.css b/frontend/src/components/header/Header.css
new file mode 100644
index 0000000..ebb1e61
--- /dev/null
+++ b/frontend/src/components/header/Header.css
@@ -0,0 +1,45 @@
+/* Header – fra Figma (Components → Header)
+   Inneholder Logo, enten SearchField eller navigasjon, og en Button (variant dark, size s). */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    height: 64px;
+    padding: 0 40px;
+    background: var(--bg-page);
+    border-bottom: 1px solid var(--border-hairline);
+}
+
+.header .search-field {
+    flex: 1;
+}
+
+.header__nav {
+    display: flex;
+    gap: 32px;
+}
+
+.header__link {
+    font: 500 11px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    text-decoration: none;
+}
+
+.header__link:hover {
+    color: var(--text-accent);
+}
+
+/* Mobil: mindre luft på sidene */
+@media (max-width: 600px) {
+    .header {
+        gap: 12px;
+        padding: 0 16px;
+    }
+
+    .header__nav {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/logo/Logo.css b/frontend/src/components/logo/Logo.css
new file mode 100644
index 0000000..c508ff2
--- /dev/null
+++ b/frontend/src/components/logo/Logo.css
@@ -0,0 +1,35 @@
+/* Logo – fra Figma (Components → Logo) */
+.logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    font: 600 18px var(--font-ui);
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+/* To skjeve lapper oppå hverandre */
+.logo__mark {
+    position: relative;
+    width: 26px;
+    height: 26px;
+}
+
+.logo__mark::before,
+.logo__mark::after {
+    content: "";
+    position: absolute;
+    inset: 3px;
+    border-radius: 2px;
+}
+
+.logo__mark::before {
+    background: var(--bg-brand);
+    transform: rotate(-6deg);
+}
+
+.logo__mark::after {
+    background: var(--bg-primary);
+    transform: rotate(8deg) translate(-2px, -2px);
+}
\ No newline at end of file
diff --git a/frontend/src/components/noteItem/NoteItem.css b/frontend/src/components/noteItem/NoteItem.css
new file mode 100644
index 0000000..bf21d20
--- /dev/null
+++ b/frontend/src/components/noteItem/NoteItem.css
@@ -0,0 +1,26 @@
+/* NoteItem – en vare på handlelappen (Components → NoteItem)
+   Ligger inni .note fra theme.css. */
+.note-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--note-rule);
+    font-family: var(--font-note);
+}
+
+.note-item__name {
+    flex: 1;
+    font-size: 19px;
+    color: var(--note-ink);
+}
+
+.note-item__count {
+    font-size: 17px;
+    color: var(--text-secondary);
+}
+
+/* Avkrysset: varen blir grå */
+.note-item--checked .note-item__name {
+    color: var(--text-muted);
+}
\ No newline at end of file
diff --git a/frontend/src/components/priceRow/PriceRow.css b/frontend/src/components/priceRow/PriceRow.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/quantityStepper/QuantityStepper.css b/frontend/src/components/quantityStepper/QuantityStepper.css
new file mode 100644
index 0000000..a75af3d
--- /dev/null
+++ b/frontend/src/components/quantityStepper/QuantityStepper.css
@@ -0,0 +1,31 @@
+/* QuantityStepper – fra Figma (Components → QuantityStepper) */
+.quantity-stepper {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    height: 32px;
+    padding: 0 12px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-hairline);
+    border-radius: 6px;
+}
+
+.quantity-stepper__button {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font: 400 14px var(--font-ui);
+    cursor: pointer;
+}
+
+.quantity-stepper__button:hover {
+    color: var(--text-primary);
+}
+
+.quantity-stepper__value {
+    min-width: 1ch;
+    text-align: center;
+    font: 500 11px var(--font-mono);
+    color: var(--text-primary);
+}
\ No newline at end of file
diff --git a/frontend/src/components/resultRow/ResultRow.css b/frontend/src/components/resultRow/ResultRow.css
new file mode 100644
index 0000000..a9bcd4e
--- /dev/null
+++ b/frontend/src/components/resultRow/ResultRow.css
@@ -0,0 +1,112 @@
+/* ResultRow – én vare i søkeresultatet (Components → ResultRow)
+   Kolonner: nummer · navn og detaljer · kr per kg · pris · knapp */
+.result-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 480px;
+    padding: 14px 0;
+    border-bottom: 1px solid var(--border-hairline);
+}
+
+.result-row__number,
+.result-row__price-per-kg,
+.result-row__chain {
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.result-row__number {
+    width: 36px;
+    flex-shrink: 0;
+}
+
+.result-row__info {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    flex: 1;
+    min-width: 0;
+}
+
+.result-row__name {
+    font: 500 16px var(--font-ui);
+    letter-spacing: -0.01em;
+    color: var(--text-primary);
+}
+
+.result-row__details {
+    font: 500 9px var(--font-mono);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.result-row__price-per-kg {
+    width: 96px;
+    flex-shrink: 0;
+}
+
+.result-row__price-column {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 110px;
+    flex-shrink: 0;
+}
+
+.result-row__price {
+    font: 500 18px var(--font-ui);
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+}
+
+.result-row__chain {
+    color: var(--text-accent);
+}
+
+/* Knappen til høyre er en Button (variant secondary, size s) med fast bredde */
+.result-row .button {
+    width: 150px;
+    justify-content: center;
+}
+
+/* Når varen står på lappen: rosa felt med − antall + */
+.result-row__on-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 150px;
+    height: 36px;
+    padding: 0 12px;
+    box-sizing: border-box;
+    background: var(--bg-tint);
+    border-radius: 8px;
+    color: var(--text-brand);
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.result-row__on-list button {
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font: 500 16px var(--font-ui);
+    cursor: pointer;
+}
+
+/* Mobil: skjul kr per kg og nummer for å få plass */
+@media (max-width: 600px) {
+    .result-row {
+        min-width: 0;
+    }
+
+    .result-row__number,
+    .result-row__price-per-kg {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/searchfield/Searchfield.css b/frontend/src/components/searchfield/Searchfield.css
new file mode 100644
index 0000000..730825e
--- /dev/null
+++ b/frontend/src/components/searchfield/Searchfield.css
@@ -0,0 +1,86 @@
+/* SearchField – fra Figma (Components → SearchField)
+   Variantene: standard (i headeren) og --large (på forsiden). */
+.search-field {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    min-width: 200px;
+    max-width: 640px;
+    height: 40px;
+    padding: 0 12px 0 16px;
+    box-sizing: border-box;
+    background: var(--bg-muted);
+    border-radius: 8px;
+}
+
+/* Søkeikonet: en sirkel med et skaft */
+.search-field__icon {
+    position: relative;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.search-field__icon::before {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 9px;
+    height: 9px;
+    border: 1.5px solid var(--text-muted);
+    border-radius: 50%;
+}
+
+.search-field__icon::after {
+    content: "";
+    position: absolute;
+    right: 1px;
+    bottom: 2px;
+    width: 5px;
+    height: 1.5px;
+    background: var(--text-muted);
+    transform: rotate(45deg);
+}
+
+.search-field__input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    font: 400 14px var(--font-ui);
+    color: var(--text-primary);
+    outline: none;
+}
+
+.search-field__input::placeholder {
+    color: var(--text-muted);
+}
+
+.search-field:focus-within {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 2px;
+}
+
+/* Liten «⌘K»-snarvei til høyre */
+.search-field__shortcut {
+    padding: 2px 6px;
+    border: 1px solid var(--border-hairline);
+    border-radius: 4px;
+    font: 500 10px var(--font-mono);
+    color: var(--text-muted);
+}
+
+/* Stor variant: hvit, tydelig kant og en knapp inni */
+.search-field--large {
+    height: 60px;
+    padding: 0 8px 0 16px;
+    background: var(--bg-surface);
+    border: 1.25px solid var(--border-strong);
+    border-radius: 10px;
+}
+
+.search-field--large .search-field__input {
+    font-size: 17px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/segmentedControl/SegmentedControl.css b/frontend/src/components/segmentedControl/SegmentedControl.css
new file mode 100644
index 0000000..01e06da
--- /dev/null
+++ b/frontend/src/components/segmentedControl/SegmentedControl.css
@@ -0,0 +1,28 @@
+/* SegmentedControl – fra Figma (Components → SegmentedControl)
+   F.eks. «Aktive / Tidligere». Den valgte får klassen --active. */
+.segmented-control {
+    display: inline-flex;
+    padding: 3px;
+    background: var(--bg-muted);
+    border: 1px solid var(--border-hairline);
+    border-radius: 8px;
+}
+
+.segmented-control__option {
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary);
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.segmented-control__option--active {
+    background: var(--bg-surface);
+    border-color: var(--border-brand);
+    color: var(--text-brand);
+}
\ No newline at end of file
diff --git a/frontend/src/components/shoppingListRow/ShoppingListRow.css b/frontend/src/components/shoppingListRow/ShoppingListRow.css
new file mode 100644
index 0000000..4a62ab0
--- /dev/null
+++ b/frontend/src/components/shoppingListRow/ShoppingListRow.css
@@ -0,0 +1,68 @@
+/* ShoppingListRow – én vare på aktiv handleliste (Components → ShoppingListRow)
+   Inneholder Checkbox (--large) og QuantityStepper. */
+.shopping-list-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 360px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--note-rule);
+}
+
+.shopping-list-row__name {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+    font-family: var(--font-note);
+}
+
+.shopping-list-row__item {
+    font-size: 25px;
+    color: var(--note-ink);
+}
+
+.shopping-list-row__note {
+    font-size: 16px;
+    color: var(--text-secondary);
+}
+
+.shopping-list-row__price {
+    width: 84px;
+    text-align: right;
+    font: 500 11px var(--font-mono);
+    letter-spacing: 0.06em;
+    color: var(--text-primary);
+}
+
+.shopping-list-row__remove {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font: 500 16px var(--font-ui);
+    cursor: pointer;
+}
+
+.shopping-list-row__remove:hover {
+    color: var(--text-accent);
+}
+
+/* Avkrysset: overstreket og grå */
+.shopping-list-row--checked .shopping-list-row__item {
+    color: var(--text-muted);
+    text-decoration: line-through;
+}
+
+.shopping-list-row--checked .shopping-list-row__price {
+    color: var(--text-muted);
+}
+
+/* Mobil */
+@media (max-width: 600px) {
+    .shopping-list-row {
+        min-width: 0;
+        gap: 10px;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index f044fb2..68cb6c4 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,7 +4,8 @@ import { ApolloProvider } from "@apollo/client/react";
 import './index.css'
 import App from './App.tsx'
 import { apolloClient } from "./apolloClient";
-import './tema.css'
+import './theme.css'
+
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/frontend/src/tema.css b/frontend/src/tema.css
deleted file mode 100644
index 5258fae..0000000
--- a/frontend/src/tema.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/* Handlelappen – notatbok: farger og skrift fra Figma (siden «Grunnlag») */
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Kalam:wght@400;700&display=swap');
-
-:root {
-  /* Farger */
-  --hvit: #ffffff;       /* bakgrunn og lapper */
-  --blekk: #141414;      /* tekst og linjer */
-  --burgunder: #65081f;  /* håndskrift, merke, kant på kort */
-  --bringebaer: #d3045d; /* knapper, kommentarer */
-  --rosa: #fce8f0;       /* lapper, markering */
-
-  /* Skrift */
-  --font-ui: 'Geist', system-ui, sans-serif;
-  --font-mono: 'Geist Mono', ui-monospace, monospace;
-  --font-aksent: 'Instrument Serif', Georgia, serif;
-  --font-lapp: 'Kalam', cursive;
-}
-
-body {
-  margin: 0;
-  background: var(--hvit);
-  color: var(--blekk);
-  font-family: var(--font-ui);
-}
-
-/* Etiketter som «01 · KATEGORIER» */
-.etikett {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-/* Kursiv aksent i overskrifter, f.eks. <h1>Handle<em>lappen</em></h1> */
-h1 em, h2 em {
-  font-family: var(--font-aksent);
-  font-style: italic;
-  font-weight: 400;
-  color: var(--burgunder);
-}
-
-/* Knapper */
-.knapp {
-  background: var(--bringebaer);
-  color: var(--hvit);
-  border: none;
-  border-radius: 8px;
-  padding: 10px 16px;
-  font: 500 15px var(--font-ui);
-  cursor: pointer;
-}
-
-/* Rutemønster bak kategoriene */
-.rutemonster {
-  background-color: #fafafa;
-  background-image:
-    linear-gradient(#eeeeee 1px, transparent 1px),
-    linear-gradient(90deg, #eeeeee 1px, transparent 1px);
-  background-size: 24px 24px;
-}
-
-/* Kategorikort: burgunder kant og skarp skygge */
-.kort {
-  background: var(--hvit);
-  border: 1px solid var(--burgunder);
-  border-radius: 10px;
-  box-shadow: 3px 3px 0 var(--burgunder);
-  padding: 16px;
-  transition: box-shadow 0.15s, transform 0.15s;
-}
-.kort:hover {
-  border-width: 2px;
-  box-shadow: 5px 5px 0 var(--burgunder);
-  transform: translate(-1px, -1px);
-}
-
-/* Handlelappen: hvit lapp med rosa linjer, rød marg og tynn svart kontur */
-.lapp {
-  font-family: var(--font-lapp);
-  color: var(--burgunder);
-  background-color: var(--hvit);
-  background-image: repeating-linear-gradient(
-    transparent 0 31px, var(--rosa) 31px 32px);
-  border: 1px solid var(--blekk);
-  border-left: 3px solid var(--bringebaer);
-  padding: 16px 16px 16px 28px;
-  line-height: 32px;
-  box-shadow: 6px 6px 0 var(--rosa);
-  transform: rotate(-1deg);
-}
diff --git a/frontend/src/theme.css b/frontend/src/theme.css
new file mode 100644
index 0000000..a1a8287
--- /dev/null
+++ b/frontend/src/theme.css
@@ -0,0 +1,176 @@
+/* Handlelappen – farger og skrift fra Figma (Handlelappen – notatbok).
+   Variabelnavnene er de samme som i Figma (Local variables → Color),
+   bare med «-» i stedet for «/»: bg/primary i Figma = --bg-primary her.
+   Dev Mode i Figma viser de samme navnene, så CSS-en kan kopieres rett inn.
+
+   Lys og mørk modus:
+   - Følger innstillingen på maskinen som standard.
+   - Kan overstyres med <html data-theme="light|dark"> (se ThemeToggle.tsx). */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Kalam:wght@400;700&display=swap');
+
+/* ---------- Lys modus (standard) ---------- */
+:root {
+  color-scheme: light;
+
+  --bg-page: #ffffff;
+  --bg-muted: #f7f7f7;
+  --bg-surface: #ffffff;
+  --bg-primary: #d3045d;
+  --bg-brand: #65081f;
+  --bg-tint: #fce8f0;
+
+  --text-primary: #141414;
+  --text-secondary: #5e5e5e;
+  --text-muted: #8a8a8a;
+  --text-brand: #65081f;
+  --text-accent: #d3045d;
+  --text-on-dark: #ffffff;
+
+  --border-hairline: #e3e3e3;
+  --border-grid: #efefef;
+  --border-strong: #141414;
+  --border-brand: #65081f;
+
+  --note-paper: #ffffff;
+  --note-tint: #fce8f0;
+  --note-rule: #f7cfdf;
+  --note-margin: #d3045d;
+  --note-tape: #f7cfdf;
+  --note-ink: #65081f;
+
+  --annotation: #d3045d;
+
+  /* Skrift */
+  --font-ui: 'Geist', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+  --font-accent: 'Instrument Serif', Georgia, serif;
+  --font-note: 'Kalam', cursive;
+}
+
+/* ---------- Mørk modus ---------- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --bg-page: #241319;
+    --bg-muted: #1e1015;
+    --bg-surface: #301a22;
+    --bg-primary: #ff4f8b;
+    --bg-brand: #8c1838;
+    --bg-tint: #4a2230;
+
+    --text-primary: #f6ece6;
+    --text-secondary: #d6c3c3;
+    --text-muted: #a68e90;
+    --text-brand: #f4a3b8;
+    --text-accent: #ff6b9e;
+    --text-on-dark: #ffffff;
+
+    --border-hairline: #43293a;
+    --border-grid: #2d1a21;
+    --border-strong: #eadbd5;
+    --border-brand: #f4a3b8;
+
+    --note-paper: #301a22;
+    --note-tint: #4a2230;
+    --note-rule: #5a2c3d;
+    --note-margin: #ff4f8b;
+    --note-tape: #6b3346;
+    --note-ink: #f4a3b8;
+
+    --annotation: #ff6b9e;
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --bg-page: #241319;
+  --bg-muted: #1e1015;
+  --bg-surface: #301a22;
+  --bg-primary: #ff4f8b;
+  --bg-brand: #8c1838;
+  --bg-tint: #4a2230;
+
+  --text-primary: #f6ece6;
+  --text-secondary: #d6c3c3;
+  --text-muted: #a68e90;
+  --text-brand: #f4a3b8;
+  --text-accent: #ff6b9e;
+  --text-on-dark: #ffffff;
+
+  --border-hairline: #43293a;
+  --border-grid: #2d1a21;
+  --border-strong: #eadbd5;
+  --border-brand: #f4a3b8;
+
+  --note-paper: #301a22;
+  --note-tint: #4a2230;
+  --note-rule: #5a2c3d;
+  --note-margin: #ff4f8b;
+  --note-tape: #6b3346;
+  --note-ink: #f4a3b8;
+
+  --annotation: #ff6b9e;
+}
+
+/* ---------- Grunnstil ---------- */
+body {
+  margin: 0;
+  background: var(--bg-page);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+  transition: background-color 0.2s, color 0.2s;
+}
+
+/* Små etiketter i monospace, f.eks. «01 · KATEGORIER» */
+.label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* Kursiv aksent i overskrifter, f.eks. <h1>Handle<em>lappen</em></h1> */
+h1 em,
+h2 em {
+  font-family: var(--font-accent);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--text-brand);
+}
+
+/* Rutemønster bak kategoriene */
+.grid-pattern {
+  background-color: var(--bg-muted);
+  background-image:
+    linear-gradient(var(--border-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-grid) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* Handlelappen: linjert papir, bringebær marg og tynn kontur */
+.note {
+  font-family: var(--font-note);
+  color: var(--note-ink);
+  background-color: var(--note-paper);
+  background-image: repeating-linear-gradient(transparent 0 31px, var(--note-rule) 31px 32px);
+  border: 1px solid var(--border-strong);
+  border-left: 3px solid var(--note-margin);
+  padding: 16px 16px 16px 28px;
+  line-height: 32px;
+  box-shadow: 6px 6px 0 var(--note-tint);
+  transform: rotate(-1deg);
+}
+
+/* Knappen som bytter mellom lys og mørk modus */
+.theme-toggle {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  padding: 6px 12px;
+  font: 500 13px var(--font-mono);
+  cursor: pointer;
+}
\ No newline at end of file