# Byggekamera Design System

Dokumentasjon for design tokens og komponenter basert på kildekoden i `byggekamera-source/client/`.

---

## Farger (fra tailwind.config.ts)

### Primærfarger
```css
--primary-main: #C48F4D;
--primary-dark: #8B5F2D;
--primary-light: rgba(196, 143, 77, 0.16);    /* Aktive states, selected tabs */
--primary-hover: rgba(196, 143, 77, 0.24);    /* Hover states */
```

### Bakgrunnsfarger (mørk modus)
```css
--gray-0: #0A0A0A;    /* Hovedbakgrunn, header */
--gray-1: #1A1A1A;    /* Sekundær bakgrunn, input-felter, user-button */
--gray-2: #262626;    /* Kort, tabell-rader */
--gray-3: #333333;    /* Hover på kort */
```

### Tekstfarger
```css
--light-primary: #FFFFFF;                      /* Hovedtekst, titler */
--light-secondary: rgba(255, 255, 255, 0.73);  /* Body text default, labels */
--light-disabled: rgba(255, 255, 255, 0.46);   /* Placeholder tekst */
```

### Statusfarger
```css
--error-main: #D3341F;
--error-background: rgba(211, 52, 31, 0.12);

--warning-main: #FFB303;
--warning-background: rgba(255, 179, 3, 0.24);

--success-main: #13C665;
--success-background: rgba(19, 198, 101, 0.16);

--info-main: #125DDD;
--info-background: rgba(18, 93, 221, 0.16);
```

### Border/Divider
```css
--neutral-ondark-divider: rgba(255, 255, 255, 0.06);           /* Hovedskillelinje */
--neutral-ondark-card-outline-border: rgba(255, 255, 255, 0.12); /* Kort-border, inactive tabs */
--neutral-ondark-input-outline-border: rgba(255, 255, 255, 0.23); /* Input-felt border */
```

---

## Typografi (fra style.css)

### Font
```css
font-family: 'Roboto Condensed', sans-serif;
```

### Body default (fra style.css body)
```css
font-size: 16px;        /* text-base */
font-weight: 300;       /* font-light */
color: light-secondary; /* rgba(255, 255, 255, 0.73) */
```

### Heading-klasser (fra style.css)
| Klasse | Desktop size | Line-height | Weight |
|--------|--------------|-------------|--------|
| .h1 | 61px | 105% | light (300) |
| .h2 | 48px | 117% | - |
| .h3 | 39px | 122% | light (300) |
| .h4 | 31px | 130% | light (300) |
| .h5 | 25px | 130% | light (300) |
| .h6 | 20px | 121% | light (300) |

### Body-klasser (fra style.css)
| Klasse | Size | Line-height | Weight |
|--------|------|-------------|--------|
| .body-1-light | 18px | 158% | light (300) |
| .body-1-medium | 18px | 158% | medium (500) |
| .body-2-light | 16px | 150% | light (300) |
| .body-2-medium | 16px | 150% | medium (500) |
| .body-3-light | 14px | 146% | light (300) |
| .body-3-medium | 14px | 146% | medium (500) |
| .body-4-light | 12px | 150% | light (300) |
| .body-4-medium | 12px | 150% | medium (500) |

### Components-button (fra style.css)
```css
font-size: 14px;
line-height: 168%;      /* lg screens */
font-weight: 400;       /* font-normal */
```

---

## Spacing (Tailwind scale)

```css
--space-1: 4px;    /* gap-1, p-1 */
--space-2: 8px;    /* gap-2, p-2 */
--space-3: 12px;   /* gap-3, p-3 */
--space-4: 16px;   /* gap-4, p-4 */
--space-5: 20px;   /* gap-5, p-5 */
--space-6: 24px;   /* gap-6, p-6 */
--space-8: 32px;   /* gap-8, p-8 */
--space-10: 40px;  /* gap-10, p-10 */
```

---

## Border Radius

```css
--rounded-sm: 4px;   /* rounded-sm */
--rounded-md: 6px;   /* rounded-md */
--rounded-lg: 8px;   /* rounded-lg */
--rounded-xl: 12px;  /* rounded-xl */
```

---

## Transition (custom-duration fra style.css)

```css
transition: all 300ms ease-in-out;
```

---

## Komponenter

### Header (fra Header.vue)
```css
header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--gray-0);
  border-bottom: 1px solid var(--neutral-ondark-divider);
  z-index: 997;
}

nav.container-wrapper {
  padding: 12px 80px;  /* py-3 lg:px-20 */
  max-width: 1600px;
  margin: 0 auto;
}
```

