feat(tokens): add new tokens for border-radius

Slack: https://skypicker.slack.com/archives/C7T7QG7M5/p1719493641111859
kiwicom · Jul 16, 2024 · 5f1ef03 · 5f1ef03
1 parent 2ea85da
commit 5f1ef03
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 10 deletions.
diff --git a/packages/orbit-design-tokens/output/deprecated-tokens.json b/packages/orbit-design-tokens/output/deprecated-tokens.json
@@ -2032,6 +2032,21 @@
     "category": "Border radius",
     "version": "8.0.0"
   },
+  "borderRadiusSmall": {
+    "replacement": "borderRadius50",
+    "category": "Border radius",
+    "version": "16.0.0"
+  },
+  "borderRadiusNormal": {
+    "replacement": "borderRadius100",
+    "category": "Border radius",
+    "version": "16.0.0"
+  },
+  "borderRadiusLarge": {
+    "replacement": "borderRadius150",
+    "category": "Border radius",
+    "version": "16.0.0"
+  },
   "widthBreakpointMediumMobile": {
     "replacement": "breakpointMediumMobile",
     "category": "Breakpoints",

diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json
@@ -16413,6 +16413,116 @@
       "value": "transparent"
     }
   },
+  "borderRadius50": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "50"
+    },
+    "javascript": {
+      "name": "borderRadius50",
+      "value": "2px"
+    },
+    "foundation": {
+      "name": "borderRadius50",
+      "value": "foundation.borderRadius.50"
+    },
+    "scss": {
+      "name": "borderRadius50",
+      "value": "2px"
+    }
+  },
+  "borderRadius100": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "100"
+    },
+    "javascript": {
+      "name": "borderRadius100",
+      "value": "4px"
+    },
+    "foundation": {
+      "name": "borderRadius100",
+      "value": "foundation.borderRadius.100"
+    },
+    "scss": {
+      "name": "borderRadius100",
+      "value": "4px"
+    }
+  },
+  "borderRadius150": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "150"
+    },
+    "javascript": {
+      "name": "borderRadius150",
+      "value": "6px"
+    },
+    "foundation": {
+      "name": "borderRadius150",
+      "value": "foundation.borderRadius.150"
+    },
+    "scss": {
+      "name": "borderRadius150",
+      "value": "6px"
+    }
+  },
+  "borderRadius300": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "300"
+    },
+    "javascript": {
+      "name": "borderRadius300",
+      "value": "12px"
+    },
+    "foundation": {
+      "name": "borderRadius300",
+      "value": "foundation.borderRadius.300"
+    },
+    "scss": {
+      "name": "borderRadius300",
+      "value": "12px"
+    }
+  },
+  "borderRadius400": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "400"
+    },
+    "javascript": {
+      "name": "borderRadius400",
+      "value": "16px"
+    },
+    "foundation": {
+      "name": "borderRadius400",
+      "value": "foundation.borderRadius.400"
+    },
+    "scss": {
+      "name": "borderRadius400",
+      "value": "16px"
+    }
+  },
   "borderRadiusCircle": {
     "type": "border-radius",
     "deprecated": true,
@@ -16437,8 +16547,8 @@
   },
   "borderRadiusSmall": {
     "type": "border-radius",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "borderRadius50",
     "schema": {
       "namespace": "global",
       "object": "border-radius",
@@ -16459,8 +16569,8 @@
   },
   "borderRadiusNormal": {
     "type": "border-radius",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "borderRadius100",
     "schema": {
       "namespace": "global",
       "object": "border-radius",
@@ -16481,8 +16591,8 @@
   },
   "borderRadiusLarge": {
     "type": "border-radius",
-    "deprecated": false,
-    "replacement": null,
+    "deprecated": true,
+    "replacement": "borderRadius150",
     "schema": {
       "namespace": "global",
       "object": "border-radius",
@@ -16501,6 +16611,28 @@
       "value": "6px"
     }
   },
+  "borderRadiusNone": {
+    "type": "border-radius",
+    "deprecated": false,
+    "replacement": null,
+    "schema": {
+      "namespace": "global",
+      "object": "border-radius",
+      "variant": "none"
+    },
+    "javascript": {
+      "name": "borderRadiusNone",
+      "value": "0"
+    },
+    "foundation": {
+      "name": "borderRadiusNone",
+      "value": "foundation.borderRadius.none"
+    },
+    "scss": {
+      "name": "borderRadiusNone",
+      "value": "0"
+    }
+  },
   "borderRadiusFull": {
     "type": "border-radius",
     "deprecated": false,

diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css
@@ -711,10 +711,16 @@
   --text-white-background: rgba(255, 255, 255, 0.1);
   --text-white-foreground: rgb(255, 255, 255);
   --background-illustration: transparent;
+  --border-radius-50: 2;
+  --border-radius-100: 4;
+  --border-radius-150: 6;
+  --border-radius-300: 12;
+  --border-radius-400: 16;
   --border-radius-circle: 50%;
   --border-radius-small: 2;
   --border-radius-normal: 3;
   --border-radius-large: 6;
+  --border-radius-none: 0;
   --border-radius-full: 9999;
   --breakpoint-medium-mobile: 414;
   --breakpoint-large-mobile: 576;

diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less
@@ -710,10 +710,16 @@
 @text-white-background: rgba(255, 255, 255, 0.1);
 @text-white-foreground: rgb(255, 255, 255);
 @background-illustration: transparent;
+@border-radius-50: 2;
+@border-radius-100: 4;
+@border-radius-150: 6;
+@border-radius-300: 12;
+@border-radius-400: 16;
 @border-radius-circle: 50%;
 @border-radius-small: 2;
 @border-radius-normal: 3;
 @border-radius-large: 6;
+@border-radius-none: 0;
 @border-radius-full: 9999;
 @breakpoint-medium-mobile: 414;
 @breakpoint-large-mobile: 576;

diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss
@@ -723,10 +723,16 @@ $text-critical-foreground: rgb(210, 28, 28);
 $text-white-background: rgba(255, 255, 255, 0.1);
 $text-white-foreground: rgb(255, 255, 255);
 $background-illustration: transparent;
+$border-radius-50: 2px;
+$border-radius-100: 4px;
+$border-radius-150: 6px;
+$border-radius-300: 12px;
+$border-radius-400: 16px;
 $border-radius-circle: 50%;
 $border-radius-small: 2px;
 $border-radius-normal: 3px;
 $border-radius-large: 6px;
+$border-radius-none: 0;
 $border-radius-full: 9999px;
 $breakpoint-medium-mobile: 414;
 $breakpoint-large-mobile: 576;

diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl
@@ -710,10 +710,16 @@ $text-critical-foreground= rgb(210, 28, 28);
 $text-white-background= rgba(255, 255, 255, 0.1);
 $text-white-foreground= rgb(255, 255, 255);
 $background-illustration= transparent;
+$border-radius-50= 2;
+$border-radius-100= 4;
+$border-radius-150= 6;
+$border-radius-300= 12;
+$border-radius-400= 16;
 $border-radius-circle= 50%;
 $border-radius-small= 2;
 $border-radius-normal= 3;
 $border-radius-large= 6;
+$border-radius-none= 0;
 $border-radius-full= 9999;
 $breakpoint-medium-mobile= 414;
 $breakpoint-large-mobile= 576;

diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml
@@ -2847,6 +2847,26 @@
     <name>backgroundIllustration</name>
     <value>transparent</value>
   </token>
+  <token>
+    <name>borderRadius50</name>
+    <value>2</value>
+  </token>
+  <token>
+    <name>borderRadius100</name>
+    <value>4</value>
+  </token>
+  <token>
+    <name>borderRadius150</name>
+    <value>6</value>
+  </token>
+  <token>
+    <name>borderRadius300</name>
+    <value>12</value>
+  </token>
+  <token>
+    <name>borderRadius400</name>
+    <value>16</value>
+  </token>
   <token>
     <name>borderRadiusCircle</name>
     <value>50%</value>
@@ -2863,6 +2883,10 @@
     <name>borderRadiusLarge</name>
     <value>6</value>
   </token>
+  <token>
+    <name>borderRadiusNone</name>
+    <value>0</value>
+  </token>
   <token>
     <name>borderRadiusFull</name>
     <value>9999</value>

diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/foundation/borderRadius.json b/packages/orbit-design-tokens/src/dictionary/definitions/foundation/borderRadius.json
@@ -6,21 +6,51 @@
         "value": "50%",
         "internal": true
       },
+      "none": {
+        "type": "border-radius",
+        "value": 0,
+        "internal": true
+      },
       "small": {
         "type": "border-radius",
         "value": 2,
         "internal": true
       },
+      "50": {
+        "type": "border-radius",
+        "value": 2,
+        "internal": true
+      },
       "normal": {
         "type": "border-radius",
         "value": 3,
         "internal": true
       },
+      "100": {
+        "type": "border-radius",
+        "value": 4,
+        "internal": true
+      },
       "large": {
         "type": "border-radius",
         "value": 6,
         "internal": true
       },
+      "150": {
+        "type": "border-radius",
+        "value": 6,
+        "internal": true
+      },
+      "300": {
+        "type": "border-radius",
+        "value": 12,
+        "internal": true
+      },
+      "400": {
+        "type": "border-radius",
+        "value": 16,
+        "internal": true
+      },
       "full": {
         "type": "border-radius",
         "value": 9999,