Skip to content

Legg til hitbox utils #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dagfrode wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Legg til hitbox utils #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1adc035
Legg til hitbox utils
dagfrode May 8, 2026
1d86a72
Forbedre hitbox demo
dagfrode May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 206 additions & 0 deletions indeks-docs/docs/utility-klasser/hitbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
# Hitbox

Hitbox utvider det klikkbare arealet til et element uten å påvirke layout. Nyttig for å oppfylle
WCAG 2.5.5 (44×44 px minimum touch target) på små ikonknapper, lenker og andre klikkbare elementer
der visuell størrelse er satt av designet.

Teknikken bruker `::before`-pseudo-elementet til å utvide det interaktive arealet. Elementet selv
beholder sin visuelle størrelse og layout-påvirkning. Inspirert av [bazza.dev/craft/2026/hit-area](https://bazza.dev/craft/2026/hit-area).

## Klasser

`.ix-hitbox` er basisklassen og må alltid brukes. Legg til én eller flere størrelsesklasser for å
kontrollere utvidelsen i de retningene du trenger.

### Basisklasse

| CSS-klasse | Beskrivelse |
| ------------ | ------------------------------------------------------------------------------------ |
| `.ix-hitbox` | Setter `position: relative` og aktiverer `::before`-pseudo-elementet. Alltid påkrevd. |

### Uniform utvidelse (alle sider)

| CSS-klasse | Utvidelse (alle sider) |
| ----------------- | --------------------------- |
| `.ix-hitbox-2xs` | `var(--ix-spacing-2xs)` |
| `.ix-hitbox-xs` | `var(--ix-spacing-xs)` |
| `.ix-hitbox-sm` | `var(--ix-spacing-sm)` |
| `.ix-hitbox-md` | `var(--ix-spacing-md)` |
| `.ix-hitbox-lg` | `var(--ix-spacing-lg)` |
| `.ix-hitbox-xl` | `var(--ix-spacing-xl)` |
| `.ix-hitbox-2xl` | `var(--ix-spacing-2xl)` |

### X-akse (venstre + høyre)

| CSS-klasse | Utvidelse (venstre + høyre) |
| ------------------- | --------------------------- |
| `.ix-hitbox-x-2xs` | `var(--ix-spacing-2xs)` |
| `.ix-hitbox-x-xs` | `var(--ix-spacing-xs)` |
| `.ix-hitbox-x-sm` | `var(--ix-spacing-sm)` |
| `.ix-hitbox-x-md` | `var(--ix-spacing-md)` |
| `.ix-hitbox-x-lg` | `var(--ix-spacing-lg)` |
| `.ix-hitbox-x-xl` | `var(--ix-spacing-xl)` |
| `.ix-hitbox-x-2xl` | `var(--ix-spacing-2xl)` |

### Y-akse (topp + bunn)

| CSS-klasse | Utvidelse (topp + bunn) |
| ------------------- | --------------------------- |
| `.ix-hitbox-y-2xs` | `var(--ix-spacing-2xs)` |
| `.ix-hitbox-y-xs` | `var(--ix-spacing-xs)` |
| `.ix-hitbox-y-sm` | `var(--ix-spacing-sm)` |
| `.ix-hitbox-y-md` | `var(--ix-spacing-md)` |
| `.ix-hitbox-y-lg` | `var(--ix-spacing-lg)` |
| `.ix-hitbox-y-xl` | `var(--ix-spacing-xl)` |
| `.ix-hitbox-y-2xl` | `var(--ix-spacing-2xl)` |

### Individuelle sider

| CSS-klasse | Utvidelse |
| ------------------- | ---------- |
| `.ix-hitbox-t-2xs` | Topp: `var(--ix-spacing-2xs)` |
| `.ix-hitbox-t-xs` | Topp: `var(--ix-spacing-xs)` |
| `.ix-hitbox-t-sm` | Topp: `var(--ix-spacing-sm)` |
| `.ix-hitbox-t-md` | Topp: `var(--ix-spacing-md)` |
| `.ix-hitbox-t-lg` | Topp: `var(--ix-spacing-lg)` |
| `.ix-hitbox-t-xl` | Topp: `var(--ix-spacing-xl)` |
| `.ix-hitbox-t-2xl` | Topp: `var(--ix-spacing-2xl)` |
| `.ix-hitbox-r-2xs` | Høyre: `var(--ix-spacing-2xs)` |
| `.ix-hitbox-r-xs` | Høyre: `var(--ix-spacing-xs)` |
| `.ix-hitbox-r-sm` | Høyre: `var(--ix-spacing-sm)` |
| `.ix-hitbox-r-md` | Høyre: `var(--ix-spacing-md)` |
| `.ix-hitbox-r-lg` | Høyre: `var(--ix-spacing-lg)` |
| `.ix-hitbox-r-xl` | Høyre: `var(--ix-spacing-xl)` |
| `.ix-hitbox-r-2xl` | Høyre: `var(--ix-spacing-2xl)` |
| `.ix-hitbox-b-2xs` | Bunn: `var(--ix-spacing-2xs)` |
| `.ix-hitbox-b-xs` | Bunn: `var(--ix-spacing-xs)` |
| `.ix-hitbox-b-sm` | Bunn: `var(--ix-spacing-sm)` |
| `.ix-hitbox-b-md` | Bunn: `var(--ix-spacing-md)` |
| `.ix-hitbox-b-lg` | Bunn: `var(--ix-spacing-lg)` |
| `.ix-hitbox-b-xl` | Bunn: `var(--ix-spacing-xl)` |
| `.ix-hitbox-b-2xl` | Bunn: `var(--ix-spacing-2xl)` |
| `.ix-hitbox-l-2xs` | Venstre: `var(--ix-spacing-2xs)` |
| `.ix-hitbox-l-xs` | Venstre: `var(--ix-spacing-xs)` |
| `.ix-hitbox-l-sm` | Venstre: `var(--ix-spacing-sm)` |
| `.ix-hitbox-l-md` | Venstre: `var(--ix-spacing-md)` |
| `.ix-hitbox-l-lg` | Venstre: `var(--ix-spacing-lg)` |
| `.ix-hitbox-l-xl` | Venstre: `var(--ix-spacing-xl)` |
| `.ix-hitbox-l-2xl` | Venstre: `var(--ix-spacing-2xl)` |

## CSS-egenskaper

Størrelsesklassene setter interne CSS-variabler som basisklassen bruker. Du kan overstyre disse
direkte hvis du trenger en egendefinert størrelse:

| CSS-variabel | Kontrollerer | Standard |
| --------------- | ------------- | -------- |
| `--ii-hit-t` | Topp-utvidelse | `0px` |
| `--ii-hit-r` | Høyre-utvidelse | `0px` |
| `--ii-hit-b` | Bunn-utvidelse | `0px` |
| `--ii-hit-l` | Venstre-utvidelse | `0px` |

```css
/* Egendefinert hitbox-størrelse */
.min-knapp {
--ii-hit-t: 12px;
--ii-hit-b: 12px;
}
```

## Eksempler

### Uniform utvidelse

Legg merke til at den visuelle størrelsen er uendret — bare det klikkbare arealet vokser.

```jsx live
<div class="hb-demo">
<div class="ix-hitbox ix-hitbox-2xs ix-hitbox-debug">2xs</div>
<div class="ix-hitbox ix-hitbox-xs ix-hitbox-debug">xs</div>
<div class="ix-hitbox ix-hitbox-sm ix-hitbox-debug">sm</div>
<div class="ix-hitbox ix-hitbox-md ix-hitbox-debug">md</div>
<div class="ix-hitbox ix-hitbox-lg ix-hitbox-debug">lg</div>
</div>
```

### X-akse

Nyttig for lenker og knapper i navigasjon der du vil utvide klikkbart areal horisontalt uten å påvirke linjehøyden.

```jsx live
<div class="hb-demo">
<div class="ix-hitbox ix-hitbox-x-sm ix-hitbox-debug">x-sm</div>
<div class="ix-hitbox ix-hitbox-x-md ix-hitbox-debug">x-md</div>
<div class="ix-hitbox ix-hitbox-x-lg ix-hitbox-debug">x-lg</div>
</div>
```

### Y-akse

Nyttig for ikoner og kompakte verktøylinjeknapper der du vil utvide treffarealet opp og ned.

```jsx live
<div class="hb-demo">
<div class="ix-hitbox ix-hitbox-y-sm ix-hitbox-debug">y-sm</div>
<div class="ix-hitbox ix-hitbox-y-md ix-hitbox-debug">y-md</div>
<div class="ix-hitbox ix-hitbox-y-lg ix-hitbox-debug">y-lg</div>
</div>
```

### Individuelle sider

Nyttig for elementer som sitter langs en kant og bare trenger utvidelse innover — for eksempel en lukk-knapp i et hjørne.

```jsx live
<div class="hb-demo">
<div class="ix-hitbox ix-hitbox-t-lg ix-hitbox-debug">t-lg</div>
<div class="ix-hitbox ix-hitbox-r-lg ix-hitbox-debug">r-lg</div>
<div class="ix-hitbox ix-hitbox-b-lg ix-hitbox-debug">b-lg</div>
<div class="ix-hitbox ix-hitbox-l-lg ix-hitbox-debug">l-lg</div>
</div>
```

### Kombiner akseklasser

Bruk x- og y-akseklassene sammen for asymmetrisk utvidelse.

```jsx live
<div class="hb-demo">
<div class="ix-hitbox ix-hitbox-x-lg ix-hitbox-y-2xs ix-hitbox-debug">x-lg y-2xs</div>
<div class="ix-hitbox ix-hitbox-x-2xs ix-hitbox-y-lg ix-hitbox-debug">x-2xs y-lg</div>
</div>
```

## Debug

To klasser gjør det enklere å visualisere hitbox-arealet under utvikling. Fjern dem før produksjon.

| CSS-klasse | Beskrivelse |
| ------------------------ | ----------------------------------------------------------------------------------------------------- |
| `.ix-hitbox-debug` | Viser alltid hitbox-arealet med blå ramme og bakgrunn. Bytter til grønt ved hover. |
| `.ix-hitbox-debug-hover` | Viser bare hitbox-arealet ved hover, med grønn ramme og bakgrunn. Brukes for å bekrefte at arealet er riktig uten å forstyrre det visuelle designet. |

Fargesignalene er de samme som i originalen fra bazza.dev: blå = «her er hitbox-arealet», grønt = «hover aktiv, treffer du innenfor?».

### Eksempel

```jsx live
<div class="ix-flex ix-gap-xl ix-p-xl ix-items-center">
<button class="ix-button ix-hitbox ix-hitbox-sm ix-hitbox-debug" data-variant="tertiary" data-size="sm">
Debug alltid
</button>
<button class="ix-button ix-hitbox ix-hitbox-sm ix-hitbox-debug-hover" data-variant="tertiary" data-size="sm">
Debug ved hover
</button>
</div>
```

## Tilgjengelighet

Hitbox bruker `::before`-pseudo-elementet til å utvide det klikkbare arealet. Pseudo-elementet
legges over nærliggende innhold hvis elementet ikke er plassert i en beholder med `overflow: hidden`
eller `clip-path`. Sørg for at hitbox-arealet ikke overlapper andre klikkbare elementer ved å gi
tilstrekkelig mellomrom mellom dem.

Klassen setter automatisk `position: relative` på elementet via `.ix-hitbox`. Ikke fjern dette —
uten `position: relative` vil `::before` posisjonere seg mot nærmeste posisjonerte forfar.
2 changes: 1 addition & 1 deletion indeks-docs/sidebars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const sidebars: SidebarsConfig = {
type: 'category',
label: 'Utility-klasser',
collapsed: true,
items: ['utility-klasser/oversikt', 'utility-klasser/native'],
items: ['utility-klasser/oversikt', 'utility-klasser/native', 'utility-klasser/hitbox'],
},
{
type: 'category',
Expand Down
19 changes: 19 additions & 0 deletions indeks-docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,4 +67,23 @@
/* Gjenopprett fokusring på textarea — høyere spesifisitet enn Infima sin regel */
body:not(.navigation-with-keyboard) .ix-text-area textarea:focus {
outline: var(--ix-outline-default);
}

.hb-demo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ix-spacing-2xl);
padding: var(--ix-spacing-2xl);
}