### Logo (fra Header.vue)
```css
.logo {
  width: 208px;        /* w-52 = 13rem */
  margin-left: -16px;  /* -ml-4 */
  fill: var(--light-primary);
}
```

### Navigasjon (fra StyledNavLink.vue + style.css)
```css
.nav {
  display: flex;
  gap: 4px;            /* gap-1 */
}

.nav-item {
  padding: 12px 16px;  /* py-3 px-4 */
  border-radius: 8px;  /* rounded-lg */
  color: var(--light-primary);
  font-size: 14px;     /* text-sm */
  font-weight: 500;    /* font-medium */
  border: 1px solid transparent;
  transition: all 300ms ease-in-out;
}

.nav-item:hover {
  background: var(--primary-hover);
  color: var(--primary-main);
}

/* button-soft class from style.css */
.nav-item.active {
  background: var(--primary-light);
  color: var(--primary-main);
}

.nav-item.active:hover {
  background: var(--primary-hover);
}
```

### User-knapp (fra Header.vue)
```css
.user-section {
  display: flex;
  align-items: center;
  gap: 40px;                      /* gap-10 */
  padding: 8px 8px 8px 16px;      /* py-2 pr-2 pl-4 */
  background: var(--gray-1);
  border-radius: 8px;             /* rounded-lg */
  transition: all 300ms ease-in-out;
}

.user-section:hover {
  background: var(--primary-hover);
}

.user-name {
  color: var(--light-primary);
  font-size: 14px;                /* text-sm */
  font-weight: 500;               /* font-medium */
}

.user-role {
  color: var(--primary-main);
  font-size: 12px;                /* text-xs */
  font-weight: 500;               /* font-medium */
}
```

### Container (fra style.css)
```css
.container-wrapper {
  padding-left: 80px;   /* lg:px-20 = 5rem */
  padding-right: 80px;
  max-width: 1600px;    /* 3xl:container */
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 1024px) {
  .container-wrapper {
    padding-left: 16px;  /* px-4 */
    padding-right: 16px;
  }
}
```

### Page Header (fra Cameras.vue)
```css
.page-header {
  padding: 26px 0;      /* py-[26px] */
}

.page-title {
  /* h6 + text-light-primary */
  font-size: 20px;      /* lg:text-[20px] */
  font-weight: 300;     /* font-light */
  line-height: 1.21;    /* lg:leading-[121%] */
  color: var(--light-primary);
}
```

### Search Input (fra Input.vue + style.css)
```css
.search-container {
  max-width: 460px;     /* max-w-[460px] */
  margin-top: 40px;     /* lg:mt-10 */
  margin-bottom: 16px;  /* my-4 */
}

/* input-primary from style.css */
.search-input {
  width: 100%;
  padding: 8px 12px;              /* py-2 px-3 */
  padding-left: 40px;             /* !pl-10 when searchIcon */
  background: var(--gray-1);      /* bg-gray-1 */
  border: 1px solid var(--neutral-ondark-divider);
  border-radius: 6px;             /* rounded-md */
  color: var(--light-primary);
  font-size: 14px;
  transition: all 300ms ease-in-out;
}

.search-input:hover {
  border-color: var(--primary-main);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-main);
  box-shadow: 0 0 0 3px var(--primary-hover);
}

.search-input::placeholder {
  color: var(--light-disabled);
}

.search-icon {
  position: absolute;
  left: 12px;           /* left-3 */
  top: 8px;             /* top-2 */
  width: 24px;
  height: 24px;
  color: var(--light-secondary);
}
```

### Tabs (fra Cameras.vue + style.css)
```css
.tabs-container {
  display: flex;
}

/* Base tab - components-button font */
.tab {
  padding: 10px 16px;   /* py-[10px] px-4 */
  font-size: 14px;
  line-height: 1.68;    /* lg:leading-[168%] */
  font-weight: 400;     /* font-normal */
  border: none;
  background: transparent;
  transition: all 300ms ease-in-out;
}

/* not-selected-card from style.css */
.tab.not-selected {
  color: var(--light-primary);
  border-bottom: 1px solid var(--neutral-ondark-card-outline-border);
  cursor: pointer;
}

.tab.not-selected:hover {
  background: var(--primary-hover);
  color: var(--primary-main);
  border-bottom-color: var(--primary-main);
}

/* selected-card from style.css */
.tab.selected {
  background: var(--primary-light);
  color: var(--primary-main);
  border-bottom: 1px solid var(--primary-main);
  cursor: default;
}
```

