elevation

Del av designsystemet i swedol-ui-prototype. Se CLAUDE.md för teknikstack, mallregler, breakpoints och kvalitetschecklistan som alltid gäller utöver denna spec.

Elevation & Shadows (ECO Design System)

Shadows uttrycker graden av elevation mellan ytor – ju större och mjukare skugga, desto högre elevation.

Grundbegrepp

Begrepp	Definition
Elevation	Avståndet mellan två element längs z-axeln.
Surface	Den lägst synliga behållaren som komponenter, text m.m. placeras på. Motsvara background-primary (#ffffff).
Background	Applikationens bakgrundsfärg – den yta som allt vilar på under surface-nivån.

Välja rätt elevation

• Öka elevation för prioriterade actions. Användare uppmärksammar element som verkar ligga närmre – lyft det du vill att de ska fokusera på.
• Liten och skarp skugga = ytan ligger nära bakgrunden (låg elevation).
• Stor och mjuk skugga = ytan ligger långt från bakgrunden (hög elevation).
• Efterlikna verkliga ljusförhållanden – välj den elevationsnivå som känns naturlig för komponentens funktion.
• Använd sparsamt. Överdriven elevation distraherar och försämrar användarupplevelsen.

ECO Design System har 4 kategorier av elevation:

Kategori	Prefix	Beskrivning
Shadow Bottom	elevation-b-*	Ljuskälla uppifrån. Vanligast förekommande.
Shadow Top	elevation-t-*	Ljuskälla nedifrån. Används sparsamt.
Designated Level	elevation-drawer-*	Globala komponenter på separat lager (navigation, drawers).
Component Specific	elevation-*	Exklusivt för specifika komponenter.

---

Shadow Bottom (elevation-b-*)

Simulerar ljuskälla uppifrån. Skuggan faller nedåt. Vanligast förekommande i hela UI:t.

Varje nivå består av två lager: en mjuk huvudskugga + en skarp konturskugga (0px 0px 1px 0px rgba(0,0,0,0.05)).

Token	CSS box-shadow	Nivå	Används för
elevation-b-20	0px 1px 3px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	20%	Variant Tables (PDP/PLP), Data tables
elevation-b-40	0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	40%	Tooltip
elevation-b-60	0px 4px 8px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	60%	Overflow menu, Notification
elevation-b-80	0px 8px 16px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	80%	Site header, Menu, Dropdowns, Exposed Dropdowns
elevation-b-100	0px 16px 24px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	100%	Modaler

/* Exempel: Kort med elevation-b-20 */
.card {
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.10),
              0px 0px 1px 0px rgba(0,0,0,0.05);
}

/* Exempel: Modal med elevation-b-100 */
.modal {
  box-shadow: 0px 16px 24px 0px rgba(0,0,0,0.10),
              0px 0px 1px 0px rgba(0,0,0,0.05);
}

---

Shadow Top (elevation-t-*)

Simulerar ljuskälla nedifrån. Skuggan faller uppåt. Används sparsamt.

Token	CSS box-shadow	Nivå
elevation-t-20	0px -1px 3px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	20%
elevation-t-40	0px -2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	40%
elevation-t-60	0px -4px 8px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	60%
elevation-t-80	0px -8px 16px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	80%
elevation-t-100	0px -16px 24px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)	100%

---

Designated Level – Drawers & Navigation

Avsett för essentiella globala komponenter (navigationsmeny, drawers) som måste ligga på ett separat lager och sällan hindras av andra element.

Token	CSS box-shadow	Beskrivning
elevation-drawer-left	25px 0px 25px 0px rgba(0,0,0,0.03)	Drawer från vänster – skugga på höger sida
elevation-drawer-right	-25px 0px 25px 0px rgba(0,0,0,0.03)	Drawer från höger – skugga på vänster sida
elevation-drawer-left-menu-sublevel	4px 0px 10px 0px rgba(0,0,0,0.05)	Inline drawer, sub-menynivåer (nivå 2+)

/* Drawer från vänster */
.drawer-left {
  box-shadow: 25px 0px 25px 0px rgba(0,0,0,0.03);
}

/* Drawer från höger */
.drawer-right {
  box-shadow: -25px 0px 25px 0px rgba(0,0,0,0.03);
}

---

Component Specific

Skuggor som enbart används för specifika komponenter. Specificeras i detalj inom respektive komponentbeskrivning.

Token	CSS box-shadow	Används för
elevation-input_control-switch	0px 4px 8px 0px rgba(48,49,51,0.10), 0px 1px 1px 0px rgba(48,49,51,0.24), 0px -1px 1px 0px rgba(0,0,0,0.03)	Toggle switch – indikerar upphöjd nivå
elevation-table-overflow-right	-5px 0px 10px 0px rgba(0,0,0,0.05), -1px 0px 5px 0px rgba(0,0,0,0.10)	Tabell-overflow höger – skugga inuti tabell där innehåll överskrider bredden
elevation-table-overflow-left	5px 0px 10px 0px rgba(0,0,0,0.05), 1px 0px 5px 0px rgba(0,0,0,0.10)	Tabell-overflow vänster – skugga inuti tabell där innehåll överskrider bredden

