Skip to content

Autogenerate themes from new tokens #19

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

Merged
merged 15 commits into from
May 31, 2023
Merged

Autogenerate themes from new tokens #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b85b870
Increase 3xl size a lil'
benjaminleonard Nov 28, 2022
0542746
Update themes from token file
github-actions[bot] Nov 28, 2022
b3ff351
Merge branch 'figma-tokens' of https://github.com/oxidecomputer/desig…
benjaminleonard Nov 29, 2022
0f42f8c
Add extra stroke step
benjaminleonard Mar 7, 2023
080c24f
Update themes from token file
github-actions[bot] Mar 7, 2023
739afcd
Sync
benjaminleonard Mar 7, 2023
d452957
Brighten hover for better visibility
benjaminleonard May 31, 2023
586f483
Update themes from token file
github-actions[bot] May 31, 2023
27d82fa
Try and even brighter hover
benjaminleonard May 31, 2023
c7484d9
Update themes from token file
github-actions[bot] May 31, 2023
3efcbed
Add extra hover step (for buttons)
benjaminleonard May 31, 2023
016687c
Update themes from token file
github-actions[bot] May 31, 2023
2fb9044
Tweak hover value further
benjaminleonard May 31, 2023
9641ee3
Update themes from token file
github-actions[bot] May 31, 2023
20ac323
Empty push (trying to get npm to update)
benjaminleonard May 31, 2023
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
Empty file added README.md
View file
Open in desktop
Empty file.
23 changes: 16 additions & 7 deletions styles/dist/blue.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,15 @@
--surface-default-rgb: var(--base-neutral-0-rgb);
--surface-default: rgb(var(--surface-default-rgb));

--surface-hover-rgb: var(--base-neutral-50-rgb);
--surface-hover-rgb: var(--base-neutral-200-rgb);
--surface-hover: rgb(var(--surface-hover-rgb));

--surface-raise-rgb: var(--base-neutral-50-rgb);
--surface-raise: rgb(var(--surface-raise-rgb));

--surface-raise-hover-rgb: var(--base-neutral-100-rgb);
--surface-raise-hover: rgb(var(--surface-raise-hover-rgb));

--surface-secondary-rgb: var(--base-neutral-100-rgb);
--surface-secondary: rgb(var(--surface-secondary-rgb));

--surface-secondary-hover-rgb: var(--base-neutral-200-rgb);
--surface-secondary-hover: rgb(var(--surface-secondary-hover-rgb));

--surface-tertiary-rgb: var(--base-neutral-200-rgb);
--surface-tertiary: rgb(var(--surface-tertiary-rgb));

Expand Down Expand Up @@ -197,6 +191,9 @@
--stroke-accent-tertiary-rgb: var(--theme-accent-400-rgb);
--stroke-accent-tertiary: rgb(var(--stroke-accent-tertiary-rgb));

--stroke-accent-quaternary-rgb: var(--theme-accent-300-rgb);
--stroke-accent-quaternary: rgb(var(--stroke-accent-quaternary-rgb));

--stroke-destructive-rgb: var(--theme-destructive-800-rgb);
--stroke-destructive: rgb(var(--stroke-destructive-rgb));

Expand All @@ -206,6 +203,9 @@
--stroke-destructive-tertiary-rgb: var(--theme-destructive-400-rgb);
--stroke-destructive-tertiary: rgb(var(--stroke-destructive-tertiary-rgb));

--stroke-destructive-quaternary-rgb: var(--theme-destructive-300-rgb);
--stroke-destructive-quaternary: rgb(var(--stroke-destructive-quaternary-rgb));

--stroke-success-rgb: var(--theme-success-800-rgb);
--stroke-success: rgb(var(--stroke-success-rgb));

Expand All @@ -215,6 +215,9 @@
--stroke-success-tertiary-rgb: var(--theme-success-400-rgb);
--stroke-success-tertiary: rgb(var(--stroke-success-tertiary-rgb));

