Update README.md

Issue number: resolves #ROU-4838

---------

<!-- 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 styles for icons inside Chip (Ionic Theme)
- Fixed an issue related to hover status, after tokens integration

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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

.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

README.md

@@ -9,7 +9,7 @@
 </h1>
 
 <p align="center">
-  Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.
+  Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web. test 123
 </p>
 <p align="center">
   Ionic is based on <a href="https://www.webcomponents.org/introduction">Web Components</a>, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like <a href="https://angular.io/">Angular</a>, <a href="https://reactjs.com/">React</a>, and <a href="https://vuejs.org/">Vue</a>.

core/.stylelintrc.yml

@@ -23,10 +23,10 @@ rules:
   at-rule-empty-line-before:
     - always
     - except:
-      - blockless-after-blockless
-      - first-nested
+        - blockless-after-blockless
+        - first-nested
       ignore:
-      - after-comment
+        - after-comment
 
   block-closing-brace-newline-before:
     - always
@@ -40,14 +40,13 @@ rules:
   custom-property-empty-line-before:
     - always
     - except:
-      - after-comment
-      - after-custom-property
-      - first-nested
+        - after-comment
+        - after-custom-property
+        - first-nested
 
   declaration-no-important:
     - true
 
-
   order/order:
     - custom-properties
     - dollar-variables
@@ -57,216 +56,212 @@ rules:
 
   # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
   order/properties-order:
-
     # Box
 
     - emptyLineBefore: always
       properties:
-      - display
-      - position
-      - top
-      - right
-      - bottom
-      - left
+        - display
+        - position
+        - top
+        - right
+        - bottom
+        - left
 
     - emptyLineBefore: always
       properties:
-      - flex
-      - flex-basis
-      - flex-direction
-      - flex-flow
-      - flex-grow
-      - flex-shrink
-      - flex-wrap
-      - align-content
-      - align-items
-      - align-self
-      - justify-content
-      - order
+        - flex
+        - flex-basis
+        - flex-direction
+        - flex-flow
+        - flex-grow
+        - flex-shrink
+        - flex-wrap
+        - align-content
+        - align-items
+        - align-self
+        - justify-content
+        - order
 
     - emptyLineBefore: always
       properties:
-      - width
-      - min-width
-      - max-width
+        - width
+        - min-width
+        - max-width
 
-      - height
-      - min-height
-      - max-height
+        - height
+        - min-height
+        - max-height
 
     - emptyLineBefore: always
       properties:
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
+        - margin
+        - margin-top
+        - margin-right
+        - margin-bottom
+        - margin-left
 
     - emptyLineBefore: always
       properties:
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
+        - padding
+        - padding-top
+        - padding-right
+        - padding-bottom
+        - padding-left
 
     - emptyLineBefore: always
       properties:
-      - float
-      - clear
+        - float
+        - clear
 
     - emptyLineBefore: always
       properties:
-      - columns
-      - column-gap
-      - column-fill
-      - column-rule
-      - column-span
-      - column-count
-      - column-width
+        - columns
+        - column-gap
+        - column-fill
+        - column-rule
+        - column-span
+        - column-count
+        - column-width
 
     - emptyLineBefore: always
       properties:
-      - transform
-      - transform-box
-      - transform-origin
-      - transform-style
+        - transform
+        - transform-box
+        - transform-origin
+        - transform-style
 
     - emptyLineBefore: always
       properties:
-      - transition
-      - transition-delay
-      - transition-duration
-      - transition-property
-      - transition-timing-function
+        - transition
+        - transition-delay
+        - transition-duration
+        - transition-property
+        - transition-timing-function
 
     # Border
 
     - emptyLineBefore: always
       properties:
-      - border
-      - border-top
-      - border-right
-      - border-bottom
-      - border-left
-      - border-width
-      - border-top-width
-      - border-right-width
-      - border-bottom-width
-      - border-left-width
+        - border
+        - border-top
+        - border-right
+        - border-bottom
+        - border-left
+        - border-width
+        - border-top-width
+        - border-right-width
+        - border-bottom-width
+        - border-left-width
 
