chore(): sync with next branch (#29299)

Issue number: resolves #

---------

<!-- 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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

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

-
-
-

## Does this introduce a breaking change?

- [ ] 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/.github/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: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Marcelino <brunoapmarcelino@gmail.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Bernardo Cardoso <32780808+BenOsodrac@users.noreply.github.com>

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts

.github/workflows/actions/build-core/action.yml

@@ -31,4 +31,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
+        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt

core/.stylelintrc.yml

@@ -47,7 +47,6 @@ rules:
   declaration-no-important:
     - true
 
-
   order/order:
     - custom-properties
     - dollar-variables
@@ -57,7 +56,6 @@ rules:
 
   # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
   order/properties-order:
-
     # Box
 
     - emptyLineBefore: always
@@ -260,13 +258,10 @@ rules:
     - right
     - left
     - float
-    - padding
     - padding-left
     - padding-right
-    - margin
     - margin-left
     - margin-right
-    - border-radius
     - border-top-left-radius
     - border-top-right-radius
     - border-bottom-right-radius

core/package.json

@@ -67,14 +67,16 @@
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
     "serve": "^14.0.1",
+    "style-dictionary": "^3.9.2",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.tokens && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
     "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",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources src/css:./css",

core/scripts/tokens.js

@@ -0,0 +1,174 @@
+/* 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';
+
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    // Add a prefix to all variable names
+    const prefixedVariables = dictionary.allProperties.map((prop) => {
+      return `  --${variablesPrefix}-${prop.name}: ${prop.value};`;
+    });
+
+    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) => {
+      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
+    });
+
+    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: $ionic-${prop.name};\n};
+.${variablesPrefix}-padding-${className} {\n  padding: $ionic-${prop.name};\n}`;
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }
+
+      return utilityClass;
+    });
+
+    return [fileHeader({ file }), '@import "./ionic.vars";\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(_a) {
+    var contents = _a.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/src/components/button/button.ionic.scss

@@ -142,6 +142,7 @@
 
 // Button Shape Rectangular
 // -------------------------------------------------------------------------------
+
 :host(.button-rectangular) {
   --border-radius: #{$button-ionic-rectangular-border};
 }
@@ -168,6 +169,11 @@
   --background-activated: #{ion-color(primary, shade)};
 }
 
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+
 // Fill Outline Button
 // --------------------------------------------------
 

core/src/components/button/test/states/button.e2e.ts

@@ -0,0 +1,84 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: activated'), () => {
+    test('should render solid button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
+    });
+
+    test('should render solid button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
+    });
+
+    test('should render outline button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button fill="outline" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
+    });
+
+    test('should render outline button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
+    });
+
+    test('should render clear button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button fill="clear" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
+    });
+
+    test('should render clear button with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
+    });
+  });
+});

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

@@ -0,0 +1,89 @@
+@use "../../themes/ionic.mixins" as mixins;
+@use "../../foundations/ionic.vars.scss" as tokens;
+
+// Chip
+// --------------------------------------------------
+
+// TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
+$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: #{tokens.$ionic-color-neutral-10};
+  --border-color: transparent;
+  --color: #{tokens.$ionic-color-neutral-900};
+  --focus-ring-color: #{$ionic-states-focus-primary};
+  --focus-ring-width: #{tokens.$ionic-border-size-medium};
+
+  @include mixins.font-smoothing;
+  @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
+  @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
+
+  display: inline-flex;
+
+  position: relative;
+
+  align-items: center;
+
+  gap: tokens.$ionic-space-xxxs;
+
+  min-height: 32px;
+
+  border-width: tokens.$ionic-border-size-small;
+  border-style: solid;
+
+  border-color: var(--border-color);
+
+  background: var(--background);
+  color: var(--color);
+
+  font-family: tokens.$ionic-font-family;
+  font-size: tokens.$ionic-font-size-m;
+
+  cursor: pointer;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  vertical-align: middle;
+}
+
+// Outline Chip
+// ---------------------------------------------
+
+:host(.chip-outline) {
+  --background: transparent;
+  border-color: tokens.$ionic-color-neutral-100;
+}
+
+// Chip: Focus
+// ---------------------------------------------
+
+:host(.ion-focused) {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-width);
+}
+
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --background: #{$ionic-states-hover};
+  }
+}
+
+// Chip: Disabled
+// ---------------------------------------------
+
+:host(.chip-disabled) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// Chip Icon
+// ---------------------------------------------
+::slotted(ion-icon) {
+  font-size: tokens.$ionic-font-size-l;
+}

core/src/components/chip/chip.tsx

@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'chip.ios.scss',
     md: 'chip.md.scss',
-    ionic: 'chip.md.scss',
+    ionic: 'chip.ionic.scss',
   },
   shadow: true,
 })
@@ -47,6 +47,7 @@ export class Chip implements ComponentInterface {
           'chip-outline': this.outline,
           'chip-disabled': this.disabled,
           'ion-activatable': true,
+          'ion-focusable': true,
         })}
       >
         <slot></slot>

core/src/components/chip/test/theme-ionic/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - Ionic States</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Info Chip</h2>
+
+        <h3>Default</h3>
+        <p>
+          <ion-chip>
+            <ion-label>Default</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Focus</h3>
+        <p>
+          <ion-chip class="ion-focused">
+            <ion-label>Focused</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Disabled</h3>
+        <p>
+          <ion-chip disabled>
+            <ion-label>Disabled</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Outline</h3>
+        <p>
+          <ion-chip outline="true">
+            <ion-label>Default</ion-label>
+          </ion-chip>
+
+          <ion-chip class="ion-focused" outline="true">
+            <ion-label>Focus</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>With Icon</h3>
+        <p>
+          <ion-chip>
+            <ion-icon icon="calendar"></ion-icon>
+            <ion-label>Icon</ion-label>
+          </ion-chip>
+          <ion-chip>
+            <ion-label>Icon</ion-label>
+            <ion-icon icon="calendar"></ion-icon>
+          </ion-chip>
+        </p>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      h2,
+      h3 {
+        padding-left: 16px;
+      }
+
+      p {
+        padding-left: 8px;
+      }
+
+      ion-chip + ion-chip {
+        margin-inline-start: 16px;
+      }
+    </style>
+  </body>
+</html>

core/src/css/test/typography/basic/typography.e2e.ts

@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Typography styles are only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('typography: global styles'), () => {
+    test('should apply the globals styles for each semantic tag', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
+          <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+          <p><ion-text class="ionic-font-size-l"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
+          <p><ion-text class="ionic-font-size-m">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
+          <p><ion-text class="ionic-font-size-s"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
+    });
+
+    test('should apply the utility classes for each heading', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
+          <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
+          <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
+          <h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
+          <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
+          <h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
+    });
+
+    test('should apply the heading classes on ion-text element', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
+          <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
+          <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
+          <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
+          <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
+          <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
+    });
+
+    test('should apply the utility classes for font weights', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
+    });
+
+    test('should apply the utility classes for font display', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.ionic.css" rel="stylesheet" />
+        <div>
+          <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
+          <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
+    });
+  });
+});

core/src/css/typography.ionic.scss

@@ -0,0 +1,90 @@
+@use "../foundations/ionic.vars.scss" as tokens;
+/* This import below is temporary, to make sure basic tests have access to all utility-classes */
+@import "../foundations/ionic.utility.scss";
+
+html {
+  font-family: #{tokens.$ionic-font-family};
+  font-size: #{tokens.$ionic-font-size-m};
+  font-weight: #{tokens.$ionic-font-weight-regular};
+
+  line-height: #{tokens.$ionic-font-line-height-m};
+}
+
+/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
+h1,
+.ionic-heading1,
+h2,
+.ionic-heading2,
+h3,
+.ionic-heading3,
+h4,
+.ionic-heading4,
+h5,
+.ionic-heading5,
+h6,
+.ionic-heading6 {
+  color: #{tokens.$ionic-color-neutral-900};
+
+  font-weight: #{tokens.$ionic-font-weight-semi-bold};
+}
+
+h1,
+.ionic-heading1 {
+  font-size: #{tokens.$ionic-font-size-h1};
+
+  line-height: #{tokens.$ionic-font-line-height-xxl};
+}
+
+h2,
+.ionic-heading2 {
+  font-size: #{tokens.$ionic-font-size-h2};
+
+  line-height: #{tokens.$ionic-font-line-height-xl};
+}
+
+h3,
+.ionic-heading3 {
+  font-size: #{tokens.$ionic-font-size-h3};
+
+  line-height: #{tokens.$ionic-font-line-height-xl};
+}
+
+h4,
+.ionic-heading4 {
+  font-size: #{tokens.$ionic-font-size-h4};
+
+  line-height: #{tokens.$ionic-font-line-height-l};
+}
+
+h5,
+.ionic-heading5 {
+  font-size: #{tokens.$ionic-font-size-h5};
+
+  line-height: #{tokens.$ionic-font-line-height-l};
+}
+
+h6,
+.ionic-heading6 {
+  font-size: #{tokens.$ionic-font-size-h6};
+
+  line-height: #{tokens.$ionic-font-line-height-m};
+}
+
+.ionic-display-s {
+  font-size: #{tokens.$ionic-font-size-display-s};
+  font-weight: #{tokens.$ionic-font-weight-regular};
+
+  line-height: #{tokens.$ionic-font-line-height-s};
+}
+
+.ionic-display-m {
+  font-size: #{tokens.$ionic-font-size-display-m};
+  font-weight: #{tokens.$ionic-font-weight-regular};
+
+  line-height: #{tokens.$ionic-font-line-height-m};
+}
+
+/* Common */
+.ionic-font-italic {
+  font-style: italic;
+}

core/src/foundations/_design-tokens.json

@@ -0,0 +1,423 @@
+{
+  "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": {
+      "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"
+      }
+    },
+    "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"
+      },
+      "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": "100%"
+        }
+      }
+    },
+    "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