---

Regler för elevation

1. Välj alltid lägsta möjliga nivå – använd elevation-b-20 som default för kortliknande ytor.
2. Öka elevation för prioriterade actions – modaler och kritiska overlays ska alltid ligga på elevation-b-100.
3. Blanda inte Bottom och Top på samma komponent (undantag: elevation-input_control-switch).
4. Drawers och navigation ska alltid använda elevation-drawer-*, aldrig elevation-b-*.
5. Component Specific tokens används aldrig utanför sin avsedda komponent.
6. Surface ≠ Background – Surface (background-primary: #ffffff) är den synliga behållaren; Background är underliggande sidbakgrund. Elevation skiljer dessa åt visuellt.
7. Liten/skarp skugga signalerar nära yta (låg nivå). Stor/mjuk skugga signalerar hög elevation – välj därefter.
8. Drawer-overlay – bakgrundsöverlagringen bakom en öppen drawer ska ha background: rgba(0,0,0,0.2). Använd aldrig surface-opacity-black-50 (50%) för drawers.
9. Drawer-skugga – en drawer som öppnas från höger ska alltid ha box-shadow: var(--elevation-drawer-right). En drawer från vänster ska ha box-shadow: var(--elevation-drawer-left). Skuggan appliceras direkt på drawer-panelen, inte på overlay.
10. Drawer-bredd – en standard drawer ska alltid ha width: min(500px, 100%). Detta ger fast 500px bredd på större skärmar och fyller hela bredden automatiskt när fönstret/enheten är smalare än 500px. Använd aldrig separata media queries för att sätta width: 100% eller width: 500px på drawer-panelen.
11. Drawer-header scroll-skugga – när drawer-innehållet scrollas nedåt ska headern få en skugga för att visuellt separera den från innehållet. Använd elevation-b-60 (0px 4px 8px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05)). Klassen .drawer-header--elevated togglas via JS när content.scrollTop > 0. Transition: var(--duration-fast-3) var(--ease-standard).

.drawer-header {
  transition: box-shadow var(--duration-fast-3) var(--ease-standard);
}
.drawer-header--elevated {
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.05); /* elevation-b-60 */
}

content.addEventListener('scroll', () => {
  header.classList.toggle('drawer-header--elevated', content.scrollTop > 0);
});

12. Drawer – responsiva komponentstorlekar – vid max-width: 768px (xs + sm breakpoints) ska alla komponenter inuti drawern använda Mobile Base Styling. Applicera följande @media (max-width: 768px)-block på varje drawer:

@media (max-width: 768px) {
  /* Header */
  .drawer-header { padding: 16px 24px; }
  .drawer-title {
    font-size: 22px;       /* display-sm Mobile */
    line-height: 22px;
  }

  /* Content & footer */
  .drawer-content { padding: 0 24px 24px; gap: 16px; }
  .drawer-footer { padding: 16px 24px; }

  /* Spara-knapp — mobile lg: padding 12px */
  .drawer-save-btn { padding: 12px 16px; }

  /* Labels — label-md Mobile: 14px/14px, 0.42px */
  .form-label {
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.42px;
  }

  /* Inputs & selects — Large Mobile: 40px, 8px padding, body-md mobile 16px/22px */
  .form-input,
  .form-select {
    height: 40px;
    padding: 8px;
    line-height: 22px;
  }
  .form-select { padding-right: 40px; }   /* behåll utrymme för dropdown-pil */

  /* Checkbox-text — body-md Mobile: 16px/22px */
  .form-checkbox-item span {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.32px;
  }

  /* form-row staplas vertikalt på mobil */
  .form-row { flex-direction: column; gap: 16px; }
}

Sammanfattning av Mobile Base Styling för drawer-komponenter:

Komponent	Desktop (769px+)	Mobile (≤768px)
Drawer-titel	display-sm 26px/26px	22px/22px
Header-padding	24px 32px	16px 24px
Content-padding	0 32px 32px, gap 24px	0 24px 24px, gap 16px
Footer-padding	24px 32px	16px 24px
Label (label-md)	16px/16px, 0.48px	14px/14px, 0.42px
Input / Select	48px, padding 8px 12px, line-height 24px	40px, padding 8px, line-height 22px
Checkbox-text	body-md 16px/24px, 0.32px	16px/22px, 0.32px
Spara-knapp	padding: 16px	padding: 12px 16px
form-row	flex-direction: row	flex-direction: column, gap 16px

---