feat: add size constants to css

This commit opens up being able to use size constants for width based properties such as
`data-bedrock-center="maxWidth:sizeXl"`

re #2207

packages/css/src/components/center.css

@@ -24,3 +24,43 @@
 [data-bedrock-center~="center-text"] {
   text-align: center;
 }
+
+[data-bedrock-center~="maxWidth:sizeContent1"] {
+  --max-width: 20ch;
+}
+[data-bedrock-center~="maxWidth:sizeContent2"] {
+  --max-width: 45ch;
+}
+[data-bedrock-center~="maxWidth:sizeContent3"] {
+  --max-width: 60ch;
+}
+[data-bedrock-center~="maxWidth:sizeHeader1"] {
+  --max-width: 20ch;
+}
+[data-bedrock-center~="maxWidth:sizeHeader2"] {
+  --max-width: 25ch;
+}
+[data-bedrock-center~="maxWidth:sizeHeader3"] {
+  --max-width: 35ch;
+}
+[data-bedrock-center~="maxWidth:sizeXxs"] {
+  --max-width: 240px;
+}
+[data-bedrock-center~="maxWidth:sizeXs"] {
+  --max-width: 360px;
+}
+[data-bedrock-center~="maxWidth:sizeSm"] {
+  --max-width: 480px;
+}
+[data-bedrock-center~="maxWidth:sizeMd"] {
+  --max-width: 768px;
+}
+[data-bedrock-center~="maxWidth:sizeLg"] {
+  --max-width: 1024px;
+}
+[data-bedrock-center~="maxWidth:sizeXl"] {
+  --max-width: 1440px;
+}
+[data-bedrock-center~="maxWidth:sizeXxl"] {
+  --max-width: 1920px;
+}

packages/css/src/components/column-drop.css

@@ -76,3 +76,44 @@
 [data-bedrock-column-drop~="gutter:size15"] {
   --gutter: 30rem;
 }
+
+/* Min Item Widths */
+[data-bedrock-column-drop~="minItemWidth:sizeContent1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeContent2"] {
+  --min-item-width: 45ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeContent3"] {
+  --min-item-width: 60ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeHeader1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeHeader2"] {
+  --min-item-width: 25ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeHeader3"] {
+  --min-item-width: 35ch;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeXxs"] {
+  --min-item-width: 240px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeXs"] {
+  --min-item-width: 360px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeSm"] {
+  --min-item-width: 480px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeMd"] {
+  --min-item-width: 768px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeLg"] {
+  --min-item-width: 1024px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeXl"] {
+  --min-item-width: 1440px;
+}
+[data-bedrock-column-drop~="minItemWidth:sizeXxl"] {
+  --min-item-width: 1920px;
+}

packages/css/src/components/columns.css

@@ -86,6 +86,47 @@
   --gutter: 30rem;
 }
 
+/* Switch at Widths */
+[data-bedrock-columns~="switchAt:sizeContent1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-columns~="switchAt:sizeContent2"] {
+  --switch-at: 45ch;
+}
+[data-bedrock-columns~="switchAt:sizeContent3"] {
+  --switch-at: 60ch;
+}
+[data-bedrock-columns~="switchAt:sizeHeader1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-columns~="switchAt:sizeHeader2"] {
+  --switch-at: 25ch;
+}
+[data-bedrock-columns~="switchAt:sizeHeader3"] {
+  --switch-at: 35ch;
+}
+[data-bedrock-columns~="switchAt:sizeXxs"] {
+  --switch-at: 240px;
+}
+[data-bedrock-columns~="switchAt:sizeXs"] {
+  --switch-at: 360px;
+}
+[data-bedrock-columns~="switchAt:sizeSm"] {
+  --switch-at: 480px;
+}
+[data-bedrock-columns~="switchAt:sizeMd"] {
+  --switch-at: 768px;
+}
+[data-bedrock-columns~="switchAt:sizeLg"] {
+  --switch-at: 1024px;
+}
+[data-bedrock-columns~="switchAt:sizeXl"] {
+  --switch-at: 1440px;
+}
+[data-bedrock-columns~="switchAt:sizeXxl"] {
+  --switch-at: 1920px;
+}
+
 /*
   column component
 */

packages/css/src/components/grid.css