-      - border-style
-      - border-top-style
-      - border-right-style
-      - border-bottom-style
-      - border-left-style
+        - border-style
+        - border-top-style
+        - border-right-style
+        - border-bottom-style
+        - border-left-style
 
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
+        - border-radius
+        - border-top-left-radius
+        - border-top-right-radius
+        - border-bottom-left-radius
+        - border-bottom-right-radius
 
-      - border-color
-      - border-top-color
-      - border-right-color
-      - border-bottom-color
-      - border-left-color
+        - border-color
+        - border-top-color
+        - border-right-color
+        - border-bottom-color
+        - border-left-color
 
     - emptyLineBefore: always
       properties:
-      - outline
-      - outline-color
-      - outline-offset
-      - outline-style
-      - outline-width
+        - outline
+        - outline-color
+        - outline-offset
+        - outline-style
+        - outline-width
 
     # Background
 
     - emptyLineBefore: always
       properties:
-      - background
-      - background-attachment
-      - background-clip
-      - background-color
-      - background-image
-      - background-repeat
-      - background-position
-      - background-size
+        - background
+        - background-attachment
+        - background-clip
+        - background-color
+        - background-image
+        - background-repeat
+        - background-position
+        - background-size
 
-    # Text
+        # Text
 
-      - color
+        - color
 
     - emptyLineBefore: always
       properties:
-      - font
-      - font-family
-      - font-size
-      - font-smoothing
-      - font-style
-      - font-variant
-      - font-weight
+        - font
+        - font-family
+        - font-size
+        - font-smoothing
+        - font-style
+        - font-variant
+        - font-weight
 
     - emptyLineBefore: always
       properties:
-      - letter-spacing
-      - line-height
-      - list-style
+        - letter-spacing
+        - line-height
+        - list-style
 
     - emptyLineBefore: always
       properties:
-      - text-align
-      - text-decoration
-      - text-indent
-      - text-overflow
-      - text-rendering
-      - text-shadow
-      - text-transform
-      - text-wrap
+        - text-align
+        - text-decoration
+        - text-indent
+        - text-overflow
+        - text-rendering
+        - text-shadow
+        - text-transform
+        - text-wrap
 
     - emptyLineBefore: always
       properties:
-      - white-space
-      - word-spacing
+        - white-space
+        - word-spacing
 
     # Other
 
     - emptyLineBefore: always
       properties:
-      - border-collapse
-      - border-spacing
-      - box-shadow
-      - caption-side
-      - contain
-      - content
-      - cursor
-      - direction
-      - empty-cells
-      - object-fit
-      - opacity
-      - overflow
-      - quotes
-      - speak
-      - table-layout
-      - touch-action
-      - user-select
-      - vertical-align
-      - visibility
-      - z-index
+        - border-collapse
+        - border-spacing
+        - box-shadow
+        - caption-side
+        - contain
+        - content
+        - cursor
+        - direction
+        - empty-cells
+        - object-fit
+        - opacity
+        - overflow
+        - quotes
+        - speak
+        - table-layout
+        - touch-action
+        - user-select
+        - vertical-align
+        - visibility
+        - z-index
 
   property-disallowed-list:
     - background-position
     - 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/api.txt

@@ -321,9 +321,6 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
-ion-checkbox,prop,required,boolean,false,false,false
-ion-checkbox,prop,shape,"rectangular" | "soft" | undefined,'soft',false,true
-ion-checkbox,prop,size,"default" | "small" | undefined,'default',false,true
 ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
@@ -341,7 +338,6 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
-ion-checkbox,part,focus-ring
 ion-checkbox,part,label
 ion-checkbox,part,mark
 

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

@@ -724,18 +724,6 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
-        /**
-          * If `true`, the checkbox will be presented with an error style when it is unchecked.
-         */
-        "required": boolean;
-        /**
-          * Set to `"soft"` for a checkbox with more rounded corners.
-         */
-        "shape"?: 'soft' | 'rectangular';
-        /**
-          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
-         */
-        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5964,18 +5952,6 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
-        /**
-          * If `true`, the checkbox will be presented with an error style when it is unchecked.
-         */
-        "required"?: boolean;
-        /**
-          * Set to `"soft"` for a checkbox with more rounded corners.
-         */
-        "shape"?: 'soft' | 'rectangular';
-        /**
-          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
-         */
-        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */

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/clear/button.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Fill="clear" does not render differently based on the direction.
  */
-configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('button: fill: clear'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/clear`, config);

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

@@ -74,7 +74,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * Shape="rectangular" is only available in the Ionic theme.
  */
-configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: shape'), () => {
     test.describe('rectangular', () => {
       test('should not have visual regressions', async ({ page }) => {

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

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
-configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render small buttons', async ({ page }) => {
       await page.setContent(
@@ -65,7 +64,7 @@ configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ titl
 /**
  * The following tests are specific to the Ionic theme and do not depend on the text direction.
  */
-configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render xsmall buttons', async ({ page }) => {
       await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);

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/checkbox/checkbox.ionic.scss

@@ -1,165 +0,0 @@
-@import "./checkbox";
-@import "./checkbox.ionic.vars";
-
-// ionic Checkbox
-// --------------------------------------------------
-
-:host {
-  // Border
-  --border-radius: calc(var(--size) * .125);
-  --border-width: #{$checkbox-ionic-icon-border-width};
-  --border-style: #{$checkbox-ionic-icon-border-style};
-  --border-color: #{$checkbox-ionic-icon-border-color-off};
-  --checkmark-width: 3;
-  --padding-top: #{$checkbox-ionic-padding-top};
-  --padding-bottom: #{$checkbox-ionic-padding-bottom};
-
-  // Background
-  --checkbox-background: #{$checkbox-ionic-icon-background-color-off};
-
-  // Transition
-  --transition: #{background $checkbox-ionic-transition-duration $checkbox-ionic-transition-easing};
-
-  // Size
-  --size: #{$checkbox-ionic-icon-size};
-  // add to existing selector
-
-  // margin is required to make room for outline on focus, otherwise the outline may get cut off
-  @include margin($checkbox-ionic-outline-width);  
-  @include padding(--padding-top, null, --padding-bottom, null);
-
-  // Target area
-  &::after {
-    @include position(50%, 0, null, 0);
-
-    position: absolute;
-
-    height: 100%;
-    min-height: 48px;
-
-    transform: translateY(-50%);
-
-    content: "";
-
-    cursor: pointer;
-
-    z-index: 1;
-  }
-
-  .native-wrapper{
-    position: relative;
-  }
-}
-
-// Ionic Design Checkbox Sizes
-// --------------------------------------------------
-:host(.checkbox-small) {
-  --padding-top: #{$checkbox-ionic-small-padding-top};
-  --padding-bottom: #{$checkbox-ionic-small-padding-bottom};
-
-   // Size
-   --size: #{$checkbox-ionic-small-icon-size};
-}
-
-// Ionic Design Checkbox Shapes
-// --------------------------------------------------
-:host(.checkbox-rectangular) {
-  --border-radius: #{$checkbox-ionic-rectangular-border};
-}
-
-// Ionic Design Checkbox Disabled
-// --------------------------------------------------
-// disabled, indeterminate checkbox
-:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #74aafc;
-}
-
-// disabled, unchecked checkbox
-:host(.checkbox-disabled) .checkbox-icon {
-  border-color: #c9c9c9;
-
-  background-color: #f5f5f5;
-}
-// disabled, checked checkbox
-:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #A8C8F8;
-}
-
-// Ionic Design Checkbox Required State
-// --------------------------------------------------
-// Unhecked checkbox with `required` property set to true
-:host(.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
-  .checkbox-icon {
-    border-color: #f72c2c;
-  }
-}
-
-// Focused: Unchecked checkbox with `required` property set to true
-:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
-  outline-color: #ffafaf;
-}
-
-// Ionic Design Checkbox Focus Ring
-// --------------------------------------------------
-:host(.ion-focused:not(.checkbox-disabled)) .focus-ring {
-  @include position(-4px, -4px, -4px, -4px);
-  position: absolute;
-
-  width: calc(100% + 8px);
-  height: calc(100% + 8px);
-
-  transition: border-color 0.3s;
-
-  border: 2px solid $checkbox-ionic-focus-ring-color;
-
-  @include border-radius(var(--border-radius));
-
-  content: "";
-  box-sizing: border-box;
-}
-
-// Required state
-:host(.ion-focused.checkbox-required) .focus-ring {
-  border-color:$checkbox-ionic-focus-required-ring-color;
-}
-
-// Checkbox: Hover
-// --------------------------------------------------------
-@media (any-hover: hover) {
-:host(:hover) .checkbox-icon {
-  background-color: #ececec; // mix of 'white', '#121212', 0.08, 'rgb'
-}
-
-:host(:hover.checkbox-checked) .checkbox-icon,
-:host(:hover.checkbox-indeterminate) .checkbox-icon {
-  background-color: #1061da; // mix of '#1068eb', '#121212', 0.08, 'rgb'
-}
-
-// unchecked checkbox with `required` property set to true
-:host(:hover.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
-  .checkbox-icon {
-    border-color: #ee2b2b;
-  }
-}
-}
-
-// Checkbox: Active
-// --------------------------------------------------------
-:host(.ion-activated) .checkbox-icon {
-  background-color: #e3e3e3; // mix of 'white', '#121212', 0.12, 'rgb'
-}
-
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  background-color: #105ed1; // mix of '#1068eb', '#121212', 0.12, 'rgb'
-}
-
-:host(.checkbox-label-placement-start) {
-  display: flex;
-
-  justify-content: space-between;
-}

core/src/components/checkbox/checkbox.ionic.vars.scss

@@ -1,63 +0,0 @@
-@import "../../themes/ionic.globals.md";
-@import "../item/item.md.vars";
-
-// ionic Checkbox
-// --------------------------------------------------
-
-/// @prop - Background color of the checkbox icon when off
-$checkbox-ionic-icon-background-color-off:  $item-md-background !default;
-
-/// @prop - Size of the checkbox icon
-/// The icon size does not use dynamic font
-/// because it does not scale in native.
-$checkbox-ionic-icon-size: 24px !default;
-
-/// @prop - Icon size of the checkbox for the small size
-$checkbox-ionic-small-icon-size: 16px !default;
-
-/// @prop - Border width of the checkbox icon
-$checkbox-ionic-icon-border-width: 1px !default;
-
-/// @prop - Border style of the checkbox icon
-$checkbox-ionic-icon-border-style: solid !default;
-
-/// @prop - Border color of the checkbox icon when off
-$checkbox-ionic-icon-border-color-off: #9a9a9a !default;
-
-/// @prop - Outline width of the checkbox
-$checkbox-ionic-outline-width: 2px !default;
-
-/// @prop - Padding top of the checkbox for the default size
-$checkbox-ionic-padding-top: 12px !default;
-
-/// @prop - Padding bottom of the button for the default size
-$checkbox-ionic-padding-bottom: 12px !default;
-
-/// @prop - Padding top of the checkbox for the small size
-$checkbox-ionic-small-padding-top: 16px !default;
-
-/// @prop - Padding bottom of the button for the small size
-$checkbox-ionic-small-padding-bottom: 16px !default;
-
-/// @prop - Focus color of the checkbox
-$checkbox-ionic-focus-ring-color: #9ec4fd !default;
-
-/// @prop - Focus color of the required checkbox
-$checkbox-ionic-focus-required-ring-color: #FFAFAF !default;
-
-/// @prop - Transition duration of the checkbox
-$checkbox-ionic-transition-duration: 180ms !default;
-
-/// @prop - Transition easing of the checkbox
-$checkbox-ionic-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
-
-
-// Checkbox Shapes
-// -------------------------------------------------------------------------------
-
-/* Rectangular */
-/// @prop - Rectangular border radius of the checkbox
-$checkbox-ionic-rectangular-border: 0 !default;
-
-
-

core/src/components/checkbox/checkbox.tsx

@@ -18,14 +18,13 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
  * @part container - The container for the checkbox mark.
  * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
- * @part focus-ring - The visual indicator that appears as an outline around the checkbox when focused. Only available for the Ionic theme.
  */
 @Component({
   tag: 'ion-checkbox',
   styleUrls: {
     ios: 'checkbox.ios.scss',
     md: 'checkbox.md.scss',
-    ionic: 'checkbox.ionic.scss',
+    ionic: 'checkbox.md.scss',
   },
   shadow: true,
 })
@@ -99,22 +98,6 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
-  /**
-   * If `true`, the checkbox will be presented with an error style when it is unchecked.
-   */
-  @Prop() required = false;
-
-  /**
-   * Set to `"soft"` for a checkbox with more rounded corners.
-   */
-  @Prop() shape?: 'soft' | 'rectangular' = 'soft';
-
-  /**
-   * Set to `"small"` for a checkbox with less height and padding or to `"default"`
-   * for a checkbox with the default height and padding.
-   */
-  @Prop() size?: 'small' | 'default' = 'default';
-
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
@@ -198,9 +181,6 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
-      required,
-      size,
-      shape,
     } = this;
     const theme = getIonTheme(this);
 
@@ -221,9 +201,6 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
-          'checkbox-required': required,
-          [`checkbox-${size}`]: true,
-          [`checkbox-${shape}`]: true,
         })}
         onClick={this.onClick}
       >
@@ -256,7 +233,6 @@ export class Checkbox implements ComponentInterface {
             <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
               {path}
             </svg>
-            {theme === 'ionic' && <div part="focus-ring" class="focus-ring"></div>}
           </div>
         </label>
       </Host>
@@ -276,12 +252,6 @@ export class Checkbox implements ComponentInterface {
       ) : (
         <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
       );
-    } else if (theme === 'ionic') {
-      path = indeterminate ? (
-        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
-      ) : (
-        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
-      );
     }
 
     return path;

core/src/components/checkbox/test/theme-ionic/checkbox.e2e.ts

@@ -1,43 +0,0 @@
-import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
-import { configs, test } from '@utils/test/playwright';
-
-class CheckboxFixture {
-  readonly page: E2EPage;
-  readonly screenshotFn?: (file: string) => string;
-
-  constructor(page: E2EPage, screenshot?: (file: string) => string) {
-    this.page = page;
-    this.screenshotFn = screenshot;
-  }
-
-  async checkScreenshot(modifier: string) {
-    const { screenshotFn } = this;
-
-    if (!screenshotFn) {
-      throw new Error(
-        'A screenshot function is required to take a screenshot. Pass one in when creating CheckboxFixture.'
-      );
-    }
-
-    const wrapper = this.page.locator('#screenshot-wrapper');
-
-    await expect(wrapper).toHaveScreenshot(screenshotFn(`${modifier}-checkbox`));
-  }
-}
-
-configs({ themes: ['ionic'], modes: ['md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('checkbox: theme ionic'), () => {
-    let checkboxFixture!: CheckboxFixture;
-
-    test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/checkbox/test/theme-ionic`, config);
-      await page.setIonViewport();
-      checkboxFixture = new CheckboxFixture(page, screenshot);
-    });
-
-    test('default', async () => {
-      await checkboxFixture.checkScreenshot(`default`);
-    });
-  });
-});

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

