feat(tokens): update primitive json (#29684)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Update primitive json tokens
- Update generated files on foundations folder.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

## Other Information
[Tokens Preview
Sample](https://ionic-framework-fugbxhshx-ionic1.vercel.app/src/foundations/tokens.preview.html)

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

core/src/foundations/ionic.root.scss

@@ -59,6 +59,7 @@
   --ionic-space-600: 24px;
   --ionic-space-700: 28px;
   --ionic-space-800: 32px;
+  --ionic-space-850: 34px;
   --ionic-space-900: 36px;
   --ionic-space-1000: 40px;
   --ionic-space-1200: 48px;
@@ -68,6 +69,7 @@
   --ionic-border-radius-200: 8px;
   --ionic-border-radius-300: 12px;
   --ionic-border-radius-400: 16px;
+  --ionic-border-radius-500: 20px;
   --ionic-border-radius-800: 32px;
   --ionic-border-radius-1000: 40px;
   --ionic-border-radius-050: 2px;
@@ -593,6 +595,7 @@
   --ionic-scale-600: 24px;
   --ionic-scale-700: 28px;
   --ionic-scale-800: 32px;
+  --ionic-scale-850: 34px;
   --ionic-scale-900: 36px;
   --ionic-scale-1000: 40px;
   --ionic-scale-1100: 44px;
@@ -602,7 +605,10 @@
   --ionic-scale-1800: 72px;
   --ionic-scale-2000: 80px;
   --ionic-scale-2400: 96px;
+  --ionic-scale-2800: 112px;
   --ionic-scale-3200: 128px;
+  --ionic-scale-3400: 136px;
+  --ionic-scale-3600: 144px;
   --ionic-scale-4000: 160px;
   --ionic-scale-5000: 200px;
   --ionic-scale-6200: 248px;

core/src/foundations/ionic.utility.scss

@@ -331,6 +331,24 @@
   @include padding($ionic-space-800);
 }
 
+.ionic-margin-space-850 {
+  --margin-start: #{$ionic-space-850};
+  --margin-end: #{$ionic-space-850};
+  --margin-top: #{$ionic-space-850};
+  --margin-bottom: #{$ionic-space-850};
+
+  @include margin($ionic-space-850);
+}
+
+.ionic-padding-space-850 {
+  --padding-start: #{$ionic-space-850};
+  --padding-end: #{$ionic-space-850};
+  --padding-top: #{$ionic-space-850};
+  --padding-bottom: #{$ionic-space-850};
+
+  @include padding($ionic-space-850);
+}
+
 .ionic-margin-space-900 {
   --margin-start: #{$ionic-space-900};
   --margin-end: #{$ionic-space-900};
@@ -417,6 +435,9 @@
 .ionic-border-radius-400 {
   border-radius: $ionic-border-radius-400;
 }
+.ionic-border-radius-500 {
+  border-radius: $ionic-border-radius-500;
+}
 .ionic-border-radius-800 {
   border-radius: $ionic-border-radius-800;
 }

core/src/foundations/ionic.vars.scss

@@ -90,6 +90,7 @@ $ionic-space-500: var(--ionic-space-500, 20px);
 $ionic-space-600: var(--ionic-space-600, 24px);
 $ionic-space-700: var(--ionic-space-700, 28px);
 $ionic-space-800: var(--ionic-space-800, 32px);
+$ionic-space-850: var(--ionic-space-850, 34px);
 $ionic-space-900: var(--ionic-space-900, 36px);
 $ionic-space-1000: var(--ionic-space-1000, 40px);
 $ionic-space-1200: var(--ionic-space-1200, 48px);
@@ -99,6 +100,7 @@ $ionic-border-radius-100: var(--ionic-border-radius-100, 4px);
 $ionic-border-radius-200: var(--ionic-border-radius-200, 8px);
 $ionic-border-radius-300: var(--ionic-border-radius-300, 12px);
 $ionic-border-radius-400: var(--ionic-border-radius-400, 16px);
+$ionic-border-radius-500: var(--ionic-border-radius-500, 20px);
 $ionic-border-radius-800: var(--ionic-border-radius-800, 32px);
 $ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px);
 $ionic-border-radius-050: var(--ionic-border-radius-050, 2px);
@@ -624,6 +626,7 @@ $ionic-scale-500: var(--ionic-scale-500, 20px);
 $ionic-scale-600: var(--ionic-scale-600, 24px);
 $ionic-scale-700: var(--ionic-scale-700, 28px);
 $ionic-scale-800: var(--ionic-scale-800, 32px);
+$ionic-scale-850: var(--ionic-scale-850, 34px);
 $ionic-scale-900: var(--ionic-scale-900, 36px);
 $ionic-scale-1000: var(--ionic-scale-1000, 40px);
 $ionic-scale-1100: var(--ionic-scale-1100, 44px);
@@ -633,7 +636,10 @@ $ionic-scale-1600: var(--ionic-scale-1600, 64px);
 $ionic-scale-1800: var(--ionic-scale-1800, 72px);
 $ionic-scale-2000: var(--ionic-scale-2000, 80px);
 $ionic-scale-2400: var(--ionic-scale-2400, 96px);
+$ionic-scale-2800: var(--ionic-scale-2800, 112px);
 $ionic-scale-3200: var(--ionic-scale-3200, 128px);
+$ionic-scale-3400: var(--ionic-scale-3400, 136px);
+$ionic-scale-3600: var(--ionic-scale-3600, 144px);
 $ionic-scale-4000: var(--ionic-scale-4000, 160px);
 $ionic-scale-5000: var(--ionic-scale-5000, 200px);
 $ionic-scale-6200: var(--ionic-scale-6200, 248px);

core/src/foundations/tokens.preview.html

@@ -1657,6 +1657,8 @@
 
           <div class="border-token" style="border-radius: 16px">-border-radius-400 (16px)</div>
 
+          <div class="border-token" style="border-radius: 20px">-border-radius-500 (20px)</div>
+
           <div class="border-token" style="border-radius: 32px">-border-radius-800 (32px)</div>
 
           <div class="border-token" style="border-radius: 40px">-border-radius-1000 (40px)</div>
@@ -1725,6 +1727,10 @@
             <div class="space-token" style="margin: 32px">-space-800 (32px)</div>
           </div>
 
+          <div class="spacing-wrapper">
+            <div class="space-token" style="margin: 34px">-space-850 (34px)</div>
+          </div>
+
           <div class="spacing-wrapper">
             <div class="space-token" style="margin: 36px">-space-900 (36px)</div>
           </div>

core/src/foundations/tokens/primitives.value.tokens.json

@@ -148,10 +148,6 @@
       "$type": "dimension",
       "$value": "{scale.0}"
     },
