Skip to content

Commit 5eaf173

Browse files
torleifhalsethmillus
torleifhalseth
and
millus
authored
feat(eds-color-palette-generator): add optional second color input to palette generator (#4247)
Co-authored-by: torleifhalseth <2523381+torleifhalseth@users.noreply.github.com> Co-authored-by: camillaknutsen <camilla.knutsen89@gmail.com>
1 parent 04f76b7 commit 5eaf173

26 files changed

Lines changed: 3571 additions & 691 deletions

‎apps/eds-color-palette-generator/PALETTE_CONTRAST_REPORT.md‎

Lines changed: 236 additions & 277 deletions
Large diffs are not rendered by default.

‎apps/eds-color-palette-generator/PALETTE_OVERVIEW.md‎

Lines changed: 46 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,65 @@
22

33
_Generated overview of the current palette configuration (step values, contrast requirements, and reference contrast levels)._
44

5-
Generated: 2025-08-26
5+
Generated: 2025-11-24
66

77
## Step Definitions
88

99
| ID | Name | Category | Variant | Light (L) | Dark (L) |
1010
| --- | ---- | -------- | ------- | --------- | -------- |
11-
| background-default | Background Default | background | default | 1.00 | 0.15 |
12-
| background-subtle | Background Subtle | background | subtle | 0.96 | 0.25 |
13-
| background-medium-default | Background Medium Default | background-medium | medium-default | 0.88 | 0.45 |
14-
| background-medium-hover | Background Medium Hover | background-medium | medium-hover | 0.84 | 0.48 |
15-
| background-medium-active | Background Medium Active | background-medium | medium-active | 0.80 | 0.50 |
16-
| border-subtle | Border Subtle | border | subtle | 0.82 | 0.63 |
17-
| border-medium | Border Medium | border | medium | 0.73 | 0.66 |
18-
| border-strong | Border Strong | border | strong | 0.62 | 0.68 |
19-
| background-strong-default | Background Strong Default | background-strong | strong-default | 0.50 | 0.78 |
20-
| background-strong-hover | Background Strong Hover | background-strong | strong-hover | 0.44 | 0.85 |
21-
| background-strong-active | Background Strong Active | background-strong | strong-active | 0.42 | 0.92 |
22-
| text-subtle | Text Subtle | text | subtle | 0.40 | 0.91 |
23-
| text-strong | Text Strong | text | strong | 0.32 | 0.99 |
24-
| text-contrast-subtle | Text Contrast Subtle | text | contrast-subtle | 0.89 | 0.30 |
25-
| text-contrast-strong | Text Contrast Strong | text | contrast-strong | 0.99 | 0.26 |
11+
| bg-canvas | Background Canvas | Background | undefined | 0.97 | 0.15 |
12+
| bg-surface | Background Surface | Background | surface | 1.00 | 0.25 |
13+
| bg-fill-muted-default | Background Fill Muted Default | Background Fill Muted | default | 0.91 | 0.47 |
14+
| bg-fill-muted-hover | Background Fill Muted Hover | Background Fill Muted | hover | 0.87 | 0.52 |
15+
| bg-fill-muted-active | Background Fill Muted Active | Background Fill Muted | active | 0.82 | 0.58 |
16+
| border-subtle | Border Subtle | Border | subtle | 0.87 | 0.47 |
17+
| border-medium | Border Medium | Border | medium | 0.75 | 0.61 |
18+
| border-strong | Border Strong | Border | strong | 0.52 | 0.76 |
19+
| bg-fill-emphasis-default | Background Fill Emphasis Default | Background Fill Emphasis | default | 0.50 | 0.82 |
20+
| bg-fill-emphasis-hover | Background Fill Emphasis Hover | Background Fill Emphasis | hover | 0.44 | 0.88 |
21+
| bg-fill-emphasis-active | Background Fill Emphasis Active | Background Fill Emphasis | active | 0.42 | 0.93 |
22+
| text-subtle | Text Subtle | Text | subtle | 0.46 | 0.91 |
23+
| text-strong | Text Strong | Text | strong | 0.23 | 0.99 |
24+
| text-subtle-on-emphasis | Text Subtle on Emphasis | Text | subtle-on-emphasis | 0.90 | 0.33 |
25+
| text-strong-on-emphasis | Text Strong on Emphasis | Text | strong-on-emphasis | 1.00 | 0.10 |
2626

2727
## Contrast Requirements (Foreground → Background)
2828

2929
_APCA LC value shown is the required Lightness Contrast. WCAG column shows level key and numeric ratio._
3030

3131
| Foreground | Background | APCA | WCAG |
3232
| --------------- | --------------- | ------- | ----------- |
33-
| background-medium-default | background-default | 15 | AA_LARGE (3) |
34-
| background-medium-default | background-subtle | 15 | AA_LARGE (3) |
35-
| background-medium-hover | background-default | 15 | AA_LARGE (3) |
36-
| background-medium-hover | background-subtle | 15 | AA_LARGE (3) |
37-
| background-medium-active | background-default | 15 | AA_LARGE (3) |
38-
| background-medium-active | background-subtle | 15 | AA_LARGE (3) |
39-
| border-subtle | background-default | 15 | AA_LARGE (3) |
40-
| border-subtle | background-subtle | 15 | AA_LARGE (3) |
41-
| border-subtle | background-medium-default | 15 | AA_LARGE (3) |
42-
| border-subtle | background-medium-hover | 15 | AA_LARGE (3) |
43-
| border-subtle | background-medium-active | 15 | AA_LARGE (3) |
44-
| border-medium | background-default | 15 | AA_LARGE (3) |
45-
| border-medium | background-subtle | 15 | AA_LARGE (3) |
46-
| border-medium | background-medium-default | 15 | AA_LARGE (3) |
47-
| border-medium | background-medium-hover | 15 | AA_LARGE (3) |
48-
| border-medium | background-medium-active | 15 | AA_LARGE (3) |
49-
| border-strong | background-default | 15 | AA_LARGE (3) |
50-
| border-strong | background-subtle | 15 | AA_LARGE (3) |
51-
| border-strong | background-medium-default | 15 | AA_LARGE (3) |
52-
| border-strong | background-medium-hover | 15 | AA_LARGE (3) |
53-
| border-strong | background-medium-active | 15 | AA_LARGE (3) |
33+
| bg-fill-muted-default | bg-surface | 15 | AA_LARGE (3) |
34+
| bg-fill-muted-hover | bg-surface | 15 | AA_LARGE (3) |
35+
| bg-fill-muted-active | bg-surface | 15 | AA_LARGE (3) |
36+
| border-subtle | bg-canvas | 15 | AA_LARGE (3) |
37+
| border-subtle | bg-surface | 15 | AA_LARGE (3) |
38+
| border-medium | bg-canvas | 30 | AA_LARGE (3) |
39+
| border-medium | bg-surface | 30 | AA_LARGE (3) |
40+
| border-medium | bg-fill-muted-default | 15 | AA_LARGE (3) |
41+
| border-strong | bg-canvas | 30 | AA_LARGE (3) |
42+
| border-strong | bg-surface | 30 | AA_LARGE (3) |
43+
| border-strong | bg-fill-muted-default | 30 | AA_LARGE (3) |
44+
| border-strong | bg-fill-muted-hover | 30 | AA_LARGE (3) |
5445
| border-strong | border-medium | 15 | AA_LARGE (3) |
55-
| background-strong-default | background-default | 45 | AA_LARGE (3) |
56-
| background-strong-default | background-subtle | 45 | AA_LARGE (3) |
57-
| background-strong-hover | background-default | 45 | AA_LARGE (3) |
58-
| background-strong-hover | background-subtle | 45 | AA_LARGE (3) |
59-
| background-strong-active | background-default | 30 | AA_LARGE (3) |
60-
| background-strong-active | background-subtle | 30 | AA_LARGE (3) |
61-
| text-subtle | background-default | 60 | AAA_LARGE (4.5) |
62-
| text-subtle | background-subtle | 60 | AAA_LARGE (4.5) |
63-
| text-subtle | background-medium-default | 60 | AAA_LARGE (4.5) |
64-
| text-subtle | background-medium-hover | 60 | AAA_LARGE (4.5) |
65-
| text-subtle | background-medium-active | 60 | AAA_LARGE (4.5) |
66-
| text-strong | background-default | 90 | AAA_NORMAL (7) |
67-
| text-strong | background-subtle | 90 | AAA_NORMAL (7) |
68-
| text-strong | background-medium-default | 60 | AAA_LARGE (4.5) |
69-
| text-strong | background-medium-hover | 60 | AAA_LARGE (4.5) |
70-
| text-strong | background-medium-active | 60 | AAA_LARGE (4.5) |
71-
| text-contrast-subtle | background-strong-default | 60 | AAA_LARGE (4.5) |
72-
| text-contrast-subtle | background-strong-hover | 60 | AAA_LARGE (4.5) |
73-
| text-contrast-subtle | background-strong-active | 60 | AAA_LARGE (4.5) |
74-
| text-contrast-strong | background-strong-default | 90 | AAA_NORMAL (7) |
75-
| text-contrast-strong | background-strong-hover | 90 | AAA_NORMAL (7) |
76-
| text-contrast-strong | background-strong-active | 90 | AAA_NORMAL (7) |
46+
| bg-fill-emphasis-default | bg-canvas | 30 | AA_LARGE (3) |
47+
| bg-fill-emphasis-default | bg-surface | 30 | AA_LARGE (3) |
48+
| bg-fill-emphasis-hover | bg-canvas | 30 | AA_LARGE (3) |
49+
| bg-fill-emphasis-hover | bg-surface | 30 | AA_LARGE (3) |
50+
| bg-fill-emphasis-active | bg-canvas | 30 | AA_LARGE (3) |
51+
| bg-fill-emphasis-active | bg-surface | 30 | AA_LARGE (3) |
52+
| text-subtle | bg-canvas | 60 | AAA_LARGE (4.5) |
53+
| text-subtle | bg-surface | 60 | AAA_LARGE (4.5) |
54+
| text-subtle | bg-fill-muted-default | 60 | AAA_LARGE (4.5) |
55+
| text-strong | bg-canvas | 90 | AAA_NORMAL (7) |
56+
| text-strong | bg-surface | 90 | AAA_NORMAL (7) |
57+
| text-strong | bg-fill-muted-default | 60 | AAA_LARGE (4.5) |
58+
| text-subtle-on-emphasis | bg-fill-emphasis-default | 60 | AAA_LARGE (4.5) |
59+
| text-subtle-on-emphasis | bg-fill-emphasis-hover | 60 | AAA_LARGE (4.5) |
60+
| text-subtle-on-emphasis | bg-fill-emphasis-active | 60 | AAA_LARGE (4.5) |
61+
| text-strong-on-emphasis | bg-fill-emphasis-default | 60 | AAA_NORMAL (7) |
62+
| text-strong-on-emphasis | bg-fill-emphasis-hover | 60 | AAA_NORMAL (7) |
63+
| text-strong-on-emphasis | bg-fill-emphasis-active | 60 | AAA_NORMAL (7) |
7764

7865
## APCA Contrast Levels Reference
7966

‎apps/eds-color-palette-generator/README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ An accessible color palette generator for the Equinor Design System. This tool c
66

77
* **Gaussian-based chroma distribution**: Colors maintain visual harmony using mathematical bell curves
88
* **OKLCH color space**: Perceptually uniform color generation
9+
* **Multiple color anchors**: Support for interpolation between colors at specific steps for gradient-like scales
910
* **Accessibility-focused**: Built-in contrast checking with APCA and WCAG methods
1011
* **Light and dark mode support**: Separate configurations for optimal contrast in each mode
1112
* **Interactive configuration**: Adjust lightness values and Gaussian parameters in real-time
1213
* **Export/Import**: Save and share color palette configurations
13-
* **CLI tool**: Generate color tokens from configuration files
14+
* **CLI tool**: Generate color tokens from configuration files (supports both single value and multiple anchors)
1415
* **About page**: Comprehensive documentation with interactive demos explaining how the generator works
1516

1617
## Getting Started
@@ -53,7 +54,12 @@ The generator uses a three-step process:
5354
2. **Apply Gaussian distribution**: Chroma (color intensity) varies using a bell curve, creating natural color progression
5455
3. **Generate color scale**: Colors are created in OKLCH space, maintaining hue while varying lightness and chroma
5556

56-
For detailed explanations and interactive demonstrations, see the [About page](http://localhost:3000/about) or read [ABOUT_PAGE.md](./ABOUT_PAGE.md).
57+
### Single Value vs. Multiple Anchors
58+
59+
* **Single value**: Provide one base color, and the generator applies Gaussian distribution across all steps
60+
* **Multiple anchors**: Define colors at specific steps (e.g., step 6 and step 9), and the generator interpolates smoothly between them in OKLCH space while still applying Gaussian chroma distribution
61+
62+
For detailed explanations and interactive demonstrations showing the difference, see the [About page](http://localhost:3000/about) or read [ABOUT_PAGE.md](./ABOUT_PAGE.md).
5763

5864
## Key Concepts
5965

0 commit comments

Comments
 (0)