theo/mobilizon-ui-ux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

init commit

Browse source
This commit is contained in:
theopaolo 2026-06-03 11:43:07 +02:00
commit 66f33e2bfe
21 changed files with 42060 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
design-extract/a11y-report.md Normal file
View file

@ -0,0 +1,37 @@
# Accessibility Report (axe-core)
> Source: https://mobilizon.fr
> Generated: 2026-05-25
> Standard: WCAG 2.1 AA + best practices
## @aldil_lyon
### Violations (1)
#### [CRITICAL] ARIA attributes must conform to valid names
- Rule: `aria-valid-attr`
- WCAG: wcag2a, wcag412
- Impact: critical
- [Learn more](https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr?application=playwright)
**Affected elements (2):**
- `.o-dropdown.dropdown.o-dropdown--position-bottom-left:nth-child(1)`
Fix any of the following:
- `.o-dropdown.dropdown.o-dropdown--position-bottom-left:nth-child(5)`
Fix any of the following:
### Needs Review (2)
- **ARIA attributes must conform to valid values** (`aria-valid-attr-value`) — 2 element(s)
- **Elements must meet minimum color contrast ratio thresholds** (`color-contrast`) — 2 element(s)
### Summary
| | Count |
|---|---|
| Passing | 46 |
| Violations | 1 |
| Needs review | 2 |
| Not applicable | 43 |

50
design-extract/components/components.json Normal file
View file

@ -0,0 +1,50 @@
{
"button": [
{
"label": "Suivre",
"variant": "filled",
"description": "filled, bg: --color-action-jelly-bean, text: --cssVar-oruga-primary-invert, radius: 4px, padding: 8px 16px",
"states": [],
"route": "@aldil_lyon"
},
{
"label": "Contact",
"variant": "outlined",
"description": "outlined, text: --color-neutral-100-2, border: --color-action-jelly-bean, radius: 4px, padding: 8px 16px",
"states": [],
"route": "@aldil_lyon"
}
],
"link": [
{
"label": "Passer au contenu principal",
"description": "color: --color-neutral-100-2",
"route": "@aldil_lyon"
},
{
"label": "Rechercher",
"description": "color: --color-neutral-100",
"route": "@aldil_lyon"
}
],
"input": [
{
"label": "Langue",
"type": "select",
"description": "select, bg: --cssVar-oruga-primary-invert, border: 2px solid, radius: 4px",
"route": "@aldil_lyon"
}
],
"nav": [
{
"label": "Mobilizon LogoRechercherCalendrier(beta)Se connecterS'inscri",
"description": "bg: --cssVar-oruga-primary-invert, border: --color-brand-mercury",
"route": "@aldil_lyon"
},
{
"label": "Fil d'Ariane",
"description": "border: --color-brand-mercury",
"route": "@aldil_lyon"
}
]
}

34
design-extract/components/components.md Normal file
View file

@ -0,0 +1,34 @@
# Component Brief
> mobilizon.fr — 2026-05-25
> Use with: `tokens.clean.css` + screenshots
**7 component variants** identified across 4 types.
## Buttons (2)
- **Suivre** — filled, bg: --color-action-jelly-bean, text: --cssVar-oruga-primary-invert, radius: 4px, padding: 8px 16px
- **Contact** — outlined, text: --color-neutral-100-2, border: --color-action-jelly-bean, radius: 4px, padding: 8px 16px
## Inputs (1)
- **Langue** — select, bg: --cssVar-oruga-primary-invert, border: 2px solid, radius: 4px
## Links (2)
- **Passer au contenu principal** — color: --color-neutral-100-2
- **Rechercher** — color: --color-neutral-100
## Navs (2)
- **Mobilizon LogoRechercherCalendrier(beta)Se connecterS'inscri** — bg: --cssVar-oruga-primary-invert, border: --color-brand-mercury
- **Fil d'Ariane** — border: --color-brand-mercury
---
### How to use this brief
1. Open the page screenshot to see the actual components
2. Reference `tokens.clean.css` for all design token values
3. Token names prefixed with `--` map directly to CSS custom properties
4. Build components using the tokens — don't hardcode colors or spacing