@@ -0,0 +1,133 @@
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+
+:root {
+  --ionic-color-primary-10: #f7faff;
+  --ionic-color-primary-50: #cbdffe;
+  --ionic-color-primary-100: #9ec4fd;
+  --ionic-color-primary-200: #74aafc;
+  --ionic-color-primary-300: #4991fb;
+  --ionic-color-primary-400: #1068eb;
+  --ionic-color-primary-500: #0750be;
+  --ionic-color-primary-600: #053d90;
+  --ionic-color-primary-700: #062b63;
+  --ionic-color-primary-800: #061935;
+  --ionic-color-primary-900: #010408;
+  --ionic-color-primary: #1068eb;
+  --ionic-color-secondary: #303d60;
+  --ionic-color-neutral-10: #f5f5f5;
+  --ionic-color-neutral-50: #e7e7e7;
+  --ionic-color-neutral-100: #dadada;
+  --ionic-color-neutral-200: #c9c9c9;
+  --ionic-color-neutral-300: #b8b8b8;
+  --ionic-color-neutral-400: #9a9a9a;
+  --ionic-color-neutral-500: #767676;
+  --ionic-color-neutral-600: #535353;
+  --ionic-color-neutral-700: #373737;
+  --ionic-color-neutral-800: #212121;
+  --ionic-color-neutral-900: #05080f;
+  --ionic-color-error-10: #fffafa;
+  --ionic-color-error-50: #ffd5d5;
+  --ionic-color-error-100: #ffafaf;
+  --ionic-color-error-200: #ff8a8a;
+  --ionic-color-error-300: #ff6666;
+  --ionic-color-error-400: #f72c2c;
+  --ionic-color-error-500: #c71212;
+  --ionic-color-error-600: #970606;
+  --ionic-color-error-700: #670202;
+  --ionic-color-error-800: #380101;
+  --ionic-color-error-900: #080000;
+  --ionic-color-error: #f72c2c;
+  --ionic-color-warning-10: #fffdfa;
+  --ionic-color-warning-50: #ffecce;
+  --ionic-color-warning-100: #ffdba0;
+  --ionic-color-warning-200: #ffca73;
+  --ionic-color-warning-300: #ffb845;
+  --ionic-color-warning-400: #ff9707;
+  --ionic-color-warning-500: #ce7a06;
+  --ionic-color-warning-600: #9c5f0a;
+  --ionic-color-warning-700: #6b430c;
+  --ionic-color-warning-800: #39260b;
+  --ionic-color-warning-900: #080502;
+  --ionic-color-warning: #ff9707;
+  --ionic-color-success-10: #fbfffa;
+  --ionic-color-success-50: #def7d8;
+  --ionic-color-success-100: #c6f0b7;
+  --ionic-color-success-200: #a4e188;
+  --ionic-color-success-300: #73c346;
+  --ionic-color-success-400: #52a518;
+  --ionic-color-success-500: #36870c;
+  --ionic-color-success-600: #36870c;
+  --ionic-color-success-700: #226907;
+  --ionic-color-success-800: #144b05;
+  --ionic-color-success-900: #030f02;
+  --ionic-color-success: #52a518;
+  --ionic-color-info-10: #f5fbff;
+  --ionic-color-info-50: #c6e7ff;
+  --ionic-color-info-100: #97d3ff;
+  --ionic-color-info-200: #6ac0fe;
+  --ionic-color-info-300: #3dadfe;
+  --ionic-color-info-400: #008bef;
+  --ionic-color-info-500: #0071c2;
+  --ionic-color-info-600: #005796;
+  --ionic-color-info-700: #003d69;
+  --ionic-color-info-800: #02243c;
+  --ionic-color-info-900: #020a0f;
+  --ionic-color-info: #008bef;
+  --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-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-font-weight-light: 300;
+  --ionic-font-weight-regular: 400;
+  --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: 100%;
+  --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);
+}

