From 6e851b541c62c2542e5163089245f57d27147070 Mon Sep 17 00:00:00 2001 From: Franck Date: Thu, 28 Sep 2023 21:39:14 -0400 Subject: [PATCH 1/3] feat(tokens): update styles --- .changeset/shaggy-dolphins-hug.md | 24 +++++++++++++ apps/docs/datas/tokens.json | 36 +++++++++++++++---- packages/tokens/package.json | 1 + .../tokens/semantic/light/colors.tokens.json | 36 +++++++++++++++---- pnpm-lock.yaml | 18 +++++++++- 5 files changed, 102 insertions(+), 13 deletions(-) create mode 100644 .changeset/shaggy-dolphins-hug.md diff --git a/.changeset/shaggy-dolphins-hug.md b/.changeset/shaggy-dolphins-hug.md new file mode 100644 index 000000000..f513779be --- /dev/null +++ b/.changeset/shaggy-dolphins-hug.md @@ -0,0 +1,24 @@ +--- +"@hopper-ui/tokens": major +--- + +Sync with design tokens + +#### Changed + +| Token | Value | Status | +|-------------------------------------|---------|--------| +| --hop-neutral-text-disabled | #959593 | update | +| --hop-neutral-surface-disabled | #ECEBE8 | update | +| --hop-neutral-border-disabled | #ECEBE8 | update | +| --hop-neutral-icon-disabled | #959593 | update | +| --hop-neutral-icon-hover | #505050 | update | +| --hop-neutral-icon-weak-hover | #505050 | new | +| --hop-neutral-surface-weakest-hover | #ECEBE8 | new | +| --hop-primary-icon-strong-hover | #FFFFFF | new | +| --hop-primary-icon-disabled | #95B1FF | update | +| --hop-primary-surface-strong-active | #E6EBFF | new | +| --hop-primary-surface-strong-hover | #2A43E8 | new | +| --hop-primary-text-strong-hover | #FFFFFF | new | + + diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json index 861b08ea5..439bc9421 100644 --- a/apps/docs/datas/tokens.json +++ b/apps/docs/datas/tokens.json @@ -929,6 +929,10 @@ "name": "hop-primary-icon-strong", "value": "#ffffff" }, + { + "name": "hop-primary-icon-strong-hover", + "value": "#ffffff" + }, { "name": "hop-primary-icon", "value": "#3b57ff" @@ -947,7 +951,7 @@ }, { "name": "hop-primary-icon-disabled", - "value": "#e6ebff" + "value": "#95b1ff" }, { "name": "hop-primary-surface-disabled", @@ -973,6 +977,14 @@ "name": "hop-primary-surface-strong", "value": "#4767fe" }, + { + "name": "hop-primary-surface-strong-active", + "value": "#e6ebff" + }, + { + "name": "hop-primary-surface-strong-hover", + "value": "#2a43e8" + }, { "name": "hop-primary-text", "value": "#3b57ff" @@ -985,6 +997,10 @@ "name": "hop-primary-text-strong", "value": "#ffffff" }, + { + "name": "hop-primary-text-strong-hover", + "value": "#ffffff" + }, { "name": "hop-primary-text-hover", "value": "#2a43e8" @@ -1181,13 +1197,17 @@ "name": "hop-neutral-surface-weakest-active", "value": "#ecebe8" }, + { + "name": "hop-neutral-surface-weakest-hover", + "value": "#ecebe8" + }, { "name": "hop-neutral-text-weak", "value": "#777775" }, { "name": "hop-neutral-surface-disabled", - "value": "#e0dfdd" + "value": "#ecebe8" }, { "name": "hop-neutral-surface-active", @@ -1203,7 +1223,7 @@ }, { "name": "hop-neutral-text-disabled", - "value": "#b3b3b1" + "value": "#959593" }, { "name": "hop-neutral-text-active", @@ -1223,7 +1243,7 @@ }, { "name": "hop-neutral-border-disabled", - "value": "#e0dfdd" + "value": "#ecebe8" }, { "name": "hop-neutral-border-strong", @@ -1239,7 +1259,7 @@ }, { "name": "hop-neutral-icon-disabled", - "value": "#b3b3b1" + "value": "#959593" }, { "name": "hop-neutral-icon", @@ -1249,6 +1269,10 @@ "name": "hop-neutral-icon-weak", "value": "#777775" }, + { + "name": "hop-neutral-icon-weak-hover", + "value": "#505050" + }, { "name": "hop-neutral-border", "value": "#b3b3b1" @@ -1267,7 +1291,7 @@ }, { "name": "hop-neutral-icon-hover", - "value": "#3c3c3c" + "value": "#505050" }, { "name": "hop-neutral-icon-active", diff --git a/packages/tokens/package.json b/packages/tokens/package.json index 6350f762e..c46f47305 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -40,6 +40,7 @@ "style-dictionary": "^3.8.0" }, "devDependencies": { + "@types/react": "^18.2.23", "@types/node": "18.15.11", "@workleap/eslint-plugin": "1.8.1", "@workleap/tsup-configs": "^2.0.0", diff --git a/packages/tokens/src/tokens/semantic/light/colors.tokens.json b/packages/tokens/src/tokens/semantic/light/colors.tokens.json index e78d050b4..041a8dbf0 100644 --- a/packages/tokens/src/tokens/semantic/light/colors.tokens.json +++ b/packages/tokens/src/tokens/semantic/light/colors.tokens.json @@ -168,6 +168,10 @@ "$type": "color", "$value": "{samoyed}" }, + "icon-strong-hover": { + "$type": "color", + "$value": "{samoyed}" + }, "icon": { "$type": "color", "$value": "{sapphire.500}" @@ -186,7 +190,7 @@ }, "icon-disabled": { "$type": "color", - "$value": "{sapphire.50}" + "$value": "{sapphire.200}" }, "surface-disabled": { "$type": "color", @@ -212,6 +216,14 @@ "$type": "color", "$value": "{sapphire.400}" }, + "surface-strong-active": { + "$type": "color", + "$value": "{sapphire.50}" + }, + "surface-strong-hover": { + "$type": "color", + "$value": "{sapphire.600}" + }, "text": { "$type": "color", "$value": "{sapphire.500}" @@ -224,6 +236,10 @@ "$type": "color", "$value": "{samoyed}" }, + "text-strong-hover": { + "$type": "color", + "$value": "{samoyed}" + }, "text-hover": { "$type": "color", "$value": "{sapphire.600}" @@ -442,13 +458,17 @@ "$type": "color", "$value": "{rock.50}" }, + "surface-weakest-hover": { + "$type": "color", + "$value": "{rock.50}" + }, "text-weak": { "$type": "color", "$value": "{rock.400}" }, "surface-disabled": { "$type": "color", - "$value": "{rock.75}" + "$value": "{rock.50}" }, "surface-active": { "$type": "color", @@ -464,7 +484,7 @@ }, "text-disabled": { "$type": "color", - "$value": "{rock.200}" + "$value": "{rock.300}" }, "text-active": { "$type": "color", @@ -484,7 +504,7 @@ }, "border-disabled": { "$type": "color", - "$value": "{rock.75}" + "$value": "{rock.50}" }, "border-strong": { "$type": "color", @@ -500,7 +520,7 @@ }, "icon-disabled": { "$type": "color", - "$value": "{rock.200}" + "$value": "{rock.300}" }, "icon": { "$type": "color", @@ -510,6 +530,10 @@ "$type": "color", "$value": "{rock.400}" }, + "icon-weak-hover": { + "$type": "color", + "$value": "{rock.700}" + }, "border": { "$type": "color", "$value": "{rock.200}" @@ -528,7 +552,7 @@ }, "icon-hover": { "$type": "color", - "$value": "{rock.800}" + "$value": "{rock.700}" }, "icon-active": { "$type": "color", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7365b9622..5d7f0f315 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -167,6 +167,9 @@ importers: '@types/node': specifier: 18.15.11 version: 18.15.11 + '@types/react': + specifier: ^18.2.23 + version: 18.2.23 '@workleap/eslint-plugin': specifier: 1.8.1 version: 1.8.1(@typescript-eslint/parser@5.62.0)(eslint@8.37.0)(typescript@5.0.3) @@ -2898,7 +2901,7 @@ packages: react: '>=16' dependencies: '@types/mdx': 2.0.7 - '@types/react': 18.2.12 + '@types/react': 18.2.23 react: 18.2.0 dev: true @@ -3594,6 +3597,7 @@ packages: dependencies: is-glob: 4.0.3 micromatch: 4.0.5 + napi-wasm: 1.1.0 dev: false bundledDependencies: - napi-wasm @@ -7481,6 +7485,14 @@ packages: csstype: 3.1.2 dev: true + /@types/react@18.2.23: + resolution: {integrity: sha512-qHLW6n1q2+7KyBEYnrZpcsAmU/iiCh9WGCKgXvMxx89+TYdJWRjZohVIo9XTcoLhfX3+/hP0Pbulu3bCZQ9PSA==} + dependencies: + '@types/prop-types': 15.7.5 + '@types/scheduler': 0.16.3 + csstype: 3.1.2 + dev: true + /@types/resolve@1.20.2: resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} dev: false @@ -13344,6 +13356,10 @@ packages: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} dev: false + /napi-wasm@1.1.0: + resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==} + dev: false + /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} dev: true From 103151b1daead3eb9339224d761ff247e88effb1 Mon Sep 17 00:00:00 2001 From: Franck Date: Fri, 29 Sep 2023 14:12:00 -0400 Subject: [PATCH 2/3] feat(tokens): sync semantic light --- .changeset/shaggy-dolphins-hug.md | 83 +++++++-- apps/docs/datas/tokens.json | 164 +++++++++++++++-- .../tokens/semantic/light/colors.tokens.json | 168 ++++++++++++++++-- 3 files changed, 373 insertions(+), 42 deletions(-) diff --git a/.changeset/shaggy-dolphins-hug.md b/.changeset/shaggy-dolphins-hug.md index f513779be..1b2501995 100644 --- a/.changeset/shaggy-dolphins-hug.md +++ b/.changeset/shaggy-dolphins-hug.md @@ -6,19 +6,74 @@ Sync with design tokens #### Changed -| Token | Value | Status | -|-------------------------------------|---------|--------| -| --hop-neutral-text-disabled | #959593 | update | -| --hop-neutral-surface-disabled | #ECEBE8 | update | -| --hop-neutral-border-disabled | #ECEBE8 | update | -| --hop-neutral-icon-disabled | #959593 | update | -| --hop-neutral-icon-hover | #505050 | update | -| --hop-neutral-icon-weak-hover | #505050 | new | -| --hop-neutral-surface-weakest-hover | #ECEBE8 | new | -| --hop-primary-icon-strong-hover | #FFFFFF | new | -| --hop-primary-icon-disabled | #95B1FF | update | -| --hop-primary-surface-strong-active | #E6EBFF | new | -| --hop-primary-surface-strong-hover | #2A43E8 | new | -| --hop-primary-text-strong-hover | #FFFFFF | new | +**Semantic light** +| Token | Value | Status | +|------------------------------------------|----------|--------| +| --hop-neutral-text-disabled | #959593 | update | +| --hop-neutral-surface-disabled | #ECEBE8 | update | +| --hop-neutral-border-disabled | #ECEBE8 | update | +| --hop-neutral-icon-disabled | #959593 | update | +| --hop-neutral-icon-hover | #505050 | update | +| --hop-neutral-icon-weak-hover | #505050 | new | +| --hop-neutral-surface-weakest-hover | #ECEBE8 | new | +| --hop-primary-icon-strong-hover | #FFFFFF | new | +| --hop-primary-icon-disabled | #95B1FF | update | +| --hop-primary-surface-strong-active | #E6EBFF | new | +| --hop-primary-surface-strong-hover | #2A43E8 | new | +| --hop-primary-text-strong-hover | #FFFFFF | new | +| --hop-danger-surface-strong-hover | #CB2E31 | new | +| --hop-danger-text-strong-hover | #FFFFFF | new | +| --hop-danger-icon-strong-hover | #FFFFFF | new | +| --hop-danger-icon-active | #DF3236 | update | +| --hop-decorative-option1-surface | #B9CBFF | update | +| --hop-decorative-option1-border | #B9CBFF | new | +| --hop-decorative-option1-surface-weakest | #F5F6FF | new | +| --hop-decorative-option1-surface-strong | #95B1FF | new | +| --hop-decorative-option1-surface-hover | #95B1FF | new | +| --hop-decorative-option2-surface | #BDE8E1 | update | +| --hop-decorative-option2-border | #A3D6CB | new | +| --hop-decorative-option2-surface-weak | #A3D6CB | update | +| --hop-decorative-option2-surface-hover | #A3D6CB | new | +| --hop-decorative-option3-border | #FFBF92 | new | +| --hop-decorative-option3-surface-weakest | #FFF5E9 | new | +| --hop-decorative-option3-surface-strong | #FF9B3F | new | +| --hop-decorative-option3-surface-hover | #FF9B3F | new | +| --hop-decorative-option4-border | #AAD89D | new | +| --hop-decorative-option4-surface-strong | #AAD89D | new | +| --hop-decorative-option4-surface-hover | #AAD89D | new | +| --hop-decorative-option4-surface-weak | #E3F3B9 | delete | +| --hop-decorative-option5-surface | #BAE6FF | update | +| --hop-decorative-option5-border | #9FD2F7 | new | +| --hop-decorative-option5-surface-strong | #9FD2F7 | new | +| --hop-decorative-option5-surface-hover | #9FD2F7 | new | +| --hop-decorative-option5-surface-weak | #BAE6FF | delete | +| --hop-decorative-option6-border | #EAC96D | new | +| --hop-decorative-option6-surface-strong | #2F250D | new | +| --hop-decorative-option6-surface-hover | #2F250D | new | +| --hop-decorative-option7-border | #D4CBC0 | new | +| --hop-decorative-option7-surface-strong | #E5DED6 | new | +| --hop-decorative-option7-surface-hover | #E5DED6 | new | +| --hop-decorative-option7-surface-weak | #BAE6FF | delete | +| --hop-decorative-option8-border | #FFBCB7 | new | +| --hop-decorative-option8-surface-strong | #FFBCB7 | new | +| --hop-decorative-option8-surface-hover | #FFBCB7 | new | +| --hop-decorative-option8-surface-weak | #FDE6E5 | delete | +| --hop-decorative-option9-surface | #777775 | update | +| --hop-decorative-option9-surface-weak | #777775 | delete | +| --hop-decorative-option9-border | #CCCCCA | new | +| --hop-decorative-option9-surface-strong | #3C3C3C | new | +| --hop-decorative-option9-surface-hover | #6C6C6B | new | +**Status light** + +| Token | Value | Status | +|--------------------------------------|----------|--------| +| --hop-status-inactive-surface | #ECEBE8 | new | +| --hop-status-inactive-surface-strong | #CCCCCA | new | +| --hop-status-inactive-text | #505050 | new | +| --hop-status-inactive-icon | #6C6C6B | new | +| --hop-status-option6-surface | #FFF8D6 | new | +| --hop-status-option6-surface-strong | #E2A934 | new | +| --hop-status-option6-text | #7E5E0A | new | +| --hop-status-option6-icon | #7E5E0A | new | diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json index 439bc9421..2079c002a 100644 --- a/apps/docs/datas/tokens.json +++ b/apps/docs/datas/tokens.json @@ -835,7 +835,7 @@ }, { "name": "hop-danger-icon-active", - "value": "#fa4d59" + "value": "#df3236" }, { "name": "hop-danger-text-active", @@ -861,6 +861,10 @@ "name": "hop-danger-surface-strong", "value": "#fa4d59" }, + { + "name": "hop-danger-surface-strong-hover", + "value": "#cb2e31" + }, { "name": "hop-danger-surface-weak", "value": "#fde6e5" @@ -893,10 +897,18 @@ "name": "hop-danger-text-strong", "value": "#ffffff" }, + { + "name": "hop-danger-text-strong-hover", + "value": "#ffffff" + }, { "name": "hop-danger-icon-strong", "value": "#ffffff" }, + { + "name": "hop-danger-icon-strong-hover", + "value": "#ffffff" + }, { "name": "hop-danger-icon-hover", "value": "#cb2e31" @@ -1015,11 +1027,15 @@ }, { "name": "hop-decorative-option9-surface", + "value": "#777775" + }, + { + "name": "hop-decorative-option9-surface-strong", "value": "#3c3c3c" }, { - "name": "hop-decorative-option9-surface-weak", - "value": "#777775" + "name": "hop-decorative-option9-surface-hover", + "value": "#6c6c6b" }, { "name": "hop-decorative-option9-text", @@ -1029,13 +1045,21 @@ "name": "hop-decorative-option9-text-weak", "value": "#ecebe8" }, + { + "name": "hop-decorative-option9-border", + "value": "#ccccca" + }, { "name": "hop-decorative-option8-icon", "value": "#431a17" }, { - "name": "hop-decorative-option8-surface-weak", - "value": "#fde6e5" + "name": "hop-decorative-option8-surface-hover", + "value": "#ffbcb7" + }, + { + "name": "hop-decorative-option8-surface-strong", + "value": "#ffbcb7" }, { "name": "hop-decorative-option8-text-weak", @@ -1049,13 +1073,21 @@ "name": "hop-decorative-option8-text", "value": "#431a17" }, + { + "name": "hop-decorative-option8-border", + "value": "#ffbcb7" + }, { "name": "hop-decorative-option7-icon", "value": "#2a2620" }, { - "name": "hop-decorative-option7-surface-weak", - "value": "#f0eae3" + "name": "hop-decorative-option7-surface-strong", + "value": "#e5ded6" + }, + { + "name": "hop-decorative-option7-surface-hover", + "value": "#e5ded6" }, { "name": "hop-decorative-option7-surface", @@ -1069,6 +1101,10 @@ "name": "hop-decorative-option7-text", "value": "#2a2620" }, + { + "name": "hop-decorative-option7-border", + "value": "#d4cbc0" + }, { "name": "hop-decorative-option5-text-weak", "value": "#d9efff" @@ -1078,21 +1114,37 @@ "value": "#00274b" }, { - "name": "hop-decorative-option5-surface-weak", - "value": "#bae6ff" + "name": "hop-decorative-option5-surface-strong", + "value": "#9fd2f7" }, { - "name": "hop-decorative-option5-surface", + "name": "hop-decorative-option5-surface-hover", "value": "#9fd2f7" }, + { + "name": "hop-decorative-option5-surface", + "value": "#bae6ff" + }, { "name": "hop-decorative-option5-icon", "value": "#00274b" }, + { + "name": "hop-decorative-option5-border", + "value": "#9fd2f7" + }, { "name": "hop-decorative-option6-surface-weak", "value": "#fff2b8" }, + { + "name": "hop-decorative-option6-surface-hover", + "value": "#eac96d" + }, + { + "name": "hop-decorative-option6-surface-strong", + "value": "#eac96d" + }, { "name": "hop-decorative-option6-surface", "value": "#f7e694" @@ -1110,8 +1162,16 @@ "value": "#e2a934" }, { - "name": "hop-decorative-option4-surface-weak", - "value": "#e3f3b9" + "name": "hop-decorative-option6-border", + "value": "#eac96d" + }, + { + "name": "hop-decorative-option4-surface-strong", + "value": "#aad89d" + }, + { + "name": "hop-decorative-option4-surface-hover", + "value": "#aad89d" }, { "name": "hop-decorative-option4-surface", @@ -1129,10 +1189,26 @@ "name": "hop-decorative-option4-text", "value": "#132a27" }, + { + "name": "hop-decorative-option4-border", + "value": "#aad89d" + }, { "name": "hop-decorative-option3-surface-weak", "value": "#ffbf92" }, + { + "name": "hop-decorative-option3-surface-weakest", + "value": "#fff5e9" + }, + { + "name": "hop-decorative-option3-surface-strong", + "value": "#ff9b3f" + }, + { + "name": "hop-decorative-option3-surface-hover", + "value": "#ff9b3f" + }, { "name": "hop-decorative-option3-surface", "value": "#ff9b3f" @@ -1149,12 +1225,20 @@ "name": "hop-decorative-option3-text-weak", "value": "#ffe8d3" }, + { + "name": "hop-decorative-option3-border", + "value": "#ffbf92" + }, { "name": "hop-decorative-option2-surface-weak", - "value": "#bde8e1" + "value": "#a3d6cb" }, { "name": "hop-decorative-option2-surface", + "value": "#bde8e1" + }, + { + "name": "hop-decorative-option2-surface-hover", "value": "#a3d6cb" }, { @@ -1169,14 +1253,34 @@ "name": "hop-decorative-option2-icon", "value": "#002d1c" }, + { + "name": "hop-decorative-option2-border", + "value": "#a3d6cb" + }, { "name": "hop-decorative-option1-surface-weak", "value": "#e6ebff" }, { - "name": "hop-decorative-option1-surface", + "name": "hop-decorative-option1-surface-weakest", + "value": "#f5f6ff" + }, + { + "name": "hop-decorative-option1-surface-strong", "value": "#95b1ff" }, + { + "name": "hop-decorative-option1-surface-hover", + "value": "#95b1ff" + }, + { + "name": "hop-decorative-option1-surface", + "value": "#b9cbff" + }, + { + "name": "hop-decorative-option1-border", + "value": "#b9cbff" + }, { "name": "hop-decorative-option1-text-weak", "value": "#e6ebff" @@ -1461,6 +1565,22 @@ "name": "hop-status-progress-text", "value": "#3b57ff" }, + { + "name": "hop-status-option6-surface-strong", + "value": "#e2a934" + }, + { + "name": "hop-status-option6-icon", + "value": "#7e5e0a" + }, + { + "name": "hop-status-option6-surface", + "value": "#fff8d6" + }, + { + "name": "hop-status-option6-text", + "value": "#7e5e0a" + }, { "name": "hop-status-option5-surface-strong", "value": "#bdb1a3" @@ -1573,6 +1693,22 @@ "name": "hop-status-negative-text", "value": "#952927" }, + { + "name": "hop-status-inactive-surface-strong", + "value": "#ccccca" + }, + { + "name": "hop-status-inactive-icon", + "value": "#6c6c6b" + }, + { + "name": "hop-status-inactive-surface", + "value": "#ecebe8" + }, + { + "name": "hop-status-inactive-text", + "value": "#505050" + }, { "name": "hop-status-positive-icon", "value": "#115a52" diff --git a/packages/tokens/src/tokens/semantic/light/colors.tokens.json b/packages/tokens/src/tokens/semantic/light/colors.tokens.json index 041a8dbf0..31ea2c12e 100644 --- a/packages/tokens/src/tokens/semantic/light/colors.tokens.json +++ b/packages/tokens/src/tokens/semantic/light/colors.tokens.json @@ -72,7 +72,7 @@ }, "icon-active": { "$type": "color", - "$value": "{amanita.300}" + "$value": "{amanita.400}" }, "text-active": { "$type": "color", @@ -98,6 +98,10 @@ "$type": "color", "$value": "{amanita.300}" }, + "surface-strong-hover": { + "$type": "color", + "$value": "{amanita.500}" + }, "surface-weak": { "$type": "color", "$value": "{amanita.50}" @@ -130,10 +134,18 @@ "$type": "color", "$value": "{samoyed}" }, + "text-strong-hover": { + "$type": "color", + "$value": "{samoyed}" + }, "icon-strong": { "$type": "color", "$value": "{samoyed}" }, + "icon-strong-hover": { + "$type": "color", + "$value": "{samoyed}" + }, "icon-hover": { "$type": "color", "$value": "{amanita.500}" @@ -256,12 +268,16 @@ "$value": "{samoyed}" }, "surface": { + "$type": "color", + "$value": "{rock.400}" + }, + "surface-strong": { "$type": "color", "$value": "{rock.800}" }, - "surface-weak": { + "surface-hover": { "$type": "color", - "$value": "{rock.400}" + "$value": "{rock.500}" }, "text": { "$type": "color", @@ -270,6 +286,10 @@ "text-weak": { "$type": "color", "$value": "{rock.50}" + }, + "border": { + "$type": "color", + "$value": "{rock.100}" } }, "option8": { @@ -277,9 +297,13 @@ "$type": "color", "$value": "{amanita.900}" }, - "surface-weak": { + "surface-hover": { + "$type": "color", + "$value": "{amanita.100}" + }, + "surface-strong": { "$type": "color", - "$value": "{amanita.50}" + "$value": "{amanita.100}" }, "text-weak": { "$type": "color", @@ -292,6 +316,10 @@ "text": { "$type": "color", "$value": "{amanita.900}" + }, + "border": { + "$type": "color", + "$value": "{amanita.100}" } }, "option7": { @@ -299,9 +327,13 @@ "$type": "color", "$value": "{toad.900}" }, - "surface-weak": { + "surface-strong": { + "$type": "color", + "$value": "{toad.75}" + }, + "surface-hover": { "$type": "color", - "$value": "{toad.50}" + "$value": "{toad.75}" }, "surface": { "$type": "color", @@ -314,6 +346,10 @@ "text": { "$type": "color", "$value": "{toad.900}" + }, + "border": { + "$type": "color", + "$value": "{toad.100}" } }, "option5": { @@ -325,17 +361,25 @@ "$type": "color", "$value": "{coastal.900}" }, - "surface-weak": { + "surface-strong": { "$type": "color", - "$value": "{coastal.75}" + "$value": "{coastal.100}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{coastal.100}" }, + "surface": { + "$type": "color", + "$value": "{coastal.75}" + }, "icon": { "$type": "color", "$value": "{coastal.900}" + }, + "border": { + "$type": "color", + "$value": "{coastal.100}" } }, "option6": { @@ -343,6 +387,14 @@ "$type": "color", "$value": "{sunken-treasure.50}" }, + "surface-hover": { + "$type": "color", + "$value": "{sunken-treasure.100}" + }, + "surface-strong": { + "$type": "color", + "$value": "{sunken-treasure.100}" + }, "surface": { "$type": "color", "$value": "{sunken-treasure.75}" @@ -358,12 +410,20 @@ "text-weak": { "$type": "color", "$value": "{sunken-treasure.200}" + }, + "border": { + "$type": "color", + "$value": "{sunken-treasure.100}" } }, "option4": { - "surface-weak": { + "surface-strong": { + "$type": "color", + "$value": "{moss.100}" + }, + "surface-hover": { "$type": "color", - "$value": "{moss.50}" + "$value": "{moss.100}" }, "surface": { "$type": "color", @@ -380,6 +440,10 @@ "text": { "$type": "color", "$value": "{moss.900}" + }, + "border": { + "$type": "color", + "$value": "{moss.100}" } }, "option3": { @@ -387,6 +451,18 @@ "$type": "color", "$value": "{koi.100}" }, + "surface-weakest": { + "$type": "color", + "$value": "{koi.25}" + }, + "surface-strong": { + "$type": "color", + "$value": "{koi.200}" + }, + "surface-hover": { + "$type": "color", + "$value": "{koi.200}" + }, "surface": { "$type": "color", "$value": "{koi.200}" @@ -402,14 +478,22 @@ "text-weak": { "$type": "color", "$value": "{koi.50}" + }, + "border": { + "$type": "color", + "$value": "{koi.100}" } }, "option2": { "surface-weak": { "$type": "color", - "$value": "{quetzal.75}" + "$value": "{quetzal.100}" }, "surface": { + "$type": "color", + "$value": "{quetzal.75}" + }, + "surface-hover": { "$type": "color", "$value": "{quetzal.100}" }, @@ -424,6 +508,10 @@ "icon": { "$type": "color", "$value": "{quetzal.900}" + }, + "border": { + "$type": "color", + "$value": "{quetzal.100}" } }, "option1": { @@ -431,10 +519,26 @@ "$type": "color", "$value": "{sapphire.50}" }, - "surface": { + "surface-weakest": { + "$type": "color", + "$value": "{sapphire.25}" + }, + "surface-strong": { "$type": "color", "$value": "{sapphire.200}" }, + "surface-hover": { + "$type": "color", + "$value": "{sapphire.200}" + }, + "surface": { + "$type": "color", + "$value": "{sapphire.100}" + }, + "border": { + "$type": "color", + "$value": "{sapphire.100}" + }, "text-weak": { "$type": "color", "$value": "{sapphire.50}" @@ -734,6 +838,24 @@ "$value": "{sapphire.500}" } }, + "option6": { + "surface-strong": { + "$type": "color", + "$value": "{sunken-treasure.200}" + }, + "icon": { + "$type": "color", + "$value": "{sunken-treasure.600}" + }, + "surface": { + "$type": "color", + "$value": "{sunken-treasure.25}" + }, + "text": { + "$type": "color", + "$value": "{sunken-treasure.600}" + } + }, "option5": { "surface-strong": { "$type": "color", @@ -860,6 +982,24 @@ "$value": "{amanita.700}" } }, + "inactive": { + "surface-strong": { + "$type": "color", + "$value": "{rock.100}" + }, + "icon": { + "$type": "color", + "$value": "{rock.500}" + }, + "surface": { + "$type": "color", + "$value": "{rock.50}" + }, + "text": { + "$type": "color", + "$value": "{rock.700}" + } + }, "positive": { "icon": { "$type": "color", From 007e2a11c02c34bbe6cff94156b026a663a139f1 Mon Sep 17 00:00:00 2001 From: Franck Date: Tue, 3 Oct 2023 11:16:18 -0400 Subject: [PATCH 3/3] feat(tokens): sync semantic dark and update light --- .changeset/shaggy-dolphins-hug.md | 195 ++++++++++----- apps/docs/datas/tokens-dark.json | 218 ++++++++++++++--- apps/docs/datas/tokens.json | 4 +- .../tokens/semantic/dark/colors.tokens.json | 222 +++++++++++++++--- .../tokens/semantic/light/colors.tokens.json | 4 +- 5 files changed, 517 insertions(+), 126 deletions(-) diff --git a/.changeset/shaggy-dolphins-hug.md b/.changeset/shaggy-dolphins-hug.md index 1b2501995..450349598 100644 --- a/.changeset/shaggy-dolphins-hug.md +++ b/.changeset/shaggy-dolphins-hug.md @@ -8,62 +8,63 @@ Sync with design tokens **Semantic light** -| Token | Value | Status | -|------------------------------------------|----------|--------| -| --hop-neutral-text-disabled | #959593 | update | -| --hop-neutral-surface-disabled | #ECEBE8 | update | -| --hop-neutral-border-disabled | #ECEBE8 | update | -| --hop-neutral-icon-disabled | #959593 | update | -| --hop-neutral-icon-hover | #505050 | update | -| --hop-neutral-icon-weak-hover | #505050 | new | -| --hop-neutral-surface-weakest-hover | #ECEBE8 | new | -| --hop-primary-icon-strong-hover | #FFFFFF | new | -| --hop-primary-icon-disabled | #95B1FF | update | -| --hop-primary-surface-strong-active | #E6EBFF | new | -| --hop-primary-surface-strong-hover | #2A43E8 | new | -| --hop-primary-text-strong-hover | #FFFFFF | new | -| --hop-danger-surface-strong-hover | #CB2E31 | new | -| --hop-danger-text-strong-hover | #FFFFFF | new | -| --hop-danger-icon-strong-hover | #FFFFFF | new | -| --hop-danger-icon-active | #DF3236 | update | -| --hop-decorative-option1-surface | #B9CBFF | update | -| --hop-decorative-option1-border | #B9CBFF | new | -| --hop-decorative-option1-surface-weakest | #F5F6FF | new | -| --hop-decorative-option1-surface-strong | #95B1FF | new | -| --hop-decorative-option1-surface-hover | #95B1FF | new | -| --hop-decorative-option2-surface | #BDE8E1 | update | -| --hop-decorative-option2-border | #A3D6CB | new | -| --hop-decorative-option2-surface-weak | #A3D6CB | update | -| --hop-decorative-option2-surface-hover | #A3D6CB | new | -| --hop-decorative-option3-border | #FFBF92 | new | -| --hop-decorative-option3-surface-weakest | #FFF5E9 | new | -| --hop-decorative-option3-surface-strong | #FF9B3F | new | -| --hop-decorative-option3-surface-hover | #FF9B3F | new | -| --hop-decorative-option4-border | #AAD89D | new | -| --hop-decorative-option4-surface-strong | #AAD89D | new | -| --hop-decorative-option4-surface-hover | #AAD89D | new | -| --hop-decorative-option4-surface-weak | #E3F3B9 | delete | -| --hop-decorative-option5-surface | #BAE6FF | update | -| --hop-decorative-option5-border | #9FD2F7 | new | -| --hop-decorative-option5-surface-strong | #9FD2F7 | new | -| --hop-decorative-option5-surface-hover | #9FD2F7 | new | -| --hop-decorative-option5-surface-weak | #BAE6FF | delete | -| --hop-decorative-option6-border | #EAC96D | new | -| --hop-decorative-option6-surface-strong | #2F250D | new | -| --hop-decorative-option6-surface-hover | #2F250D | new | -| --hop-decorative-option7-border | #D4CBC0 | new | -| --hop-decorative-option7-surface-strong | #E5DED6 | new | -| --hop-decorative-option7-surface-hover | #E5DED6 | new | -| --hop-decorative-option7-surface-weak | #BAE6FF | delete | -| --hop-decorative-option8-border | #FFBCB7 | new | -| --hop-decorative-option8-surface-strong | #FFBCB7 | new | -| --hop-decorative-option8-surface-hover | #FFBCB7 | new | -| --hop-decorative-option8-surface-weak | #FDE6E5 | delete | -| --hop-decorative-option9-surface | #777775 | update | -| --hop-decorative-option9-surface-weak | #777775 | delete | -| --hop-decorative-option9-border | #CCCCCA | new | -| --hop-decorative-option9-surface-strong | #3C3C3C | new | -| --hop-decorative-option9-surface-hover | #6C6C6B | new | +| Token | Value | Status | +|------------------------------------------|---------|--------| +| --hop-neutral-text-disabled | #959593 | update | +| --hop-neutral-surface-disabled | #ECEBE8 | update | +| --hop-neutral-border-disabled | #ECEBE8 | update | +| --hop-neutral-icon-disabled | #959593 | update | +| --hop-neutral-icon-hover | #505050 | update | +| --hop-neutral-icon-weak-hover | #505050 | new | +| --hop-neutral-surface-weakest-hover | #ECEBE8 | new | +| --hop-primary-icon-strong-hover | #FFFFFF | new | +| --hop-primary-icon-disabled | #95B1FF | update | +| --hop-primary-surface-strong-active | #E6EBFF | new | +| --hop-primary-surface-strong-hover | #2A43E8 | new | +| --hop-primary-text-strong-hover | #FFFFFF | new | +| --hop-danger-surface-strong-hover | #CB2E31 | new | +| --hop-danger-text-strong-hover | #FFFFFF | new | +| --hop-danger-icon-strong-hover | #FFFFFF | new | +| --hop-danger-icon-active | #DF3236 | update | +| --hop-decorative-option1-surface | #B9CBFF | update | +| --hop-decorative-option1-border | #B9CBFF | new | +| --hop-decorative-option1-surface-weakest | #F5F6FF | new | +| --hop-decorative-option1-surface-strong | #95B1FF | new | +| --hop-decorative-option1-surface-hover | #95B1FF | new | +| --hop-decorative-option2-surface | #BDE8E1 | update | +| --hop-decorative-option2-border | #A3D6CB | new | +| --hop-decorative-option2-surface-weak | #A3D6CB | update | +| --hop-decorative-option2-surface-hover | #A3D6CB | new | +| --hop-decorative-option3-border | #FFBF92 | new | +| --hop-decorative-option3-surface-weakest | #FFF5E9 | new | +| --hop-decorative-option3-surface-strong | #FF9B3F | new | +| --hop-decorative-option3-surface-hover | #FF9B3F | new | +| --hop-decorative-option4-border | #AAD89D | new | +| --hop-decorative-option4-surface-strong | #AAD89D | new | +| --hop-decorative-option4-surface-hover | #AAD89D | new | +| --hop-decorative-option4-surface-weak | #E3F3B9 | delete | +| --hop-decorative-option5-surface | #BAE6FF | update | +| --hop-decorative-option5-border | #9FD2F7 | new | +| --hop-decorative-option5-surface-strong | #9FD2F7 | new | +| --hop-decorative-option5-surface-hover | #9FD2F7 | new | +| --hop-decorative-option5-surface-weak | #BAE6FF | delete | +| --hop-decorative-option6-border | #EAC96D | new | +| --hop-decorative-option6-surface-strong | #2F250D | new | +| --hop-decorative-option6-surface-hover | #2F250D | new | +| --hop-decorative-option7-border | #D4CBC0 | new | +| --hop-decorative-option7-surface-strong | #E5DED6 | new | +| --hop-decorative-option7-surface-hover | #E5DED6 | new | +| --hop-decorative-option7-surface-weak | #BAE6FF | delete | +| --hop-decorative-option8-border | #FFBCB7 | new | +| --hop-decorative-option8-surface | #FFBCB7 | update | +| --hop-decorative-option8-surface-strong | #FFBCB7 | new | +| --hop-decorative-option8-surface-hover | #FF8E8E | new | +| --hop-decorative-option8-surface-weak | #FDE6E5 | delete | +| --hop-decorative-option9-surface | #777775 | update | +| --hop-decorative-option9-surface-weak | #777775 | delete | +| --hop-decorative-option9-border | #CCCCCA | new | +| --hop-decorative-option9-surface-strong | #3C3C3C | new | +| --hop-decorative-option9-surface-hover | #6C6C6B | new | **Status light** @@ -77,3 +78,85 @@ Sync with design tokens | --hop-status-option6-surface-strong | #E2A934 | new | | --hop-status-option6-text | #7E5E0A | new | | --hop-status-option6-icon | #7E5E0A | new | + +**Semantic dark** + +| Token | Value | Status | +|--------------------------------------|---------|--------| +| --hop-neutral-text-hover | #ECEBE8 | update | +| --hop-neutral-text-disabled | #6C6C6B | update | +| --hop-neutral-surface-weakest-hover | #3C3C3C | new | +| --hop-neutral-surface-weakest-active | #3C3C3C | delete | +| --hop-neutral-surface-disabled | #505050 | update | +| --hop-neutral-border-strong-hover | #FFFFFF | new | +| --hop-neutral-border-disabled | #3C3C3C | update | +| --hop-neutral-icon-hover | #ECEBE8 | update | +| --hop-neutral-icon-disabled | #6C6C6B | update | +| --hop-primary-text-strong-hover | #6C8FFD | new | +| --hop-primary-surface-strong-hover | #95B1FF | new | +| --hop-primary-surface-strong-active | #1B3587 | new | +| --hop-primary-icon-strong-hover | #6C8FFD | new | +| --hop-danger-text-strong-hover | #FFFFFF | new | +| --hop-danger-surface-strong-hover | #FF8E8E | new | +| --hop-danger-icon-active | #FA4D59 | update | +| --hop-option1-surface-weak | #E6EBFF | update | +| --hop-option1-surface | #B9CBFF | update | +| --hop-option1-surface-hover | #95B1FF | new | +| --hop-option1-surface-weakest | #F5F6FF | new | +| --hop-option1-surface-strong | #95B1FF | new | +| --hop-option1-surface-border | #4767FE | new | +| --hop-option2-surface | #BDE8E1 | update | +| --hop-option2-surface-hover | #A3D6CB | new | +| --hop-option2-surface-strong | #A3D6CB | new | +| --hop-option2-surface-weak | | delete | +| --hop-option2-border | #38836A | new | +| --hop-option3-surface | #FFBF92 | update | +| --hop-option3-surface-hover | #FF9B3F | new | +| --hop-option3-surface-weak | #FFE8D3 | update | +| --hop-option3-surface-weakest | #FFF5E9 | new | +| --hop-option3-surface-strong | #FF9B3F | new | +| --hop-option3-border | #C95109 | new | +| --hop-option4-surface-weak | | delete | +| --hop-option4-surface-strong | #AAD89D | new | +| --hop-option4-surface-hover | #AAD89D | new | +| --hop-option5-surface | #BAE6FF | update | +| --hop-option5-surface-hover | #9FD2F7 | new | +| --hop-option5-surface-strong | #9FD2F7 | new | +| --hop-option5-surface-weak | | delete | +| --hop-option5-border | #3A7BB2 | new | +| --hop-option6-surface-weak | #FFF8D6 | update | +| --hop-option6-surface-hover | #EAC96D | new | +| --hop-option6-surface-strong | #EAC96D | new | +| --hop-option7-surface | #FOEAE3 | update | +| --hop-option7-surface-hover | #E5DED6 | new | +| --hop-option7-surface-strong | #E5DED6 | new | +| --hop-option7-surface-weak | | delete | +| --hop-option7-border | #837463 | new | +| --hop-option8-surface | #FFBCB7 | update | +| --hop-option8-surface-strong | #FEBCB7 | new | +| --hop-option8-surface-hover | #FF8E8E | new | +| --hop-option8-surface-weak | | delete | +| --hop-option8-border | #DF3236 | new | +| --hop-option9-surface | #777775 | update | +| --hop-option9-surface-weak | | delete | +| --hop-option9-surface-hover | #6C6C6B | new | +| --hop-option9-surface-strong | #ЗСЗСЗС | new | +| --hop-option9-border | #777775 | new | + + +**Status dark** + +| Token | Value | Status | +|--------------------------------------|---------|----------| +| --hop-status-progress-surface | #B9CBFF | update | +| --hop-status-inactive-surface | #E0DFDD | new | +| --hop-status-inactive-surface-strong | #CCCCCA | new | +| --hop-status-inactive-icon | #3C3C3C | new | +| --hop-status-inactive-text | #292929 | new | +| --hop-status-option5-text | #2A2620 | update | +| --hop-status-option5-surface | #BDB1A3 | update | +| --hop-status-option5-icon | #2A2620 | update | +| --hop-status-option6-surface | #F7E694 | new | +| --hop-status-option6-surface-strong | #EAC96D | new | +| --hop-status-option6-text | #2F250D | new | +| --hop-status-option6-icon | #2F250D | new | diff --git a/apps/docs/datas/tokens-dark.json b/apps/docs/datas/tokens-dark.json index 38177df87..c70f10ab4 100644 --- a/apps/docs/datas/tokens-dark.json +++ b/apps/docs/datas/tokens-dark.json @@ -831,7 +831,7 @@ }, { "name": "hop-danger-icon-active", - "value": "#df3236" + "value": "#fa4d59" }, { "name": "hop-danger-text-active", @@ -857,6 +857,10 @@ "name": "hop-danger-surface-strong", "value": "#fa4d59" }, + { + "name": "hop-danger-surface-strong-hover", + "value": "#ff8e8e" + }, { "name": "hop-danger-surface-weak", "value": "#431a17" @@ -889,6 +893,10 @@ "name": "hop-danger-text-strong", "value": "#ffffff" }, + { + "name": "hop-danger-text-strong-hover", + "value": "#ffffff" + }, { "name": "hop-danger-icon-strong", "value": "#ffffff" @@ -925,6 +933,10 @@ "name": "hop-primary-icon-strong", "value": "#ffffff" }, + { + "name": "hop-primary-icon-strong-hover", + "value": "#6c8ffd" + }, { "name": "hop-primary-icon", "value": "#95b1ff" @@ -969,6 +981,14 @@ "name": "hop-primary-surface-strong", "value": "#4767fe" }, + { + "name": "hop-primary-surface-strong-hover", + "value": "#95b1ff" + }, + { + "name": "hop-primary-surface-strong-active", + "value": "#1b3587" + }, { "name": "hop-primary-text", "value": "#95b1ff" @@ -981,6 +1001,10 @@ "name": "hop-primary-text-strong", "value": "#ffffff" }, + { + "name": "hop-primary-text-strong-hover", + "value": "#6c8ffd" + }, { "name": "hop-primary-text-hover", "value": "#6c8ffd" @@ -989,16 +1013,24 @@ "name": "hop-primary-surface-active", "value": "#1b3587" }, + { + "name": "hop-decorative-option9-border", + "value": "#777775" + }, { "name": "hop-decorative-option9-icon", "value": "#ffffff" }, { - "name": "hop-decorative-option9-surface", + "name": "hop-decorative-option9-surface-strong", "value": "#3c3c3c" }, { - "name": "hop-decorative-option9-surface-weak", + "name": "hop-decorative-option9-surface-hover", + "value": "#6c6c6b" + }, + { + "name": "hop-decorative-option9-surface", "value": "#777775" }, { @@ -1009,13 +1041,21 @@ "name": "hop-decorative-option9-text-weak", "value": "#ecebe8" }, + { + "name": "hop-decorative-option8-border", + "value": "#df3236" + }, { "name": "hop-decorative-option8-icon", "value": "#431a17" }, { - "name": "hop-decorative-option8-surface-weak", - "value": "#fde6e5" + "name": "hop-decorative-option8-surface-strong", + "value": "#ffbcb7" + }, + { + "name": "hop-decorative-option8-surface-hover", + "value": "#ff8e8e" }, { "name": "hop-decorative-option8-text-weak", @@ -1023,24 +1063,32 @@ }, { "name": "hop-decorative-option8-surface", - "value": "#ffd6d3" + "value": "#ffbcb7" }, { "name": "hop-decorative-option8-text", "value": "#431a17" }, + { + "name": "hop-decorative-option7-border", + "value": "#837463" + }, { "name": "hop-decorative-option7-icon", "value": "#2a2620" }, { - "name": "hop-decorative-option7-surface-weak", - "value": "#f0eae3" + "name": "hop-decorative-option7-surface-strong", + "value": "#e5ded6" }, { - "name": "hop-decorative-option7-surface", + "name": "hop-decorative-option7-surface-hover", "value": "#e5ded6" }, + { + "name": "hop-decorative-option7-surface", + "value": "#f0eae3" + }, { "name": "hop-decorative-option7-text-weak", "value": "#776a59" @@ -1058,25 +1106,45 @@ "value": "#00274b" }, { - "name": "hop-decorative-option5-surface-weak", - "value": "#bae6ff" + "name": "hop-decorative-option5-surface-strong", + "value": "#9fd2f7" }, { - "name": "hop-decorative-option5-surface", + "name": "hop-decorative-option5-surface-hover", "value": "#9fd2f7" }, + { + "name": "hop-decorative-option5-surface", + "value": "#bae6ff" + }, + { + "name": "hop-decorative-option5-border", + "value": "#3a7bb2" + }, { "name": "hop-decorative-option5-icon", "value": "#00274b" }, { "name": "hop-decorative-option6-surface-weak", - "value": "#fff2b8" + "value": "#fff8d6" + }, + { + "name": "hop-decorative-option6-surface-strong", + "value": "#eac96d" + }, + { + "name": "hop-decorative-option6-surface-hover", + "value": "#eac96d" }, { "name": "hop-decorative-option6-surface", "value": "#f7e694" }, + { + "name": "hop-decorative-option6-border", + "value": "#996f08" + }, { "name": "hop-decorative-option6-icon", "value": "#2f250d" @@ -1090,13 +1158,21 @@ "value": "#e2a934" }, { - "name": "hop-decorative-option4-surface-weak", - "value": "#e3f3b9" + "name": "hop-decorative-option4-surface-strong", + "value": "#aad89d" + }, + { + "name": "hop-decorative-option4-surface-hover", + "value": "#aad89d" }, { "name": "hop-decorative-option4-surface", "value": "#cde8ac" }, + { + "name": "hop-decorative-option4-border", + "value": "#188a71" + }, { "name": "hop-decorative-option4-icon", "value": "#132a27" @@ -1109,14 +1185,30 @@ "name": "hop-decorative-option4-text", "value": "#132a27" }, + { + "name": "hop-decorative-option3-surface-strong", + "value": "#ff9b3f" + }, + { + "name": "hop-decorative-option3-surface-weakest", + "value": "#fff5e9" + }, { "name": "hop-decorative-option3-surface-weak", - "value": "#ffbf92" + "value": "#ffe8d3" }, { - "name": "hop-decorative-option3-surface", + "name": "hop-decorative-option3-surface-hover", "value": "#ff9b3f" }, + { + "name": "hop-decorative-option3-surface", + "value": "#ffbf92" + }, + { + "name": "hop-decorative-option3-border", + "value": "#c95109" + }, { "name": "hop-decorative-option3-icon", "value": "#451a02" @@ -1130,13 +1222,17 @@ "value": "#ffe8d3" }, { - "name": "hop-decorative-option2-surface-weak", - "value": "#bde8e1" + "name": "hop-decorative-option2-surface-strong", + "value": "#a3d6cb" }, { - "name": "hop-decorative-option2-surface", + "name": "hop-decorative-option2-surface-hover", "value": "#a3d6cb" }, + { + "name": "hop-decorative-option2-surface", + "value": "#bde8e1" + }, { "name": "hop-decorative-option2-text", "value": "#002d1c" @@ -1145,22 +1241,42 @@ "name": "hop-decorative-option2-text-weak", "value": "#cff4ef" }, + { + "name": "hop-decorative-option2-border", + "value": "#38836a" + }, { "name": "hop-decorative-option2-icon", "value": "#002d1c" }, + { + "name": "hop-decorative-option1-surface-strong", + "value": "#95b1ff" + }, + { + "name": "hop-decorative-option1-surface-weakest", + "value": "#f5f6ff" + }, { "name": "hop-decorative-option1-surface-weak", - "value": "#d6e0ff" + "value": "#e6ebff" }, { - "name": "hop-decorative-option1-surface", + "name": "hop-decorative-option1-surface-hover", "value": "#95b1ff" }, + { + "name": "hop-decorative-option1-surface", + "value": "#b9cbff" + }, { "name": "hop-decorative-option1-text-weak", "value": "#e6ebff" }, + { + "name": "hop-decorative-option1-border", + "value": "#4767fe" + }, { "name": "hop-decorative-option1-icon", "value": "#152450" @@ -1171,10 +1287,10 @@ }, { "name": "hop-neutral-text-hover", - "value": "#f8f6f3" + "value": "#ecebe8" }, { - "name": "hop-neutral-surface-weakest-active", + "name": "hop-neutral-surface-weakest-hover", "value": "#3c3c3c" }, { @@ -1183,7 +1299,7 @@ }, { "name": "hop-neutral-surface-disabled", - "value": "#636362" + "value": "#505050" }, { "name": "hop-neutral-surface-active", @@ -1199,7 +1315,7 @@ }, { "name": "hop-neutral-text-disabled", - "value": "#777775" + "value": "#6c6c6b" }, { "name": "hop-neutral-text-active", @@ -1219,7 +1335,11 @@ }, { "name": "hop-neutral-border-disabled", - "value": "#636362" + "value": "#3c3c3c" + }, + { + "name": "hop-neutral-border-strong-hover", + "value": "#ffffff" }, { "name": "hop-neutral-border-strong", @@ -1235,7 +1355,7 @@ }, { "name": "hop-neutral-icon-disabled", - "value": "#777775" + "value": "#6c6c6b" }, { "name": "hop-neutral-icon", @@ -1263,7 +1383,7 @@ }, { "name": "hop-neutral-icon-hover", - "value": "#f8f6f3" + "value": "#ecebe8" }, { "name": "hop-neutral-icon-active", @@ -1427,27 +1547,43 @@ }, { "name": "hop-status-progress-surface", - "value": "#d6e0ff" + "value": "#b9cbff" }, { "name": "hop-status-progress-text", "value": "#152450" }, + { + "name": "hop-status-option6-surface-strong", + "value": "#eac96d" + }, + { + "name": "hop-status-option6-icon", + "value": "#2f250d" + }, + { + "name": "hop-status-option6-surface", + "value": "#f7e694" + }, + { + "name": "hop-status-option6-text", + "value": "#2f250d" + }, { "name": "hop-status-option5-surface-strong", "value": "#d4cbc0" }, { "name": "hop-status-option5-icon", - "value": "#fef6ef" + "value": "#2a2620" }, { "name": "hop-status-option5-surface", - "value": "#594f41" + "value": "#bdb1a3" }, { "name": "hop-status-option5-text", - "value": "#fef6ef" + "value": "#2a2620" }, { "name": "hop-status-option1-surface-strong", @@ -1513,6 +1649,22 @@ "name": "hop-status-option4-text", "value": "#20282a" }, + { + "name": "hop-status-inactive-surface-strong", + "value": "#ccccca" + }, + { + "name": "hop-status-inactive-icon", + "value": "#3c3c3c" + }, + { + "name": "hop-status-inactive-surface", + "value": "#e0dfdd" + }, + { + "name": "hop-status-inactive-text", + "value": "#292929" + }, { "name": "hop-status-caution-surface-strong", "value": "#ff9b3f" diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json index c6e7366e4..a23ca9af9 100644 --- a/apps/docs/datas/tokens.json +++ b/apps/docs/datas/tokens.json @@ -1051,7 +1051,7 @@ }, { "name": "hop-decorative-option8-surface-hover", - "value": "#ffbcb7" + "value": "#ff8e8e" }, { "name": "hop-decorative-option8-surface-strong", @@ -1063,7 +1063,7 @@ }, { "name": "hop-decorative-option8-surface", - "value": "#ffd6d3" + "value": "#ffbcb7" }, { "name": "hop-decorative-option8-text", diff --git a/packages/tokens/src/tokens/semantic/dark/colors.tokens.json b/packages/tokens/src/tokens/semantic/dark/colors.tokens.json index fd6a2ab39..965c6fff0 100644 --- a/packages/tokens/src/tokens/semantic/dark/colors.tokens.json +++ b/packages/tokens/src/tokens/semantic/dark/colors.tokens.json @@ -72,7 +72,7 @@ }, "icon-active": { "$type": "color", - "$value": "{amanita.400}" + "$value": "{amanita.300}" }, "text-active": { "$type": "color", @@ -98,6 +98,10 @@ "$type": "color", "$value": "{amanita.300}" }, + "surface-strong-hover": { + "$type": "color", + "$value": "{amanita.200}" + }, "surface-weak": { "$type": "color", "$value": "{amanita.900}" @@ -130,6 +134,10 @@ "$type": "color", "$value": "{samoyed}" }, + "text-strong-hover": { + "$type": "color", + "$value": "{samoyed}" + }, "icon-strong": { "$type": "color", "$value": "{samoyed}" @@ -168,6 +176,10 @@ "$type": "color", "$value": "{samoyed}" }, + "icon-strong-hover": { + "$type": "color", + "$value": "{sapphire.300}" + }, "icon": { "$type": "color", "$value": "{sapphire.200}" @@ -212,6 +224,14 @@ "$type": "color", "$value": "{sapphire.400}" }, + "surface-strong-hover": { + "$type": "color", + "$value": "{sapphire.200}" + }, + "surface-strong-active": { + "$type": "color", + "$value": "{sapphire.800}" + }, "text": { "$type": "color", "$value": "{sapphire.200}" @@ -224,6 +244,10 @@ "$type": "color", "$value": "{samoyed}" }, + "text-strong-hover": { + "$type": "color", + "$value": "{sapphire.300}" + }, "text-hover": { "$type": "color", "$value": "{sapphire.300}" @@ -235,15 +259,23 @@ }, "decorative": { "option9": { + "border": { + "$type": "color", + "$value": "{rock.400}" + }, "icon": { "$type": "color", "$value": "{samoyed}" }, - "surface": { + "surface-strong": { "$type": "color", "$value": "{rock.800}" }, - "surface-weak": { + "surface-hover": { + "$type": "color", + "$value": "{rock.500}" + }, + "surface": { "$type": "color", "$value": "{rock.400}" }, @@ -257,13 +289,21 @@ } }, "option8": { + "border": { + "$type": "color", + "$value": "{amanita.400}" + }, "icon": { "$type": "color", "$value": "{amanita.900}" }, - "surface-weak": { + "surface-strong": { "$type": "color", - "$value": "{amanita.50}" + "$value": "{amanita.100}" + }, + "surface-hover": { + "$type": "color", + "$value": "{amanita.200}" }, "text-weak": { "$type": "color", @@ -271,7 +311,7 @@ }, "surface": { "$type": "color", - "$value": "{amanita.75}" + "$value": "{amanita.100}" }, "text": { "$type": "color", @@ -279,18 +319,26 @@ } }, "option7": { + "border": { + "$type": "color", + "$value": "{toad.400}" + }, "icon": { "$type": "color", "$value": "{toad.900}" }, - "surface-weak": { + "surface-strong": { "$type": "color", - "$value": "{toad.50}" + "$value": "{toad.75}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{toad.75}" }, + "surface": { + "$type": "color", + "$value": "{toad.50}" + }, "text-weak": { "$type": "color", "$value": "{toad.500}" @@ -309,14 +357,22 @@ "$type": "color", "$value": "{coastal.900}" }, - "surface-weak": { + "surface-strong": { "$type": "color", - "$value": "{coastal.75}" + "$value": "{coastal.100}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{coastal.100}" }, + "surface": { + "$type": "color", + "$value": "{coastal.75}" + }, + "border": { + "$type": "color", + "$value": "{coastal.400}" + }, "icon": { "$type": "color", "$value": "{coastal.900}" @@ -325,12 +381,24 @@ "option6": { "surface-weak": { "$type": "color", - "$value": "{sunken-treasure.50}" + "$value": "{sunken-treasure.25}" + }, + "surface-strong": { + "$type": "color", + "$value": "{sunken-treasure.100}" + }, + "surface-hover": { + "$type": "color", + "$value": "{sunken-treasure.100}" }, "surface": { "$type": "color", "$value": "{sunken-treasure.75}" }, + "border": { + "$type": "color", + "$value": "{sunken-treasure.400}" + }, "icon": { "$type": "color", "$value": "{sunken-treasure.900}" @@ -345,14 +413,22 @@ } }, "option4": { - "surface-weak": { + "surface-strong": { + "$type": "color", + "$value": "{moss.100}" + }, + "surface-hover": { "$type": "color", - "$value": "{moss.50}" + "$value": "{moss.100}" }, "surface": { "$type": "color", "$value": "{moss.75}" }, + "border": { + "$type": "color", + "$value": "{moss.400}" + }, "icon": { "$type": "color", "$value": "{moss.900}" @@ -367,14 +443,30 @@ } }, "option3": { + "surface-strong": { + "$type": "color", + "$value": "{koi.200}" + }, + "surface-weakest": { + "$type": "color", + "$value": "{koi.25}" + }, "surface-weak": { "$type": "color", - "$value": "{koi.100}" + "$value": "{koi.50}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{koi.200}" }, + "surface": { + "$type": "color", + "$value": "{koi.100}" + }, + "border": { + "$type": "color", + "$value": "{koi.400}" + }, "icon": { "$type": "color", "$value": "{koi.900}" @@ -389,14 +481,18 @@ } }, "option2": { - "surface-weak": { + "surface-strong": { "$type": "color", - "$value": "{quetzal.75}" + "$value": "{quetzal.100}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{quetzal.100}" }, + "surface": { + "$type": "color", + "$value": "{quetzal.75}" + }, "text": { "$type": "color", "$value": "{quetzal.900}" @@ -405,24 +501,44 @@ "$type": "color", "$value": "{quetzal.50}" }, + "border": { + "$type": "color", + "$value": "{quetzal.400}" + }, "icon": { "$type": "color", "$value": "{quetzal.900}" } }, "option1": { + "surface-strong": { + "$type": "color", + "$value": "{sapphire.200}" + }, + "surface-weakest": { + "$type": "color", + "$value": "{sapphire.25}" + }, "surface-weak": { "$type": "color", - "$value": "{sapphire.75}" + "$value": "{sapphire.50}" }, - "surface": { + "surface-hover": { "$type": "color", "$value": "{sapphire.200}" }, + "surface": { + "$type": "color", + "$value": "{sapphire.100}" + }, "text-weak": { "$type": "color", "$value": "{sapphire.50}" }, + "border": { + "$type": "color", + "$value": "{sapphire.400}" + }, "icon": { "$type": "color", "$value": "{sapphire.900}" @@ -436,9 +552,9 @@ "neutral": { "text-hover": { "$type": "color", - "$value": "{rock.25}" + "$value": "{rock.50}" }, - "surface-weakest-active": { + "surface-weakest-hover": { "$type": "color", "$value": "{rock.800}" }, @@ -448,7 +564,7 @@ }, "surface-disabled": { "$type": "color", - "$value": "{rock.600}" + "$value": "{rock.700}" }, "surface-active": { "$type": "color", @@ -464,7 +580,7 @@ }, "text-disabled": { "$type": "color", - "$value": "{rock.400}" + "$value": "{rock.500}" }, "text-active": { "$type": "color", @@ -484,7 +600,11 @@ }, "border-disabled": { "$type": "color", - "$value": "{rock.600}" + "$value": "{rock.800}" + }, + "border-strong-hover": { + "$type": "color", + "$value": "{samoyed}" }, "border-strong": { "$type": "color", @@ -500,7 +620,7 @@ }, "icon-disabled": { "$type": "color", - "$value": "{rock.400}" + "$value": "{rock.500}" }, "icon": { "$type": "color", @@ -528,7 +648,7 @@ }, "icon-hover": { "$type": "color", - "$value": "{rock.25}" + "$value": "{rock.50}" }, "icon-active": { "$type": "color", @@ -703,13 +823,31 @@ }, "surface": { "$type": "color", - "$value": "{sapphire.75}" + "$value": "{sapphire.100}" }, "text": { "$type": "color", "$value": "{sapphire.900}" } }, + "option6": { + "surface-strong": { + "$type": "color", + "$value": "{sunken-treasure.100}" + }, + "icon": { + "$type": "color", + "$value": "{sunken-treasure.900}" + }, + "surface": { + "$type": "color", + "$value": "{sunken-treasure.75}" + }, + "text": { + "$type": "color", + "$value": "{sunken-treasure.900}" + } + }, "option5": { "surface-strong": { "$type": "color", @@ -717,15 +855,15 @@ }, "icon": { "$type": "color", - "$value": "{toad.25}" + "$value": "{toad.900}" }, "surface": { "$type": "color", - "$value": "{toad.700}" + "$value": "{toad.200}" }, "text": { "$type": "color", - "$value": "{toad.25}" + "$value": "{toad.900}" } }, "option1": { @@ -800,6 +938,24 @@ "$value": "{fog.900}" } }, + "inactive": { + "surface-strong": { + "$type": "color", + "$value": "{rock.100}" + }, + "icon": { + "$type": "color", + "$value": "{rock.800}" + }, + "surface": { + "$type": "color", + "$value": "{rock.75}" + }, + "text": { + "$type": "color", + "$value": "{rock.900}" + } + }, "caution": { "surface-strong": { "$type": "color", diff --git a/packages/tokens/src/tokens/semantic/light/colors.tokens.json b/packages/tokens/src/tokens/semantic/light/colors.tokens.json index 31ea2c12e..32d16ace0 100644 --- a/packages/tokens/src/tokens/semantic/light/colors.tokens.json +++ b/packages/tokens/src/tokens/semantic/light/colors.tokens.json @@ -299,7 +299,7 @@ }, "surface-hover": { "$type": "color", - "$value": "{amanita.100}" + "$value": "{amanita.200}" }, "surface-strong": { "$type": "color", @@ -311,7 +311,7 @@ }, "surface": { "$type": "color", - "$value": "{amanita.75}" + "$value": "{amanita.100}" }, "text": { "$type": "color",