101
design-extract/design-system.md Normal file
View file

@ -0,0 +1,101 @@
# Design System Reference
> Auto-generated by Token Scraper on 2026-05-25
> Source: https://mobilizon.fr
> Routes scraped: @aldil_lyon
## Logo
| Property | Value |
| ---------- | --------------------- |
| Type | svg |
| Dimensions | 160 x 30.16px |
| Links to | https://mobilizon.fr/ |
## Favicons & Meta Images
| Type | URL | Sizes |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- |
| apple-touch-icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| mask-icon | https://mobilizon.fr/img/icons/safari-pinned-tab.svg | - |
| og:image | https://mobilizon.fr/media/868b694cf69b3aa27114ddb9289e9cc4a67c28850d29b8f5b49213478ec9c1fa.png?name=aldil_lyon%27s%20avatar.png | - |
| favicon | https://mobilizon.fr/favicon.ico | - |
## Brand Colors
| Token | Value | Seen on |
| ------------------------- | --------- | ----------- |
| `color.brand.mercury` | `#e5e7eb` | @aldil_lyon |
| `color.brand.astronaut` | `#3c376e` | @aldil_lyon |
| `color.action.jelly-bean` | `#1e7d97` | @aldil_lyon |
## Neutral Colors
| Token | Value | Seen on |
| --------------------- | --------- | ----------- |
| `color.neutral.100` | `#3f3f46` | @aldil_lyon |
| `color.neutral.100-2` | `#000000` | @aldil_lyon |
## Typography
| Token | Value | Seen on |
| --------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
| `typography.fontFamily.primary` | `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif` | @aldil_lyon |
| `typography.fontSize.display` | `48px` | @aldil_lyon |
| `typography.fontSize.h1` | `24px` | @aldil_lyon |
| `typography.fontSize.h2` | `20px` | @aldil_lyon |
| `typography.fontSize.h3` | `18px` | @aldil_lyon |
| `typography.fontSize.h4` | `16px` | @aldil_lyon |
| `typography.fontSize.h5` | `12px` | @aldil_lyon |
| `typography.fontWeight.regular` | `400` | @aldil_lyon |
| `typography.fontWeight.medium` | `500` | @aldil_lyon |
| `typography.fontWeight.semibold` | `600` | @aldil_lyon |
| `typography.fontWeight.bold` | `700` | @aldil_lyon |
| `typography.fontWeight.extrabold` | `800` | @aldil_lyon |
| `typography.lineHeight.0` | `16px` | @aldil_lyon |
| `typography.lineHeight.1` | `24px` | @aldil_lyon |
| `typography.lineHeight.2` | `28px` | @aldil_lyon |
| `typography.lineHeight.3` | `32px` | @aldil_lyon |
| `typography.lineHeight.4` | `36px` | @aldil_lyon |
| `typography.lineHeight.5` | `48px` | @aldil_lyon |
## Spacing
| Token | Value | Seen on |
| ----------- | ------ | ----------- |
| `spacing.1` | `4px` | @aldil_lyon |
| `spacing.2` | `8px` | @aldil_lyon |
| `spacing.3` | `12px` | @aldil_lyon |
| `spacing.4` | `16px` | @aldil_lyon |
| `spacing.5` | `32px` | @aldil_lyon |
| `spacing.6` | `40px` | @aldil_lyon |
| `spacing.7` | `64px` | @aldil_lyon |
| `spacing.8` | `72px` | @aldil_lyon |
| `spacing.9` | `80px` | @aldil_lyon |
## Border Radius
| Token | Value | Seen on |
| ------------------- | ----------------- | ----------- |
| `borderRadius.none` | `0px` | @aldil_lyon |
| `borderRadius.sm` | `4px` | @aldil_lyon |
| `borderRadius.md` | `8px` | @aldil_lyon |
| `borderRadius.lg` | `8px 0px 0px 8px` | @aldil_lyon |
| `borderRadius.full` | `9999px` | @aldil_lyon |
## Shadows
| Token | Value | Seen on |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `shadow.xs` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px` | @aldil_lyon |
| `shadow.sm` | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` | @aldil_lyon |
| `shadow.md` | `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px` | @aldil_lyon |
## Spacing Scale
Base unit: **4px** (84% of values on-grid)
---
_79 tokens total._