@@ -76,3 +76,44 @@
 [data-bedrock-grid~="gutter:size15"] {
   --gutter: 30rem;
 }
+
+/* Min Item Widths */
+[data-bedrock-grid~="minItemWidth:sizeContent1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeContent2"] {
+  --min-item-width: 45ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeContent3"] {
+  --min-item-width: 60ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeHeader1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeHeader2"] {
+  --min-item-width: 25ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeHeader3"] {
+  --min-item-width: 35ch;
+}
+[data-bedrock-grid~="minItemWidth:sizeXxs"] {
+  --min-item-width: 240px;
+}
+[data-bedrock-grid~="minItemWidth:sizeXs"] {
+  --min-item-width: 360px;
+}
+[data-bedrock-grid~="minItemWidth:sizeSm"] {
+  --min-item-width: 480px;
+}
+[data-bedrock-grid~="minItemWidth:sizeMd"] {
+  --min-item-width: 768px;
+}
+[data-bedrock-grid~="minItemWidth:sizeLg"] {
+  --min-item-width: 1024px;
+}
+[data-bedrock-grid~="minItemWidth:sizeXl"] {
+  --min-item-width: 1440px;
+}
+[data-bedrock-grid~="minItemWidth:sizeXxl"] {
+  --min-item-width: 1920px;
+}

packages/css/src/components/inline.css

@@ -21,17 +21,20 @@
 
 :is(
     [data-bedrock-inline][style*="--switchAt"],
-    [data-bedrock-inline][style*="--switch-at"]
+    [data-bedrock-inline][style*="--switch-at"],
+    [data-bedrock-inline*="--switchAt"]
   ) {
   flex-wrap: wrap;
 }
 
