Merge pull request #50 from srambach/49-add-breakpoint-tokens

feat(tokens): add breakpoint tokens
patternfly · May 9, 2024 · e521f74 · e521f74
2 parents e9d7eaa + b79ef72
commit e521f74
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 22 deletions.
diff --git a/packages/module/build.js b/packages/module/build.js
@@ -29,6 +29,7 @@ const build = (selector) => {
       token.attributes.type === 'spacer' ||
       token.attributes.type === 'border' ||
       token.attributes.type === 'icon' ||
+      token.attributes.type === 'breakpoint' ||
       (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') ||
       token.attributes.type === 'font',
     transformer: (token) => `${token.value}px`

diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 May 2024 18:55:09 GMT
+// Generated on Thu, 09 May 2024 17:55:04 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--layout--width: 450;

diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 May 2024 18:55:09 GMT
+// Generated on Thu, 09 May 2024 17:55:04 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--layout--width: 450;

diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 May 2024 18:55:09 GMT
+// Generated on Thu, 09 May 2024 17:55:04 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);

diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss
@@ -1,11 +1,17 @@
 
 // Do not edit directly
-// Generated on Tue, 07 May 2024 18:55:08 GMT
+// Generated on Thu, 09 May 2024 17:55:04 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
   --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
+  --pf-t--global--breakpoint--600: 1450px;
+  --pf-t--global--breakpoint--500: 1200px;
+  --pf-t--global--breakpoint--400: 992px;
+  --pf-t--global--breakpoint--300: 768px;
+  --pf-t--global--breakpoint--200: 576px;
+  --pf-t--global--breakpoint--100: 0px;
   --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
   --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
   --pf-t--global--box-shadow--spread--100: 0px;
@@ -132,6 +138,12 @@
   --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
   --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
   --pf-t--global--background--color--100: var(--pf-t--color--white);
+  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
+  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
+  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
+  --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
+  --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
+  --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
   --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200);
   --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200);
   --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100);
@@ -542,14 +554,14 @@
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }
diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 07 May 2024 18:55:09 GMT
+// Generated on Thu, 09 May 2024 17:55:04 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--red--70: #5f0000;

diff --git a/packages/module/tokens/default/base.dimension.json b/packages/module/tokens/default/base.dimension.json
@@ -248,6 +248,32 @@
           "value": 0
         }
       }
+    },
+    "breakpoint": {
+      "100": {
+        "type": "number",
+        "value": 0
+      },
+      "200": {
+        "type": "number",
+        "value": 576
+      },
+      "300": {
+        "type": "number",
+        "value": 768
+      },
+      "400": {
+        "type": "number",
+        "value": 992
+      },
+      "500": {
+        "type": "number",
+        "value": 1200
+      },
+      "600": {
+        "type": "number",
+        "value": 1450
+      }
     }
   }
 }
diff --git a/packages/module/tokens/default/semantic.dimension.json b/packages/module/tokens/default/semantic.dimension.json
@@ -226,20 +226,6 @@
           "value": "{global.icon.size.400}"
         },
         "font": {
-          "body": {
-            "sm": {
-              "type": "number",
-              "value": "{global.font.size.body.sm}"
-            },
-            "default": {
-              "type": "number",
-              "value": "{global.font.size.body.default}"
-            },
-            "lg": {
-              "type": "number",
-              "value": "{global.font.size.body.lg}"
-            }
-          },
           "heading": {
             "h1": {
               "type": "number",
@@ -266,6 +252,20 @@
               "value": "{global.font.size.heading.h6}"
             }
           },
+          "body": {
+            "sm": {
+              "type": "number",
+              "value": "{global.font.size.body.sm}"
+            },
+            "default": {
+              "type": "number",
+              "value": "{global.font.size.body.default}"
+            },
+            "lg": {
+              "type": "number",
+              "value": "{global.font.size.body.lg}"
+            }
+          },
           "xs": {
             "type": "number",
             "value": "{global.font.size.xs}"
@@ -572,6 +572,32 @@
           "value": "{global.box-shadow.spread.100}"
         }
       }
+    },
+    "breakpoint": {
+      "xs": {
+        "type": "number",
+        "value": "{global.breakpoint.100}"
+      },
+      "sm": {
+        "type": "number",
+        "value": "{global.breakpoint.200}"
+      },
+      "md": {
+        "type": "number",
+        "value": "{global.breakpoint.300}"
+      },
+      "lg": {
+        "type": "number",
+        "value": "{global.breakpoint.400}"
+      },
+      "xl": {
+        "type": "number",
+        "value": "{global.breakpoint.500}"
+      },
+      "2xl": {
+        "type": "number",
+        "value": "{global.breakpoint.600}"
+      }
     }
   }
 }