.hb-demo > div {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--ix-color-surface-main-default);
border: 1px solid var(--ix-color-border-main-default);
border-radius: 4px;
font-size: 0.875rem;
cursor: pointer;
}
98 changes: 98 additions & 0 deletions indeks-utils/css/hitbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
/* Inspirert av bazza.dev/craft/2026/hit-area — tilpasset Indeks med eget navn og spacing-tokens */

.ix-hitbox {
position: relative;
--ii-hit-t: 0px;
--ii-hit-r: 0px;
--ii-hit-b: 0px;
--ii-hit-l: 0px;
}

.ix-hitbox::before {
content: '';
position: absolute;
top: calc(-1 * var(--ii-hit-t));
right: calc(-1 * var(--ii-hit-r));
bottom: calc(-1 * var(--ii-hit-b));
left: calc(-1 * var(--ii-hit-l));
}

/* Uniform */
.ix-hitbox-2xs { --ii-hit-t: var(--ix-spacing-2xs); --ii-hit-r: var(--ix-spacing-2xs); --ii-hit-b: var(--ix-spacing-2xs); --ii-hit-l: var(--ix-spacing-2xs); }
.ix-hitbox-xs { --ii-hit-t: var(--ix-spacing-xs); --ii-hit-r: var(--ix-spacing-xs); --ii-hit-b: var(--ix-spacing-xs); --ii-hit-l: var(--ix-spacing-xs); }
.ix-hitbox-sm { --ii-hit-t: var(--ix-spacing-sm); --ii-hit-r: var(--ix-spacing-sm); --ii-hit-b: var(--ix-spacing-sm); --ii-hit-l: var(--ix-spacing-sm); }
.ix-hitbox-md { --ii-hit-t: var(--ix-spacing-md); --ii-hit-r: var(--ix-spacing-md); --ii-hit-b: var(--ix-spacing-md); --ii-hit-l: var(--ix-spacing-md); }
.ix-hitbox-lg { --ii-hit-t: var(--ix-spacing-lg); --ii-hit-r: var(--ix-spacing-lg); --ii-hit-b: var(--ix-spacing-lg); --ii-hit-l: var(--ix-spacing-lg); }
.ix-hitbox-xl { --ii-hit-t: var(--ix-spacing-xl); --ii-hit-r: var(--ix-spacing-xl); --ii-hit-b: var(--ix-spacing-xl); --ii-hit-l: var(--ix-spacing-xl); }
.ix-hitbox-2xl { --ii-hit-t: var(--ix-spacing-2xl); --ii-hit-r: var(--ix-spacing-2xl); --ii-hit-b: var(--ix-spacing-2xl); --ii-hit-l: var(--ix-spacing-2xl); }

