From 5f1ef03e9d431f888bcd885afc5b4b3d3158417b Mon Sep 17 00:00:00 2001
From: Robin Cussol <me@robincussol.com>
Date: Fri, 28 Jun 2024 15:29:08 +0200
Subject: [PATCH] feat(tokens): add new tokens for border-radius

Slack: https://skypicker.slack.com/archives/C7T7QG7M5/p1719493641111859
---
 .../output/deprecated-tokens.json             |  15 ++
 .../output/docs-tokens.json                   | 144 +++++++++++++++++-
 .../orbit-design-tokens/output/tokens.css     |   6 +
 .../orbit-design-tokens/output/tokens.less    |   6 +
 .../orbit-design-tokens/output/tokens.scss    |   6 +
 .../orbit-design-tokens/output/tokens.styl    |   6 +
 .../orbit-design-tokens/output/tokens.xml     |  24 +++
 .../definitions/foundation/borderRadius.json  |  30 ++++
 .../definitions/global/borderRadius.json      |  39 ++++-
 .../src/js/createTokens.ts                    |  12 ++
 .../src/js/defaultFoundation.ts               |  20 ++-
 11 files changed, 298 insertions(+), 10 deletions(-)

diff --git a/packages/orbit-design-tokens/output/deprecated-tokens.json b/packages/orbit-design-tokens/output/deprecated-tokens.json
index ed9bb5135a..b20b95589e 100644
--- 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
index 4f2755fe1f..525dd3917b 100644
--- 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
index 9598cca0fb..d1d34e3b53 100644
--- 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
index 37c9b4d703..4418b175a8 100644
--- 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
index 29bf56abce..328775ff0e 100644
--- 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
index 2c3a45b15b..aae090c4c9 100644
--- 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
index 63e1f5d03d..9855b34238 100644
--- 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
index 5f0f5b066f..bdff5e025f 100644
--- 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,
diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/global/borderRadius.json b/packages/orbit-design-tokens/src/dictionary/definitions/global/borderRadius.json
index 6976e37042..19f9a714b6 100644
--- a/packages/orbit-design-tokens/src/dictionary/definitions/global/borderRadius.json
+++ b/packages/orbit-design-tokens/src/dictionary/definitions/global/borderRadius.json
@@ -10,15 +10,48 @@
       },
       "small": {
         "type": "border-radius",
-        "value": "{foundation.border-radius.small}"
+        "value": "{foundation.border-radius.small}",
+        "deprecated": true,
+        "deprecated-replace": "{global.border-radius.50}",
+        "deprecated-version": "16.0.0"
       },
       "normal": {
         "type": "border-radius",
-        "value": "{foundation.border-radius.normal}"
+        "value": "{foundation.border-radius.normal}",
+        "deprecated": true,
+        "deprecated-replace": "{global.border-radius.100}",
+        "deprecated-version": "16.0.0"
       },
       "large": {
         "type": "border-radius",
-        "value": "{foundation.border-radius.large}"
+        "value": "{foundation.border-radius.large}",
+        "deprecated": true,
+        "deprecated-replace": "{global.border-radius.150}",
+        "deprecated-version": "16.0.0"
+      },
+      "none": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.none}"
+      },
+      "50": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.50}"
+      },
+      "100": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.100}"
+      },
+      "150": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.150}"
+      },
+      "300": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.300}"
+      },
+      "400": {
+        "type": "border-radius",
+        "value": "{foundation.border-radius.400}"
       },
       "full": {
         "type": "border-radius",
diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts
index 8899f22583..c55be1a1cf 100644
--- a/packages/orbit-design-tokens/src/js/createTokens.ts
+++ b/packages/orbit-design-tokens/src/js/createTokens.ts
@@ -726,10 +726,16 @@ export interface Tokens {
   textWhiteBackground: string;
   textWhiteForeground: string;
   backgroundIllustration: string;
+  borderRadius50: string;
+  borderRadius100: string;
+  borderRadius150: string;
+  borderRadius300: string;
+  borderRadius400: string;
   borderRadiusCircle: string;
   borderRadiusSmall: string;
   borderRadiusNormal: string;
   borderRadiusLarge: string;
+  borderRadiusNone: string;
   borderRadiusFull: string;
   breakpointMediumMobile: number;
   breakpointLargeMobile: number;
@@ -1654,10 +1660,16 @@ const createTokens: CreateTokens = foundation => ({
   textWhiteBackground: transparentColor(foundation.palette.white.normal, 10),
   textWhiteForeground: foundation.palette.white.normal,
   backgroundIllustration: "transparent",
+  borderRadius50: foundation.borderRadius["50"],
+  borderRadius100: foundation.borderRadius["100"],
+  borderRadius150: foundation.borderRadius["150"],
+  borderRadius300: foundation.borderRadius["300"],
+  borderRadius400: foundation.borderRadius["400"],
   borderRadiusCircle: foundation.borderRadius.circle,
   borderRadiusSmall: foundation.borderRadius.small,
   borderRadiusNormal: foundation.borderRadius.normal,
   borderRadiusLarge: foundation.borderRadius.large,
+  borderRadiusNone: foundation.borderRadius.none,
   borderRadiusFull: foundation.borderRadius.full,
   breakpointMediumMobile: foundation.breakpoint.mediumMobile,
   breakpointLargeMobile: foundation.breakpoint.largeMobile,
diff --git a/packages/orbit-design-tokens/src/js/defaultFoundation.ts b/packages/orbit-design-tokens/src/js/defaultFoundation.ts
index 28ec904c3b..34296cab27 100644
--- a/packages/orbit-design-tokens/src/js/defaultFoundation.ts
+++ b/packages/orbit-design-tokens/src/js/defaultFoundation.ts
@@ -106,7 +106,13 @@ export interface White {
   normalHover: string;
 }
 export interface BorderRadius {
+  50: string;
+  100: string;
+  150: string;
+  300: string;
+  400: string;
   circle: string;
+  none: string;
   small: string;
   normal: string;
   large: string;
@@ -288,7 +294,19 @@ const red = {
 };
 const social = { facebook: "#3B5998", facebookHover: "#385490", facebookActive: "#354F88" };
 const white = { normal: "#FFFFFF", normalActive: "#E7ECF1", normalHover: "#F1F4F7" };
-const borderRadius = { circle: "50%", small: "2px", normal: "3px", large: "6px", full: "9999px" };
+const borderRadius = {
+  50: "2px",
+  100: "4px",
+  150: "6px",
+  300: "12px",
+  400: "16px",
+  circle: "50%",
+  none: "0",
+  small: "2px",
+  normal: "3px",
+  large: "6px",
+  full: "9999px",
+};
 const breakpoint = {
   smallMobile: 320,
   mediumMobile: 414,