feat: border-radius in px

qld-gov-au · Dec 18, 2024 · bd6fa33 · bd6fa33
1 parent 9efe25a
commit bd6fa33
Show file tree

Hide file tree

Showing 25 changed files with 79 additions and 79 deletions.
diff --git a/dist/android/button/button.xml b/dist/android/button/button.xml
@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="buttonBorderRadius">32</string>
+  <string name="buttonBorderRadius">32px</string>
   <string name="buttonBorderWidth">8px</string>
 </resources>
diff --git a/dist/android/card/card.xml b/dist/android/card/card.xml
@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="cardBorderRadius">12</string>
+  <string name="cardBorderRadius">12px</string>
   <dimen name="cardPadding">16px</dimen>
 </resources>
diff --git a/dist/android/styles/primitive.xml b/dist/android/styles/primitive.xml
@@ -27,13 +27,13 @@
   <string name="spacing14">96</string>
   <string name="spacing15">128</string>
   <string name="spacing16">160</string>
-  <string name="borderRadiusNone">0</string>
-  <string name="borderRadiusXs">4</string>
-  <string name="borderRadiusSm">12</string>
-  <string name="borderRadiusMd">16</string>
-  <string name="borderRadiusLg">32</string>
-  <string name="borderRadiusXl">40</string>
-  <string name="borderRadiusXxl">64</string>
+  <string name="borderRadiusNone">0px</string>
+  <string name="borderRadiusXs">4px</string>
+  <string name="borderRadiusSm">12px</string>
+  <string name="borderRadiusMd">16px</string>
+  <string name="borderRadiusLg">32px</string>
+  <string name="borderRadiusXl">40px</string>
+  <string name="borderRadiusXxl">64px</string>
   <string name="borderWidthNone">0</string>
   <string name="borderWidthThin">1px</string>
   <string name="borderWidthDefault">2px</string>

diff --git a/dist/css/button/button.css b/dist/css/button/button.css
@@ -3,6 +3,6 @@
  */
 
 :root {
-  --button-border-radius: 32;
+  --button-border-radius: 32px;
   --button-border-width: 8px;
 }
diff --git a/dist/css/card/card.css b/dist/css/card/card.css
@@ -3,6 +3,6 @@
  */
 
 :root {
-  --card-border-radius: 12;
+  --card-border-radius: 12px;
   --card-padding: 16px;
 }
diff --git a/dist/css/styles/primitive.css b/dist/css/styles/primitive.css
@@ -26,13 +26,13 @@
   --spacing-14: 96;
   --spacing-15: 128;
   --spacing-16: 160;
-  --border-radius-none: 0;
-  --border-radius-xs: 4;
-  --border-radius-sm: 12;
-  --border-radius-md: 16;
-  --border-radius-lg: 32;
-  --border-radius-xl: 40;
-  --border-radius-xxl: 64;
+  --border-radius-none: 0px;
+  --border-radius-xs: 4px;
+  --border-radius-sm: 12px;
+  --border-radius-md: 16px;
+  --border-radius-lg: 32px;
+  --border-radius-xl: 40px;
+  --border-radius-xxl: 64px;
   --border-width-none: 0;
   --border-width-thin: 1px;
   --border-width-default: 2px;

diff --git a/dist/js/button/button.js b/dist/js/button/button.js
@@ -2,5 +2,5 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const buttonBorderRadius = "32";
+export const buttonBorderRadius = "32px";
 export const buttonBorderWidth = "8px";
diff --git a/dist/js/card/card.js b/dist/js/card/card.js
@@ -2,5 +2,5 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const cardBorderRadius = "12";
+export const cardBorderRadius = "12px";
 export const cardPadding = "16px";
diff --git a/dist/js/styles/primitive.js b/dist/js/styles/primitive.js
@@ -25,13 +25,13 @@ export const spacing13 = "80";
 export const spacing14 = "96";
 export const spacing15 = "128";
 export const spacing16 = "160";
-export const borderRadiusNone = "0";
-export const borderRadiusXs = "4";
-export const borderRadiusSm = "12";
-export const borderRadiusMd = "16";
-export const borderRadiusLg = "32";
-export const borderRadiusXl = "40";
-export const borderRadiusXxl = "64";
+export const borderRadiusNone = "0px";
+export const borderRadiusXs = "4px";
+export const borderRadiusSm = "12px";
+export const borderRadiusMd = "16px";
+export const borderRadiusLg = "32px";
+export const borderRadiusXl = "40px";
+export const borderRadiusXxl = "64px";
 export const borderWidthNone = "0";
 export const borderWidthThin = "1px";
 export const borderWidthDefault = "2px";

