feat: reorganize breakpoints (#7994)

**Related Issue:** n/a ## Summary Different platforms need to target breakpoints in different ways. It might be easier to be explicit about min vs max breakpoint sizes. This is not a breaking change as it retains the existing “breakpoint-width-“ tokens for the time being but does mark them for deprecation.
Esri · Oct 24, 2023 · c64a059 · c64a059
1 parent 8eafa56
commit c64a059
Showing 1 changed file with 139 additions and 15 deletions.
diff --git a/packages/calcite-design-tokens/src/core.json b/packages/calcite-design-tokens/src/core.json
@@ -1527,31 +1527,155 @@
       }
     },
     "breakpoint": {
+      "height": {
+        "xxs": {
+          "min": {
+            "value": 0,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          },
+          "max": {
+            "value": 153,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          }
+        },
+        "xs": {
+          "max": {
+            "value": 328,
+            "type": "sizing",
+            "description": "Handheld devices"
+          },
+          "min": {
+            "value": 154,
+            "type": "sizing",
+            "description": "Handheld devices"
+          }
+        },
+        "sm": {
+          "max": {
+            "value": 503,
+            "type": "sizing",
+            "description": "Small tablets"
+          },
+          "min": {
+            "value": 329,
+            "type": "sizing",
+            "description": "Small tablets"
+          }
+        },
+        "md": {
+          "max": {
+            "value": 678,
+            "type": "sizing",
+            "description": "Small laptops"
+          },
+          "min": {
+            "value": 504,
+            "type": "sizing",
+            "description": "Small laptops"
+          }
+        },
+        "lg": {
+          "max": {
+            "value": 853,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          },
+          "min": {
+            "value": 679,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          }
+        }
+      },
       "width": {
+        "default": {
+          "xxs": {
+            "value": "320px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "xs": {
+            "value": "476px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "sm": {
+            "value": "768px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "md": {
+            "value": "1152px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "lg": {
+            "value": "1440px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          }
+        },
         "xxs": {
-          "value": "320px",
-          "type": "sizing",
-          "description": "Small handheld devices and mini-windows"
+          "max": {
+            "value": 320,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          },
+          "min": {
+            "value": 0,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          }
         },
         "xs": {
-          "value": "476px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 476,
+            "type": "sizing",
+            "description": "Handheld devices"
+          },
+          "min": {
+            "value": 321,
+            "type": "sizing",
+            "description": "Handheld devices"
+          }
         },
         "sm": {
-          "value": "768px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 768,
+            "type": "sizing",
+            "description": "Small tablets"
+          },
+          "min": {
+            "value": 477,
+            "type": "sizing",
+            "description": "Small tablets"
+          }
         },
         "md": {
-          "value": "1152px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 1152,
+            "type": "sizing",
+            "description": "Small laptops"
+          },
+          "min": {
+            "value": 769,
+            "type": "sizing",
+            "description": "Small laptops"
+          }
         },
         "lg": {
-          "value": "1440px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 1722,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          },
+          "min": {
+            "value": 1153,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          }
         }
       },
       "margin": {