feat(data): adding portrait sizes

Sage · Jan 17, 2024 · d569203 · d569203
1 parent 5ba0e70
commit d569203
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 68 deletions.
diff --git a/data/tokens/Components/badge.json b/data/tokens/Components/badge.json
@@ -33,6 +33,18 @@
           }
         }
       }
+    },
+    "size": {
+      "S": {
+        "value": "{global.size.decorative.M}",
+        "type": "sizing",
+        "description": "Micro dot badge size"
+      },
+      "L": {
+        "value": "{global.size.components.XS}",
+        "type": "sizing",
+        "description": "standard badge size"
+      }
     }
   }
 }
diff --git a/data/tokens/Components/button.json b/data/tokens/Components/button.json
@@ -2,19 +2,24 @@
   "button": {
     "size": {
       "S": {
-        "value": "{global.size.interactive.typical.S}",
+        "value": "{global.size.components.S}",
         "type": "sizing",
         "description": "min-height on S Buttons"
       },
       "M": {
-        "value": "{global.size.interactive.typical.M}",
+        "value": "{global.size.components.M}",
         "type": "sizing",
         "description": "min-height on M Buttons"
       },
       "L": {
-        "value": "{global.size.interactive.typical.L}",
+        "value": "{global.size.components.L}",
         "type": "sizing",
         "description": "min-height on L Buttons"
+      },
+      "XL": {
+        "value": "{global.size.components.XL}",
+        "type": "sizing",
+        "description": "min-height on XL Buttons"
       }
     },
     "space": {

diff --git a/data/tokens/Components/container.json b/data/tokens/Components/container.json
@@ -158,6 +158,25 @@
           }
         }
       }
+    },
+    "size": {
+      "scrollbar": {
+        "outer": {
+          "value": "{global.size.decorative.XL}",
+          "type": "sizing"
+        },
+        "inner": {
+          "value": "{global.size.decorative.S}",
+          "type": "sizing",
+          "description": "scrollbar handle"
+        }
+      },
+      "pagination": {
+        "dots": {
+          "value": "{global.size.decorative.L}",
+          "type": "sizing"
+        }
+      }
     }
   }
 }