/* X-akse (venstre + høyre) */
.ix-hitbox-x-2xs { --ii-hit-r: var(--ix-spacing-2xs); --ii-hit-l: var(--ix-spacing-2xs); }
.ix-hitbox-x-xs { --ii-hit-r: var(--ix-spacing-xs); --ii-hit-l: var(--ix-spacing-xs); }
.ix-hitbox-x-sm { --ii-hit-r: var(--ix-spacing-sm); --ii-hit-l: var(--ix-spacing-sm); }
.ix-hitbox-x-md { --ii-hit-r: var(--ix-spacing-md); --ii-hit-l: var(--ix-spacing-md); }
.ix-hitbox-x-lg { --ii-hit-r: var(--ix-spacing-lg); --ii-hit-l: var(--ix-spacing-lg); }
.ix-hitbox-x-xl { --ii-hit-r: var(--ix-spacing-xl); --ii-hit-l: var(--ix-spacing-xl); }
.ix-hitbox-x-2xl { --ii-hit-r: var(--ix-spacing-2xl); --ii-hit-l: var(--ix-spacing-2xl); }

/* Y-akse (topp + bunn) */
.ix-hitbox-y-2xs { --ii-hit-t: var(--ix-spacing-2xs); --ii-hit-b: var(--ix-spacing-2xs); }
.ix-hitbox-y-xs { --ii-hit-t: var(--ix-spacing-xs); --ii-hit-b: var(--ix-spacing-xs); }
.ix-hitbox-y-sm { --ii-hit-t: var(--ix-spacing-sm); --ii-hit-b: var(--ix-spacing-sm); }
.ix-hitbox-y-md { --ii-hit-t: var(--ix-spacing-md); --ii-hit-b: var(--ix-spacing-md); }
.ix-hitbox-y-lg { --ii-hit-t: var(--ix-spacing-lg); --ii-hit-b: var(--ix-spacing-lg); }
.ix-hitbox-y-xl { --ii-hit-t: var(--ix-spacing-xl); --ii-hit-b: var(--ix-spacing-xl); }
.ix-hitbox-y-2xl { --ii-hit-t: var(--ix-spacing-2xl); --ii-hit-b: var(--ix-spacing-2xl); }