-[data-bedrock-inline][style*="--switchAt"] > * {
+[data-bedrock-inline]:is(
+    [style*="--switchAt"],
+    [style*="--switch-at"],
+    [data-bedrock-inline*="--switchAt"]
+  )
+  > * {
   flex-basis: calc((var(--switchAt) - (100% - var(--gutter, 0px))) * 999);
 }
-[data-bedrock-inline][style*="--switch-at"] > * {
-  flex-basis: calc((var(--switch-at) - (100% - var(--gutter, 0px))) * 999);
-}
 
 [data-bedrock-inline][style*="--minItemWidth"] > * {
   min-inline-size: var(--minItemWidth, 0);
@@ -148,3 +151,85 @@
 [data-bedrock-inline~="gutter:size15"] {
   --gutter: 30rem;
 }
+
+/* Min Item Widths */
+[data-bedrock-inline~="minItemWidth:sizeContent1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeContent2"] {
+  --min-item-width: 45ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeContent3"] {
+  --min-item-width: 60ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeHeader1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeHeader2"] {
+  --min-item-width: 25ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeHeader3"] {
+  --min-item-width: 35ch;
+}
+[data-bedrock-inline~="minItemWidth:sizeXxs"] {
+  --min-item-width: 240px;
+}
+[data-bedrock-inline~="minItemWidth:sizeXs"] {
+  --min-item-width: 360px;
+}
+[data-bedrock-inline~="minItemWidth:sizeSm"] {
+  --min-item-width: 480px;
+}
+[data-bedrock-inline~="minItemWidth:sizeMd"] {
+  --min-item-width: 768px;
+}
+[data-bedrock-inline~="minItemWidth:sizeLg"] {
+  --min-item-width: 1024px;
+}
+[data-bedrock-inline~="minItemWidth:sizeXl"] {
+  --min-item-width: 1440px;
+}
+[data-bedrock-inline~="minItemWidth:sizeXxl"] {
+  --min-item-width: 1920px;
+}
+
+/* Switch at Widths */
+[data-bedrock-inline~="switchAt:sizeContent1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-inline~="switchAt:sizeContent2"] {
+  --switch-at: 45ch;
+}
+[data-bedrock-inline~="switchAt:sizeContent3"] {
+  --switch-at: 60ch;
+}
+[data-bedrock-inline~="switchAt:sizeHeader1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-inline~="switchAt:sizeHeader2"] {
+  --switch-at: 25ch;
+}
+[data-bedrock-inline~="switchAt:sizeHeader3"] {
+  --switch-at: 35ch;
+}
+[data-bedrock-inline~="switchAt:sizeXxs"] {
+  --switch-at: 240px;
+}
+[data-bedrock-inline~="switchAt:sizeXs"] {
+  --switch-at: 360px;
+}
+[data-bedrock-inline~="switchAt:sizeSm"] {
+  --switch-at: 480px;
+}
+[data-bedrock-inline~="switchAt:sizeMd"] {
+  --switch-at: 768px;
+}
+[data-bedrock-inline~="switchAt:sizeLg"] {
+  --switch-at: 1024px;
+}
+[data-bedrock-inline~="switchAt:sizeXl"] {
+  --switch-at: 1440px;
+}
+[data-bedrock-inline~="switchAt:sizeXxl"] {
+  --switch-at: 1920px;
+}

packages/css/src/components/split.css

@@ -161,3 +161,85 @@
 [data-bedrock-split~="gutter:size15"] {
   --gutter: 30rem;
 }
+
+/* Min Item Widths */
+[data-bedrock-split~="minItemWidth:sizeContent1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-split~="minItemWidth:sizeContent2"] {
+  --min-item-width: 45ch;
+}
+[data-bedrock-split~="minItemWidth:sizeContent3"] {
+  --min-item-width: 60ch;
+}
+[data-bedrock-split~="minItemWidth:sizeHeader1"] {
+  --min-item-width: 20ch;
+}
+[data-bedrock-split~="minItemWidth:sizeHeader2"] {
+  --min-item-width: 25ch;
+}
+[data-bedrock-split~="minItemWidth:sizeHeader3"] {
+  --min-item-width: 35ch;
+}
+[data-bedrock-split~="minItemWidth:sizeXxs"] {
+  --min-item-width: 240px;
+}
+[data-bedrock-split~="minItemWidth:sizeXs"] {
+  --min-item-width: 360px;
+}
+[data-bedrock-split~="minItemWidth:sizeSm"] {
+  --min-item-width: 480px;
+}
+[data-bedrock-split~="minItemWidth:sizeMd"] {
+  --min-item-width: 768px;
+}
+[data-bedrock-split~="minItemWidth:sizeLg"] {
+  --min-item-width: 1024px;
+}
+[data-bedrock-split~="minItemWidth:sizeXl"] {
+  --min-item-width: 1440px;
+}
+[data-bedrock-split~="minItemWidth:sizeXxl"] {
+  --min-item-width: 1920px;
+}
+
+/* Switch at Widths */
+[data-bedrock-split~="switchAt:sizeContent1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-split~="switchAt:sizeContent2"] {
+  --switch-at: 45ch;
+}
+[data-bedrock-split~="switchAt:sizeContent3"] {
+  --switch-at: 60ch;
+}
+[data-bedrock-split~="switchAt:sizeHeader1"] {
+  --switch-at: 20ch;
+}
+[data-bedrock-split~="switchAt:sizeHeader2"] {
+  --switch-at: 25ch;
+}
+[data-bedrock-split~="switchAt:sizeHeader3"] {
+  --switch-at: 35ch;
+}
+[data-bedrock-split~="switchAt:sizeXxs"] {
+  --switch-at: 240px;
+}
+[data-bedrock-split~="switchAt:sizeXs"] {
+  --switch-at: 360px;
+}
+[data-bedrock-split~="switchAt:sizeSm"] {
+  --switch-at: 480px;
+}
+[data-bedrock-split~="switchAt:sizeMd"] {
+  --switch-at: 768px;
+}
+[data-bedrock-split~="switchAt:sizeLg"] {
+  --switch-at: 1024px;
+}
+[data-bedrock-split~="switchAt:sizeXl"] {
+  --switch-at: 1440px;
+}
+[data-bedrock-split~="switchAt:sizeXxl"] {
+  --switch-at: 1920px;
+}

stories/center/Center.stories.tsx

@@ -71,7 +71,13 @@ export const Playground: Story = {};
  * #### Usage examples
  * ```jsx
  * // CSS
- * <div data-bedrock-center style={{ "--max-width": "60ch"}}'>
+ * // Using the predefined size constants
+ * <div data-bedrock-center="maxWidth:sizeContent3">
+ *  <Component />
+ * </div>
+ *
+ * // Or you can use a custom value directly
+ * <div data-bedrock-center style={{ "--max-width": "60ch"}}>
  *  <Component />
  * </div>
  *