374
design-extract/health-report.md Normal file
View file

@ -0,0 +1,374 @@
# CSS Health Report
> Source: https://mobilizon.fr
> Generated: 2026-05-25
## Overview
| Metric | Value |
| ---------------------- | -------------------------------------- |
| Total tokens extracted | 79 |
| Unique values | 55 |
| Duplicate tokens | 24 |
| Duplication ratio | 30% |
| **Health grade** | **D** — Poor — significant duplication |
## Page Stats
| Metric | Value |
| --------------------- | ----- |
| Elements | 473 |
| External stylesheets | 8 |
| Inline style elements | 0 |
| Style rules | 1907 |
**Selectors:** 2050 class, 6 ID, 123 type, 3 universal, 221 attribute
## Colors by Usage
### Background colors: 6
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(255, 213, 153)` | 6 |
| `rgb(255, 255, 255)` | 5 |
| `rgb(248, 113, 113)` | 2 |
| `rgb(239, 238, 244)` | 1 |
| `rgb(30, 125, 151)` | 1 |
| `rgb(71, 68, 103)` | 1 |
### Text colors: 10
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(0, 0, 0)` | 141 |
| `rgb(60, 55, 110)` | 46 |
| `rgb(255, 255, 255)` | 23 |
| `rgb(63, 63, 70)` | 6 |
| `rgb(255, 213, 153)` | 4 |
| `rgb(156, 163, 175)` | 2 |
| `rgb(55, 65, 81)` | 2 |
| `rgb(31, 41, 55)` | 1 |
| `rgb(75, 85, 99)` | 1 |
| `rgb(54, 54, 54)` | 1 |
### Border colors: 4
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(229, 231, 235)` | 210 |
| `rgb(255, 213, 153)` | 6 |
| `rgb(243, 244, 246)` | 4 |
| `rgb(30, 125, 151)` | 3 |
### Fill colors: 3
| Color | Occurrences |
| -------------------- | ----------- |
| `rgb(60, 55, 110)` | 12 |
| `rgb(255, 255, 255)` | 4 |
| `rgb(156, 163, 175)` | 2 |
## Font Info
### system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif
**font-size:**
| Size | Occurrences |
| ------- | ----------- |
| 16px | 196 |
| 18px | 12 |
| 24px | 6 |
| 20px | 5 |
| 12px | 2 |
| 48px | 1 |
| 10.8px | 1 |
| 15.36px | 1 |
| 10px | 1 |
| 8.4px | 1 |
**font-weight:**
| Weight | Occurrences |
| ------ | ----------- |
| 400 | 182 |
| 600 | 22 |
| 700 | 14 |
| 500 | 7 |
| 800 | 1 |
**line-height:**
| Line height | Occurrences |
| ----------- | ----------- |
| 24px | 197 |
| 28px | 14 |
| 32px | 6 |
| 16px | 2 |
| 36px | 2 |
| 9.6px | 2 |
| 48px | 1 |
| 13.44px | 1 |
| 9px | 1 |
### ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
**font-size:**
| Size | Occurrences |
| ---- | ----------- |
| 16px | 1 |
**font-weight:**
| Weight | Occurrences |
| ------ | ----------- |
| 400 | 1 |
**line-height:**
| Line height | Occurrences |
| ----------- | ----------- |
| 24px | 1 |
## Media Queries
| Query | Rules |
| ------------------------------ | ----- |
| `(min-width: 1024px)` | 124 |
| `(min-width: 768px)` | 113 |
| `(min-width: 1280px)` | 100 |
| `(min-width: 640px)` | 24 |
| `(forced-colors: active)` | 3 |
| `(min-width: 1536px)` | 1 |
| `(prefers-color-scheme: dark)` | 1 |
## Brand Assets
### Logo
| Property | Value |
| ---------- | --------------------- |
| Type | svg |
| Dimensions | 160 x 30.16px |
| Links to | https://mobilizon.fr/ |
### Favicons & Meta Images
| Type | URL | Sizes |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- |
| apple-touch-icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png | 152x152 |
| mask-icon | https://mobilizon.fr/img/icons/safari-pinned-tab.svg | - |
| og:image | https://mobilizon.fr/media/868b694cf69b3aa27114ddb9289e9cc4a67c28850d29b8f5b49213478ec9c1fa.png?name=aldil_lyon%27s%20avatar.png | - |
| favicon | https://mobilizon.fr/favicon.ico | - |
## Color Formats
| Token | Hex | LCH | OKLCH |
| ------------------------- | --------- | -------------------------- | ---------------------------- |
| `color.neutral.100` | `#3f3f46` | `lch(26.89% 4.56 291.08)` | `oklch(37.03% 0.012 285.84)` |
| `color.neutral.100-2` | `#000000` | `lch(0.00% 0.00 0.00)` | `oklch(0.00% 0.000 0.00)` |
| `color.brand.mercury` | `#e5e7eb` | `lch(91.60% 2.17 271.44)` | `oklch(92.76% 0.006 264.60)` |
| `color.brand.astronaut` | `#3c376e` | `lch(26.21% 35.95 299.35)` | `oklch(37.09% 0.092 285.12)` |
| `color.action.jelly-bean` | `#1e7d97` | `lch(48.48% 27.74 231.24)` | `oklch(54.88% 0.092 221.11)` |
| `color.accent.cherokee` | `#ffd599` | `lch(87.56% 35.81 78.98)` | `oklch(89.53% 0.090 76.06)` |
| `color.accent.sunglo` | `#f87171` | `lch(64.13% 57.61 26.24)` | `oklch(71.06% 0.166 22.22)` |
## Spacing Scale
| Property | Value |
| ---------------- | ----- |
| Base unit | 4px |
| Grid conformance | 84% |
## Border Combinations
| Border | Count | Elements |
| ------------------------------ | ----- | -------- |
| `2px solid rgb(255, 213, 153)` | 24 | section |
| `1px solid rgb(30, 125, 151)` | 12 | button |
| `1px solid rgb(229, 231, 235)` | 4 | img |
## Button Variants (7)
### Suivre
**default:**
- backgroundColor: `rgb(30, 125, 151)`
- color: `rgb(255, 255, 255)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid undefined`
- fontSize: `16px`
- fontWeight: `700`
### Passer au contenu principal
**default:**
- color: `rgb(0, 0, 0)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(0, 0, 0) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Rechercher
**default:**
- color: `rgb(63, 63, 70)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(63, 63, 70) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Mes groupes
**default:**
- color: `rgb(31, 41, 55)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(31, 41, 55) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### Contact
**default:**
- color: `rgb(0, 0, 0)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid rgb(30, 125, 151)`
- fontSize: `16px`
- fontWeight: `600`
### Voir tous
**default:**
- color: `rgb(60, 55, 110)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(60, 55, 110) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`
### À propos
**default:**
- color: `rgb(255, 255, 255)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(255, 255, 255) undefined 3px`
- fontSize: `18px`
- fontWeight: `400`
## Input Variants (1)
### select
**default:**
- backgroundColor: `rgb(255, 255, 255)`
- color: `rgb(54, 54, 54)`
- border: `2px solid undefined`
- borderRadius: `4px`
- padding: `3px 32px 3px 8px`
- boxShadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- fontSize: `16px`
## Breakpoints
`1536px` -> `1280px` -> `1024px` -> `768px` -> `640px`
## Duplicate Groups
14 values are defined multiple times:
### `#ffffff` (6x)
- `--cssVar-oruga-primary-invert`
- `--cssVar-oruga-secondary-invert`
- `--cssVar-oruga-success-invert`
- `--cssVar-oruga-info-invert`
- `--cssVar-oruga-danger-invert`
- `--cssVar-oruga-white`
### `#1e7d97` (5x)
- `--color-action-jelly-bean`
- `--cssVar-oruga-primary`
- `--cssVar-oruga-variant-primary`
- `--cssVar-oruga-radio-active-background-color`
- `--cssVar-oruga-switch-checked-background`
### `#000000` (3x)
- `--color-neutral-100-2`
- `--cssVar-oruga-warning-invert`
- `--cssVar-oruga-black`
### `16px` (3x)
- `--typography-fontSize-h4`
- `--typography-lineHeight-0`
- `--spacing-4`
### `4px` (3x)
- `--spacing-1`
- `--borderRadius-sm`
- `--cssVar-oruga-base-border-radius`
### `400` (2x)
- `--typography-fontWeight-regular`
- `--cssVar-oruga-base-font-weight`
### `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif` (2x)
- `--typography-fontFamily-primary`
- `--cssVar-oruga-base-font-family`
### `48px` (2x)
- `--typography-fontSize-display`
- `--typography-lineHeight-5`
### `24px` (2x)
- `--typography-fontSize-h1`
- `--typography-lineHeight-1`
### `12px` (2x)
- `--typography-fontSize-h5`
- `--spacing-3`
### `32px` (2x)
- `--typography-lineHeight-3`
- `--spacing-5`
### `8px` (2x)
- `--spacing-2`
- `--borderRadius-md`
### `9999px` (2x)
- `--borderRadius-full`
- `--cssVar-oruga-base-border-radius-rounded`
### `white` (2x)
- `--cssVar-oruga-checkbox-background-color`
- `--cssVar-oruga-checkbox-active-background-color`