/* Topp */
.ix-hitbox-t-2xs { --ii-hit-t: var(--ix-spacing-2xs); }
.ix-hitbox-t-xs { --ii-hit-t: var(--ix-spacing-xs); }
.ix-hitbox-t-sm { --ii-hit-t: var(--ix-spacing-sm); }
.ix-hitbox-t-md { --ii-hit-t: var(--ix-spacing-md); }
.ix-hitbox-t-lg { --ii-hit-t: var(--ix-spacing-lg); }
.ix-hitbox-t-xl { --ii-hit-t: var(--ix-spacing-xl); }
.ix-hitbox-t-2xl { --ii-hit-t: var(--ix-spacing-2xl); }

/* Høyre */
.ix-hitbox-r-2xs { --ii-hit-r: var(--ix-spacing-2xs); }
.ix-hitbox-r-xs { --ii-hit-r: var(--ix-spacing-xs); }
.ix-hitbox-r-sm { --ii-hit-r: var(--ix-spacing-sm); }
.ix-hitbox-r-md { --ii-hit-r: var(--ix-spacing-md); }
.ix-hitbox-r-lg { --ii-hit-r: var(--ix-spacing-lg); }
.ix-hitbox-r-xl { --ii-hit-r: var(--ix-spacing-xl); }
.ix-hitbox-r-2xl { --ii-hit-r: var(--ix-spacing-2xl); }