--stroke-success-quaternary-rgb: var(--theme-success-300-rgb);
--stroke-success-quaternary: rgb(var(--stroke-success-quaternary-rgb));

--stroke-error-rgb: var(--theme-error-800-rgb);
--stroke-error: rgb(var(--stroke-error-rgb));

Expand All @@ -224,6 +227,9 @@
--stroke-error-tertiary-rgb: var(--theme-error-400-rgb);
--stroke-error-tertiary: rgb(var(--stroke-error-tertiary-rgb));

--stroke-error-quaternary-rgb: var(--theme-error-300-rgb);
--stroke-error-quaternary: rgb(var(--stroke-error-quaternary-rgb));

--stroke-notice-rgb: var(--theme-notice-800-rgb);
--stroke-notice: rgb(var(--stroke-notice-rgb));

Expand All @@ -233,6 +239,9 @@
--stroke-notice-tertiary-rgb: var(--theme-notice-400-rgb);
--stroke-notice-tertiary: rgb(var(--stroke-notice-tertiary-rgb));

--stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
--stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));

--chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
--chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
--chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
Expand Down
9 changes: 6 additions & 3 deletions styles/dist/blue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ graph RL
```mermaid
graph RL
base-green-300 --> #1C372E:::base-green-300
stroke-success-quaternary --> theme-success-300
theme-success-300 --> base-green-300

classDef base-green-300 stroke-width:5,stroke:#1C372E
Expand Down Expand Up @@ -118,6 +119,7 @@ graph RL
graph RL
base-yellow-300 --> #3D3019:::base-yellow-300
surface-notice-secondary-hover --> theme-notice-300
stroke-notice-quaternary --> theme-notice-300
theme-notice-300 --> base-yellow-300

classDef base-yellow-300 stroke-width:5,stroke:#3D3019
Expand Down Expand Up @@ -213,6 +215,8 @@ graph RL
graph RL
base-red-300 --> #301B1D:::base-red-300
surface-destructive-secondary-hover --> theme-destructive-300
stroke-destructive-quaternary --> theme-destructive-300
stroke-error-quaternary --> theme-error-300
theme-destructive-300 --> base-red-300
theme-error-300 --> base-red-300

Expand Down Expand Up @@ -395,6 +399,7 @@ graph RL
graph RL
base-blue-300 --> #2D3048:::base-blue-300
surface-accent-secondary-hover --> theme-accent-300
stroke-accent-quaternary --> theme-accent-300
theme-accent-300 --> base-blue-300

classDef base-blue-300 stroke-width:5,stroke:#2D3048
Expand Down Expand Up @@ -482,7 +487,6 @@ graph RL
```mermaid
graph RL
base-neutral-50 --> #101618:::base-neutral-50
surface-hover --> base-neutral-50
surface-raise --> base-neutral-50
content-inverse-raise --> surface-raise
chart-fill-inactive --> base-neutral-50
Expand All @@ -495,7 +499,6 @@ graph RL
```mermaid
graph RL
base-neutral-100 --> #141B1D:::base-neutral-100
surface-raise-hover --> base-neutral-100
surface-secondary --> base-neutral-100
surface-disabled --> base-neutral-100
content-inverse-secondary --> surface-secondary
Expand All @@ -509,7 +512,7 @@ graph RL
```mermaid
graph RL
base-neutral-200 --> #1C2225:::base-neutral-200
surface-secondary-hover --> base-neutral-200
surface-hover --> base-neutral-200
surface-tertiary --> base-neutral-200
stroke-secondary --> base-neutral-200
chart-stroke-item-inactive --> base-neutral-200
Expand Down
23 changes: 16 additions & 7 deletions styles/dist/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,21 +157,15 @@
--surface-default-rgb: var(--base-neutral-0-rgb);
--surface-default: rgb(var(--surface-default-rgb));