28
design-extract/report.md Normal file
View file

@ -0,0 +1,28 @@
# Extraction Summary
> mobilizon.fr — 2026-05-25
**79 tokens** extracted → **55 unique** | Grade: **D**
## At a Glance
| | |
| ---------- | ---------------------------------- |
| Routes | @aldil_lyon |
| Scan mode | visible |
| Stack | tailwind, vue, oruga |
| Logo | svg (160x30.16px) |
| Spacing | 4px base (84% on-grid) |
| Components | 7 button, 1 input, 0 link variants |
| Health | D — 24 duplicates (30%) |
| A11y | 1 violations / 46 passing |
## Files
- [tokens.clean.css](./tokens.clean.css) — Deduplicated clean tokens
- [health-report.md](./health-report.md) — CSS health analysis & duplicates
- [design-system.md](./design-system.md) — Design system reference (logo, tokens, spacing)
- [components.json](./components/components.json) — Component inventory with token refs
- [components.md](./components/components.md) — Component brief — what to build with which tokens
- [a11y-report.md](./a11y-report.md) — Accessibility audit (axe-core)
- [stack-report.md](./stack-report.md) — Framework & library detection

BIN
design-extract/screen-captures/agendhavre.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 703 KiB

BIN
design-extract/screen-captures/dojo_de_programmation_paris.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 650 KiB