/* Bunn */
.ix-hitbox-b-2xs { --ii-hit-b: var(--ix-spacing-2xs); }
.ix-hitbox-b-xs { --ii-hit-b: var(--ix-spacing-xs); }
.ix-hitbox-b-sm { --ii-hit-b: var(--ix-spacing-sm); }
.ix-hitbox-b-md { --ii-hit-b: var(--ix-spacing-md); }
.ix-hitbox-b-lg { --ii-hit-b: var(--ix-spacing-lg); }
.ix-hitbox-b-xl { --ii-hit-b: var(--ix-spacing-xl); }
.ix-hitbox-b-2xl { --ii-hit-b: var(--ix-spacing-2xl); }

/* Venstre */
.ix-hitbox-l-2xs { --ii-hit-l: var(--ix-spacing-2xs); }
.ix-hitbox-l-xs { --ii-hit-l: var(--ix-spacing-xs); }
.ix-hitbox-l-sm { --ii-hit-l: var(--ix-spacing-sm); }
.ix-hitbox-l-md { --ii-hit-l: var(--ix-spacing-md); }
.ix-hitbox-l-lg { --ii-hit-l: var(--ix-spacing-lg); }
.ix-hitbox-l-xl { --ii-hit-l: var(--ix-spacing-xl); }
.ix-hitbox-l-2xl { --ii-hit-l: var(--ix-spacing-2xl); }

/* Debug — viser hitbox-arealet alltid (blå) og bytter til grønt ved hover */
.ix-hitbox-debug::before {
outline: 2px dashed rgba(0, 100, 255, 0.7);
background: rgba(0, 100, 255, 0.1);
}

.ix-hitbox-debug:hover::before {
outline: 2px dashed rgba(0, 200, 80, 0.7);
background: rgba(0, 200, 80, 0.2);
}

/* Debug hover — viser kun hitbox-arealet ved hover (grønt) */
.ix-hitbox-debug-hover:hover::before {
outline: 2px dashed rgba(0, 200, 80, 0.7);
background: rgba(0, 200, 80, 0.2);
}
1 change: 1 addition & 0 deletions indeks-utils/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@
@import './spacing.css';
@import './state-colors.css';
@import './transition.css';
@import './hitbox.css';
@import './interaction.css';
@import './typography.css';
Loading