core/src/foundations/ionic.utility.scss

@@ -0,0 +1,639 @@
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+
+
+@import "./ionic.vars";
+
+.ionic-color-primary-10 {
+  color: $ionic-color-primary-10;
+}
+.ionic-background-color-primary-10 {
+  background-color: $ionic-color-primary-10;
+}
+.ionic-color-primary-50 {
+  color: $ionic-color-primary-50;
+}
+.ionic-background-color-primary-50 {
+  background-color: $ionic-color-primary-50;
+}
+.ionic-color-primary-100 {
+  color: $ionic-color-primary-100;
+}
+.ionic-background-color-primary-100 {
+  background-color: $ionic-color-primary-100;
+}
+.ionic-color-primary-200 {
+  color: $ionic-color-primary-200;
+}
+.ionic-background-color-primary-200 {
+  background-color: $ionic-color-primary-200;
+}
+.ionic-color-primary-300 {
+  color: $ionic-color-primary-300;
+}
+.ionic-background-color-primary-300 {
+  background-color: $ionic-color-primary-300;
+}
+.ionic-color-primary-400 {
+  color: $ionic-color-primary-400;
+}
+.ionic-background-color-primary-400 {
+  background-color: $ionic-color-primary-400;
+}
+.ionic-color-primary-500 {
+  color: $ionic-color-primary-500;
+}
+.ionic-background-color-primary-500 {
+  background-color: $ionic-color-primary-500;
+}
+.ionic-color-primary-600 {
+  color: $ionic-color-primary-600;
+}
+.ionic-background-color-primary-600 {
+  background-color: $ionic-color-primary-600;
+}
+.ionic-color-primary-700 {
+  color: $ionic-color-primary-700;
+}
+.ionic-background-color-primary-700 {
+  background-color: $ionic-color-primary-700;
+}
+.ionic-color-primary-800 {
+  color: $ionic-color-primary-800;
+}
+.ionic-background-color-primary-800 {
+  background-color: $ionic-color-primary-800;
+}
+.ionic-color-primary-900 {
+  color: $ionic-color-primary-900;
+}
+.ionic-background-color-primary-900 {
+  background-color: $ionic-color-primary-900;
+}
+.ionic-color-primary {
+  color: $ionic-color-primary;
+}
+.ionic-background-color-primary {
+  background-color: $ionic-color-primary;
+}
+.ionic-color-secondary {
+  color: $ionic-color-secondary;
+}
+.ionic-background-color-secondary {
+  background-color: $ionic-color-secondary;
+}
+.ionic-color-neutral-10 {
+  color: $ionic-color-neutral-10;
+}
+.ionic-background-color-neutral-10 {
+  background-color: $ionic-color-neutral-10;
+}
+.ionic-color-neutral-50 {
+  color: $ionic-color-neutral-50;
+}
+.ionic-background-color-neutral-50 {
+  background-color: $ionic-color-neutral-50;
+}
+.ionic-color-neutral-100 {
+  color: $ionic-color-neutral-100;
+}
+.ionic-background-color-neutral-100 {
+  background-color: $ionic-color-neutral-100;
+}
+.ionic-color-neutral-200 {
+  color: $ionic-color-neutral-200;
+}
+.ionic-background-color-neutral-200 {
+  background-color: $ionic-color-neutral-200;
+}
+.ionic-color-neutral-300 {
+  color: $ionic-color-neutral-300;
+}
+.ionic-background-color-neutral-300 {
+  background-color: $ionic-color-neutral-300;
+}
+.ionic-color-neutral-400 {
+  color: $ionic-color-neutral-400;
+}
+.ionic-background-color-neutral-400 {
+  background-color: $ionic-color-neutral-400;
+}
+.ionic-color-neutral-500 {
+  color: $ionic-color-neutral-500;
+}
+.ionic-background-color-neutral-500 {
+  background-color: $ionic-color-neutral-500;
+}
+.ionic-color-neutral-600 {
+  color: $ionic-color-neutral-600;
+}
+.ionic-background-color-neutral-600 {
+  background-color: $ionic-color-neutral-600;
+}
+.ionic-color-neutral-700 {
+  color: $ionic-color-neutral-700;
+}
+.ionic-background-color-neutral-700 {
+  background-color: $ionic-color-neutral-700;
+}
+.ionic-color-neutral-800 {
+  color: $ionic-color-neutral-800;
+}
+.ionic-background-color-neutral-800 {
+  background-color: $ionic-color-neutral-800;
+}
+.ionic-color-neutral-900 {
+  color: $ionic-color-neutral-900;
+}
+.ionic-background-color-neutral-900 {
+  background-color: $ionic-color-neutral-900;
+}
+.ionic-color-error-10 {
+  color: $ionic-color-error-10;
+}
+.ionic-background-color-error-10 {
+  background-color: $ionic-color-error-10;
+}
+.ionic-color-error-50 {
+  color: $ionic-color-error-50;
+}
+.ionic-background-color-error-50 {
+  background-color: $ionic-color-error-50;
+}
+.ionic-color-error-100 {
+  color: $ionic-color-error-100;
+}
+.ionic-background-color-error-100 {
+  background-color: $ionic-color-error-100;
+}
+.ionic-color-error-200 {
+  color: $ionic-color-error-200;
+}
+.ionic-background-color-error-200 {
+  background-color: $ionic-color-error-200;
+}
+.ionic-color-error-300 {
+  color: $ionic-color-error-300;
+}
+.ionic-background-color-error-300 {
+  background-color: $ionic-color-error-300;
+}
+.ionic-color-error-400 {
+  color: $ionic-color-error-400;
+}
+.ionic-background-color-error-400 {
+  background-color: $ionic-color-error-400;
+}
+.ionic-color-error-500 {
+  color: $ionic-color-error-500;
+}
+.ionic-background-color-error-500 {
+  background-color: $ionic-color-error-500;
+}
+.ionic-color-error-600 {
+  color: $ionic-color-error-600;
+}
+.ionic-background-color-error-600 {
+  background-color: $ionic-color-error-600;
+}
+.ionic-color-error-700 {
+  color: $ionic-color-error-700;
+}
+.ionic-background-color-error-700 {
+  background-color: $ionic-color-error-700;
+}
+.ionic-color-error-800 {
+  color: $ionic-color-error-800;
+}
+.ionic-background-color-error-800 {
+  background-color: $ionic-color-error-800;
+}
+.ionic-color-error-900 {
+  color: $ionic-color-error-900;
+}
+.ionic-background-color-error-900 {
+  background-color: $ionic-color-error-900;
+}
+.ionic-color-error {
+  color: $ionic-color-error;
+}
+.ionic-background-color-error {
+  background-color: $ionic-color-error;
+}
+.ionic-color-warning-10 {
+  color: $ionic-color-warning-10;
+}
+.ionic-background-color-warning-10 {
+  background-color: $ionic-color-warning-10;
+}
+.ionic-color-warning-50 {
+  color: $ionic-color-warning-50;
+}
+.ionic-background-color-warning-50 {
+  background-color: $ionic-color-warning-50;
+}
+.ionic-color-warning-100 {
+  color: $ionic-color-warning-100;
+}
+.ionic-background-color-warning-100 {
+  background-color: $ionic-color-warning-100;
+}
+.ionic-color-warning-200 {
+  color: $ionic-color-warning-200;
+}
+.ionic-background-color-warning-200 {
+  background-color: $ionic-color-warning-200;
+}
+.ionic-color-warning-300 {
+  color: $ionic-color-warning-300;
+}
+.ionic-background-color-warning-300 {
+  background-color: $ionic-color-warning-300;
+}
+.ionic-color-warning-400 {
+  color: $ionic-color-warning-400;
+}
+.ionic-background-color-warning-400 {
+  background-color: $ionic-color-warning-400;
+}
+.ionic-color-warning-500 {
+  color: $ionic-color-warning-500;
+}
+.ionic-background-color-warning-500 {
+  background-color: $ionic-color-warning-500;
+}
+.ionic-color-warning-600 {
+  color: $ionic-color-warning-600;
+}
+.ionic-background-color-warning-600 {
+  background-color: $ionic-color-warning-600;
+}
+.ionic-color-warning-700 {
+  color: $ionic-color-warning-700;
+}
+.ionic-background-color-warning-700 {
+  background-color: $ionic-color-warning-700;
+}
+.ionic-color-warning-800 {
+  color: $ionic-color-warning-800;
+}
+.ionic-background-color-warning-800 {
+  background-color: $ionic-color-warning-800;
+}
+.ionic-color-warning-900 {
+  color: $ionic-color-warning-900;
+}
+.ionic-background-color-warning-900 {
+  background-color: $ionic-color-warning-900;
+}
+.ionic-color-warning {
+  color: $ionic-color-warning;
+}
+.ionic-background-color-warning {
+  background-color: $ionic-color-warning;
+}
+.ionic-color-success-10 {
+  color: $ionic-color-success-10;
+}
+.ionic-background-color-success-10 {
+  background-color: $ionic-color-success-10;
+}
+.ionic-color-success-50 {
+  color: $ionic-color-success-50;
+}
+.ionic-background-color-success-50 {
+  background-color: $ionic-color-success-50;
+}
+.ionic-color-success-100 {
+  color: $ionic-color-success-100;
+}
+.ionic-background-color-success-100 {
+  background-color: $ionic-color-success-100;
+}
+.ionic-color-success-200 {
+  color: $ionic-color-success-200;
+}
+.ionic-background-color-success-200 {
+  background-color: $ionic-color-success-200;
+}
+.ionic-color-success-300 {
+  color: $ionic-color-success-300;
+}
+.ionic-background-color-success-300 {
+  background-color: $ionic-color-success-300;
+}
+.ionic-color-success-400 {
+  color: $ionic-color-success-400;
+}
+.ionic-background-color-success-400 {
+  background-color: $ionic-color-success-400;
+}
+.ionic-color-success-500 {
+  color: $ionic-color-success-500;
+}
+.ionic-background-color-success-500 {
+  background-color: $ionic-color-success-500;
+}
+.ionic-color-success-600 {
+  color: $ionic-color-success-600;
+}
+.ionic-background-color-success-600 {
+  background-color: $ionic-color-success-600;
+}
+.ionic-color-success-700 {
+  color: $ionic-color-success-700;
+}
+.ionic-background-color-success-700 {
+  background-color: $ionic-color-success-700;
+}
+.ionic-color-success-800 {
+  color: $ionic-color-success-800;
+}
+.ionic-background-color-success-800 {
+  background-color: $ionic-color-success-800;
+}
+.ionic-color-success-900 {
+  color: $ionic-color-success-900;
+}
+.ionic-background-color-success-900 {
+  background-color: $ionic-color-success-900;
+}
+.ionic-color-success {
+  color: $ionic-color-success;
+}
+.ionic-background-color-success {
+  background-color: $ionic-color-success;
+}
+.ionic-color-info-10 {
+  color: $ionic-color-info-10;
+}
+.ionic-background-color-info-10 {
+  background-color: $ionic-color-info-10;
+}
+.ionic-color-info-50 {
+  color: $ionic-color-info-50;
+}
+.ionic-background-color-info-50 {
+  background-color: $ionic-color-info-50;
+}
+.ionic-color-info-100 {
+  color: $ionic-color-info-100;
+}
+.ionic-background-color-info-100 {
+  background-color: $ionic-color-info-100;
+}
+.ionic-color-info-200 {
+  color: $ionic-color-info-200;
+}
+.ionic-background-color-info-200 {
+  background-color: $ionic-color-info-200;
+}
+.ionic-color-info-300 {
+  color: $ionic-color-info-300;
+}
+.ionic-background-color-info-300 {
+  background-color: $ionic-color-info-300;
+}
+.ionic-color-info-400 {
+  color: $ionic-color-info-400;
+}
+.ionic-background-color-info-400 {
+  background-color: $ionic-color-info-400;
+}
+.ionic-color-info-500 {
+  color: $ionic-color-info-500;
+}
+.ionic-background-color-info-500 {
+  background-color: $ionic-color-info-500;
+}
+.ionic-color-info-600 {
+  color: $ionic-color-info-600;
+}
+.ionic-background-color-info-600 {
+  background-color: $ionic-color-info-600;
+}
+.ionic-color-info-700 {
+  color: $ionic-color-info-700;
+}
+.ionic-background-color-info-700 {
+  background-color: $ionic-color-info-700;
+}
+.ionic-color-info-800 {
+  color: $ionic-color-info-800;
+}
+.ionic-background-color-info-800 {
+  background-color: $ionic-color-info-800;
+}
+.ionic-color-info-900 {
+  color: $ionic-color-info-900;
+}
+.ionic-background-color-info-900 {
+  background-color: $ionic-color-info-900;
+}
+.ionic-color-info {
+  color: $ionic-color-info;
+}
+.ionic-background-color-info {
+  background-color: $ionic-color-info;
+}
+
+.ionic-font-letter-spacing-none {
+  letter-spacing: $ionic-font-letter-spacing-none;
+}
+.ionic-font-letter-spacing-s {
+  letter-spacing: $ionic-font-letter-spacing-s;
+}
+.ionic-font-letter-spacing-m {
+  letter-spacing: $ionic-font-letter-spacing-m;
+}
+.ionic-font-line-height-xs {
+  line-height: $ionic-font-line-height-xs;
+}
+.ionic-font-line-height-s {
+  line-height: $ionic-font-line-height-s;
+}
+.ionic-font-line-height-m {
+  line-height: $ionic-font-line-height-m;
+}
+.ionic-font-line-height-l {
+  line-height: $ionic-font-line-height-l;
+}
+.ionic-font-line-height-xl {
+  line-height: $ionic-font-line-height-xl;
+}
+.ionic-font-line-height-xxl {
+  line-height: $ionic-font-line-height-xxl;
+}
+.ionic-font-line-height-display-s {
+  line-height: $ionic-font-line-height-display-s;
+}
+.ionic-font-line-height-display-m {
+  line-height: $ionic-font-line-height-display-m;
+}
+.ionic-font-size-h1 {
+  font-size: $ionic-font-size-h1;
+}
+.ionic-font-size-h2 {
+  font-size: $ionic-font-size-h2;
+}
+.ionic-font-size-h3 {
+  font-size: $ionic-font-size-h3;
+}
+.ionic-font-size-h4 {
+  font-size: $ionic-font-size-h4;
+}
+.ionic-font-size-h5 {
+  font-size: $ionic-font-size-h5;
+}
+.ionic-font-size-h6 {
+  font-size: $ionic-font-size-h6;
+}
+.ionic-font-size-display-s {
+  font-size: $ionic-font-size-display-s;
+}
+.ionic-font-size-display-m {
+  font-size: $ionic-font-size-display-m;
+}
+.ionic-font-size-s {
+  font-size: $ionic-font-size-s;
+}
+.ionic-font-size-m {
+  font-size: $ionic-font-size-m;
+}
+.ionic-font-size-l {
+  font-size: $ionic-font-size-l;
+}
+.ionic-font-weight-light {
+  font-weight: $ionic-font-weight-light;
+}
+.ionic-font-weight-regular {
+  font-weight: $ionic-font-weight-regular;
+}
+.ionic-font-weight-semi-bold {
+  font-weight: $ionic-font-weight-semi-bold;
+}
+.ionic-font-weight-bold {
+  font-weight: $ionic-font-weight-bold;
+}
+.ionic-margin-space-none {
+  margin: $ionic-space-none;
+};
+.ionic-padding-space-none {
+  padding: $ionic-space-none;
+}
+.ionic-margin-space-xxxxs {
+  margin: $ionic-space-xxxxs;
+};
+.ionic-padding-space-xxxxs {
+  padding: $ionic-space-xxxxs;
+}
+.ionic-margin-space-xxxs {
+  margin: $ionic-space-xxxs;
+};
+.ionic-padding-space-xxxs {
+  padding: $ionic-space-xxxs;
+}
+.ionic-margin-space-xxs {
+  margin: $ionic-space-xxs;
+};
+.ionic-padding-space-xxs {
+  padding: $ionic-space-xxs;
+}
+.ionic-margin-space-xs {
+  margin: $ionic-space-xs;
+};
+.ionic-padding-space-xs {
+  padding: $ionic-space-xs;
+}
+.ionic-margin-space-s {
+  margin: $ionic-space-s;
+};
+.ionic-padding-space-s {
+  padding: $ionic-space-s;
+}
+.ionic-margin-space-base {
+  margin: $ionic-space-base;
+};
+.ionic-padding-space-base {
+  padding: $ionic-space-base;
+}
+.ionic-margin-space-m {
+  margin: $ionic-space-m;
+};
+.ionic-padding-space-m {
+  padding: $ionic-space-m;
+}
+.ionic-margin-space-l {
+  margin: $ionic-space-l;
+};
+.ionic-padding-space-l {
+  padding: $ionic-space-l;
+}
+.ionic-margin-space-xl {
+  margin: $ionic-space-xl;
+};
+.ionic-padding-space-xl {
+  padding: $ionic-space-xl;
+}
+.ionic-margin-space-xxl {
+  margin: $ionic-space-xxl;
+};
+.ionic-padding-space-xxl {
+  padding: $ionic-space-xxl;
+}
+.ionic-margin-space-xxxl {
+  margin: $ionic-space-xxxl;
+};
+.ionic-padding-space-xxxl {
+  padding: $ionic-space-xxxl;
+}
+.ionic-margin-space-xxxxl {
+  margin: $ionic-space-xxxxl;
+};
+.ionic-padding-space-xxxxl {
+  padding: $ionic-space-xxxxl;
+}
+.ionic-border-radius-square {
+  border-radius: $ionic-border-radius-square;
+}
+.ionic-border-radius-rounded-small {
+  border-radius: $ionic-border-radius-rounded-small;
+}
+.ionic-border-radius-rounded-medium {
+  border-radius: $ionic-border-radius-rounded-medium;
+}
+.ionic-border-radius-rounded-large {
+  border-radius: $ionic-border-radius-rounded-large;
+}
+.ionic-border-radius-rounded-x-large {
+  border-radius: $ionic-border-radius-rounded-x-large;
+}
+.ionic-border-radius-rounded-full {
+  border-radius: $ionic-border-radius-rounded-full;
+}
+.ionic-border-size-small {
+  border-width: $ionic-border-size-small;
+}
+.ionic-border-size-medium {
+  border-width: $ionic-border-size-medium;
+}
+.ionic-border-size-large {
+  border-width: $ionic-border-size-large;
+}
+.ionic-elevation-0 {
+  box-shadow: $ionic-elevation-0;
+}
+.ionic-elevation-1 {
+  box-shadow: $ionic-elevation-1;
+}
+.ionic-elevation-2 {
+  box-shadow: $ionic-elevation-2;
+}
+.ionic-elevation-3 {
+  box-shadow: $ionic-elevation-3;
+}
+.ionic-elevation-4 {
+  box-shadow: $ionic-elevation-4;
+}

core/src/foundations/ionic.vars.scss

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

core/src/global/ionic-global.ts

@@ -227,7 +227,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
      * behavior for applications that are not setting the "theme".
      */
     while (elm) {
-      const theme = (elm as any).theme || elm.getAttribute('theme');
+      const theme = elm.getAttribute('theme');
 
       if (theme) {
         if (isThemeSupported(theme)) {
@@ -241,7 +241,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
        * If a theme is not detected, then fallback to using the
        * `mode` attribute to determine the style sheets to use.
        */
-      const elmMode = (elm as any).mode || elm.getAttribute('mode');
+      const elmMode = elm.getAttribute('mode');
 
       if (elmMode) {
         if (isModeSupported(elmMode)) {