--surface-hover-rgb: var(--base-neutral-50-rgb);
--surface-hover-rgb: var(--base-neutral-200-rgb);
--surface-hover: rgb(var(--surface-hover-rgb));

--surface-raise-rgb: var(--base-neutral-50-rgb);
--surface-raise: rgb(var(--surface-raise-rgb));

--surface-raise-hover-rgb: var(--base-neutral-100-rgb);
--surface-raise-hover: rgb(var(--surface-raise-hover-rgb));

--surface-secondary-rgb: var(--base-neutral-100-rgb);
--surface-secondary: rgb(var(--surface-secondary-rgb));

--surface-secondary-hover-rgb: var(--base-neutral-200-rgb);
--surface-secondary-hover: rgb(var(--surface-secondary-hover-rgb));

--surface-tertiary-rgb: var(--base-neutral-200-rgb);
--surface-tertiary: rgb(var(--surface-tertiary-rgb));

Expand Down Expand Up @@ -350,6 +344,9 @@
--stroke-accent-tertiary-rgb: var(--theme-accent-400-rgb);
--stroke-accent-tertiary: rgb(var(--stroke-accent-tertiary-rgb));

--stroke-accent-quaternary-rgb: var(--theme-accent-300-rgb);
--stroke-accent-quaternary: rgb(var(--stroke-accent-quaternary-rgb));

--stroke-destructive-rgb: var(--theme-destructive-800-rgb);
--stroke-destructive: rgb(var(--stroke-destructive-rgb));

Expand All @@ -359,6 +356,9 @@
--stroke-destructive-tertiary-rgb: var(--theme-destructive-400-rgb);
--stroke-destructive-tertiary: rgb(var(--stroke-destructive-tertiary-rgb));

--stroke-destructive-quaternary-rgb: var(--theme-destructive-300-rgb);
--stroke-destructive-quaternary: rgb(var(--stroke-destructive-quaternary-rgb));

--stroke-success-rgb: var(--theme-success-800-rgb);
--stroke-success: rgb(var(--stroke-success-rgb));

Expand All @@ -368,6 +368,9 @@
--stroke-success-tertiary-rgb: var(--theme-success-400-rgb);
--stroke-success-tertiary: rgb(var(--stroke-success-tertiary-rgb));

--stroke-success-quaternary-rgb: var(--theme-success-300-rgb);
--stroke-success-quaternary: rgb(var(--stroke-success-quaternary-rgb));

--stroke-error-rgb: var(--theme-error-800-rgb);
--stroke-error: rgb(var(--stroke-error-rgb));

Expand All @@ -377,6 +380,9 @@
--stroke-error-tertiary-rgb: var(--theme-error-400-rgb);
--stroke-error-tertiary: rgb(var(--stroke-error-tertiary-rgb));

--stroke-error-quaternary-rgb: var(--theme-error-300-rgb);
--stroke-error-quaternary: rgb(var(--stroke-error-quaternary-rgb));

--stroke-notice-rgb: var(--theme-notice-800-rgb);
--stroke-notice: rgb(var(--stroke-notice-rgb));

Expand All @@ -386,6 +392,9 @@
--stroke-notice-tertiary-rgb: var(--theme-notice-400-rgb);
--stroke-notice-tertiary: rgb(var(--stroke-notice-tertiary-rgb));

--stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
--stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));

--chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
--chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
--chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
Expand Down
9 changes: 6 additions & 3 deletions styles/dist/main.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ graph RL
graph RL
base-green-300 --> #1C372E:::base-green-300
surface-accent-secondary-hover --> theme-accent-300
stroke-accent-quaternary --> theme-accent-300
stroke-success-quaternary --> theme-success-300
theme-accent-300 --> base-green-300
theme-success-300 --> base-green-300

Expand Down Expand Up @@ -142,6 +144,7 @@ graph RL
graph RL
base-yellow-300 --> #3D3019:::base-yellow-300
surface-notice-secondary-hover --> theme-notice-300
stroke-notice-quaternary --> theme-notice-300
theme-notice-300 --> base-yellow-300