-    "050": {
-      "$type": "dimension",
-      "$value": "{scale.050}"
-    },
     "100": {
       "$type": "dimension",
       "$value": "{scale.100}"
@@ -192,6 +188,10 @@
       "$type": "dimension",
       "$value": "{scale.800}"
     },
+    "850": {
+      "$type": "dimension",
+      "$value": "{scale.850}"
+    },
     "900": {
       "$type": "dimension",
       "$value": "{scale.900}"
@@ -203,6 +203,10 @@
     "1200": {
       "$type": "dimension",
       "$value": "{scale.1200}"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
     }
   },
   "border-radius": {
@@ -210,10 +214,6 @@
       "$type": "dimension",
       "$value": "{scale.0}"
     },
-    "050": {
-      "$type": "dimension",
-      "$value": "{scale.050}"
-    },
     "100": {
       "$type": "dimension",
       "$value": "{scale.100}"
@@ -230,6 +230,10 @@
       "$type": "dimension",
       "$value": "{scale.400}"
     },
+    "500": {
+      "$type": "dimension",
+      "$value": "{scale.500}"
+    },
     "800": {
       "$type": "dimension",
       "$value": "{scale.800}"
@@ -238,6 +242,10 @@
       "$type": "dimension",
       "$value": "{scale.1000}"
     },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
+    },
     "full": {
       "$type": "dimension",
       "$value": "999px"
@@ -1120,6 +1128,10 @@
       "$type": "dimension",
       "$value": "32px"
     },
+    "850": {
+      "$type": "dimension",
+      "$value": "34px"
+    },
     "900": {
       "$type": "dimension",
       "$value": "36px"
@@ -1156,10 +1168,22 @@
       "$type": "dimension",
       "$value": "96px"
     },
+    "2800": {
+      "$type": "dimension",
+      "$value": "112px"
+    },
     "3200": {
       "$type": "dimension",
       "$value": "128px"
     },
+    "3400": {
+      "$type": "dimension",
+      "$value": "136px"
+    },
+    "3600": {
+      "$type": "dimension",
+      "$value": "144px"
+    },
     "4000": {
       "$type": "dimension",
       "$value": "160px"