BIN
design-extract/screen-captures/falkenhagener_feld.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
design-extract/screen-captures/gribouille_academie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 770 KiB

BIN
design-extract/screen-captures/maison_de_quartier_de_saint_clair.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 930 KiB

BIN
design-extract/screen-captures/mobile/agendhavre.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
design-extract/screen-captures/mobile/dojo_de_programmation_paris.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
design-extract/screen-captures/mobile/falkenhagener_feld.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
design-extract/screen-captures/mobile/gribouille_academie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
design-extract/screen-captures/mobile/maison_de_quartier_de_saint_clair.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
design-extract/screen-captures/screenshot-@aldil_lyon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 729 KiB

21
design-extract/stack-report.md Normal file
View file

@ -0,0 +1,21 @@
# Stack Report
> Source: https://mobilizon.fr
> Generated: 2026-05-25
## Detected Frameworks & Libraries
| Framework | Confidence | Evidence |
|---|---|---|
| tailwind | 100% | 76 utility classes, 565 --tw- vars |
| vue | 90% | data-v-* scoped attributes |
| bootstrap | 80% | 12 BS classes, 0 --bs- vars |
| oruga | 80% | 104 --oruga- vars |
| angular | 80% | _ngcontent/ng- attributes |
## CSS Variable Prefixes
| Prefix | Count |
|---|---|
| `--tw-*` | 565 |
| `--oruga-*` | 104 |