diff --git a/data/tokens/Components/form.json b/data/tokens/Components/form.json
@@ -44,22 +44,22 @@
       },
       "input": {
         "XS": {
-          "value": "{global.size.interactive.typical.XS}",
+          "value": "{global.size.components.XS}",
           "type": "sizing",
           "description": "min-height on XS inputs"
         },
         "S": {
-          "value": "{global.size.interactive.typical.S}",
+          "value": "{global.size.components.S}",
           "type": "sizing",
           "description": "min-height on S inputs"
         },
         "M": {
-          "value": "{global.size.interactive.typical.M}",
+          "value": "{global.size.components.M}",
           "type": "sizing",
           "description": "Min height on M Inputs and M Dropdowns. Fixed height on Calendar days"
         },
         "L": {
-          "value": "{global.size.interactive.typical.L}",
+          "value": "{global.size.components.L}",
           "type": "sizing",
           "description": "L Inputs, Color picker square"
         }
@@ -92,56 +92,70 @@
       },
       "checkbox": {
         "S": {
-          "value": "{origin.dimension.200}",
+          "value": "{global.size.components.XXS}",
           "type": "sizing",
           "description": "S checkboxes"
         },
         "M": {
-          "value": "{origin.dimension.300}",
+          "value": "{global.size.components.XS}",
           "type": "sizing",
           "description": "M checkboxes"
         },
         "L": {
-          "value": "{origin.dimension.400}",
+          "value": "{global.size.components.S}",
           "type": "sizing",
           "description": "L checkboxes"
         }
       },
       "radio": {
         "outside": {
           "S": {
-            "value": "{origin.dimension.200}",
+            "value": "{global.size.components.XXS}",
             "type": "sizing",
             "description": "S radios"
           },
           "M": {
-            "value": "{origin.dimension.300}",
+            "value": "{global.size.components.XS}",
             "type": "sizing",
             "description": "M radios"
           },
           "L": {
-            "value": "{origin.dimension.400}",
+            "value": "{global.size.components.S}",
             "type": "sizing",
             "description": "L radios"
           }
         },
         "inside": {
           "S": {
-            "value": "{origin.dimension.100}",
+            "value": "{global.size.decorative.M}",
             "type": "sizing",
             "description": "S radio dot"
           },
           "M": {
-            "value": "{origin.dimension.150}",
+            "value": "{global.size.decorative.XL}",
             "type": "sizing",
             "description": "M radio dot"
           },
           "L": {
-            "value": "{origin.dimension.200}",
+            "value": "{global.size.decorative.XXL}",
             "type": "sizing",
             "description": "L radio dot"
           }
         }
+      },
+      "calendar": {
+        "M": {
+          "value": "{global.size.components.M}",
+          "type": "sizing",
+          "description": "day buttons"
+        }
+      },
+      "validation": {
+        "bar": {
+          "value": "{global.size.decorative.XXS}",
+          "type": "sizing",
+          "description": "2px validation bar used on errors and warnings"
+        }
       }
     },
     "color": {

diff --git a/data/tokens/Components/profile.json b/data/tokens/Components/profile.json
@@ -1,25 +1,79 @@
 {
   "profile": {
     "size": {
-      "XS": {
-        "value": "{origin.dimension.300}",
-        "type": "sizing",
-        "description": "XS Portraits"
-      },
-      "S": {
-        "value": "{origin.dimension.400}",
-        "type": "sizing",
-        "description": "S Portraits"
-      },
-      "M": {
-        "value": "{origin.dimension.500}",
-        "type": "sizing",
-        "description": "M Portraits"
+      "outside": {
+        "XS": {
+          "value": "{origin.dimension.300}",
+          "type": "sizing",
+          "description": "XS Portraits"
+        },
+        "S": {
+          "value": "{origin.dimension.400}",
+          "type": "sizing",
+          "description": "S Portraits"
+        },
+        "M": {
+          "value": "{origin.dimension.500}",
+          "type": "sizing",
+          "description": "M Portraits"
+        },
+        "ML": {
+          "value": "{origin.dimension.700}",
+          "type": "sizing",
+          "description": "L Portraits"
+        },
+        "L": {
+          "value": "{origin.dimension.900}",
+          "type": "sizing",
+          "description": "XL Portraits"
+        },
+        "XL": {
+          "value": "{origin.dimension.1300}",
+          "type": "sizing",
+          "description": "XL Portraits"
+        },
+        "XXL": {
+          "value": "{origin.dimension.1600}",
+          "type": "sizing",
+          "description": "XXL Portraits"
+        }
       },
-      "L": {
-        "value": "{origin.dimension.900}",
-        "type": "sizing",
-        "description": "L Portraits"
+      "inside": {
+        "XS": {
+          "value": "{origin.dimension.150}",
+          "type": "sizing",
+          "description": "XS Portrait icons"
+        },
+        "S": {
+          "value": "{origin.dimension.200}",
+          "type": "sizing",
+          "description": "S Portrait icons"
+        },
+        "M": {
+          "value": "{origin.dimension.250}",
+          "type": "sizing",
+          "description": "M Portrait icons"
+        },
+        "ML": {
+          "value": "{origin.dimension.350}",
+          "type": "sizing",
+          "description": "L Portrait icons"
+        },
+        "L": {
+          "value": "{origin.dimension.500}",
+          "type": "sizing",
+          "description": "XL Portrait icons"
+        },
+        "XL": {
+          "value": "{origin.dimension.700}",
+          "type": "sizing",
+          "description": "XL Portrait icons"
+        },
+        "XXL": {
+          "value": "{origin.dimension.1600}",
+          "type": "sizing",
+          "description": "XXL Portraits"
+        }
       }
     },
     "color": {

diff --git a/data/tokens/Components/progress.json b/data/tokens/Components/progress.json
@@ -2,20 +2,30 @@
   "progress": {
     "size": {
       "bar": {
+        "XS": {
+          "value": "{global.size.decorative.XS}",
+          "type": "sizing",
+          "description": "S progress tracker bar"
+        },
         "S": {
-          "value": "{origin.dimension.50}",
+          "value": "{global.size.decorative.S}",
           "type": "sizing",
-          "description": "S loader bar, S progress tracker bar"
+          "description": "S loader bar"
         },
         "M": {
-          "value": "{origin.dimension.100}",
+          "value": "{global.size.decorative.M}",
           "type": "sizing",
           "description": "M progress tracker bar, M loader bar"
         },
         "L": {
-          "value": "{origin.dimension.200}",
+          "value": "{global.size.decorative.XL}",
+          "type": "sizing",
+          "description": "L loader bar"
+        },
+        "XL": {
+          "value": "{global.size.decorative.XXL}",
           "type": "sizing",
-          "description": "L loader bar, L progress tracker bar"
+          "description": "XL loader bar, L progress tracker bar"
         }
       },
       "spinner": {

diff --git a/data/tokens/Components/tab.json b/data/tokens/Components/tab.json
@@ -2,12 +2,12 @@
   "tab": {
     "size": {
       "M": {
-        "value": "{origin.dimension.500}",
+        "value": "{global.size.components.M}",
         "type": "sizing",
         "description": "Anchor nav, M Tab"
       },
       "L": {
-        "value": "{origin.dimension.600}",
+        "value": "{global.size.components.L}",
         "type": "sizing",
         "description": "L tab"
       }