feat(tokens): add new tokens json files (#29525)

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. -->

- Added new structure of JSON files that are generated from Figma
Variables
- Adjusted tokens.js script to correctly translate the new JSON format
- Adjusted tokens usage on components and CSS files
- Added html template to auto-generate html preview based on Design
Tokens (wip)
- Updated snapshots, as some tokens values changed, specially colors.

## Does this introduce a breaking change?

- [x] Yes
- [ ] 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

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

core/src/css/ionic/bundle.ionic.scss

@@ -1,8 +1,8 @@
 // Core CSS, always required
-@import "./core.ionic";
+@forward "./core.ionic";
 
 // Global CSS: blocks scrolling, sets box-sizing
-@import "./global.bundle.ionic";
+@forward "./global.bundle.ionic";
 
 // CSS Utils
-@import "./utils.bundle.ionic";
+@forward "./utils.bundle.ionic";

core/src/css/ionic/core.ionic.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 :root {
-  --ionic-global-background-color: #{globals.$ionic-color-neutral-10};
+  --ionic-global-background-color: #{globals.$ionic-color-neutral-100};
   --ionic-global-text-color: #{globals.$ionic-color-neutral-900};
 }
 
@@ -34,7 +34,7 @@ body.backdrop-no-scroll {
 html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
 html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
 html.ios ion-modal ion-footer ion-toolbar:first-of-type {
-  padding-top: globals.$ionic-space-xxs;
+  padding-top: globals.$ionic-space-150;
 }
 
 /**
@@ -44,7 +44,7 @@ html.ios ion-modal ion-footer ion-toolbar:first-of-type {
 */
 html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
 html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
-  padding-bottom: globals.$ionic-space-xxs;
+  padding-bottom: globals.$ionic-space-150;
 }
 
 /**
@@ -53,8 +53,8 @@ html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
 * safe area values when in landscape.
 */
 html.ios ion-modal ion-toolbar {
-  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-xs);
-  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-xs);
+  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-200);
+  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-200);
 }
 
 /**
@@ -250,21 +250,21 @@ ion-card-header.ion-color .ion-inherit-color {
 }
 
 .menu-content-reveal {
-  box-shadow: #{globals.$ionic-elevation-1};
+  box-shadow: #{globals.$ionic-elevation-100};
 }
 
 .menu-content-push {
-  box-shadow: #{globals.$ionic-elevation-1};
+  box-shadow: #{globals.$ionic-elevation-100};
 }
 
 // Accordion Styles
 ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
-  border-top-left-radius: globals.$ionic-border-radius-rounded-medium;
-  border-top-right-radius: globals.$ionic-border-radius-rounded-medium;
+  border-top-left-radius: globals.$ionic-border-radius-200;
+  border-top-right-radius: globals.$ionic-border-radius-200;
 }
 ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
-  border-bottom-left-radius: globals.$ionic-border-radius-rounded-medium;
-  border-bottom-right-radius: globals.$ionic-border-radius-rounded-medium;
+  border-bottom-left-radius: globals.$ionic-border-radius-200;
+  border-bottom-right-radius: globals.$ionic-border-radius-200;
 }
 ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] {
   --border-width: 0;

core/src/css/ionic/global.bundle.ionic.scss

@@ -1,5 +1,5 @@
-@import "../normalize";
-@import "./structure.ionic";
-@import "./typography.ionic";
-@import "./link.ionic";
-@import "./ionic-swiper.ionic";
+@forward "../normalize";
+@forward "./structure.ionic";
+@forward "./typography.ionic";
+@forward "./link.ionic";
+@forward "./ionic-swiper.ionic";

core/src/css/ionic/ionic-swiper.ionic.scss

@@ -5,7 +5,7 @@
 
 .swiper {
   --bullet-background: #{tokens.$ionic-color-neutral-800};
-  --bullet-background-active: #{tokens.$ionic-color-primary};
+  --bullet-background-active: #{tokens.$ionic-color-primary-base};
   --progress-bar-background: rgba(#010408, 0.25);
   --progress-bar-background-active: #{tokens.$ionic-color-primary-600};
   --scroll-bar-background: rgba(#010408, 0.1);

core/src/css/ionic/link.ionic.scss

@@ -7,7 +7,7 @@
 
   align-items: center;
 
-  gap: globals.$ionic-space-xxxs;
+  gap: globals.$ionic-space-100;
 
   transition: color 0.2s ease-in-out;
 

core/src/css/ionic/typography.ionic.scss

@@ -6,9 +6,9 @@ html {
 
 body {
   font-weight: globals.$ionic-font-weight-regular;
-  font-size: globals.$ionic-font-size-m;
+  font-size: globals.$ionic-font-size-350;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 /* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
@@ -31,58 +31,58 @@ h6,
 
 h1,
 .ionic-heading1 {
-  font-size: globals.$ionic-font-size-h1;
+  font-size: #{globals.$ionic-font-size-700};
 
-  line-height: globals.$ionic-font-line-height-xxl;
+  line-height: globals.$ionic-line-height-900;
 }
 
 h2,
 .ionic-heading2 {
-  font-size: globals.$ionic-font-size-h2;
+  font-size: globals.$ionic-font-size-800;
 
-  line-height: globals.$ionic-font-line-height-xl;
+  line-height: globals.$ionic-line-height-800;
 }
 
 h3,
 .ionic-heading3 {
-  font-size: globals.$ionic-font-size-h3;
+  font-size: globals.$ionic-font-size-600;
 
-  line-height: globals.$ionic-font-line-height-xl;
+  line-height: globals.$ionic-line-height-800;
 }
 
 h4,
 .ionic-heading4 {
-  font-size: globals.$ionic-font-size-h4;
+  font-size: globals.$ionic-font-size-550;
 
-  line-height: globals.$ionic-font-line-height-l;
+  line-height: globals.$ionic-line-height-700;
 }
 
 h5,
 .ionic-heading5 {
-  font-size: globals.$ionic-font-size-h5;
+  font-size: globals.$ionic-font-size-500;
 
-  line-height: globals.$ionic-font-line-height-l;
+  line-height: globals.$ionic-line-height-700;
 }
 
 h6,
 .ionic-heading6 {
-  font-size: globals.$ionic-font-size-h6;
+  font-size: globals.$ionic-font-size-450;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 .ionic-display-s {
-  font-size: globals.$ionic-font-size-display-s;
+  font-size: globals.$ionic-font-size-800;
   font-weight: globals.$ionic-font-weight-regular;
 
-  line-height: globals.$ionic-font-line-height-s;
+  line-height: globals.$ionic-line-height-500;
 }
 
 .ionic-display-m {
-  font-size: globals.$ionic-font-size-display-m;
+  font-size: globals.$ionic-font-size-900;
   font-weight: globals.$ionic-font-weight-regular;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 /* Common */

core/src/css/ionic/utils.bundle.ionic.scss

@@ -1 +1 @@
-@import "../../foundations/ionic.utility";
+@forward "../../foundations/ionic.utility";