diff --git a/dist/scss/button/button.scss b/dist/scss/button/button.scss
@@ -1,5 +1,5 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$buttonBorderRadius: 32;
+$buttonBorderRadius: 32px;
 $buttonBorderWidth: 8px;
diff --git a/dist/scss/card/card.scss b/dist/scss/card/card.scss
@@ -1,5 +1,5 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$cardBorderRadius: 12;
+$cardBorderRadius: 12px;
 $cardPadding: 16px;
diff --git a/dist/scss/styles/primitive.scss b/dist/scss/styles/primitive.scss
@@ -24,13 +24,13 @@ $spacing13: 80;
 $spacing14: 96;
 $spacing15: 128;
 $spacing16: 160;
-$borderRadiusNone: 0;
-$borderRadiusXs: 4;
-$borderRadiusSm: 12;
-$borderRadiusMd: 16;
-$borderRadiusLg: 32;
-$borderRadiusXl: 40;
-$borderRadiusXxl: 64;
+$borderRadiusNone: 0px;
+$borderRadiusXs: 4px;
+$borderRadiusSm: 12px;
+$borderRadiusMd: 16px;
+$borderRadiusLg: 32px;
+$borderRadiusXl: 40px;
+$borderRadiusXxl: 64px;
 $borderWidthNone: 0;
 $borderWidthThin: 1px;
 $borderWidthDefault: 2px;

diff --git a/src/android/button/button.xml b/src/android/button/button.xml
@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="buttonBorderRadius">32</string>
+  <string name="buttonBorderRadius">32px</string>
   <string name="buttonBorderWidth">8px</string>
 </resources>
diff --git a/src/android/card/card.xml b/src/android/card/card.xml
@@ -4,6 +4,6 @@
   Do not edit directly, this file was auto-generated.
 -->
 <resources>
-  <string name="cardBorderRadius">12</string>
+  <string name="cardBorderRadius">12px</string>
   <dimen name="cardPadding">16px</dimen>
 </resources>
diff --git a/src/android/styles/primitive.xml b/src/android/styles/primitive.xml
@@ -27,13 +27,13 @@
   <string name="spacing14">96</string>
   <string name="spacing15">128</string>
   <string name="spacing16">160</string>
-  <string name="borderRadiusNone">0</string>
-  <string name="borderRadiusXs">4</string>
-  <string name="borderRadiusSm">12</string>
-  <string name="borderRadiusMd">16</string>
-  <string name="borderRadiusLg">32</string>
-  <string name="borderRadiusXl">40</string>
-  <string name="borderRadiusXxl">64</string>
+  <string name="borderRadiusNone">0px</string>
+  <string name="borderRadiusXs">4px</string>
+  <string name="borderRadiusSm">12px</string>
+  <string name="borderRadiusMd">16px</string>
+  <string name="borderRadiusLg">32px</string>
+  <string name="borderRadiusXl">40px</string>
+  <string name="borderRadiusXxl">64px</string>
   <string name="borderWidthNone">0</string>
   <string name="borderWidthThin">1px</string>
   <string name="borderWidthDefault">2px</string>

diff --git a/src/css/button/button.css b/src/css/button/button.css
@@ -3,6 +3,6 @@
  */
 
 :root {
-  --button-border-radius: 32;
+  --button-border-radius: 32px;
   --button-border-width: 8px;
 }
diff --git a/src/css/card/card.css b/src/css/card/card.css
@@ -3,6 +3,6 @@
  */
 
 :root {
-  --card-border-radius: 12;
+  --card-border-radius: 12px;
   --card-padding: 16px;
 }
diff --git a/src/css/styles/primitive.css b/src/css/styles/primitive.css
@@ -26,13 +26,13 @@
   --spacing-14: 96;
   --spacing-15: 128;
   --spacing-16: 160;