classDef base-yellow-300 stroke-width:5,stroke:#3D3019
Expand Down Expand Up @@ -237,6 +240,8 @@ graph RL
graph RL
base-red-300 --> #301B1D:::base-red-300
surface-destructive-secondary-hover --> theme-destructive-300
stroke-destructive-quaternary --> theme-destructive-300
stroke-error-quaternary --> theme-error-300
theme-destructive-300 --> base-red-300
theme-error-300 --> base-red-300

Expand Down Expand Up @@ -482,7 +487,6 @@ graph RL
```mermaid
graph RL
base-neutral-50 --> #101618:::base-neutral-50
surface-hover --> base-neutral-50
surface-raise --> base-neutral-50
content-inverse-raise --> surface-raise
chart-fill-inactive --> base-neutral-50
Expand All @@ -495,7 +499,6 @@ graph RL
```mermaid
graph RL
base-neutral-100 --> #141B1D:::base-neutral-100
surface-raise-hover --> base-neutral-100
surface-secondary --> base-neutral-100
surface-disabled --> base-neutral-100
content-inverse-secondary --> surface-secondary
Expand All @@ -509,7 +512,7 @@ graph RL
```mermaid
graph RL
base-neutral-200 --> #1C2225:::base-neutral-200
surface-secondary-hover --> base-neutral-200
surface-hover --> base-neutral-200
surface-tertiary --> base-neutral-200
stroke-secondary --> base-neutral-200
chart-stroke-item-inactive --> base-neutral-200
Expand Down
23 changes: 16 additions & 7 deletions styles/dist/purple.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,15 @@
--surface-default-rgb: var(--base-neutral-0-rgb);
--surface-default: rgb(var(--surface-default-rgb));

--surface-hover-rgb: var(--base-neutral-50-rgb);
--surface-hover-rgb: var(--base-neutral-200-rgb);
--surface-hover: rgb(var(--surface-hover-rgb));

--surface-raise-rgb: var(--base-neutral-50-rgb);
--surface-raise: rgb(var(--surface-raise-rgb));

--surface-raise-hover-rgb: var(--base-neutral-100-rgb);
--surface-raise-hover: rgb(var(--surface-raise-hover-rgb));

--surface-secondary-rgb: var(--base-neutral-100-rgb);
--surface-secondary: rgb(var(--surface-secondary-rgb));

--surface-secondary-hover-rgb: var(--base-neutral-200-rgb);
--surface-secondary-hover: rgb(var(--surface-secondary-hover-rgb));

--surface-tertiary-rgb: var(--base-neutral-200-rgb);
--surface-tertiary: rgb(var(--surface-tertiary-rgb));

Expand Down Expand Up @@ -197,6 +191,9 @@
--stroke-accent-tertiary-rgb: var(--theme-accent-400-rgb);
--stroke-accent-tertiary: rgb(var(--stroke-accent-tertiary-rgb));

--stroke-accent-quaternary-rgb: var(--theme-accent-300-rgb);
--stroke-accent-quaternary: rgb(var(--stroke-accent-quaternary-rgb));

--stroke-destructive-rgb: var(--theme-destructive-800-rgb);
--stroke-destructive: rgb(var(--stroke-destructive-rgb));

Expand All @@ -206,6 +203,9 @@
--stroke-destructive-tertiary-rgb: var(--theme-destructive-400-rgb);
--stroke-destructive-tertiary: rgb(var(--stroke-destructive-tertiary-rgb));

--stroke-destructive-quaternary-rgb: var(--theme-destructive-300-rgb);
--stroke-destructive-quaternary: rgb(var(--stroke-destructive-quaternary-rgb));

--stroke-success-rgb: var(--theme-success-800-rgb);
--stroke-success: rgb(var(--stroke-success-rgb));

Expand All @@ -215,6 +215,9 @@
--stroke-success-tertiary-rgb: var(--theme-success-400-rgb);
--stroke-success-tertiary: rgb(var(--stroke-success-tertiary-rgb));

--stroke-success-quaternary-rgb: var(--theme-success-300-rgb);
--stroke-success-quaternary: rgb(var(--stroke-success-quaternary-rgb));

--stroke-error-rgb: var(--theme-error-800-rgb);
--stroke-error: rgb(var(--stroke-error-rgb));

Expand All @@ -224,6 +227,9 @@
--stroke-error-tertiary-rgb: var(--theme-error-400-rgb);
--stroke-error-tertiary: rgb(var(--stroke-error-tertiary-rgb));

--stroke-error-quaternary-rgb: var(--theme-error-300-rgb);
--stroke-error-quaternary: rgb(var(--stroke-error-quaternary-rgb));

--stroke-notice-rgb: var(--theme-notice-800-rgb);
--stroke-notice: rgb(var(--stroke-notice-rgb));

Expand All @@ -233,6 +239,9 @@
--stroke-notice-tertiary-rgb: var(--theme-notice-400-rgb);
--stroke-notice-tertiary: rgb(var(--stroke-notice-tertiary-rgb));

--stroke-notice-quaternary-rgb: var(--theme-notice-300-rgb);
--stroke-notice-quaternary: rgb(var(--stroke-notice-quaternary-rgb));

--chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
--chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
--chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
Expand Down
9 changes: 6 additions & 3 deletions styles/dist/purple.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ graph RL
```mermaid
graph RL
base-green-300 --> #1C372E:::base-green-300
stroke-success-quaternary --> theme-success-300
theme-success-300 --> base-green-300

