From c5e375c3f1c73803a634cfadc438449bd82b2053 Mon Sep 17 00:00:00 2001 From: Luke Emmerson-Finch Date: Wed, 10 Jan 2024 17:12:14 +0000 Subject: [PATCH 1/2] feat(data): adding generic global spacing tokens --- data/tokens/Components/button.json | 54 ++++++++++++++- data/tokens/Components/form.json | 69 ++++--------------- data/tokens/Components/profile.json | 13 ++-- data/tokens/Components/tab.json | 19 ++++++ data/tokens/global.json | 100 +++++++++------------------- 5 files changed, 118 insertions(+), 137 deletions(-) diff --git a/data/tokens/Components/button.json b/data/tokens/Components/button.json index ae349352..ec731b5f 100644 --- a/data/tokens/Components/button.json +++ b/data/tokens/Components/button.json @@ -4,17 +4,65 @@ "S": { "value": "{origin.dimension.400}", "type": "sizing", - "description": "S Button" + "description": "min-height on S Buttons" }, "M": { "value": "{origin.dimension.500}", "type": "sizing", - "description": "M Button" + "description": "min-height on M Buttons" }, "L": { "value": "{origin.dimension.600}", "type": "sizing", - "description": "L Button" + "description": "min-height on L Buttons" + } + }, + "space": { + "inside": { + "XXS": { + "value": "{origin.dimension.50}", + "type": "spacing", + "description": "top and bottom padding on small buttons" + }, + "XS": { + "value": "{origin.dimension.100}", + "type": "spacing", + "description": "top and bottom padding on medium buttons" + }, + "S": { + "value": "{origin.dimension.150}", + "type": "spacing", + "description": "top and bottom padding on large buttons" + }, + "M": { + "value": "{origin.dimension.200}", + "type": "spacing", + "description": "left and right padding on small buttons" + }, + "L": { + "value": "{origin.dimension.300}", + "type": "spacing", + "description": "left and right padding on Medium buttons" + }, + "XL": { + "value": "{origin.dimension.400}", + "type": "spacing", + "description": "left and right padding on large buttons" + } + }, + "stack": { + "S": { + "value": "{origin.dimension.200}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "L": { + "value": "{origin.dimension.400}", + "type": "spacing" + } } }, "color": { diff --git a/data/tokens/Components/form.json b/data/tokens/Components/form.json index b9b58a8e..8f3484ce 100644 --- a/data/tokens/Components/form.json +++ b/data/tokens/Components/form.json @@ -2,79 +2,38 @@ "form": { "space": { "inside": { - "XXS": { - "value": "{origin.dimension.12}", - "type": "spacing" - }, - "XS": { - "value": "{origin.dimension.25}", - "type": "spacing" - }, "S": { "value": "{origin.dimension.50}", "type": "spacing" }, - "SM": { - "value": "{origin.dimension.100}", - "type": "spacing" - }, "M": { - "value": "{origin.dimension.150}", - "type": "spacing" - }, - "ML": { - "value": "{origin.dimension.200}", + "value": "{origin.dimension.100}", "type": "spacing" }, "L": { - "value": "{origin.dimension.300}", + "value": "{origin.dimension.150}", "type": "spacing" }, "XL": { - "value": "{origin.dimension.400}", - "type": "spacing" - }, - "XXL": { - "value": "{origin.dimension.500}", + "value": "{origin.dimension.200}", "type": "spacing" } }, "stack": { - "XXS": { - "value": "{origin.dimension.12}", - "type": "spacing" - }, - "XS": { - "value": "{origin.dimension.25}", - "type": "spacing" - }, "S": { - "value": "{origin.dimension.50}", - "type": "spacing" - }, - "SM": { - "value": "{origin.dimension.100}", - "type": "spacing" - }, - "M": { - "value": "{origin.dimension.150}", - "type": "spacing" - }, - "ML": { "value": "{origin.dimension.200}", - "type": "spacing" + "type": "spacing", + "description": "Stacked S inputs" }, - "L": { + "M": { "value": "{origin.dimension.300}", - "type": "spacing" + "type": "spacing", + "description": "Stacked M inputs" }, - "XL": { + "L": { "value": "{origin.dimension.400}", - "type": "spacing" - }, - "XXL": { - "value": "{origin.dimension.500}", - "type": "spacing" + "type": "spacing", + "description": "Stacked L inputs" } } }, @@ -87,17 +46,17 @@ "XS": { "value": "{origin.dimension.300}", "type": "sizing", - "description": "XS inputs" + "description": "min-height on XS inputs" }, "S": { "value": "{origin.dimension.400}", "type": "sizing", - "description": "S Inputs" + "description": "min-height on S inputs" }, "M": { "value": "{origin.dimension.500}", "type": "sizing", - "description": "M Inputs, M Dropdowns, Calendar days" + "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days" }, "L": { "value": "{origin.dimension.600}", diff --git a/data/tokens/Components/profile.json b/data/tokens/Components/profile.json index 387a43ea..57612f92 100644 --- a/data/tokens/Components/profile.json +++ b/data/tokens/Components/profile.json @@ -4,27 +4,22 @@ "XS": { "value": "{origin.dimension.300}", "type": "sizing", - "description": "XS Portraits, XS spinners" + "description": "XS Portraits" }, "S": { "value": "{origin.dimension.400}", "type": "sizing", - "description": "S Portraits, S Spinners" + "description": "S Portraits" }, "M": { "value": "{origin.dimension.500}", "type": "sizing", - "description": "M Portraits, M Spinners" + "description": "M Portraits" }, "L": { "value": "{origin.dimension.900}", "type": "sizing", - "description": "L Portraits, L Spinners" - }, - "XL": { - "value": "{origin.dimension.1300}", - "type": "sizing", - "description": "XL spinners" + "description": "L Portraits" } } } diff --git a/data/tokens/Components/tab.json b/data/tokens/Components/tab.json index 12eb5d74..a4c6ce5d 100644 --- a/data/tokens/Components/tab.json +++ b/data/tokens/Components/tab.json @@ -12,6 +12,25 @@ "description": "L tab" } }, + "space": { + "inside": { + "S": { + "value": "{origin.dimension.100}", + "type": "spacing", + "description": "top and bottom padding on medium buttons" + }, + "M": { + "value": "{origin.dimension.200}", + "type": "spacing", + "description": "left and right padding on small buttons" + }, + "L": { + "value": "{origin.dimension.300}", + "type": "spacing", + "description": "left and right padding on Medium buttons" + } + } + }, "color": { "standard": { "bg-active": { diff --git a/data/tokens/global.json b/data/tokens/global.json index 601f3587..29d961cc 100644 --- a/data/tokens/global.json +++ b/data/tokens/global.json @@ -209,24 +209,12 @@ } }, "space": { - "interactive": { + "none": { + "value": "{origin.dimension.0}", + "type": "spacing" + }, + "components": { "inside": { - "Neg-XS": { - "value": "{origin.dimension.25} * -1", - "type": "spacing" - }, - "Neg-XXS": { - "value": "{origin.dimension.12} * -1", - "type": "spacing" - }, - "XXS": { - "value": "{origin.dimension.12}", - "type": "spacing" - }, - "none": { - "value": "{origin.dimension.0}", - "type": "spacing" - }, "XS": { "value": "{origin.dimension.25}", "type": "spacing" @@ -235,65 +223,25 @@ "value": "{origin.dimension.50}", "type": "spacing" }, - "SM": { - "value": "{origin.dimension.100}", - "type": "spacing" - }, "M": { - "value": "{origin.dimension.150}", - "type": "spacing" - }, - "ML": { - "value": "{origin.dimension.200}", + "value": "{origin.dimension.100}", "type": "spacing" }, "L": { - "value": "{origin.dimension.300}", + "value": "{origin.dimension.150}", "type": "spacing" }, "XL": { - "value": "{origin.dimension.400}", - "type": "spacing" - }, - "XXL": { - "value": "{origin.dimension.500}", + "value": "{origin.dimension.200}", "type": "spacing" } }, "stack": { - "Neg-XS": { - "value": "{origin.dimension.25} * -1", - "type": "spacing" - }, - "Neg-XXS": { - "value": "{origin.dimension.12} * -1", - "type": "spacing" - }, - "XXS": { - "value": "{origin.dimension.12}", - "type": "spacing" - }, - "none": { - "value": "{origin.dimension.0}", - "type": "spacing" - }, - "XS": { - "value": "{origin.dimension.25}", - "type": "spacing" - }, "S": { - "value": "{origin.dimension.50}", - "type": "spacing" - }, - "SM": { "value": "{origin.dimension.100}", "type": "spacing" }, "M": { - "value": "{origin.dimension.150}", - "type": "spacing" - }, - "ML": { "value": "{origin.dimension.200}", "type": "spacing" }, @@ -304,31 +252,43 @@ "XL": { "value": "{origin.dimension.400}", "type": "spacing" - }, - "XXL": { - "value": "{origin.dimension.500}", - "type": "spacing" } } }, "page": { "inside": { - "none": { - "value": "{origin.dimension.0}", + "S": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.400}", "type": "spacing" }, "L": { - "value": "{origin.dimension.12}", + "value": "{origin.dimension.500}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.600}", "type": "spacing" } }, "outside": { - "none": { - "value": "{origin.dimension.0}", + "S": { + "value": "{origin.dimension.300}", + "type": "spacing" + }, + "M": { + "value": "{origin.dimension.400}", "type": "spacing" }, "L": { - "value": "{origin.dimension.12}", + "value": "{origin.dimension.500}", + "type": "spacing" + }, + "XL": { + "value": "{origin.dimension.600}", "type": "spacing" } } From 6be4a6ccabdd929c73d9e2ef5bd6d740ac90aaac Mon Sep 17 00:00:00 2001 From: Luke Emmerson-Finch Date: Wed, 10 Jan 2024 17:13:25 +0000 Subject: [PATCH 2/2] feat(data): changing name of typical global sizing to 'components' --- data/tokens/global.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/tokens/global.json b/data/tokens/global.json index 29d961cc..362c5727 100644 --- a/data/tokens/global.json +++ b/data/tokens/global.json @@ -185,7 +185,7 @@ "description": "Icons" } }, - "typical": { + "components": { "XS": { "value": "{origin.dimension.300}", "type": "sizing"