@@ -1,419 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr" theme="ionic">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Basic</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>
-  <style>
-    ion-checkbox.checkbox-part::part(mark) {
-      transform: scale(0.5);
-      transform-origin: center;
-    }
-    ion-col {
-      border: 1px solid cadetblue;
-    }
-  </style>
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Checkbox - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <div id="checkboxes">
-          <ion-title>Label Placement Default</ion-title>
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-margin-start">Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" class="ion-margin-start">Rectangular</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-margin-start"> Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused ion-margin-start">
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox checked>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" checked>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox disabled>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" disabled>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox required>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" required>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" required>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" required>Small Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox indeterminate>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" indeterminate>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </div>
-
-        <div id="checkboxes2">
-          <ion-title>Label Placement End</ion-title>
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end">Default</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-margin-start">Default</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-margin-start">
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-margin-start">
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" class="ion-focused ion-margin-start">Focused</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused ion-margin-start">
-                  Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused ion-margin-start">
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox
-                  label-placement="end"
-                  size="small"
-                  shape="rectangular"
-                  class="ion-focused ion-margin-start"
-                >
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" checked>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" checked>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" checked>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" checked>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" checked>Focused</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" checked>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" checked>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" disabled>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" disabled>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" disabled>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" disabled>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" disabled>Focused</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" disabled>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" disabled>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" required>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" required>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" required>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" required>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" required>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" required>
-                  Small Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" required>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" required>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" indeterminate>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" indeterminate>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" indeterminate>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" indeterminate>
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" class="ion-focused" indeterminate>Focused</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" indeterminate>
-                  Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

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;
+}