classDef base-green-300 stroke-width:5,stroke:#1C372E
Expand Down Expand Up @@ -118,6 +119,7 @@ graph RL
graph RL
base-yellow-300 --> #3D3019:::base-yellow-300
surface-notice-secondary-hover --> theme-notice-300
stroke-notice-quaternary --> theme-notice-300
theme-notice-300 --> base-yellow-300

classDef base-yellow-300 stroke-width:5,stroke:#3D3019
Expand Down Expand Up @@ -213,6 +215,8 @@ graph RL
graph RL
base-red-300 --> #301B1D:::base-red-300
surface-destructive-secondary-hover --> theme-destructive-300
stroke-destructive-quaternary --> theme-destructive-300
stroke-error-quaternary --> theme-error-300
theme-destructive-300 --> base-red-300
theme-error-300 --> base-red-300

Expand Down Expand Up @@ -323,6 +327,7 @@ graph RL
graph RL
base-purple-300 --> #382D43:::base-purple-300
surface-accent-secondary-hover --> theme-accent-300
stroke-accent-quaternary --> theme-accent-300
theme-accent-300 --> base-purple-300

classDef base-purple-300 stroke-width:5,stroke:#382D43
Expand Down Expand Up @@ -482,7 +487,6 @@ graph RL
```mermaid
graph RL
base-neutral-50 --> #101618:::base-neutral-50
surface-hover --> base-neutral-50
surface-raise --> base-neutral-50
content-inverse-raise --> surface-raise
chart-fill-inactive --> base-neutral-50
Expand All @@ -495,7 +499,6 @@ graph RL
```mermaid
graph RL
base-neutral-100 --> #141B1D:::base-neutral-100
surface-raise-hover --> base-neutral-100
surface-secondary --> base-neutral-100
surface-disabled --> base-neutral-100
content-inverse-secondary --> surface-secondary
Expand All @@ -509,7 +512,7 @@ graph RL
```mermaid
graph RL
base-neutral-200 --> #1C2225:::base-neutral-200
surface-secondary-hover --> base-neutral-200
surface-hover --> base-neutral-200
surface-tertiary --> base-neutral-200
stroke-secondary --> base-neutral-200
chart-stroke-item-inactive --> base-neutral-200
Expand Down
Loading