From 0dce87307f2da09c5906163463fc07301794f6a3 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Sun, 9 Jul 2023 21:23:07 +0200 Subject: [PATCH 01/19] Add M3 Light theme with harcdoded values. --- tokens/$metadata.json | 3 +- tokens/$themes.json | 35 +++- tokens/platform-web.json | 2 +- tokens/theme-m3-light.json | 362 +++++++++++++++++++++++++++++++++++++ 4 files changed, 392 insertions(+), 10 deletions(-) create mode 100644 tokens/theme-m3-light.json diff --git a/tokens/$metadata.json b/tokens/$metadata.json index 07b46d20..2fda4902 100644 --- a/tokens/$metadata.json +++ b/tokens/$metadata.json @@ -12,6 +12,7 @@ "theme-semantics-dark", "theme-semantics-light-hc", "theme-semantics-dark-hc", - "theme-semantics" + "theme-semantics", + "theme-m3-light" ] } \ No newline at end of file diff --git a/tokens/$themes.json b/tokens/$themes.json index e9af5111..6674d3ea 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,7 +3,8 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled" + "cross-platform": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": {} }, @@ -11,7 +12,8 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled" + "platform-android": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -36,7 +38,8 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled" + "platform-ios": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -61,7 +64,8 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled" + "platform-web": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -93,7 +97,8 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled" + "theme-semantics-light": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -467,7 +472,8 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled" + "theme-semantics-dark": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -841,7 +847,8 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled" + "theme-semantics-light-hc": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1215,7 +1222,8 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled" + "theme-semantics-dark-hc": "enabled", + "theme-m3-light": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", @@ -1582,5 +1590,16 @@ "color.bg.canvas.default-level-1": "S:939d26e5073c51a8656a69975c087df7bea3acad,", "color.bg.subtle-secondary-level-0": "S:329a9b7516c81e59ed955e2a8be63af59a7533ef," } + }, + { + "id": "008a55be10669135dc71f916d5f14e02ce12ce22", + "name": "M3 Light", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "theme-light": "source", + "theme-semantics-light": "source", + "theme-semantics": "source", + "theme-m3-light": "enabled" + } } ] \ No newline at end of file diff --git a/tokens/platform-web.json b/tokens/platform-web.json index 3890abba..36ccc977 100644 --- a/tokens/platform-web.json +++ b/tokens/platform-web.json @@ -350,4 +350,4 @@ } } } -} +} \ No newline at end of file diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json new file mode 100644 index 00000000..7e259144 --- /dev/null +++ b/tokens/theme-m3-light.json @@ -0,0 +1,362 @@ +{ + "sys": { + "primary": { + "value": "#1b1d22", + "type": "color" + }, + "on-primary": { + "value": "#ffffff", + "type": "color" + }, + "primary-container": { + "value": "#ffffff", + "type": "color" + }, + "on-primary-container": { + "value": "#1b1d22", + "type": "color" + }, + "secondary": { + "value": "#656d77", + "type": "color" + }, + "on-secondary": { + "value": "#ffffff", + "type": "color" + }, + "secondary-container": { + "value": "#e1e6ec", + "type": "color" + }, + "on-secondary-container": { + "value": "#1b1d22", + "type": "color" + }, + "tertiary-container": { + "value": "#1b1d22", + "type": "color" + }, + "on-tertiary-container": { + "value": "#ffffff", + "type": "color" + }, + "error": { + "value": "#d51928", + "type": "color" + }, + "on-error": { + "value": "#ffffff", + "type": "color", + "description": "color.theme.bg" + }, + "surface": { + "value": "#ffffff", + "type": "color" + }, + "on-surface": { + "value": "#1b1d22", + "type": "color" + }, + "on-surface-variant": { + "value": "#656d77", + "type": "color" + }, + "surface-tint": { + "value": "#595e67", + "type": "color" + }, + "inverse-surface": { + "value": "#2b2d32", + "type": "color" + }, + "inverse-on-surface": { + "value": "#ffffff", + "type": "color" + }, + "inverse-primary": { + "value": "#ffffff", + "type": "color" + }, + "outline": { + "value": "#818a95", + "type": "color" + }, + "outline-variant": { + "value": "#052e611f", + "type": "color" + }, + "surface-container-highest": { + "value": "#eeeff0", + "type": "color" + }, + "surface-container-high": { + "value": "#f0f0f1", + "type": "color" + }, + "surface-container": { + "value": "#f1f2f2", + "type": "color" + }, + "surface-container-low": { + "value": "#f3f4f4", + "type": "color" + } + }, + "state-layers": { + "primary": { + "opacity-0": { + "12": { + "value": "#1b1d221f", + "type": "color" + }, + "16": { + "value": "#1b1d2229", + "type": "color" + }, + "08": { + "value": "#1b1d2214", + "type": "color" + } + } + }, + "on-primary": { + "opacity-0": { + "12": { + "value": "#ffffff1f", + "type": "color" + }, + "08": { + "value": "#ffffff14", + "type": "color" + } + } + }, + "on-primary-container": { + "opacity-0": { + "12": { + "value": "#1b1d221f", + "type": "color" + }, + "08": { + "value": "#1b1d2214", + "type": "color" + } + } + }, + "on-secondary-container": { + "opacity-0": { + "12": { + "value": "#1b1d221f", + "type": "color" + }, + "16": { + "value": "#1b1d2229", + "type": "color" + }, + "08": { + "value": "#1b1d2214", + "type": "color" + } + } + }, + "on-tertiary-container": { + "opacity-0": { + "12": { + "value": "#ffffff1f", + "type": "color" + }, + "08": { + "value": "#ffffff14", + "type": "color" + } + } + }, + "error": { + "opacity-0": { + "12": { + "value": "#d519281f", + "type": "color" + }, + "08": { + "value": "#d5192814", + "type": "color" + } + } + }, + "on-surface": { + "opacity-0": { + "12": { + "value": "#1b1d221f", + "type": "color" + }, + "16": { + "value": "#1b1d2229", + "type": "color" + }, + "08": { + "value": "#1b1d2214", + "type": "color" + } + } + }, + "on-surface-variant": { + "opacity-0": { + "12": { + "value": "#656d771f", + "type": "color" + }, + "08": { + "value": "#656d7714", + "type": "color" + } + } + }, + "inverse-on-surface": { + "opacity-0": { + "12": { + "value": "#ffffff1f", + "type": "color" + }, + "08": { + "value": "#ffffff14", + "type": "color" + } + } + }, + "inverse-primary": { + "opacity-0": { + "12": { + "value": "#ffffff1f", + "type": "color" + }, + "08": { + "value": "#ffffff14", + "type": "color" + } + } + }, + "outline": { + "opacity-0": { + "12": { + "value": "#818a951f", + "type": "color" + } + } + }, + "surface-variant": { + "opacity-0": { + "12": { + "value": "#f0f2f51f", + "type": "color" + } + } + } + }, + "elevation": { + "1": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 3, + "spread": 1 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 2, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "2": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 6, + "spread": 2 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 2, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "3": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 4, + "blur": 8, + "spread": 3 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 3, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "4": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 6, + "blur": 10, + "spread": 4 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 3, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "5": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 8, + "blur": 12, + "spread": 6 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 4, + "blur": 4, + "spread": 0 + } + ], + "type": "boxShadow" + } + } +} \ No newline at end of file From 2f5bf0bfb4625933f37e2f097c519cc0390d1ab6 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Sun, 9 Jul 2023 21:26:01 +0200 Subject: [PATCH 02/19] Tokens Studio auto-generated theme updates. --- tokens/$themes.json | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/tokens/$themes.json b/tokens/$themes.json index 6674d3ea..a2840732 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,8 +3,7 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled", - "theme-m3-light": "disabled" + "cross-platform": "enabled" }, "$figmaStyleReferences": {} }, @@ -12,8 +11,7 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled", - "theme-m3-light": "disabled" + "platform-android": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -38,8 +36,7 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled", - "theme-m3-light": "disabled" + "platform-ios": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -64,8 +61,7 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled", - "theme-m3-light": "disabled" + "platform-web": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -97,8 +93,7 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled", - "theme-m3-light": "disabled" + "theme-semantics-light": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -472,8 +467,7 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled", - "theme-m3-light": "disabled" + "theme-semantics-dark": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -847,8 +841,7 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled", - "theme-m3-light": "disabled" + "theme-semantics-light-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1222,8 +1215,7 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled", - "theme-m3-light": "disabled" + "theme-semantics-dark-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", From d3f7cf88dd68faec3178fa157e2f414f20596d3f Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Sun, 9 Jul 2023 21:31:09 +0200 Subject: [PATCH 03/19] Add M3 Dark theme with harcdoded values --- tokens/$metadata.json | 3 +- tokens/$themes.json | 38 +++- tokens/theme-m3-dark.json | 365 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 396 insertions(+), 10 deletions(-) create mode 100644 tokens/theme-m3-dark.json diff --git a/tokens/$metadata.json b/tokens/$metadata.json index 2fda4902..5ae704bc 100644 --- a/tokens/$metadata.json +++ b/tokens/$metadata.json @@ -13,6 +13,7 @@ "theme-semantics-light-hc", "theme-semantics-dark-hc", "theme-semantics", - "theme-m3-light" + "theme-m3-light", + "theme-m3-dark" ] } \ No newline at end of file diff --git a/tokens/$themes.json b/tokens/$themes.json index a2840732..ee1ce677 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,7 +3,8 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled" + "cross-platform": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": {} }, @@ -11,7 +12,8 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled" + "platform-android": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -36,7 +38,8 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled" + "platform-ios": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -61,7 +64,8 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled" + "platform-web": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -93,7 +97,8 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled" + "theme-semantics-light": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -467,7 +472,8 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled" + "theme-semantics-dark": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -841,7 +847,8 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled" + "theme-semantics-light-hc": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1215,7 +1222,8 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled" + "theme-semantics-dark-hc": "enabled", + "theme-m3-dark": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", @@ -1591,7 +1599,19 @@ "theme-light": "source", "theme-semantics-light": "source", "theme-semantics": "source", - "theme-m3-light": "enabled" + "theme-m3-light": "enabled", + "theme-m3-dark": "disabled" + } + }, + { + "id": "606e2c16d27574a9cc71921cebd6fc0377bf6700", + "name": "M3 Dark", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "theme-light": "source", + "theme-semantics-light": "source", + "theme-semantics": "source", + "theme-m3-dark": "enabled" } } ] \ No newline at end of file diff --git a/tokens/theme-m3-dark.json b/tokens/theme-m3-dark.json new file mode 100644 index 00000000..6c6f06cc --- /dev/null +++ b/tokens/theme-m3-dark.json @@ -0,0 +1,365 @@ +{ + "sys": { + "on-primary": { + "value": "#101317", + "type": "color" + }, + "primary-container": { + "value": "#101317", + "type": "color" + }, + "on-primary-container": { + "value": "#ebeef2", + "type": "color" + }, + "secondary": { + "value": "#808994", + "type": "color" + }, + "on-secondary": { + "value": "#101317", + "type": "color" + }, + "secondary-container": { + "value": "#26282d", + "type": "color" + }, + "primary": { + "value": "#ebeef2", + "type": "color" + }, + "on-secondary-container": { + "value": "#ebeef2", + "type": "color" + }, + "tertiary-container": { + "value": "#ebeef2", + "type": "color" + }, + "on-tertiary-container": { + "value": "#101317", + "type": "color" + }, + "error": { + "value": "#fd3e3c", + "type": "color" + }, + "on-error": { + "value": "#101317", + "type": "color" + }, + "surface": { + "value": "#101317", + "type": "color" + }, + "on-surface": { + "value": "#ebeef2", + "type": "color" + }, + "on-surface-variant": { + "value": "#808994", + "type": "color" + }, + "surface-tint": { + "value": "#9199a4", + "type": "color" + }, + "inverse-surface": { + "value": "#d9dee4", + "type": "color" + }, + "inverse-on-surface": { + "value": "#101317", + "type": "color" + }, + "inverse-primary": { + "value": "#101317", + "type": "color" + }, + "outline": { + "value": "#656c76", + "type": "color" + }, + "outline-variant": { + "value": "#ede7f41a", + "type": "color" + }, + "surface-container-highest": { + "value": "#1c2026", + "type": "color" + }, + "surface-container-high": { + "value": "#1b1f25", + "type": "color" + }, + "surface-container": { + "value": "#1a1e22", + "type": "color" + }, + "surface-container-low": { + "value": "#181c20", + "type": "color" + } + }, + "state-layers": { + "primary": { + "opacity-0": { + "12": { + "value": "#ebeef21f", + "type": "color" + }, + "16": { + "value": "#ebeef229", + "type": "color" + }, + "08": { + "value": "#ebeef214", + "type": "color" + } + } + }, + "on-primary": { + "opacity-0": { + "12": { + "value": "#1013171f", + "type": "color" + }, + "08": { + "value": "#10131714", + "type": "color" + } + } + }, + "on-primary-container": { + "opacity-0": { + "12": { + "value": "#ebeef21f", + "type": "color" + }, + "08": { + "value": "#ebeef214", + "type": "color" + } + } + }, + "on-secondary-container": { + "opacity-0": { + "12": { + "value": "#ebeef21f", + "type": "color" + }, + "16": { + "value": "#ebeef229", + "type": "color" + }, + "08": { + "value": "#ebeef214", + "type": "color" + } + } + }, + "on-tertiary-container": { + "opacity-0": { + "12": { + "value": "#1013171f", + "type": "color" + }, + "08": { + "value": "#10131714", + "type": "color" + } + } + }, + "error": { + "opacity-0": { + "12": { + "value": "#fd3e3c1f", + "type": "color" + }, + "08": { + "value": "#fd3e3c14", + "type": "color" + } + } + }, + "on-surface": { + "opacity-0": { + "12": { + "value": "#ebeef21f", + "type": "color" + }, + "16": { + "value": "#ebeef229", + "type": "color" + }, + "08": { + "value": "#ebeef214", + "type": "color" + } + } + }, + "on-surface-variant": { + "opacity-0": { + "12": { + "value": "#8089941f", + "type": "color" + }, + "16": { + "value": "#80899429", + "type": "color" + }, + "08": { + "value": "#80899414", + "type": "color" + } + } + }, + "inverse-on-surface": { + "opacity-0": { + "12": { + "value": "#1013171f", + "type": "color" + }, + "08": { + "value": "#10131714", + "type": "color" + } + } + }, + "inverse-primary": { + "opacity-0": { + "12": { + "value": "#1013171f", + "type": "color" + }, + "08": { + "value": "#10131714", + "type": "color" + } + } + }, + "outline": { + "opacity-0": { + "12": { + "value": "#656c761f", + "type": "color" + } + } + }, + "surface-variant": { + "opacity-0": { + "12": { + "value": "#1d1f241f", + "type": "color" + } + } + } + }, + "elevation": { + "1": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 3, + "spread": 1 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 2, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "2": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 6, + "spread": 2 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 2, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "3": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 4, + "blur": 8, + "spread": 3 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 1, + "blur": 3, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "4": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 6, + "blur": 10, + "spread": 4 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 2, + "blur": 3, + "spread": 0 + } + ], + "type": "boxShadow" + }, + "5": { + "value": [ + { + "color": "#00000026", + "type": "dropShadow", + "x": 0, + "y": 8, + "blur": 12, + "spread": 6 + }, + { + "color": "#0000004d", + "type": "dropShadow", + "x": 0, + "y": 4, + "blur": 4, + "spread": 0 + } + ], + "type": "boxShadow" + } + } +} \ No newline at end of file From d844a01bd7c63fe3f85863a6817233b6302cd968 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Sun, 9 Jul 2023 21:32:03 +0200 Subject: [PATCH 04/19] Tokens Studio auto-generated theme updates. --- tokens/$themes.json | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/tokens/$themes.json b/tokens/$themes.json index ee1ce677..7ea7f9e5 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,8 +3,7 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled", - "theme-m3-dark": "disabled" + "cross-platform": "enabled" }, "$figmaStyleReferences": {} }, @@ -12,8 +11,7 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled", - "theme-m3-dark": "disabled" + "platform-android": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -38,8 +36,7 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled", - "theme-m3-dark": "disabled" + "platform-ios": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -64,8 +61,7 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled", - "theme-m3-dark": "disabled" + "platform-web": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -97,8 +93,7 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled", - "theme-m3-dark": "disabled" + "theme-semantics-light": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -472,8 +467,7 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled", - "theme-m3-dark": "disabled" + "theme-semantics-dark": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -847,8 +841,7 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled", - "theme-m3-dark": "disabled" + "theme-semantics-light-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1222,8 +1215,7 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled", - "theme-m3-dark": "disabled" + "theme-semantics-dark-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", @@ -1599,8 +1591,7 @@ "theme-light": "source", "theme-semantics-light": "source", "theme-semantics": "source", - "theme-m3-light": "enabled", - "theme-m3-dark": "disabled" + "theme-m3-light": "enabled" } }, { From d7910cd4c5d98463e7c54e27754195f320d5dd3a Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Sun, 9 Jul 2023 21:34:44 +0200 Subject: [PATCH 05/19] Fix M3 Dark token set configuration --- tokens/$themes.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tokens/$themes.json b/tokens/$themes.json index 7ea7f9e5..6c7d2d5e 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -1599,10 +1599,10 @@ "name": "M3 Dark", "$figmaStyleReferences": {}, "selectedTokenSets": { - "theme-light": "source", - "theme-semantics-light": "source", "theme-semantics": "source", - "theme-m3-dark": "enabled" + "theme-m3-dark": "enabled", + "theme-semantics-dark": "source", + "theme-dark": "source" } } ] \ No newline at end of file From 60bcd7a641ff2ba0335a7b707afd497bb757d8af Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 00:32:44 +0200 Subject: [PATCH 06/19] Fix M3 Dark state layer token names to make them compliant with Tokens Studio schema --- tokens/theme-m3-dark.json | 208 +++++++++++++++++--------------------- 1 file changed, 92 insertions(+), 116 deletions(-) diff --git a/tokens/theme-m3-dark.json b/tokens/theme-m3-dark.json index 6c6f06cc..8d61476a 100644 --- a/tokens/theme-m3-dark.json +++ b/tokens/theme-m3-dark.json @@ -103,155 +103,131 @@ }, "state-layers": { "primary": { - "opacity-0": { - "12": { - "value": "#ebeef21f", - "type": "color" - }, - "16": { - "value": "#ebeef229", - "type": "color" - }, - "08": { - "value": "#ebeef214", - "type": "color" - } + "opacity-008": { + "value": "#ebeef214", + "type": "color" + }, + "opacity-012": { + "value": "#ebeef21f", + "type": "color" + }, + "opacity-016": { + "value": "#ebeef229", + "type": "color" } }, "on-primary": { - "opacity-0": { - "12": { - "value": "#1013171f", - "type": "color" - }, - "08": { - "value": "#10131714", - "type": "color" - } + "opacity-008": { + "value": "#10131714", + "type": "color" + }, + "opacity-012": { + "value": "#1013171f", + "type": "color" } }, "on-primary-container": { - "opacity-0": { - "12": { - "value": "#ebeef21f", - "type": "color" - }, - "08": { - "value": "#ebeef214", - "type": "color" - } + "opacity-008": { + "value": "#ebeef214", + "type": "color" + }, + "opacity-012": { + "value": "#ebeef21f", + "type": "color" } }, "on-secondary-container": { - "opacity-0": { - "12": { - "value": "#ebeef21f", - "type": "color" - }, - "16": { - "value": "#ebeef229", - "type": "color" - }, - "08": { - "value": "#ebeef214", - "type": "color" - } + "opacity-008": { + "value": "#ebeef214", + "type": "color" + }, + "opacity-012": { + "value": "#ebeef21f", + "type": "color" + }, + "opacity-016": { + "value": "#ebeef229", + "type": "color" } }, "on-tertiary-container": { - "opacity-0": { - "12": { - "value": "#1013171f", - "type": "color" - }, - "08": { - "value": "#10131714", - "type": "color" - } + "opacity-008": { + "value": "#10131714", + "type": "color" + }, + "opacity-012": { + "value": "#1013171f", + "type": "color" } }, "error": { - "opacity-0": { - "12": { - "value": "#fd3e3c1f", - "type": "color" - }, - "08": { - "value": "#fd3e3c14", - "type": "color" - } + "opacity-008": { + "value": "#fd3e3c14", + "type": "color" + }, + "opacity-012": { + "value": "#fd3e3c1f", + "type": "color" } }, "on-surface": { - "opacity-0": { - "12": { - "value": "#ebeef21f", - "type": "color" - }, - "16": { - "value": "#ebeef229", - "type": "color" - }, - "08": { - "value": "#ebeef214", - "type": "color" - } + "opacity-008": { + "value": "#ebeef214", + "type": "color" + }, + "opacity-012": { + "value": "#ebeef21f", + "type": "color" + }, + "opacity-016": { + "value": "#ebeef229", + "type": "color" } }, "on-surface-variant": { - "opacity-0": { - "12": { - "value": "#8089941f", - "type": "color" - }, - "16": { - "value": "#80899429", - "type": "color" - }, - "08": { - "value": "#80899414", - "type": "color" - } + "opacity-008": { + "value": "#80899414", + "type": "color" + }, + "opacity-012": { + "value": "#8089941f", + "type": "color" + }, + "opacity-016": { + "value": "#80899429", + "type": "color" } }, "inverse-on-surface": { - "opacity-0": { - "12": { - "value": "#1013171f", - "type": "color" - }, - "08": { - "value": "#10131714", - "type": "color" - } + "opacity-008": { + "value": "#10131714", + "type": "color" + }, + "opacity-012": { + "value": "#1013171f", + "type": "color" } }, "inverse-primary": { - "opacity-0": { - "12": { - "value": "#1013171f", - "type": "color" - }, - "08": { - "value": "#10131714", - "type": "color" - } + "opacity-008": { + "value": "#10131714", + "type": "color" + }, + "opacity-012": { + "value": "#1013171f", + "type": "color" } }, "outline": { - "opacity-0": { - "12": { - "value": "#656c761f", - "type": "color" - } + "opacity-012": { + "value": "#656c761f", + "type": "color" } }, "surface-variant": { - "opacity-0": { - "12": { - "value": "#1d1f241f", - "type": "color" - } + "opacity-012": { + "value": "#1d1f241f", + "type": "color" } } }, From cc2d3828911bb927acd1b55ae0ef2dc43bd99899 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 00:59:18 +0200 Subject: [PATCH 07/19] Fix M3 Light state layer token names to make them compliant with Token Studio schema --- tokens/theme-m3-light.json | 200 ++++++++++++++++--------------------- 1 file changed, 88 insertions(+), 112 deletions(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index 7e259144..b557ef55 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -104,151 +104,127 @@ }, "state-layers": { "primary": { - "opacity-0": { - "12": { - "value": "#1b1d221f", - "type": "color" - }, - "16": { - "value": "#1b1d2229", - "type": "color" - }, - "08": { - "value": "#1b1d2214", - "type": "color" - } + "opacity-008": { + "value": "#1b1d2214", + "type": "color" + }, + "opacity-012": { + "value": "#1b1d221f", + "type": "color" + }, + "opacity-016": { + "value": "#1b1d2229", + "type": "color" } }, "on-primary": { - "opacity-0": { - "12": { - "value": "#ffffff1f", - "type": "color" - }, - "08": { - "value": "#ffffff14", - "type": "color" - } + "opacity-008": { + "value": "#ffffff14", + "type": "color" + }, + "opacity-012": { + "value": "#ffffff1f", + "type": "color" } }, "on-primary-container": { - "opacity-0": { - "12": { - "value": "#1b1d221f", - "type": "color" - }, - "08": { - "value": "#1b1d2214", - "type": "color" - } + "opacity-008": { + "value": "#1b1d2214", + "type": "color" + }, + "opacity-012": { + "value": "#1b1d221f", + "type": "color" } }, "on-secondary-container": { - "opacity-0": { - "12": { - "value": "#1b1d221f", - "type": "color" - }, - "16": { - "value": "#1b1d2229", - "type": "color" - }, - "08": { - "value": "#1b1d2214", - "type": "color" - } + "opacity-008": { + "value": "#1b1d2214", + "type": "color" + }, + "opacity-012": { + "value": "#1b1d221f", + "type": "color" + }, + "opacity-016": { + "value": "#1b1d2229", + "type": "color" } }, "on-tertiary-container": { - "opacity-0": { - "12": { - "value": "#ffffff1f", - "type": "color" - }, - "08": { - "value": "#ffffff14", - "type": "color" - } + "opacity-008": { + "value": "#ffffff14", + "type": "color" + }, + "opacity-012": { + "value": "#ffffff1f", + "type": "color" } }, "error": { - "opacity-0": { - "12": { - "value": "#d519281f", - "type": "color" - }, - "08": { - "value": "#d5192814", - "type": "color" - } + "opacity-008": { + "value": "#d5192814", + "type": "color" + }, + "opacity-012": { + "value": "#d519281f", + "type": "color" } }, "on-surface": { - "opacity-0": { - "12": { - "value": "#1b1d221f", - "type": "color" - }, - "16": { - "value": "#1b1d2229", - "type": "color" - }, - "08": { - "value": "#1b1d2214", - "type": "color" - } + "opacity-008": { + "value": "#1b1d2214", + "type": "color" + }, + "opacity-012": { + "value": "#1b1d221f", + "type": "color" + }, + "opacity-016": { + "value": "#1b1d2229", + "type": "color" } }, "on-surface-variant": { - "opacity-0": { - "12": { - "value": "#656d771f", - "type": "color" - }, - "08": { - "value": "#656d7714", - "type": "color" - } + "opacity-008": { + "value": "#656d7714", + "type": "color" + }, + "opacity-012": { + "value": "#656d771f", + "type": "color" } }, "inverse-on-surface": { - "opacity-0": { - "12": { - "value": "#ffffff1f", - "type": "color" - }, - "08": { - "value": "#ffffff14", - "type": "color" - } + "opacity-008": { + "value": "#ffffff14", + "type": "color" + }, + "opacity-012": { + "value": "#ffffff1f", + "type": "color" } }, "inverse-primary": { - "opacity-0": { - "12": { - "value": "#ffffff1f", - "type": "color" - }, - "08": { - "value": "#ffffff14", - "type": "color" - } + "opacity-008": { + "value": "#ffffff14", + "type": "color" + }, + "opacity-012": { + "value": "#ffffff1f", + "type": "color" } }, "outline": { - "opacity-0": { - "12": { - "value": "#818a951f", - "type": "color" - } + "opacity-012": { + "value": "#818a951f", + "type": "color" } }, "surface-variant": { - "opacity-0": { - "12": { - "value": "#f0f2f51f", - "type": "color" - } + "opacity-012": { + "value": "#f0f2f51f", + "type": "color" } } }, From 11e9b879a646b3406cc0d4f1d9ffe23dd4f9f3bb Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 14:23:15 +0200 Subject: [PATCH 08/19] (WIP) Map M3 Light to Compound semantic tokens. --- tokens/theme-m3-light.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index b557ef55..7b25b881 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -1,19 +1,19 @@ { "sys": { "primary": { - "value": "#1b1d22", + "value": "{color.bg.action.primary.rest}", "type": "color" }, "on-primary": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color" }, "primary-container": { - "value": "#ffffff", + "value": "{color.bg.canvas.default}", "type": "color" }, "on-primary-container": { - "value": "#1b1d22", + "value": "{color.text.primary}", "type": "color" }, "secondary": { From 9a6aef4ad6af83fb2a73628ba24dc334aece5edf Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 18:15:28 +0200 Subject: [PATCH 09/19] Map semantic tokens for M3 Light "sys" tokens. --- tokens/theme-m3-light.json | 46 +++++++++++++++++++++----------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index 7b25b881..22c4420b 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -17,89 +17,93 @@ "type": "color" }, "secondary": { - "value": "#656d77", + "value": "{color.text.secondary}", "type": "color" }, "on-secondary": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color" }, "secondary-container": { - "value": "#e1e6ec", + "value": "{color.bg.subtle-primary}", "type": "color" }, "on-secondary-container": { - "value": "#1b1d22", + "value": "{color.text.primary}", "type": "color" }, "tertiary-container": { - "value": "#1b1d22", + "value": "{color.bg.action.primary.rest}", "type": "color" }, "on-tertiary-container": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color" }, "error": { - "value": "#d51928", + "value": "{color.text.critical.primary}", "type": "color" }, "on-error": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color", "description": "color.theme.bg" }, "surface": { - "value": "#ffffff", + "value": "{color.bg.canvas.default}", "type": "color" }, "on-surface": { - "value": "#1b1d22", + "value": "{color.text.primary}", "type": "color" }, "on-surface-variant": { - "value": "#656d77", + "value": "{color.text.secondary}", "type": "color" }, "surface-tint": { - "value": "#595e67", + "value": "{color.gray.1000}", "type": "color" }, "inverse-surface": { - "value": "#2b2d32", + "value": "{color.gray.1300}", "type": "color" }, "inverse-on-surface": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color" }, "inverse-primary": { - "value": "#ffffff", + "value": "{color.text.on-solid.primary}", "type": "color" }, "outline": { - "value": "#818a95", + "value": "{color.border.interactive.primary}", "type": "color" }, "outline-variant": { - "value": "#052e611f", + "value": "{color.alpha.gray.400}", "type": "color" }, "surface-container-highest": { "value": "#eeeff0", - "type": "color" + "type": "color", + "description": "Autogenerated by M3." }, "surface-container-high": { "value": "#f0f0f1", - "type": "color" + "type": "color", + "description": "Autogenerated by M3." }, "surface-container": { "value": "#f1f2f2", - "type": "color" + "type": "color", + "description": "Autogenerated by M3." }, "surface-container-low": { "value": "#f3f4f4", - "type": "color" + "type": "color", + "description": "Autogenerated by M3." } }, "state-layers": { From 37cb38e4460fd5faf2c73c0c9c3cc9efdd236bab Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 18:53:46 +0200 Subject: [PATCH 10/19] Map semantic tokens for M3 Light "state-layers" tokens. --- tokens/theme-m3-light.json | 315 +++++++++++++++++++++++++++++++------ 1 file changed, 266 insertions(+), 49 deletions(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index 22c4420b..c675b6ef 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -63,7 +63,8 @@ }, "surface-tint": { "value": "{color.gray.1000}", - "type": "color" + "type": "color", + "description": "Not consumed directly in components but is used to calculate the color of surface layers." }, "inverse-surface": { "value": "{color.gray.1300}", @@ -109,120 +110,336 @@ "state-layers": { "primary": { "opacity-008": { - "value": "#1b1d2214", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1b1d221f", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#1b1d2229", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-primary": { "opacity-008": { - "value": "#ffffff14", - "type": "color" + "value": "{sys.on-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ffffff1f", - "type": "color" + "value": "{sys.on-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-primary-container": { "opacity-008": { - "value": "#1b1d2214", - "type": "color" + "value": "{sys.on-primary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1b1d221f", - "type": "color" + "value": "{sys.on-primary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-secondary-container": { "opacity-008": { - "value": "#1b1d2214", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1b1d221f", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#1b1d2229", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-tertiary-container": { "opacity-008": { - "value": "#ffffff14", - "type": "color" + "value": "{sys.on-tertiary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ffffff1f", - "type": "color" + "value": "{sys.on-tertiary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "error": { "opacity-008": { - "value": "#d5192814", - "type": "color" + "value": "{sys.error}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#d519281f", - "type": "color" + "value": "{sys.error}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-surface": { "opacity-008": { - "value": "#1b1d2214", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1b1d221f", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#1b1d2229", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-surface-variant": { "opacity-008": { - "value": "#656d7714", - "type": "color" + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#656d771f", - "type": "color" + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "inverse-on-surface": { "opacity-008": { - "value": "#ffffff14", - "type": "color" + "value": "{sys.inverse-on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ffffff1f", - "type": "color" + "value": "{sys.inverse-on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "inverse-primary": { "opacity-008": { - "value": "#ffffff14", - "type": "color" + "value": "{sys.inverse-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ffffff1f", - "type": "color" + "value": "{sys.inverse-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "outline": { "opacity-012": { - "value": "#818a951f", - "type": "color" + "value": "{sys.outline}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "surface-variant": { From f09ddb300afbd9198476ca24020a8ac2db429685 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 19:10:53 +0200 Subject: [PATCH 11/19] Add M3 Light ColorScheme tokens not found in official Figma kit components. --- tokens/theme-m3-light.json | 42 +++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index c675b6ef..203e0cc3 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -105,6 +105,46 @@ "value": "#f3f4f4", "type": "color", "description": "Autogenerated by M3." + }, + "tertiary": { + "value": "{color.text.secondary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-tertiary": { + "value": "{color.text.on-solid.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "error-container": { + "value": "{color.red.400}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-error-container": { + "value": "{color.text.critical.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "background": { + "value": "{color.bg.canvas.default}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-background": { + "value": "{color.text.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "surface-variant": { + "value": "{color.bg.subtle-secondary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "scrim": { + "value": "{color.gray.1400}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." } }, "state-layers": { @@ -444,7 +484,7 @@ }, "surface-variant": { "opacity-012": { - "value": "#f0f2f51f", + "value": "{sys.surface-variant}", "type": "color" } } From b86b38c3f2d9087e714cd26bd92e342d98067185 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 19:40:35 +0200 Subject: [PATCH 12/19] Map M3 Dark to Compound semantic tokens. --- tokens/theme-m3-dark.json | 443 ++++++++++++++++++++++++++++++-------- 1 file changed, 355 insertions(+), 88 deletions(-) diff --git a/tokens/theme-m3-dark.json b/tokens/theme-m3-dark.json index 8d61476a..00777d18 100644 --- a/tokens/theme-m3-dark.json +++ b/tokens/theme-m3-dark.json @@ -1,233 +1,500 @@ { "sys": { + "primary": { + "value": "{color.bg.action.primary.rest}", + "type": "color" + }, "on-primary": { - "value": "#101317", + "value": "{color.text.on-solid.primary}", "type": "color" }, "primary-container": { - "value": "#101317", + "value": "{color.bg.canvas.default}", "type": "color" }, "on-primary-container": { - "value": "#ebeef2", + "value": "{color.text.primary}", "type": "color" }, "secondary": { - "value": "#808994", + "value": "{color.text.secondary}", "type": "color" }, "on-secondary": { - "value": "#101317", + "value": "{color.text.on-solid.primary}", "type": "color" }, "secondary-container": { - "value": "#26282d", - "type": "color" - }, - "primary": { - "value": "#ebeef2", + "value": "{color.bg.subtle-primary}", "type": "color" }, "on-secondary-container": { - "value": "#ebeef2", + "value": "{color.text.primary}", "type": "color" }, "tertiary-container": { - "value": "#ebeef2", + "value": "{color.bg.action.primary.rest}", "type": "color" }, "on-tertiary-container": { - "value": "#101317", + "value": "{color.text.on-solid.primary}", "type": "color" }, "error": { - "value": "#fd3e3c", + "value": "{color.text.critical.primary}", "type": "color" }, "on-error": { - "value": "#101317", - "type": "color" + "value": "{color.text.on-solid.primary}", + "type": "color", + "description": "color.theme.bg" }, "surface": { - "value": "#101317", + "value": "{color.bg.canvas.default}", "type": "color" }, "on-surface": { - "value": "#ebeef2", + "value": "{color.text.primary}", "type": "color" }, "on-surface-variant": { - "value": "#808994", + "value": "{color.text.secondary}", "type": "color" }, "surface-tint": { - "value": "#9199a4", - "type": "color" + "value": "{color.gray.1000}", + "type": "color", + "description": "Not consumed directly in components but is used to calculate the color of surface layers." }, "inverse-surface": { - "value": "#d9dee4", + "value": "{color.gray.1300}", "type": "color" }, "inverse-on-surface": { - "value": "#101317", + "value": "{color.text.on-solid.primary}", "type": "color" }, "inverse-primary": { - "value": "#101317", + "value": "{color.text.on-solid.primary}", "type": "color" }, "outline": { - "value": "#656c76", + "value": "{color.border.interactive.primary}", "type": "color" }, "outline-variant": { - "value": "#ede7f41a", + "value": "{color.alpha.gray.400}", "type": "color" }, "surface-container-highest": { - "value": "#1c2026", - "type": "color" + "value": "#eeeff0", + "type": "color", + "description": "Autogenerated by M3." }, "surface-container-high": { - "value": "#1b1f25", - "type": "color" + "value": "#f0f0f1", + "type": "color", + "description": "Autogenerated by M3." }, "surface-container": { - "value": "#1a1e22", - "type": "color" + "value": "#f1f2f2", + "type": "color", + "description": "Autogenerated by M3." }, "surface-container-low": { - "value": "#181c20", - "type": "color" + "value": "#f3f4f4", + "type": "color", + "description": "Autogenerated by M3." + }, + "tertiary": { + "value": "{color.text.secondary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-tertiary": { + "value": "{color.text.on-solid.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "error-container": { + "value": "{color.red.400}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-error-container": { + "value": "{color.text.critical.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "background": { + "value": "{color.bg.canvas.default}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "on-background": { + "value": "{color.text.primary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "surface-variant": { + "value": "{color.bg.subtle-secondary}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." + }, + "scrim": { + "value": "{color.gray.300}", + "type": "color", + "description": "ColorScheme token not found in official Figma kit components." } }, "state-layers": { "primary": { "opacity-008": { - "value": "#ebeef214", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ebeef21f", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#ebeef229", - "type": "color" + "value": "{sys.primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-primary": { "opacity-008": { - "value": "#10131714", - "type": "color" + "value": "{sys.on-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1013171f", - "type": "color" + "value": "{sys.on-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-primary-container": { "opacity-008": { - "value": "#ebeef214", - "type": "color" + "value": "{sys.on-primary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ebeef21f", - "type": "color" + "value": "{sys.on-primary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-secondary-container": { "opacity-008": { - "value": "#ebeef214", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ebeef21f", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#ebeef229", - "type": "color" + "value": "{sys.on-secondary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-tertiary-container": { "opacity-008": { - "value": "#10131714", - "type": "color" + "value": "{sys.on-tertiary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1013171f", - "type": "color" + "value": "{sys.on-tertiary-container}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "error": { "opacity-008": { - "value": "#fd3e3c14", - "type": "color" + "value": "{sys.error}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#fd3e3c1f", - "type": "color" + "value": "{sys.error}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "on-surface": { "opacity-008": { - "value": "#ebeef214", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#ebeef21f", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } }, "opacity-016": { - "value": "#ebeef229", - "type": "color" + "value": "{sys.on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "on-surface-variant": { "opacity-008": { - "value": "#80899414", - "type": "color" + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#8089941f", - "type": "color" - }, - "opacity-016": { - "value": "#80899429", - "type": "color" + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "inverse-on-surface": { "opacity-008": { - "value": "#10131714", - "type": "color" + "value": "{sys.inverse-on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1013171f", - "type": "color" + "value": "{sys.inverse-on-surface}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "inverse-primary": { "opacity-008": { - "value": "#10131714", - "type": "color" + "value": "{sys.inverse-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "hsl" + } + } + } }, "opacity-012": { - "value": "#1013171f", - "type": "color" + "value": "{sys.inverse-primary}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "outline": { "opacity-012": { - "value": "#656c761f", - "type": "color" + "value": "{sys.outline}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } }, "surface-variant": { "opacity-012": { - "value": "#1d1f241f", - "type": "color" + "value": "{sys.surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } } }, From c074b9a5d7adaa2e73ca7fa42d456a2cc25b0487 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 10 Jul 2023 19:42:56 +0200 Subject: [PATCH 13/19] Add missing alpha value to surface-variant state layer. --- tokens/theme-m3-light.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index 203e0cc3..60b64538 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -485,7 +485,16 @@ "surface-variant": { "opacity-012": { "value": "{sys.surface-variant}", - "type": "color" + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.12", + "space": "hsl" + } + } + } } } }, From 75951372c107b119c7b51a3082e6b6235fd23055 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Tue, 11 Jul 2023 00:51:26 +0200 Subject: [PATCH 14/19] Add third state layer for on-surface-variant --- tokens/theme-m3-dark.json | 13 +++++++++++++ tokens/theme-m3-light.json | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/tokens/theme-m3-dark.json b/tokens/theme-m3-dark.json index 00777d18..ffe5e90c 100644 --- a/tokens/theme-m3-dark.json +++ b/tokens/theme-m3-dark.json @@ -409,6 +409,19 @@ } } } + }, + "opacity-016": { + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "inverse-on-surface": { diff --git a/tokens/theme-m3-light.json b/tokens/theme-m3-light.json index 60b64538..715628b2 100644 --- a/tokens/theme-m3-light.json +++ b/tokens/theme-m3-light.json @@ -409,6 +409,19 @@ } } } + }, + "opacity-016": { + "value": "{sys.on-surface-variant}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.16", + "space": "hsl" + } + } + } } }, "inverse-on-surface": { From 58719c5ce17c326c65bba995739a0db5ac31c30c Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Tue, 11 Jul 2023 08:45:05 +0200 Subject: [PATCH 15/19] (WIP) Add M3 Typography token set. --- tokens/$metadata.json | 3 +- tokens/$themes.json | 39 ++- tokens/theme-m3-typography.json | 422 ++++++++++++++++++++++++++++++++ 3 files changed, 453 insertions(+), 11 deletions(-) create mode 100644 tokens/theme-m3-typography.json diff --git a/tokens/$metadata.json b/tokens/$metadata.json index 5ae704bc..0cf92c7b 100644 --- a/tokens/$metadata.json +++ b/tokens/$metadata.json @@ -14,6 +14,7 @@ "theme-semantics-dark-hc", "theme-semantics", "theme-m3-light", - "theme-m3-dark" + "theme-m3-dark", + "theme-m3-typography" ] } \ No newline at end of file diff --git a/tokens/$themes.json b/tokens/$themes.json index 6c7d2d5e..cbbc54be 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,7 +3,8 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled" + "cross-platform": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": {} }, @@ -11,7 +12,8 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled" + "platform-android": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -36,7 +38,8 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled" + "platform-ios": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -61,7 +64,8 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled" + "platform-web": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -93,7 +97,8 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled" + "theme-semantics-light": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -467,7 +472,8 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled" + "theme-semantics-dark": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -841,7 +847,8 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled" + "theme-semantics-light-hc": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1215,7 +1222,8 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled" + "theme-semantics-dark-hc": "enabled", + "theme-m3-typography": "disabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", @@ -1591,7 +1599,8 @@ "theme-light": "source", "theme-semantics-light": "source", "theme-semantics": "source", - "theme-m3-light": "enabled" + "theme-m3-light": "enabled", + "theme-m3-typography": "disabled" } }, { @@ -1602,7 +1611,17 @@ "theme-semantics": "source", "theme-m3-dark": "enabled", "theme-semantics-dark": "source", - "theme-dark": "source" + "theme-dark": "source", + "theme-m3-typography": "disabled" + } + }, + { + "id": "a1c823ad84d9d8db0ec95a791e1c0f7033e10f70", + "name": "M3 Typography", + "$figmaStyleReferences": {}, + "selectedTokenSets": { + "platform-android": "source", + "theme-m3-typography": "enabled" } } ] \ No newline at end of file diff --git a/tokens/theme-m3-typography.json b/tokens/theme-m3-typography.json new file mode 100644 index 00000000..e2cd01f3 --- /dev/null +++ b/tokens/theme-m3-typography.json @@ -0,0 +1,422 @@ +{ + "M3 Typograhy": { + "display": { + "large": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.0}", + "fontSize": "{fontSize.10}", + "letterSpacing": "{letterSpacing.0}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.1}", + "fontSize": "{fontSize.9}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.2}", + "fontSize": "{fontSize.8}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + } + }, + "headline": { + "large": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.3}", + "fontSize": "{fontSize.7}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.4}", + "fontSize": "{fontSize.6}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.5}", + "fontSize": "{fontSize.5}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + } + }, + "title": { + "large": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.6}", + "fontSize": "{fontSize.4}", + "letterSpacing": "{letterSpacing.1}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-1}", + "lineHeight": "{lineHeights.7}", + "fontSize": "{fontSize.3}", + "letterSpacing": "{letterSpacing.2}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-1}", + "lineHeight": "{lineHeights.8}", + "fontSize": "{fontSize.2}", + "letterSpacing": "{letterSpacing.3}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + } + }, + "body": { + "large": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.7}", + "fontSize": "{fontSize.3}", + "letterSpacing": "{letterSpacing.2}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.8}", + "fontSize": "{fontSize.2}", + "letterSpacing": "{letterSpacing.3}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-0}", + "lineHeight": "{lineHeights.9}", + "fontSize": "{fontSize.1}", + "letterSpacing": "{letterSpacing.4}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + } + }, + "label": { + "large - prominent": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-2}", + "lineHeight": "{lineHeights.8}", + "fontSize": "{fontSize.2}", + "letterSpacing": "{letterSpacing.5}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "large": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-1}", + "lineHeight": "{lineHeights.8}", + "fontSize": "{fontSize.2}", + "letterSpacing": "{letterSpacing.3}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium - prominent": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-2}", + "lineHeight": "{lineHeights.9}", + "fontSize": "{fontSize.1}", + "letterSpacing": "{letterSpacing.6}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-1}", + "lineHeight": "{lineHeights.9}", + "fontSize": "{fontSize.1}", + "letterSpacing": "{letterSpacing.4}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "{fontFamilies.roboto}", + "fontWeight": "{fontWeights.roboto-1}", + "lineHeight": "{lineHeights.10}", + "fontSize": "{fontSize.0}", + "letterSpacing": "{letterSpacing.7}", + "paragraphSpacing": "{paragraphSpacing.0}", + "paragraphIndent": "{paragraphIndent.0}", + "textCase": "{textCase.none}", + "textDecoration": "{textDecoration.none}" + }, + "type": "typography" + } + } + }, + "fontFamilies": { + "roboto": { + "value": "Roboto", + "type": "fontFamilies" + } + }, + "lineHeights": { + "0": { + "value": "64", + "type": "lineHeights" + }, + "1": { + "value": "52", + "type": "lineHeights" + }, + "2": { + "value": "44", + "type": "lineHeights" + }, + "3": { + "value": "41", + "type": "lineHeights" + }, + "4": { + "value": "34", + "type": "lineHeights" + }, + "5": { + "value": "32", + "type": "lineHeights" + }, + "6": { + "value": "27", + "type": "lineHeights" + }, + "7": { + "value": "22", + "type": "lineHeights" + }, + "8": { + "value": "20", + "type": "lineHeights" + }, + "9": { + "value": "17", + "type": "lineHeights" + }, + "10": { + "value": "15", + "type": "lineHeights" + } + }, + "fontWeights": { + "roboto-0": { + "value": "Regular", + "type": "fontWeights" + }, + "roboto-1": { + "value": "Medium", + "type": "fontWeights" + }, + "roboto-2": { + "value": "SemiBold", + "type": "fontWeights" + } + }, + "fontSize": { + "0": { + "value": "11", + "type": "fontSizes" + }, + "1": { + "value": "12", + "type": "fontSizes" + }, + "2": { + "value": "14", + "type": "fontSizes" + }, + "3": { + "value": "16", + "type": "fontSizes" + }, + "4": { + "value": "22", + "type": "fontSizes" + }, + "5": { + "value": "24", + "type": "fontSizes" + }, + "6": { + "value": "28", + "type": "fontSizes" + }, + "7": { + "value": "34", + "type": "fontSizes" + }, + "8": { + "value": "36", + "type": "fontSizes" + }, + "9": { + "value": "45", + "type": "fontSizes" + }, + "10": { + "value": "57", + "type": "fontSizes" + } + }, + "letterSpacing": { + "0": { + "value": "-0.25", + "type": "letterSpacing" + }, + "1": { + "value": "0%", + "type": "letterSpacing" + }, + "2": { + "value": "1.56%", + "type": "letterSpacing" + }, + "3": { + "value": "1.79%", + "type": "letterSpacing" + }, + "4": { + "value": "3.33%", + "type": "letterSpacing" + }, + "5": { + "value": "0.1", + "type": "letterSpacing" + }, + "6": { + "value": "0.5", + "type": "letterSpacing" + }, + "7": { + "value": "4.55%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "0": { + "value": "0", + "type": "paragraphSpacing" + } + }, + "textCase": { + "none": { + "value": "none", + "type": "textCase" + } + }, + "textDecoration": { + "none": { + "value": "none", + "type": "textDecoration" + } + }, + "paragraphIndent": { + "0": { + "value": "0px", + "type": "dimension" + } + } +} \ No newline at end of file From e47167445145157060b0e9589249443fcf375a7c Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Tue, 11 Jul 2023 08:46:29 +0200 Subject: [PATCH 16/19] Tokens Studio auto-generated theme updates --- tokens/$themes.json | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/tokens/$themes.json b/tokens/$themes.json index cbbc54be..5d03e36b 100644 --- a/tokens/$themes.json +++ b/tokens/$themes.json @@ -3,8 +3,7 @@ "id": "e12210b9270d7047e0bed40f06eaa66d5bd7a9c7", "name": "Global", "selectedTokenSets": { - "cross-platform": "enabled", - "theme-m3-typography": "disabled" + "cross-platform": "enabled" }, "$figmaStyleReferences": {} }, @@ -12,8 +11,7 @@ "id": "96f4f9bd2bf32c4657bfe283f418fc093117942f", "name": "Android", "selectedTokenSets": { - "platform-android": "enabled", - "theme-m3-typography": "disabled" + "platform-android": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:25abcdb5e09930db0b8238606cb722f34dd09f34,", @@ -38,8 +36,7 @@ "id": "0022f9989257cb4474cf2429dc471f3ea70d0f9d", "name": "iOS", "selectedTokenSets": { - "platform-ios": "enabled", - "theme-m3-typography": "disabled" + "platform-ios": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:43243e3690f15fd4a49f5e9752d23ad2eaab8b5d,", @@ -64,8 +61,7 @@ "id": "22ad1f7c65308da86722dc9335e31be4d9fa53d7", "name": "Web", "selectedTokenSets": { - "platform-web": "enabled", - "theme-m3-typography": "disabled" + "platform-web": "enabled" }, "$figmaStyleReferences": { "font.body.xs.regular": "S:acd9364fb96bf307fcc23106bc9958664af9b4f3,", @@ -97,8 +93,7 @@ "selectedTokenSets": { "theme-light": "enabled", "theme-semantics": "enabled", - "theme-semantics-light": "enabled", - "theme-m3-typography": "disabled" + "theme-semantics-light": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:8e148d8d80d552d40db795a6ef9191600e9408c8,", @@ -472,8 +467,7 @@ "selectedTokenSets": { "theme-dark": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark": "enabled", - "theme-m3-typography": "disabled" + "theme-semantics-dark": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:21581fd42700feae0ea79137c3ee964382b80b15,", @@ -847,8 +841,7 @@ "selectedTokenSets": { "theme-light-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-light-hc": "enabled", - "theme-m3-typography": "disabled" + "theme-semantics-light-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:a73ecb030e9eb79f2e8007c51e678a952b1342da,", @@ -1222,8 +1215,7 @@ "selectedTokenSets": { "theme-dark-hc": "enabled", "theme-semantics": "enabled", - "theme-semantics-dark-hc": "enabled", - "theme-m3-typography": "disabled" + "theme-semantics-dark-hc": "enabled" }, "$figmaStyleReferences": { "color.text.primary": "S:0f082c1f98d76b0dd50fd7043416aabf2da4347b,", @@ -1599,8 +1591,7 @@ "theme-light": "source", "theme-semantics-light": "source", "theme-semantics": "source", - "theme-m3-light": "enabled", - "theme-m3-typography": "disabled" + "theme-m3-light": "enabled" } }, { @@ -1611,8 +1602,7 @@ "theme-semantics": "source", "theme-m3-dark": "enabled", "theme-semantics-dark": "source", - "theme-dark": "source", - "theme-m3-typography": "disabled" + "theme-dark": "source" } }, { From 527a4807b74cbc786b00875e9e27405f7e7a0cc0 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Tue, 11 Jul 2023 09:03:05 +0200 Subject: [PATCH 17/19] Map M3 Typography to Compound Typography tokens where possible --- tokens/theme-m3-typography.json | 132 +++----------------------------- 1 file changed, 11 insertions(+), 121 deletions(-) diff --git a/tokens/theme-m3-typography.json b/tokens/theme-m3-typography.json index e2cd01f3..7769d8f8 100644 --- a/tokens/theme-m3-typography.json +++ b/tokens/theme-m3-typography.json @@ -46,31 +46,11 @@ }, "headline": { "large": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.3}", - "fontSize": "{fontSize.7}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.heading.xl.regular}", "type": "typography" }, "medium": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.4}", - "fontSize": "{fontSize.6}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.heading.lg.regular}", "type": "typography" }, "small": { @@ -90,89 +70,29 @@ }, "title": { "large": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.6}", - "fontSize": "{fontSize.4}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.heading.md.regular}", "type": "typography" }, "medium": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-1}", - "lineHeight": "{lineHeights.7}", - "fontSize": "{fontSize.3}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.lg.medium}", "type": "typography" }, "small": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-1}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.md.medium}", "type": "typography" } }, "body": { "large": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.7}", - "fontSize": "{fontSize.3}", - "letterSpacing": "{letterSpacing.2}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.lg.regular}", "type": "typography" }, "medium": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.md.regular}", "type": "typography" }, "small": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.9}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.4}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.sm.regular}", "type": "typography" } }, @@ -192,17 +112,7 @@ "type": "typography" }, "large": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-1}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.3}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.md.medium}", "type": "typography" }, "medium - prominent": { @@ -220,31 +130,11 @@ "type": "typography" }, "medium": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-1}", - "lineHeight": "{lineHeights.9}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.4}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.sm.medium}", "type": "typography" }, "small": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-1}", - "lineHeight": "{lineHeights.10}", - "fontSize": "{fontSize.0}", - "letterSpacing": "{letterSpacing.7}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, + "value": "{font.body.xs.medium}", "type": "typography" } } From f8336fb2ac2e701e4af5ef76179950d436d5737a Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Tue, 11 Jul 2023 09:26:08 +0200 Subject: [PATCH 18/19] Remove atomic M3 Typography tokens created by Tokens Studio on Figma styles import --- tokens/theme-m3-typography.json | 394 ++++++++------------------------ 1 file changed, 99 insertions(+), 295 deletions(-) diff --git a/tokens/theme-m3-typography.json b/tokens/theme-m3-typography.json index 7769d8f8..a54080c7 100644 --- a/tokens/theme-m3-typography.json +++ b/tokens/theme-m3-typography.json @@ -1,312 +1,116 @@ { - "M3 Typograhy": { - "display": { - "large": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.0}", - "fontSize": "{fontSize.10}", - "letterSpacing": "{letterSpacing.0}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" + "display": { + "large": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "Regular", + "lineHeight": "64", + "fontSize": "57", + "letterSpacing": "-0.25" }, - "medium": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.1}", - "fontSize": "{fontSize.9}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" + "type": "typography" + }, + "medium": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "Regular", + "lineHeight": "52", + "fontSize": "45", + "letterSpacing": "0%" }, - "small": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.2}", - "fontSize": "{fontSize.8}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - } - }, - "headline": { - "large": { - "value": "{font.heading.xl.regular}", - "type": "typography" - }, - "medium": { - "value": "{font.heading.lg.regular}", - "type": "typography" - }, - "small": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-0}", - "lineHeight": "{lineHeights.5}", - "fontSize": "{fontSize.5}", - "letterSpacing": "{letterSpacing.1}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - } - }, - "title": { - "large": { - "value": "{font.heading.md.regular}", - "type": "typography" - }, - "medium": { - "value": "{font.body.lg.medium}", - "type": "typography" - }, - "small": { - "value": "{font.body.md.medium}", - "type": "typography" - } - }, - "body": { - "large": { - "value": "{font.body.lg.regular}", - "type": "typography" + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "Regular", + "lineHeight": "44", + "fontSize": "36", + "letterSpacing": "0%" }, - "medium": { - "value": "{font.body.md.regular}", - "type": "typography" - }, - "small": { - "value": "{font.body.sm.regular}", - "type": "typography" - } - }, - "label": { - "large - prominent": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-2}", - "lineHeight": "{lineHeights.8}", - "fontSize": "{fontSize.2}", - "letterSpacing": "{letterSpacing.5}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "large": { - "value": "{font.body.md.medium}", - "type": "typography" - }, - "medium - prominent": { - "value": { - "fontFamily": "{fontFamilies.roboto}", - "fontWeight": "{fontWeights.roboto-2}", - "lineHeight": "{lineHeights.9}", - "fontSize": "{fontSize.1}", - "letterSpacing": "{letterSpacing.6}", - "paragraphSpacing": "{paragraphSpacing.0}", - "paragraphIndent": "{paragraphIndent.0}", - "textCase": "{textCase.none}", - "textDecoration": "{textDecoration.none}" - }, - "type": "typography" - }, - "medium": { - "value": "{font.body.sm.medium}", - "type": "typography" - }, - "small": { - "value": "{font.body.xs.medium}", - "type": "typography" - } + "type": "typography" } }, - "fontFamilies": { - "roboto": { - "value": "Roboto", - "type": "fontFamilies" + "headline": { + "large": { + "value": "{font.heading.xl.regular}", + "type": "typography" + }, + "medium": { + "value": "{font.heading.lg.regular}", + "type": "typography" + }, + "small": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "Regular", + "lineHeight": "32", + "fontSize": "24", + "letterSpacing": "0%" + }, + "type": "typography" } }, - "lineHeights": { - "0": { - "value": "64", - "type": "lineHeights" - }, - "1": { - "value": "52", - "type": "lineHeights" - }, - "2": { - "value": "44", - "type": "lineHeights" - }, - "3": { - "value": "41", - "type": "lineHeights" - }, - "4": { - "value": "34", - "type": "lineHeights" - }, - "5": { - "value": "32", - "type": "lineHeights" - }, - "6": { - "value": "27", - "type": "lineHeights" - }, - "7": { - "value": "22", - "type": "lineHeights" - }, - "8": { - "value": "20", - "type": "lineHeights" - }, - "9": { - "value": "17", - "type": "lineHeights" - }, - "10": { - "value": "15", - "type": "lineHeights" + "title": { + "large": { + "value": "{font.heading.md.regular}", + "type": "typography" + }, + "medium": { + "value": "{font.body.lg.medium}", + "type": "typography" + }, + "small": { + "value": "{font.body.md.medium}", + "type": "typography" } }, - "fontWeights": { - "roboto-0": { - "value": "Regular", - "type": "fontWeights" - }, - "roboto-1": { - "value": "Medium", - "type": "fontWeights" - }, - "roboto-2": { - "value": "SemiBold", - "type": "fontWeights" + "body": { + "large": { + "value": "{font.body.lg.regular}", + "type": "typography" + }, + "medium": { + "value": "{font.body.md.regular}", + "type": "typography" + }, + "small": { + "value": "{font.body.sm.regular}", + "type": "typography" } }, - "fontSize": { - "0": { - "value": "11", - "type": "fontSizes" - }, - "1": { - "value": "12", - "type": "fontSizes" - }, - "2": { - "value": "14", - "type": "fontSizes" - }, - "3": { - "value": "16", - "type": "fontSizes" - }, - "4": { - "value": "22", - "type": "fontSizes" - }, - "5": { - "value": "24", - "type": "fontSizes" - }, - "6": { - "value": "28", - "type": "fontSizes" - }, - "7": { - "value": "34", - "type": "fontSizes" - }, - "8": { - "value": "36", - "type": "fontSizes" - }, - "9": { - "value": "45", - "type": "fontSizes" - }, - "10": { - "value": "57", - "type": "fontSizes" - } - }, - "letterSpacing": { - "0": { - "value": "-0.25", - "type": "letterSpacing" - }, - "1": { - "value": "0%", - "type": "letterSpacing" - }, - "2": { - "value": "1.56%", - "type": "letterSpacing" - }, - "3": { - "value": "1.79%", - "type": "letterSpacing" - }, - "4": { - "value": "3.33%", - "type": "letterSpacing" - }, - "5": { - "value": "0.1", - "type": "letterSpacing" + "label": { + "large - prominent": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "SemiBold", + "lineHeight": "20", + "fontSize": "14", + "letterSpacing": "0.1" + }, + "type": "typography" + }, + "large": { + "value": "{font.body.md.medium}", + "type": "typography" + }, + "medium - prominent": { + "value": { + "fontFamily": "Roboto", + "fontWeight": "SemiBold", + "lineHeight": "17", + "fontSize": "12", + "letterSpacing": "0.5" + }, + "type": "typography" }, - "6": { - "value": "0.5", - "type": "letterSpacing" + "medium": { + "value": "{font.body.sm.medium}", + "type": "typography" }, - "7": { - "value": "4.55%", - "type": "letterSpacing" - } - }, - "paragraphSpacing": { - "0": { - "value": "0", - "type": "paragraphSpacing" - } - }, - "textCase": { - "none": { - "value": "none", - "type": "textCase" - } - }, - "textDecoration": { - "none": { - "value": "none", - "type": "textDecoration" - } - }, - "paragraphIndent": { - "0": { - "value": "0px", - "type": "dimension" + "small": { + "value": "{font.body.xs.medium}", + "type": "typography" } } } \ No newline at end of file From e81322aacae6e72ec052cee14b2bb1ad1918ae14 Mon Sep 17 00:00:00 2001 From: Jano Garcia Date: Mon, 17 Jul 2023 16:35:25 +0200 Subject: [PATCH 19/19] Update description for typography styles without a Compound counterpart --- tokens/theme-m3-typography.json | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/tokens/theme-m3-typography.json b/tokens/theme-m3-typography.json index a54080c7..ac76a391 100644 --- a/tokens/theme-m3-typography.json +++ b/tokens/theme-m3-typography.json @@ -8,7 +8,8 @@ "fontSize": "57", "letterSpacing": "-0.25" }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." }, "medium": { "value": { @@ -18,7 +19,8 @@ "fontSize": "45", "letterSpacing": "0%" }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." }, "small": { "value": { @@ -26,9 +28,11 @@ "fontWeight": "Regular", "lineHeight": "44", "fontSize": "36", - "letterSpacing": "0%" + "letterSpacing": "0%", + "description": "No direct counterpart in Compound." }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." } }, "headline": { @@ -48,7 +52,8 @@ "fontSize": "24", "letterSpacing": "0%" }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." } }, "title": { @@ -88,7 +93,8 @@ "fontSize": "14", "letterSpacing": "0.1" }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." }, "large": { "value": "{font.body.md.medium}", @@ -102,7 +108,8 @@ "fontSize": "12", "letterSpacing": "0.5" }, - "type": "typography" + "type": "typography", + "description": "No direct counterpart in Compound." }, "medium": { "value": "{font.body.sm.medium}",