70
design-extract/tokens.clean.css Normal file
View file

@ -0,0 +1,70 @@
:root {
/* ==========================================================================
Clean Design Tokens — deduplicated from https://mobilizon.fr
Generated: 2026-05-25
========================================================================== */
/* ── Colors ── */
/* lch(26.89% 4.56 291.08) | oklch(37.03% 0.012 285.84) */
--color-neutral-100: #3f3f46;
/* replaces: --cssVar-oruga-warning-invert, --cssVar-oruga-black */
/* lch(0.00% 0.00 0.00) | oklch(0.00% 0.000 0.00) */
--color-neutral-100-2: #000;
/* lch(91.60% 2.17 271.44) | oklch(92.76% 0.006 264.60) */
--color-brand-mercury: #e5e7eb;
/* lch(26.21% 35.95 299.35) | oklch(37.09% 0.092 285.12) */
--color-brand-astronaut: #3c376e;
/* replaces: --cssVar-oruga-primary, --cssVar-oruga-variant-primary, --cssVar-oruga-radio-active-background-color, --cssVar-oruga-switch-checked-background */
/* lch(48.48% 27.74 231.24) | oklch(54.88% 0.092 221.11) */
--color-action-jelly-bean: #1e7d97;
/* lch(87.56% 35.81 78.98) | oklch(89.53% 0.090 76.06) */
--color-accent-cherokee: #ffd599;
/* lch(64.13% 57.61 26.24) | oklch(71.06% 0.166 22.22) */
--color-accent-sunglo: #f87171;
/* ── Typography ── */
/* replaces: --cssVar-oruga-base-font-weight */
--typography-fontWeight-regular: 400;
--typography-fontWeight-medium: 500;
--typography-fontWeight-semibold: 600;
--typography-fontWeight-bold: 700;
--typography-fontWeight-extrabold: 800;
/* replaces: --cssVar-oruga-base-font-family */
--typography-fontFamily-primary: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
/* replaces: --typography-lineHeight-5 */
--typography-fontSize-display: 48px;
/* replaces: --typography-lineHeight-1 */
--typography-fontSize-h1: 24px;
--typography-fontSize-h2: 20px;
--typography-fontSize-h3: 18px;
/* replaces: --typography-lineHeight-0, --spacing-4 */
--typography-fontSize-h4: 16px;
/* replaces: --spacing-3 */
--typography-fontSize-h5: 12px;
--typography-lineHeight-2: 28px;
/* replaces: --spacing-5 */
--typography-lineHeight-3: 32px;
--typography-lineHeight-4: 36px;
/* ── Spacing ── */
/* replaces: --borderRadius-sm, --cssVar-oruga-base-border-radius */
--spacing-1: 4px;
/* replaces: --borderRadius-md */
--spacing-2: 8px;
--spacing-6: 40px;
--spacing-7: 64px;
--spacing-8: 72px;
--spacing-9: 80px;
/* ── Border Radius ── */
--borderRadius-none: 0;
--borderRadius-lg: 8px 0 0 8px;
/* replaces: --cssVar-oruga-base-border-radius-rounded */
--borderRadius-full: 9999px;
/* ── Shadows ── */
--shadow-xs: rgb(0 0 0 / 0%) 0 0 0 0, rgb(0 0 0 / 0%) 0 0 0 0, rgb(0 0 0 / 10%) 0 4px 6px -1px, rgb(0 0 0 / 10%) 0 2px 4px -2px;
--shadow-sm: rgb(0 0 0 / 0%) 0 0 0 0, rgb(0 0 0 / 0%) 0 0 0 0, rgb(0 0 0 / 0%) 0 0 0 0;
--shadow-md: rgb(0 0 0 / 20%) 0 0 12px 0;
}

41345
design-extract/tokens.raw.json Normal file
View file

File diff suppressed because one or more lines are too long

BIN
penpot/mobilizon.penpot Normal file
View file

Binary file not shown.