-  --border-radius-none: 0;
-  --border-radius-xs: 4;
-  --border-radius-sm: 12;
-  --border-radius-md: 16;
-  --border-radius-lg: 32;
-  --border-radius-xl: 40;
-  --border-radius-xxl: 64;
+  --border-radius-none: 0px;
+  --border-radius-xs: 4px;
+  --border-radius-sm: 12px;
+  --border-radius-md: 16px;
+  --border-radius-lg: 32px;
+  --border-radius-xl: 40px;
+  --border-radius-xxl: 64px;
   --border-width-none: 0;
   --border-width-thin: 1px;
   --border-width-default: 2px;

diff --git a/src/js/button/button.js b/src/js/button/button.js
@@ -2,5 +2,5 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const buttonBorderRadius = "32";
+export const buttonBorderRadius = "32px";
 export const buttonBorderWidth = "8px";
diff --git a/src/js/card/card.js b/src/js/card/card.js
@@ -2,5 +2,5 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const cardBorderRadius = "12";
+export const cardBorderRadius = "12px";
 export const cardPadding = "16px";
diff --git a/src/js/styles/primitive.js b/src/js/styles/primitive.js
@@ -25,13 +25,13 @@ export const spacing13 = "80";
 export const spacing14 = "96";
 export const spacing15 = "128";
 export const spacing16 = "160";
-export const borderRadiusNone = "0";
-export const borderRadiusXs = "4";
-export const borderRadiusSm = "12";
-export const borderRadiusMd = "16";
-export const borderRadiusLg = "32";
-export const borderRadiusXl = "40";
-export const borderRadiusXxl = "64";
+export const borderRadiusNone = "0px";
+export const borderRadiusXs = "4px";
+export const borderRadiusSm = "12px";
+export const borderRadiusMd = "16px";
+export const borderRadiusLg = "32px";
+export const borderRadiusXl = "40px";
+export const borderRadiusXxl = "64px";
 export const borderWidthNone = "0";
 export const borderWidthThin = "1px";
 export const borderWidthDefault = "2px";

diff --git a/src/scss/button/button.scss b/src/scss/button/button.scss
@@ -1,5 +1,5 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$buttonBorderRadius: 32;
+$buttonBorderRadius: 32px;
 $buttonBorderWidth: 8px;
diff --git a/src/scss/card/card.scss b/src/scss/card/card.scss
@@ -1,5 +1,5 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$cardBorderRadius: 12;
+$cardBorderRadius: 12px;
 $cardPadding: 16px;
diff --git a/src/scss/styles/primitive.scss b/src/scss/styles/primitive.scss
@@ -24,13 +24,13 @@ $spacing13: 80;
 $spacing14: 96;
 $spacing15: 128;
 $spacing16: 160;
-$borderRadiusNone: 0;
-$borderRadiusXs: 4;
-$borderRadiusSm: 12;
-$borderRadiusMd: 16;
-$borderRadiusLg: 32;
-$borderRadiusXl: 40;
-$borderRadiusXxl: 64;
+$borderRadiusNone: 0px;
+$borderRadiusXs: 4px;
+$borderRadiusSm: 12px;
+$borderRadiusMd: 16px;
+$borderRadiusLg: 32px;
+$borderRadiusXl: 40px;
+$borderRadiusXxl: 64px;
 $borderWidthNone: 0;
 $borderWidthThin: 1px;
 $borderWidthDefault: 2px;

diff --git a/tokens/primitive.json b/tokens/primitive.json
@@ -97,31 +97,31 @@
   },
   "borderRadius": {
     "none": {
-      "value": "{spacing.0}",
+      "value": "{spacing.0}px",
       "type": "borderRadius"
     },
     "xs": {
-      "value": "{spacing.1}",
+      "value": "{spacing.1}px",
       "type": "borderRadius"
     },
     "sm": {
-      "value": "{spacing.3}",
+      "value": "{spacing.3}px",
       "type": "borderRadius"
     },
     "md": {
-      "value": "{spacing.4}",
+      "value": "{spacing.4}px",
       "type": "borderRadius"
     },
     "lg": {
-      "value": "{spacing.7}",
+      "value": "{spacing.7}px",
       "type": "borderRadius"
     },
     "xl": {
-      "value": "{spacing.9}",
+      "value": "{spacing.9}px",
       "type": "borderRadius"
     },
     "xxl": {
-      "value": "{spacing.12}",
+      "value": "{spacing.12}px",
       "type": "borderRadius"
     }
   },