Merge branch 'next' into chore-sync-next-4848

BREAKING.md

@@ -13,3 +13,22 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
 
 ## Version 9.x
+
+- [Components](#version-9x-components)
+  - [Button](#version-9x-button)
+  - [Card](#version-9x-card)
+  - [Chip](#version-9x-chip)
+
+<h2 id="version-9x-components">Components</h2>
+
+<h4 id="version-9x-button">Button</h4>
+
+- The `border-radius` of the `ios` and `md` button now defaults to `6px` and `999px` instead of `14px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"` for `md` and override the `--border-radius` CSS variable for `ios` to `14px`, or set it to a different value entirely.
+
+<h4 id="version-9x-card">Card</h4>
+
+- The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+<h4 id="version-9x-chip">Chip</h4>
+
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.

core/api.txt

@@ -386,7 +386,7 @@ ion-button,prop,mode,"ios" | "md",undefined,false,false
 ion-button,prop,rel,string | undefined,undefined,false,false
 ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-button,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
+ion-button,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,true
 ion-button,prop,size,"default" | "large" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,true
 ion-button,prop,strong,boolean,false,false,false
 ion-button,prop,target,string | undefined,undefined,false,false
@@ -480,12 +480,14 @@ ion-card,prop,mode,"ios" | "md",undefined,false,false
 ion-card,prop,rel,string | undefined,undefined,false,false
 ion-card,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
-ion-card,prop,shape,"rectangular" | "round" | undefined,undefined,false,true
+ion-card,prop,shape,"rectangular" | "round" | "soft" | undefined,'round',false,true
 ion-card,prop,target,string | undefined,undefined,false,false
 ion-card,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-card,css-prop,--background,ios
 ion-card,css-prop,--background,md
+ion-card,css-prop,--border-radius,ios
+ion-card,css-prop,--border-radius,md
 ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
@@ -575,10 +577,13 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
+ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
+ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background,ios
 ion-chip,css-prop,--background,md
+ion-chip,css-prop,--border-radius,ios
+ion-chip,css-prop,--border-radius,md
 ion-chip,css-prop,--color,ios
 ion-chip,css-prop,--color,md
 

core/package.json

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

core/scripts/tokens.js

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

core/scripts/tokens/index.js

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

core/scripts/tokens/utilities.js

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

core/src/components.d.ts

@@ -543,9 +543,9 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
@@ -619,9 +619,9 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
+          * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -763,9 +763,13 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Define the Chip corner shape, when using the Ionic Theme.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5795,9 +5799,9 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
@@ -5871,9 +5875,9 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * Set to `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners.
+          * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
@@ -6027,9 +6031,13 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Define the Chip corner shape, when using the Ionic Theme.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -1,3 +1,4 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "./button";
 @import "./button.ionic.vars";
 
@@ -5,11 +6,11 @@
 // -------------------------------------------------------------------------------
 
 :host {
-  --border-radius: #{$button-ionic-border-radius};
   --padding-bottom: var(--padding-top);
   --padding-end: #{$button-ionic-padding-end};
   --padding-start: var(--padding-end);
   --padding-top: #{$button-ionic-padding-top};
+  // TODO(FW-6187): set this to a design token when it is added
   --focus-ring-color: #9ec4fd;
   --focus-ring-width: 2px;
 
@@ -62,7 +63,6 @@
 
 /* Extra Small Button */
 :host(.button-xsmall) {
-  --border-radius: #{$button-ionic-xsmall-border-radius};
   --padding-top: #{$button-ionic-xsmall-padding-top};
   --padding-end: #{$button-ionic-xsmall-padding-end};
 
@@ -73,7 +73,6 @@
 
 /* Small Button */
 :host(.button-small) {
-  --border-radius: #{$button-ionic-small-border-radius};
   --padding-top: #{$button-ionic-small-padding-top};
   --padding-end: #{$button-ionic-small-padding-end};
 
@@ -123,45 +122,30 @@
   }
 }
 
-/* Button extra small */
-:host(.button-has-icon-only.button-xsmall) {
-  --padding-end: #{$button-has-icon-only-padding-end-xsmall};
-}
-
-/* Button small */
-:host(.button-has-icon-only.button-small) {
-  --padding-end: #{$button-has-icon-only-padding-end-small};
-}
-
-/* Default */
 :host(.button-has-icon-only) {
-  --padding-end: #{$button-has-icon-only-padding-end};
-}
+  --padding-end: var(--padding-top);
 
-/* Button large */
-:host(.button-has-icon-only.button-large) {
-  --padding-end: #{$button-has-icon-only-padding-end-large};
-}
-
-/* Button extra large */
-:host(.button-has-icon-only.button-xlarge) {
-  --padding-end: #{$button-has-icon-only-padding-end-xlarge};
+  aspect-ratio: 1 / 1;
 }
 
 // Button Shapes
 // -------------------------------------------------------------------------------
 
-// Button Shape Rectangular
-// -------------------------------------------------------------------------------
-
-:host(.button-rectangular) {
-  --border-radius: #{$button-ionic-rectangular-border};
+:host(.button-soft) {
+  --border-radius: #{globals.$ionic-border-radius-200};
+}
+
+:host(.button-soft.button-xsmall),
+:host(.button-soft.button-small) {
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
-// Button Shape Round
-// -------------------------------------------------------------------------------
 :host(.button-round) {
-  --border-radius: #{$button-ionic-round-border};
+  --border-radius: #{globals.$ionic-border-radius-full};
+}
+
+:host(.button-rectangular) {
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Button Focused

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

@@ -3,9 +3,6 @@
 // Ionic Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the button
-$button-ionic-border-radius: px-to-rem(8);
-
 /// @prop - Padding top of the button
 $button-ionic-padding-top: px-to-rem(12);
 
@@ -29,9 +26,6 @@ $button-ionic-font-size: dynamic-font-max(14px, 3);
 // Ionic Extra Small Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the extra small button
-$button-ionic-xsmall-border-radius: px-to-rem(4);
-
 /// @prop - Padding top of the extra small button
 $button-ionic-xsmall-padding-top: px-to-rem(4);
 
@@ -55,9 +49,6 @@ $button-ionic-xsmall-font-size: dynamic-font-max(12px, 3);
 // Ionic Small Button
 // -------------------------------------------------------------------------------
 
-/// @prop - Border radius of the small button
-$button-ionic-small-border-radius: px-to-rem(4);
-
 /// @prop - Padding top of the small button
 $button-ionic-small-padding-top: px-to-rem(8);
 
@@ -124,18 +115,6 @@ $button-ionic-xlarge-min-height: px-to-rem(56);
 /// and multiplying it by 3, since 310% of the default is the maximum
 $button-ionic-xlarge-font-size: dynamic-font-max(20px, 3);
 
-// Ionic Rectangular Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border radius of the rectangular button
-$button-ionic-rectangular-border: 0;
-
-// Ionic Round Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Border radius of the round button
-$button-ionic-round-border: px-to-rem(999);
-
 // Ionic Outline Button
 // -------------------------------------------------------------------------------
 
@@ -144,21 +123,3 @@ $button-ionic-outline-border-width: 1px;
 
 /// @prop - Border style of the outline button
 $button-ionic-outline-border-style: solid;
-
-// Ionic Icon Only Button
-// -------------------------------------------------------------------------------
-
-/// @prop - Padding end of the icon only button
-$button-has-icon-only-padding-end: px-to-rem(13);
-
-/// @prop - Padding end of the icon only extra small button
-$button-has-icon-only-padding-end-xsmall: px-to-rem(6);
-
-/// @prop - Padding end of the icon only small button
-$button-has-icon-only-padding-end-small: px-to-rem(10);
-
-/// @prop - Padding end of the icon only large button
-$button-has-icon-only-padding-end-large: px-to-rem(16);
-
-/// @prop - Padding end of the icon only extra large button
-$button-has-icon-only-padding-end-xlarge: px-to-rem(18);

core/src/components/button/button.ios.scss

@@ -6,7 +6,6 @@
 // --------------------------------------------------
 
 :host {
-  --border-radius: #{$button-ios-border-radius};
   --padding-top: #{$button-ios-padding-top};
   --padding-bottom: #{$button-ios-padding-bottom};
   --padding-start: #{$button-ios-padding-start};
@@ -23,7 +22,7 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
-// iOS Solid Button
+// Solid Button
 // --------------------------------------------------
 
 :host(.button-solid) {
@@ -35,11 +34,10 @@
   --background-hover-opacity: 1;
 }
 
-// iOS Outline Button
+// Outline Button
 // --------------------------------------------------
 
 :host(.button-outline) {
-  --border-radius: #{$button-ios-outline-border-radius};
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
   --background-activated: #{ion-color(primary, base)};
@@ -49,7 +47,7 @@
   --color-activated: #{ion-color(primary, contrast)};
 }
 
-// iOS Clear Button
+// Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
@@ -63,7 +61,7 @@
   font-weight: #{$button-ios-clear-font-weight};
 }
 
-// iOS Toolbar Buttons
+// Toolbar Buttons
 // --------------------------------------------------
 
 /**
@@ -81,11 +79,10 @@
   font-weight: 400;
 }
 
-// iOS Button Sizes
+// Button Sizes
 // --------------------------------------------------
 
 :host(.button-large) {
-  --border-radius: #{$button-ios-large-border-radius};
   --padding-top: #{$button-ios-large-padding-top};
   --padding-start: #{$button-ios-large-padding-start};
   --padding-end: #{$button-ios-large-padding-end};
@@ -97,7 +94,6 @@
 }
 
 :host(.button-small) {
-  --border-radius: #{$button-ios-small-border-radius};
   --padding-top: #{$button-ios-small-padding-top};
   --padding-start: #{$button-ios-small-padding-start};
   --padding-end: #{$button-ios-small-padding-end};
@@ -108,25 +104,37 @@
   font-size: #{$button-ios-small-font-size};
 }
 
-// iOS Round Button
+// Button Shapes
 // --------------------------------------------------
 
-:host(.button-round) {
-  --border-radius: #{$button-ios-round-border-radius};
-  --padding-top: #{$button-ios-round-padding-top};
-  --padding-start: #{$button-ios-round-padding-start};
-  --padding-end: #{$button-ios-round-padding-end};
-  --padding-bottom: #{$button-ios-round-padding-bottom};
+:host(.button-soft) {
+  --border-radius: 6px;
 }
 
-// iOS Strong Button
+:host(.button-soft.button-large) {
+  --border-radius: 8px;
+}
+
+:host(.button-soft.button-small) {
+  --border-radius: 4px;
+}
+
+:host(.button-round) {
+  --border-radius: 999px;
+}
+
+:host(.button-rectangular) {
+  --border-radius: 0px;
+}
+
+// Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {
   font-weight: #{$button-ios-strong-font-weight};
 }
 
-// iOS Icon Only Button
+// Icon Only Button
 // --------------------------------------------------
 
 :host(.button-has-icon-only) {
@@ -148,7 +156,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 16px
@@ -172,7 +180,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -196,7 +204,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px

core/src/components/button/button.ios.vars.scss

@@ -30,9 +30,6 @@ $button-ios-padding-start: $button-ios-padding-end;
 /// @prop - Minimum height of the button
 $button-ios-min-height: 3.1em;
 
-/// @prop - Border radius of the button
-$button-ios-border-radius: 14px;
-
 /// @prop - Font size of the button text
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -59,9 +56,6 @@ $button-ios-large-padding-start: $button-ios-large-padding-end;
 /// @prop - Minimum height of the large button
 $button-ios-large-min-height: 3.1em;
 
-/// @prop - Border radius of the large button
-$button-ios-large-border-radius: 16px;
-
 /// @prop - Font size of the large button
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -85,9 +79,6 @@ $button-ios-small-padding-start: $button-ios-small-padding-end;
 /// @prop - Minimum height of the small button
 $button-ios-small-min-height: 2.1em;
 
-/// @prop - Border radius of the small button
-$button-ios-small-border-radius: 6px;
-
 /// @prop - Font size of the small button
 /// The maximum font size is calculated by taking the default font size
 /// and multiplying it by 3, since 310% of the default is the maximum
@@ -102,9 +93,6 @@ $button-ios-outline-border-width: 1px;
 /// @prop - Border style of the outline button
 $button-ios-outline-border-style: solid;
 
-/// @prop - Border radius of the outline button
-$button-ios-outline-border-radius: $button-ios-border-radius;
-
 // iOS Clear Button
 // --------------------------------------------------
 
@@ -125,24 +113,6 @@ $button-ios-clear-opacity-activated: 0.4;
 /// @prop - Opacity of the clear button on hover
 $button-ios-clear-opacity-hover: 0.6;
 
-// iOS Round Button
-// --------------------------------------------------
-
-/// @prop - Padding top of the round button
-$button-ios-round-padding-top: $button-round-padding-top;
-
-/// @prop - Padding end of the round button
-$button-ios-round-padding-end: $button-round-padding-end;
-
-/// @prop - Padding bottom of the round button
-$button-ios-round-padding-bottom: $button-round-padding-bottom;
-
-/// @prop - Padding start of the round button
-$button-ios-round-padding-start: $button-round-padding-start;
-
-/// @prop - Border radius of the round button
-$button-ios-round-border-radius: $button-round-border-radius;
-
 // iOS Decorator Button
 // --------------------------------------------------
 

core/src/components/button/button.md.scss

@@ -5,7 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --border-radius: #{$button-md-border-radius};
   --padding-top: #{$button-md-padding-top};
   --padding-bottom: #{$button-md-padding-bottom};
   --padding-start: #{$button-md-padding-start};
@@ -24,7 +23,7 @@
   text-transform: #{$button-md-text-transform};
 }
 
-// Material Design Solid Button
+// Solid Button
 // --------------------------------------------------
 
 :host(.button-solid) {
@@ -41,7 +40,7 @@
   --box-shadow: #{$button-md-box-shadow-activated};
 }
 
-// Material Design Outline Button
+// Outline Button
 // --------------------------------------------------
 
 :host(.button-outline) {
@@ -60,7 +59,7 @@
   background: transparent;
 }
 
-// Material Design Clear Button
+// Clear Button
 // --------------------------------------------------
 
 :host(.button-clear) {
@@ -72,18 +71,22 @@
   --background-hover-opacity: 0.04;
 }
 
-// Material Design Round Button
-// --------------------------------------------------
+// Button Shapes
+// -------------------------------------------------------------------------------
 
-:host(.button-round) {
-  --border-radius: #{$button-md-round-border-radius};
-  --padding-top: #{$button-md-round-padding-top};
-  --padding-start: #{$button-md-round-padding-start};
-  --padding-end: #{$button-md-round-padding-end};
-  --padding-bottom: #{$button-md-round-padding-bottom};
+:host(.button-soft) {
+  --border-radius: 4px;
 }
 
-// Material Design Button Sizes
+:host(.button-round) {
+  --border-radius: 999px;
+}
+
+:host(.button-rectangular) {
+  --border-radius: 0px;
+}
+
+// Button Sizes
 // --------------------------------------------------
 
 :host(.button-large) {
@@ -108,14 +111,14 @@
   font-size: #{$button-md-small-font-size};
 }
 
-// MD strong Button
+// Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {
   font-weight: #{$button-md-strong-font-weight};
 }
 
-// MD Icon Only Button
+// Icon Only Button
 //
 // MD does not specify a small size, these
 // styles are based on the iOS small size.
@@ -144,7 +147,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 14px
@@ -169,7 +172,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 13px
@@ -194,7 +197,7 @@
     *
     * Since the `ion-button` uses `rem` for the font size, we can't
     * just pass the desired icon font size in `em` to the `
-    * dynamic-font-clamp`. Instead, we need to adjust the base size 
+    * dynamic-font-clamp`. Instead, we need to adjust the base size
     * to account for the ion-button` font size.
     *
     * For example, if the default font size of `ion-button` is 20px
@@ -204,7 +207,7 @@
   font-size: dynamic-font-clamp(0.67, 22.4px, 1.92, 1em);
 }
 
-// Material Design Button: Hover
+// Button: Hover
 // --------------------------------------------------
 
 /**

core/src/components/button/button.md.vars.scss

@@ -30,9 +30,6 @@ $button-md-padding-start: 1.1em;
 /// @prop - Minimum height of the button
 $button-md-min-height: 36px;
 
-/// @prop - Border radius of the button
-$button-md-border-radius: 4px;
-
 /// @prop - Font size of the button text
 $button-md-font-size: dynamic-font(14px);
 
@@ -94,24 +91,6 @@ $button-md-small-min-height: 2.1em;
 /// @prop - Font size of the small button
 $button-md-small-font-size: dynamic-font(13px);
 
-// Material Design Round Button
-// --------------------------------------------------
-
-/// @prop - Padding top of the round button
-$button-md-round-padding-top: $button-round-padding-top;
-
-/// @prop - Padding end of the round button
-$button-md-round-padding-end: $button-round-padding-end;
-
-/// @prop - Padding bottom of the round button
-$button-md-round-padding-bottom: $button-round-padding-bottom;
-
-/// @prop - Padding start of the round button
-$button-md-round-padding-start: $button-round-padding-start;
-
-/// @prop - Border radius of the round button
-$button-md-round-border-radius: $button-round-border-radius;
-
 // Material Design Decorator Button
 // --------------------------------------------------
 

core/src/components/button/button.tsx

@@ -115,9 +115,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   @Prop() rel: string | undefined;
 
   /**
-   * Set to `"round"` for a button with more rounded corners.
+   * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully
+   * rounded corners, or `"rectangular"` for a button without rounded corners.
+   * Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
    */
-  @Prop({ reflect: true }) shape?: 'round' | 'rectangular';
+  @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';
 
   /**
    * Set to `"small"` for a button with less height and padding, to `"default"`
@@ -216,6 +218,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
     return 'bounded';
   }
 
+  /**
+   * Set the shape based on the theme
+   */
+  private getShape(): string {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    if (shape === undefined) {
+      return theme === 'ios' ? 'soft' : 'round';
+    }
+
+    return shape;
+  }
+
   /**
    * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
    */
@@ -333,23 +349,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   };
 
   render() {
-    const {
-      buttonType,
-      type,
-      disabled,
-      rel,
-      target,
-      href,
-      color,
-      expand,
-      hasIconOnly,
-      shape,
-      strong,
-      inheritedAttributes,
-    } = this;
+    const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, strong, inheritedAttributes } =
+      this;
 
     const theme = getIonTheme(this);
-    const finalSize = this.getSize();
+    const size = this.getSize();
+    const shape = this.getShape();
     const TagType = href === undefined ? 'button' : ('a' as any);
     const attrs =
       TagType === 'button'
@@ -388,8 +393,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [theme]: true,
           [buttonType]: true,
           [`${buttonType}-${expand}`]: expand !== undefined,
-          [`${buttonType}-${finalSize}`]: finalSize !== undefined,
-          [`${buttonType}-${shape}`]: shape !== undefined,
+          [`${buttonType}-${size}`]: size !== undefined,
+          [`${buttonType}-${shape}`]: true,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
           'in-toolbar': hostContext('ion-toolbar', this.el),

core/src/components/button/button.vars.scss

@@ -2,18 +2,3 @@
 
 // Button
 // --------------------------------------------------
-
-/// @prop - Padding top of the round button
-$button-round-padding-top: 0;
-
-/// @prop - Padding end of the round button
-$button-round-padding-end: 26px;
-
-/// @prop - Padding bottom of the round button
-$button-round-padding-bottom: $button-round-padding-top;
-
-/// @prop - Padding start of the round button
-$button-round-padding-start: $button-round-padding-end;
-
-/// @prop - Border radius of the round button
-$button-round-border-radius: 999px;

core/src/components/button/test/expand/index.html

@@ -24,36 +24,36 @@
 
       <ion-content class="ion-padding" id="content" no-bounce>
         <p>
-          <ion-button expand="block">Block</ion-button>
-          <ion-button expand="full">Full</ion-button>
+          <ion-button shape="soft" expand="block">Block</ion-button>
+          <ion-button shape="soft" expand="full">Full</ion-button>
         </p>
         <p>
-          <ion-button expand="block">Button Block</ion-button>
-          <ion-button expand="block" href="#">Anchor Block</ion-button>
+          <ion-button shape="soft" expand="block">Button Block</ion-button>
+          <ion-button shape="soft" expand="block" href="#">Anchor Block</ion-button>
         </p>
         <p>
-          <ion-button expand="full">Button Full</ion-button>
-          <ion-button expand="full" href="#">Anchor Full</ion-button>
+          <ion-button shape="soft" expand="full">Button Full</ion-button>
+          <ion-button shape="soft" expand="full" href="#">Anchor Full</ion-button>
         </p>
         <p>
-          <ion-button expand="block" color="dark" fill="outline">Block + Outline</ion-button>
-          <ion-button expand="full" color="dark" fill="outline">Full + Outline</ion-button>
+          <ion-button shape="soft" expand="block" color="dark" fill="outline">Block + Outline</ion-button>
+          <ion-button shape="soft" expand="full" color="dark" fill="outline">Full + Outline</ion-button>
         </p>
         <p>
-          <ion-button expand="block" fill="clear">Block + Clear</ion-button>
-          <ion-button expand="full" fill="clear">Full + Clear</ion-button>
+          <ion-button shape="soft" expand="block" fill="clear">Block + Clear</ion-button>
+          <ion-button shape="soft" expand="full" fill="clear">Full + Clear</ion-button>
         </p>
         <p>
-          <ion-button expand="block" color="danger" size="small">Block + Small</ion-button>
-          <ion-button expand="full" color="danger" size="small">Full + Small</ion-button>
+          <ion-button shape="soft" expand="block" color="danger" size="small">Block + Small</ion-button>
+          <ion-button shape="soft" expand="full" color="danger" size="small">Full + Small</ion-button>
         </p>
         <p>
-          <ion-button expand="block" color="secondary" size="large">Block + Large</ion-button>
-          <ion-button expand="full" color="secondary" size="large">Full + Large</ion-button>
+          <ion-button shape="soft" expand="block" color="secondary" size="large">Block + Large</ion-button>
+          <ion-button shape="soft" expand="full" color="secondary" size="large">Full + Large</ion-button>
         </p>
         <p>
-          <ion-button expand="block" shape="round">Block + Round</ion-button>
-          <ion-button expand="full" shape="round">Full + Round</ion-button>
+          <ion-button shape="round" expand="block">Block + Round</ion-button>
+          <ion-button shape="round" expand="full">Full + Round</ion-button>
         </p>
       </ion-content>
     </ion-app>

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

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+// TODO(ROU-5474): add tests for ionic theme
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('button: outline'), () => {
     test('should not have visual regressions', async ({ page }) => {