### Kort (Cards)
```css
.card {
  padding: 12px 16px;   /* p-3 px-4 */
  border-radius: 12px;  /* rounded-xl */
  background: var(--gray-2);
  border: 1px solid var(--neutral-ondark-divider);
}
```

### Dropdown Menu (fra style.css menu-wrapper)
```css
.dropdown-menu {
  position: absolute;
  padding: 20px;        /* p-5 */
  background: var(--gray-2);
  border: 1px solid var(--neutral-ondark-divider);
  border-radius: 12px;  /* rounded-xl */
  min-width: 176px;     /* min-w-44 */
  z-index: 999;
  max-height: 319px;
  overflow-y: auto;
}

/* menu-item from style.css */
.dropdown-item {
  padding: 8px 12px;    /* py-2 px-3 */
  border-radius: 8px;   /* rounded-lg */
  font-size: 14px;      /* text-sm */
  font-weight: 500;     /* font-medium */
  color: var(--light-primary);
  cursor: pointer;
  transition: all 300ms ease-in-out;
}

.dropdown-item:hover {
  background: var(--primary-hover);
}
```

### Knapper

#### button-primary (fra style.css)
```css
.button-primary {
  background: var(--primary-main);
  border: 1px solid var(--primary-main);
  color: #000000;       /* text-dark-primary */
  transition: all 300ms ease-in-out;
}

.button-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--light-primary);
}
```

#### button-soft (fra style.css)
```css
.button-soft {
  background: var(--primary-light);
  border: 1px solid transparent;
  color: var(--primary-main);
  transition: all 300ms ease-in-out;
}

.button-soft:hover {
  background: var(--primary-hover);
}
```

#### button-outline (fra style.css)
```css
.button-outline {
  background: transparent;
  border: 1px solid var(--primary-main);
  color: var(--primary-main);
  transition: all 300ms ease-in-out;
}

.button-outline:hover {
  background: var(--primary-hover);
}
```

#### button-icon-only (fra style.css)
```css
.button-icon-only {
  padding: 8px;         /* p-2 on lg */
  border-radius: 8px;   /* rounded-lg */
  transition: all 300ms ease-in-out;
}

.button-icon-only:hover {
  background: var(--primary-hover);
  color: var(--primary-main);
}
```

### Ikon-knapper
```css
.icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
  color: var(--primary-main);
}
```

---

## Content Section (grå bakgrunn)

```css
.content-section {
  background: rgba(26, 26, 26, 0.7);  /* bg-gray-1/70 */
  padding-top: 32px;                   /* lg:py-8 */
  padding-bottom: 32px;
}
```

---

## Status Badges (fra Cameras.vue)

```css
.status-badge {
  padding: 8px 12px;    /* py-2 px-3 */
  border-radius: 8px;   /* rounded-lg */
  border: 1px solid var(--neutral-ondark-divider);
  font-size: 24px;      /* text-2xl */
  font-weight: 500;     /* font-medium */
  color: var(--light-primary);
}

.status-badge.ok {
  background: var(--success-background);
}

.status-badge.warning {
  background: var(--warning-background);
}

.status-badge.error {
  background: var(--error-background);
}

.status-badge.deactivated {
  background: var(--gray-2);
}

.status-label {
  font-size: 12px;      /* text-[12px] */
  line-height: 16px;    /* leading-4 */
  font-weight: 400;     /* font-normal */
  color: var(--light-secondary);
}
```

---

## Ikoner

Bruk inline SVG med `fill="currentColor"` for å arve farge fra parent.

### Dropdown-pil (md-expandmore)
```html
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
  <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
```

### Søkeikon (md-search-round)
```html
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
  <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
```

### Tre-prikker meny
```html
<svg viewBox="0 0 24 24" fill="currentColor" width="19" height="19">
  <circle cx="12" cy="5" r="2"/>
  <circle cx="12" cy="12" r="2"/>
  <circle cx="12" cy="19" r="2"/>
</svg>
```

### Dokument-ikon
```html
<svg viewBox="0 0 16 16" fill="currentColor" width="19" height="19">
  <path d="M4 0h5.293L14 4.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm5 1.5V5h3.5L9 1.5zM4.5 8a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7zm0 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4z"/>
</svg>
```

---

## Assets

- Logo: `assets/logo-white.png` (hvit versjon for mørk bakgrunn)
- Kamera-bilder: `assets/camera-images/`