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/package.json

@@ -77,7 +77,7 @@
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix && npm run prettier.tokens",
+    "build.tokens": "node ./scripts/tokens/index.js && npm run lint.sass.fix && npm run prettier.tokens",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",

core/scripts/tokens.js

@@ -1,197 +0,0 @@
-/* For generating Design Tokens, we use Style Dictionary for several reasons:
-- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-- It can easily scale to different necessities we might have in the future.
-*/
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const StyleDictionary = require('style-dictionary');
-
-const { fileHeader } = StyleDictionary.formatHelpers;
-
-// Empty for as an example of how we can add some extra variables, not from the tokens JSON
-const customVariables = ``;
-
-// Prefix for all generated variables
-const variablesPrefix = 'ionic';
-
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-// CSS vanilla :root format
-StyleDictionary.registerFormat({
-  name: 'rootFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
-        rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
-      }`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      ':root {\n' +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n}\n'
-    );
-  },
-});
-
-// scss variables format
-StyleDictionary.registerFormat({
-  name: 'scssVariablesFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
-        rgb
-          ? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
-          : ``
-      }`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n'
-    );
-  },
-});
-
-// Create utility-classes
-StyleDictionary.registerFormat({
-  name: 'cssUtilityClassesFormat',
-  formatter({ dictionary, file }) {
-    const utilityClasses = dictionary.allProperties.map((prop) => {
-      let tokenType = prop.attributes.category;
-      const className = `${prop.name}`;
-      let utilityClass = '';
-
-      switch (tokenType) {
-        case 'color':
-          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
-.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
-          break;
-        case 'border':
-          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'font':
-          let fontAttribute;
-          switch (prop.attributes.type) {
-            case 'size':
-              fontAttribute = 'font-size';
-              break;
-            case 'weight':
-              fontAttribute = 'font-weight';
-              break;
-            case 'line-height':
-              fontAttribute = 'line-height';
-              break;
-            case 'letter-spacing':
-              fontAttribute = 'letter-spacing';
-              break;
-            case 'family':
-              return;
-          }
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'elevation':
-          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
-          break;
-        case 'space':
-          utilityClass = `.${variablesPrefix}-margin-${className} {\n  --margin-start: #{$ionic-${prop.name}};\n  --margin-end: #{$ionic-${prop.name}};\n  --margin-top: #{$ionic-${prop.name}};\n  --margin-bottom: #{$ionic-${prop.name}};\n\n  @include margin(${prop.value});\n};\n 
-.${variablesPrefix}-padding-${className} {\n  --padding-start: #{$ionic-${prop.name}};\n  --padding-end: #{$ionic-${prop.name}};\n  --padding-top: #{$ionic-${prop.name}};\n  --padding-bottom: #{$ionic-${prop.name}};\n\n  @include padding(${prop.value});\n};\n`;
-          break;
-        default:
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
-      }
-
-      return utilityClass;
-    });
-
-    return [
-      fileHeader({ file }),
-      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
-      utilityClasses.join('\n'),
-    ].join('\n');
-  },
-});
-
-// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
-const w3cTokenJsonParser = {
-  pattern: /\.json|\.tokens\.json|\.tokens$/,
-  parse({ contents }) {
-    // replace $value with value so that style dictionary recognizes it
-    var preparedContent = (contents || '{}')
-      .replace(/"\$?value":/g, '"value":')
-      // convert $description to comment
-      .replace(/"\$?description":/g, '"comment":');
-    //
-
-    return JSON.parse(preparedContent);
-  },
-};
-
-StyleDictionary.registerParser(w3cTokenJsonParser);
-
-// Generate Tokens
-StyleDictionary.extend({
-  source: ['./src/foundations/*.json'],
-  platforms: {
-    css: {
-      buildPath: './src/foundations/',
-      transformGroup: 'css',
-      files: [
-        {
-          destination: 'ionic.root.scss',
-          format: 'rootFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-    scss: {
-      buildPath: './src/foundations/',
-      transformGroup: 'scss',
-      files: [
-        {
-          destination: 'ionic.vars.scss',
-          format: 'scssVariablesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-        {
-          destination: 'ionic.utility.scss',
-          format: 'cssUtilityClassesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-  },
-  fileHeader: {
-    myFileHeader: () => {
-      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
-    },
-  },
-}).buildAllPlatforms();

core/scripts/tokens/index.js

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// For generating Design Tokens, we use Style Dictionary for several reasons:
+// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+// - It can easily scale to different necessities we might have in the future.
+
+const StyleDictionary = require('style-dictionary');
+
+const targetPath = './src/foundations/';
+
+const {
+  variablesPrefix,
+  hexToRgb,
+  generateShadowValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+} = require('./utilities');
+
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    /*
+     * This will loop through all tokens and based on the type it will
+     * call a utility function that will return the expected format for the CSS Variable
+     */
+    const prefixedVariables = dictionary.allProperties
+      .filter((prop) => prop['$type'] !== 'typography')
+      .map((prop) => {
+        if (prop.attributes.category.startsWith('Elevation')) {
+          const cssShadow = prop.value.map(generateShadowValue).join(', ');
+          return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
+        } else if (prop.attributes.category.match('font-family')) {
+          return generateFontFamilyValue(prop);
+        } else {
+          // TODO(ROU-4870): prevent colors with 8 characters to be created without a rgb transformation
+          const rgb = hexToRgb(prop.value);
+          return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
+            rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
+          }`;
+        }
+      });
+
+    return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + '\n}\n';
+  },
+});
+
+// SCSS variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  formatter({ dictionary, file }) {
+    const typographyProperties = dictionary.allProperties.filter((prop) => prop['$type'] === 'typography');
+    const otherProperties = dictionary.allProperties.filter((prop) => prop['$type'] !== 'typography');
+
+    // Make sure the reused scss variables are defined first, to avoid compilation errors
+    const sortedProperties = [...otherProperties, ...typographyProperties];
+
+    const prefixedVariables = sortedProperties.map((prop) => {
+      if (prop.attributes.category.startsWith('Elevation')) {
+        const cssShadow = prop.value.map(generateShadowValue).join(', ');
+        return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
+      } else if (prop.attributes.category.match('font-family')) {
+        return generateFontFamilyValue(prop, 'scss');
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyValue(prop, dictionary);
+      } else {
+        return generateRgbValue(prop);
+      }
+    });
+
+    return fileHeader({ file }) + prefixedVariables.join('\n') + '\n';
+  },
+});
+
+// Create utility-classes
+StyleDictionary.registerFormat({
+  name: 'cssUtilityClassesFormat',
+  formatter({ dictionary, file }) {
+    const utilityClasses = dictionary.allProperties.map((prop) => {
+      let tokenType = prop.attributes.category;
+      const className = `${prop.name}`;
+      let utilityClass = '';
+
+      if (tokenType.startsWith('Elevation')) {
+        return `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyUtilityClass(prop, dictionary);
+        /*
+         * Not creating for the tokens below, as they make no sense to exist as utility-classes.
+         * Font-family should be defined on global scope, not component.
+         * Scale its an abstract token group, to be used by other tokens, like the space ones.
+         */
+      } else if (prop.attributes.category.match('font-family') || tokenType === 'scale') {
+        return;
+      }
+
+      const tokenTypeLower = tokenType.toLowerCase();
+
+      switch (tokenTypeLower) {
+        case 'color':
+        case 'state':
+        case 'guidelines':
+        case 'disabled':
+        case 'hover':
+        case 'pressed':
+          utilityClass = generateColorUtilityClasses(prop, className);
+          break;
+        case 'border-size':
+          utilityClass = `.${variablesPrefix}-${className} {\n  border-width: $ionic-${prop.name};\n}`;
+          break;
+        case 'font':
+          utilityClass = generateFontUtilityClass(prop, className);
+          break;
+        case 'space':
+          utilityClass = generateSpaceUtilityClasses(prop, className);
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }
+
+      return utilityClass;
+    });
+
+    return [
+      fileHeader({ file }),
+      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+      utilityClasses.join('\n'),
+    ].join('\n');
+  },
+});
+
+// Custom transform to ensure unique token names
+StyleDictionary.registerTransform({
+  name: 'name/cti/kebab-unique',
+  type: 'name',
+  transformer: function (prop, options) {
+    return [options.prefix].concat(prop.path).join('-').toLowerCase();
+  },
+});
+
+// Register the custom transform group for html file generation
+StyleDictionary.registerTransformGroup({
+  name: 'custom',
+  transforms: ['attribute/cti', 'name/cti/kebab-unique', 'size/rem', 'color/css'],
+});
+
+// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
+const w3cTokenJsonParser = {
+  pattern: /\.json|\.tokens\.json|\.tokens$/,
+  parse({ contents }) {
+    // replace $value with value so that style dictionary recognizes it
+    var preparedContent = (contents || '{}')
+      .replace(/"\$?value":/g, '"value":')
+      // convert $description to comment
+      .replace(/"\$?description":/g, '"comment":');
+    //
+
+    return JSON.parse(preparedContent);
+  },
+};
+
+StyleDictionary.registerParser(w3cTokenJsonParser);
+
+// Generate Tokens
+StyleDictionary.extend({
+  source: ['./src/foundations/tokens/*.json', './src/foundations/tokens/theme/*.json'],
+  platforms: {
+    css: {
+      buildPath: targetPath,
+      transformGroup: 'css',
+      files: [
+        {
+          destination: 'ionic.root.scss',
+          format: 'rootFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    scss: {
+      buildPath: targetPath,
+      transformGroup: 'scss',
+      files: [
+        {
+          destination: 'ionic.vars.scss',
+          format: 'scssVariablesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+        {
+          destination: 'ionic.utility.scss',
+          format: 'cssUtilityClassesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+  },
+  fileHeader: {
+    myFileHeader: () => {
+      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
+    },
+  },
+}).buildAllPlatforms();

core/scripts/tokens/utilities.js

@@ -0,0 +1,147 @@
+const variablesPrefix = 'ionic'; // Variable that holds the prefix used on all css and scss variables generated
+
+// Generates translate an hex color value to rgb
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+function generateShadowValue(shadow) {
+  return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${shadow.color}`;
+}
+
+// Generates a valid font-family value from a font-family Design Token structure
+function generateFontFamilyValue(prop, variableType = 'css') {
+  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
+  const propName = prop.name.split('-').slice(0, -1).join('-');
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, "${prop.value}", sans-serif);`
+    : `--${variablesPrefix}-${propName}: "${prop.value}", sans-serif;`;
+}
+
+// Generates a typography based scss map from a typography Design Token structure
+function generateTypographyValue(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  $${variablesPrefix}-${prop.name}: (
+    font-family: $ionic-font-family,
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
+    text-transform: ${typography.textTransform},
+    text-decoration: ${typography.textDecoration}
+  );
+  `;
+}
+
+// To abstract the need to loop across all tokens from a given type
+function getTypeMap(dictionary, type) {
+  return Object.fromEntries(
+    Object.entries(dictionary.properties[type]).map(([key, token]) => [token.value, token.attributes.type])
+  );
+}
+
+// Generates a rgb color value, based on a color Design Token
+function generateRgbValue(prop) {
+  const rgb = hexToRgb(prop.value);
+  let rgbDeclaration = '';
+
+  // If the token is color, also add a rgb variable using the same color
+  if (rgb) {
+    rgbDeclaration = `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
+  }
+
+  return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${rgbDeclaration}`;
+}
+
+// Generates a typography based css utility-class from a typography Design Token structure
+function generateTypographyUtilityClass(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  .${variablesPrefix}-${prop.name} {
+    font-family: $ionic-font-family;
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
+    text-transform: ${typography.textTransform};
+    text-decoration: ${typography.textDecoration};
+  };
+  `;
+}
+
+// Generates a color based css utility-class from a color Design Token structure
+function generateColorUtilityClasses(prop, className) {
+  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+}
+
+// Generates a font based css utility-class from a font Design Token structure
+function generateFontUtilityClass(prop, className) {
+  let fontAttribute;
+  switch (prop.attributes.type) {
+    case 'size':
+      fontAttribute = 'font-size';
+      break;
+    case 'weight':
+      fontAttribute = 'font-weight';
+      break;
+    case 'line-height':
+      fontAttribute = 'line-height';
+      break;
+    case 'letter-spacing':
+      fontAttribute = 'letter-spacing';
+      break;
+  }
+  return `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+}
+
+// Generates a margin or padding based css utility-class from a space Design Token structure
+function generateSpaceUtilityClasses(prop, className) {
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  const marginPaddingTemplate = (type) => `
+.${variablesPrefix}-${type}-${className} {
+  --${type}-start: #{$ionic-${prop.name}};
+  --${type}-end: #{$ionic-${prop.name}};
+  --${type}-top: #{$ionic-${prop.name}};
+  --${type}-bottom: #{$ionic-${prop.name}};
+
+  @include ${type}($ionic-${prop.name});
+};`;
+
+  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Export all methods to be used on the tokens.js script
+module.exports = {
+  variablesPrefix,
+  hexToRgb,
+  generateShadowValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+};

core/src/components/button/button.ionic.scss

@@ -132,20 +132,20 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-medium};
+  --border-radius: #{globals.$ionic-border-radius-200};
 }
 
 :host(.button-soft.button-xsmall),
 :host(.button-soft.button-small) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
 :host(.button-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-full};
+  --border-radius: #{globals.$ionic-border-radius-full};
 }
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Button Focused

core/src/components/card/card.ionic.scss

@@ -4,15 +4,15 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ionic-color-neutral-0};
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --background: #{globals.$ionic-color-base-white};
+  --border-radius: #{globals.$ionic-border-radius-100};
 
-  @include globals.padding(globals.$ionic-space-base);
+  @include globals.padding(globals.$ionic-space-400);
   @include globals.border-radius(var(--border-radius));
 
   display: block;
 
-  border: #{globals.$ionic-border-size-small} solid #{globals.$ionic-color-neutral-50};
+  border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500};
 
   background: var(--background);
   color: var(--color);
@@ -22,9 +22,9 @@
 // ---------------------------------------------
 
 :host(.card-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-large};
+  --border-radius: #{globals.$ionic-border-radius-400};
 }
 
 :host(.card-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }

core/src/components/chip/chip.ionic.scss

@@ -9,13 +9,13 @@ $ionic-states-focus-primary: #9ec4fd;
 $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
 
 :host {
-  --background: #{globals.$ionic-color-neutral-10};
+  --background: #{globals.$ionic-color-neutral-100};
   --color: #{globals.$ionic-color-neutral-900};
   --focus-ring-color: #{$ionic-states-focus-primary};
-  --focus-ring-width: #{globals.$ionic-border-size-medium};
+  --focus-ring-width: #{globals.$ionic-border-size-050};
 
   @include globals.font-smoothing;
-  @include globals.padding(globals.$ionic-space-xxs, globals.$ionic-space-xs);
+  @include globals.padding(globals.$ionic-space-150, globals.$ionic-space-200);
   @include globals.border-radius(var(--border-radius));
 
   display: inline-flex;
@@ -25,7 +25,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
   align-items: center;
   justify-content: center;
 
-  gap: globals.$ionic-space-xxxs;
+  gap: globals.$ionic-space-100;
 
   background: var(--background);
   color: var(--color);
@@ -33,7 +33,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
   font-family: globals.$ionic-font-family;
   font-weight: globals.$ionic-font-weight-medium;
 
-  line-height: globals.$ionic-font-line-height-full;
+  line-height: globals.$ionic-line-height-full;
 
   cursor: pointer;
 
@@ -49,7 +49,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 
 :host(.chip-outline) {
   --background: transparent;
-  border-width: globals.$ionic-border-size-small;
+  border-width: globals.$ionic-border-size-025;
 
   border-color: globals.$ionic-color-neutral-100;
 }
@@ -83,21 +83,21 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 // ---------------------------------------------
 
 :host(.chip-soft) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
 :host(.chip-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-large};
+  --border-radius: #{globals.$ionic-border-radius-400};
 }
 
 :host(.chip-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Chip Icon
 // ---------------------------------------------
 ::slotted(ion-icon) {
-  font-size: globals.$ionic-font-size-l;
+  font-size: globals.$ionic-font-size-400;
 }
 
 // Size
@@ -106,11 +106,11 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 :host(.chip-small) {
   min-height: 24px;
 
-  font-size: #{tokens.$ionic-font-size-s};
+  font-size: #{tokens.$ionic-font-size-300};
 }
 
 :host(.chip-large) {
   min-height: 32px;
 
-  font-size: globals.$ionic-font-size-m;
+  font-size: globals.$ionic-font-size-350;
 }

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -14,5 +14,5 @@
   height: 52px;
   gap: 12px;
 
-  box-shadow: tokens.$ionic-elevation-2;
+  box-shadow: tokens.$ionic-elevation-200;
 }

core/src/components/tab-bar/tab-bar.ionic.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the tab bar
-$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-neutral-0);
+$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-base-white);
 
 /// @prop - Background color of the tab bar button when activated
 // TODO(FW-6186): use design token here when it is added

core/src/components/tab-button/tab-button.ionic.scss

@@ -9,7 +9,7 @@
   --focus-ring-color: #9ec4fd;
   --focus-ring-width: 2px;
 
-  @include border-radius(tokens.$ionic-border-radius-rounded-medium);
+  @include border-radius(tokens.$ionic-border-radius-200);
 }
 
 // Tab Button Focused

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";

core/src/foundations/README.md

@@ -8,15 +8,17 @@ Design tokens represent small, repeated design decisions that make up a design s
 
 ## Design Tokens Architecture
 
-The Ionic Design Tokens are stored on `core/src/foundations/_design-tokens.json`.
+The Ionic Design Tokens are stored on `core/src/foundations/tokens`. Here we have the abstract primitive tokens that will be common between all themes.
+Inside the `core/src/foundations/tokens/theme` we have the tokens that are specific to the new IOnic Theme, like primary colors, font-family and color states.
 
-Currently, five categories of tokens are stored:
+Currently, six categories of tokens are stored:
 
 - Colors
 - Font
-- Space
+- Scale
 - Border
 - Elevation
+- Z-index
 
 Using [Style Dictionary](https://amzn.github.io/style-dictionary/), these tokens generate 3 files inside `core/src/foundations`:
 
@@ -56,19 +58,19 @@ Examples:
 CSS Custom Property:
 
 ```css
---ionic-color-primary-10
+--ionic-color-primary-100
 ```
 
 SCSS Variable:
 
 ```scss
-$ionic-color-primary-10
+$ionic-color-primary-100
 ```
 
 Utility class:
 
 ```css
-.ionic-color-primary-10
+.ionic-color-primary-100
 ```
 
 ## When to change the Design Tokens
@@ -97,7 +99,7 @@ Usage example (Chip Component):
 @use '../../themes/ionic/ionic.globals.scss' as globals;
 
 :host {
-  --background: #{globals.$ionic-color-neutral-10};
+  --background: #{globals.$ionic-color-neutral-100};
   color: globals.$ionic-color-neutral-900;
   @include globals.font-smoothing;
 }

core/src/foundations/_design-tokens.json

@@ -1,432 +0,0 @@
-{
-  "color": {
-    "$type": "color",
-    "primary": {
-      "{}": {
-        "$value": "{color.primary.400}"
-      },
-      "10": {
-        "$value": "#f7faff"
-      },
-      "50": {
-        "$value": "#cbdffe"
-      },
-      "100": {
-        "$value": "#9ec4fd"
-      },
-      "200": {
-        "$value": "#74aafc"
-      },
-      "300": {
-        "$value": "#4991fb"
-      },
-      "400": {
-        "$value": "#1068eb"
-      },
-      "500": {
-        "$value": "#0750be"
-      },
-      "600": {
-        "$value": "#053d90"
-      },
-      "700": {
-        "$value": "#062b63"
-      },
-      "800": {
-        "$value": "#061935"
-      },
-      "900": {
-        "$value": "#010408"
-      }
-    },
-    "secondary": {
-      "$value": "#303d60"
-    },
-    "neutral": {
-      "0": {
-        "$value": "#ffffff"
-      },
-      "10": {
-        "$value": "#f5f5f5"
-      },
-      "50": {
-        "$value": "#e7e7e7"
-      },
-      "100": {
-        "$value": "#dadada"
-      },
-      "200": {
-        "$value": "#c9c9c9"
-      },
-      "300": {
-        "$value": "#b8b8b8"
-      },
-      "400": {
-        "$value": "#9a9a9a"
-      },
-      "500": {
-        "$value": "#767676"
-      },
-      "600": {
-        "$value": "#535353"
-      },
-      "700": {
-        "$value": "#373737"
-      },
-      "800": {
-        "$value": "#212121"
-      },
-      "900": {
-        "$value": "#05080f"
-      }
-    },
-    "error": {
-      "{}": {
-        "$value": "{color.error.400}"
-      },
-      "10": {
-        "$value": "#fffafa"
-      },
-      "50": {
-        "$value": "#ffd5d5"
-      },
-      "100": {
-        "$value": "#ffafaf"
-      },
-      "200": {
-        "$value": "#ff8a8a"
-      },
-      "300": {
-        "$value": "#ff6666"
-      },
-      "400": {
-        "$value": "#f72c2c"
-      },
-      "500": {
-        "$value": "#c71212"
-      },
-      "600": {
-        "$value": "#970606"
-      },
-      "700": {
-        "$value": "#670202"
-      },
-      "800": {
-        "$value": "#380101"
-      },
-      "900": {
-        "$value": "#080000"
-      }
-    },
-    "warning": {
-      "{}": {
-        "$value": "{color.warning.400}"
-      },
-      "10": {
-        "$value": "#fffdfa"
-      },
-      "50": {
-        "$value": "#ffecce"
-      },
-      "100": {
-        "$value": "#ffdba0"
-      },
-      "200": {
-        "$value": "#ffca73"
-      },
-      "300": {
-        "$value": "#ffb845"
-      },
-      "400": {
-        "$value": "#ff9707"
-      },
-      "500": {
-        "$value": "#ce7a06"
-      },
-      "600": {
-        "$value": "#9c5f0a"
-      },
-      "700": {
-        "$value": "#6b430c"
-      },
-      "800": {
-        "$value": "#39260b"
-      },
-      "900": {
-        "$value": "#080502"
-      }
-    },
-    "success": {
-      "{}": {
-        "$value": "{color.success.400}"
-      },
-      "10": {
-        "$value": "#fbfffa"
-      },
-      "50": {
-        "$value": "#def7d8"
-      },
-      "100": {
-        "$value": "#c6f0b7"
-      },
-      "200": {
-        "$value": "#a4e188"
-      },
-      "300": {
-        "$value": "#73c346"
-      },
-      "400": {
-        "$value": "#52a518"
-      },
-      "500": {
-        "$value": "#36870C"
-      },
-      "600": {
-        "$value": "#36870c"
-      },
-      "700": {
-        "$value": "#226907"
-      },
-      "800": {
-        "$value": "#144b05"
-      },
-      "900": {
-        "$value": "#030f02"
-      }
-    },
-    "info": {
-      "{}": {
-        "$value": "{color.info.400}"
-      },
-      "10": {
-        "$value": "#f5fbff"
-      },
-      "50": {
-        "$value": "#c6e7ff"
-      },
-      "100": {
-        "$value": "#97d3ff"
-      },
-      "200": {
-        "$value": "#6ac0fe"
-      },
-      "300": {
-        "$value": "#3dadfe"
-      },
-      "400": {
-        "$value": "#008bef"
-      },
-      "500": {
-        "$value": "#0071c2"
-      },
-      "600": {
-        "$value": "#005796"
-      },
-      "700": {
-        "$value": "#003d69"
-      },
-      "800": {
-        "$value": "#02243c"
-      },
-      "900": {
-        "$value": "#020a0f"
-      }
-    }
-  },
-  "font": {
-    "$type": "font",
-    "family": {
-      "$value": "\"Inter\", sans-serif"
-    },
-    "letter-spacing": {
-      "none": {
-        "$value": "0em"
-      },
-      "s": {
-        "$value": "0.1em"
-      },
-      "m": {
-        "$value": "0.15em"
-      }
-    },
-    "line-height": {
-      "xs": {
-        "$value": "16px"
-      },
-      "s": {
-        "$value": "20px"
-      },
-      "m": {
-        "$value": "24px"
-      },
-      "l": {
-        "$value": "28px"
-      },
-      "xl": {
-        "$value": "32px"
-      },
-      "xxl": {
-        "$value": "36px"
-      },
-      "display-s": {
-        "$value": "44px"
-      },
-      "display-m": {
-        "$value": "48px"
-      },
-      "full": {
-        "$value": "100%"
-      }
-    },
-    "size": {
-      "h1": {
-        "$value": "28px"
-      },
-      "h2": {
-        "$value": "32px"
-      },
-      "h3": {
-        "$value": "24px"
-      },
-      "h4": {
-        "$value": "22px"
-      },
-      "h5": {
-        "$value": "20px"
-      },
-      "h6": {
-        "$value": "18px"
-      },
-      "display-s": {
-        "$value": "32px"
-      },
-      "display-m": {
-        "$value": "36px"
-      },
-      "s": {
-        "$value": "12px"
-      },
-      "m": {
-        "$value": "14px"
-      },
-      "l": {
-        "$value": "16px"
-      }
-    },
-    "weight": {
-      "light": {
-        "$value": "300"
-      },
-      "regular": {
-        "$value": "400"
-      },
-      "medium": {
-        "$value": "500"
-      },
-      "semi-bold": {
-        "$value": "600"
-      },
-      "bold": {
-        "$value": "700"
-      }
-    }
-  },
-  "space": {
-    "$type": "space",
-    "none": {
-      "$value": "0"
-    },
-    "xxxxs": {
-      "$value": "2px"
-    },
-    "xxxs": {
-      "$value": "4px"
-    },
-    "xxs": {
-      "$value": "6px"
-    },
-    "xs": {
-      "$value": "8px"
-    },
-    "s": {
-      "$value": "12px"
-    },
-    "base": {
-      "$value": "16px"
-    },
-    "m": {
-      "$value": "20px"
-    },
-    "l": {
-      "$value": "24px"
-    },
-    "xl": {
-      "$value": "28px"
-    },
-    "xxl": {
-      "$value": "32px"
-    },
-    "xxxl": {
-      "$value": "36px"
-    },
-    "xxxxl": {
-      "$value": "40px"
-    }
-  },
-  "border": {
-    "$type": "border",
-    "radius": {
-      "$type": "radius",
-      "square": {
-        "$value": "0"
-      },
-      "rounded": {
-        "small": {
-          "$value": "4px"
-        },
-        "medium": {
-          "$value": "8px"
-        },
-        "large": {
-          "$value": "16px"
-        },
-        "x-large": {
-          "$value": "32px"
-        },
-        "full": {
-          "$value": "999px"
-        }
-      }
-    },
-    "size": {
-      "$type": "size",
-      "small": {
-        "$value": "1px"
-      },
-      "medium": {
-        "$value": "2px"
-      },
-      "large": {
-        "$value": "3px"
-      }
-    }
-  },
-  "elevation": {
-    "$type": "elevation",
-    "0": {
-      "$value": "none"
-    },
-    "1": {
-      "$value": "0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)"
-    },
-    "2": {
-      "$value": "0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)"
-    },
-    "3": {
-      "$value": "0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09)"
-    },
-    "4": {
-      "$value": "0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12)"
-    }
-  }
-}

core/src/foundations/ionic.root.scss

@@ -4,206 +4,612 @@
  */
 
 :root {
-  --ionic-color-primary-10: #f7faff;
-  --ionic-color-primary-10-rgb: 247, 250, 255;
-  --ionic-color-primary-50: #cbdffe;
-  --ionic-color-primary-50-rgb: 203, 223, 254;
-  --ionic-color-primary-100: #9ec4fd;
-  --ionic-color-primary-100-rgb: 158, 196, 253;
-  --ionic-color-primary-200: #74aafc;
-  --ionic-color-primary-200-rgb: 116, 170, 252;
-  --ionic-color-primary-300: #4991fb;
-  --ionic-color-primary-300-rgb: 73, 145, 251;
-  --ionic-color-primary-400: #1068eb;
-  --ionic-color-primary-400-rgb: 16, 104, 235;
-  --ionic-color-primary-500: #0750be;
-  --ionic-color-primary-500-rgb: 7, 80, 190;
-  --ionic-color-primary-600: #053d90;
-  --ionic-color-primary-600-rgb: 5, 61, 144;
-  --ionic-color-primary-700: #062b63;
-  --ionic-color-primary-700-rgb: 6, 43, 99;
-  --ionic-color-primary-800: #061935;
-  --ionic-color-primary-800-rgb: 6, 25, 53;
-  --ionic-color-primary-900: #010408;
-  --ionic-color-primary-900-rgb: 1, 4, 8;
-  --ionic-color-primary: #1068eb;
-  --ionic-color-primary-rgb: 16, 104, 235;
-  --ionic-color-secondary: #303d60;
-  --ionic-color-secondary-rgb: 48, 61, 96;
-  --ionic-color-neutral-0: #ffffff;
-  --ionic-color-neutral-0-rgb: 255, 255, 255;
-  --ionic-color-neutral-10: #f5f5f5;
-  --ionic-color-neutral-10-rgb: 245, 245, 245;
-  --ionic-color-neutral-50: #e7e7e7;
-  --ionic-color-neutral-50-rgb: 231, 231, 231;
-  --ionic-color-neutral-100: #dadada;
-  --ionic-color-neutral-100-rgb: 218, 218, 218;
-  --ionic-color-neutral-200: #c9c9c9;
-  --ionic-color-neutral-200-rgb: 201, 201, 201;
-  --ionic-color-neutral-300: #b8b8b8;
-  --ionic-color-neutral-300-rgb: 184, 184, 184;
-  --ionic-color-neutral-400: #9a9a9a;
-  --ionic-color-neutral-400-rgb: 154, 154, 154;
-  --ionic-color-neutral-500: #767676;
-  --ionic-color-neutral-500-rgb: 118, 118, 118;
-  --ionic-color-neutral-600: #535353;
-  --ionic-color-neutral-600-rgb: 83, 83, 83;
-  --ionic-color-neutral-700: #373737;
-  --ionic-color-neutral-700-rgb: 55, 55, 55;
-  --ionic-color-neutral-800: #212121;
-  --ionic-color-neutral-800-rgb: 33, 33, 33;
-  --ionic-color-neutral-900: #05080f;
-  --ionic-color-neutral-900-rgb: 5, 8, 15;
-  --ionic-color-error-10: #fffafa;
-  --ionic-color-error-10-rgb: 255, 250, 250;
-  --ionic-color-error-50: #ffd5d5;
-  --ionic-color-error-50-rgb: 255, 213, 213;
-  --ionic-color-error-100: #ffafaf;
-  --ionic-color-error-100-rgb: 255, 175, 175;
-  --ionic-color-error-200: #ff8a8a;
-  --ionic-color-error-200-rgb: 255, 138, 138;
-  --ionic-color-error-300: #ff6666;
-  --ionic-color-error-300-rgb: 255, 102, 102;
-  --ionic-color-error-400: #f72c2c;
-  --ionic-color-error-400-rgb: 247, 44, 44;
-  --ionic-color-error-500: #c71212;
-  --ionic-color-error-500-rgb: 199, 18, 18;
-  --ionic-color-error-600: #970606;
-  --ionic-color-error-600-rgb: 151, 6, 6;
-  --ionic-color-error-700: #670202;
-  --ionic-color-error-700-rgb: 103, 2, 2;
-  --ionic-color-error-800: #380101;
-  --ionic-color-error-800-rgb: 56, 1, 1;
-  --ionic-color-error-900: #080000;
-  --ionic-color-error-900-rgb: 8, 0, 0;
-  --ionic-color-error: #f72c2c;
-  --ionic-color-error-rgb: 247, 44, 44;
-  --ionic-color-warning-10: #fffdfa;
-  --ionic-color-warning-10-rgb: 255, 253, 250;
-  --ionic-color-warning-50: #ffecce;
-  --ionic-color-warning-50-rgb: 255, 236, 206;
-  --ionic-color-warning-100: #ffdba0;
-  --ionic-color-warning-100-rgb: 255, 219, 160;
-  --ionic-color-warning-200: #ffca73;
-  --ionic-color-warning-200-rgb: 255, 202, 115;
-  --ionic-color-warning-300: #ffb845;
-  --ionic-color-warning-300-rgb: 255, 184, 69;
-  --ionic-color-warning-400: #ff9707;
-  --ionic-color-warning-400-rgb: 255, 151, 7;
-  --ionic-color-warning-500: #ce7a06;
-  --ionic-color-warning-500-rgb: 206, 122, 6;
-  --ionic-color-warning-600: #9c5f0a;
-  --ionic-color-warning-600-rgb: 156, 95, 10;
-  --ionic-color-warning-700: #6b430c;
-  --ionic-color-warning-700-rgb: 107, 67, 12;
-  --ionic-color-warning-800: #39260b;
-  --ionic-color-warning-800-rgb: 57, 38, 11;
-  --ionic-color-warning-900: #080502;
-  --ionic-color-warning-900-rgb: 8, 5, 2;
-  --ionic-color-warning: #ff9707;
-  --ionic-color-warning-rgb: 255, 151, 7;
-  --ionic-color-success-10: #fbfffa;
-  --ionic-color-success-10-rgb: 251, 255, 250;
-  --ionic-color-success-50: #def7d8;
-  --ionic-color-success-50-rgb: 222, 247, 216;
-  --ionic-color-success-100: #c6f0b7;
-  --ionic-color-success-100-rgb: 198, 240, 183;
-  --ionic-color-success-200: #a4e188;
-  --ionic-color-success-200-rgb: 164, 225, 136;
-  --ionic-color-success-300: #73c346;
-  --ionic-color-success-300-rgb: 115, 195, 70;
-  --ionic-color-success-400: #52a518;
-  --ionic-color-success-400-rgb: 82, 165, 24;
-  --ionic-color-success-500: #36870c;
-  --ionic-color-success-500-rgb: 54, 135, 12;
-  --ionic-color-success-600: #36870c;
-  --ionic-color-success-600-rgb: 54, 135, 12;
-  --ionic-color-success-700: #226907;
-  --ionic-color-success-700-rgb: 34, 105, 7;
-  --ionic-color-success-800: #144b05;
-  --ionic-color-success-800-rgb: 20, 75, 5;
-  --ionic-color-success-900: #030f02;
-  --ionic-color-success-900-rgb: 3, 15, 2;
-  --ionic-color-success: #52a518;
-  --ionic-color-success-rgb: 82, 165, 24;
-  --ionic-color-info-10: #f5fbff;
-  --ionic-color-info-10-rgb: 245, 251, 255;
-  --ionic-color-info-50: #c6e7ff;
-  --ionic-color-info-50-rgb: 198, 231, 255;
-  --ionic-color-info-100: #97d3ff;
-  --ionic-color-info-100-rgb: 151, 211, 255;
-  --ionic-color-info-200: #6ac0fe;
-  --ionic-color-info-200-rgb: 106, 192, 254;
-  --ionic-color-info-300: #3dadfe;
-  --ionic-color-info-300-rgb: 61, 173, 254;
-  --ionic-color-info-400: #008bef;
-  --ionic-color-info-400-rgb: 0, 139, 239;
-  --ionic-color-info-500: #0071c2;
-  --ionic-color-info-500-rgb: 0, 113, 194;
-  --ionic-color-info-600: #005796;
-  --ionic-color-info-600-rgb: 0, 87, 150;
-  --ionic-color-info-700: #003d69;
-  --ionic-color-info-700-rgb: 0, 61, 105;
-  --ionic-color-info-800: #02243c;
-  --ionic-color-info-800-rgb: 2, 36, 60;
-  --ionic-color-info-900: #020a0f;
-  --ionic-color-info-900-rgb: 2, 10, 15;
-  --ionic-color-info: #008bef;
-  --ionic-color-info-rgb: 0, 139, 239;
-  --ionic-font-family: "Inter", sans-serif;
-  --ionic-font-letter-spacing-none: 0em;
-  --ionic-font-letter-spacing-s: 0.1em;
-  --ionic-font-letter-spacing-m: 0.15em;
-  --ionic-font-line-height-xs: 16px;
-  --ionic-font-line-height-s: 20px;
-  --ionic-font-line-height-m: 24px;
-  --ionic-font-line-height-l: 28px;
-  --ionic-font-line-height-xl: 32px;
-  --ionic-font-line-height-xxl: 36px;
-  --ionic-font-line-height-display-s: 44px;
-  --ionic-font-line-height-display-m: 48px;
-  --ionic-font-line-height-full: 100%;
-  --ionic-font-size-h1: 28px;
-  --ionic-font-size-h2: 32px;
-  --ionic-font-size-h3: 24px;
-  --ionic-font-size-h4: 22px;
-  --ionic-font-size-h5: 20px;
-  --ionic-font-size-h6: 18px;
-  --ionic-font-size-display-s: 32px;
-  --ionic-font-size-display-m: 36px;
-  --ionic-font-size-s: 12px;
-  --ionic-font-size-m: 14px;
-  --ionic-font-size-l: 16px;
+  --ionic-guidelines: #9747ff;
+  --ionic-guidelines-rgb: 151, 71, 255;
+  --ionic-disabled: #ffffff99;
+  --ionic-hover: #1212120a;
+  --ionic-pressed: #12121214;
+  --ionic-elevation-100: 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a;
+  --ionic-elevation-200: 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d;
+  --ionic-elevation-300: 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d;
+  --ionic-elevation-400: 0px 15px 48px 0px #0000002e, 0px 3px 12px 0px #0000001f;
+  --ionic-elevation-500: 0px 3px 9px 0px #062b6312, 0px 0px 4px 0px #062b630a;
+  --ionic-elevation-600: 0px 8px 25px 0px #062b6314, 0px 1px 5px 0px #062b630d;
+  --ionic-elevation-700: 0px 15px 32px 0px #062b6317, 0px 2px 7px 0px #062b630d;
+  --ionic-elevation-800: 0px 20px 48px 0px #062b631f, 0px 3px 14px 0px #062b631f;
+  --ionic-font-size-275: 11px;
+  --ionic-font-size-300: 12px;
+  --ionic-font-size-350: 14px;
+  --ionic-font-size-400: 16px;
+  --ionic-font-size-450: 18px;
+  --ionic-font-size-500: 20px;
+  --ionic-font-size-550: 22px;
+  --ionic-font-size-600: 24px;
+  --ionic-font-size-650: 26px;
+  --ionic-font-size-700: 28px;
+  --ionic-font-size-800: 32px;
+  --ionic-font-size-900: 36px;
+  --ionic-font-weight-thin: 100;
+  --ionic-font-weight-extra-light: 200;
   --ionic-font-weight-light: 300;
   --ionic-font-weight-regular: 400;
   --ionic-font-weight-medium: 500;
   --ionic-font-weight-semi-bold: 600;
   --ionic-font-weight-bold: 700;
-  --ionic-space-none: 0;
-  --ionic-space-xxxxs: 2px;
-  --ionic-space-xxxs: 4px;
-  --ionic-space-xxs: 6px;
-  --ionic-space-xs: 8px;
-  --ionic-space-s: 12px;
-  --ionic-space-base: 16px;
-  --ionic-space-m: 20px;
-  --ionic-space-l: 24px;
-  --ionic-space-xl: 28px;
-  --ionic-space-xxl: 32px;
-  --ionic-space-xxxl: 36px;
-  --ionic-space-xxxxl: 40px;
-  --ionic-border-radius-square: 0;
-  --ionic-border-radius-rounded-small: 4px;
-  --ionic-border-radius-rounded-medium: 8px;
-  --ionic-border-radius-rounded-large: 16px;
-  --ionic-border-radius-rounded-x-large: 32px;
-  --ionic-border-radius-rounded-full: 999px;
-  --ionic-border-size-small: 1px;
-  --ionic-border-size-medium: 2px;
-  --ionic-border-size-large: 3px;
-  --ionic-elevation-0: none;
-  --ionic-elevation-1: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
-  --ionic-elevation-2: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
-  --ionic-elevation-3: 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09);
-  --ionic-elevation-4: 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12);
+  --ionic-font-weight-extra-bold: 800;
+  --ionic-font-weight-black: 900;
+  --ionic-letter-spacing-0: 0;
+  --ionic-letter-spacing-1: 1%;
+  --ionic-letter-spacing-2: 1.5%;
+  --ionic-line-height-300: 12px;
+  --ionic-line-height-400: 16px;
+  --ionic-line-height-500: 20px;
+  --ionic-line-height-600: 24px;
+  --ionic-line-height-700: 28px;
+  --ionic-line-height-800: 32px;
+  --ionic-line-height-900: 36px;
+  --ionic-line-height-1100: 44px;
+  --ionic-line-height-1200: 48px;
+  --ionic-line-height-full: 100%;
+  --ionic-space-0: 0px;
+  --ionic-space-100: 4px;
+  --ionic-space-150: 6px;
+  --ionic-space-200: 8px;
+  --ionic-space-250: 10px;
+  --ionic-space-300: 12px;
+  --ionic-space-400: 16px;
+  --ionic-space-500: 20px;
+  --ionic-space-600: 24px;
+  --ionic-space-700: 28px;
+  --ionic-space-800: 32px;
+  --ionic-space-900: 36px;
+  --ionic-space-1000: 40px;
+  --ionic-space-1200: 48px;
+  --ionic-space-050: 2px;
+  --ionic-border-radius-0: 0px;
+  --ionic-border-radius-100: 4px;
+  --ionic-border-radius-200: 8px;
+  --ionic-border-radius-300: 12px;
+  --ionic-border-radius-400: 16px;
+  --ionic-border-radius-800: 32px;
+  --ionic-border-radius-1000: 40px;
+  --ionic-border-radius-050: 2px;
+  --ionic-border-radius-full: 999px;
+  --ionic-border-size-0: 0px;
+  --ionic-border-size-025: 1px;
+  --ionic-border-size-050: 2px;
+  --ionic-border-size-075: 3px;
+  --ionic-border-style-none: none;
+  --ionic-border-style-solid: solid;
+  --ionic-border-style-dashed: dashed;
+  --ionic-border-style-dotted: dotted;
+  --ionic-color-base-white: #ffffff;
+  --ionic-color-base-white-rgb: 255, 255, 255;
+  --ionic-color-base-black: #111111;
+  --ionic-color-base-black-rgb: 17, 17, 17;
+  --ionic-color-neutral-100: #f1f1f1;
+  --ionic-color-neutral-100-rgb: 241, 241, 241;
+  --ionic-color-neutral-200: #e7e7e7;
+  --ionic-color-neutral-200-rgb: 231, 231, 231;
+  --ionic-color-neutral-300: #cfcfcf;
+  --ionic-color-neutral-300-rgb: 207, 207, 207;
+  --ionic-color-neutral-400: #b9b9b9;
+  --ionic-color-neutral-400-rgb: 185, 185, 185;
+  --ionic-color-neutral-500: #a2a2a2;
+  --ionic-color-neutral-500-rgb: 162, 162, 162;
+  --ionic-color-neutral-600: #8c8c8c;
+  --ionic-color-neutral-600-rgb: 140, 140, 140;
+  --ionic-color-neutral-700: #777777;
+  --ionic-color-neutral-700-rgb: 119, 119, 119;
+  --ionic-color-neutral-800: #626262;
+  --ionic-color-neutral-800-rgb: 98, 98, 98;
+  --ionic-color-neutral-900: #4e4e4e;
+  --ionic-color-neutral-900-rgb: 78, 78, 78;
+  --ionic-color-neutral-1000: #3b3b3b;
+  --ionic-color-neutral-1000-rgb: 59, 59, 59;
+  --ionic-color-neutral-1100: #292929;
+  --ionic-color-neutral-1100-rgb: 41, 41, 41;
+  --ionic-color-neutral-1200: #242424;
+  --ionic-color-neutral-1200-rgb: 36, 36, 36;
+  --ionic-color-red-100: #feeded;
+  --ionic-color-red-100-rgb: 254, 237, 237;
+  --ionic-color-red-200: #fde1e1;
+  --ionic-color-red-200-rgb: 253, 225, 225;
+  --ionic-color-red-300: #fcc1c1;
+  --ionic-color-red-300-rgb: 252, 193, 193;
+  --ionic-color-red-400: #faa1a1;
+  --ionic-color-red-400-rgb: 250, 161, 161;
+  --ionic-color-red-500: #f97d7d;
+  --ionic-color-red-500-rgb: 249, 125, 125;
+  --ionic-color-red-600: #f85151;
+  --ionic-color-red-600-rgb: 248, 81, 81;
+  --ionic-color-red-700: #e52929;
+  --ionic-color-red-700-rgb: 229, 41, 41;
+  --ionic-color-red-800: #bf2222;
+  --ionic-color-red-800-rgb: 191, 34, 34;
+  --ionic-color-red-900: #991b1b;
+  --ionic-color-red-900-rgb: 153, 27, 27;
+  --ionic-color-red-1000: #761515;
+  --ionic-color-red-1000-rgb: 118, 21, 21;
+  --ionic-color-red-1100: #540f0f;
+  --ionic-color-red-1100-rgb: 84, 15, 15;
+  --ionic-color-red-1200: #330909;
+  --ionic-color-red-1200-rgb: 51, 9, 9;
+  --ionic-color-pumpkin-100: #feedea;
+  --ionic-color-pumpkin-100-rgb: 254, 237, 234;
+  --ionic-color-pumpkin-200: #fde0db;
+  --ionic-color-pumpkin-200-rgb: 253, 224, 219;
+  --ionic-color-pumpkin-300: #fbbdb1;
+  --ionic-color-pumpkin-300-rgb: 251, 189, 177;
+  --ionic-color-pumpkin-400: #f9947c;
+  --ionic-color-pumpkin-400-rgb: 249, 148, 124;
+  --ionic-color-pumpkin-500: #f75d07;
+  --ionic-color-pumpkin-500-rgb: 247, 93, 7;
+  --ionic-color-pumpkin-600: #da5206;
+  --ionic-color-pumpkin-600-rgb: 218, 82, 6;
+  --ionic-color-pumpkin-700: #bd4705;
+  --ionic-color-pumpkin-700-rgb: 189, 71, 5;
+  --ionic-color-pumpkin-800: #9f3c05;
+  --ionic-color-pumpkin-800-rgb: 159, 60, 5;
+  --ionic-color-pumpkin-900: #803004;
+  --ionic-color-pumpkin-900-rgb: 128, 48, 4;
+  --ionic-color-pumpkin-1000: #602403;
+  --ionic-color-pumpkin-1000-rgb: 96, 36, 3;
+  --ionic-color-pumpkin-1100: #401802;
+  --ionic-color-pumpkin-1100-rgb: 64, 24, 2;
+  --ionic-color-pumpkin-1200: #210c01;
+  --ionic-color-pumpkin-1200-rgb: 33, 12, 1;
+  --ionic-color-orange-100: #fff1ea;
+  --ionic-color-orange-100-rgb: 255, 241, 234;
+  --ionic-color-orange-200: #ffe8db;
+  --ionic-color-orange-200-rgb: 255, 232, 219;
+  --ionic-color-orange-300: #ffcfb1;
+  --ionic-color-orange-300-rgb: 255, 207, 177;
+  --ionic-color-orange-400: #ffb37b;
+  --ionic-color-orange-400-rgb: 255, 179, 123;
+  --ionic-color-orange-500: #ff9400;
+  --ionic-color-orange-500-rgb: 255, 148, 0;
+  --ionic-color-orange-600: #e18300;
+  --ionic-color-orange-600-rgb: 225, 131, 0;
+  --ionic-color-orange-700: #c37100;
+  --ionic-color-orange-700-rgb: 195, 113, 0;
+  --ionic-color-orange-800: #a45f00;
+  --ionic-color-orange-800-rgb: 164, 95, 0;
+  --ionic-color-orange-900: #844d00;
+  --ionic-color-orange-900-rgb: 132, 77, 0;
+  --ionic-color-orange-1000: #633a00;
+  --ionic-color-orange-1000-rgb: 99, 58, 0;
+  --ionic-color-orange-1100: #422700;
+  --ionic-color-orange-1100-rgb: 66, 39, 0;
+  --ionic-color-orange-1200: #221400;
+  --ionic-color-orange-1200-rgb: 34, 20, 0;
+  --ionic-color-yellow-100: #fff9ea;
+  --ionic-color-yellow-100-rgb: 255, 249, 234;
+  --ionic-color-yellow-200: #fff5db;
+  --ionic-color-yellow-200-rgb: 255, 245, 219;
+  --ionic-color-yellow-300: #ffebb1;
+  --ionic-color-yellow-300-rgb: 255, 235, 177;
+  --ionic-color-yellow-400: #ffe07b;
+  --ionic-color-yellow-400-rgb: 255, 224, 123;
+  --ionic-color-yellow-500: #ffd600;
+  --ionic-color-yellow-500-rgb: 255, 214, 0;
+  --ionic-color-yellow-600: #e1bd00;
+  --ionic-color-yellow-600-rgb: 225, 189, 0;
+  --ionic-color-yellow-700: #c3a400;
+  --ionic-color-yellow-700-rgb: 195, 164, 0;
+  --ionic-color-yellow-800: #a48a00;
+  --ionic-color-yellow-800-rgb: 164, 138, 0;
+  --ionic-color-yellow-900: #846f00;
+  --ionic-color-yellow-900-rgb: 132, 111, 0;
+  --ionic-color-yellow-1000: #635300;
+  --ionic-color-yellow-1000-rgb: 99, 83, 0;
+  --ionic-color-yellow-1100: #423800;
+  --ionic-color-yellow-1100-rgb: 66, 56, 0;
+  --ionic-color-yellow-1200: #221d00;
+  --ionic-color-yellow-1200-rgb: 34, 29, 0;
+  --ionic-color-lime-100: #f3faea;
+  --ionic-color-lime-100-rgb: 243, 250, 234;
+  --ionic-color-lime-200: #eaf7db;
+  --ionic-color-lime-200-rgb: 234, 247, 219;
+  --ionic-color-lime-300: #d3efb2;
+  --ionic-color-lime-300-rgb: 211, 239, 178;
+  --ionic-color-lime-400: #bbe77d;
+  --ionic-color-lime-400-rgb: 187, 231, 125;
+  --ionic-color-lime-500: #a0df18;
+  --ionic-color-lime-500-rgb: 160, 223, 24;
+  --ionic-color-lime-600: #8dc515;
+  --ionic-color-lime-600-rgb: 141, 197, 21;
+  --ionic-color-lime-700: #7aab12;
+  --ionic-color-lime-700-rgb: 122, 171, 18;
+  --ionic-color-lime-800: #678f0f;
+  --ionic-color-lime-800-rgb: 103, 143, 15;
+  --ionic-color-lime-900: #53730c;
+  --ionic-color-lime-900-rgb: 83, 115, 12;
+  --ionic-color-lime-1000: #3e5709;
+  --ionic-color-lime-1000-rgb: 62, 87, 9;
+  --ionic-color-lime-1100: #2a3a06;
+  --ionic-color-lime-1100-rgb: 42, 58, 6;
+  --ionic-color-lime-1200: #151e03;
+  --ionic-color-lime-1200-rgb: 21, 30, 3;
+  --ionic-color-green-100: #ebf9ec;
+  --ionic-color-green-100-rgb: 235, 249, 236;
+  --ionic-color-green-200: #dcf5de;
+  --ionic-color-green-200-rgb: 220, 245, 222;
+  --ionic-color-green-300: #b3ebb7;
+  --ionic-color-green-300-rgb: 179, 235, 183;
+  --ionic-color-green-400: #7fe089;
+  --ionic-color-green-400-rgb: 127, 224, 137;
+  --ionic-color-green-500: #23d643;
+  --ionic-color-green-500-rgb: 35, 214, 67;
+  --ionic-color-green-600: #1fbd3b;
+  --ionic-color-green-600-rgb: 31, 189, 59;
+  --ionic-color-green-700: #1ba433;
+  --ionic-color-green-700-rgb: 27, 164, 51;
+  --ionic-color-green-800: #178a2b;
+  --ionic-color-green-800-rgb: 23, 138, 43;
+  --ionic-color-green-900: #126f23;
+  --ionic-color-green-900-rgb: 18, 111, 35;
+  --ionic-color-green-1000: #0e531a;
+  --ionic-color-green-1000-rgb: 14, 83, 26;
+  --ionic-color-green-1100: #093811;
+  --ionic-color-green-1100-rgb: 9, 56, 17;
+  --ionic-color-green-1200: #051d09;
+  --ionic-color-green-1200-rgb: 5, 29, 9;
+  --ionic-color-teal-100: #eaf8f5;
+  --ionic-color-teal-100-rgb: 234, 248, 245;
+  --ionic-color-teal-200: #dbf3ee;
+  --ionic-color-teal-200-rgb: 219, 243, 238;
+  --ionic-color-teal-300: #b1e7dd;
+  --ionic-color-teal-300-rgb: 177, 231, 221;
+  --ionic-color-teal-400: #7bdbca;
+  --ionic-color-teal-400-rgb: 123, 219, 202;
+  --ionic-color-teal-500: #00cfb7;
+  --ionic-color-teal-500-rgb: 0, 207, 183;
+  --ionic-color-teal-600: #00b7a2;
+  --ionic-color-teal-600-rgb: 0, 183, 162;
+  --ionic-color-teal-700: #009e8c;
+  --ionic-color-teal-700-rgb: 0, 158, 140;
+  --ionic-color-teal-800: #008576;
+  --ionic-color-teal-800-rgb: 0, 133, 118;
+  --ionic-color-teal-900: #006b5f;
+  --ionic-color-teal-900-rgb: 0, 107, 95;
+  --ionic-color-teal-1000: #005147;
+  --ionic-color-teal-1000-rgb: 0, 81, 71;
+  --ionic-color-teal-1100: #003630;
+  --ionic-color-teal-1100-rgb: 0, 54, 48;
+  --ionic-color-teal-1200: #001c19;
+  --ionic-color-teal-1200-rgb: 0, 28, 25;
+  --ionic-color-aqua-100: #ebf9fe;
+  --ionic-color-aqua-100-rgb: 235, 249, 254;
+  --ionic-color-aqua-200: #dcf4fd;
+  --ionic-color-aqua-200-rgb: 220, 244, 253;
+  --ionic-color-aqua-300: #b3e9fc;
+  --ionic-color-aqua-300-rgb: 179, 233, 252;
+  --ionic-color-aqua-400: #80defa;
+  --ionic-color-aqua-400-rgb: 128, 222, 250;
+  --ionic-color-aqua-500: #27d3f9;
+  --ionic-color-aqua-500-rgb: 39, 211, 249;
+  --ionic-color-aqua-600: #22bbdc;
+  --ionic-color-aqua-600-rgb: 34, 187, 220;
+  --ionic-color-aqua-700: #1ea2bf;
+  --ionic-color-aqua-700-rgb: 30, 162, 191;
+  --ionic-color-aqua-800: #1988a0;
+  --ionic-color-aqua-800-rgb: 25, 136, 160;
+  --ionic-color-aqua-900: #146d81;
+  --ionic-color-aqua-900-rgb: 20, 109, 129;
+  --ionic-color-aqua-1000: #0f5261;
+  --ionic-color-aqua-1000-rgb: 15, 82, 97;
+  --ionic-color-aqua-1100: #0a3741;
+  --ionic-color-aqua-1100-rgb: 10, 55, 65;
+  --ionic-color-aqua-1200: #051c21;
+  --ionic-color-aqua-1200-rgb: 5, 28, 33;
+  --ionic-color-blue-100: #f2f4fd;
+  --ionic-color-blue-100-rgb: 242, 244, 253;
+  --ionic-color-blue-200: #e9ecfc;
+  --ionic-color-blue-200-rgb: 233, 236, 252;
+  --ionic-color-blue-300: #d0d7fa;
+  --ionic-color-blue-300-rgb: 208, 215, 250;
+  --ionic-color-blue-400: #b5c0f7;
+  --ionic-color-blue-400-rgb: 181, 192, 247;
+  --ionic-color-blue-500: #94a5f4;
+  --ionic-color-blue-500-rgb: 148, 165, 244;
+  --ionic-color-blue-600: #6986f2;
+  --ionic-color-blue-600-rgb: 105, 134, 242;
+  --ionic-color-blue-700: #105cef;
+  --ionic-color-blue-700-rgb: 16, 92, 239;
+  --ionic-color-blue-800: #0f54da;
+  --ionic-color-blue-800-rgb: 15, 84, 218;
+  --ionic-color-blue-900: #0d4bc3;
+  --ionic-color-blue-900-rgb: 13, 75, 195;
+  --ionic-color-blue-1000: #0b41a9;
+  --ionic-color-blue-1000-rgb: 11, 65, 169;
+  --ionic-color-blue-1100: #09358a;
+  --ionic-color-blue-1100-rgb: 9, 53, 138;
+  --ionic-color-blue-1200: #072561;
+  --ionic-color-blue-1200-rgb: 7, 37, 97;
+  --ionic-color-indigo-100: #f3f2fb;
+  --ionic-color-indigo-100-rgb: 243, 242, 251;
+  --ionic-color-indigo-200: #eae9f9;
+  --ionic-color-indigo-200-rgb: 234, 233, 249;
+  --ionic-color-indigo-300: #d3d1f2;
+  --ionic-color-indigo-300-rgb: 211, 209, 242;
+  --ionic-color-indigo-400: #bab5eb;
+  --ionic-color-indigo-400-rgb: 186, 181, 235;
+  --ionic-color-indigo-500: #9d95e4;
+  --ionic-color-indigo-500-rgb: 157, 149, 228;
+  --ionic-color-indigo-600: #786bdd;
+  --ionic-color-indigo-600-rgb: 120, 107, 221;
+  --ionic-color-indigo-700: #411bd5;
+  --ionic-color-indigo-700-rgb: 65, 27, 213;
+  --ionic-color-indigo-800: #3b19c3;
+  --ionic-color-indigo-800-rgb: 59, 25, 195;
+  --ionic-color-indigo-900: #3516ae;
+  --ionic-color-indigo-900-rgb: 53, 22, 174;
+  --ionic-color-indigo-1000: #2e1397;
+  --ionic-color-indigo-1000-rgb: 46, 19, 151;
+  --ionic-color-indigo-1100: #26107b;
+  --ionic-color-indigo-1100-rgb: 38, 16, 123;
+  --ionic-color-indigo-1200: #1a0b57;
+  --ionic-color-indigo-1200-rgb: 26, 11, 87;
+  --ionic-color-violet-100: #f5f2fe;
+  --ionic-color-violet-100-rgb: 245, 242, 254;
+  --ionic-color-violet-200: #eee9fd;
+  --ionic-color-violet-200-rgb: 238, 233, 253;
+  --ionic-color-violet-300: #dcd1fb;
+  --ionic-color-violet-300-rgb: 220, 209, 251;
+  --ionic-color-violet-400: #c9b6f9;
+  --ionic-color-violet-400-rgb: 201, 182, 249;
+  --ionic-color-violet-500: #b396f6;
+  --ionic-color-violet-500-rgb: 179, 150, 246;
+  --ionic-color-violet-600: #9a6cf4;
+  --ionic-color-violet-600-rgb: 154, 108, 244;
+  --ionic-color-violet-700: #7c20f2;
+  --ionic-color-violet-700-rgb: 124, 32, 242;
+  --ionic-color-violet-800: #711ddd;
+  --ionic-color-violet-800-rgb: 113, 29, 221;
+  --ionic-color-violet-900: #651ac5;
+  --ionic-color-violet-900-rgb: 101, 26, 197;
+  --ionic-color-violet-1000: #5817ab;
+  --ionic-color-violet-1000-rgb: 88, 23, 171;
+  --ionic-color-violet-1100: #48128c;
+  --ionic-color-violet-1100-rgb: 72, 18, 140;
+  --ionic-color-violet-1200: #330d63;
+  --ionic-color-violet-1200-rgb: 51, 13, 99;
+  --ionic-color-purple-100: #f9f3fe;
+  --ionic-color-purple-100-rgb: 249, 243, 254;
+  --ionic-color-purple-200: #f5eafd;
+  --ionic-color-purple-200-rgb: 245, 234, 253;
+  --ionic-color-purple-300: #e9d3fa;
+  --ionic-color-purple-300-rgb: 233, 211, 250;
+  --ionic-color-purple-400: #deb9f8;
+  --ionic-color-purple-400-rgb: 222, 185, 248;
+  --ionic-color-purple-500: #d29bf6;
+  --ionic-color-purple-500-rgb: 210, 155, 246;
+  --ionic-color-purple-600: #c575f3;
+  --ionic-color-purple-600-rgb: 197, 117, 243;
+  --ionic-color-purple-700: #b73cf1;
+  --ionic-color-purple-700-rgb: 183, 60, 241;
+  --ionic-color-purple-800: #a737dc;
+  --ionic-color-purple-800-rgb: 167, 55, 220;
+  --ionic-color-purple-900: #9531c5;
+  --ionic-color-purple-900-rgb: 149, 49, 197;
+  --ionic-color-purple-1000: #812aaa;
+  --ionic-color-purple-1000-rgb: 129, 42, 170;
+  --ionic-color-purple-1100: #6a238b;
+  --ionic-color-purple-1100-rgb: 106, 35, 139;
+  --ionic-color-purple-1200: #4b1862;
+  --ionic-color-purple-1200-rgb: 75, 24, 98;
+  --ionic-color-magenta-100: #fdf3fb;
+  --ionic-color-magenta-100-rgb: 253, 243, 251;
+  --ionic-color-magenta-200: #fcebf8;
+  --ionic-color-magenta-200-rgb: 252, 235, 248;
+  --ionic-color-magenta-300: #f9d4f1;
+  --ionic-color-magenta-300-rgb: 249, 212, 241;
+  --ionic-color-magenta-400: #f6bcea;
+  --ionic-color-magenta-400-rgb: 246, 188, 234;
+  --ionic-color-magenta-500: #f39fe3;
+  --ionic-color-magenta-500-rgb: 243, 159, 227;
+  --ionic-color-magenta-600: #f07cdb;
+  --ionic-color-magenta-600-rgb: 240, 124, 219;
+  --ionic-color-magenta-700: #ed4ad3;
+  --ionic-color-magenta-700-rgb: 237, 74, 211;
+  --ionic-color-magenta-800: #d844c1;
+  --ionic-color-magenta-800-rgb: 216, 68, 193;
+  --ionic-color-magenta-900: #c13cac;
+  --ionic-color-magenta-900-rgb: 193, 60, 172;
+  --ionic-color-magenta-1000: #a83495;
+  --ionic-color-magenta-1000-rgb: 168, 52, 149;
+  --ionic-color-magenta-1100: #892b7a;
+  --ionic-color-magenta-1100-rgb: 137, 43, 122;
+  --ionic-color-magenta-1200: #611e56;
+  --ionic-color-magenta-1200-rgb: 97, 30, 86;
+  --ionic-color-pink-100: #fef3f5;
+  --ionic-color-pink-100-rgb: 254, 243, 245;
+  --ionic-color-pink-200: #fdeaee;
+  --ionic-color-pink-200-rgb: 253, 234, 238;
+  --ionic-color-pink-300: #fad3dc;
+  --ionic-color-pink-300-rgb: 250, 211, 220;
+  --ionic-color-pink-400: #f8b9c9;
+  --ionic-color-pink-400-rgb: 248, 185, 201;
+  --ionic-color-pink-500: #f69bb3;
+  --ionic-color-pink-500-rgb: 246, 155, 179;
+  --ionic-color-pink-600: #f3759a;
+  --ionic-color-pink-600-rgb: 243, 117, 154;
+  --ionic-color-pink-700: #f13b7d;
+  --ionic-color-pink-700-rgb: 241, 59, 125;
+  --ionic-color-pink-800: #dc3672;
+  --ionic-color-pink-800-rgb: 220, 54, 114;
+  --ionic-color-pink-900: #c53066;
+  --ionic-color-pink-900-rgb: 197, 48, 102;
+  --ionic-color-pink-1000: #aa2a58;
+  --ionic-color-pink-1000-rgb: 170, 42, 88;
+  --ionic-color-pink-1100: #8b2248;
+  --ionic-color-pink-1100-rgb: 139, 34, 72;
+  --ionic-color-pink-1200: #621833;
+  --ionic-color-pink-1200-rgb: 98, 24, 51;
+  --ionic-color-primary-100: #f2f4fd;
+  --ionic-color-primary-100-rgb: 242, 244, 253;
+  --ionic-color-primary-200: #e9ecfc;
+  --ionic-color-primary-200-rgb: 233, 236, 252;
+  --ionic-color-primary-300: #d0d7fa;
+  --ionic-color-primary-300-rgb: 208, 215, 250;
+  --ionic-color-primary-400: #b5c0f7;
+  --ionic-color-primary-400-rgb: 181, 192, 247;
+  --ionic-color-primary-500: #94a5f4;
+  --ionic-color-primary-500-rgb: 148, 165, 244;
+  --ionic-color-primary-600: #6986f2;
+  --ionic-color-primary-600-rgb: 105, 134, 242;
+  --ionic-color-primary-700: #105cef;
+  --ionic-color-primary-700-rgb: 16, 92, 239;
+  --ionic-color-primary-800: #0f54da;
+  --ionic-color-primary-800-rgb: 15, 84, 218;
+  --ionic-color-primary-900: #0d4bc3;
+  --ionic-color-primary-900-rgb: 13, 75, 195;
+  --ionic-color-primary-1000: #0b41a9;
+  --ionic-color-primary-1000-rgb: 11, 65, 169;
+  --ionic-color-primary-1100: #09358a;
+  --ionic-color-primary-1100-rgb: 9, 53, 138;
+  --ionic-color-primary-1200: #072561;
+  --ionic-color-primary-1200-rgb: 7, 37, 97;
+  --ionic-color-primary-base: #105cef;
+  --ionic-color-primary-base-rgb: 16, 92, 239;
+  --ionic-color-info-100: #ebf9fe;
+  --ionic-color-info-100-rgb: 235, 249, 254;
+  --ionic-color-info-200: #dcf4fd;
+  --ionic-color-info-200-rgb: 220, 244, 253;
+  --ionic-color-info-300: #b3e9fc;
+  --ionic-color-info-300-rgb: 179, 233, 252;
+  --ionic-color-info-400: #80defa;
+  --ionic-color-info-400-rgb: 128, 222, 250;
+  --ionic-color-info-500: #27d3f9;
+  --ionic-color-info-500-rgb: 39, 211, 249;
+  --ionic-color-info-600: #22bbdc;
+  --ionic-color-info-600-rgb: 34, 187, 220;
+  --ionic-color-info-700: #1ea2bf;
+  --ionic-color-info-700-rgb: 30, 162, 191;
+  --ionic-color-info-800: #1988a0;
+  --ionic-color-info-800-rgb: 25, 136, 160;
+  --ionic-color-info-900: #146d81;
+  --ionic-color-info-900-rgb: 20, 109, 129;
+  --ionic-color-info-1000: #0f5261;
+  --ionic-color-info-1000-rgb: 15, 82, 97;
+  --ionic-color-info-1100: #0a3741;
+  --ionic-color-info-1100-rgb: 10, 55, 65;
+  --ionic-color-info-1200: #051c21;
+  --ionic-color-info-1200-rgb: 5, 28, 33;
+  --ionic-color-warning-100: #fff9ea;
+  --ionic-color-warning-100-rgb: 255, 249, 234;
+  --ionic-color-warning-200: #fff5db;
+  --ionic-color-warning-200-rgb: 255, 245, 219;
+  --ionic-color-warning-300: #ffebb1;
+  --ionic-color-warning-300-rgb: 255, 235, 177;
+  --ionic-color-warning-400: #ffe07b;
+  --ionic-color-warning-400-rgb: 255, 224, 123;
+  --ionic-color-warning-500: #ffd600;
+  --ionic-color-warning-500-rgb: 255, 214, 0;
+  --ionic-color-warning-600: #e1bd00;
+  --ionic-color-warning-600-rgb: 225, 189, 0;
+  --ionic-color-warning-700: #c3a400;
+  --ionic-color-warning-700-rgb: 195, 164, 0;
+  --ionic-color-warning-800: #a48a00;
+  --ionic-color-warning-800-rgb: 164, 138, 0;
+  --ionic-color-warning-900: #846f00;
+  --ionic-color-warning-900-rgb: 132, 111, 0;
+  --ionic-color-warning-1000: #635300;
+  --ionic-color-warning-1000-rgb: 99, 83, 0;
+  --ionic-color-warning-1100: #423800;
+  --ionic-color-warning-1100-rgb: 66, 56, 0;
+  --ionic-color-warning-1200: #221d00;
+  --ionic-color-warning-1200-rgb: 34, 29, 0;
+  --ionic-color-danger-100: #feeded;
+  --ionic-color-danger-100-rgb: 254, 237, 237;
+  --ionic-color-danger-200: #fde1e1;
+  --ionic-color-danger-200-rgb: 253, 225, 225;
+  --ionic-color-danger-300: #fcc1c1;
+  --ionic-color-danger-300-rgb: 252, 193, 193;
+  --ionic-color-danger-400: #faa1a1;
+  --ionic-color-danger-400-rgb: 250, 161, 161;
+  --ionic-color-danger-500: #f97d7d;
+  --ionic-color-danger-500-rgb: 249, 125, 125;
+  --ionic-color-danger-600: #f85151;
+  --ionic-color-danger-600-rgb: 248, 81, 81;
+  --ionic-color-danger-700: #e52929;
+  --ionic-color-danger-700-rgb: 229, 41, 41;
+  --ionic-color-danger-800: #bf2222;
+  --ionic-color-danger-800-rgb: 191, 34, 34;
+  --ionic-color-danger-900: #991b1b;
+  --ionic-color-danger-900-rgb: 153, 27, 27;
+  --ionic-color-danger-1000: #761515;
+  --ionic-color-danger-1000-rgb: 118, 21, 21;
+  --ionic-color-danger-1100: #540f0f;
+  --ionic-color-danger-1100-rgb: 84, 15, 15;
+  --ionic-color-danger-1200: #330909;
+  --ionic-color-danger-1200-rgb: 51, 9, 9;
+  --ionic-color-success-100: #ebf9ec;
+  --ionic-color-success-100-rgb: 235, 249, 236;
+  --ionic-color-success-200: #dcf5de;
+  --ionic-color-success-200-rgb: 220, 245, 222;
+  --ionic-color-success-300: #b3ebb7;
+  --ionic-color-success-300-rgb: 179, 235, 183;
+  --ionic-color-success-400: #7fe089;
+  --ionic-color-success-400-rgb: 127, 224, 137;
+  --ionic-color-success-500: #23d643;
+  --ionic-color-success-500-rgb: 35, 214, 67;
+  --ionic-color-success-600: #1fbd3b;
+  --ionic-color-success-600-rgb: 31, 189, 59;
+  --ionic-color-success-700: #1ba433;
+  --ionic-color-success-700-rgb: 27, 164, 51;
+  --ionic-color-success-800: #178a2b;
+  --ionic-color-success-800-rgb: 23, 138, 43;
+  --ionic-color-success-900: #126f23;
+  --ionic-color-success-900-rgb: 18, 111, 35;
+  --ionic-color-success-1000: #0e531a;
+  --ionic-color-success-1000-rgb: 14, 83, 26;
+  --ionic-color-success-1100: #093811;
+  --ionic-color-success-1100-rgb: 9, 56, 17;
+  --ionic-color-success-1200: #051d09;
+  --ionic-color-success-1200-rgb: 5, 29, 9;
+  --ionic-z-index-0: 0;
+  --ionic-z-index-1: 100;
+  --ionic-z-index-2: 200;
+  --ionic-z-index-3: 300;
+  --ionic-z-index-4: 400;
+  --ionic-z-index-500: 500;
+  --ionic-z-index-bottom: -99999;
+  --ionic-z-index-top: 99999;
+  --ionic-scale-0: 0px;
+  --ionic-scale-100: 4px;
+  --ionic-scale-150: 6px;
+  --ionic-scale-200: 8px;
+  --ionic-scale-250: 10px;
+  --ionic-scale-300: 12px;
+  --ionic-scale-400: 16px;
+  --ionic-scale-500: 20px;
+  --ionic-scale-600: 24px;
+  --ionic-scale-700: 28px;
+  --ionic-scale-800: 32px;
+  --ionic-scale-900: 36px;
+  --ionic-scale-1000: 40px;
+  --ionic-scale-1100: 44px;
+  --ionic-scale-1200: 48px;
+  --ionic-scale-1400: 56px;
+  --ionic-scale-1600: 64px;
+  --ionic-scale-1800: 72px;
+  --ionic-scale-2000: 80px;
+  --ionic-scale-2400: 96px;
+  --ionic-scale-3200: 128px;
+  --ionic-scale-4000: 160px;
+  --ionic-scale-5000: 200px;
+  --ionic-scale-6200: 248px;
+  --ionic-scale-7400: 296px;
+  --ionic-scale-9000: 360px;
+  --ionic-scale-025: 1px;
+  --ionic-scale-050: 2px;
+  --ionic-scale-075: 3px;
+  --ionic-font-family: "Inter", sans-serif;
+  --ionic-state-focus-0: none;
+  --ionic-state-focus-100: #9ec4fd;
+  --ionic-state-focus-100-rgb: 158, 196, 253;
+  --ionic-state-focus-200: #ffafaf;
+  --ionic-state-focus-200-rgb: 255, 175, 175;
 }

core/src/foundations/tokens/README.md

@@ -0,0 +1,5 @@
+# Design Tokens JSON Files
+
+Please, do not directly change the JSON files on this token folder. They should come from the UX/UI Team (from Figma or any used source).
+
+Any changes done here should be validated with UX/UI and Framework teams.

core/src/foundations/tokens/color.styles.tokens.json

@@ -0,0 +1,18 @@
+{
+  "Guidelines": {
+    "$type": "color",
+    "$value": "#9747ff"
+  },
+  "Disabled": {
+    "$type": "color",
+    "$value": "#ffffff99"
+  },
+  "Hover": {
+    "$type": "color",
+    "$value": "#1212120a"
+  },
+  "Pressed": {
+    "$type": "color",
+    "$value": "#12121214"
+  }
+}

core/src/foundations/tokens/effect.styles.tokens.json

@@ -0,0 +1,154 @@
+{
+  "Elevation-100": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "9px",
+        "spread": "0px",
+        "color": "#00000012"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "4px",
+        "spread": "0px",
+        "color": "#0000000a"
+      }
+    ]
+  },
+  "Elevation-200": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "8px",
+        "blur": "25px",
+        "spread": "0px",
+        "color": "#00000014"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "1px",
+        "blur": "5px",
+        "spread": "0px",
+        "color": "#0000000d"
+      }
+    ]
+  },
+  "Elevation-300": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "6px",
+        "blur": "32px",
+        "spread": "0px",
+        "color": "#00000029"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "7px",
+        "spread": "0px",
+        "color": "#0000000d"
+      }
+    ]
+  },
+  "Elevation-400": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "15px",
+        "blur": "48px",
+        "spread": "0px",
+        "color": "#0000002e"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "12px",
+        "spread": "0px",
+        "color": "#0000001f"
+      }
+    ]
+  },
+  "Elevation-500": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "9px",
+        "spread": "0px",
+        "color": "#062b6312"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "4px",
+        "spread": "0px",
+        "color": "#062b630a"
+      }
+    ]
+  },
+  "Elevation-600": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "8px",
+        "blur": "25px",
+        "spread": "0px",
+        "color": "#062b6314"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "1px",
+        "blur": "5px",
+        "spread": "0px",
+        "color": "#062b630d"
+      }
+    ]
+  },
+  "Elevation-700": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "15px",
+        "blur": "32px",
+        "spread": "0px",
+        "color": "#062b6317"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "7px",
+        "spread": "0px",
+        "color": "#062b630d"
+      }
+    ]
+  },
+  "Elevation-800": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "20px",
+        "blur": "48px",
+        "spread": "0px",
+        "color": "#062b631f"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "14px",
+        "spread": "0px",
+        "color": "#062b631f"
+      }
+    ]
+  }
+}

core/src/foundations/tokens/manifest.json

@@ -0,0 +1,30 @@
+{
+  "name": "Design Tokens",
+  "collections": {
+    "Primitives": {
+      "modes": {
+        "Value": [
+          "Primitives.Value.tokens.json"
+        ]
+      }
+    },
+    "Theme": {
+      "modes": {
+        "Ionic": [
+          "Theme.Ionic.tokens.json"
+        ]
+      }
+    }
+  },
+  "styles": {
+    "text": [
+      "text.styles.tokens.json"
+    ],
+    "effect": [
+      "effect.styles.tokens.json"
+    ],
+    "color": [
+      "color.styles.tokens.json"
+    ]
+  }
+}

core/src/foundations/tokens/text.styles.tokens.json

@@ -0,0 +1,682 @@
+{
+  "Display": {
+    "SM": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "32px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "44px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Light": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "32px",
+          "fontWeight": 300,
+          "letterSpacing": "0%",
+          "lineHeight": "44px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "LG": {
+      "Light": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "36px",
+          "fontWeight": 300,
+          "letterSpacing": "0%",
+          "lineHeight": "48px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "36px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "48px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Heading": {
+    "H1": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H2": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H3": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H4": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H5": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H6": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Body": {
+    "SM": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "MD": {
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "LG": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Action": {
+    "SM": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "MD": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "14px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "LG": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "16px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "XL": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "20px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    }
+  },
+  "Overline": {
+    "Regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 400,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 500,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Semi Bold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 700,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Bold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 700,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    }
+  }
+}

core/src/foundations/tokens/theme/theme.ionic.tokens.json

@@ -0,0 +1,280 @@
+{
+  "font-family": {
+    "Inter": {
+      "$type": "string",
+      "$value": "Inter"
+    }
+  },
+  "color": {
+    "primary": {
+      "base": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "{color.blue.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.blue.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.blue.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.blue.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.blue.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.blue.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.blue.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.blue.1200}"
+      }
+    },
+    "info": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.aqua.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.aqua.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.aqua.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.aqua.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.aqua.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.aqua.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.aqua.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.aqua.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.aqua.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.aqua.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.aqua.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.aqua.1200}"
+      }
+    },
+    "warning": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.yellow.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.yellow.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.yellow.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.yellow.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.yellow.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.yellow.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.yellow.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.yellow.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.yellow.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.yellow.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.yellow.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.yellow.1200}"
+      }
+    },
+    "danger": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.red.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.red.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.red.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.red.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.red.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.red.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.red.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.red.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.red.1200}"
+      }
+    },
+    "success": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.green.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.green.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.green.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.green.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.green.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.green.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.green.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.green.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.green.1200}"
+      }
+    }
+  },
+  "state": {
+    "focus": {
+      "0": {
+        "$type": "string",
+        "$value": "none"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#9ec4fd"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffafaf"
+      }
+    }
+  }
+}

core/src/themes/mixins.scss

@@ -112,6 +112,21 @@
   opacity: 0;
 }
 
+// Typography mixin to be used with typography scss variables (ionic.vars.scss)
+//
+// ex: @include typography($ionic-heading-h3-medium);
+//
+// --------------------------------------------------
+@mixin typography($properties) {
+  font-family: map-get($properties, font-family);
+  font-size: map-get($properties, font-size);
+  font-weight: map-get($properties, font-weight);
+  letter-spacing: map-get($properties, letter-spacing);
+  line-height: map-get($properties, line-height);
+  text-transform: map-get($properties, text-transform);
+  text-decoration: map-get($properties, text-decoration);
+}
+
 // Font smoothing
 // --------------------------------------------------