diff --git a/BREAKING.md b/BREAKING.md index 6430a35ff8..64b7c7c18d 100644 --- a/BREAKING.md +++ b/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) + +

Components

+ +

Button

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

Card

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

Chip

+ +- 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. diff --git a/core/api.txt b/core/api.txt index d5e743974e..292fc24e23 100644 --- a/core/api.txt +++ b/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 diff --git a/core/package.json b/core/package.json index 91d9c57edc..02ebdb39b3 100644 --- a/core/package.json +++ b/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", diff --git a/core/scripts/tokens.js b/core/scripts/tokens.js deleted file mode 100644 index acfeacfd13..0000000000 --- a/core/scripts/tokens.js +++ /dev/null @@ -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(); diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js new file mode 100644 index 0000000000..777f9a2f56 --- /dev/null +++ b/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(); diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js new file mode 100644 index 0000000000..499ecb6f4e --- /dev/null +++ b/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, +}; diff --git a/core/src/components.d.ts b/core/src/components.d.ts index c620dbacb5..a7b2e06be4 100644 --- a/core/src/components.d.ts +++ b/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. */ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png index f8fe9388d0..272f50ab50 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png index 2160bf71c7..fcf49ecb77 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png index 8ed982f8ab..e9a9050281 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png index 48accff6a2..88bd4d4920 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png index 31175c53c5..02908f4aeb 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png index 8dbb294992..be4037e7ca 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png index cb938ac336..27572e1613 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png index eaa50d6e5f..3d1020bffa 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png index 8f7aa6eda9..35b9b79837 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png index 88e462bc56..4b8891a3bd 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png index e8afb2df67..d95fc4b3aa 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png index 5d0534b787..87bcdc3806 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png index 1543c73433..8353a13c99 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png index fc0755b518..012a7016eb 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png index e3780e12dc..239912d9b7 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png index c145cde04b..4c88cb5383 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png index 5896390b7a..b5717fbdc0 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png index d508629c26..1922c6d53b 100644 Binary files a/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index c7342fe3d1..21a5cd4f85 100644 --- a/core/src/components/button/button.ionic.scss +++ b/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 diff --git a/core/src/components/button/button.ionic.vars.scss b/core/src/components/button/button.ionic.vars.scss index cfd1e9aa42..56527dbcc1 100644 --- a/core/src/components/button/button.ionic.vars.scss +++ b/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); diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss index 957e2ab84f..fa3287681b 100644 --- a/core/src/components/button/button.ios.scss +++ b/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 diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index e6da63748a..ff0911a634 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/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 // -------------------------------------------------- diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index aab7bb86fc..bc27ed0ece 100644 --- a/core/src/components/button/button.md.scss +++ b/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 // -------------------------------------------------- /** diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index d755a65eba..dd68ef0ebb 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/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 // -------------------------------------------------- diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 5988705d38..86190df97b 100644 --- a/core/src/components/button/button.tsx +++ b/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), diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index 620cb0b528..ed9f2a6a8a 100644 --- a/core/src/components/button/button.vars.scss +++ b/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; diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png index ac7e945943..395715c6f4 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png index 16362f5a03..57c1a48a69 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png index 8ac1a5fff1..445e94be11 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png index 501d71b148..73715181a5 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png index 5e1d23f17c..dc46ae9360 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png index 36a95e29ab..4089c5969c 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-default-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png index 2d02a15137..181cf5cf46 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png index 1c985aeb9e..f1e7ba36a9 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png index 385d73ee05..e29857b8fd 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png index cfc4056090..699824245c 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png index 43c9b5ce55..ac6f2ec442 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png index b9a7dac172..e4827d9bf7 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-large-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png index 2ec979af05..b2eb58f14e 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png index 74397a1e3a..4601b5c618 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png index 828549a793..faaabadf87 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png index 1fce63738b..dd45c921ab 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png index 662bce809a..f76b0dc89a 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png index 8fabdfeb7f..febd863ac3 100644 Binary files a/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/a11y/button.e2e.ts-snapshots/button-small-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png index 4f0901b42d..7c9351c1e3 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png index b11e42fc62..eb12f7df25 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png index 0d9e844838..5d9b370534 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png index b6d249e582..7f62c80995 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png index 1533d20b28..369e6e7e38 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png index d14673d93c..f49aee99ff 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png index c79d4654d2..ed131ed379 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png index 38a9e4ea85..8486342ee9 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png index 4b18497a2d..6e2681afcf 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png index 5685b2a5cb..1c93e420db 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png index 97f685db1e..d711ca100f 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png index ac7748d133..fc7ec55d2e 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png index dbfc170b74..6f88fc1312 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png index 4399e50af4..4c693f7460 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png index f2a15bd2c4..6aca60a8bd 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png index 0d3145f884..14a5b35198 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png index a9d1fa3f55..10e97fece3 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png index 1818b6ce97..2326765d23 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4c016bd196..73ae206a48 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index b7bee3c946..fad2e589a1 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 94add86d90..1a6bbb297a 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png index 491cfe187f..e4d971addc 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png index 96231843d3..c3e73112e6 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png index 646d0e8b84..f4b84bad65 100644 Binary files a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png index e35b8427ef..519815e86c 100644 Binary files a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png index df54773b6f..b018920e36 100644 Binary files a/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/expand/index.html b/core/src/components/button/test/expand/index.html index b727d5a886..fc1cc6380c 100644 --- a/core/src/components/button/test/expand/index.html +++ b/core/src/components/button/test/expand/index.html @@ -24,36 +24,36 @@

- Block - Full + Block + Full

- Button Block - Anchor Block + Button Block + Anchor Block

- Button Full - Anchor Full + Button Full + Anchor Full

- Block + Outline - Full + Outline + Block + Outline + Full + Outline

- Block + Clear - Full + Clear + Block + Clear + Full + Clear

- Block + Small - Full + Small + Block + Small + Full + Small

- Block + Large - Full + Large + Block + Large + Full + Large

- Block + Round - Full + Round + Block + Round + Full + Round

diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png index e97152993d..4aa2f6949b 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png index e50cab32bc..99f90b45b6 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png index b3d7a18230..f6eca8f54d 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png index 59cd954c4c..a070af44b2 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png index ae08b4294a..73538309af 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png index ff3d616e4c..b526c57775 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png index bf813157a5..7e0c4cdd4c 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png index 9369a357c5..6521ed8c56 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png index ca19dbabff..ef93e4c89c 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png index 3c99de6532..b38b9f7129 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png index 996da9e106..d38701fc89 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png index ce8d1dfe21..c22a26c7d4 100644 Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts b/core/src/components/button/test/outline/button.e2e.ts index f296fc0ca4..66353049e1 100644 --- a/core/src/components/button/test/outline/button.e2e.ts +++ b/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 }) => { diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png index 72322eb6b7..b73c1dbdd0 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png index 2d1155431b..01d66b7dc6 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png index a69260a247..b3c4bf24c5 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png index 849c55b18f..09e690c367 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png index 99136f0934..74f5cc7e45 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png index 62b05379f8..c76cc7c68c 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png index b87fe4ee8f..5d071b0abe 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png index 00ae1b4942..61f483af6d 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png index c6ea81df64..42998345e7 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png index fc953167d1..34e36881af 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png index 680cde30b3..4a11c16c88 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png index c6a4ed2872..ec0ad7fb55 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts b/core/src/components/button/test/shape/button.e2e.ts index 0682c07dc4..ff3603c067 100644 --- a/core/src/components/button/test/shape/button.e2e.ts +++ b/core/src/components/button/test/shape/button.e2e.ts @@ -1,111 +1,302 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +const styleTestHelpers = ` + +`; + /** - * All content takes up the full width, so RTL has no effect. + * This behavior does not vary across directions. */ -// TODO: FW-6077 - Add ionic theme on MD mode to this test. -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('button: shape'), () => { - test.describe('round', () => { - test.describe('default', () => { + test.describe('soft shape', () => { + test.describe('default fill', () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/shape`, config); + await page.setContent( + ` + ${styleTestHelpers} - await page.setIonViewport(); +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); - const container = page.locator('#default'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`button-round`)); + await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-default`)); }); }); - test.describe('outline', () => { + test.describe('outline fill', () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/shape`, config); + await page.setContent( + ` + ${styleTestHelpers} - await page.setIonViewport(); +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); - const container = page.locator('#outline'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`button-outline-round`)); + await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-outline`)); }); }); - test.describe('clear', () => { + // The clear buttons have the `ion-focused` class added to show their shape + test.describe('clear fill', () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/shape`, config); + await page.setContent( + ` + ${styleTestHelpers} - await page.setIonViewport(); +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); - const container = page.locator('#clear'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`button-clear-round`)); + await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-clear`)); + }); + }); + }); + + test.describe('round shape', () => { + test.describe('default fill', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + ${styleTestHelpers} + +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-default`)); }); }); - test.describe('color', () => { + test.describe('outline fill', () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/shape`, config); + await page.setContent( + ` + ${styleTestHelpers} - await page.setIonViewport(); +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); - const container = page.locator('#color'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`button-color-round`)); + await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-outline`)); }); }); - test.describe('expand', () => { + // The clear buttons have the `ion-focused` class added to show their shape + test.describe('clear fill', () => { test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/button/test/shape`, config); + await page.setContent( + ` + ${styleTestHelpers} - await page.setIonViewport(); +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); - const container = page.locator('#expand'); + const container = page.locator('#container'); - await expect(container).toHaveScreenshot(screenshot(`button-expand-round`)); + await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-clear`)); + }); + }); + }); + + test.describe('rectangular shape', () => { + test.describe('default fill', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + ${styleTestHelpers} + +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-default`)); + }); + }); + + test.describe('outline fill', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + ${styleTestHelpers} + +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-outline`)); + }); + }); + + // The clear buttons have the `ion-focused` class added to show their shape + test.describe('clear fill', () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + ${styleTestHelpers} + +
+ Button + Button + Button + + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-clear`)); }); }); }); }); }); - -/** - * Shape="rectangular" is only available in the Ionic theme. - */ -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 }) => { - await page.setContent( - ` - -
- Rectangular Button, Solid - Rectangular Button, Solid, Focused - Rectangular Button, Solid, Activated - - Rectangular Button, Outline - Rectangular Button, Outline, Focused - Rectangular Button, Outline, Activated - - Rectangular Button - Rectangular Button, Focused - Rectangular Button, Activated -
- `, - config - ); - - const container = page.locator('#container'); - - await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular`)); - }); - }); - }); -}); diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 556ec23e11..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 1f5088849b..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 1c36a133c9..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 23e3f7c891..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 1cd6e3d2c0..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a13bf52845..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 0cc61087b9..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 4e23c35df8..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a5829ed623..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 473740a72d..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b2e5729927..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index e6a8f6a203..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index a5c9f030b0..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index c630af3765..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 4833224fcf..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 4bfa5e3910..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 6e64830f36..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index f8f53630ac..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 97edfd5f15..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b9ef4ecddd..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 8990d8923d..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 8991db1534..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index df18062cb6..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index be1a35da11..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 7163200538..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index d3a4acb8d0..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 340373c07d..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 70b3d5002a..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 8b4fe4c625..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 4dddfcee33..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3609955670 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ab48ab3bac Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..264e3e231b Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2c9bfc41b1 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8ce963a095 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..42aae6c9a2 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..342663460e Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cddbcc93cf Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..46341f2d09 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-clear-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..28884a89ec Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a38531cbdc Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e1dc9e179c Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..adf9be3f1d Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fe443adcad Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d0f3d4e4a6 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8b28421b01 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cb3928fd5f Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..034432f0d7 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a0f7d0beef Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..791e9fa938 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e275cdd9e5 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b91681ac44 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a3086883d1 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6aacbb65f3 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ec2e2bd110 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7422707d84 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9447207bd7 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-fill-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 530a411559..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 3b7c632329..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 6729a178e8..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index c58c932788..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 40e804b808..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 54ecbd1cfc..0000000000 Binary files a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..39a1216492 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1651007699 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..27abb91c2c Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..85bc4c680e Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..12ac036d3c Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ab941671d2 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..422363d548 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..421aa13205 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f43a164c64 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-clear-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2296ceca97 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..28b5c09a73 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a8d9f2aa05 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c75f11cadb Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..da40614da8 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f57eb92a0a Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c1e6cdfe99 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4452b7f9be Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..30bd928a30 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e85263832f Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1b16abe2a3 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6899b2900d Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1ec6e00ada Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5bf04b01d9 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0899e7f4af Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0240c1a943 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f648561a14 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b42122f75c Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-round-fill-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3a1d15d918 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5b6d616c13 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f1af5b4e9e Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..62c0a767b4 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c41b729bc2 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..158ada58fb Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e2d3db4906 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ba2eba2269 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..549158289b Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-clear-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..124a3f7526 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..94b85df24f Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ba45de85e Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4d91b24f1b Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..97b503302b Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e56f1af448 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..24406e5922 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c9ba297d15 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..09e65823eb Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f82347cb1a Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a6ebd8ede3 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ab2e151b73 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ae563a18bc Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..be57c1b6f7 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..60418d665b Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8409cdbced Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..409f8d6fcd Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..77e6a56af2 Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-soft-fill-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/shape/index.html b/core/src/components/button/test/shape/index.html index 61dd2b5b43..e6f32cd542 100644 --- a/core/src/components/button/test/shape/index.html +++ b/core/src/components/button/test/shape/index.html @@ -2,7 +2,7 @@ - Button - Round + Button - Shape .grid { display: grid; - grid-template-columns: repeat(3, 1fr); + align-items: start; + justify-items: start; + grid-template-columns: repeat(3, auto); grid-gap: 10px; + margin-bottom: 10px; + padding: 6px; } @@ -26,133 +30,225 @@ - Button - Round + Button - Shape -

Default

-
-
- Button -
-
- Button -
-
- Button -
- -
- +
+

Default

+
+ + Button + Button + Button + + + + + + + +
-
+ +
+ + Button + Button + Button + + + + + + + + + + +
+ +
+ + Button + Button + Button + + + + + + + + + + +
+
+ +
+

Soft

+
+ + Button + Button + Button + + + + + + + + + + +
+ +
+ + Button + Button + Button + + + + + + + + + + +
+ +
+ + Button + Button + Button + + + + + + + + + + +
+
+ +
+

Round

+
+ + Button + Button + Button + + + + -
-
- +
-
-

Outline

-
-
- Button -
-
+
+ + Button Button -
-
- Button -
-
- + Button + + -
-
-
-
- +
-
-

Clear

- -
-
- Button -
-
+
+ + Button Button -
-
- Button -
-
- + Button + + -
-
-
-
- +
-

Color

-
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark +
+

Rectangular

+
+ + Button + Button + Button + + + + + + + + + + +
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark -
+
+ + Button + Button + Button + + + + + + + + + + +
-

Expand

-
- Block - Full - Block - Outline - Full - Outline -
- -

Strong

-
- Strong +
+ + Button + Button + Button + + + + + + + + + + +
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index 903e20d6ea..704a18114b 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8e56caa5e6..8553c4fb02 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 3a2b8e7e38..e5a3b512fa 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png index 9ce978b697..acb8e7bf63 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png index 2efa9cc532..c50dafcd1b 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png index d8a37f5a2d..da42d9d071 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index ba8fc5cd36..94e141d160 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index fa8e0c76d1..7487229b19 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png index d8163cbcda..43af09b81d 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png index eef0b6df8b..5643bad63d 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png index 23e1f3e9ea..92d32aa7dd 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png index 7b482bd5e0..f600666183 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png index 2af7d7aadb..d306a2f969 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png index 8c3136d333..b3efb240af 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png index 6f3646de99..03f0b8faee 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png index affda59304..e350dacb4a 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png index 915ddb84fc..5d43c8faf3 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png index 0fc678d7a8..73c1e94fbd 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png index 3fc8c82cf8..7453afc642 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png index d7918303d0..44e6f83f78 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png index 16d5a3f396..659b2dd88c 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 067e80a0e0..1f56d8417a 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png index 38739936f3..57c71d80cb 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png index 4046222c9a..a91c2e127f 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png index 61ebd63e5c..982c73c08c 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png index 9a0efbac10..c27a769798 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png index a4c9b53460..8138cc162e 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png index c547aa20c7..d20cd2dd9c 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png index ba87e1e214..6d7d6f763a 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png index a215c0f38f..54e6d9fc94 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index f6e002a2d7..2a781f8754 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index b4c096fd51..4178a74f8d 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png index de81c33f45..00adff3273 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png index 83450a87ba..2e40537694 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png index 663af86dc2..e5b473820d 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png index 3b3066f1c2..665f72f68f 100644 Binary files a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5c41c58796..b2d4580aa6 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index c37184596c..c218049589 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 3dc1e77922..527114708a 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 9913e5fc8c..efe29f9f7a 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index bd0e814daa..df56f112e2 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index e22db21083..5647674ac2 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index fa63238e11..8c33ab7183 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index d7b59c8c40..86e60473ac 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 275c9260a2..39a257610f 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png index 7b37ebff4a..c7a6a9e3a7 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png index a956bbf435..977eddb405 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png index 0885820231..2400c4730e 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png index 1df2998a37..a14e88619c 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png index a04f25c1fd..1530f03e97 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png index 398433ba1e..4c1e860ea0 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index a84d0e8b91..98b0cf577f 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index b06a107c57..b562191d14 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 5c3935fec0..45d88c9cb4 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png index d987eaf4bf..9526505d89 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png index 37763d5998..d5537f9e78 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png index 462c845fe8..19df24752f 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png index 4049f7417b..c6e2e7d11e 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png index 2dae7928e8..286dca2843 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png index ee09ce88ba..17c14c78cb 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3536a6f7d8..e6547485db 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index a2109c0a69..3680d3dcc8 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 94c9fbc75b..b131cb2246 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png index bedab5dd5b..d5821d9836 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png index 1a600b1643..b42fa9acee 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png index bcd9f3955b..2d5f36cb94 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png index 43ca456442..3affa1e43d 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png index dd5d081f75..4dd613f9df 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png index 9ef4a0d61b..40dac83d93 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3edf880cbb..2c98aa14d1 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 946f871e03..23cf9b6427 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png index 9a93db4c0a..88844cadd2 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png index 2aed2fc12b..d9ee350a80 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png index 1af5542162..7f837a85d4 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png index fb3a5784a4..08a5765e26 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png index 440ffdd1d1..84051b1bb4 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png index bf55216bc4..ea992e91fc 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png index ebc7a32a67..ccf8f18692 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png index 27338d27b5..ae1fb9f21f 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png index e6bc094b44..cef5591055 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png index 0523192277..911c6122af 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png index 6143a4783d..eb34529076 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png index 024310a784..6c5a682c5f 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png index cd2e6a42b0..359c0dbcbb 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png index 7d772dd5ca..392d37773b 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png index a28c030671..77035af651 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png index 8903cf4e8e..2d9374d471 100644 Binary files a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Chrome-linux.png index cb3e772da0..df74e0e759 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Firefox-linux.png index 7d33af2eed..52b1941218 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Safari-linux.png index cb9d668e8f..3a0470866f 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Chrome-linux.png index c362d60149..fa89eb6c18 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Firefox-linux.png index af97a567a9..01193861f4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Safari-linux.png index 59cdab7709..70cd6cd4d7 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-icons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Chrome-linux.png index 186c5b731a..75e27e7155 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Firefox-linux.png index 4156faf91d..84906f28c4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Safari-linux.png index 7a80739dda..88795d819b 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Chrome-linux.png index 3a4716c1f8..9944b93189 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Firefox-linux.png index 1184f02e14..f7c31d5e48 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Safari-linux.png index 610ed65787..8311272e87 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-block-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Chrome-linux.png index 8d4c9da145..fa89eb6c18 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Firefox-linux.png index 4a4989f7e0..01193861f4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Safari-linux.png index 192ef3df57..70cd6cd4d7 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-icons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Chrome-linux.png index 3ba04c8395..9944b93189 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Firefox-linux.png index c3aeb43058..f7c31d5e48 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Safari-linux.png index 39dfca70d3..8311272e87 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-full-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Chrome-linux.png index cb3e772da0..df74e0e759 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Firefox-linux.png index 7d33af2eed..52b1941218 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Safari-linux.png index cb9d668e8f..3a0470866f 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Chrome-linux.png index c362d60149..fa89eb6c18 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Firefox-linux.png index af97a567a9..01193861f4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Safari-linux.png index 59cdab7709..70cd6cd4d7 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-icons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Chrome-linux.png index 186c5b731a..75e27e7155 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Firefox-linux.png index 4156faf91d..84906f28c4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Safari-linux.png index 7a80739dda..88795d819b 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png index e8c5cdbc38..0a898afd01 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png index 0449e0ebb5..a99cb87baa 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png index f3b854ef05..88f99b8624 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-icons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png index 3cdf3ad5df..6a8b12987e 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png index 143b3fa7ca..cdc1c3fec4 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png index 8f06681349..50178f4c8e 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Chrome-linux.png index e2427e63e9..9a0f078cc5 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Firefox-linux.png index 8b7fcd8211..a08cb8a6a0 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Safari-linux.png index 25fe33f47c..ccf98d22bc 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Chrome-linux.png index 9ded12dba1..f0fa6eb3fe 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Firefox-linux.png index afdd407fc4..685e5c7498 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Safari-linux.png index 7088c4d418..eb1fc7cfa9 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-large-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Chrome-linux.png index 3a4716c1f8..9944b93189 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Firefox-linux.png index 1184f02e14..f7c31d5e48 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Safari-linux.png index 610ed65787..8311272e87 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Chrome-linux.png index 0e253d8dff..847e37abe3 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Firefox-linux.png index cdf2215d27..ea6543a74b 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Safari-linux.png index f8d22a8ef5..1979306712 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Chrome-linux.png index e5e7305649..7b923c1e38 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Firefox-linux.png index 5b6559e525..64e15a9a26 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Safari-linux.png index 9238b25272..6afa2fca88 100644 Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-small-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss index cb9c81afd8..f14f9050bc 100644 --- a/core/src/components/buttons/buttons.ios.scss +++ b/core/src/components/buttons/buttons.ios.scss @@ -4,6 +4,7 @@ // iOS Toolbar Default Button // -------------------------------------------------- +// TODO(FW-6203): do we need these styles? ::slotted(*) ion-button { --padding-top: 3px; --padding-bottom: 3px; @@ -20,6 +21,7 @@ --padding-bottom: 0; } +// TODO(FW-6203): is this value correct? ::slotted(*) ion-button:not(.button-round) { --border-radius: #{$toolbar-ios-button-border-radius}; } diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss index 1fb7981f52..fb4acdc381 100644 --- a/core/src/components/buttons/buttons.md.scss +++ b/core/src/components/buttons/buttons.md.scss @@ -4,6 +4,7 @@ // Material Design Toolbar Default Button // -------------------------------------------------- +// TODO(FW-6203): do we need these styles? ::slotted(*) ion-button { --padding-top: 3px; --padding-bottom: 3px; @@ -21,6 +22,7 @@ --padding-bottom: 0; } +// TODO(FW-6203): is this value correct? ::slotted(*) ion-button:not(.button-round) { --border-radius: #{$toolbar-md-button-border-radius}; } @@ -54,6 +56,7 @@ // Material Design Toolbar Icon Only Clear Button // -------------------------------------------------- +// TODO(FW-6203): do we need these styles? ::slotted(*) .button-has-icon-only.button-clear { --padding-top: 12px; --padding-end: 12px; diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png index 462800821f..0ad39653e5 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png index 5c1d450556..14bef91b76 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png index b0a3c8a2fe..58e42f0662 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png index 028a083454..0721910d88 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png index 11423ab6bc..2a6e23ebfd 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png index d4d9922e0a..e92fefb3a0 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png index afe9906d0d..6471687d87 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png index 92ef8ad149..874b0e153f 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png index 3ff447b796..355994f20c 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png index da24098828..481bc6ea89 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png index 4ed9f1545c..e45c36c5c2 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png index d12d6ddb67..56d00617f5 100644 Binary files a/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/card-header/test/basic/card-header.e2e.ts-snapshots/card-header-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss index 944d3de75e..63d063ff8f 100755 --- a/core/src/components/card/card.ionic.scss +++ b/core/src/components/card/card.ionic.scss @@ -4,24 +4,27 @@ // -------------------------------------------------- :host { - --background: #{globals.$ionic-color-neutral-0}; - --border-radius: #{globals.$ionic-border-radius-rounded-small}; + --background: #{globals.$ionic-color-base-white}; + --border-radius: #{globals.$ionic-border-radius-100}; - @include globals.padding(globals.$ionic-space-base); + @include globals.padding(globals.$ionic-space-400); @include globals.border-radius(var(--border-radius)); display: block; - border: #{globals.$ionic-border-size-small} solid #{globals.$ionic-color-neutral-50}; + border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500}; background: var(--background); color: var(--color); } +// Card Shapes +// --------------------------------------------- + :host(.card-round) { - --border-radius: #{globals.$ionic-border-radius-rounded-large}; + --border-radius: #{globals.$ionic-border-radius-400}; } :host(.card-rectangular) { - --border-radius: #{globals.$ionic-border-radius-square}; + --border-radius: #{globals.$ionic-border-radius-0}; } diff --git a/core/src/components/card/card.ios.scss b/core/src/components/card/card.ios.scss index 2ebbc403ff..666a0c32be 100755 --- a/core/src/components/card/card.ios.scss +++ b/core/src/components/card/card.ios.scss @@ -9,7 +9,6 @@ --color: #{$card-ios-color}; @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); - @include border-radius($card-ios-border-radius); transition: transform 500ms $card-ios-transition-timing-function; @@ -21,3 +20,18 @@ :host(.ion-activated) { transform: #{$card-ios-transform-activated}; } + +// Card Shapes +// --------------------------------------------- + +:host(.card-soft) { + --border-radius: 8px; +} + +:host(.card-round) { + --border-radius: 14px; +} + +:host(.card-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index d8cf963a68..b6e275288c 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -21,9 +21,6 @@ $card-ios-box-shadow-color: rgba(0, 0, 0, 0.12); /// @prop - Box shadow of the card $card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color; -/// @prop - Border radius of the card -$card-ios-border-radius: 8px; - /// @prop - Font size of the card $card-ios-font-size: dynamic-font(14px); diff --git a/core/src/components/card/card.md.scss b/core/src/components/card/card.md.scss index 1c74a42acd..6fb8847128 100755 --- a/core/src/components/card/card.md.scss +++ b/core/src/components/card/card.md.scss @@ -9,9 +9,23 @@ --color: #{$card-md-color}; @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); - @include border-radius($card-md-border-radius); font-size: $card-md-font-size; box-shadow: $card-md-box-shadow; } + +// Card Shapes +// --------------------------------------------- + +:host(.card-soft) { + --border-radius: 4px; +} + +:host(.card-round) { + --border-radius: 12px; +} + +:host(.card-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index f40132d329..69b8507245 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -18,9 +18,6 @@ $card-md-margin-start: 10px; /// @prop - Box shadow of the card $card-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -/// @prop - Border radius of the card -$card-md-border-radius: 4px; - /// @prop - Font size of the card $card-md-font-size: dynamic-font(14px); diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index e81166ea4d..04b7fdc825 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -7,10 +7,12 @@ /** * @prop --background: Background of the card * @prop --color: Color of the card + * @prop --border-radius: Border radius of the card */ --ion-safe-area-left: 0px; --ion-safe-area-right: 0px; + @include border-radius(var(--border-radius)); @include font-smoothing(); display: block; diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx index d408ebe4cb..f52b3fad8d 100644 --- a/core/src/components/card/card.tsx +++ b/core/src/components/card/card.tsx @@ -83,9 +83,11 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac @Prop() routerAnimation: AnimationBuilder | undefined; /** - * 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"`. */ - @Prop({ reflect: true }) shape?: 'round' | 'rectangular'; + @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular' = 'round'; /** * Specifies where to display the linked URL. @@ -144,8 +146,7 @@ export class Card implements ComponentInterface, AnchorInterface, ButtonInterfac { +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('card: shape'), () => { test.describe('default', () => { test('should not have visual regressions', async ({ page }) => { @@ -17,6 +16,16 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh }); }); + test.describe('soft', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/card/test/shape`, config); + + const container = page.locator('#soft'); + + await expect(container).toHaveScreenshot(screenshot(`card-soft`)); + }); + }); + test.describe('round', () => { test('should not have visual regressions', async ({ page }) => { await page.goto(`/src/components/card/test/shape`, config); diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 48fc3a8a76..b951addb84 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 49f04ac1d2..5a30fe5d1f 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png index b517e82218..cf10dffbe0 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9617ded9f7 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..56ac47e7ad Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0cdd6e80b4 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e7408b7764 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..85ad43855a Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6919614cd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8474b78598..d6e8a164d7 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index a6637e561b..308c3ff4ec 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 44afba1111..9f17730e79 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9db10b40a3 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..0aed172351 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..013bfe1535 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..db9ed7efe0 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d45fe5aeb8 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cd9534e505 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6e775bcbde..8e0fcb7d4e 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5a30fe5d1f..177cdae979 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png index c82f6975b5..cf10dffbe0 100644 Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..86b633618c Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..adcfc06a55 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0cdd6e80b4 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d379f4d627 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..353c0e62ac Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b6919614cd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..161af2b59b Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..49f04ac1d2 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b517e82218 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fd3389c7dd Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7fa6b6d18f Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..31f7a64094 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3d7d72609b Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2417bd2a1c Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..31b1a3b4b6 Binary files /dev/null and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-soft-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/card/test/shape/index.html b/core/src/components/card/test/shape/index.html index 03f7662693..77eaf9301a 100644 --- a/core/src/components/card/test/shape/index.html +++ b/core/src/components/card/test/shape/index.html @@ -15,13 +15,11 @@ @@ -37,7 +35,7 @@

Default

-
+
Card Subtitle @@ -50,8 +48,24 @@
+ +

Soft

+
+ + + Card Subtitle + Card Title + + + + Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week + in the woods. Wash your spirit clean. + + +
+

Round

-
+
Card Subtitle @@ -66,7 +80,7 @@

Rectangular

-
+
Card Subtitle diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index d8ccf11ed6..4bbee0272c 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -1,4 +1,5 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; +@use "../../foundations/ionic.vars.scss" as tokens; // Ionic Chip // -------------------------------------------------- @@ -8,15 +9,13 @@ $ionic-states-focus-primary: #9ec4fd; $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba(). :host { - --background: #{globals.$ionic-color-neutral-10}; - --border-color: transparent; - --border-radius: #{globals.$ionic-border-radius-rounded-small}; + --background: #{globals.$ionic-color-neutral-100}; --color: #{globals.$ionic-color-neutral-900}; --focus-ring-color: #{$ionic-states-focus-primary}; - --focus-ring-width: #{globals.$ionic-border-size-medium}; + --focus-ring-width: #{globals.$ionic-border-size-050}; @include globals.font-smoothing; - @include globals.padding(globals.$ionic-space-xs, globals.$ionic-space-xxs); + @include globals.padding(globals.$ionic-space-150, globals.$ionic-space-200); @include globals.border-radius(var(--border-radius)); display: inline-flex; @@ -26,23 +25,15 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi align-items: center; justify-content: center; - gap: globals.$ionic-space-xxxs; - - min-height: 32px; - - border-width: globals.$ionic-border-size-small; - border-style: solid; - - border-color: var(--border-color); + gap: globals.$ionic-space-100; background: var(--background); color: var(--color); font-family: globals.$ionic-font-family; - font-size: globals.$ionic-font-size-m; font-weight: globals.$ionic-font-weight-medium; - line-height: globals.$ionic-font-line-height-full; + line-height: globals.$ionic-line-height-full; cursor: pointer; @@ -58,6 +49,8 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi :host(.chip-outline) { --background: transparent; + border-width: globals.$ionic-border-size-025; + border-color: globals.$ionic-color-neutral-100; } @@ -89,16 +82,35 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi // Chip Shapes // --------------------------------------------- +:host(.chip-soft) { + --border-radius: #{globals.$ionic-border-radius-100}; +} + :host(.chip-round) { - --border-radius: #{globals.$ionic-border-radius-rounded-large}; + --border-radius: #{globals.$ionic-border-radius-400}; } :host(.chip-rectangular) { - --border-radius: #{globals.$ionic-border-radius-square}; + --border-radius: #{globals.$ionic-border-radius-0}; } // Chip Icon // --------------------------------------------- ::slotted(ion-icon) { - font-size: globals.$ionic-font-size-l; + font-size: globals.$ionic-font-size-400; +} + +// Size +// --------------------------------------------- + +:host(.chip-small) { + min-height: 24px; + + font-size: #{tokens.$ionic-font-size-300}; +} + +:host(.chip-large) { + min-height: 32px; + + font-size: globals.$ionic-font-size-350; } diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss index a6d23fc169..b016c063eb 100644 --- a/core/src/components/chip/chip.ios.scss +++ b/core/src/components/chip/chip.ios.scss @@ -9,3 +9,18 @@ */ font-size: clamp(13px, $chip-base-font-size-rem, 22px); } + +// Chip Shapes +// --------------------------------------------- + +:host(.chip-soft) { + --border-radius: 10px; +} + +:host(.chip-round) { + --border-radius: 999px; +} + +:host(.chip-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss index c123b971bb..b531b9cfc5 100644 --- a/core/src/components/chip/chip.md.scss +++ b/core/src/components/chip/chip.md.scss @@ -4,3 +4,18 @@ :host { font-size: $chip-base-font-size-rem; } + +// Chip Shapes +// --------------------------------------------- + +:host(.chip-soft) { + --border-radius: 8px; +} + +:host(.chip-round) { + --border-radius: 999px; +} + +:host(.chip-rectangular) { + --border-radius: 0px; +} diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index fc235d6599..6e32716edd 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -5,11 +5,12 @@ /** * @prop --background: Background of the chip * @prop --color: Color of the chip + * @prop --border-radius: Border radius of the chip */ --background: #{rgba($text-color-rgb, 0.12)}; --color: #{rgba($text-color-rgb, 0.87)}; - @include border-radius(16px); + @include border-radius(var(--border-radius)); @include font-smoothing(); @include margin(4px); @include padding(6px, 12px); diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index fd59fa48d6..be7c9b218b 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Prop, h } from '@stencil/core'; +import { printIonWarning } from '@utils/logging'; import { createColorClasses } from '@utils/theme'; import { getIonTheme } from '../../global/ionic-global'; @@ -37,25 +38,65 @@ export class Chip implements ComponentInterface { @Prop() disabled = false; /** - * 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. */ - @Prop() shape?: 'round' | 'rectangular'; + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + + /** + * Set the shape based on the theme + */ + private getShape(): string { + const theme = getIonTheme(this); + const { shape } = this; + + if (shape === undefined) { + return theme === 'ionic' ? 'round' : 'soft'; + } + + return shape; + } + + /** + * Set to `"small"` for a chip with less height and padding. + * + * Defaults to `"large"` for the ionic theme, and undefined for all other themes. + */ + @Prop() size?: 'small' | 'large'; + + private getSize() { + const theme = getIonTheme(this); + const { size } = this; + + if (theme === 'ionic') { + return size !== undefined ? size : 'large'; + // TODO(ROU-10695): remove the size !== undefined when we add support for + // the `ios` and `md` themes. + } else if (size !== undefined) { + printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`); + } + + return undefined; + } render() { - const { shape } = this; const theme = getIonTheme(this); + const size = this.getSize(); + + const shape = this.getShape(); return ( diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png index cb52adfd72..87d0247728 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png index 2690595b31..36fe05f437 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png index 6d1b089b54..11d8078d32 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png index 8d7789b41c..91379a3003 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png index 506f530b7d..2215aa14fb 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png index 9e9e3c1d75..333e7622a1 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png index 59c59c6906..a19b992fd3 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png index b1c92404b7..e8b5a9b0e3 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png index 040d587bac..37f4b3921a 100644 Binary files a/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png index e4a97f815e..a3befe4e60 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png index 39fd0676a1..56993cd528 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png index 35856d6bb0..e5f78b862c 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png index 06677db025..9726d45330 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png index afaf4bdccb..72f9d08d55 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png index 0726f679d4..78aa2a71d7 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png index 3eea255963..fc58b3c97a 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png index a0ccf687a1..4cba9b1d1b 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png index 5a2979a245..6a024854ff 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png index 4b2f1521b3..4588103ecd 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png index 557a20d249..c26c67ac7c 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png index c99e9841d2..f7addd5840 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png index a0a99270be..d847161da9 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png index 584ce653f9..174d0b9e29 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png index 3b4307ee5a..3d1d078c77 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts b/core/src/components/chip/test/shape/chip.e2e.ts index 17ff6edd6b..39d49badda 100644 --- a/core/src/components/chip/test/shape/chip.e2e.ts +++ b/core/src/components/chip/test/shape/chip.e2e.ts @@ -1,11 +1,10 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - /** - * This behavior only applies to Ionic Theme. - * TODO(FW-6120): add the `ios` and `md` modes when shape support is added. - */ +/** + * This behavior does not vary across directions + */ +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('chip: shape'), () => { test.beforeEach(async ({ page }) => { await page.goto(`/src/components/chip/test/shape`, config); @@ -19,6 +18,14 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh }); }); + test.describe('soft', () => { + test('should not have visual regressions', async ({ page }) => { + const container = page.locator('#soft'); + + await expect(container).toHaveScreenshot(screenshot(`chip-soft`)); + }); + }); + test.describe('round', () => { test('should not have visual regressions', async ({ page }) => { const container = page.locator('#round'); diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 21a8b1c13a..a13ca24bba 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9c59020f4f..1da93c12c8 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 9f323f7d73..41a65b4be3 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..78ae782bcd Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e8434653e1 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7a0cb70051 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..84f903e385 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c0bb84d787 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..793e208a8e Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index a3e29c2567..001dd8b14e 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index 353f77beb9..c60c585a52 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 0f833b7aec..a6a4731997 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8071bb708a Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bbe4d08797 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f31018d0a5 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1c45dc63be Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ad7bc33d21 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3f5f381e7a Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index d277c92182..ac19f37d69 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index de0ca69d10..eb56bbb980 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 7a03947599..61590aa5f7 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f4cac4b484 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..34610c5bd4 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a102692055 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c474b3d362 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3bb4971316 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b4f062cf37 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a08e022687 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..23f25a85a9 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..17cb7616b1 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2053b98cdf Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e789b3e5f6 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..af72de8a7d Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ecab5281ee Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b0b8277c3e Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ff4e273d73 Binary files /dev/null and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/index.html b/core/src/components/chip/test/shape/index.html index dd50a5708f..d2bac4b428 100644 --- a/core/src/components/chip/test/shape/index.html +++ b/core/src/components/chip/test/shape/index.html @@ -12,11 +12,23 @@ + + - +

Chip - Shape

Shapes

@@ -24,6 +36,9 @@ Default + + Soft + Round @@ -33,24 +48,5 @@

- - diff --git a/core/src/components/chip/test/size/chip.e2e.ts b/core/src/components/chip/test/size/chip.e2e.ts new file mode 100644 index 0000000000..49240d225d --- /dev/null +++ b/core/src/components/chip/test/size/chip.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('chip: size'), () => { + test('should render small chip', async ({ page }) => { + await page.setContent( + ` + Small + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-size-small`)); + }); + + test('should render large chip', async ({ page }) => { + await page.setContent( + ` + Large + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-size-large`)); + }); + }); +}); diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8d1c54d92f Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..10e0f8cb07 Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fee5a895fc Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7529d4e3dc Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f59fe37e8a Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bfc917464d Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/size/index.html b/core/src/components/chip/test/size/index.html new file mode 100644 index 0000000000..2ca4ff9c64 --- /dev/null +++ b/core/src/components/chip/test/size/index.html @@ -0,0 +1,162 @@ + + + + + Chip - Size + + + + + + + + + + + + + + Chip - Size + + + + +

Default Size

+
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ +

Small

+ +
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ +

Large

+ +
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ + + + diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png index 248f01b2d4..0079f6ec5d 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png index f49aec47f1..550b55dc18 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png index 9fea7c769a..e81120059f 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index 4bea138ce1..a96b97b22b 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index ea06cf3652..bf1641ef94 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 57414f7865..edd81bb2c6 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/input.ionic.outline.scss b/core/src/components/input/input.ionic.outline.scss index 76a23cf95c..d5af9301b9 100644 --- a/core/src/components/input/input.ionic.outline.scss +++ b/core/src/components/input/input.ionic.outline.scss @@ -5,7 +5,7 @@ // ---------------------------------------------------------------- :host(.input-fill-outline) { - --border-radius: #{$ionic-border-radius-rounded-small}; + --border-radius: #{$ionic-border-radius-100}; --padding-start: 12px; --padding-end: 12px; } @@ -82,8 +82,6 @@ * container that overlaps it so it is always clickable. */ position: relative; - - color: #{$ionic-color-neutral-700}; } :host(.input-fill-outline) .native-wrapper { @@ -140,20 +138,20 @@ // -------------------------------------------------- :host(.input-fill-outline.input-shape-soft) { - --border-radius: #{$ionic-border-radius-rounded-medium}; + --border-radius: #{$ionic-border-radius-200}; } :host(.input-fill-outline.input-shape-round) { - --border-radius: #{$ionic-border-radius-rounded-full}; + --border-radius: #{$ionic-border-radius-full}; } :host(.input-fill-outline.input-shape-rectangular) { - --border-radius: #{$ionic-border-radius-square}; + --border-radius: #{$ionic-border-radius-0}; } // Input Focus // ---------------------------------------------------------------- :host(.input-fill-outline.has-focus) { - --border-width: #{tokens.$ionic-border-size-medium}; + --border-width: #{tokens.$ionic-border-size-050}; } diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss index 69b31445b6..1e0874449f 100644 --- a/core/src/components/input/input.ionic.scss +++ b/core/src/components/input/input.ionic.scss @@ -7,17 +7,16 @@ // -------------------------------------------------- :host { - // TODO(ROU-5477): use design token here when it is added - --color: #121212; - --border-width: #{tokens.$ionic-border-size-small}; + --color: #{tokens.$ionic-color-neutral-1000}; + --border-width: #{tokens.$ionic-border-size-025}; --border-color: #{tokens.$ionic-color-neutral-300}; - --highlight-color-valid: #{tokens.$ionic-color-success-400}; - --highlight-color-invalid: #{tokens.$ionic-color-error-400}; - --placeholder-color: #{tokens.$ionic-color-neutral-500}; + --highlight-color-valid: #{tokens.$ionic-color-success-base}; + --highlight-color-invalid: #{tokens.$ionic-color-danger-base}; + --placeholder-color: #{tokens.$ionic-color-neutral-800}; --placeholder-opacity: 1; - --text-color-invalid: #{tokens.$ionic-color-error-600}; + --text-color-invalid: #{tokens.$ionic-color-danger-800}; - font-size: tokens.$ionic-font-size-m; + font-size: tokens.$ionic-font-size-350; } // Ionic Input Sizes @@ -78,9 +77,9 @@ } .input-clear-icon:focus-visible { - @include border-radius(tokens.$ionic-border-radius-rounded-small); + @include border-radius(tokens.$ionic-border-radius-100); - outline: #{tokens.$ionic-border-size-medium} solid #{tokens.$ionic-color-primary-100}; + outline: #{tokens.$ionic-border-size-050} solid #{tokens.$ionic-state-focus-1}; opacity: 1; } @@ -109,12 +108,12 @@ // ---------------------------------------------------------------- .label-text-wrapper { - color: tokens.$ionic-color-neutral-700; + color: tokens.$ionic-color-neutral-1000; - font-size: tokens.$ionic-font-size-s; + font-size: tokens.$ionic-font-size-300; font-weight: tokens.$ionic-font-weight-medium; - line-height: tokens.$ionic-font-line-height-s; + line-height: tokens.$ionic-line-height-500; } :host(.label-floating) .label-text-wrapper { @@ -132,11 +131,11 @@ .input-bottom .helper-text, .input-bottom .counter { - color: tokens.$ionic-color-neutral-600; + color: tokens.$ionic-color-neutral-800; } :host(.has-focus.ion-valid) .helper-text { - color: tokens.$ionic-color-success-800; + color: tokens.$ionic-color-success-900; } :host(.ion-touched.ion-invalid) .error-text { @@ -145,7 +144,7 @@ :host(.has-focus.ion-valid), :host(.ion-touched.ion-invalid) { - --border-width: #{tokens.$ionic-border-size-small}; + --border-width: #{tokens.$ionic-border-size-025}; } // Input Hover @@ -163,7 +162,7 @@ :host(.input-disabled) { // color for the text within the input --color: #{tokens.$ionic-color-neutral-400}; - --background: #{tokens.$ionic-color-neutral-10}; + --background: #{tokens.$ionic-color-neutral-100}; pointer-events: none; } @@ -175,11 +174,11 @@ } :host(.input-disabled.has-focus.ion-valid) { - --border-color: rgba(#{tokens.$ionic-color-success-400-rgb}, 0.6); + --border-color: rgba(#{tokens.$ionic-color-success-base-rgb}, 0.6); } :host(.input-disabled.ion-touched.ion-invalid) { - --border-color: rgba(#{tokens.$ionic-color-error-400-rgb}, 0.6); + --border-color: rgba(#{tokens.$ionic-color-danger-base-rgb}, 0.6); } :host(.input-disabled.ion-color) { @@ -197,7 +196,7 @@ // ---------------------------------------------------------------- :host(.input-readonly) { - --background: #{tokens.$ionic-color-neutral-10}; + --background: #{tokens.$ionic-color-neutral-100}; } // Input Highlight @@ -209,7 +208,7 @@ position: absolute; width: 100%; - height: tokens.$ionic-border-size-medium; + height: tokens.$ionic-border-size-050; transform: scale(0); @@ -222,7 +221,7 @@ // ---------------------------------------------------------------- :host(.has-focus) { - --border-color: #{tokens.$ionic-color-primary}; + --border-color: #{tokens.$ionic-color-primary-base}; } :host(.has-focus) .input-highlight { diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index d4116b4986..4b76a83557 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 23e6440387..9aacebaf28 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 1804bd1b11..7731e306c0 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png index c71d2c7e15..6e250e8d89 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png index 68db5fb908..fee90a4a37 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png index 572231105f..e6ae69aec8 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png index ccef586505..576f430554 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png index b1c26929f2..d6106cfc68 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png index 5aeab4d94f..cc0ed899a6 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png index d1a48907f0..2d4e5a0a55 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png index b6192507ee..5a5c54023b 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png index 39e860d089..672ccb6ada 100644 Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0d8e4c9026..9d44c0bf28 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png index d95a616a2f..95620700ee 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png index 8ce64e2718..326cc3e1a5 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-error-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3e22d0b026..5c2ff21af5 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png index b44f6f18da..ad02a0519a 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png index 422c174118..f223408f24 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-bottom-content-helper-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1896c0c46c..e815a46024 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index 39342f2830..543104d858 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 68acf78a9d..0160c214ee 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 10dec2d4d4..1384e9bf44 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index f71cb0181c..2bcdbe308a 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 1cc8b1b2da..bb4c91b647 100644 Binary files a/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/bottom-content/input.e2e.ts-snapshots/input-full-bottom-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png index 934e65989a..1434be8485 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png index 4c6b144823..701a4c75b8 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png index 6f99c8dfc8..1de0ff9728 100644 Binary files a/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/card/input.e2e.ts-snapshots/input-card-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index b6dd41b51e..1b3f581fd9 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 264a1a5e22..b5bebfa45c 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 20fec39906..72bdff380e 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png index f418055c2e..a9b81be7f8 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png index 3f10d3f62e..2e99d9c0b3 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png index f4914cc630..09960461d9 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index 255eee4643..deb06d19e8 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index e0a51340a7..903fecc93c 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png index fa3a09d55c..53abd50bb4 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png index e98cfa492d..92319e3c62 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png index 4912d9e17b..3c99eb3415 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png index e41fad5a8c..6f10c705d7 100644 Binary files a/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/fill/input.e2e.ts-snapshots/input-fill-outline-label-stacked-size-large-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5f5f8053e6..1448399e20 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index fa9ae34e11..18e65b5e78 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index bf2604fc14..a2dc33c09b 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8b46b0126e..c344f7fff6 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 906a4178a4..0aa63b5971 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png index 0815f08833..18c13bac5c 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-no-fill-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png index c1e3ace5fb..58288133b3 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png index b7a8995430..7c60654340 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png index 7968fcd6df..ed5c7b900a 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-custom-highlight-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png index c15298a11e..027bcebb83 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png index e9b7ddc8a8..b1066f337f 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png index 5fa8fb7e09..87f7aecd17 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-invalid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png index 336236b194..714af8b043 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0eb1254728..793b03fba1 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png index fde60d45a1..892dcc27b7 100644 Binary files a/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/highlight/input.e2e.ts-snapshots/input-outline-valid-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 252422dac1..db954b69f4 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 11a7aa6e3c..71956f38eb 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png index a2bfa86dc1..38f0031570 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png index ba78b0163d..6c1645ad28 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png index 11899b333c..eb4b954608 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png index fe1135fdf6..bae6d29ab5 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 36faab50f1..4241ede761 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 954fff876c..e6353b5e9f 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 5e83b62895..fab2e94e99 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index 988b56e98f..9364f47656 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index 3d16f84c7b..695662ef2d 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index a1034ef11e..a8b63d2895 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-rectangular-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png index 255ba8bcc7..339f70112b 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png index d1a19f5b37..8d29cc2170 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png index 71b7dac0ba..5c754e08f3 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png index 1c61cc87d7..0cdf314fd5 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png index 0bde8a4749..a563218d5e 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png index 44b5543ff0..968c37c61b 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-custom-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 17b7e2c3a6..c7dfcac7a7 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index adcf123306..f559eb651d 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index d06b0893c6..e4c63f54b7 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index 0e4fbf88d2..be6704193b 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index b1d5c11b7d..170b97fe03 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index d45b958213..0c0b4f7134 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-round-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7005dddf10..4bd3dd73a6 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2ddb4690a2..23d036d8c2 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 0675bfb4af..e6fe5784bb 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index fa3554d2b3..b66942b9b6 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index 67052f5816..bb9176f43a 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index 6b0acdbed6..b0b50e0e8b 100644 Binary files a/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/shape/input.e2e.ts-snapshots/input-shape-soft-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png index a4ef1406b6..291dad91c4 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png index a65dc5bc7b..3799268289 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png index fdd37c0c9c..9dae8c88b3 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index a4ef1406b6..291dad91c4 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index a65dc5bc7b..3799268289 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index fdd37c0c9c..9dae8c88b3 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 55e0f8a82b..4e660ee507 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index c8c5dc0720..8abb625277 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index bf98f450db..d6725efd92 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 55e0f8a82b..4e660ee507 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index c8c5dc0720..8abb625277 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png index bf98f450db..d6725efd92 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-large-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png index cbcc45e6f7..08e1fef2b0 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png index 591931c5cf..60ae21babf 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png index 10e0a69d18..c1633bbdfa 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index cbcc45e6f7..08e1fef2b0 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 591931c5cf..60ae21babf 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 10e0a69d18..c1633bbdfa 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 10d37aa8ba..ceaecc6b7e 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 99dc347313..2b8abf8500 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index b915bd838b..9d7964add8 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 10d37aa8ba..ceaecc6b7e 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 99dc347313..2b8abf8500 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png index b915bd838b..9d7964add8 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-medium-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png index aabe601b67..4ee2402158 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5df64a85a5..3304830aa4 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png index 43c0b7f4c8..45ed743790 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png index aabe601b67..4ee2402158 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5df64a85a5..3304830aa4 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png index 43c0b7f4c8..45ed743790 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-label-stacked-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6531f6f585..573111586e 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 04728495e4..0db4c2641c 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index b655b3fa54..353b179ad1 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6531f6f585..573111586e 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 04728495e4..0db4c2641c 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png index b655b3fa54..353b179ad1 100644 Binary files a/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/size/input.e2e.ts-snapshots/input-size-xlarge-outline-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7c700f97e4..1925a5f057 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 46499a18ea..ef70209d6c 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index f490e3cb48..3141a33c98 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index e1235bcc30..afcc463301 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index 0cde5c6589..dc4138affa 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index b7f0591939..f7437a61bd 100644 Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-stacked-fill-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 07235a7963..7bc0455bff 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index f3ebb6532c..c0cae6be4e 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 5e7ed1a193..c650c797c1 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index f20d2167d2..445d42360d 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index ccd4e7184f..4728ce8f06 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index 429b06e685..3b6458be4c 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index f7077e0ad3..f38b51efda 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 5e71d446a3..69729ff8f1 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 884f16b052..0eef0212ee 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3813d36017..6539b5d147 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index a07b9fb920..46b245f7e2 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 0104e11a1b..a638a626c1 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 98520f0596..c778caf6bc 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index ab5d7c5796..7124904696 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index a2dce8f463..3440571c38 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-readonly-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Chrome-linux.png index ca3c489b4a..afbd823d05 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Firefox-linux.png index c9e3534d5b..392942e8ac 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Safari-linux.png index 37739d981c..57ba86bf87 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Chrome-linux.png index 88764df541..3c15a727d3 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Firefox-linux.png index b56d05b7af..8978d627ec 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Safari-linux.png index 0846a3c9dd..10824ac560 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-button-end-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Chrome-linux.png index 0481bddf85..594c002590 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Firefox-linux.png index 7d105e62e4..9c84365b51 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Safari-linux.png index 3a9096b286..c6bc502d58 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Chrome-linux.png index bdf58cf71b..6e3881cb0e 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Firefox-linux.png index 8016a83665..cfa0c4e449 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Safari-linux.png b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Safari-linux.png index f9c0a40331..0413b99173 100644 Binary files a/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item-divider/test/basic/item-divider.e2e.ts-snapshots/item-divider-safe-area-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png index 1b2bd21b13..4bc9f2dbff 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png index 7446637601..83a0cf0476 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png index 1ed2b6eea5..eadbcd9beb 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png index b011e2aca2..0281c441df 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png index d49f451e2e..9caf2e5aef 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png index a108677b3e..45a9a7ad84 100644 Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png index f11e0f51ef..518b743a97 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png index 196333c09a..fa6fcc57e7 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png index 18e11aae11..382290d353 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png index 3200bbdce4..15d72f6dee 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png index 189ab25df8..fa7f0870b7 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png index b9bb2b2bea..929b928f2f 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png index 916838f815..70f4b69979 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png index 721cb14b88..aa07005d27 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png index a61791694c..ab55e05fef 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png index 73e553a9cf..9f24345267 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png index fbf6bdee3b..ff419b8617 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png index 3e40b653e8..25ce907df9 100644 Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png index 78d0b1e503..63532b40ba 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png index 6d157a7285..3acaf73640 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png index 547e5a06c1..ef82733885 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png index 8c3a59dedd..04718ca61f 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png index 8a667769f9..906c5cd088 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png index 3a9a3212ee..e3e9e28193 100644 Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png index 52f6ad5b78..c39986a564 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png index 0ccc7e7a2a..7e75b1985e 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png index d9f9d2d6e0..66357e47fa 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png index c857d85f59..97bc27de5e 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png index ddee48745e..9f980071ba 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png index 2a4791e46b..b8b93fbe14 100644 Binary files a/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/dividers/item.e2e.ts-snapshots/item-dividers-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png index f1daeba2bb..32913b795b 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png index 76fdc553a5..b65300e048 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png index 2ed131256b..1c59570065 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png index 74d9be9789..a97cf60d91 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png index 6cd15423e1..5952a95bd0 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png index 9b2c863f1c..937f618fb2 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png index ef45156c2e..e34b4a880c 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png index 457a148951..dc96ce9d2e 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png index b142eca684..a6910425e8 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png index d5e6fd8a33..0aa87e4c50 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png index 994cd813fa..3b4139c7df 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png index fe1b53784e..2458f7175f 100644 Binary files a/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/media/item.e2e.ts-snapshots/item-media-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png index d916d95943..13b2c825b0 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png index 5de3cf5bdd..d01a7a75bb 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png index de5b0b6f75..5cd1a4bb7c 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-doc-dir-toggled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png index 814b9b4279..c37d5b514e 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png index 3283f15e06..5cf65a2961 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png index 98e56f60d2..9e072749ad 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-side-toggled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png index b9565d1a3d..a8591ef418 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png index 9e7a9dc05a..0844ae3712 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png index b7a796a93d..ac6f1ea78f 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png index 79aa1fbf89..0af868b9c2 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png index 1a8ff47562..cdaf47b737 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png index 3a35a54873..8949801432 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png index 858899aefb..11dc124c0d 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png index 4bf4fa9541..c09fec3b63 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png index ef96fc9196..df72907eb4 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png index d916d95943..13b2c825b0 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png index 5de3cf5bdd..d01a7a75bb 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png index de5b0b6f75..5cd1a4bb7c 100644 Binary files a/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/menu/test/basic/menu.e2e.ts-snapshots/menu-basic-start-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png index 1832e4e250..4ccb27f6a7 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png index aa87ce4542..c3d5fe847a 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png index 6701cc7d9e..411d62ebff 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png index f0735f826b..23d5aed4d6 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png index 90c3297b3e..844f924565 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png index 202848766e..6342ea8be2 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png index d521d4e3a4..6c37ef127c 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png index e9ab0e3501..e8607d5ed5 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png index abb7d8d5d0..29e44f34b6 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png index ddae85dc6a..9f220951a7 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png index aa3076fd43..8100adbadf 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png index 7d5a589c99..a37cd77e17 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png index 55112ef1a1..6d772488fa 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png index a2ea869f72..cc0284d81e 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png index a68f89d4dc..981f8c28f9 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png index 6acabc8f26..d93f082258 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png index 1e264be58e..7e4a859167 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png index 18cbed9121..cc247e6e06 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png index 920e9471a8..558c294917 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png index cd03d98115..58a7826951 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png index 2f9d797d4d..82f1767bba 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png index 99d8975301..680346e438 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png index 2b7093b0eb..292a9fdb48 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png index e1a8e357d0..05bb80e291 100644 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png index 7f5bd5a6a3..161ef11016 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png index 2902c904e7..e8dae7b084 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png index 02c90c50a6..cde596cf3f 100644 Binary files a/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/card/select.e2e.ts-snapshots/select-card-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss index eed21a7480..dd629a9e85 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.scss @@ -14,5 +14,5 @@ height: 52px; gap: 12px; - box-shadow: tokens.$ionic-elevation-2; + box-shadow: tokens.$ionic-elevation-200; } diff --git a/core/src/components/tab-bar/tab-bar.ionic.vars.scss b/core/src/components/tab-bar/tab-bar.ionic.vars.scss index 6c0c435d92..437a53108c 100644 --- a/core/src/components/tab-bar/tab-bar.ionic.vars.scss +++ b/core/src/components/tab-bar/tab-bar.ionic.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Background color of the tab bar -$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-neutral-0); +$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-base-white); /// @prop - Background color of the tab bar button when activated // TODO(FW-6186): use design token here when it is added diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 18dd5f6982..3293756dcd 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 56a844729b..6a1f96261d 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png index b3f875f29c..0690136503 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png index b5295cc1f5..f11bb7d3a7 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png index 20ef395044..d056d30cc6 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png index b1e0413561..1443c32c30 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index 93ecf91699..faf072fa3a 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -9,7 +9,7 @@ --focus-ring-color: #9ec4fd; --focus-ring-width: 2px; - @include border-radius(tokens.$ionic-border-radius-rounded-medium); + @include border-radius(tokens.$ionic-border-radius-200); } // Tab Button Focused diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png index dee305bbc1..fde376559e 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png index eeb56d5225..bcd3b409c9 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png index 4c55ff0926..f5fb577d9c 100644 Binary files a/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/card/textarea.e2e.ts-snapshots/textarea-card-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png index 8901d6470b..1ebde14b00 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png index 7d79ccd74f..f866a1b5eb 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png index c29cfcaee5..213cb9ed08 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png index fd49cfcb21..1d0c7c7c43 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png index e39cd26263..bec0bafdf3 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png index 1a2ccbd06b..ecd961490b 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png index b8e0ce1502..3bad9803d1 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png index 4f74ba8201..8db2b6a9c0 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png index b7680904be..0c80476409 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png index 3b2b7dd16a..262b2c7bbd 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png index aef28839d1..d7d90936a1 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png index 94bcaa8fb4..7e4b638e1c 100644 Binary files a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png index b32b4eca0b..1a2a4ce997 100644 Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png index 9d41f90d35..b1a4a4af2e 100644 Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png index 7e3fda4e73..d2911b86b5 100644 Binary files a/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png and b/core/src/components/toolbar/test/colors/toolbar.e2e.ts-snapshots/toolbar-colors-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/css/ionic/bundle.ionic.scss b/core/src/css/ionic/bundle.ionic.scss index 581dd1971c..af41dee266 100644 --- a/core/src/css/ionic/bundle.ionic.scss +++ b/core/src/css/ionic/bundle.ionic.scss @@ -1,8 +1,8 @@ // Core CSS, always required -@import "./core.ionic"; +@forward "./core.ionic"; // Global CSS: blocks scrolling, sets box-sizing -@import "./global.bundle.ionic"; +@forward "./global.bundle.ionic"; // CSS Utils -@import "./utils.bundle.ionic"; +@forward "./utils.bundle.ionic"; diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss index b6011b4cca..b51f53a54d 100644 --- a/core/src/css/ionic/core.ionic.scss +++ b/core/src/css/ionic/core.ionic.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- :root { - --ionic-global-background-color: #{globals.$ionic-color-neutral-10}; + --ionic-global-background-color: #{globals.$ionic-color-neutral-100}; --ionic-global-text-color: #{globals.$ionic-color-neutral-900}; } @@ -34,7 +34,7 @@ body.backdrop-no-scroll { html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type, html.ios ion-modal ion-footer ion-toolbar:first-of-type { - padding-top: globals.$ionic-space-xxs; + padding-top: globals.$ionic-space-150; } /** @@ -44,7 +44,7 @@ html.ios ion-modal ion-footer ion-toolbar:first-of-type { */ html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type { - padding-bottom: globals.$ionic-space-xxs; + padding-bottom: globals.$ionic-space-150; } /** @@ -53,8 +53,8 @@ html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type { * safe area values when in landscape. */ html.ios ion-modal ion-toolbar { - padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-xs); - padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-xs); + padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-200); + padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-200); } /** @@ -250,21 +250,21 @@ ion-card-header.ion-color .ion-inherit-color { } .menu-content-reveal { - box-shadow: #{globals.$ionic-elevation-1}; + box-shadow: #{globals.$ionic-elevation-100}; } .menu-content-push { - box-shadow: #{globals.$ionic-elevation-1}; + box-shadow: #{globals.$ionic-elevation-100}; } // Accordion Styles ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type { - border-top-left-radius: globals.$ionic-border-radius-rounded-medium; - border-top-right-radius: globals.$ionic-border-radius-rounded-medium; + border-top-left-radius: globals.$ionic-border-radius-200; + border-top-right-radius: globals.$ionic-border-radius-200; } ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type { - border-bottom-left-radius: globals.$ionic-border-radius-rounded-medium; - border-bottom-right-radius: globals.$ionic-border-radius-rounded-medium; + border-bottom-left-radius: globals.$ionic-border-radius-200; + border-bottom-right-radius: globals.$ionic-border-radius-200; } ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] { --border-width: 0; diff --git a/core/src/css/ionic/global.bundle.ionic.scss b/core/src/css/ionic/global.bundle.ionic.scss index a4d42d5cca..c6a51e490f 100644 --- a/core/src/css/ionic/global.bundle.ionic.scss +++ b/core/src/css/ionic/global.bundle.ionic.scss @@ -1,5 +1,5 @@ -@import "../normalize"; -@import "./structure.ionic"; -@import "./typography.ionic"; -@import "./link.ionic"; -@import "./ionic-swiper.ionic"; +@forward "../normalize"; +@forward "./structure.ionic"; +@forward "./typography.ionic"; +@forward "./link.ionic"; +@forward "./ionic-swiper.ionic"; diff --git a/core/src/css/ionic/ionic-swiper.ionic.scss b/core/src/css/ionic/ionic-swiper.ionic.scss index 2a5b0a20fd..f2ffc58d4b 100644 --- a/core/src/css/ionic/ionic-swiper.ionic.scss +++ b/core/src/css/ionic/ionic-swiper.ionic.scss @@ -5,7 +5,7 @@ .swiper { --bullet-background: #{tokens.$ionic-color-neutral-800}; - --bullet-background-active: #{tokens.$ionic-color-primary}; + --bullet-background-active: #{tokens.$ionic-color-primary-base}; --progress-bar-background: rgba(#010408, 0.25); --progress-bar-background-active: #{tokens.$ionic-color-primary-600}; --scroll-bar-background: rgba(#010408, 0.1); diff --git a/core/src/css/ionic/link.ionic.scss b/core/src/css/ionic/link.ionic.scss index 2764d5b3f7..84861e8c75 100644 --- a/core/src/css/ionic/link.ionic.scss +++ b/core/src/css/ionic/link.ionic.scss @@ -7,7 +7,7 @@ align-items: center; - gap: globals.$ionic-space-xxxs; + gap: globals.$ionic-space-100; transition: color 0.2s ease-in-out; diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss index c0cc6aa991..6e87435699 100644 --- a/core/src/css/ionic/typography.ionic.scss +++ b/core/src/css/ionic/typography.ionic.scss @@ -6,9 +6,9 @@ html { body { font-weight: globals.$ionic-font-weight-regular; - font-size: globals.$ionic-font-size-m; + font-size: globals.$ionic-font-size-350; - line-height: globals.$ionic-font-line-height-m; + line-height: globals.$ionic-line-height-600; } /* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/ @@ -31,58 +31,58 @@ h6, h1, .ionic-heading1 { - font-size: globals.$ionic-font-size-h1; + font-size: #{globals.$ionic-font-size-700}; - line-height: globals.$ionic-font-line-height-xxl; + line-height: globals.$ionic-line-height-900; } h2, .ionic-heading2 { - font-size: globals.$ionic-font-size-h2; + font-size: globals.$ionic-font-size-800; - line-height: globals.$ionic-font-line-height-xl; + line-height: globals.$ionic-line-height-800; } h3, .ionic-heading3 { - font-size: globals.$ionic-font-size-h3; + font-size: globals.$ionic-font-size-600; - line-height: globals.$ionic-font-line-height-xl; + line-height: globals.$ionic-line-height-800; } h4, .ionic-heading4 { - font-size: globals.$ionic-font-size-h4; + font-size: globals.$ionic-font-size-550; - line-height: globals.$ionic-font-line-height-l; + line-height: globals.$ionic-line-height-700; } h5, .ionic-heading5 { - font-size: globals.$ionic-font-size-h5; + font-size: globals.$ionic-font-size-500; - line-height: globals.$ionic-font-line-height-l; + line-height: globals.$ionic-line-height-700; } h6, .ionic-heading6 { - font-size: globals.$ionic-font-size-h6; + font-size: globals.$ionic-font-size-450; - line-height: globals.$ionic-font-line-height-m; + line-height: globals.$ionic-line-height-600; } .ionic-display-s { - font-size: globals.$ionic-font-size-display-s; + font-size: globals.$ionic-font-size-800; font-weight: globals.$ionic-font-weight-regular; - line-height: globals.$ionic-font-line-height-s; + line-height: globals.$ionic-line-height-500; } .ionic-display-m { - font-size: globals.$ionic-font-size-display-m; + font-size: globals.$ionic-font-size-900; font-weight: globals.$ionic-font-weight-regular; - line-height: globals.$ionic-font-line-height-m; + line-height: globals.$ionic-line-height-600; } /* Common */ diff --git a/core/src/css/ionic/utils.bundle.ionic.scss b/core/src/css/ionic/utils.bundle.ionic.scss index 85d93d3a0b..dbaf9913a5 100644 --- a/core/src/css/ionic/utils.bundle.ionic.scss +++ b/core/src/css/ionic/utils.bundle.ionic.scss @@ -1 +1 @@ -@import "../../foundations/ionic.utility"; +@forward "../../foundations/ionic.utility"; diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png index 68e63cc59a..91d39acd79 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0a4b4cf86a..b50b8dfd2b 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png index 0058a38f97..cc09335784 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png index e0484f87bc..23b20da335 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png index 1109c34877..f38fbcf8b0 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png index 806e74bff8..2edf18dacc 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 713b4a5f7a..c2bbff7ea8 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 04f3f71ecd..574419bc5f 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png index 109d8be07c..2708aa9500 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png index 2be41be5eb..1728133a97 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png index aacc3497bf..f13b805bf2 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png index c051f5cf5d..8c54d5df57 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts b/core/src/css/test/typography/basic/typography.e2e.ts index 9919eb6178..bf9343dc52 100644 --- a/core/src/css/test/typography/basic/typography.e2e.ts +++ b/core/src/css/test/typography/basic/typography.e2e.ts @@ -18,9 +18,9 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh

H4: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog
H6: The quick brown fox jumps over the lazy dog
-

Tag_P FontLarge: The quick brown fox jumps over the lazy dog

-

Tag_None FontMedium: The quick brown fox jumps over the lazydog

-

Tag_Span FontSmall: The quick brown fox jumps over the lazy dog

+

Tag_P FontLarge: The quick brown fox jumps over the lazy dog

+

Tag_None FontMedium: The quick brown fox jumps over the lazydog

+

Tag_Span FontSmall: The quick brown fox jumps over the lazy dog

`, config diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png index b3240bc0eb..901a474a93 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png index 99b86da049..abe3fdfc8f 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png index db7225c8bd..cab9f0a1f2 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8c9db2e7cf..132c963072 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png index e483012784..f3b42387c2 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png index 00b81c0af8..2abebaf5ca 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png index 776261b6e9..6e6f25a18a 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png index 95ced965b9..7c8e1322f5 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png index a129f344c1..58082b3879 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/foundations/README.md b/core/src/foundations/README.md index b0de539fe2..b2b0020ff4 100644 --- a/core/src/foundations/README.md +++ b/core/src/foundations/README.md @@ -8,15 +8,17 @@ Design tokens represent small, repeated design decisions that make up a design s ## Design Tokens Architecture -The Ionic Design Tokens are stored on `core/src/foundations/_design-tokens.json`. +The Ionic Design Tokens are stored on `core/src/foundations/tokens`. Here we have the abstract primitive tokens that will be common between all themes. +Inside the `core/src/foundations/tokens/theme` we have the tokens that are specific to the new IOnic Theme, like primary colors, font-family and color states. -Currently, five categories of tokens are stored: +Currently, six categories of tokens are stored: - Colors - Font -- Space +- Scale - Border - Elevation +- Z-index Using [Style Dictionary](https://amzn.github.io/style-dictionary/), these tokens generate 3 files inside `core/src/foundations`: @@ -56,19 +58,19 @@ Examples: CSS Custom Property: ```css ---ionic-color-primary-10 +--ionic-color-primary-100 ``` SCSS Variable: ```scss -$ionic-color-primary-10 +$ionic-color-primary-100 ``` Utility class: ```css -.ionic-color-primary-10 +.ionic-color-primary-100 ``` ## When to change the Design Tokens @@ -97,7 +99,7 @@ Usage example (Chip Component): @use '../../themes/ionic/ionic.globals.scss' as globals; :host { - --background: #{globals.$ionic-color-neutral-10}; + --background: #{globals.$ionic-color-neutral-100}; color: globals.$ionic-color-neutral-900; @include globals.font-smoothing; } diff --git a/core/src/foundations/_design-tokens.json b/core/src/foundations/_design-tokens.json deleted file mode 100644 index cceac63345..0000000000 --- a/core/src/foundations/_design-tokens.json +++ /dev/null @@ -1,432 +0,0 @@ -{ - "color": { - "$type": "color", - "primary": { - "{}": { - "$value": "{color.primary.400}" - }, - "10": { - "$value": "#f7faff" - }, - "50": { - "$value": "#cbdffe" - }, - "100": { - "$value": "#9ec4fd" - }, - "200": { - "$value": "#74aafc" - }, - "300": { - "$value": "#4991fb" - }, - "400": { - "$value": "#1068eb" - }, - "500": { - "$value": "#0750be" - }, - "600": { - "$value": "#053d90" - }, - "700": { - "$value": "#062b63" - }, - "800": { - "$value": "#061935" - }, - "900": { - "$value": "#010408" - } - }, - "secondary": { - "$value": "#303d60" - }, - "neutral": { - "0": { - "$value": "#ffffff" - }, - "10": { - "$value": "#f5f5f5" - }, - "50": { - "$value": "#e7e7e7" - }, - "100": { - "$value": "#dadada" - }, - "200": { - "$value": "#c9c9c9" - }, - "300": { - "$value": "#b8b8b8" - }, - "400": { - "$value": "#9a9a9a" - }, - "500": { - "$value": "#767676" - }, - "600": { - "$value": "#535353" - }, - "700": { - "$value": "#373737" - }, - "800": { - "$value": "#212121" - }, - "900": { - "$value": "#05080f" - } - }, - "error": { - "{}": { - "$value": "{color.error.400}" - }, - "10": { - "$value": "#fffafa" - }, - "50": { - "$value": "#ffd5d5" - }, - "100": { - "$value": "#ffafaf" - }, - "200": { - "$value": "#ff8a8a" - }, - "300": { - "$value": "#ff6666" - }, - "400": { - "$value": "#f72c2c" - }, - "500": { - "$value": "#c71212" - }, - "600": { - "$value": "#970606" - }, - "700": { - "$value": "#670202" - }, - "800": { - "$value": "#380101" - }, - "900": { - "$value": "#080000" - } - }, - "warning": { - "{}": { - "$value": "{color.warning.400}" - }, - "10": { - "$value": "#fffdfa" - }, - "50": { - "$value": "#ffecce" - }, - "100": { - "$value": "#ffdba0" - }, - "200": { - "$value": "#ffca73" - }, - "300": { - "$value": "#ffb845" - }, - "400": { - "$value": "#ff9707" - }, - "500": { - "$value": "#ce7a06" - }, - "600": { - "$value": "#9c5f0a" - }, - "700": { - "$value": "#6b430c" - }, - "800": { - "$value": "#39260b" - }, - "900": { - "$value": "#080502" - } - }, - "success": { - "{}": { - "$value": "{color.success.400}" - }, - "10": { - "$value": "#fbfffa" - }, - "50": { - "$value": "#def7d8" - }, - "100": { - "$value": "#c6f0b7" - }, - "200": { - "$value": "#a4e188" - }, - "300": { - "$value": "#73c346" - }, - "400": { - "$value": "#52a518" - }, - "500": { - "$value": "#36870C" - }, - "600": { - "$value": "#36870c" - }, - "700": { - "$value": "#226907" - }, - "800": { - "$value": "#144b05" - }, - "900": { - "$value": "#030f02" - } - }, - "info": { - "{}": { - "$value": "{color.info.400}" - }, - "10": { - "$value": "#f5fbff" - }, - "50": { - "$value": "#c6e7ff" - }, - "100": { - "$value": "#97d3ff" - }, - "200": { - "$value": "#6ac0fe" - }, - "300": { - "$value": "#3dadfe" - }, - "400": { - "$value": "#008bef" - }, - "500": { - "$value": "#0071c2" - }, - "600": { - "$value": "#005796" - }, - "700": { - "$value": "#003d69" - }, - "800": { - "$value": "#02243c" - }, - "900": { - "$value": "#020a0f" - } - } - }, - "font": { - "$type": "font", - "family": { - "$value": "\"Inter\", sans-serif" - }, - "letter-spacing": { - "none": { - "$value": "0em" - }, - "s": { - "$value": "0.1em" - }, - "m": { - "$value": "0.15em" - } - }, - "line-height": { - "xs": { - "$value": "16px" - }, - "s": { - "$value": "20px" - }, - "m": { - "$value": "24px" - }, - "l": { - "$value": "28px" - }, - "xl": { - "$value": "32px" - }, - "xxl": { - "$value": "36px" - }, - "display-s": { - "$value": "44px" - }, - "display-m": { - "$value": "48px" - }, - "full": { - "$value": "100%" - } - }, - "size": { - "h1": { - "$value": "28px" - }, - "h2": { - "$value": "32px" - }, - "h3": { - "$value": "24px" - }, - "h4": { - "$value": "22px" - }, - "h5": { - "$value": "20px" - }, - "h6": { - "$value": "18px" - }, - "display-s": { - "$value": "32px" - }, - "display-m": { - "$value": "36px" - }, - "s": { - "$value": "12px" - }, - "m": { - "$value": "14px" - }, - "l": { - "$value": "16px" - } - }, - "weight": { - "light": { - "$value": "300" - }, - "regular": { - "$value": "400" - }, - "medium": { - "$value": "500" - }, - "semi-bold": { - "$value": "600" - }, - "bold": { - "$value": "700" - } - } - }, - "space": { - "$type": "space", - "none": { - "$value": "0" - }, - "xxxxs": { - "$value": "2px" - }, - "xxxs": { - "$value": "4px" - }, - "xxs": { - "$value": "6px" - }, - "xs": { - "$value": "8px" - }, - "s": { - "$value": "12px" - }, - "base": { - "$value": "16px" - }, - "m": { - "$value": "20px" - }, - "l": { - "$value": "24px" - }, - "xl": { - "$value": "28px" - }, - "xxl": { - "$value": "32px" - }, - "xxxl": { - "$value": "36px" - }, - "xxxxl": { - "$value": "40px" - } - }, - "border": { - "$type": "border", - "radius": { - "$type": "radius", - "square": { - "$value": "0" - }, - "rounded": { - "small": { - "$value": "4px" - }, - "medium": { - "$value": "8px" - }, - "large": { - "$value": "16px" - }, - "x-large": { - "$value": "32px" - }, - "full": { - "$value": "999px" - } - } - }, - "size": { - "$type": "size", - "small": { - "$value": "1px" - }, - "medium": { - "$value": "2px" - }, - "large": { - "$value": "3px" - } - } - }, - "elevation": { - "$type": "elevation", - "0": { - "$value": "none" - }, - "1": { - "$value": "0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)" - }, - "2": { - "$value": "0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)" - }, - "3": { - "$value": "0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09)" - }, - "4": { - "$value": "0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12)" - } - } -} diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss index cbeaec52b3..e05636a292 100644 --- a/core/src/foundations/ionic.root.scss +++ b/core/src/foundations/ionic.root.scss @@ -4,206 +4,618 @@ */ :root { - --ionic-color-primary-10: #f7faff; - --ionic-color-primary-10-rgb: 247, 250, 255; - --ionic-color-primary-50: #cbdffe; - --ionic-color-primary-50-rgb: 203, 223, 254; - --ionic-color-primary-100: #9ec4fd; - --ionic-color-primary-100-rgb: 158, 196, 253; - --ionic-color-primary-200: #74aafc; - --ionic-color-primary-200-rgb: 116, 170, 252; - --ionic-color-primary-300: #4991fb; - --ionic-color-primary-300-rgb: 73, 145, 251; - --ionic-color-primary-400: #1068eb; - --ionic-color-primary-400-rgb: 16, 104, 235; - --ionic-color-primary-500: #0750be; - --ionic-color-primary-500-rgb: 7, 80, 190; - --ionic-color-primary-600: #053d90; - --ionic-color-primary-600-rgb: 5, 61, 144; - --ionic-color-primary-700: #062b63; - --ionic-color-primary-700-rgb: 6, 43, 99; - --ionic-color-primary-800: #061935; - --ionic-color-primary-800-rgb: 6, 25, 53; - --ionic-color-primary-900: #010408; - --ionic-color-primary-900-rgb: 1, 4, 8; - --ionic-color-primary: #1068eb; - --ionic-color-primary-rgb: 16, 104, 235; - --ionic-color-secondary: #303d60; - --ionic-color-secondary-rgb: 48, 61, 96; - --ionic-color-neutral-0: #ffffff; - --ionic-color-neutral-0-rgb: 255, 255, 255; - --ionic-color-neutral-10: #f5f5f5; - --ionic-color-neutral-10-rgb: 245, 245, 245; - --ionic-color-neutral-50: #e7e7e7; - --ionic-color-neutral-50-rgb: 231, 231, 231; - --ionic-color-neutral-100: #dadada; - --ionic-color-neutral-100-rgb: 218, 218, 218; - --ionic-color-neutral-200: #c9c9c9; - --ionic-color-neutral-200-rgb: 201, 201, 201; - --ionic-color-neutral-300: #b8b8b8; - --ionic-color-neutral-300-rgb: 184, 184, 184; - --ionic-color-neutral-400: #9a9a9a; - --ionic-color-neutral-400-rgb: 154, 154, 154; - --ionic-color-neutral-500: #767676; - --ionic-color-neutral-500-rgb: 118, 118, 118; - --ionic-color-neutral-600: #535353; - --ionic-color-neutral-600-rgb: 83, 83, 83; - --ionic-color-neutral-700: #373737; - --ionic-color-neutral-700-rgb: 55, 55, 55; - --ionic-color-neutral-800: #212121; - --ionic-color-neutral-800-rgb: 33, 33, 33; - --ionic-color-neutral-900: #05080f; - --ionic-color-neutral-900-rgb: 5, 8, 15; - --ionic-color-error-10: #fffafa; - --ionic-color-error-10-rgb: 255, 250, 250; - --ionic-color-error-50: #ffd5d5; - --ionic-color-error-50-rgb: 255, 213, 213; - --ionic-color-error-100: #ffafaf; - --ionic-color-error-100-rgb: 255, 175, 175; - --ionic-color-error-200: #ff8a8a; - --ionic-color-error-200-rgb: 255, 138, 138; - --ionic-color-error-300: #ff6666; - --ionic-color-error-300-rgb: 255, 102, 102; - --ionic-color-error-400: #f72c2c; - --ionic-color-error-400-rgb: 247, 44, 44; - --ionic-color-error-500: #c71212; - --ionic-color-error-500-rgb: 199, 18, 18; - --ionic-color-error-600: #970606; - --ionic-color-error-600-rgb: 151, 6, 6; - --ionic-color-error-700: #670202; - --ionic-color-error-700-rgb: 103, 2, 2; - --ionic-color-error-800: #380101; - --ionic-color-error-800-rgb: 56, 1, 1; - --ionic-color-error-900: #080000; - --ionic-color-error-900-rgb: 8, 0, 0; - --ionic-color-error: #f72c2c; - --ionic-color-error-rgb: 247, 44, 44; - --ionic-color-warning-10: #fffdfa; - --ionic-color-warning-10-rgb: 255, 253, 250; - --ionic-color-warning-50: #ffecce; - --ionic-color-warning-50-rgb: 255, 236, 206; - --ionic-color-warning-100: #ffdba0; - --ionic-color-warning-100-rgb: 255, 219, 160; - --ionic-color-warning-200: #ffca73; - --ionic-color-warning-200-rgb: 255, 202, 115; - --ionic-color-warning-300: #ffb845; - --ionic-color-warning-300-rgb: 255, 184, 69; - --ionic-color-warning-400: #ff9707; - --ionic-color-warning-400-rgb: 255, 151, 7; - --ionic-color-warning-500: #ce7a06; - --ionic-color-warning-500-rgb: 206, 122, 6; - --ionic-color-warning-600: #9c5f0a; - --ionic-color-warning-600-rgb: 156, 95, 10; - --ionic-color-warning-700: #6b430c; - --ionic-color-warning-700-rgb: 107, 67, 12; - --ionic-color-warning-800: #39260b; - --ionic-color-warning-800-rgb: 57, 38, 11; - --ionic-color-warning-900: #080502; - --ionic-color-warning-900-rgb: 8, 5, 2; - --ionic-color-warning: #ff9707; - --ionic-color-warning-rgb: 255, 151, 7; - --ionic-color-success-10: #fbfffa; - --ionic-color-success-10-rgb: 251, 255, 250; - --ionic-color-success-50: #def7d8; - --ionic-color-success-50-rgb: 222, 247, 216; - --ionic-color-success-100: #c6f0b7; - --ionic-color-success-100-rgb: 198, 240, 183; - --ionic-color-success-200: #a4e188; - --ionic-color-success-200-rgb: 164, 225, 136; - --ionic-color-success-300: #73c346; - --ionic-color-success-300-rgb: 115, 195, 70; - --ionic-color-success-400: #52a518; - --ionic-color-success-400-rgb: 82, 165, 24; - --ionic-color-success-500: #36870c; - --ionic-color-success-500-rgb: 54, 135, 12; - --ionic-color-success-600: #36870c; - --ionic-color-success-600-rgb: 54, 135, 12; - --ionic-color-success-700: #226907; - --ionic-color-success-700-rgb: 34, 105, 7; - --ionic-color-success-800: #144b05; - --ionic-color-success-800-rgb: 20, 75, 5; - --ionic-color-success-900: #030f02; - --ionic-color-success-900-rgb: 3, 15, 2; - --ionic-color-success: #52a518; - --ionic-color-success-rgb: 82, 165, 24; - --ionic-color-info-10: #f5fbff; - --ionic-color-info-10-rgb: 245, 251, 255; - --ionic-color-info-50: #c6e7ff; - --ionic-color-info-50-rgb: 198, 231, 255; - --ionic-color-info-100: #97d3ff; - --ionic-color-info-100-rgb: 151, 211, 255; - --ionic-color-info-200: #6ac0fe; - --ionic-color-info-200-rgb: 106, 192, 254; - --ionic-color-info-300: #3dadfe; - --ionic-color-info-300-rgb: 61, 173, 254; - --ionic-color-info-400: #008bef; - --ionic-color-info-400-rgb: 0, 139, 239; - --ionic-color-info-500: #0071c2; - --ionic-color-info-500-rgb: 0, 113, 194; - --ionic-color-info-600: #005796; - --ionic-color-info-600-rgb: 0, 87, 150; - --ionic-color-info-700: #003d69; - --ionic-color-info-700-rgb: 0, 61, 105; - --ionic-color-info-800: #02243c; - --ionic-color-info-800-rgb: 2, 36, 60; - --ionic-color-info-900: #020a0f; - --ionic-color-info-900-rgb: 2, 10, 15; - --ionic-color-info: #008bef; - --ionic-color-info-rgb: 0, 139, 239; - --ionic-font-family: "Inter", sans-serif; - --ionic-font-letter-spacing-none: 0em; - --ionic-font-letter-spacing-s: 0.1em; - --ionic-font-letter-spacing-m: 0.15em; - --ionic-font-line-height-xs: 16px; - --ionic-font-line-height-s: 20px; - --ionic-font-line-height-m: 24px; - --ionic-font-line-height-l: 28px; - --ionic-font-line-height-xl: 32px; - --ionic-font-line-height-xxl: 36px; - --ionic-font-line-height-display-s: 44px; - --ionic-font-line-height-display-m: 48px; - --ionic-font-line-height-full: 100%; - --ionic-font-size-h1: 28px; - --ionic-font-size-h2: 32px; - --ionic-font-size-h3: 24px; - --ionic-font-size-h4: 22px; - --ionic-font-size-h5: 20px; - --ionic-font-size-h6: 18px; - --ionic-font-size-display-s: 32px; - --ionic-font-size-display-m: 36px; - --ionic-font-size-s: 12px; - --ionic-font-size-m: 14px; - --ionic-font-size-l: 16px; + --ionic-elevation-100: 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a; + --ionic-elevation-200: 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d; + --ionic-elevation-300: 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d; + --ionic-elevation-400: 0px 15px 48px 0px #0000002e, 0px 3px 12px 0px #0000001f; + --ionic-elevation-500: 0px 3px 9px 0px #062b6312, 0px 0px 4px 0px #062b630a; + --ionic-elevation-600: 0px 8px 25px 0px #062b6314, 0px 1px 5px 0px #062b630d; + --ionic-elevation-700: 0px 15px 32px 0px #062b6317, 0px 2px 7px 0px #062b630d; + --ionic-elevation-800: 0px 20px 48px 0px #062b631f, 0px 3px 14px 0px #062b631f; + --ionic-font-size-275: 11px; + --ionic-font-size-300: 12px; + --ionic-font-size-350: 14px; + --ionic-font-size-400: 16px; + --ionic-font-size-450: 18px; + --ionic-font-size-500: 20px; + --ionic-font-size-550: 22px; + --ionic-font-size-600: 24px; + --ionic-font-size-650: 26px; + --ionic-font-size-700: 28px; + --ionic-font-size-800: 32px; + --ionic-font-size-900: 36px; + --ionic-font-weight-thin: 100; + --ionic-font-weight-extra-light: 200; --ionic-font-weight-light: 300; --ionic-font-weight-regular: 400; --ionic-font-weight-medium: 500; --ionic-font-weight-semi-bold: 600; --ionic-font-weight-bold: 700; - --ionic-space-none: 0; - --ionic-space-xxxxs: 2px; - --ionic-space-xxxs: 4px; - --ionic-space-xxs: 6px; - --ionic-space-xs: 8px; - --ionic-space-s: 12px; - --ionic-space-base: 16px; - --ionic-space-m: 20px; - --ionic-space-l: 24px; - --ionic-space-xl: 28px; - --ionic-space-xxl: 32px; - --ionic-space-xxxl: 36px; - --ionic-space-xxxxl: 40px; - --ionic-border-radius-square: 0; - --ionic-border-radius-rounded-small: 4px; - --ionic-border-radius-rounded-medium: 8px; - --ionic-border-radius-rounded-large: 16px; - --ionic-border-radius-rounded-x-large: 32px; - --ionic-border-radius-rounded-full: 999px; - --ionic-border-size-small: 1px; - --ionic-border-size-medium: 2px; - --ionic-border-size-large: 3px; - --ionic-elevation-0: none; - --ionic-elevation-1: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04); - --ionic-elevation-2: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05); - --ionic-elevation-3: 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09); - --ionic-elevation-4: 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12); + --ionic-font-weight-extra-bold: 800; + --ionic-font-weight-black: 900; + --ionic-letter-spacing-0: 0; + --ionic-letter-spacing-1: 1%; + --ionic-letter-spacing-2: 1.5%; + --ionic-line-height-300: 12px; + --ionic-line-height-400: 16px; + --ionic-line-height-500: 20px; + --ionic-line-height-600: 24px; + --ionic-line-height-700: 28px; + --ionic-line-height-800: 32px; + --ionic-line-height-900: 36px; + --ionic-line-height-1100: 44px; + --ionic-line-height-1200: 48px; + --ionic-line-height-full: 100%; + --ionic-space-0: 0px; + --ionic-space-100: 4px; + --ionic-space-150: 6px; + --ionic-space-200: 8px; + --ionic-space-250: 10px; + --ionic-space-300: 12px; + --ionic-space-400: 16px; + --ionic-space-500: 20px; + --ionic-space-600: 24px; + --ionic-space-700: 28px; + --ionic-space-800: 32px; + --ionic-space-900: 36px; + --ionic-space-1000: 40px; + --ionic-space-1200: 48px; + --ionic-space-050: 2px; + --ionic-border-radius-0: 0px; + --ionic-border-radius-100: 4px; + --ionic-border-radius-200: 8px; + --ionic-border-radius-300: 12px; + --ionic-border-radius-400: 16px; + --ionic-border-radius-800: 32px; + --ionic-border-radius-1000: 40px; + --ionic-border-radius-050: 2px; + --ionic-border-radius-full: 999px; + --ionic-border-size-0: 0px; + --ionic-border-size-025: 1px; + --ionic-border-size-050: 2px; + --ionic-border-size-075: 3px; + --ionic-border-style-none: none; + --ionic-border-style-solid: solid; + --ionic-border-style-dashed: dashed; + --ionic-border-style-dotted: dotted; + --ionic-color-base-white: #ffffff; + --ionic-color-base-white-rgb: 255, 255, 255; + --ionic-color-base-black: #111111; + --ionic-color-base-black-rgb: 17, 17, 17; + --ionic-color-neutral-100: #f1f1f1; + --ionic-color-neutral-100-rgb: 241, 241, 241; + --ionic-color-neutral-200: #e7e7e7; + --ionic-color-neutral-200-rgb: 231, 231, 231; + --ionic-color-neutral-300: #cfcfcf; + --ionic-color-neutral-300-rgb: 207, 207, 207; + --ionic-color-neutral-400: #b9b9b9; + --ionic-color-neutral-400-rgb: 185, 185, 185; + --ionic-color-neutral-500: #a2a2a2; + --ionic-color-neutral-500-rgb: 162, 162, 162; + --ionic-color-neutral-600: #8c8c8c; + --ionic-color-neutral-600-rgb: 140, 140, 140; + --ionic-color-neutral-700: #777777; + --ionic-color-neutral-700-rgb: 119, 119, 119; + --ionic-color-neutral-800: #626262; + --ionic-color-neutral-800-rgb: 98, 98, 98; + --ionic-color-neutral-900: #4e4e4e; + --ionic-color-neutral-900-rgb: 78, 78, 78; + --ionic-color-neutral-1000: #3b3b3b; + --ionic-color-neutral-1000-rgb: 59, 59, 59; + --ionic-color-neutral-1100: #292929; + --ionic-color-neutral-1100-rgb: 41, 41, 41; + --ionic-color-neutral-1200: #242424; + --ionic-color-neutral-1200-rgb: 36, 36, 36; + --ionic-color-red-100: #feeded; + --ionic-color-red-100-rgb: 254, 237, 237; + --ionic-color-red-200: #fde1e1; + --ionic-color-red-200-rgb: 253, 225, 225; + --ionic-color-red-300: #fcc1c1; + --ionic-color-red-300-rgb: 252, 193, 193; + --ionic-color-red-400: #faa1a1; + --ionic-color-red-400-rgb: 250, 161, 161; + --ionic-color-red-500: #f97d7d; + --ionic-color-red-500-rgb: 249, 125, 125; + --ionic-color-red-600: #f85151; + --ionic-color-red-600-rgb: 248, 81, 81; + --ionic-color-red-700: #e52929; + --ionic-color-red-700-rgb: 229, 41, 41; + --ionic-color-red-800: #bf2222; + --ionic-color-red-800-rgb: 191, 34, 34; + --ionic-color-red-900: #991b1b; + --ionic-color-red-900-rgb: 153, 27, 27; + --ionic-color-red-1000: #761515; + --ionic-color-red-1000-rgb: 118, 21, 21; + --ionic-color-red-1100: #540f0f; + --ionic-color-red-1100-rgb: 84, 15, 15; + --ionic-color-red-1200: #330909; + --ionic-color-red-1200-rgb: 51, 9, 9; + --ionic-color-pumpkin-100: #feedea; + --ionic-color-pumpkin-100-rgb: 254, 237, 234; + --ionic-color-pumpkin-200: #fde0db; + --ionic-color-pumpkin-200-rgb: 253, 224, 219; + --ionic-color-pumpkin-300: #fbbdb1; + --ionic-color-pumpkin-300-rgb: 251, 189, 177; + --ionic-color-pumpkin-400: #f9947c; + --ionic-color-pumpkin-400-rgb: 249, 148, 124; + --ionic-color-pumpkin-500: #f75d07; + --ionic-color-pumpkin-500-rgb: 247, 93, 7; + --ionic-color-pumpkin-600: #da5206; + --ionic-color-pumpkin-600-rgb: 218, 82, 6; + --ionic-color-pumpkin-700: #bd4705; + --ionic-color-pumpkin-700-rgb: 189, 71, 5; + --ionic-color-pumpkin-800: #9f3c05; + --ionic-color-pumpkin-800-rgb: 159, 60, 5; + --ionic-color-pumpkin-900: #803004; + --ionic-color-pumpkin-900-rgb: 128, 48, 4; + --ionic-color-pumpkin-1000: #602403; + --ionic-color-pumpkin-1000-rgb: 96, 36, 3; + --ionic-color-pumpkin-1100: #401802; + --ionic-color-pumpkin-1100-rgb: 64, 24, 2; + --ionic-color-pumpkin-1200: #210c01; + --ionic-color-pumpkin-1200-rgb: 33, 12, 1; + --ionic-color-orange-100: #fff1ea; + --ionic-color-orange-100-rgb: 255, 241, 234; + --ionic-color-orange-200: #ffe8db; + --ionic-color-orange-200-rgb: 255, 232, 219; + --ionic-color-orange-300: #ffcfb1; + --ionic-color-orange-300-rgb: 255, 207, 177; + --ionic-color-orange-400: #ffb37b; + --ionic-color-orange-400-rgb: 255, 179, 123; + --ionic-color-orange-500: #ff9400; + --ionic-color-orange-500-rgb: 255, 148, 0; + --ionic-color-orange-600: #e18300; + --ionic-color-orange-600-rgb: 225, 131, 0; + --ionic-color-orange-700: #c37100; + --ionic-color-orange-700-rgb: 195, 113, 0; + --ionic-color-orange-800: #a45f00; + --ionic-color-orange-800-rgb: 164, 95, 0; + --ionic-color-orange-900: #844d00; + --ionic-color-orange-900-rgb: 132, 77, 0; + --ionic-color-orange-1000: #633a00; + --ionic-color-orange-1000-rgb: 99, 58, 0; + --ionic-color-orange-1100: #422700; + --ionic-color-orange-1100-rgb: 66, 39, 0; + --ionic-color-orange-1200: #221400; + --ionic-color-orange-1200-rgb: 34, 20, 0; + --ionic-color-yellow-100: #fff9ea; + --ionic-color-yellow-100-rgb: 255, 249, 234; + --ionic-color-yellow-200: #fff5db; + --ionic-color-yellow-200-rgb: 255, 245, 219; + --ionic-color-yellow-300: #ffebb1; + --ionic-color-yellow-300-rgb: 255, 235, 177; + --ionic-color-yellow-400: #ffe07b; + --ionic-color-yellow-400-rgb: 255, 224, 123; + --ionic-color-yellow-500: #ffd600; + --ionic-color-yellow-500-rgb: 255, 214, 0; + --ionic-color-yellow-600: #e1bd00; + --ionic-color-yellow-600-rgb: 225, 189, 0; + --ionic-color-yellow-700: #c3a400; + --ionic-color-yellow-700-rgb: 195, 164, 0; + --ionic-color-yellow-800: #a48a00; + --ionic-color-yellow-800-rgb: 164, 138, 0; + --ionic-color-yellow-900: #846f00; + --ionic-color-yellow-900-rgb: 132, 111, 0; + --ionic-color-yellow-1000: #635300; + --ionic-color-yellow-1000-rgb: 99, 83, 0; + --ionic-color-yellow-1100: #423800; + --ionic-color-yellow-1100-rgb: 66, 56, 0; + --ionic-color-yellow-1200: #221d00; + --ionic-color-yellow-1200-rgb: 34, 29, 0; + --ionic-color-lime-100: #f3faea; + --ionic-color-lime-100-rgb: 243, 250, 234; + --ionic-color-lime-200: #eaf7db; + --ionic-color-lime-200-rgb: 234, 247, 219; + --ionic-color-lime-300: #d3efb2; + --ionic-color-lime-300-rgb: 211, 239, 178; + --ionic-color-lime-400: #bbe77d; + --ionic-color-lime-400-rgb: 187, 231, 125; + --ionic-color-lime-500: #a0df18; + --ionic-color-lime-500-rgb: 160, 223, 24; + --ionic-color-lime-600: #8dc515; + --ionic-color-lime-600-rgb: 141, 197, 21; + --ionic-color-lime-700: #7aab12; + --ionic-color-lime-700-rgb: 122, 171, 18; + --ionic-color-lime-800: #678f0f; + --ionic-color-lime-800-rgb: 103, 143, 15; + --ionic-color-lime-900: #53730c; + --ionic-color-lime-900-rgb: 83, 115, 12; + --ionic-color-lime-1000: #3e5709; + --ionic-color-lime-1000-rgb: 62, 87, 9; + --ionic-color-lime-1100: #2a3a06; + --ionic-color-lime-1100-rgb: 42, 58, 6; + --ionic-color-lime-1200: #151e03; + --ionic-color-lime-1200-rgb: 21, 30, 3; + --ionic-color-green-100: #ebf9ec; + --ionic-color-green-100-rgb: 235, 249, 236; + --ionic-color-green-200: #dcf5de; + --ionic-color-green-200-rgb: 220, 245, 222; + --ionic-color-green-300: #b3ebb7; + --ionic-color-green-300-rgb: 179, 235, 183; + --ionic-color-green-400: #7fe089; + --ionic-color-green-400-rgb: 127, 224, 137; + --ionic-color-green-500: #23d643; + --ionic-color-green-500-rgb: 35, 214, 67; + --ionic-color-green-600: #1fbd3b; + --ionic-color-green-600-rgb: 31, 189, 59; + --ionic-color-green-700: #1ba433; + --ionic-color-green-700-rgb: 27, 164, 51; + --ionic-color-green-800: #178a2b; + --ionic-color-green-800-rgb: 23, 138, 43; + --ionic-color-green-900: #126f23; + --ionic-color-green-900-rgb: 18, 111, 35; + --ionic-color-green-1000: #0e531a; + --ionic-color-green-1000-rgb: 14, 83, 26; + --ionic-color-green-1100: #093811; + --ionic-color-green-1100-rgb: 9, 56, 17; + --ionic-color-green-1200: #051d09; + --ionic-color-green-1200-rgb: 5, 29, 9; + --ionic-color-teal-100: #eaf8f5; + --ionic-color-teal-100-rgb: 234, 248, 245; + --ionic-color-teal-200: #dbf3ee; + --ionic-color-teal-200-rgb: 219, 243, 238; + --ionic-color-teal-300: #b1e7dd; + --ionic-color-teal-300-rgb: 177, 231, 221; + --ionic-color-teal-400: #7bdbca; + --ionic-color-teal-400-rgb: 123, 219, 202; + --ionic-color-teal-500: #00cfb7; + --ionic-color-teal-500-rgb: 0, 207, 183; + --ionic-color-teal-600: #00b7a2; + --ionic-color-teal-600-rgb: 0, 183, 162; + --ionic-color-teal-700: #009e8c; + --ionic-color-teal-700-rgb: 0, 158, 140; + --ionic-color-teal-800: #008576; + --ionic-color-teal-800-rgb: 0, 133, 118; + --ionic-color-teal-900: #006b5f; + --ionic-color-teal-900-rgb: 0, 107, 95; + --ionic-color-teal-1000: #005147; + --ionic-color-teal-1000-rgb: 0, 81, 71; + --ionic-color-teal-1100: #003630; + --ionic-color-teal-1100-rgb: 0, 54, 48; + --ionic-color-teal-1200: #001c19; + --ionic-color-teal-1200-rgb: 0, 28, 25; + --ionic-color-aqua-100: #ebf9fe; + --ionic-color-aqua-100-rgb: 235, 249, 254; + --ionic-color-aqua-200: #dcf4fd; + --ionic-color-aqua-200-rgb: 220, 244, 253; + --ionic-color-aqua-300: #b3e9fc; + --ionic-color-aqua-300-rgb: 179, 233, 252; + --ionic-color-aqua-400: #80defa; + --ionic-color-aqua-400-rgb: 128, 222, 250; + --ionic-color-aqua-500: #27d3f9; + --ionic-color-aqua-500-rgb: 39, 211, 249; + --ionic-color-aqua-600: #22bbdc; + --ionic-color-aqua-600-rgb: 34, 187, 220; + --ionic-color-aqua-700: #1ea2bf; + --ionic-color-aqua-700-rgb: 30, 162, 191; + --ionic-color-aqua-800: #1988a0; + --ionic-color-aqua-800-rgb: 25, 136, 160; + --ionic-color-aqua-900: #146d81; + --ionic-color-aqua-900-rgb: 20, 109, 129; + --ionic-color-aqua-1000: #0f5261; + --ionic-color-aqua-1000-rgb: 15, 82, 97; + --ionic-color-aqua-1100: #0a3741; + --ionic-color-aqua-1100-rgb: 10, 55, 65; + --ionic-color-aqua-1200: #051c21; + --ionic-color-aqua-1200-rgb: 5, 28, 33; + --ionic-color-blue-100: #f2f4fd; + --ionic-color-blue-100-rgb: 242, 244, 253; + --ionic-color-blue-200: #e9ecfc; + --ionic-color-blue-200-rgb: 233, 236, 252; + --ionic-color-blue-300: #d0d7fa; + --ionic-color-blue-300-rgb: 208, 215, 250; + --ionic-color-blue-400: #b5c0f7; + --ionic-color-blue-400-rgb: 181, 192, 247; + --ionic-color-blue-500: #94a5f4; + --ionic-color-blue-500-rgb: 148, 165, 244; + --ionic-color-blue-600: #6986f2; + --ionic-color-blue-600-rgb: 105, 134, 242; + --ionic-color-blue-700: #105cef; + --ionic-color-blue-700-rgb: 16, 92, 239; + --ionic-color-blue-800: #0f54da; + --ionic-color-blue-800-rgb: 15, 84, 218; + --ionic-color-blue-900: #0d4bc3; + --ionic-color-blue-900-rgb: 13, 75, 195; + --ionic-color-blue-1000: #0b41a9; + --ionic-color-blue-1000-rgb: 11, 65, 169; + --ionic-color-blue-1100: #09358a; + --ionic-color-blue-1100-rgb: 9, 53, 138; + --ionic-color-blue-1200: #072561; + --ionic-color-blue-1200-rgb: 7, 37, 97; + --ionic-color-indigo-100: #f3f2fb; + --ionic-color-indigo-100-rgb: 243, 242, 251; + --ionic-color-indigo-200: #eae9f9; + --ionic-color-indigo-200-rgb: 234, 233, 249; + --ionic-color-indigo-300: #d3d1f2; + --ionic-color-indigo-300-rgb: 211, 209, 242; + --ionic-color-indigo-400: #bab5eb; + --ionic-color-indigo-400-rgb: 186, 181, 235; + --ionic-color-indigo-500: #9d95e4; + --ionic-color-indigo-500-rgb: 157, 149, 228; + --ionic-color-indigo-600: #786bdd; + --ionic-color-indigo-600-rgb: 120, 107, 221; + --ionic-color-indigo-700: #411bd5; + --ionic-color-indigo-700-rgb: 65, 27, 213; + --ionic-color-indigo-800: #3b19c3; + --ionic-color-indigo-800-rgb: 59, 25, 195; + --ionic-color-indigo-900: #3516ae; + --ionic-color-indigo-900-rgb: 53, 22, 174; + --ionic-color-indigo-1000: #2e1397; + --ionic-color-indigo-1000-rgb: 46, 19, 151; + --ionic-color-indigo-1100: #26107b; + --ionic-color-indigo-1100-rgb: 38, 16, 123; + --ionic-color-indigo-1200: #1a0b57; + --ionic-color-indigo-1200-rgb: 26, 11, 87; + --ionic-color-violet-100: #f5f2fe; + --ionic-color-violet-100-rgb: 245, 242, 254; + --ionic-color-violet-200: #eee9fd; + --ionic-color-violet-200-rgb: 238, 233, 253; + --ionic-color-violet-300: #dcd1fb; + --ionic-color-violet-300-rgb: 220, 209, 251; + --ionic-color-violet-400: #c9b6f9; + --ionic-color-violet-400-rgb: 201, 182, 249; + --ionic-color-violet-500: #b396f6; + --ionic-color-violet-500-rgb: 179, 150, 246; + --ionic-color-violet-600: #9a6cf4; + --ionic-color-violet-600-rgb: 154, 108, 244; + --ionic-color-violet-700: #7c20f2; + --ionic-color-violet-700-rgb: 124, 32, 242; + --ionic-color-violet-800: #711ddd; + --ionic-color-violet-800-rgb: 113, 29, 221; + --ionic-color-violet-900: #651ac5; + --ionic-color-violet-900-rgb: 101, 26, 197; + --ionic-color-violet-1000: #5817ab; + --ionic-color-violet-1000-rgb: 88, 23, 171; + --ionic-color-violet-1100: #48128c; + --ionic-color-violet-1100-rgb: 72, 18, 140; + --ionic-color-violet-1200: #330d63; + --ionic-color-violet-1200-rgb: 51, 13, 99; + --ionic-color-purple-100: #f9f3fe; + --ionic-color-purple-100-rgb: 249, 243, 254; + --ionic-color-purple-200: #f5eafd; + --ionic-color-purple-200-rgb: 245, 234, 253; + --ionic-color-purple-300: #e9d3fa; + --ionic-color-purple-300-rgb: 233, 211, 250; + --ionic-color-purple-400: #deb9f8; + --ionic-color-purple-400-rgb: 222, 185, 248; + --ionic-color-purple-500: #d29bf6; + --ionic-color-purple-500-rgb: 210, 155, 246; + --ionic-color-purple-600: #c575f3; + --ionic-color-purple-600-rgb: 197, 117, 243; + --ionic-color-purple-700: #b73cf1; + --ionic-color-purple-700-rgb: 183, 60, 241; + --ionic-color-purple-800: #a737dc; + --ionic-color-purple-800-rgb: 167, 55, 220; + --ionic-color-purple-900: #9531c5; + --ionic-color-purple-900-rgb: 149, 49, 197; + --ionic-color-purple-1000: #812aaa; + --ionic-color-purple-1000-rgb: 129, 42, 170; + --ionic-color-purple-1100: #6a238b; + --ionic-color-purple-1100-rgb: 106, 35, 139; + --ionic-color-purple-1200: #4b1862; + --ionic-color-purple-1200-rgb: 75, 24, 98; + --ionic-color-magenta-100: #fdf3fb; + --ionic-color-magenta-100-rgb: 253, 243, 251; + --ionic-color-magenta-200: #fcebf8; + --ionic-color-magenta-200-rgb: 252, 235, 248; + --ionic-color-magenta-300: #f9d4f1; + --ionic-color-magenta-300-rgb: 249, 212, 241; + --ionic-color-magenta-400: #f6bcea; + --ionic-color-magenta-400-rgb: 246, 188, 234; + --ionic-color-magenta-500: #f39fe3; + --ionic-color-magenta-500-rgb: 243, 159, 227; + --ionic-color-magenta-600: #f07cdb; + --ionic-color-magenta-600-rgb: 240, 124, 219; + --ionic-color-magenta-700: #ed4ad3; + --ionic-color-magenta-700-rgb: 237, 74, 211; + --ionic-color-magenta-800: #d844c1; + --ionic-color-magenta-800-rgb: 216, 68, 193; + --ionic-color-magenta-900: #c13cac; + --ionic-color-magenta-900-rgb: 193, 60, 172; + --ionic-color-magenta-1000: #a83495; + --ionic-color-magenta-1000-rgb: 168, 52, 149; + --ionic-color-magenta-1100: #892b7a; + --ionic-color-magenta-1100-rgb: 137, 43, 122; + --ionic-color-magenta-1200: #611e56; + --ionic-color-magenta-1200-rgb: 97, 30, 86; + --ionic-color-pink-100: #fef3f5; + --ionic-color-pink-100-rgb: 254, 243, 245; + --ionic-color-pink-200: #fdeaee; + --ionic-color-pink-200-rgb: 253, 234, 238; + --ionic-color-pink-300: #fad3dc; + --ionic-color-pink-300-rgb: 250, 211, 220; + --ionic-color-pink-400: #f8b9c9; + --ionic-color-pink-400-rgb: 248, 185, 201; + --ionic-color-pink-500: #f69bb3; + --ionic-color-pink-500-rgb: 246, 155, 179; + --ionic-color-pink-600: #f3759a; + --ionic-color-pink-600-rgb: 243, 117, 154; + --ionic-color-pink-700: #f13b7d; + --ionic-color-pink-700-rgb: 241, 59, 125; + --ionic-color-pink-800: #dc3672; + --ionic-color-pink-800-rgb: 220, 54, 114; + --ionic-color-pink-900: #c53066; + --ionic-color-pink-900-rgb: 197, 48, 102; + --ionic-color-pink-1000: #aa2a58; + --ionic-color-pink-1000-rgb: 170, 42, 88; + --ionic-color-pink-1100: #8b2248; + --ionic-color-pink-1100-rgb: 139, 34, 72; + --ionic-color-pink-1200: #621833; + --ionic-color-pink-1200-rgb: 98, 24, 51; + --ionic-color-primary-100: #f2f4fd; + --ionic-color-primary-100-rgb: 242, 244, 253; + --ionic-color-primary-200: #e9ecfc; + --ionic-color-primary-200-rgb: 233, 236, 252; + --ionic-color-primary-300: #d0d7fa; + --ionic-color-primary-300-rgb: 208, 215, 250; + --ionic-color-primary-400: #b5c0f7; + --ionic-color-primary-400-rgb: 181, 192, 247; + --ionic-color-primary-500: #94a5f4; + --ionic-color-primary-500-rgb: 148, 165, 244; + --ionic-color-primary-600: #6986f2; + --ionic-color-primary-600-rgb: 105, 134, 242; + --ionic-color-primary-700: #105cef; + --ionic-color-primary-700-rgb: 16, 92, 239; + --ionic-color-primary-800: #0f54da; + --ionic-color-primary-800-rgb: 15, 84, 218; + --ionic-color-primary-900: #0d4bc3; + --ionic-color-primary-900-rgb: 13, 75, 195; + --ionic-color-primary-1000: #0b41a9; + --ionic-color-primary-1000-rgb: 11, 65, 169; + --ionic-color-primary-1100: #09358a; + --ionic-color-primary-1100-rgb: 9, 53, 138; + --ionic-color-primary-1200: #072561; + --ionic-color-primary-1200-rgb: 7, 37, 97; + --ionic-color-primary-base: #105cef; + --ionic-color-primary-base-rgb: 16, 92, 239; + --ionic-color-info-100: #ebf9fe; + --ionic-color-info-100-rgb: 235, 249, 254; + --ionic-color-info-200: #dcf4fd; + --ionic-color-info-200-rgb: 220, 244, 253; + --ionic-color-info-300: #b3e9fc; + --ionic-color-info-300-rgb: 179, 233, 252; + --ionic-color-info-400: #80defa; + --ionic-color-info-400-rgb: 128, 222, 250; + --ionic-color-info-500: #27d3f9; + --ionic-color-info-500-rgb: 39, 211, 249; + --ionic-color-info-600: #22bbdc; + --ionic-color-info-600-rgb: 34, 187, 220; + --ionic-color-info-700: #1ea2bf; + --ionic-color-info-700-rgb: 30, 162, 191; + --ionic-color-info-800: #1988a0; + --ionic-color-info-800-rgb: 25, 136, 160; + --ionic-color-info-900: #146d81; + --ionic-color-info-900-rgb: 20, 109, 129; + --ionic-color-info-1000: #0f5261; + --ionic-color-info-1000-rgb: 15, 82, 97; + --ionic-color-info-1100: #0a3741; + --ionic-color-info-1100-rgb: 10, 55, 65; + --ionic-color-info-1200: #051c21; + --ionic-color-info-1200-rgb: 5, 28, 33; + --ionic-color-info-base: #1ea2bf; + --ionic-color-info-base-rgb: 30, 162, 191; + --ionic-color-warning-100: #fff1ea; + --ionic-color-warning-100-rgb: 255, 241, 234; + --ionic-color-warning-200: #ffe8db; + --ionic-color-warning-200-rgb: 255, 232, 219; + --ionic-color-warning-300: #ffcfb1; + --ionic-color-warning-300-rgb: 255, 207, 177; + --ionic-color-warning-400: #ffb37b; + --ionic-color-warning-400-rgb: 255, 179, 123; + --ionic-color-warning-500: #ff9400; + --ionic-color-warning-500-rgb: 255, 148, 0; + --ionic-color-warning-600: #e18300; + --ionic-color-warning-600-rgb: 225, 131, 0; + --ionic-color-warning-700: #c37100; + --ionic-color-warning-700-rgb: 195, 113, 0; + --ionic-color-warning-800: #a45f00; + --ionic-color-warning-800-rgb: 164, 95, 0; + --ionic-color-warning-900: #844d00; + --ionic-color-warning-900-rgb: 132, 77, 0; + --ionic-color-warning-1000: #633a00; + --ionic-color-warning-1000-rgb: 99, 58, 0; + --ionic-color-warning-1100: #422700; + --ionic-color-warning-1100-rgb: 66, 39, 0; + --ionic-color-warning-1200: #221400; + --ionic-color-warning-1200-rgb: 34, 20, 0; + --ionic-color-warning-base: #c37100; + --ionic-color-warning-base-rgb: 195, 113, 0; + --ionic-color-danger-100: #feeded; + --ionic-color-danger-100-rgb: 254, 237, 237; + --ionic-color-danger-200: #fde1e1; + --ionic-color-danger-200-rgb: 253, 225, 225; + --ionic-color-danger-300: #fcc1c1; + --ionic-color-danger-300-rgb: 252, 193, 193; + --ionic-color-danger-400: #faa1a1; + --ionic-color-danger-400-rgb: 250, 161, 161; + --ionic-color-danger-500: #f97d7d; + --ionic-color-danger-500-rgb: 249, 125, 125; + --ionic-color-danger-600: #f85151; + --ionic-color-danger-600-rgb: 248, 81, 81; + --ionic-color-danger-700: #e52929; + --ionic-color-danger-700-rgb: 229, 41, 41; + --ionic-color-danger-800: #bf2222; + --ionic-color-danger-800-rgb: 191, 34, 34; + --ionic-color-danger-900: #991b1b; + --ionic-color-danger-900-rgb: 153, 27, 27; + --ionic-color-danger-1000: #761515; + --ionic-color-danger-1000-rgb: 118, 21, 21; + --ionic-color-danger-1100: #540f0f; + --ionic-color-danger-1100-rgb: 84, 15, 15; + --ionic-color-danger-1200: #330909; + --ionic-color-danger-1200-rgb: 51, 9, 9; + --ionic-color-danger-base: #e52929; + --ionic-color-danger-base-rgb: 229, 41, 41; + --ionic-color-success-100: #ebf9ec; + --ionic-color-success-100-rgb: 235, 249, 236; + --ionic-color-success-200: #dcf5de; + --ionic-color-success-200-rgb: 220, 245, 222; + --ionic-color-success-300: #b3ebb7; + --ionic-color-success-300-rgb: 179, 235, 183; + --ionic-color-success-400: #7fe089; + --ionic-color-success-400-rgb: 127, 224, 137; + --ionic-color-success-500: #23d643; + --ionic-color-success-500-rgb: 35, 214, 67; + --ionic-color-success-600: #1fbd3b; + --ionic-color-success-600-rgb: 31, 189, 59; + --ionic-color-success-700: #1ba433; + --ionic-color-success-700-rgb: 27, 164, 51; + --ionic-color-success-800: #178a2b; + --ionic-color-success-800-rgb: 23, 138, 43; + --ionic-color-success-900: #126f23; + --ionic-color-success-900-rgb: 18, 111, 35; + --ionic-color-success-1000: #0e531a; + --ionic-color-success-1000-rgb: 14, 83, 26; + --ionic-color-success-1100: #093811; + --ionic-color-success-1100-rgb: 9, 56, 17; + --ionic-color-success-1200: #051d09; + --ionic-color-success-1200-rgb: 5, 29, 9; + --ionic-color-success-base: #1ba433; + --ionic-color-success-base-rgb: 27, 164, 51; + --ionic-z-index-0: 0; + --ionic-z-index-1: 100; + --ionic-z-index-2: 200; + --ionic-z-index-3: 300; + --ionic-z-index-4: 400; + --ionic-z-index-500: 500; + --ionic-z-index-bottom: -99999; + --ionic-z-index-top: 99999; + --ionic-scale-0: 0px; + --ionic-scale-100: 4px; + --ionic-scale-150: 6px; + --ionic-scale-200: 8px; + --ionic-scale-250: 10px; + --ionic-scale-300: 12px; + --ionic-scale-400: 16px; + --ionic-scale-500: 20px; + --ionic-scale-600: 24px; + --ionic-scale-700: 28px; + --ionic-scale-800: 32px; + --ionic-scale-900: 36px; + --ionic-scale-1000: 40px; + --ionic-scale-1100: 44px; + --ionic-scale-1200: 48px; + --ionic-scale-1400: 56px; + --ionic-scale-1600: 64px; + --ionic-scale-1800: 72px; + --ionic-scale-2000: 80px; + --ionic-scale-2400: 96px; + --ionic-scale-3200: 128px; + --ionic-scale-4000: 160px; + --ionic-scale-5000: 200px; + --ionic-scale-6200: 248px; + --ionic-scale-7400: 296px; + --ionic-scale-9000: 360px; + --ionic-scale-025: 1px; + --ionic-scale-050: 2px; + --ionic-scale-075: 3px; + --ionic-font-family: "Inter", sans-serif; + --ionic-state-focus-0: none; + --ionic-state-focus-1: #9ec4fd; + --ionic-state-focus-1-rgb: 158, 196, 253; + --ionic-state-focus-2: #ffafaf; + --ionic-state-focus-2-rgb: 255, 175, 175; + --ionic-state-disabled: #ffffff99; + --ionic-state-hover: #2424240a; + --ionic-state-pressed: #24242414; } diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index ea5c51aaed..4e7db48775 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -6,101 +6,464 @@ @import "./ionic.vars"; @import "../themes/mixins"; -.ionic-color-primary-10 { - color: $ionic-color-primary-10; +.ionic-elevation-100 { + box-shadow: $ionic-elevation-100; } -.ionic-background-color-primary-10 { - background-color: $ionic-color-primary-10; +.ionic-elevation-200 { + box-shadow: $ionic-elevation-200; } -.ionic-color-primary-50 { - color: $ionic-color-primary-50; +.ionic-elevation-300 { + box-shadow: $ionic-elevation-300; } -.ionic-background-color-primary-50 { - background-color: $ionic-color-primary-50; +.ionic-elevation-400 { + box-shadow: $ionic-elevation-400; } -.ionic-color-primary-100 { - color: $ionic-color-primary-100; +.ionic-elevation-500 { + box-shadow: $ionic-elevation-500; } -.ionic-background-color-primary-100 { - background-color: $ionic-color-primary-100; +.ionic-elevation-600 { + box-shadow: $ionic-elevation-600; } -.ionic-color-primary-200 { - color: $ionic-color-primary-200; +.ionic-elevation-700 { + box-shadow: $ionic-elevation-700; } -.ionic-background-color-primary-200 { - background-color: $ionic-color-primary-200; +.ionic-elevation-800 { + box-shadow: $ionic-elevation-800; } -.ionic-color-primary-300 { - color: $ionic-color-primary-300; +.ionic-font-size-275 { + font-size: $ionic-font-size-275; } -.ionic-background-color-primary-300 { - background-color: $ionic-color-primary-300; +.ionic-font-size-300 { + font-size: $ionic-font-size-300; } -.ionic-color-primary-400 { - color: $ionic-color-primary-400; +.ionic-font-size-350 { + font-size: $ionic-font-size-350; } -.ionic-background-color-primary-400 { - background-color: $ionic-color-primary-400; +.ionic-font-size-400 { + font-size: $ionic-font-size-400; } -.ionic-color-primary-500 { - color: $ionic-color-primary-500; +.ionic-font-size-450 { + font-size: $ionic-font-size-450; } -.ionic-background-color-primary-500 { - background-color: $ionic-color-primary-500; +.ionic-font-size-500 { + font-size: $ionic-font-size-500; } -.ionic-color-primary-600 { - color: $ionic-color-primary-600; +.ionic-font-size-550 { + font-size: $ionic-font-size-550; } -.ionic-background-color-primary-600 { - background-color: $ionic-color-primary-600; +.ionic-font-size-600 { + font-size: $ionic-font-size-600; } -.ionic-color-primary-700 { - color: $ionic-color-primary-700; +.ionic-font-size-650 { + font-size: $ionic-font-size-650; } -.ionic-background-color-primary-700 { - background-color: $ionic-color-primary-700; +.ionic-font-size-700 { + font-size: $ionic-font-size-700; } -.ionic-color-primary-800 { - color: $ionic-color-primary-800; +.ionic-font-size-800 { + font-size: $ionic-font-size-800; } -.ionic-background-color-primary-800 { - background-color: $ionic-color-primary-800; +.ionic-font-size-900 { + font-size: $ionic-font-size-900; } -.ionic-color-primary-900 { - color: $ionic-color-primary-900; +.ionic-font-weight-thin { + font-weight: $ionic-font-weight-thin; } -.ionic-background-color-primary-900 { - background-color: $ionic-color-primary-900; +.ionic-font-weight-extra-light { + font-weight: $ionic-font-weight-extra-light; } -.ionic-color-primary { - color: $ionic-color-primary; +.ionic-font-weight-light { + font-weight: $ionic-font-weight-light; } -.ionic-background-color-primary { - background-color: $ionic-color-primary; +.ionic-font-weight-regular { + font-weight: $ionic-font-weight-regular; } -.ionic-color-secondary { - color: $ionic-color-secondary; +.ionic-font-weight-medium { + font-weight: $ionic-font-weight-medium; } -.ionic-background-color-secondary { - background-color: $ionic-color-secondary; +.ionic-font-weight-semi-bold { + font-weight: $ionic-font-weight-semi-bold; } -.ionic-color-neutral-0 { - color: $ionic-color-neutral-0; +.ionic-font-weight-bold { + font-weight: $ionic-font-weight-bold; } -.ionic-background-color-neutral-0 { - background-color: $ionic-color-neutral-0; +.ionic-font-weight-extra-bold { + font-weight: $ionic-font-weight-extra-bold; } -.ionic-color-neutral-10 { - color: $ionic-color-neutral-10; +.ionic-font-weight-black { + font-weight: $ionic-font-weight-black; } -.ionic-background-color-neutral-10 { - background-color: $ionic-color-neutral-10; +.ionic-letter-spacing-0 { + letter-spacing: $ionic-letter-spacing-0; } -.ionic-color-neutral-50 { - color: $ionic-color-neutral-50; +.ionic-letter-spacing-1 { + letter-spacing: $ionic-letter-spacing-1; } -.ionic-background-color-neutral-50 { - background-color: $ionic-color-neutral-50; +.ionic-letter-spacing-2 { + letter-spacing: $ionic-letter-spacing-2; +} +.ionic-line-height-300 { + line-height: $ionic-line-height-300; +} +.ionic-line-height-400 { + line-height: $ionic-line-height-400; +} +.ionic-line-height-500 { + line-height: $ionic-line-height-500; +} +.ionic-line-height-600 { + line-height: $ionic-line-height-600; +} +.ionic-line-height-700 { + line-height: $ionic-line-height-700; +} +.ionic-line-height-800 { + line-height: $ionic-line-height-800; +} +.ionic-line-height-900 { + line-height: $ionic-line-height-900; +} +.ionic-line-height-1100 { + line-height: $ionic-line-height-1100; +} +.ionic-line-height-1200 { + line-height: $ionic-line-height-1200; +} +.ionic-line-height-full { + line-height: $ionic-line-height-full; +} + +.ionic-margin-space-0 { + --margin-start: #{$ionic-space-0}; + --margin-end: #{$ionic-space-0}; + --margin-top: #{$ionic-space-0}; + --margin-bottom: #{$ionic-space-0}; + + @include margin($ionic-space-0); +} + +.ionic-padding-space-0 { + --padding-start: #{$ionic-space-0}; + --padding-end: #{$ionic-space-0}; + --padding-top: #{$ionic-space-0}; + --padding-bottom: #{$ionic-space-0}; + + @include padding($ionic-space-0); +} + +.ionic-margin-space-100 { + --margin-start: #{$ionic-space-100}; + --margin-end: #{$ionic-space-100}; + --margin-top: #{$ionic-space-100}; + --margin-bottom: #{$ionic-space-100}; + + @include margin($ionic-space-100); +} + +.ionic-padding-space-100 { + --padding-start: #{$ionic-space-100}; + --padding-end: #{$ionic-space-100}; + --padding-top: #{$ionic-space-100}; + --padding-bottom: #{$ionic-space-100}; + + @include padding($ionic-space-100); +} + +.ionic-margin-space-150 { + --margin-start: #{$ionic-space-150}; + --margin-end: #{$ionic-space-150}; + --margin-top: #{$ionic-space-150}; + --margin-bottom: #{$ionic-space-150}; + + @include margin($ionic-space-150); +} + +.ionic-padding-space-150 { + --padding-start: #{$ionic-space-150}; + --padding-end: #{$ionic-space-150}; + --padding-top: #{$ionic-space-150}; + --padding-bottom: #{$ionic-space-150}; + + @include padding($ionic-space-150); +} + +.ionic-margin-space-200 { + --margin-start: #{$ionic-space-200}; + --margin-end: #{$ionic-space-200}; + --margin-top: #{$ionic-space-200}; + --margin-bottom: #{$ionic-space-200}; + + @include margin($ionic-space-200); +} + +.ionic-padding-space-200 { + --padding-start: #{$ionic-space-200}; + --padding-end: #{$ionic-space-200}; + --padding-top: #{$ionic-space-200}; + --padding-bottom: #{$ionic-space-200}; + + @include padding($ionic-space-200); +} + +.ionic-margin-space-250 { + --margin-start: #{$ionic-space-250}; + --margin-end: #{$ionic-space-250}; + --margin-top: #{$ionic-space-250}; + --margin-bottom: #{$ionic-space-250}; + + @include margin($ionic-space-250); +} + +.ionic-padding-space-250 { + --padding-start: #{$ionic-space-250}; + --padding-end: #{$ionic-space-250}; + --padding-top: #{$ionic-space-250}; + --padding-bottom: #{$ionic-space-250}; + + @include padding($ionic-space-250); +} + +.ionic-margin-space-300 { + --margin-start: #{$ionic-space-300}; + --margin-end: #{$ionic-space-300}; + --margin-top: #{$ionic-space-300}; + --margin-bottom: #{$ionic-space-300}; + + @include margin($ionic-space-300); +} + +.ionic-padding-space-300 { + --padding-start: #{$ionic-space-300}; + --padding-end: #{$ionic-space-300}; + --padding-top: #{$ionic-space-300}; + --padding-bottom: #{$ionic-space-300}; + + @include padding($ionic-space-300); +} + +.ionic-margin-space-400 { + --margin-start: #{$ionic-space-400}; + --margin-end: #{$ionic-space-400}; + --margin-top: #{$ionic-space-400}; + --margin-bottom: #{$ionic-space-400}; + + @include margin($ionic-space-400); +} + +.ionic-padding-space-400 { + --padding-start: #{$ionic-space-400}; + --padding-end: #{$ionic-space-400}; + --padding-top: #{$ionic-space-400}; + --padding-bottom: #{$ionic-space-400}; + + @include padding($ionic-space-400); +} + +.ionic-margin-space-500 { + --margin-start: #{$ionic-space-500}; + --margin-end: #{$ionic-space-500}; + --margin-top: #{$ionic-space-500}; + --margin-bottom: #{$ionic-space-500}; + + @include margin($ionic-space-500); +} + +.ionic-padding-space-500 { + --padding-start: #{$ionic-space-500}; + --padding-end: #{$ionic-space-500}; + --padding-top: #{$ionic-space-500}; + --padding-bottom: #{$ionic-space-500}; + + @include padding($ionic-space-500); +} + +.ionic-margin-space-600 { + --margin-start: #{$ionic-space-600}; + --margin-end: #{$ionic-space-600}; + --margin-top: #{$ionic-space-600}; + --margin-bottom: #{$ionic-space-600}; + + @include margin($ionic-space-600); +} + +.ionic-padding-space-600 { + --padding-start: #{$ionic-space-600}; + --padding-end: #{$ionic-space-600}; + --padding-top: #{$ionic-space-600}; + --padding-bottom: #{$ionic-space-600}; + + @include padding($ionic-space-600); +} + +.ionic-margin-space-700 { + --margin-start: #{$ionic-space-700}; + --margin-end: #{$ionic-space-700}; + --margin-top: #{$ionic-space-700}; + --margin-bottom: #{$ionic-space-700}; + + @include margin($ionic-space-700); +} + +.ionic-padding-space-700 { + --padding-start: #{$ionic-space-700}; + --padding-end: #{$ionic-space-700}; + --padding-top: #{$ionic-space-700}; + --padding-bottom: #{$ionic-space-700}; + + @include padding($ionic-space-700); +} + +.ionic-margin-space-800 { + --margin-start: #{$ionic-space-800}; + --margin-end: #{$ionic-space-800}; + --margin-top: #{$ionic-space-800}; + --margin-bottom: #{$ionic-space-800}; + + @include margin($ionic-space-800); +} + +.ionic-padding-space-800 { + --padding-start: #{$ionic-space-800}; + --padding-end: #{$ionic-space-800}; + --padding-top: #{$ionic-space-800}; + --padding-bottom: #{$ionic-space-800}; + + @include padding($ionic-space-800); +} + +.ionic-margin-space-900 { + --margin-start: #{$ionic-space-900}; + --margin-end: #{$ionic-space-900}; + --margin-top: #{$ionic-space-900}; + --margin-bottom: #{$ionic-space-900}; + + @include margin($ionic-space-900); +} + +.ionic-padding-space-900 { + --padding-start: #{$ionic-space-900}; + --padding-end: #{$ionic-space-900}; + --padding-top: #{$ionic-space-900}; + --padding-bottom: #{$ionic-space-900}; + + @include padding($ionic-space-900); +} + +.ionic-margin-space-1000 { + --margin-start: #{$ionic-space-1000}; + --margin-end: #{$ionic-space-1000}; + --margin-top: #{$ionic-space-1000}; + --margin-bottom: #{$ionic-space-1000}; + + @include margin($ionic-space-1000); +} + +.ionic-padding-space-1000 { + --padding-start: #{$ionic-space-1000}; + --padding-end: #{$ionic-space-1000}; + --padding-top: #{$ionic-space-1000}; + --padding-bottom: #{$ionic-space-1000}; + + @include padding($ionic-space-1000); +} + +.ionic-margin-space-1200 { + --margin-start: #{$ionic-space-1200}; + --margin-end: #{$ionic-space-1200}; + --margin-top: #{$ionic-space-1200}; + --margin-bottom: #{$ionic-space-1200}; + + @include margin($ionic-space-1200); +} + +.ionic-padding-space-1200 { + --padding-start: #{$ionic-space-1200}; + --padding-end: #{$ionic-space-1200}; + --padding-top: #{$ionic-space-1200}; + --padding-bottom: #{$ionic-space-1200}; + + @include padding($ionic-space-1200); +} + +.ionic-margin-space-050 { + --margin-start: #{$ionic-space-050}; + --margin-end: #{$ionic-space-050}; + --margin-top: #{$ionic-space-050}; + --margin-bottom: #{$ionic-space-050}; + + @include margin($ionic-space-050); +} + +.ionic-padding-space-050 { + --padding-start: #{$ionic-space-050}; + --padding-end: #{$ionic-space-050}; + --padding-top: #{$ionic-space-050}; + --padding-bottom: #{$ionic-space-050}; + + @include padding($ionic-space-050); +} +.ionic-border-radius-0 { + border-radius: $ionic-border-radius-0; +} +.ionic-border-radius-100 { + border-radius: $ionic-border-radius-100; +} +.ionic-border-radius-200 { + border-radius: $ionic-border-radius-200; +} +.ionic-border-radius-300 { + border-radius: $ionic-border-radius-300; +} +.ionic-border-radius-400 { + border-radius: $ionic-border-radius-400; +} +.ionic-border-radius-800 { + border-radius: $ionic-border-radius-800; +} +.ionic-border-radius-1000 { + border-radius: $ionic-border-radius-1000; +} +.ionic-border-radius-050 { + border-radius: $ionic-border-radius-050; +} +.ionic-border-radius-full { + border-radius: $ionic-border-radius-full; +} +.ionic-border-size-0 { + border-width: $ionic-border-size-0; +} +.ionic-border-size-025 { + border-width: $ionic-border-size-025; +} +.ionic-border-size-050 { + border-width: $ionic-border-size-050; +} +.ionic-border-size-075 { + border-width: $ionic-border-size-075; +} +.ionic-border-style-none { + border-style: $ionic-border-style-none; +} +.ionic-border-style-solid { + border-style: $ionic-border-style-solid; +} +.ionic-border-style-dashed { + border-style: $ionic-border-style-dashed; +} +.ionic-border-style-dotted { + border-style: $ionic-border-style-dotted; +} +.ionic-color-base-white { + color: $ionic-color-base-white; +} +.ionic-background-color-base-white { + background-color: $ionic-color-base-white; +} +.ionic-color-base-black { + color: $ionic-color-base-black; +} +.ionic-background-color-base-black { + background-color: $ionic-color-base-black; } .ionic-color-neutral-100 { color: $ionic-color-neutral-100; @@ -156,233 +519,1109 @@ .ionic-background-color-neutral-900 { background-color: $ionic-color-neutral-900; } -.ionic-color-error-10 { - color: $ionic-color-error-10; +.ionic-color-neutral-1000 { + color: $ionic-color-neutral-1000; } -.ionic-background-color-error-10 { - background-color: $ionic-color-error-10; +.ionic-background-color-neutral-1000 { + background-color: $ionic-color-neutral-1000; } -.ionic-color-error-50 { - color: $ionic-color-error-50; +.ionic-color-neutral-1100 { + color: $ionic-color-neutral-1100; } -.ionic-background-color-error-50 { - background-color: $ionic-color-error-50; +.ionic-background-color-neutral-1100 { + background-color: $ionic-color-neutral-1100; } -.ionic-color-error-100 { - color: $ionic-color-error-100; +.ionic-color-neutral-1200 { + color: $ionic-color-neutral-1200; } -.ionic-background-color-error-100 { - background-color: $ionic-color-error-100; +.ionic-background-color-neutral-1200 { + background-color: $ionic-color-neutral-1200; } -.ionic-color-error-200 { - color: $ionic-color-error-200; +.ionic-color-red-100 { + color: $ionic-color-red-100; } -.ionic-background-color-error-200 { - background-color: $ionic-color-error-200; +.ionic-background-color-red-100 { + background-color: $ionic-color-red-100; } -.ionic-color-error-300 { - color: $ionic-color-error-300; +.ionic-color-red-200 { + color: $ionic-color-red-200; } -.ionic-background-color-error-300 { - background-color: $ionic-color-error-300; +.ionic-background-color-red-200 { + background-color: $ionic-color-red-200; } -.ionic-color-error-400 { - color: $ionic-color-error-400; +.ionic-color-red-300 { + color: $ionic-color-red-300; } -.ionic-background-color-error-400 { - background-color: $ionic-color-error-400; +.ionic-background-color-red-300 { + background-color: $ionic-color-red-300; } -.ionic-color-error-500 { - color: $ionic-color-error-500; +.ionic-color-red-400 { + color: $ionic-color-red-400; } -.ionic-background-color-error-500 { - background-color: $ionic-color-error-500; +.ionic-background-color-red-400 { + background-color: $ionic-color-red-400; } -.ionic-color-error-600 { - color: $ionic-color-error-600; +.ionic-color-red-500 { + color: $ionic-color-red-500; } -.ionic-background-color-error-600 { - background-color: $ionic-color-error-600; +.ionic-background-color-red-500 { + background-color: $ionic-color-red-500; } -.ionic-color-error-700 { - color: $ionic-color-error-700; +.ionic-color-red-600 { + color: $ionic-color-red-600; } -.ionic-background-color-error-700 { - background-color: $ionic-color-error-700; +.ionic-background-color-red-600 { + background-color: $ionic-color-red-600; } -.ionic-color-error-800 { - color: $ionic-color-error-800; +.ionic-color-red-700 { + color: $ionic-color-red-700; } -.ionic-background-color-error-800 { - background-color: $ionic-color-error-800; +.ionic-background-color-red-700 { + background-color: $ionic-color-red-700; } -.ionic-color-error-900 { - color: $ionic-color-error-900; +.ionic-color-red-800 { + color: $ionic-color-red-800; } -.ionic-background-color-error-900 { - background-color: $ionic-color-error-900; +.ionic-background-color-red-800 { + background-color: $ionic-color-red-800; } -.ionic-color-error { - color: $ionic-color-error; +.ionic-color-red-900 { + color: $ionic-color-red-900; } -.ionic-background-color-error { - background-color: $ionic-color-error; +.ionic-background-color-red-900 { + background-color: $ionic-color-red-900; } -.ionic-color-warning-10 { - color: $ionic-color-warning-10; +.ionic-color-red-1000 { + color: $ionic-color-red-1000; } -.ionic-background-color-warning-10 { - background-color: $ionic-color-warning-10; +.ionic-background-color-red-1000 { + background-color: $ionic-color-red-1000; } -.ionic-color-warning-50 { - color: $ionic-color-warning-50; +.ionic-color-red-1100 { + color: $ionic-color-red-1100; } -.ionic-background-color-warning-50 { - background-color: $ionic-color-warning-50; +.ionic-background-color-red-1100 { + background-color: $ionic-color-red-1100; } -.ionic-color-warning-100 { - color: $ionic-color-warning-100; +.ionic-color-red-1200 { + color: $ionic-color-red-1200; } -.ionic-background-color-warning-100 { - background-color: $ionic-color-warning-100; +.ionic-background-color-red-1200 { + background-color: $ionic-color-red-1200; } -.ionic-color-warning-200 { - color: $ionic-color-warning-200; +.ionic-color-pumpkin-100 { + color: $ionic-color-pumpkin-100; } -.ionic-background-color-warning-200 { - background-color: $ionic-color-warning-200; +.ionic-background-color-pumpkin-100 { + background-color: $ionic-color-pumpkin-100; } -.ionic-color-warning-300 { - color: $ionic-color-warning-300; +.ionic-color-pumpkin-200 { + color: $ionic-color-pumpkin-200; } -.ionic-background-color-warning-300 { - background-color: $ionic-color-warning-300; +.ionic-background-color-pumpkin-200 { + background-color: $ionic-color-pumpkin-200; } -.ionic-color-warning-400 { - color: $ionic-color-warning-400; +.ionic-color-pumpkin-300 { + color: $ionic-color-pumpkin-300; } -.ionic-background-color-warning-400 { - background-color: $ionic-color-warning-400; +.ionic-background-color-pumpkin-300 { + background-color: $ionic-color-pumpkin-300; } -.ionic-color-warning-500 { - color: $ionic-color-warning-500; +.ionic-color-pumpkin-400 { + color: $ionic-color-pumpkin-400; } -.ionic-background-color-warning-500 { - background-color: $ionic-color-warning-500; +.ionic-background-color-pumpkin-400 { + background-color: $ionic-color-pumpkin-400; } -.ionic-color-warning-600 { - color: $ionic-color-warning-600; +.ionic-color-pumpkin-500 { + color: $ionic-color-pumpkin-500; } -.ionic-background-color-warning-600 { - background-color: $ionic-color-warning-600; +.ionic-background-color-pumpkin-500 { + background-color: $ionic-color-pumpkin-500; } -.ionic-color-warning-700 { - color: $ionic-color-warning-700; +.ionic-color-pumpkin-600 { + color: $ionic-color-pumpkin-600; } -.ionic-background-color-warning-700 { - background-color: $ionic-color-warning-700; +.ionic-background-color-pumpkin-600 { + background-color: $ionic-color-pumpkin-600; } -.ionic-color-warning-800 { - color: $ionic-color-warning-800; +.ionic-color-pumpkin-700 { + color: $ionic-color-pumpkin-700; } -.ionic-background-color-warning-800 { - background-color: $ionic-color-warning-800; +.ionic-background-color-pumpkin-700 { + background-color: $ionic-color-pumpkin-700; } -.ionic-color-warning-900 { - color: $ionic-color-warning-900; +.ionic-color-pumpkin-800 { + color: $ionic-color-pumpkin-800; } -.ionic-background-color-warning-900 { - background-color: $ionic-color-warning-900; +.ionic-background-color-pumpkin-800 { + background-color: $ionic-color-pumpkin-800; } -.ionic-color-warning { - color: $ionic-color-warning; +.ionic-color-pumpkin-900 { + color: $ionic-color-pumpkin-900; } -.ionic-background-color-warning { - background-color: $ionic-color-warning; +.ionic-background-color-pumpkin-900 { + background-color: $ionic-color-pumpkin-900; } -.ionic-color-success-10 { - color: $ionic-color-success-10; +.ionic-color-pumpkin-1000 { + color: $ionic-color-pumpkin-1000; } -.ionic-background-color-success-10 { - background-color: $ionic-color-success-10; +.ionic-background-color-pumpkin-1000 { + background-color: $ionic-color-pumpkin-1000; } -.ionic-color-success-50 { - color: $ionic-color-success-50; +.ionic-color-pumpkin-1100 { + color: $ionic-color-pumpkin-1100; } -.ionic-background-color-success-50 { - background-color: $ionic-color-success-50; +.ionic-background-color-pumpkin-1100 { + background-color: $ionic-color-pumpkin-1100; } -.ionic-color-success-100 { - color: $ionic-color-success-100; +.ionic-color-pumpkin-1200 { + color: $ionic-color-pumpkin-1200; } -.ionic-background-color-success-100 { - background-color: $ionic-color-success-100; +.ionic-background-color-pumpkin-1200 { + background-color: $ionic-color-pumpkin-1200; } -.ionic-color-success-200 { - color: $ionic-color-success-200; +.ionic-color-orange-100 { + color: $ionic-color-orange-100; } -.ionic-background-color-success-200 { - background-color: $ionic-color-success-200; +.ionic-background-color-orange-100 { + background-color: $ionic-color-orange-100; } -.ionic-color-success-300 { - color: $ionic-color-success-300; +.ionic-color-orange-200 { + color: $ionic-color-orange-200; } -.ionic-background-color-success-300 { - background-color: $ionic-color-success-300; +.ionic-background-color-orange-200 { + background-color: $ionic-color-orange-200; } -.ionic-color-success-400 { - color: $ionic-color-success-400; +.ionic-color-orange-300 { + color: $ionic-color-orange-300; } -.ionic-background-color-success-400 { - background-color: $ionic-color-success-400; +.ionic-background-color-orange-300 { + background-color: $ionic-color-orange-300; } -.ionic-color-success-500 { - color: $ionic-color-success-500; +.ionic-color-orange-400 { + color: $ionic-color-orange-400; } -.ionic-background-color-success-500 { - background-color: $ionic-color-success-500; +.ionic-background-color-orange-400 { + background-color: $ionic-color-orange-400; } -.ionic-color-success-600 { - color: $ionic-color-success-600; +.ionic-color-orange-500 { + color: $ionic-color-orange-500; } -.ionic-background-color-success-600 { - background-color: $ionic-color-success-600; +.ionic-background-color-orange-500 { + background-color: $ionic-color-orange-500; } -.ionic-color-success-700 { - color: $ionic-color-success-700; +.ionic-color-orange-600 { + color: $ionic-color-orange-600; } -.ionic-background-color-success-700 { - background-color: $ionic-color-success-700; +.ionic-background-color-orange-600 { + background-color: $ionic-color-orange-600; } -.ionic-color-success-800 { - color: $ionic-color-success-800; +.ionic-color-orange-700 { + color: $ionic-color-orange-700; } -.ionic-background-color-success-800 { - background-color: $ionic-color-success-800; +.ionic-background-color-orange-700 { + background-color: $ionic-color-orange-700; } -.ionic-color-success-900 { - color: $ionic-color-success-900; +.ionic-color-orange-800 { + color: $ionic-color-orange-800; } -.ionic-background-color-success-900 { - background-color: $ionic-color-success-900; +.ionic-background-color-orange-800 { + background-color: $ionic-color-orange-800; } -.ionic-color-success { - color: $ionic-color-success; +.ionic-color-orange-900 { + color: $ionic-color-orange-900; } -.ionic-background-color-success { - background-color: $ionic-color-success; +.ionic-background-color-orange-900 { + background-color: $ionic-color-orange-900; } -.ionic-color-info-10 { - color: $ionic-color-info-10; +.ionic-color-orange-1000 { + color: $ionic-color-orange-1000; } -.ionic-background-color-info-10 { - background-color: $ionic-color-info-10; +.ionic-background-color-orange-1000 { + background-color: $ionic-color-orange-1000; } -.ionic-color-info-50 { - color: $ionic-color-info-50; +.ionic-color-orange-1100 { + color: $ionic-color-orange-1100; } -.ionic-background-color-info-50 { - background-color: $ionic-color-info-50; +.ionic-background-color-orange-1100 { + background-color: $ionic-color-orange-1100; +} +.ionic-color-orange-1200 { + color: $ionic-color-orange-1200; +} +.ionic-background-color-orange-1200 { + background-color: $ionic-color-orange-1200; +} +.ionic-color-yellow-100 { + color: $ionic-color-yellow-100; +} +.ionic-background-color-yellow-100 { + background-color: $ionic-color-yellow-100; +} +.ionic-color-yellow-200 { + color: $ionic-color-yellow-200; +} +.ionic-background-color-yellow-200 { + background-color: $ionic-color-yellow-200; +} +.ionic-color-yellow-300 { + color: $ionic-color-yellow-300; +} +.ionic-background-color-yellow-300 { + background-color: $ionic-color-yellow-300; +} +.ionic-color-yellow-400 { + color: $ionic-color-yellow-400; +} +.ionic-background-color-yellow-400 { + background-color: $ionic-color-yellow-400; +} +.ionic-color-yellow-500 { + color: $ionic-color-yellow-500; +} +.ionic-background-color-yellow-500 { + background-color: $ionic-color-yellow-500; +} +.ionic-color-yellow-600 { + color: $ionic-color-yellow-600; +} +.ionic-background-color-yellow-600 { + background-color: $ionic-color-yellow-600; +} +.ionic-color-yellow-700 { + color: $ionic-color-yellow-700; +} +.ionic-background-color-yellow-700 { + background-color: $ionic-color-yellow-700; +} +.ionic-color-yellow-800 { + color: $ionic-color-yellow-800; +} +.ionic-background-color-yellow-800 { + background-color: $ionic-color-yellow-800; +} +.ionic-color-yellow-900 { + color: $ionic-color-yellow-900; +} +.ionic-background-color-yellow-900 { + background-color: $ionic-color-yellow-900; +} +.ionic-color-yellow-1000 { + color: $ionic-color-yellow-1000; +} +.ionic-background-color-yellow-1000 { + background-color: $ionic-color-yellow-1000; +} +.ionic-color-yellow-1100 { + color: $ionic-color-yellow-1100; +} +.ionic-background-color-yellow-1100 { + background-color: $ionic-color-yellow-1100; +} +.ionic-color-yellow-1200 { + color: $ionic-color-yellow-1200; +} +.ionic-background-color-yellow-1200 { + background-color: $ionic-color-yellow-1200; +} +.ionic-color-lime-100 { + color: $ionic-color-lime-100; +} +.ionic-background-color-lime-100 { + background-color: $ionic-color-lime-100; +} +.ionic-color-lime-200 { + color: $ionic-color-lime-200; +} +.ionic-background-color-lime-200 { + background-color: $ionic-color-lime-200; +} +.ionic-color-lime-300 { + color: $ionic-color-lime-300; +} +.ionic-background-color-lime-300 { + background-color: $ionic-color-lime-300; +} +.ionic-color-lime-400 { + color: $ionic-color-lime-400; +} +.ionic-background-color-lime-400 { + background-color: $ionic-color-lime-400; +} +.ionic-color-lime-500 { + color: $ionic-color-lime-500; +} +.ionic-background-color-lime-500 { + background-color: $ionic-color-lime-500; +} +.ionic-color-lime-600 { + color: $ionic-color-lime-600; +} +.ionic-background-color-lime-600 { + background-color: $ionic-color-lime-600; +} +.ionic-color-lime-700 { + color: $ionic-color-lime-700; +} +.ionic-background-color-lime-700 { + background-color: $ionic-color-lime-700; +} +.ionic-color-lime-800 { + color: $ionic-color-lime-800; +} +.ionic-background-color-lime-800 { + background-color: $ionic-color-lime-800; +} +.ionic-color-lime-900 { + color: $ionic-color-lime-900; +} +.ionic-background-color-lime-900 { + background-color: $ionic-color-lime-900; +} +.ionic-color-lime-1000 { + color: $ionic-color-lime-1000; +} +.ionic-background-color-lime-1000 { + background-color: $ionic-color-lime-1000; +} +.ionic-color-lime-1100 { + color: $ionic-color-lime-1100; +} +.ionic-background-color-lime-1100 { + background-color: $ionic-color-lime-1100; +} +.ionic-color-lime-1200 { + color: $ionic-color-lime-1200; +} +.ionic-background-color-lime-1200 { + background-color: $ionic-color-lime-1200; +} +.ionic-color-green-100 { + color: $ionic-color-green-100; +} +.ionic-background-color-green-100 { + background-color: $ionic-color-green-100; +} +.ionic-color-green-200 { + color: $ionic-color-green-200; +} +.ionic-background-color-green-200 { + background-color: $ionic-color-green-200; +} +.ionic-color-green-300 { + color: $ionic-color-green-300; +} +.ionic-background-color-green-300 { + background-color: $ionic-color-green-300; +} +.ionic-color-green-400 { + color: $ionic-color-green-400; +} +.ionic-background-color-green-400 { + background-color: $ionic-color-green-400; +} +.ionic-color-green-500 { + color: $ionic-color-green-500; +} +.ionic-background-color-green-500 { + background-color: $ionic-color-green-500; +} +.ionic-color-green-600 { + color: $ionic-color-green-600; +} +.ionic-background-color-green-600 { + background-color: $ionic-color-green-600; +} +.ionic-color-green-700 { + color: $ionic-color-green-700; +} +.ionic-background-color-green-700 { + background-color: $ionic-color-green-700; +} +.ionic-color-green-800 { + color: $ionic-color-green-800; +} +.ionic-background-color-green-800 { + background-color: $ionic-color-green-800; +} +.ionic-color-green-900 { + color: $ionic-color-green-900; +} +.ionic-background-color-green-900 { + background-color: $ionic-color-green-900; +} +.ionic-color-green-1000 { + color: $ionic-color-green-1000; +} +.ionic-background-color-green-1000 { + background-color: $ionic-color-green-1000; +} +.ionic-color-green-1100 { + color: $ionic-color-green-1100; +} +.ionic-background-color-green-1100 { + background-color: $ionic-color-green-1100; +} +.ionic-color-green-1200 { + color: $ionic-color-green-1200; +} +.ionic-background-color-green-1200 { + background-color: $ionic-color-green-1200; +} +.ionic-color-teal-100 { + color: $ionic-color-teal-100; +} +.ionic-background-color-teal-100 { + background-color: $ionic-color-teal-100; +} +.ionic-color-teal-200 { + color: $ionic-color-teal-200; +} +.ionic-background-color-teal-200 { + background-color: $ionic-color-teal-200; +} +.ionic-color-teal-300 { + color: $ionic-color-teal-300; +} +.ionic-background-color-teal-300 { + background-color: $ionic-color-teal-300; +} +.ionic-color-teal-400 { + color: $ionic-color-teal-400; +} +.ionic-background-color-teal-400 { + background-color: $ionic-color-teal-400; +} +.ionic-color-teal-500 { + color: $ionic-color-teal-500; +} +.ionic-background-color-teal-500 { + background-color: $ionic-color-teal-500; +} +.ionic-color-teal-600 { + color: $ionic-color-teal-600; +} +.ionic-background-color-teal-600 { + background-color: $ionic-color-teal-600; +} +.ionic-color-teal-700 { + color: $ionic-color-teal-700; +} +.ionic-background-color-teal-700 { + background-color: $ionic-color-teal-700; +} +.ionic-color-teal-800 { + color: $ionic-color-teal-800; +} +.ionic-background-color-teal-800 { + background-color: $ionic-color-teal-800; +} +.ionic-color-teal-900 { + color: $ionic-color-teal-900; +} +.ionic-background-color-teal-900 { + background-color: $ionic-color-teal-900; +} +.ionic-color-teal-1000 { + color: $ionic-color-teal-1000; +} +.ionic-background-color-teal-1000 { + background-color: $ionic-color-teal-1000; +} +.ionic-color-teal-1100 { + color: $ionic-color-teal-1100; +} +.ionic-background-color-teal-1100 { + background-color: $ionic-color-teal-1100; +} +.ionic-color-teal-1200 { + color: $ionic-color-teal-1200; +} +.ionic-background-color-teal-1200 { + background-color: $ionic-color-teal-1200; +} +.ionic-color-aqua-100 { + color: $ionic-color-aqua-100; +} +.ionic-background-color-aqua-100 { + background-color: $ionic-color-aqua-100; +} +.ionic-color-aqua-200 { + color: $ionic-color-aqua-200; +} +.ionic-background-color-aqua-200 { + background-color: $ionic-color-aqua-200; +} +.ionic-color-aqua-300 { + color: $ionic-color-aqua-300; +} +.ionic-background-color-aqua-300 { + background-color: $ionic-color-aqua-300; +} +.ionic-color-aqua-400 { + color: $ionic-color-aqua-400; +} +.ionic-background-color-aqua-400 { + background-color: $ionic-color-aqua-400; +} +.ionic-color-aqua-500 { + color: $ionic-color-aqua-500; +} +.ionic-background-color-aqua-500 { + background-color: $ionic-color-aqua-500; +} +.ionic-color-aqua-600 { + color: $ionic-color-aqua-600; +} +.ionic-background-color-aqua-600 { + background-color: $ionic-color-aqua-600; +} +.ionic-color-aqua-700 { + color: $ionic-color-aqua-700; +} +.ionic-background-color-aqua-700 { + background-color: $ionic-color-aqua-700; +} +.ionic-color-aqua-800 { + color: $ionic-color-aqua-800; +} +.ionic-background-color-aqua-800 { + background-color: $ionic-color-aqua-800; +} +.ionic-color-aqua-900 { + color: $ionic-color-aqua-900; +} +.ionic-background-color-aqua-900 { + background-color: $ionic-color-aqua-900; +} +.ionic-color-aqua-1000 { + color: $ionic-color-aqua-1000; +} +.ionic-background-color-aqua-1000 { + background-color: $ionic-color-aqua-1000; +} +.ionic-color-aqua-1100 { + color: $ionic-color-aqua-1100; +} +.ionic-background-color-aqua-1100 { + background-color: $ionic-color-aqua-1100; +} +.ionic-color-aqua-1200 { + color: $ionic-color-aqua-1200; +} +.ionic-background-color-aqua-1200 { + background-color: $ionic-color-aqua-1200; +} +.ionic-color-blue-100 { + color: $ionic-color-blue-100; +} +.ionic-background-color-blue-100 { + background-color: $ionic-color-blue-100; +} +.ionic-color-blue-200 { + color: $ionic-color-blue-200; +} +.ionic-background-color-blue-200 { + background-color: $ionic-color-blue-200; +} +.ionic-color-blue-300 { + color: $ionic-color-blue-300; +} +.ionic-background-color-blue-300 { + background-color: $ionic-color-blue-300; +} +.ionic-color-blue-400 { + color: $ionic-color-blue-400; +} +.ionic-background-color-blue-400 { + background-color: $ionic-color-blue-400; +} +.ionic-color-blue-500 { + color: $ionic-color-blue-500; +} +.ionic-background-color-blue-500 { + background-color: $ionic-color-blue-500; +} +.ionic-color-blue-600 { + color: $ionic-color-blue-600; +} +.ionic-background-color-blue-600 { + background-color: $ionic-color-blue-600; +} +.ionic-color-blue-700 { + color: $ionic-color-blue-700; +} +.ionic-background-color-blue-700 { + background-color: $ionic-color-blue-700; +} +.ionic-color-blue-800 { + color: $ionic-color-blue-800; +} +.ionic-background-color-blue-800 { + background-color: $ionic-color-blue-800; +} +.ionic-color-blue-900 { + color: $ionic-color-blue-900; +} +.ionic-background-color-blue-900 { + background-color: $ionic-color-blue-900; +} +.ionic-color-blue-1000 { + color: $ionic-color-blue-1000; +} +.ionic-background-color-blue-1000 { + background-color: $ionic-color-blue-1000; +} +.ionic-color-blue-1100 { + color: $ionic-color-blue-1100; +} +.ionic-background-color-blue-1100 { + background-color: $ionic-color-blue-1100; +} +.ionic-color-blue-1200 { + color: $ionic-color-blue-1200; +} +.ionic-background-color-blue-1200 { + background-color: $ionic-color-blue-1200; +} +.ionic-color-indigo-100 { + color: $ionic-color-indigo-100; +} +.ionic-background-color-indigo-100 { + background-color: $ionic-color-indigo-100; +} +.ionic-color-indigo-200 { + color: $ionic-color-indigo-200; +} +.ionic-background-color-indigo-200 { + background-color: $ionic-color-indigo-200; +} +.ionic-color-indigo-300 { + color: $ionic-color-indigo-300; +} +.ionic-background-color-indigo-300 { + background-color: $ionic-color-indigo-300; +} +.ionic-color-indigo-400 { + color: $ionic-color-indigo-400; +} +.ionic-background-color-indigo-400 { + background-color: $ionic-color-indigo-400; +} +.ionic-color-indigo-500 { + color: $ionic-color-indigo-500; +} +.ionic-background-color-indigo-500 { + background-color: $ionic-color-indigo-500; +} +.ionic-color-indigo-600 { + color: $ionic-color-indigo-600; +} +.ionic-background-color-indigo-600 { + background-color: $ionic-color-indigo-600; +} +.ionic-color-indigo-700 { + color: $ionic-color-indigo-700; +} +.ionic-background-color-indigo-700 { + background-color: $ionic-color-indigo-700; +} +.ionic-color-indigo-800 { + color: $ionic-color-indigo-800; +} +.ionic-background-color-indigo-800 { + background-color: $ionic-color-indigo-800; +} +.ionic-color-indigo-900 { + color: $ionic-color-indigo-900; +} +.ionic-background-color-indigo-900 { + background-color: $ionic-color-indigo-900; +} +.ionic-color-indigo-1000 { + color: $ionic-color-indigo-1000; +} +.ionic-background-color-indigo-1000 { + background-color: $ionic-color-indigo-1000; +} +.ionic-color-indigo-1100 { + color: $ionic-color-indigo-1100; +} +.ionic-background-color-indigo-1100 { + background-color: $ionic-color-indigo-1100; +} +.ionic-color-indigo-1200 { + color: $ionic-color-indigo-1200; +} +.ionic-background-color-indigo-1200 { + background-color: $ionic-color-indigo-1200; +} +.ionic-color-violet-100 { + color: $ionic-color-violet-100; +} +.ionic-background-color-violet-100 { + background-color: $ionic-color-violet-100; +} +.ionic-color-violet-200 { + color: $ionic-color-violet-200; +} +.ionic-background-color-violet-200 { + background-color: $ionic-color-violet-200; +} +.ionic-color-violet-300 { + color: $ionic-color-violet-300; +} +.ionic-background-color-violet-300 { + background-color: $ionic-color-violet-300; +} +.ionic-color-violet-400 { + color: $ionic-color-violet-400; +} +.ionic-background-color-violet-400 { + background-color: $ionic-color-violet-400; +} +.ionic-color-violet-500 { + color: $ionic-color-violet-500; +} +.ionic-background-color-violet-500 { + background-color: $ionic-color-violet-500; +} +.ionic-color-violet-600 { + color: $ionic-color-violet-600; +} +.ionic-background-color-violet-600 { + background-color: $ionic-color-violet-600; +} +.ionic-color-violet-700 { + color: $ionic-color-violet-700; +} +.ionic-background-color-violet-700 { + background-color: $ionic-color-violet-700; +} +.ionic-color-violet-800 { + color: $ionic-color-violet-800; +} +.ionic-background-color-violet-800 { + background-color: $ionic-color-violet-800; +} +.ionic-color-violet-900 { + color: $ionic-color-violet-900; +} +.ionic-background-color-violet-900 { + background-color: $ionic-color-violet-900; +} +.ionic-color-violet-1000 { + color: $ionic-color-violet-1000; +} +.ionic-background-color-violet-1000 { + background-color: $ionic-color-violet-1000; +} +.ionic-color-violet-1100 { + color: $ionic-color-violet-1100; +} +.ionic-background-color-violet-1100 { + background-color: $ionic-color-violet-1100; +} +.ionic-color-violet-1200 { + color: $ionic-color-violet-1200; +} +.ionic-background-color-violet-1200 { + background-color: $ionic-color-violet-1200; +} +.ionic-color-purple-100 { + color: $ionic-color-purple-100; +} +.ionic-background-color-purple-100 { + background-color: $ionic-color-purple-100; +} +.ionic-color-purple-200 { + color: $ionic-color-purple-200; +} +.ionic-background-color-purple-200 { + background-color: $ionic-color-purple-200; +} +.ionic-color-purple-300 { + color: $ionic-color-purple-300; +} +.ionic-background-color-purple-300 { + background-color: $ionic-color-purple-300; +} +.ionic-color-purple-400 { + color: $ionic-color-purple-400; +} +.ionic-background-color-purple-400 { + background-color: $ionic-color-purple-400; +} +.ionic-color-purple-500 { + color: $ionic-color-purple-500; +} +.ionic-background-color-purple-500 { + background-color: $ionic-color-purple-500; +} +.ionic-color-purple-600 { + color: $ionic-color-purple-600; +} +.ionic-background-color-purple-600 { + background-color: $ionic-color-purple-600; +} +.ionic-color-purple-700 { + color: $ionic-color-purple-700; +} +.ionic-background-color-purple-700 { + background-color: $ionic-color-purple-700; +} +.ionic-color-purple-800 { + color: $ionic-color-purple-800; +} +.ionic-background-color-purple-800 { + background-color: $ionic-color-purple-800; +} +.ionic-color-purple-900 { + color: $ionic-color-purple-900; +} +.ionic-background-color-purple-900 { + background-color: $ionic-color-purple-900; +} +.ionic-color-purple-1000 { + color: $ionic-color-purple-1000; +} +.ionic-background-color-purple-1000 { + background-color: $ionic-color-purple-1000; +} +.ionic-color-purple-1100 { + color: $ionic-color-purple-1100; +} +.ionic-background-color-purple-1100 { + background-color: $ionic-color-purple-1100; +} +.ionic-color-purple-1200 { + color: $ionic-color-purple-1200; +} +.ionic-background-color-purple-1200 { + background-color: $ionic-color-purple-1200; +} +.ionic-color-magenta-100 { + color: $ionic-color-magenta-100; +} +.ionic-background-color-magenta-100 { + background-color: $ionic-color-magenta-100; +} +.ionic-color-magenta-200 { + color: $ionic-color-magenta-200; +} +.ionic-background-color-magenta-200 { + background-color: $ionic-color-magenta-200; +} +.ionic-color-magenta-300 { + color: $ionic-color-magenta-300; +} +.ionic-background-color-magenta-300 { + background-color: $ionic-color-magenta-300; +} +.ionic-color-magenta-400 { + color: $ionic-color-magenta-400; +} +.ionic-background-color-magenta-400 { + background-color: $ionic-color-magenta-400; +} +.ionic-color-magenta-500 { + color: $ionic-color-magenta-500; +} +.ionic-background-color-magenta-500 { + background-color: $ionic-color-magenta-500; +} +.ionic-color-magenta-600 { + color: $ionic-color-magenta-600; +} +.ionic-background-color-magenta-600 { + background-color: $ionic-color-magenta-600; +} +.ionic-color-magenta-700 { + color: $ionic-color-magenta-700; +} +.ionic-background-color-magenta-700 { + background-color: $ionic-color-magenta-700; +} +.ionic-color-magenta-800 { + color: $ionic-color-magenta-800; +} +.ionic-background-color-magenta-800 { + background-color: $ionic-color-magenta-800; +} +.ionic-color-magenta-900 { + color: $ionic-color-magenta-900; +} +.ionic-background-color-magenta-900 { + background-color: $ionic-color-magenta-900; +} +.ionic-color-magenta-1000 { + color: $ionic-color-magenta-1000; +} +.ionic-background-color-magenta-1000 { + background-color: $ionic-color-magenta-1000; +} +.ionic-color-magenta-1100 { + color: $ionic-color-magenta-1100; +} +.ionic-background-color-magenta-1100 { + background-color: $ionic-color-magenta-1100; +} +.ionic-color-magenta-1200 { + color: $ionic-color-magenta-1200; +} +.ionic-background-color-magenta-1200 { + background-color: $ionic-color-magenta-1200; +} +.ionic-color-pink-100 { + color: $ionic-color-pink-100; +} +.ionic-background-color-pink-100 { + background-color: $ionic-color-pink-100; +} +.ionic-color-pink-200 { + color: $ionic-color-pink-200; +} +.ionic-background-color-pink-200 { + background-color: $ionic-color-pink-200; +} +.ionic-color-pink-300 { + color: $ionic-color-pink-300; +} +.ionic-background-color-pink-300 { + background-color: $ionic-color-pink-300; +} +.ionic-color-pink-400 { + color: $ionic-color-pink-400; +} +.ionic-background-color-pink-400 { + background-color: $ionic-color-pink-400; +} +.ionic-color-pink-500 { + color: $ionic-color-pink-500; +} +.ionic-background-color-pink-500 { + background-color: $ionic-color-pink-500; +} +.ionic-color-pink-600 { + color: $ionic-color-pink-600; +} +.ionic-background-color-pink-600 { + background-color: $ionic-color-pink-600; +} +.ionic-color-pink-700 { + color: $ionic-color-pink-700; +} +.ionic-background-color-pink-700 { + background-color: $ionic-color-pink-700; +} +.ionic-color-pink-800 { + color: $ionic-color-pink-800; +} +.ionic-background-color-pink-800 { + background-color: $ionic-color-pink-800; +} +.ionic-color-pink-900 { + color: $ionic-color-pink-900; +} +.ionic-background-color-pink-900 { + background-color: $ionic-color-pink-900; +} +.ionic-color-pink-1000 { + color: $ionic-color-pink-1000; +} +.ionic-background-color-pink-1000 { + background-color: $ionic-color-pink-1000; +} +.ionic-color-pink-1100 { + color: $ionic-color-pink-1100; +} +.ionic-background-color-pink-1100 { + background-color: $ionic-color-pink-1100; +} +.ionic-color-pink-1200 { + color: $ionic-color-pink-1200; +} +.ionic-background-color-pink-1200 { + background-color: $ionic-color-pink-1200; +} +.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-1000 { + color: $ionic-color-primary-1000; +} +.ionic-background-color-primary-1000 { + background-color: $ionic-color-primary-1000; +} +.ionic-color-primary-1100 { + color: $ionic-color-primary-1100; +} +.ionic-background-color-primary-1100 { + background-color: $ionic-color-primary-1100; +} +.ionic-color-primary-1200 { + color: $ionic-color-primary-1200; +} +.ionic-background-color-primary-1200 { + background-color: $ionic-color-primary-1200; +} +.ionic-color-primary-base { + color: $ionic-color-primary-base; +} +.ionic-background-color-primary-base { + background-color: $ionic-color-primary-base; } .ionic-color-info-100 { color: $ionic-color-info-100; @@ -438,370 +1677,862 @@ .ionic-background-color-info-900 { background-color: $ionic-color-info-900; } -.ionic-color-info { - color: $ionic-color-info; +.ionic-color-info-1000 { + color: $ionic-color-info-1000; } -.ionic-background-color-info { - background-color: $ionic-color-info; +.ionic-background-color-info-1000 { + background-color: $ionic-color-info-1000; +} +.ionic-color-info-1100 { + color: $ionic-color-info-1100; +} +.ionic-background-color-info-1100 { + background-color: $ionic-color-info-1100; +} +.ionic-color-info-1200 { + color: $ionic-color-info-1200; +} +.ionic-background-color-info-1200 { + background-color: $ionic-color-info-1200; +} +.ionic-color-info-base { + color: $ionic-color-info-base; +} +.ionic-background-color-info-base { + background-color: $ionic-color-info-base; +} +.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-1000 { + color: $ionic-color-warning-1000; +} +.ionic-background-color-warning-1000 { + background-color: $ionic-color-warning-1000; +} +.ionic-color-warning-1100 { + color: $ionic-color-warning-1100; +} +.ionic-background-color-warning-1100 { + background-color: $ionic-color-warning-1100; +} +.ionic-color-warning-1200 { + color: $ionic-color-warning-1200; +} +.ionic-background-color-warning-1200 { + background-color: $ionic-color-warning-1200; +} +.ionic-color-warning-base { + color: $ionic-color-warning-base; +} +.ionic-background-color-warning-base { + background-color: $ionic-color-warning-base; +} +.ionic-color-danger-100 { + color: $ionic-color-danger-100; +} +.ionic-background-color-danger-100 { + background-color: $ionic-color-danger-100; +} +.ionic-color-danger-200 { + color: $ionic-color-danger-200; +} +.ionic-background-color-danger-200 { + background-color: $ionic-color-danger-200; +} +.ionic-color-danger-300 { + color: $ionic-color-danger-300; +} +.ionic-background-color-danger-300 { + background-color: $ionic-color-danger-300; +} +.ionic-color-danger-400 { + color: $ionic-color-danger-400; +} +.ionic-background-color-danger-400 { + background-color: $ionic-color-danger-400; +} +.ionic-color-danger-500 { + color: $ionic-color-danger-500; +} +.ionic-background-color-danger-500 { + background-color: $ionic-color-danger-500; +} +.ionic-color-danger-600 { + color: $ionic-color-danger-600; +} +.ionic-background-color-danger-600 { + background-color: $ionic-color-danger-600; +} +.ionic-color-danger-700 { + color: $ionic-color-danger-700; +} +.ionic-background-color-danger-700 { + background-color: $ionic-color-danger-700; +} +.ionic-color-danger-800 { + color: $ionic-color-danger-800; +} +.ionic-background-color-danger-800 { + background-color: $ionic-color-danger-800; +} +.ionic-color-danger-900 { + color: $ionic-color-danger-900; +} +.ionic-background-color-danger-900 { + background-color: $ionic-color-danger-900; +} +.ionic-color-danger-1000 { + color: $ionic-color-danger-1000; +} +.ionic-background-color-danger-1000 { + background-color: $ionic-color-danger-1000; +} +.ionic-color-danger-1100 { + color: $ionic-color-danger-1100; +} +.ionic-background-color-danger-1100 { + background-color: $ionic-color-danger-1100; +} +.ionic-color-danger-1200 { + color: $ionic-color-danger-1200; +} +.ionic-background-color-danger-1200 { + background-color: $ionic-color-danger-1200; +} +.ionic-color-danger-base { + color: $ionic-color-danger-base; +} +.ionic-background-color-danger-base { + background-color: $ionic-color-danger-base; +} +.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-1000 { + color: $ionic-color-success-1000; +} +.ionic-background-color-success-1000 { + background-color: $ionic-color-success-1000; +} +.ionic-color-success-1100 { + color: $ionic-color-success-1100; +} +.ionic-background-color-success-1100 { + background-color: $ionic-color-success-1100; +} +.ionic-color-success-1200 { + color: $ionic-color-success-1200; +} +.ionic-background-color-success-1200 { + background-color: $ionic-color-success-1200; +} +.ionic-color-success-base { + color: $ionic-color-success-base; +} +.ionic-background-color-success-base { + background-color: $ionic-color-success-base; +} +.ionic-z-index-0 { + z-index: $ionic-z-index-0; +} +.ionic-z-index-1 { + z-index: $ionic-z-index-1; +} +.ionic-z-index-2 { + z-index: $ionic-z-index-2; +} +.ionic-z-index-3 { + z-index: $ionic-z-index-3; +} +.ionic-z-index-4 { + z-index: $ionic-z-index-4; +} +.ionic-z-index-500 { + z-index: $ionic-z-index-500; +} +.ionic-z-index-bottom { + z-index: $ionic-z-index-bottom; +} +.ionic-z-index-top { + z-index: $ionic-z-index-top; } -.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-line-height-full { - line-height: $ionic-font-line-height-full; -} -.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 { +.ionic-display-sm-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-800; font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-1100; + text-transform: none; + text-decoration: none; } -.ionic-font-weight-medium { - font-weight: $ionic-font-weight-medium; + +.ionic-display-sm-light { + font-family: $ionic-font-family; + font-size: $ionic-font-size-800; + font-weight: $ionic-font-weight-light; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-1100; + text-transform: none; + text-decoration: none; } -.ionic-font-weight-semi-bold { - font-weight: $ionic-font-weight-semi-bold; + +.ionic-display-lg-light { + font-family: $ionic-font-family; + font-size: $ionic-font-size-900; + font-weight: $ionic-font-weight-light; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-1200; + text-transform: none; + text-decoration: none; } -.ionic-font-weight-bold { + +.ionic-display-lg-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-900; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-1200; + text-transform: none; + text-decoration: none; +} + +.ionic-heading-h1-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-700; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; +} + +.ionic-heading-h1-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-700; font-weight: $ionic-font-weight-bold; -} -.ionic-margin-space-none { - --margin-start: #{$ionic-space-none}; - --margin-end: #{$ionic-space-none}; - --margin-top: #{$ionic-space-none}; - --margin-bottom: #{$ionic-space-none}; - - @include margin(0); + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-none { - --padding-start: #{$ionic-space-none}; - --padding-end: #{$ionic-space-none}; - --padding-top: #{$ionic-space-none}; - --padding-bottom: #{$ionic-space-none}; - - @include padding(0); +.ionic-heading-h1-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-700; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxxxs { - --margin-start: #{$ionic-space-xxxxs}; - --margin-end: #{$ionic-space-xxxxs}; - --margin-top: #{$ionic-space-xxxxs}; - --margin-bottom: #{$ionic-space-xxxxs}; - - @include margin(2px); +.ionic-heading-h1-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-700; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxxxs { - --padding-start: #{$ionic-space-xxxxs}; - --padding-end: #{$ionic-space-xxxxs}; - --padding-top: #{$ionic-space-xxxxs}; - --padding-bottom: #{$ionic-space-xxxxs}; - - @include padding(2px); +.ionic-heading-h2-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-650; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxxs { - --margin-start: #{$ionic-space-xxxs}; - --margin-end: #{$ionic-space-xxxs}; - --margin-top: #{$ionic-space-xxxs}; - --margin-bottom: #{$ionic-space-xxxs}; - - @include margin(4px); +.ionic-heading-h2-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-650; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxxs { - --padding-start: #{$ionic-space-xxxs}; - --padding-end: #{$ionic-space-xxxs}; - --padding-top: #{$ionic-space-xxxs}; - --padding-bottom: #{$ionic-space-xxxs}; - - @include padding(4px); +.ionic-heading-h2-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-650; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxs { - --margin-start: #{$ionic-space-xxs}; - --margin-end: #{$ionic-space-xxs}; - --margin-top: #{$ionic-space-xxs}; - --margin-bottom: #{$ionic-space-xxs}; - - @include margin(6px); +.ionic-heading-h2-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-650; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-900; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxs { - --padding-start: #{$ionic-space-xxs}; - --padding-end: #{$ionic-space-xxs}; - --padding-top: #{$ionic-space-xxs}; - --padding-bottom: #{$ionic-space-xxs}; - - @include padding(6px); +.ionic-heading-h3-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-600; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-800; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xs { - --margin-start: #{$ionic-space-xs}; - --margin-end: #{$ionic-space-xs}; - --margin-top: #{$ionic-space-xs}; - --margin-bottom: #{$ionic-space-xs}; - - @include margin(8px); +.ionic-heading-h3-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-600; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-800; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xs { - --padding-start: #{$ionic-space-xs}; - --padding-end: #{$ionic-space-xs}; - --padding-top: #{$ionic-space-xs}; - --padding-bottom: #{$ionic-space-xs}; - - @include padding(8px); +.ionic-heading-h3-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-600; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-800; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-s { - --margin-start: #{$ionic-space-s}; - --margin-end: #{$ionic-space-s}; - --margin-top: #{$ionic-space-s}; - --margin-bottom: #{$ionic-space-s}; - - @include margin(12px); +.ionic-heading-h3-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-600; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-800; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-s { - --padding-start: #{$ionic-space-s}; - --padding-end: #{$ionic-space-s}; - --padding-top: #{$ionic-space-s}; - --padding-bottom: #{$ionic-space-s}; - - @include padding(12px); +.ionic-heading-h4-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-550; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-base { - --margin-start: #{$ionic-space-base}; - --margin-end: #{$ionic-space-base}; - --margin-top: #{$ionic-space-base}; - --margin-bottom: #{$ionic-space-base}; - - @include margin(16px); +.ionic-heading-h4-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-550; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-base { - --padding-start: #{$ionic-space-base}; - --padding-end: #{$ionic-space-base}; - --padding-top: #{$ionic-space-base}; - --padding-bottom: #{$ionic-space-base}; - - @include padding(16px); +.ionic-heading-h4-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-550; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-m { - --margin-start: #{$ionic-space-m}; - --margin-end: #{$ionic-space-m}; - --margin-top: #{$ionic-space-m}; - --margin-bottom: #{$ionic-space-m}; - - @include margin(20px); +.ionic-heading-h4-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-550; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-m { - --padding-start: #{$ionic-space-m}; - --padding-end: #{$ionic-space-m}; - --padding-top: #{$ionic-space-m}; - --padding-bottom: #{$ionic-space-m}; - - @include padding(20px); +.ionic-heading-h5-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-500; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-l { - --margin-start: #{$ionic-space-l}; - --margin-end: #{$ionic-space-l}; - --margin-top: #{$ionic-space-l}; - --margin-bottom: #{$ionic-space-l}; - - @include margin(24px); +.ionic-heading-h5-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-500; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-l { - --padding-start: #{$ionic-space-l}; - --padding-end: #{$ionic-space-l}; - --padding-top: #{$ionic-space-l}; - --padding-bottom: #{$ionic-space-l}; - - @include padding(24px); +.ionic-heading-h5-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-500; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xl { - --margin-start: #{$ionic-space-xl}; - --margin-end: #{$ionic-space-xl}; - --margin-top: #{$ionic-space-xl}; - --margin-bottom: #{$ionic-space-xl}; - - @include margin(28px); +.ionic-heading-h5-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-500; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xl { - --padding-start: #{$ionic-space-xl}; - --padding-end: #{$ionic-space-xl}; - --padding-top: #{$ionic-space-xl}; - --padding-bottom: #{$ionic-space-xl}; - - @include padding(28px); +.ionic-heading-h6-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-450; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxl { - --margin-start: #{$ionic-space-xxl}; - --margin-end: #{$ionic-space-xxl}; - --margin-top: #{$ionic-space-xxl}; - --margin-bottom: #{$ionic-space-xxl}; - - @include margin(32px); +.ionic-heading-h6-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-450; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxl { - --padding-start: #{$ionic-space-xxl}; - --padding-end: #{$ionic-space-xxl}; - --padding-top: #{$ionic-space-xxl}; - --padding-bottom: #{$ionic-space-xxl}; - - @include padding(32px); +.ionic-heading-h6-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-450; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxxl { - --margin-start: #{$ionic-space-xxxl}; - --margin-end: #{$ionic-space-xxxl}; - --margin-top: #{$ionic-space-xxxl}; - --margin-bottom: #{$ionic-space-xxxl}; - - @include margin(36px); +.ionic-heading-h6-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-450; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-700; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxxl { - --padding-start: #{$ionic-space-xxxl}; - --padding-end: #{$ionic-space-xxxl}; - --padding-top: #{$ionic-space-xxxl}; - --padding-bottom: #{$ionic-space-xxxl}; - - @include padding(36px); +.ionic-body-sm-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; } -.ionic-margin-space-xxxxl { - --margin-start: #{$ionic-space-xxxxl}; - --margin-end: #{$ionic-space-xxxxl}; - --margin-top: #{$ionic-space-xxxxl}; - --margin-bottom: #{$ionic-space-xxxxl}; - - @include margin(40px); +.ionic-body-sm-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; } -.ionic-padding-space-xxxxl { - --padding-start: #{$ionic-space-xxxxl}; - --padding-end: #{$ionic-space-xxxxl}; - --padding-top: #{$ionic-space-xxxxl}; - --padding-bottom: #{$ionic-space-xxxxl}; - - @include padding(40px); +.ionic-body-sm-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; } -.ionic-border-radius-square { - border-radius: $ionic-border-radius-square; +.ionic-body-sm-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; } -.ionic-border-radius-rounded-small { - border-radius: $ionic-border-radius-rounded-small; + +.ionic-body-sm-link { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: underline; } -.ionic-border-radius-rounded-medium { - border-radius: $ionic-border-radius-rounded-medium; + +.ionic-body-sm-italic { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; } -.ionic-border-radius-rounded-large { - border-radius: $ionic-border-radius-rounded-large; + +.ionic-body-md-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-border-radius-rounded-x-large { - border-radius: $ionic-border-radius-rounded-x-large; + +.ionic-body-md-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-border-radius-rounded-full { - border-radius: $ionic-border-radius-rounded-full; + +.ionic-body-md-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-border-size-small { - border-width: $ionic-border-size-small; + +.ionic-body-md-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-border-size-medium { - border-width: $ionic-border-size-medium; + +.ionic-body-md-link { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: underline; } -.ionic-border-size-large { - border-width: $ionic-border-size-large; + +.ionic-body-md-italic { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-elevation-0 { - box-shadow: $ionic-elevation-0; + +.ionic-body-lg-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-elevation-1 { - box-shadow: $ionic-elevation-1; + +.ionic-body-lg-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-elevation-2 { - box-shadow: $ionic-elevation-2; + +.ionic-body-lg-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-elevation-3 { - box-shadow: $ionic-elevation-3; + +.ionic-body-lg-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; } -.ionic-elevation-4 { - box-shadow: $ionic-elevation-4; + +.ionic-body-lg-link { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: underline; +} + +.ionic-body-lg-italic { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-0; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-action-sm { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-1; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; +} + +.ionic-action-md { + font-family: $ionic-font-family; + font-size: $ionic-font-size-350; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-1; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-action-lg { + font-family: $ionic-font-family; + font-size: $ionic-font-size-400; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-1; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-action-xl { + font-family: $ionic-font-family; + font-size: $ionic-font-size-500; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-1; + line-height: $ionic-line-height-600; + text-transform: none; + text-decoration: none; +} + +.ionic-overline-regular { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-regular; + letter-spacing: $ionic-letter-spacing-2; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; +} + +.ionic-overline-medium { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-medium; + letter-spacing: $ionic-letter-spacing-2; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; +} + +.ionic-overline-semi-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-2; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; +} + +.ionic-overline-bold { + font-family: $ionic-font-family; + font-size: $ionic-font-size-300; + font-weight: $ionic-font-weight-bold; + letter-spacing: $ionic-letter-spacing-2; + line-height: $ionic-line-height-400; + text-transform: none; + text-decoration: none; +} + +.ionic-state-focus-0 { + color: $ionic-state-focus-0; +} +.ionic-background-state-focus-0 { + background-color: $ionic-state-focus-0; +} +.ionic-state-focus-1 { + color: $ionic-state-focus-1; +} +.ionic-background-state-focus-1 { + background-color: $ionic-state-focus-1; +} +.ionic-state-focus-2 { + color: $ionic-state-focus-2; +} +.ionic-background-state-focus-2 { + background-color: $ionic-state-focus-2; +} +.ionic-state-disabled { + color: $ionic-state-disabled; +} +.ionic-background-state-disabled { + background-color: $ionic-state-disabled; +} +.ionic-state-hover { + color: $ionic-state-hover; +} +.ionic-background-state-hover { + background-color: $ionic-state-hover; +} +.ionic-state-pressed { + color: $ionic-state-pressed; +} +.ionic-background-state-pressed { + background-color: $ionic-state-pressed; } diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index 694aa2fa3b..9a212c151c 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -3,213 +3,1157 @@ * Ionic Design System */ -$ionic-color-primary-10: var(--ionic-color-primary-10, #f7faff); -$ionic-color-primary-10-rgb: var(--ionic-color-primary-10-rgb, 247, 250, 255); -$ionic-color-primary-50: var(--ionic-color-primary-50, #cbdffe); -$ionic-color-primary-50-rgb: var(--ionic-color-primary-50-rgb, 203, 223, 254); -$ionic-color-primary-100: var(--ionic-color-primary-100, #9ec4fd); -$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 158, 196, 253); -$ionic-color-primary-200: var(--ionic-color-primary-200, #74aafc); -$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 116, 170, 252); -$ionic-color-primary-300: var(--ionic-color-primary-300, #4991fb); -$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 73, 145, 251); -$ionic-color-primary-400: var(--ionic-color-primary-400, #1068eb); -$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 16, 104, 235); -$ionic-color-primary-500: var(--ionic-color-primary-500, #0750be); -$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 7, 80, 190); -$ionic-color-primary-600: var(--ionic-color-primary-600, #053d90); -$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 5, 61, 144); -$ionic-color-primary-700: var(--ionic-color-primary-700, #062b63); -$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 6, 43, 99); -$ionic-color-primary-800: var(--ionic-color-primary-800, #061935); -$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 6, 25, 53); -$ionic-color-primary-900: var(--ionic-color-primary-900, #010408); -$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 1, 4, 8); -$ionic-color-primary: var(--ionic-color-primary, #1068eb); -$ionic-color-primary-rgb: var(--ionic-color-primary-rgb, 16, 104, 235); -$ionic-color-secondary: var(--ionic-color-secondary, #303d60); -$ionic-color-secondary-rgb: var(--ionic-color-secondary-rgb, 48, 61, 96); -$ionic-color-neutral-0: var(--ionic-color-neutral-0, #ffffff); -$ionic-color-neutral-0-rgb: var(--ionic-color-neutral-0-rgb, 255, 255, 255); -$ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5); -$ionic-color-neutral-10-rgb: var(--ionic-color-neutral-10-rgb, 245, 245, 245); -$ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7); -$ionic-color-neutral-50-rgb: var(--ionic-color-neutral-50-rgb, 231, 231, 231); -$ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada); -$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 218, 218, 218); -$ionic-color-neutral-200: var(--ionic-color-neutral-200, #c9c9c9); -$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 201, 201, 201); -$ionic-color-neutral-300: var(--ionic-color-neutral-300, #b8b8b8); -$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 184, 184, 184); -$ionic-color-neutral-400: var(--ionic-color-neutral-400, #9a9a9a); -$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 154, 154, 154); -$ionic-color-neutral-500: var(--ionic-color-neutral-500, #767676); -$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 118, 118, 118); -$ionic-color-neutral-600: var(--ionic-color-neutral-600, #535353); -$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 83, 83, 83); -$ionic-color-neutral-700: var(--ionic-color-neutral-700, #373737); -$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 55, 55, 55); -$ionic-color-neutral-800: var(--ionic-color-neutral-800, #212121); -$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 33, 33, 33); -$ionic-color-neutral-900: var(--ionic-color-neutral-900, #05080f); -$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 5, 8, 15); -$ionic-color-error-10: var(--ionic-color-error-10, #fffafa); -$ionic-color-error-10-rgb: var(--ionic-color-error-10-rgb, 255, 250, 250); -$ionic-color-error-50: var(--ionic-color-error-50, #ffd5d5); -$ionic-color-error-50-rgb: var(--ionic-color-error-50-rgb, 255, 213, 213); -$ionic-color-error-100: var(--ionic-color-error-100, #ffafaf); -$ionic-color-error-100-rgb: var(--ionic-color-error-100-rgb, 255, 175, 175); -$ionic-color-error-200: var(--ionic-color-error-200, #ff8a8a); -$ionic-color-error-200-rgb: var(--ionic-color-error-200-rgb, 255, 138, 138); -$ionic-color-error-300: var(--ionic-color-error-300, #ff6666); -$ionic-color-error-300-rgb: var(--ionic-color-error-300-rgb, 255, 102, 102); -$ionic-color-error-400: var(--ionic-color-error-400, #f72c2c); -$ionic-color-error-400-rgb: var(--ionic-color-error-400-rgb, 247, 44, 44); -$ionic-color-error-500: var(--ionic-color-error-500, #c71212); -$ionic-color-error-500-rgb: var(--ionic-color-error-500-rgb, 199, 18, 18); -$ionic-color-error-600: var(--ionic-color-error-600, #970606); -$ionic-color-error-600-rgb: var(--ionic-color-error-600-rgb, 151, 6, 6); -$ionic-color-error-700: var(--ionic-color-error-700, #670202); -$ionic-color-error-700-rgb: var(--ionic-color-error-700-rgb, 103, 2, 2); -$ionic-color-error-800: var(--ionic-color-error-800, #380101); -$ionic-color-error-800-rgb: var(--ionic-color-error-800-rgb, 56, 1, 1); -$ionic-color-error-900: var(--ionic-color-error-900, #080000); -$ionic-color-error-900-rgb: var(--ionic-color-error-900-rgb, 8, 0, 0); -$ionic-color-error: var(--ionic-color-error, #f72c2c); -$ionic-color-error-rgb: var(--ionic-color-error-rgb, 247, 44, 44); -$ionic-color-warning-10: var(--ionic-color-warning-10, #fffdfa); -$ionic-color-warning-10-rgb: var(--ionic-color-warning-10-rgb, 255, 253, 250); -$ionic-color-warning-50: var(--ionic-color-warning-50, #ffecce); -$ionic-color-warning-50-rgb: var(--ionic-color-warning-50-rgb, 255, 236, 206); -$ionic-color-warning-100: var(--ionic-color-warning-100, #ffdba0); -$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 219, 160); -$ionic-color-warning-200: var(--ionic-color-warning-200, #ffca73); -$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 202, 115); -$ionic-color-warning-300: var(--ionic-color-warning-300, #ffb845); -$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 184, 69); -$ionic-color-warning-400: var(--ionic-color-warning-400, #ff9707); -$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 151, 7); -$ionic-color-warning-500: var(--ionic-color-warning-500, #ce7a06); -$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 206, 122, 6); -$ionic-color-warning-600: var(--ionic-color-warning-600, #9c5f0a); -$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 156, 95, 10); -$ionic-color-warning-700: var(--ionic-color-warning-700, #6b430c); -$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 107, 67, 12); -$ionic-color-warning-800: var(--ionic-color-warning-800, #39260b); -$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 57, 38, 11); -$ionic-color-warning-900: var(--ionic-color-warning-900, #080502); -$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 8, 5, 2); -$ionic-color-warning: var(--ionic-color-warning, #ff9707); -$ionic-color-warning-rgb: var(--ionic-color-warning-rgb, 255, 151, 7); -$ionic-color-success-10: var(--ionic-color-success-10, #fbfffa); -$ionic-color-success-10-rgb: var(--ionic-color-success-10-rgb, 251, 255, 250); -$ionic-color-success-50: var(--ionic-color-success-50, #def7d8); -$ionic-color-success-50-rgb: var(--ionic-color-success-50-rgb, 222, 247, 216); -$ionic-color-success-100: var(--ionic-color-success-100, #c6f0b7); -$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 198, 240, 183); -$ionic-color-success-200: var(--ionic-color-success-200, #a4e188); -$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 164, 225, 136); -$ionic-color-success-300: var(--ionic-color-success-300, #73c346); -$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 115, 195, 70); -$ionic-color-success-400: var(--ionic-color-success-400, #52a518); -$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 82, 165, 24); -$ionic-color-success-500: var(--ionic-color-success-500, #36870c); -$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 54, 135, 12); -$ionic-color-success-600: var(--ionic-color-success-600, #36870c); -$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 54, 135, 12); -$ionic-color-success-700: var(--ionic-color-success-700, #226907); -$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 34, 105, 7); -$ionic-color-success-800: var(--ionic-color-success-800, #144b05); -$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 20, 75, 5); -$ionic-color-success-900: var(--ionic-color-success-900, #030f02); -$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 3, 15, 2); -$ionic-color-success: var(--ionic-color-success, #52a518); -$ionic-color-success-rgb: var(--ionic-color-success-rgb, 82, 165, 24); -$ionic-color-info-10: var(--ionic-color-info-10, #f5fbff); -$ionic-color-info-10-rgb: var(--ionic-color-info-10-rgb, 245, 251, 255); -$ionic-color-info-50: var(--ionic-color-info-50, #c6e7ff); -$ionic-color-info-50-rgb: var(--ionic-color-info-50-rgb, 198, 231, 255); -$ionic-color-info-100: var(--ionic-color-info-100, #97d3ff); -$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 151, 211, 255); -$ionic-color-info-200: var(--ionic-color-info-200, #6ac0fe); -$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 106, 192, 254); -$ionic-color-info-300: var(--ionic-color-info-300, #3dadfe); -$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 61, 173, 254); -$ionic-color-info-400: var(--ionic-color-info-400, #008bef); -$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 0, 139, 239); -$ionic-color-info-500: var(--ionic-color-info-500, #0071c2); -$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 0, 113, 194); -$ionic-color-info-600: var(--ionic-color-info-600, #005796); -$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 0, 87, 150); -$ionic-color-info-700: var(--ionic-color-info-700, #003d69); -$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 0, 61, 105); -$ionic-color-info-800: var(--ionic-color-info-800, #02243c); -$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 2, 36, 60); -$ionic-color-info-900: var(--ionic-color-info-900, #020a0f); -$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 2, 10, 15); -$ionic-color-info: var(--ionic-color-info, #008bef); -$ionic-color-info-rgb: var(--ionic-color-info-rgb, 0, 139, 239); -$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif); -$ionic-font-letter-spacing-none: var(--ionic-font-letter-spacing-none, 0em); -$ionic-font-letter-spacing-s: var(--ionic-font-letter-spacing-s, 0.1em); -$ionic-font-letter-spacing-m: var(--ionic-font-letter-spacing-m, 0.15em); -$ionic-font-line-height-xs: var(--ionic-font-line-height-xs, 16px); -$ionic-font-line-height-s: var(--ionic-font-line-height-s, 20px); -$ionic-font-line-height-m: var(--ionic-font-line-height-m, 24px); -$ionic-font-line-height-l: var(--ionic-font-line-height-l, 28px); -$ionic-font-line-height-xl: var(--ionic-font-line-height-xl, 32px); -$ionic-font-line-height-xxl: var(--ionic-font-line-height-xxl, 36px); -$ionic-font-line-height-display-s: var(--ionic-font-line-height-display-s, 44px); -$ionic-font-line-height-display-m: var(--ionic-font-line-height-display-m, 48px); -$ionic-font-line-height-full: var(--ionic-font-line-height-full, 100%); -$ionic-font-size-h1: var(--ionic-font-size-h1, 28px); -$ionic-font-size-h2: var(--ionic-font-size-h2, 32px); -$ionic-font-size-h3: var(--ionic-font-size-h3, 24px); -$ionic-font-size-h4: var(--ionic-font-size-h4, 22px); -$ionic-font-size-h5: var(--ionic-font-size-h5, 20px); -$ionic-font-size-h6: var(--ionic-font-size-h6, 18px); -$ionic-font-size-display-s: var(--ionic-font-size-display-s, 32px); -$ionic-font-size-display-m: var(--ionic-font-size-display-m, 36px); -$ionic-font-size-s: var(--ionic-font-size-s, 12px); -$ionic-font-size-m: var(--ionic-font-size-m, 14px); -$ionic-font-size-l: var(--ionic-font-size-l, 16px); +$ionic-elevation-100: var(--ionic-elevation-100, 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a); +$ionic-elevation-200: var(--ionic-elevation-200, 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d); +$ionic-elevation-300: var(--ionic-elevation-300, 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d); +$ionic-elevation-400: var(--ionic-elevation-400, 0px 15px 48px 0px #0000002e, 0px 3px 12px 0px #0000001f); +$ionic-elevation-500: var(--ionic-elevation-500, 0px 3px 9px 0px #062b6312, 0px 0px 4px 0px #062b630a); +$ionic-elevation-600: var(--ionic-elevation-600, 0px 8px 25px 0px #062b6314, 0px 1px 5px 0px #062b630d); +$ionic-elevation-700: var(--ionic-elevation-700, 0px 15px 32px 0px #062b6317, 0px 2px 7px 0px #062b630d); +$ionic-elevation-800: var(--ionic-elevation-800, 0px 20px 48px 0px #062b631f, 0px 3px 14px 0px #062b631f); +$ionic-font-size-275: var(--ionic-font-size-275, 11px); +$ionic-font-size-300: var(--ionic-font-size-300, 12px); +$ionic-font-size-350: var(--ionic-font-size-350, 14px); +$ionic-font-size-400: var(--ionic-font-size-400, 16px); +$ionic-font-size-450: var(--ionic-font-size-450, 18px); +$ionic-font-size-500: var(--ionic-font-size-500, 20px); +$ionic-font-size-550: var(--ionic-font-size-550, 22px); +$ionic-font-size-600: var(--ionic-font-size-600, 24px); +$ionic-font-size-650: var(--ionic-font-size-650, 26px); +$ionic-font-size-700: var(--ionic-font-size-700, 28px); +$ionic-font-size-800: var(--ionic-font-size-800, 32px); +$ionic-font-size-900: var(--ionic-font-size-900, 36px); +$ionic-font-weight-thin: var(--ionic-font-weight-thin, 100); +$ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200); $ionic-font-weight-light: var(--ionic-font-weight-light, 300); $ionic-font-weight-regular: var(--ionic-font-weight-regular, 400); $ionic-font-weight-medium: var(--ionic-font-weight-medium, 500); $ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600); $ionic-font-weight-bold: var(--ionic-font-weight-bold, 700); -$ionic-space-none: var(--ionic-space-none, 0); -$ionic-space-xxxxs: var(--ionic-space-xxxxs, 2px); -$ionic-space-xxxs: var(--ionic-space-xxxs, 4px); -$ionic-space-xxs: var(--ionic-space-xxs, 6px); -$ionic-space-xs: var(--ionic-space-xs, 8px); -$ionic-space-s: var(--ionic-space-s, 12px); -$ionic-space-base: var(--ionic-space-base, 16px); -$ionic-space-m: var(--ionic-space-m, 20px); -$ionic-space-l: var(--ionic-space-l, 24px); -$ionic-space-xl: var(--ionic-space-xl, 28px); -$ionic-space-xxl: var(--ionic-space-xxl, 32px); -$ionic-space-xxxl: var(--ionic-space-xxxl, 36px); -$ionic-space-xxxxl: var(--ionic-space-xxxxl, 40px); -$ionic-border-radius-square: var(--ionic-border-radius-square, 0); -$ionic-border-radius-rounded-small: var(--ionic-border-radius-rounded-small, 4px); -$ionic-border-radius-rounded-medium: var(--ionic-border-radius-rounded-medium, 8px); -$ionic-border-radius-rounded-large: var(--ionic-border-radius-rounded-large, 16px); -$ionic-border-radius-rounded-x-large: var(--ionic-border-radius-rounded-x-large, 32px); -$ionic-border-radius-rounded-full: var(--ionic-border-radius-rounded-full, 999px); -$ionic-border-size-small: var(--ionic-border-size-small, 1px); -$ionic-border-size-medium: var(--ionic-border-size-medium, 2px); -$ionic-border-size-large: var(--ionic-border-size-large, 3px); -$ionic-elevation-0: var(--ionic-elevation-0, none); -$ionic-elevation-1: var(--ionic-elevation-1, 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)); -$ionic-elevation-2: var(--ionic-elevation-2, 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)); -$ionic-elevation-3: var( - --ionic-elevation-3, - 0px 2px 7px 0px rgba(0, 0, 0, 0.05), - 0px 15px 32px 0px rgba(0, 0, 0, 0.09) +$ionic-font-weight-extra-bold: var(--ionic-font-weight-extra-bold, 800); +$ionic-font-weight-black: var(--ionic-font-weight-black, 900); +$ionic-letter-spacing-0: var(--ionic-letter-spacing-0, 0); +$ionic-letter-spacing-1: var(--ionic-letter-spacing-1, 1%); +$ionic-letter-spacing-2: var(--ionic-letter-spacing-2, 1.5%); +$ionic-line-height-300: var(--ionic-line-height-300, 12px); +$ionic-line-height-400: var(--ionic-line-height-400, 16px); +$ionic-line-height-500: var(--ionic-line-height-500, 20px); +$ionic-line-height-600: var(--ionic-line-height-600, 24px); +$ionic-line-height-700: var(--ionic-line-height-700, 28px); +$ionic-line-height-800: var(--ionic-line-height-800, 32px); +$ionic-line-height-900: var(--ionic-line-height-900, 36px); +$ionic-line-height-1100: var(--ionic-line-height-1100, 44px); +$ionic-line-height-1200: var(--ionic-line-height-1200, 48px); +$ionic-line-height-full: var(--ionic-line-height-full, 100%); +$ionic-space-0: var(--ionic-space-0, 0px); +$ionic-space-100: var(--ionic-space-100, 4px); +$ionic-space-150: var(--ionic-space-150, 6px); +$ionic-space-200: var(--ionic-space-200, 8px); +$ionic-space-250: var(--ionic-space-250, 10px); +$ionic-space-300: var(--ionic-space-300, 12px); +$ionic-space-400: var(--ionic-space-400, 16px); +$ionic-space-500: var(--ionic-space-500, 20px); +$ionic-space-600: var(--ionic-space-600, 24px); +$ionic-space-700: var(--ionic-space-700, 28px); +$ionic-space-800: var(--ionic-space-800, 32px); +$ionic-space-900: var(--ionic-space-900, 36px); +$ionic-space-1000: var(--ionic-space-1000, 40px); +$ionic-space-1200: var(--ionic-space-1200, 48px); +$ionic-space-050: var(--ionic-space-050, 2px); +$ionic-border-radius-0: var(--ionic-border-radius-0, 0px); +$ionic-border-radius-100: var(--ionic-border-radius-100, 4px); +$ionic-border-radius-200: var(--ionic-border-radius-200, 8px); +$ionic-border-radius-300: var(--ionic-border-radius-300, 12px); +$ionic-border-radius-400: var(--ionic-border-radius-400, 16px); +$ionic-border-radius-800: var(--ionic-border-radius-800, 32px); +$ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px); +$ionic-border-radius-050: var(--ionic-border-radius-050, 2px); +$ionic-border-radius-full: var(--ionic-border-radius-full, 999px); +$ionic-border-size-0: var(--ionic-border-size-0, 0px); +$ionic-border-size-025: var(--ionic-border-size-025, 1px); +$ionic-border-size-050: var(--ionic-border-size-050, 2px); +$ionic-border-size-075: var(--ionic-border-size-075, 3px); +$ionic-border-style-none: var(--ionic-border-style-none, none); +$ionic-border-style-solid: var(--ionic-border-style-solid, solid); +$ionic-border-style-dashed: var(--ionic-border-style-dashed, dashed); +$ionic-border-style-dotted: var(--ionic-border-style-dotted, dotted); +$ionic-color-base-white: var(--ionic-color-base-white, #ffffff); +$ionic-color-base-white-rgb: var(--ionic-color-base-white-rgb, 255, 255, 255); +$ionic-color-base-black: var(--ionic-color-base-black, #111111); +$ionic-color-base-black-rgb: var(--ionic-color-base-black-rgb, 17, 17, 17); +$ionic-color-neutral-100: var(--ionic-color-neutral-100, #f1f1f1); +$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 241, 241, 241); +$ionic-color-neutral-200: var(--ionic-color-neutral-200, #e7e7e7); +$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 231, 231, 231); +$ionic-color-neutral-300: var(--ionic-color-neutral-300, #cfcfcf); +$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 207, 207, 207); +$ionic-color-neutral-400: var(--ionic-color-neutral-400, #b9b9b9); +$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 185, 185, 185); +$ionic-color-neutral-500: var(--ionic-color-neutral-500, #a2a2a2); +$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 162, 162, 162); +$ionic-color-neutral-600: var(--ionic-color-neutral-600, #8c8c8c); +$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 140, 140, 140); +$ionic-color-neutral-700: var(--ionic-color-neutral-700, #777777); +$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 119, 119, 119); +$ionic-color-neutral-800: var(--ionic-color-neutral-800, #626262); +$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 98, 98, 98); +$ionic-color-neutral-900: var(--ionic-color-neutral-900, #4e4e4e); +$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 78, 78, 78); +$ionic-color-neutral-1000: var(--ionic-color-neutral-1000, #3b3b3b); +$ionic-color-neutral-1000-rgb: var(--ionic-color-neutral-1000-rgb, 59, 59, 59); +$ionic-color-neutral-1100: var(--ionic-color-neutral-1100, #292929); +$ionic-color-neutral-1100-rgb: var(--ionic-color-neutral-1100-rgb, 41, 41, 41); +$ionic-color-neutral-1200: var(--ionic-color-neutral-1200, #242424); +$ionic-color-neutral-1200-rgb: var(--ionic-color-neutral-1200-rgb, 36, 36, 36); +$ionic-color-red-100: var(--ionic-color-red-100, #feeded); +$ionic-color-red-100-rgb: var(--ionic-color-red-100-rgb, 254, 237, 237); +$ionic-color-red-200: var(--ionic-color-red-200, #fde1e1); +$ionic-color-red-200-rgb: var(--ionic-color-red-200-rgb, 253, 225, 225); +$ionic-color-red-300: var(--ionic-color-red-300, #fcc1c1); +$ionic-color-red-300-rgb: var(--ionic-color-red-300-rgb, 252, 193, 193); +$ionic-color-red-400: var(--ionic-color-red-400, #faa1a1); +$ionic-color-red-400-rgb: var(--ionic-color-red-400-rgb, 250, 161, 161); +$ionic-color-red-500: var(--ionic-color-red-500, #f97d7d); +$ionic-color-red-500-rgb: var(--ionic-color-red-500-rgb, 249, 125, 125); +$ionic-color-red-600: var(--ionic-color-red-600, #f85151); +$ionic-color-red-600-rgb: var(--ionic-color-red-600-rgb, 248, 81, 81); +$ionic-color-red-700: var(--ionic-color-red-700, #e52929); +$ionic-color-red-700-rgb: var(--ionic-color-red-700-rgb, 229, 41, 41); +$ionic-color-red-800: var(--ionic-color-red-800, #bf2222); +$ionic-color-red-800-rgb: var(--ionic-color-red-800-rgb, 191, 34, 34); +$ionic-color-red-900: var(--ionic-color-red-900, #991b1b); +$ionic-color-red-900-rgb: var(--ionic-color-red-900-rgb, 153, 27, 27); +$ionic-color-red-1000: var(--ionic-color-red-1000, #761515); +$ionic-color-red-1000-rgb: var(--ionic-color-red-1000-rgb, 118, 21, 21); +$ionic-color-red-1100: var(--ionic-color-red-1100, #540f0f); +$ionic-color-red-1100-rgb: var(--ionic-color-red-1100-rgb, 84, 15, 15); +$ionic-color-red-1200: var(--ionic-color-red-1200, #330909); +$ionic-color-red-1200-rgb: var(--ionic-color-red-1200-rgb, 51, 9, 9); +$ionic-color-pumpkin-100: var(--ionic-color-pumpkin-100, #feedea); +$ionic-color-pumpkin-100-rgb: var(--ionic-color-pumpkin-100-rgb, 254, 237, 234); +$ionic-color-pumpkin-200: var(--ionic-color-pumpkin-200, #fde0db); +$ionic-color-pumpkin-200-rgb: var(--ionic-color-pumpkin-200-rgb, 253, 224, 219); +$ionic-color-pumpkin-300: var(--ionic-color-pumpkin-300, #fbbdb1); +$ionic-color-pumpkin-300-rgb: var(--ionic-color-pumpkin-300-rgb, 251, 189, 177); +$ionic-color-pumpkin-400: var(--ionic-color-pumpkin-400, #f9947c); +$ionic-color-pumpkin-400-rgb: var(--ionic-color-pumpkin-400-rgb, 249, 148, 124); +$ionic-color-pumpkin-500: var(--ionic-color-pumpkin-500, #f75d07); +$ionic-color-pumpkin-500-rgb: var(--ionic-color-pumpkin-500-rgb, 247, 93, 7); +$ionic-color-pumpkin-600: var(--ionic-color-pumpkin-600, #da5206); +$ionic-color-pumpkin-600-rgb: var(--ionic-color-pumpkin-600-rgb, 218, 82, 6); +$ionic-color-pumpkin-700: var(--ionic-color-pumpkin-700, #bd4705); +$ionic-color-pumpkin-700-rgb: var(--ionic-color-pumpkin-700-rgb, 189, 71, 5); +$ionic-color-pumpkin-800: var(--ionic-color-pumpkin-800, #9f3c05); +$ionic-color-pumpkin-800-rgb: var(--ionic-color-pumpkin-800-rgb, 159, 60, 5); +$ionic-color-pumpkin-900: var(--ionic-color-pumpkin-900, #803004); +$ionic-color-pumpkin-900-rgb: var(--ionic-color-pumpkin-900-rgb, 128, 48, 4); +$ionic-color-pumpkin-1000: var(--ionic-color-pumpkin-1000, #602403); +$ionic-color-pumpkin-1000-rgb: var(--ionic-color-pumpkin-1000-rgb, 96, 36, 3); +$ionic-color-pumpkin-1100: var(--ionic-color-pumpkin-1100, #401802); +$ionic-color-pumpkin-1100-rgb: var(--ionic-color-pumpkin-1100-rgb, 64, 24, 2); +$ionic-color-pumpkin-1200: var(--ionic-color-pumpkin-1200, #210c01); +$ionic-color-pumpkin-1200-rgb: var(--ionic-color-pumpkin-1200-rgb, 33, 12, 1); +$ionic-color-orange-100: var(--ionic-color-orange-100, #fff1ea); +$ionic-color-orange-100-rgb: var(--ionic-color-orange-100-rgb, 255, 241, 234); +$ionic-color-orange-200: var(--ionic-color-orange-200, #ffe8db); +$ionic-color-orange-200-rgb: var(--ionic-color-orange-200-rgb, 255, 232, 219); +$ionic-color-orange-300: var(--ionic-color-orange-300, #ffcfb1); +$ionic-color-orange-300-rgb: var(--ionic-color-orange-300-rgb, 255, 207, 177); +$ionic-color-orange-400: var(--ionic-color-orange-400, #ffb37b); +$ionic-color-orange-400-rgb: var(--ionic-color-orange-400-rgb, 255, 179, 123); +$ionic-color-orange-500: var(--ionic-color-orange-500, #ff9400); +$ionic-color-orange-500-rgb: var(--ionic-color-orange-500-rgb, 255, 148, 0); +$ionic-color-orange-600: var(--ionic-color-orange-600, #e18300); +$ionic-color-orange-600-rgb: var(--ionic-color-orange-600-rgb, 225, 131, 0); +$ionic-color-orange-700: var(--ionic-color-orange-700, #c37100); +$ionic-color-orange-700-rgb: var(--ionic-color-orange-700-rgb, 195, 113, 0); +$ionic-color-orange-800: var(--ionic-color-orange-800, #a45f00); +$ionic-color-orange-800-rgb: var(--ionic-color-orange-800-rgb, 164, 95, 0); +$ionic-color-orange-900: var(--ionic-color-orange-900, #844d00); +$ionic-color-orange-900-rgb: var(--ionic-color-orange-900-rgb, 132, 77, 0); +$ionic-color-orange-1000: var(--ionic-color-orange-1000, #633a00); +$ionic-color-orange-1000-rgb: var(--ionic-color-orange-1000-rgb, 99, 58, 0); +$ionic-color-orange-1100: var(--ionic-color-orange-1100, #422700); +$ionic-color-orange-1100-rgb: var(--ionic-color-orange-1100-rgb, 66, 39, 0); +$ionic-color-orange-1200: var(--ionic-color-orange-1200, #221400); +$ionic-color-orange-1200-rgb: var(--ionic-color-orange-1200-rgb, 34, 20, 0); +$ionic-color-yellow-100: var(--ionic-color-yellow-100, #fff9ea); +$ionic-color-yellow-100-rgb: var(--ionic-color-yellow-100-rgb, 255, 249, 234); +$ionic-color-yellow-200: var(--ionic-color-yellow-200, #fff5db); +$ionic-color-yellow-200-rgb: var(--ionic-color-yellow-200-rgb, 255, 245, 219); +$ionic-color-yellow-300: var(--ionic-color-yellow-300, #ffebb1); +$ionic-color-yellow-300-rgb: var(--ionic-color-yellow-300-rgb, 255, 235, 177); +$ionic-color-yellow-400: var(--ionic-color-yellow-400, #ffe07b); +$ionic-color-yellow-400-rgb: var(--ionic-color-yellow-400-rgb, 255, 224, 123); +$ionic-color-yellow-500: var(--ionic-color-yellow-500, #ffd600); +$ionic-color-yellow-500-rgb: var(--ionic-color-yellow-500-rgb, 255, 214, 0); +$ionic-color-yellow-600: var(--ionic-color-yellow-600, #e1bd00); +$ionic-color-yellow-600-rgb: var(--ionic-color-yellow-600-rgb, 225, 189, 0); +$ionic-color-yellow-700: var(--ionic-color-yellow-700, #c3a400); +$ionic-color-yellow-700-rgb: var(--ionic-color-yellow-700-rgb, 195, 164, 0); +$ionic-color-yellow-800: var(--ionic-color-yellow-800, #a48a00); +$ionic-color-yellow-800-rgb: var(--ionic-color-yellow-800-rgb, 164, 138, 0); +$ionic-color-yellow-900: var(--ionic-color-yellow-900, #846f00); +$ionic-color-yellow-900-rgb: var(--ionic-color-yellow-900-rgb, 132, 111, 0); +$ionic-color-yellow-1000: var(--ionic-color-yellow-1000, #635300); +$ionic-color-yellow-1000-rgb: var(--ionic-color-yellow-1000-rgb, 99, 83, 0); +$ionic-color-yellow-1100: var(--ionic-color-yellow-1100, #423800); +$ionic-color-yellow-1100-rgb: var(--ionic-color-yellow-1100-rgb, 66, 56, 0); +$ionic-color-yellow-1200: var(--ionic-color-yellow-1200, #221d00); +$ionic-color-yellow-1200-rgb: var(--ionic-color-yellow-1200-rgb, 34, 29, 0); +$ionic-color-lime-100: var(--ionic-color-lime-100, #f3faea); +$ionic-color-lime-100-rgb: var(--ionic-color-lime-100-rgb, 243, 250, 234); +$ionic-color-lime-200: var(--ionic-color-lime-200, #eaf7db); +$ionic-color-lime-200-rgb: var(--ionic-color-lime-200-rgb, 234, 247, 219); +$ionic-color-lime-300: var(--ionic-color-lime-300, #d3efb2); +$ionic-color-lime-300-rgb: var(--ionic-color-lime-300-rgb, 211, 239, 178); +$ionic-color-lime-400: var(--ionic-color-lime-400, #bbe77d); +$ionic-color-lime-400-rgb: var(--ionic-color-lime-400-rgb, 187, 231, 125); +$ionic-color-lime-500: var(--ionic-color-lime-500, #a0df18); +$ionic-color-lime-500-rgb: var(--ionic-color-lime-500-rgb, 160, 223, 24); +$ionic-color-lime-600: var(--ionic-color-lime-600, #8dc515); +$ionic-color-lime-600-rgb: var(--ionic-color-lime-600-rgb, 141, 197, 21); +$ionic-color-lime-700: var(--ionic-color-lime-700, #7aab12); +$ionic-color-lime-700-rgb: var(--ionic-color-lime-700-rgb, 122, 171, 18); +$ionic-color-lime-800: var(--ionic-color-lime-800, #678f0f); +$ionic-color-lime-800-rgb: var(--ionic-color-lime-800-rgb, 103, 143, 15); +$ionic-color-lime-900: var(--ionic-color-lime-900, #53730c); +$ionic-color-lime-900-rgb: var(--ionic-color-lime-900-rgb, 83, 115, 12); +$ionic-color-lime-1000: var(--ionic-color-lime-1000, #3e5709); +$ionic-color-lime-1000-rgb: var(--ionic-color-lime-1000-rgb, 62, 87, 9); +$ionic-color-lime-1100: var(--ionic-color-lime-1100, #2a3a06); +$ionic-color-lime-1100-rgb: var(--ionic-color-lime-1100-rgb, 42, 58, 6); +$ionic-color-lime-1200: var(--ionic-color-lime-1200, #151e03); +$ionic-color-lime-1200-rgb: var(--ionic-color-lime-1200-rgb, 21, 30, 3); +$ionic-color-green-100: var(--ionic-color-green-100, #ebf9ec); +$ionic-color-green-100-rgb: var(--ionic-color-green-100-rgb, 235, 249, 236); +$ionic-color-green-200: var(--ionic-color-green-200, #dcf5de); +$ionic-color-green-200-rgb: var(--ionic-color-green-200-rgb, 220, 245, 222); +$ionic-color-green-300: var(--ionic-color-green-300, #b3ebb7); +$ionic-color-green-300-rgb: var(--ionic-color-green-300-rgb, 179, 235, 183); +$ionic-color-green-400: var(--ionic-color-green-400, #7fe089); +$ionic-color-green-400-rgb: var(--ionic-color-green-400-rgb, 127, 224, 137); +$ionic-color-green-500: var(--ionic-color-green-500, #23d643); +$ionic-color-green-500-rgb: var(--ionic-color-green-500-rgb, 35, 214, 67); +$ionic-color-green-600: var(--ionic-color-green-600, #1fbd3b); +$ionic-color-green-600-rgb: var(--ionic-color-green-600-rgb, 31, 189, 59); +$ionic-color-green-700: var(--ionic-color-green-700, #1ba433); +$ionic-color-green-700-rgb: var(--ionic-color-green-700-rgb, 27, 164, 51); +$ionic-color-green-800: var(--ionic-color-green-800, #178a2b); +$ionic-color-green-800-rgb: var(--ionic-color-green-800-rgb, 23, 138, 43); +$ionic-color-green-900: var(--ionic-color-green-900, #126f23); +$ionic-color-green-900-rgb: var(--ionic-color-green-900-rgb, 18, 111, 35); +$ionic-color-green-1000: var(--ionic-color-green-1000, #0e531a); +$ionic-color-green-1000-rgb: var(--ionic-color-green-1000-rgb, 14, 83, 26); +$ionic-color-green-1100: var(--ionic-color-green-1100, #093811); +$ionic-color-green-1100-rgb: var(--ionic-color-green-1100-rgb, 9, 56, 17); +$ionic-color-green-1200: var(--ionic-color-green-1200, #051d09); +$ionic-color-green-1200-rgb: var(--ionic-color-green-1200-rgb, 5, 29, 9); +$ionic-color-teal-100: var(--ionic-color-teal-100, #eaf8f5); +$ionic-color-teal-100-rgb: var(--ionic-color-teal-100-rgb, 234, 248, 245); +$ionic-color-teal-200: var(--ionic-color-teal-200, #dbf3ee); +$ionic-color-teal-200-rgb: var(--ionic-color-teal-200-rgb, 219, 243, 238); +$ionic-color-teal-300: var(--ionic-color-teal-300, #b1e7dd); +$ionic-color-teal-300-rgb: var(--ionic-color-teal-300-rgb, 177, 231, 221); +$ionic-color-teal-400: var(--ionic-color-teal-400, #7bdbca); +$ionic-color-teal-400-rgb: var(--ionic-color-teal-400-rgb, 123, 219, 202); +$ionic-color-teal-500: var(--ionic-color-teal-500, #00cfb7); +$ionic-color-teal-500-rgb: var(--ionic-color-teal-500-rgb, 0, 207, 183); +$ionic-color-teal-600: var(--ionic-color-teal-600, #00b7a2); +$ionic-color-teal-600-rgb: var(--ionic-color-teal-600-rgb, 0, 183, 162); +$ionic-color-teal-700: var(--ionic-color-teal-700, #009e8c); +$ionic-color-teal-700-rgb: var(--ionic-color-teal-700-rgb, 0, 158, 140); +$ionic-color-teal-800: var(--ionic-color-teal-800, #008576); +$ionic-color-teal-800-rgb: var(--ionic-color-teal-800-rgb, 0, 133, 118); +$ionic-color-teal-900: var(--ionic-color-teal-900, #006b5f); +$ionic-color-teal-900-rgb: var(--ionic-color-teal-900-rgb, 0, 107, 95); +$ionic-color-teal-1000: var(--ionic-color-teal-1000, #005147); +$ionic-color-teal-1000-rgb: var(--ionic-color-teal-1000-rgb, 0, 81, 71); +$ionic-color-teal-1100: var(--ionic-color-teal-1100, #003630); +$ionic-color-teal-1100-rgb: var(--ionic-color-teal-1100-rgb, 0, 54, 48); +$ionic-color-teal-1200: var(--ionic-color-teal-1200, #001c19); +$ionic-color-teal-1200-rgb: var(--ionic-color-teal-1200-rgb, 0, 28, 25); +$ionic-color-aqua-100: var(--ionic-color-aqua-100, #ebf9fe); +$ionic-color-aqua-100-rgb: var(--ionic-color-aqua-100-rgb, 235, 249, 254); +$ionic-color-aqua-200: var(--ionic-color-aqua-200, #dcf4fd); +$ionic-color-aqua-200-rgb: var(--ionic-color-aqua-200-rgb, 220, 244, 253); +$ionic-color-aqua-300: var(--ionic-color-aqua-300, #b3e9fc); +$ionic-color-aqua-300-rgb: var(--ionic-color-aqua-300-rgb, 179, 233, 252); +$ionic-color-aqua-400: var(--ionic-color-aqua-400, #80defa); +$ionic-color-aqua-400-rgb: var(--ionic-color-aqua-400-rgb, 128, 222, 250); +$ionic-color-aqua-500: var(--ionic-color-aqua-500, #27d3f9); +$ionic-color-aqua-500-rgb: var(--ionic-color-aqua-500-rgb, 39, 211, 249); +$ionic-color-aqua-600: var(--ionic-color-aqua-600, #22bbdc); +$ionic-color-aqua-600-rgb: var(--ionic-color-aqua-600-rgb, 34, 187, 220); +$ionic-color-aqua-700: var(--ionic-color-aqua-700, #1ea2bf); +$ionic-color-aqua-700-rgb: var(--ionic-color-aqua-700-rgb, 30, 162, 191); +$ionic-color-aqua-800: var(--ionic-color-aqua-800, #1988a0); +$ionic-color-aqua-800-rgb: var(--ionic-color-aqua-800-rgb, 25, 136, 160); +$ionic-color-aqua-900: var(--ionic-color-aqua-900, #146d81); +$ionic-color-aqua-900-rgb: var(--ionic-color-aqua-900-rgb, 20, 109, 129); +$ionic-color-aqua-1000: var(--ionic-color-aqua-1000, #0f5261); +$ionic-color-aqua-1000-rgb: var(--ionic-color-aqua-1000-rgb, 15, 82, 97); +$ionic-color-aqua-1100: var(--ionic-color-aqua-1100, #0a3741); +$ionic-color-aqua-1100-rgb: var(--ionic-color-aqua-1100-rgb, 10, 55, 65); +$ionic-color-aqua-1200: var(--ionic-color-aqua-1200, #051c21); +$ionic-color-aqua-1200-rgb: var(--ionic-color-aqua-1200-rgb, 5, 28, 33); +$ionic-color-blue-100: var(--ionic-color-blue-100, #f2f4fd); +$ionic-color-blue-100-rgb: var(--ionic-color-blue-100-rgb, 242, 244, 253); +$ionic-color-blue-200: var(--ionic-color-blue-200, #e9ecfc); +$ionic-color-blue-200-rgb: var(--ionic-color-blue-200-rgb, 233, 236, 252); +$ionic-color-blue-300: var(--ionic-color-blue-300, #d0d7fa); +$ionic-color-blue-300-rgb: var(--ionic-color-blue-300-rgb, 208, 215, 250); +$ionic-color-blue-400: var(--ionic-color-blue-400, #b5c0f7); +$ionic-color-blue-400-rgb: var(--ionic-color-blue-400-rgb, 181, 192, 247); +$ionic-color-blue-500: var(--ionic-color-blue-500, #94a5f4); +$ionic-color-blue-500-rgb: var(--ionic-color-blue-500-rgb, 148, 165, 244); +$ionic-color-blue-600: var(--ionic-color-blue-600, #6986f2); +$ionic-color-blue-600-rgb: var(--ionic-color-blue-600-rgb, 105, 134, 242); +$ionic-color-blue-700: var(--ionic-color-blue-700, #105cef); +$ionic-color-blue-700-rgb: var(--ionic-color-blue-700-rgb, 16, 92, 239); +$ionic-color-blue-800: var(--ionic-color-blue-800, #0f54da); +$ionic-color-blue-800-rgb: var(--ionic-color-blue-800-rgb, 15, 84, 218); +$ionic-color-blue-900: var(--ionic-color-blue-900, #0d4bc3); +$ionic-color-blue-900-rgb: var(--ionic-color-blue-900-rgb, 13, 75, 195); +$ionic-color-blue-1000: var(--ionic-color-blue-1000, #0b41a9); +$ionic-color-blue-1000-rgb: var(--ionic-color-blue-1000-rgb, 11, 65, 169); +$ionic-color-blue-1100: var(--ionic-color-blue-1100, #09358a); +$ionic-color-blue-1100-rgb: var(--ionic-color-blue-1100-rgb, 9, 53, 138); +$ionic-color-blue-1200: var(--ionic-color-blue-1200, #072561); +$ionic-color-blue-1200-rgb: var(--ionic-color-blue-1200-rgb, 7, 37, 97); +$ionic-color-indigo-100: var(--ionic-color-indigo-100, #f3f2fb); +$ionic-color-indigo-100-rgb: var(--ionic-color-indigo-100-rgb, 243, 242, 251); +$ionic-color-indigo-200: var(--ionic-color-indigo-200, #eae9f9); +$ionic-color-indigo-200-rgb: var(--ionic-color-indigo-200-rgb, 234, 233, 249); +$ionic-color-indigo-300: var(--ionic-color-indigo-300, #d3d1f2); +$ionic-color-indigo-300-rgb: var(--ionic-color-indigo-300-rgb, 211, 209, 242); +$ionic-color-indigo-400: var(--ionic-color-indigo-400, #bab5eb); +$ionic-color-indigo-400-rgb: var(--ionic-color-indigo-400-rgb, 186, 181, 235); +$ionic-color-indigo-500: var(--ionic-color-indigo-500, #9d95e4); +$ionic-color-indigo-500-rgb: var(--ionic-color-indigo-500-rgb, 157, 149, 228); +$ionic-color-indigo-600: var(--ionic-color-indigo-600, #786bdd); +$ionic-color-indigo-600-rgb: var(--ionic-color-indigo-600-rgb, 120, 107, 221); +$ionic-color-indigo-700: var(--ionic-color-indigo-700, #411bd5); +$ionic-color-indigo-700-rgb: var(--ionic-color-indigo-700-rgb, 65, 27, 213); +$ionic-color-indigo-800: var(--ionic-color-indigo-800, #3b19c3); +$ionic-color-indigo-800-rgb: var(--ionic-color-indigo-800-rgb, 59, 25, 195); +$ionic-color-indigo-900: var(--ionic-color-indigo-900, #3516ae); +$ionic-color-indigo-900-rgb: var(--ionic-color-indigo-900-rgb, 53, 22, 174); +$ionic-color-indigo-1000: var(--ionic-color-indigo-1000, #2e1397); +$ionic-color-indigo-1000-rgb: var(--ionic-color-indigo-1000-rgb, 46, 19, 151); +$ionic-color-indigo-1100: var(--ionic-color-indigo-1100, #26107b); +$ionic-color-indigo-1100-rgb: var(--ionic-color-indigo-1100-rgb, 38, 16, 123); +$ionic-color-indigo-1200: var(--ionic-color-indigo-1200, #1a0b57); +$ionic-color-indigo-1200-rgb: var(--ionic-color-indigo-1200-rgb, 26, 11, 87); +$ionic-color-violet-100: var(--ionic-color-violet-100, #f5f2fe); +$ionic-color-violet-100-rgb: var(--ionic-color-violet-100-rgb, 245, 242, 254); +$ionic-color-violet-200: var(--ionic-color-violet-200, #eee9fd); +$ionic-color-violet-200-rgb: var(--ionic-color-violet-200-rgb, 238, 233, 253); +$ionic-color-violet-300: var(--ionic-color-violet-300, #dcd1fb); +$ionic-color-violet-300-rgb: var(--ionic-color-violet-300-rgb, 220, 209, 251); +$ionic-color-violet-400: var(--ionic-color-violet-400, #c9b6f9); +$ionic-color-violet-400-rgb: var(--ionic-color-violet-400-rgb, 201, 182, 249); +$ionic-color-violet-500: var(--ionic-color-violet-500, #b396f6); +$ionic-color-violet-500-rgb: var(--ionic-color-violet-500-rgb, 179, 150, 246); +$ionic-color-violet-600: var(--ionic-color-violet-600, #9a6cf4); +$ionic-color-violet-600-rgb: var(--ionic-color-violet-600-rgb, 154, 108, 244); +$ionic-color-violet-700: var(--ionic-color-violet-700, #7c20f2); +$ionic-color-violet-700-rgb: var(--ionic-color-violet-700-rgb, 124, 32, 242); +$ionic-color-violet-800: var(--ionic-color-violet-800, #711ddd); +$ionic-color-violet-800-rgb: var(--ionic-color-violet-800-rgb, 113, 29, 221); +$ionic-color-violet-900: var(--ionic-color-violet-900, #651ac5); +$ionic-color-violet-900-rgb: var(--ionic-color-violet-900-rgb, 101, 26, 197); +$ionic-color-violet-1000: var(--ionic-color-violet-1000, #5817ab); +$ionic-color-violet-1000-rgb: var(--ionic-color-violet-1000-rgb, 88, 23, 171); +$ionic-color-violet-1100: var(--ionic-color-violet-1100, #48128c); +$ionic-color-violet-1100-rgb: var(--ionic-color-violet-1100-rgb, 72, 18, 140); +$ionic-color-violet-1200: var(--ionic-color-violet-1200, #330d63); +$ionic-color-violet-1200-rgb: var(--ionic-color-violet-1200-rgb, 51, 13, 99); +$ionic-color-purple-100: var(--ionic-color-purple-100, #f9f3fe); +$ionic-color-purple-100-rgb: var(--ionic-color-purple-100-rgb, 249, 243, 254); +$ionic-color-purple-200: var(--ionic-color-purple-200, #f5eafd); +$ionic-color-purple-200-rgb: var(--ionic-color-purple-200-rgb, 245, 234, 253); +$ionic-color-purple-300: var(--ionic-color-purple-300, #e9d3fa); +$ionic-color-purple-300-rgb: var(--ionic-color-purple-300-rgb, 233, 211, 250); +$ionic-color-purple-400: var(--ionic-color-purple-400, #deb9f8); +$ionic-color-purple-400-rgb: var(--ionic-color-purple-400-rgb, 222, 185, 248); +$ionic-color-purple-500: var(--ionic-color-purple-500, #d29bf6); +$ionic-color-purple-500-rgb: var(--ionic-color-purple-500-rgb, 210, 155, 246); +$ionic-color-purple-600: var(--ionic-color-purple-600, #c575f3); +$ionic-color-purple-600-rgb: var(--ionic-color-purple-600-rgb, 197, 117, 243); +$ionic-color-purple-700: var(--ionic-color-purple-700, #b73cf1); +$ionic-color-purple-700-rgb: var(--ionic-color-purple-700-rgb, 183, 60, 241); +$ionic-color-purple-800: var(--ionic-color-purple-800, #a737dc); +$ionic-color-purple-800-rgb: var(--ionic-color-purple-800-rgb, 167, 55, 220); +$ionic-color-purple-900: var(--ionic-color-purple-900, #9531c5); +$ionic-color-purple-900-rgb: var(--ionic-color-purple-900-rgb, 149, 49, 197); +$ionic-color-purple-1000: var(--ionic-color-purple-1000, #812aaa); +$ionic-color-purple-1000-rgb: var(--ionic-color-purple-1000-rgb, 129, 42, 170); +$ionic-color-purple-1100: var(--ionic-color-purple-1100, #6a238b); +$ionic-color-purple-1100-rgb: var(--ionic-color-purple-1100-rgb, 106, 35, 139); +$ionic-color-purple-1200: var(--ionic-color-purple-1200, #4b1862); +$ionic-color-purple-1200-rgb: var(--ionic-color-purple-1200-rgb, 75, 24, 98); +$ionic-color-magenta-100: var(--ionic-color-magenta-100, #fdf3fb); +$ionic-color-magenta-100-rgb: var(--ionic-color-magenta-100-rgb, 253, 243, 251); +$ionic-color-magenta-200: var(--ionic-color-magenta-200, #fcebf8); +$ionic-color-magenta-200-rgb: var(--ionic-color-magenta-200-rgb, 252, 235, 248); +$ionic-color-magenta-300: var(--ionic-color-magenta-300, #f9d4f1); +$ionic-color-magenta-300-rgb: var(--ionic-color-magenta-300-rgb, 249, 212, 241); +$ionic-color-magenta-400: var(--ionic-color-magenta-400, #f6bcea); +$ionic-color-magenta-400-rgb: var(--ionic-color-magenta-400-rgb, 246, 188, 234); +$ionic-color-magenta-500: var(--ionic-color-magenta-500, #f39fe3); +$ionic-color-magenta-500-rgb: var(--ionic-color-magenta-500-rgb, 243, 159, 227); +$ionic-color-magenta-600: var(--ionic-color-magenta-600, #f07cdb); +$ionic-color-magenta-600-rgb: var(--ionic-color-magenta-600-rgb, 240, 124, 219); +$ionic-color-magenta-700: var(--ionic-color-magenta-700, #ed4ad3); +$ionic-color-magenta-700-rgb: var(--ionic-color-magenta-700-rgb, 237, 74, 211); +$ionic-color-magenta-800: var(--ionic-color-magenta-800, #d844c1); +$ionic-color-magenta-800-rgb: var(--ionic-color-magenta-800-rgb, 216, 68, 193); +$ionic-color-magenta-900: var(--ionic-color-magenta-900, #c13cac); +$ionic-color-magenta-900-rgb: var(--ionic-color-magenta-900-rgb, 193, 60, 172); +$ionic-color-magenta-1000: var(--ionic-color-magenta-1000, #a83495); +$ionic-color-magenta-1000-rgb: var(--ionic-color-magenta-1000-rgb, 168, 52, 149); +$ionic-color-magenta-1100: var(--ionic-color-magenta-1100, #892b7a); +$ionic-color-magenta-1100-rgb: var(--ionic-color-magenta-1100-rgb, 137, 43, 122); +$ionic-color-magenta-1200: var(--ionic-color-magenta-1200, #611e56); +$ionic-color-magenta-1200-rgb: var(--ionic-color-magenta-1200-rgb, 97, 30, 86); +$ionic-color-pink-100: var(--ionic-color-pink-100, #fef3f5); +$ionic-color-pink-100-rgb: var(--ionic-color-pink-100-rgb, 254, 243, 245); +$ionic-color-pink-200: var(--ionic-color-pink-200, #fdeaee); +$ionic-color-pink-200-rgb: var(--ionic-color-pink-200-rgb, 253, 234, 238); +$ionic-color-pink-300: var(--ionic-color-pink-300, #fad3dc); +$ionic-color-pink-300-rgb: var(--ionic-color-pink-300-rgb, 250, 211, 220); +$ionic-color-pink-400: var(--ionic-color-pink-400, #f8b9c9); +$ionic-color-pink-400-rgb: var(--ionic-color-pink-400-rgb, 248, 185, 201); +$ionic-color-pink-500: var(--ionic-color-pink-500, #f69bb3); +$ionic-color-pink-500-rgb: var(--ionic-color-pink-500-rgb, 246, 155, 179); +$ionic-color-pink-600: var(--ionic-color-pink-600, #f3759a); +$ionic-color-pink-600-rgb: var(--ionic-color-pink-600-rgb, 243, 117, 154); +$ionic-color-pink-700: var(--ionic-color-pink-700, #f13b7d); +$ionic-color-pink-700-rgb: var(--ionic-color-pink-700-rgb, 241, 59, 125); +$ionic-color-pink-800: var(--ionic-color-pink-800, #dc3672); +$ionic-color-pink-800-rgb: var(--ionic-color-pink-800-rgb, 220, 54, 114); +$ionic-color-pink-900: var(--ionic-color-pink-900, #c53066); +$ionic-color-pink-900-rgb: var(--ionic-color-pink-900-rgb, 197, 48, 102); +$ionic-color-pink-1000: var(--ionic-color-pink-1000, #aa2a58); +$ionic-color-pink-1000-rgb: var(--ionic-color-pink-1000-rgb, 170, 42, 88); +$ionic-color-pink-1100: var(--ionic-color-pink-1100, #8b2248); +$ionic-color-pink-1100-rgb: var(--ionic-color-pink-1100-rgb, 139, 34, 72); +$ionic-color-pink-1200: var(--ionic-color-pink-1200, #621833); +$ionic-color-pink-1200-rgb: var(--ionic-color-pink-1200-rgb, 98, 24, 51); +$ionic-color-primary-100: var(--ionic-color-primary-100, #f2f4fd); +$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 242, 244, 253); +$ionic-color-primary-200: var(--ionic-color-primary-200, #e9ecfc); +$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 233, 236, 252); +$ionic-color-primary-300: var(--ionic-color-primary-300, #d0d7fa); +$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 208, 215, 250); +$ionic-color-primary-400: var(--ionic-color-primary-400, #b5c0f7); +$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 181, 192, 247); +$ionic-color-primary-500: var(--ionic-color-primary-500, #94a5f4); +$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 148, 165, 244); +$ionic-color-primary-600: var(--ionic-color-primary-600, #6986f2); +$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 105, 134, 242); +$ionic-color-primary-700: var(--ionic-color-primary-700, #105cef); +$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 16, 92, 239); +$ionic-color-primary-800: var(--ionic-color-primary-800, #0f54da); +$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 15, 84, 218); +$ionic-color-primary-900: var(--ionic-color-primary-900, #0d4bc3); +$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 13, 75, 195); +$ionic-color-primary-1000: var(--ionic-color-primary-1000, #0b41a9); +$ionic-color-primary-1000-rgb: var(--ionic-color-primary-1000-rgb, 11, 65, 169); +$ionic-color-primary-1100: var(--ionic-color-primary-1100, #09358a); +$ionic-color-primary-1100-rgb: var(--ionic-color-primary-1100-rgb, 9, 53, 138); +$ionic-color-primary-1200: var(--ionic-color-primary-1200, #072561); +$ionic-color-primary-1200-rgb: var(--ionic-color-primary-1200-rgb, 7, 37, 97); +$ionic-color-primary-base: var(--ionic-color-primary-base, #105cef); +$ionic-color-primary-base-rgb: var(--ionic-color-primary-base-rgb, 16, 92, 239); +$ionic-color-info-100: var(--ionic-color-info-100, #ebf9fe); +$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 235, 249, 254); +$ionic-color-info-200: var(--ionic-color-info-200, #dcf4fd); +$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 220, 244, 253); +$ionic-color-info-300: var(--ionic-color-info-300, #b3e9fc); +$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 179, 233, 252); +$ionic-color-info-400: var(--ionic-color-info-400, #80defa); +$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 128, 222, 250); +$ionic-color-info-500: var(--ionic-color-info-500, #27d3f9); +$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 39, 211, 249); +$ionic-color-info-600: var(--ionic-color-info-600, #22bbdc); +$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 34, 187, 220); +$ionic-color-info-700: var(--ionic-color-info-700, #1ea2bf); +$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 30, 162, 191); +$ionic-color-info-800: var(--ionic-color-info-800, #1988a0); +$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 25, 136, 160); +$ionic-color-info-900: var(--ionic-color-info-900, #146d81); +$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 20, 109, 129); +$ionic-color-info-1000: var(--ionic-color-info-1000, #0f5261); +$ionic-color-info-1000-rgb: var(--ionic-color-info-1000-rgb, 15, 82, 97); +$ionic-color-info-1100: var(--ionic-color-info-1100, #0a3741); +$ionic-color-info-1100-rgb: var(--ionic-color-info-1100-rgb, 10, 55, 65); +$ionic-color-info-1200: var(--ionic-color-info-1200, #051c21); +$ionic-color-info-1200-rgb: var(--ionic-color-info-1200-rgb, 5, 28, 33); +$ionic-color-info-base: var(--ionic-color-info-base, #1ea2bf); +$ionic-color-info-base-rgb: var(--ionic-color-info-base-rgb, 30, 162, 191); +$ionic-color-warning-100: var(--ionic-color-warning-100, #fff1ea); +$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 241, 234); +$ionic-color-warning-200: var(--ionic-color-warning-200, #ffe8db); +$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 232, 219); +$ionic-color-warning-300: var(--ionic-color-warning-300, #ffcfb1); +$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 207, 177); +$ionic-color-warning-400: var(--ionic-color-warning-400, #ffb37b); +$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 179, 123); +$ionic-color-warning-500: var(--ionic-color-warning-500, #ff9400); +$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 148, 0); +$ionic-color-warning-600: var(--ionic-color-warning-600, #e18300); +$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 131, 0); +$ionic-color-warning-700: var(--ionic-color-warning-700, #c37100); +$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 113, 0); +$ionic-color-warning-800: var(--ionic-color-warning-800, #a45f00); +$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 95, 0); +$ionic-color-warning-900: var(--ionic-color-warning-900, #844d00); +$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 77, 0); +$ionic-color-warning-1000: var(--ionic-color-warning-1000, #633a00); +$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 58, 0); +$ionic-color-warning-1100: var(--ionic-color-warning-1100, #422700); +$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 39, 0); +$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221400); +$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 20, 0); +$ionic-color-warning-base: var(--ionic-color-warning-base, #c37100); +$ionic-color-warning-base-rgb: var(--ionic-color-warning-base-rgb, 195, 113, 0); +$ionic-color-danger-100: var(--ionic-color-danger-100, #feeded); +$ionic-color-danger-100-rgb: var(--ionic-color-danger-100-rgb, 254, 237, 237); +$ionic-color-danger-200: var(--ionic-color-danger-200, #fde1e1); +$ionic-color-danger-200-rgb: var(--ionic-color-danger-200-rgb, 253, 225, 225); +$ionic-color-danger-300: var(--ionic-color-danger-300, #fcc1c1); +$ionic-color-danger-300-rgb: var(--ionic-color-danger-300-rgb, 252, 193, 193); +$ionic-color-danger-400: var(--ionic-color-danger-400, #faa1a1); +$ionic-color-danger-400-rgb: var(--ionic-color-danger-400-rgb, 250, 161, 161); +$ionic-color-danger-500: var(--ionic-color-danger-500, #f97d7d); +$ionic-color-danger-500-rgb: var(--ionic-color-danger-500-rgb, 249, 125, 125); +$ionic-color-danger-600: var(--ionic-color-danger-600, #f85151); +$ionic-color-danger-600-rgb: var(--ionic-color-danger-600-rgb, 248, 81, 81); +$ionic-color-danger-700: var(--ionic-color-danger-700, #e52929); +$ionic-color-danger-700-rgb: var(--ionic-color-danger-700-rgb, 229, 41, 41); +$ionic-color-danger-800: var(--ionic-color-danger-800, #bf2222); +$ionic-color-danger-800-rgb: var(--ionic-color-danger-800-rgb, 191, 34, 34); +$ionic-color-danger-900: var(--ionic-color-danger-900, #991b1b); +$ionic-color-danger-900-rgb: var(--ionic-color-danger-900-rgb, 153, 27, 27); +$ionic-color-danger-1000: var(--ionic-color-danger-1000, #761515); +$ionic-color-danger-1000-rgb: var(--ionic-color-danger-1000-rgb, 118, 21, 21); +$ionic-color-danger-1100: var(--ionic-color-danger-1100, #540f0f); +$ionic-color-danger-1100-rgb: var(--ionic-color-danger-1100-rgb, 84, 15, 15); +$ionic-color-danger-1200: var(--ionic-color-danger-1200, #330909); +$ionic-color-danger-1200-rgb: var(--ionic-color-danger-1200-rgb, 51, 9, 9); +$ionic-color-danger-base: var(--ionic-color-danger-base, #e52929); +$ionic-color-danger-base-rgb: var(--ionic-color-danger-base-rgb, 229, 41, 41); +$ionic-color-success-100: var(--ionic-color-success-100, #ebf9ec); +$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 235, 249, 236); +$ionic-color-success-200: var(--ionic-color-success-200, #dcf5de); +$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 220, 245, 222); +$ionic-color-success-300: var(--ionic-color-success-300, #b3ebb7); +$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 179, 235, 183); +$ionic-color-success-400: var(--ionic-color-success-400, #7fe089); +$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 127, 224, 137); +$ionic-color-success-500: var(--ionic-color-success-500, #23d643); +$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 35, 214, 67); +$ionic-color-success-600: var(--ionic-color-success-600, #1fbd3b); +$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 31, 189, 59); +$ionic-color-success-700: var(--ionic-color-success-700, #1ba433); +$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 27, 164, 51); +$ionic-color-success-800: var(--ionic-color-success-800, #178a2b); +$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 23, 138, 43); +$ionic-color-success-900: var(--ionic-color-success-900, #126f23); +$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 18, 111, 35); +$ionic-color-success-1000: var(--ionic-color-success-1000, #0e531a); +$ionic-color-success-1000-rgb: var(--ionic-color-success-1000-rgb, 14, 83, 26); +$ionic-color-success-1100: var(--ionic-color-success-1100, #093811); +$ionic-color-success-1100-rgb: var(--ionic-color-success-1100-rgb, 9, 56, 17); +$ionic-color-success-1200: var(--ionic-color-success-1200, #051d09); +$ionic-color-success-1200-rgb: var(--ionic-color-success-1200-rgb, 5, 29, 9); +$ionic-color-success-base: var(--ionic-color-success-base, #1ba433); +$ionic-color-success-base-rgb: var(--ionic-color-success-base-rgb, 27, 164, 51); +$ionic-z-index-0: var(--ionic-z-index-0, 0); +$ionic-z-index-1: var(--ionic-z-index-1, 100); +$ionic-z-index-2: var(--ionic-z-index-2, 200); +$ionic-z-index-3: var(--ionic-z-index-3, 300); +$ionic-z-index-4: var(--ionic-z-index-4, 400); +$ionic-z-index-500: var(--ionic-z-index-500, 500); +$ionic-z-index-bottom: var(--ionic-z-index-bottom, -99999); +$ionic-z-index-top: var(--ionic-z-index-top, 99999); +$ionic-scale-0: var(--ionic-scale-0, 0px); +$ionic-scale-100: var(--ionic-scale-100, 4px); +$ionic-scale-150: var(--ionic-scale-150, 6px); +$ionic-scale-200: var(--ionic-scale-200, 8px); +$ionic-scale-250: var(--ionic-scale-250, 10px); +$ionic-scale-300: var(--ionic-scale-300, 12px); +$ionic-scale-400: var(--ionic-scale-400, 16px); +$ionic-scale-500: var(--ionic-scale-500, 20px); +$ionic-scale-600: var(--ionic-scale-600, 24px); +$ionic-scale-700: var(--ionic-scale-700, 28px); +$ionic-scale-800: var(--ionic-scale-800, 32px); +$ionic-scale-900: var(--ionic-scale-900, 36px); +$ionic-scale-1000: var(--ionic-scale-1000, 40px); +$ionic-scale-1100: var(--ionic-scale-1100, 44px); +$ionic-scale-1200: var(--ionic-scale-1200, 48px); +$ionic-scale-1400: var(--ionic-scale-1400, 56px); +$ionic-scale-1600: var(--ionic-scale-1600, 64px); +$ionic-scale-1800: var(--ionic-scale-1800, 72px); +$ionic-scale-2000: var(--ionic-scale-2000, 80px); +$ionic-scale-2400: var(--ionic-scale-2400, 96px); +$ionic-scale-3200: var(--ionic-scale-3200, 128px); +$ionic-scale-4000: var(--ionic-scale-4000, 160px); +$ionic-scale-5000: var(--ionic-scale-5000, 200px); +$ionic-scale-6200: var(--ionic-scale-6200, 248px); +$ionic-scale-7400: var(--ionic-scale-7400, 296px); +$ionic-scale-9000: var(--ionic-scale-9000, 360px); +$ionic-scale-025: var(--ionic-scale-025, 1px); +$ionic-scale-050: var(--ionic-scale-050, 2px); +$ionic-scale-075: var(--ionic-scale-075, 3px); +$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif); +$ionic-state-focus-0: var(--ionic-state-focus-0, none); +$ionic-state-focus-1: var(--ionic-state-focus-1, #9ec4fd); +$ionic-state-focus-1-rgb: var(--ionic-state-focus-1-rgb, 158, 196, 253); +$ionic-state-focus-2: var(--ionic-state-focus-2, #ffafaf); +$ionic-state-focus-2-rgb: var(--ionic-state-focus-2-rgb, 255, 175, 175); +$ionic-state-disabled: var(--ionic-state-disabled, #ffffff99); +$ionic-state-hover: var(--ionic-state-hover, #2424240a); +$ionic-state-pressed: var(--ionic-state-pressed, #24242414); + +$ionic-display-sm-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-800, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-1100, + text-transform: none, + text-decoration: none, ); -$ionic-elevation-4: var( - --ionic-elevation-4, - 0px 3px 14px 0px rgba(0, 0, 0, 0.12), - 0px 20px 48px 0px rgba(0, 0, 0, 0.12) + +$ionic-display-sm-light: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-800, + font-weight: $ionic-font-weight-light, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-1100, + text-transform: none, + text-decoration: none, +); + +$ionic-display-lg-light: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-900, + font-weight: $ionic-font-weight-light, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-1200, + text-transform: none, + text-decoration: none, +); + +$ionic-display-lg-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-900, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-1200, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h1-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-700, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h1-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-700, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h1-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-700, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h1-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-700, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h2-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-650, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h2-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-650, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h2-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-650, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h2-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-650, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-900, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h3-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-600, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-800, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h3-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-600, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-800, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h3-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-600, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-800, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h3-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-600, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-800, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h4-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-550, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h4-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-550, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h4-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-550, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h4-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-550, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h5-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-500, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h5-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-500, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h5-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-500, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h5-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-500, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h6-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-450, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h6-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-450, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h6-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-450, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-heading-h6-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-450, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-700, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-body-sm-link: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: underline, +); + +$ionic-body-sm-italic: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-md-link: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: underline, +); + +$ionic-body-md-italic: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-lg-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-lg-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-lg-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-lg-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-body-lg-link: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: underline, +); + +$ionic-body-lg-italic: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-0, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-action-sm: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-1, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-action-md: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-350, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-1, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-action-lg: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-400, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-1, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-action-xl: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-500, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-1, + line-height: $ionic-line-height-600, + text-transform: none, + text-decoration: none, +); + +$ionic-overline-regular: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-regular, + letter-spacing: $ionic-letter-spacing-2, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-overline-medium: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-medium, + letter-spacing: $ionic-letter-spacing-2, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-overline-semi-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-2, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, +); + +$ionic-overline-bold: ( + font-family: $ionic-font-family, + font-size: $ionic-font-size-300, + font-weight: $ionic-font-weight-bold, + letter-spacing: $ionic-letter-spacing-2, + line-height: $ionic-line-height-400, + text-transform: none, + text-decoration: none, ); diff --git a/core/src/foundations/tokens/README.md b/core/src/foundations/tokens/README.md new file mode 100644 index 0000000000..12df47e1af --- /dev/null +++ b/core/src/foundations/tokens/README.md @@ -0,0 +1,5 @@ +# Design Tokens JSON Files + +Please, do not directly change the JSON files on this token folder. They should come from the UX/UI Team (from Figma or any used source). + +Any changes done here should be validated with UX/UI and Framework teams. diff --git a/core/src/foundations/tokens/effect.styles.tokens.json b/core/src/foundations/tokens/effect.styles.tokens.json new file mode 100644 index 0000000000..c6ffbb39b9 --- /dev/null +++ b/core/src/foundations/tokens/effect.styles.tokens.json @@ -0,0 +1,154 @@ +{ + "Elevation-100": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "3px", + "blur": "9px", + "spread": "0px", + "color": "#00000012" + }, + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "4px", + "spread": "0px", + "color": "#0000000a" + } + ] + }, + "Elevation-200": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "8px", + "blur": "25px", + "spread": "0px", + "color": "#00000014" + }, + { + "offsetX": "0px", + "offsetY": "1px", + "blur": "5px", + "spread": "0px", + "color": "#0000000d" + } + ] + }, + "Elevation-300": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "6px", + "blur": "32px", + "spread": "0px", + "color": "#00000029" + }, + { + "offsetX": "0px", + "offsetY": "2px", + "blur": "7px", + "spread": "0px", + "color": "#0000000d" + } + ] + }, + "Elevation-400": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "15px", + "blur": "48px", + "spread": "0px", + "color": "#0000002e" + }, + { + "offsetX": "0px", + "offsetY": "3px", + "blur": "12px", + "spread": "0px", + "color": "#0000001f" + } + ] + }, + "Elevation-500": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "3px", + "blur": "9px", + "spread": "0px", + "color": "#062b6312" + }, + { + "offsetX": "0px", + "offsetY": "0px", + "blur": "4px", + "spread": "0px", + "color": "#062b630a" + } + ] + }, + "Elevation-600": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "8px", + "blur": "25px", + "spread": "0px", + "color": "#062b6314" + }, + { + "offsetX": "0px", + "offsetY": "1px", + "blur": "5px", + "spread": "0px", + "color": "#062b630d" + } + ] + }, + "Elevation-700": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "15px", + "blur": "32px", + "spread": "0px", + "color": "#062b6317" + }, + { + "offsetX": "0px", + "offsetY": "2px", + "blur": "7px", + "spread": "0px", + "color": "#062b630d" + } + ] + }, + "Elevation-800": { + "$type": "shadow", + "$value": [ + { + "offsetX": "0px", + "offsetY": "20px", + "blur": "48px", + "spread": "0px", + "color": "#062b631f" + }, + { + "offsetX": "0px", + "offsetY": "3px", + "blur": "14px", + "spread": "0px", + "color": "#062b631f" + } + ] + } +} \ No newline at end of file diff --git a/core/src/foundations/tokens/manifest.json b/core/src/foundations/tokens/manifest.json new file mode 100644 index 0000000000..4c38474aba --- /dev/null +++ b/core/src/foundations/tokens/manifest.json @@ -0,0 +1,30 @@ +{ + "name": "Design Tokens", + "collections": { + "Primitives": { + "modes": { + "Value": [ + "Primitives.Value.tokens.json" + ] + } + }, + "Theme": { + "modes": { + "Ionic": [ + "Theme.Ionic.tokens.json" + ] + } + } + }, + "styles": { + "text": [ + "text.styles.tokens.json" + ], + "effect": [ + "effect.styles.tokens.json" + ], + "color": [ + "color.styles.tokens.json" + ] + } +} \ No newline at end of file diff --git a/core/src/foundations/tokens/primitives.value.tokens.json b/core/src/foundations/tokens/primitives.value.tokens.json new file mode 100644 index 0000000000..7fb0cb3ba1 --- /dev/null +++ b/core/src/foundations/tokens/primitives.value.tokens.json @@ -0,0 +1,1196 @@ +{ + "font-size": { + "275": { + "$type": "dimension", + "$value": "11px" + }, + "300": { + "$type": "dimension", + "$value": "12px" + }, + "350": { + "$type": "dimension", + "$value": "14px" + }, + "400": { + "$type": "dimension", + "$value": "16px" + }, + "450": { + "$type": "dimension", + "$value": "18px" + }, + "500": { + "$type": "dimension", + "$value": "20px" + }, + "550": { + "$type": "dimension", + "$value": "22px" + }, + "600": { + "$type": "dimension", + "$value": "24px" + }, + "650": { + "$type": "dimension", + "$value": "26px" + }, + "700": { + "$type": "dimension", + "$value": "28px" + }, + "800": { + "$type": "dimension", + "$value": "32px" + }, + "900": { + "$type": "dimension", + "$value": "36px" + } + }, + "font-weight": { + "thin": { + "$type": "dimension", + "$value": "100" + }, + "extra-light": { + "$type": "dimension", + "$value": "200" + }, + "light": { + "$type": "dimension", + "$value": "300" + }, + "regular": { + "$type": "dimension", + "$value": "400" + }, + "medium": { + "$type": "dimension", + "$value": "500" + }, + "semi-bold": { + "$type": "dimension", + "$value": "600" + }, + "bold": { + "$type": "dimension", + "$value": "700" + }, + "extra-bold": { + "$type": "dimension", + "$value": "800" + }, + "black": { + "$type": "dimension", + "$value": "900" + } + }, + "letter-spacing": { + "0": { + "$type": "string", + "$value": "0" + }, + "1": { + "$type": "string", + "$value": "1%" + }, + "2": { + "$type": "string", + "$value": "1.5%" + } + }, + "line-height": { + "300": { + "$type": "dimension", + "$value": "{scale.300}" + }, + "400": { + "$type": "dimension", + "$value": "{scale.400}" + }, + "500": { + "$type": "dimension", + "$value": "{scale.500}" + }, + "600": { + "$type": "dimension", + "$value": "{scale.600}" + }, + "700": { + "$type": "dimension", + "$value": "{scale.700}" + }, + "800": { + "$type": "dimension", + "$value": "{scale.800}" + }, + "900": { + "$type": "dimension", + "$value": "{scale.900}" + }, + "1100": { + "$type": "dimension", + "$value": "{scale.1100}" + }, + "1200": { + "$type": "dimension", + "$value": "{scale.1200}" + }, + "full": { + "$type": "string", + "$value": "100%" + } + }, + "space": { + "0": { + "$type": "dimension", + "$value": "{scale.0}" + }, + "050": { + "$type": "dimension", + "$value": "{scale.050}" + }, + "100": { + "$type": "dimension", + "$value": "{scale.100}" + }, + "150": { + "$type": "dimension", + "$value": "{scale.150}" + }, + "200": { + "$type": "dimension", + "$value": "{scale.200}" + }, + "250": { + "$type": "dimension", + "$value": "{scale.250}" + }, + "300": { + "$type": "dimension", + "$value": "{scale.300}" + }, + "400": { + "$type": "dimension", + "$value": "{scale.400}" + }, + "500": { + "$type": "dimension", + "$value": "{scale.500}" + }, + "600": { + "$type": "dimension", + "$value": "{scale.600}" + }, + "700": { + "$type": "dimension", + "$value": "{scale.700}" + }, + "800": { + "$type": "dimension", + "$value": "{scale.800}" + }, + "900": { + "$type": "dimension", + "$value": "{scale.900}" + }, + "1000": { + "$type": "dimension", + "$value": "{scale.1000}" + }, + "1200": { + "$type": "dimension", + "$value": "{scale.1200}" + } + }, + "border-radius": { + "0": { + "$type": "dimension", + "$value": "{scale.0}" + }, + "050": { + "$type": "dimension", + "$value": "{scale.050}" + }, + "100": { + "$type": "dimension", + "$value": "{scale.100}" + }, + "200": { + "$type": "dimension", + "$value": "{scale.200}" + }, + "300": { + "$type": "dimension", + "$value": "{scale.300}" + }, + "400": { + "$type": "dimension", + "$value": "{scale.400}" + }, + "800": { + "$type": "dimension", + "$value": "{scale.800}" + }, + "1000": { + "$type": "dimension", + "$value": "{scale.1000}" + }, + "full": { + "$type": "dimension", + "$value": "999px" + } + }, + "border-size": { + "0": { + "$type": "dimension", + "$value": "{scale.0}" + }, + "025": { + "$type": "dimension", + "$value": "{scale.025}" + }, + "050": { + "$type": "dimension", + "$value": "{scale.050}" + }, + "075": { + "$type": "dimension", + "$value": "{scale.075}" + } + }, + "border-style": { + "none": { + "$type": "string", + "$value": "none" + }, + "solid": { + "$type": "string", + "$value": "solid" + }, + "dashed": { + "$type": "string", + "$value": "dashed" + }, + "dotted": { + "$type": "string", + "$value": "dotted" + } + }, + "color": { + "base": { + "white": { + "$type": "color", + "$value": "#ffffff" + }, + "black": { + "$type": "color", + "$value": "#111111" + } + }, + "neutral": { + "100": { + "$type": "color", + "$value": "#f1f1f1" + }, + "200": { + "$type": "color", + "$value": "#e7e7e7" + }, + "300": { + "$type": "color", + "$value": "#cfcfcf" + }, + "400": { + "$type": "color", + "$value": "#b9b9b9" + }, + "500": { + "$type": "color", + "$value": "#a2a2a2" + }, + "600": { + "$type": "color", + "$value": "#8c8c8c" + }, + "700": { + "$type": "color", + "$value": "#777777" + }, + "800": { + "$type": "color", + "$value": "#626262" + }, + "900": { + "$type": "color", + "$value": "#4e4e4e" + }, + "1000": { + "$type": "color", + "$value": "#3b3b3b" + }, + "1100": { + "$type": "color", + "$value": "#292929" + }, + "1200": { + "$type": "color", + "$value": "#242424" + } + }, + "red": { + "100": { + "$type": "color", + "$value": "#feeded" + }, + "200": { + "$type": "color", + "$value": "#fde1e1" + }, + "300": { + "$type": "color", + "$value": "#fcc1c1" + }, + "400": { + "$type": "color", + "$value": "#faa1a1" + }, + "500": { + "$type": "color", + "$value": "#f97d7d" + }, + "600": { + "$type": "color", + "$value": "#f85151" + }, + "700": { + "$type": "color", + "$value": "#e52929" + }, + "800": { + "$type": "color", + "$value": "#bf2222" + }, + "900": { + "$type": "color", + "$value": "#991b1b" + }, + "1000": { + "$type": "color", + "$value": "#761515" + }, + "1100": { + "$type": "color", + "$value": "#540f0f" + }, + "1200": { + "$type": "color", + "$value": "#330909" + } + }, + "pumpkin": { + "100": { + "$type": "color", + "$value": "#feedea" + }, + "200": { + "$type": "color", + "$value": "#fde0db" + }, + "300": { + "$type": "color", + "$value": "#fbbdb1" + }, + "400": { + "$type": "color", + "$value": "#f9947c" + }, + "500": { + "$type": "color", + "$value": "#f75d07" + }, + "600": { + "$type": "color", + "$value": "#da5206" + }, + "700": { + "$type": "color", + "$value": "#bd4705" + }, + "800": { + "$type": "color", + "$value": "#9f3c05" + }, + "900": { + "$type": "color", + "$value": "#803004" + }, + "1000": { + "$type": "color", + "$value": "#602403" + }, + "1100": { + "$type": "color", + "$value": "#401802" + }, + "1200": { + "$type": "color", + "$value": "#210c01" + } + }, + "orange": { + "100": { + "$type": "color", + "$value": "#fff1ea" + }, + "200": { + "$type": "color", + "$value": "#ffe8db" + }, + "300": { + "$type": "color", + "$value": "#ffcfb1" + }, + "400": { + "$type": "color", + "$value": "#ffb37b" + }, + "500": { + "$type": "color", + "$value": "#ff9400" + }, + "600": { + "$type": "color", + "$value": "#e18300" + }, + "700": { + "$type": "color", + "$value": "#c37100" + }, + "800": { + "$type": "color", + "$value": "#a45f00" + }, + "900": { + "$type": "color", + "$value": "#844d00" + }, + "1000": { + "$type": "color", + "$value": "#633a00" + }, + "1100": { + "$type": "color", + "$value": "#422700" + }, + "1200": { + "$type": "color", + "$value": "#221400" + } + }, + "yellow": { + "100": { + "$type": "color", + "$value": "#fff9ea" + }, + "200": { + "$type": "color", + "$value": "#fff5db" + }, + "300": { + "$type": "color", + "$value": "#ffebb1" + }, + "400": { + "$type": "color", + "$value": "#ffe07b" + }, + "500": { + "$type": "color", + "$value": "#ffd600" + }, + "600": { + "$type": "color", + "$value": "#e1bd00" + }, + "700": { + "$type": "color", + "$value": "#c3a400" + }, + "800": { + "$type": "color", + "$value": "#a48a00" + }, + "900": { + "$type": "color", + "$value": "#846f00" + }, + "1000": { + "$type": "color", + "$value": "#635300" + }, + "1100": { + "$type": "color", + "$value": "#423800" + }, + "1200": { + "$type": "color", + "$value": "#221d00" + } + }, + "lime": { + "100": { + "$type": "color", + "$value": "#f3faea" + }, + "200": { + "$type": "color", + "$value": "#eaf7db" + }, + "300": { + "$type": "color", + "$value": "#d3efb2" + }, + "400": { + "$type": "color", + "$value": "#bbe77d" + }, + "500": { + "$type": "color", + "$value": "#a0df18" + }, + "600": { + "$type": "color", + "$value": "#8dc515" + }, + "700": { + "$type": "color", + "$value": "#7aab12" + }, + "800": { + "$type": "color", + "$value": "#678f0f" + }, + "900": { + "$type": "color", + "$value": "#53730c" + }, + "1000": { + "$type": "color", + "$value": "#3e5709" + }, + "1100": { + "$type": "color", + "$value": "#2a3a06" + }, + "1200": { + "$type": "color", + "$value": "#151e03" + } + }, + "green": { + "100": { + "$type": "color", + "$value": "#ebf9ec" + }, + "200": { + "$type": "color", + "$value": "#dcf5de" + }, + "300": { + "$type": "color", + "$value": "#b3ebb7" + }, + "400": { + "$type": "color", + "$value": "#7fe089" + }, + "500": { + "$type": "color", + "$value": "#23d643" + }, + "600": { + "$type": "color", + "$value": "#1fbd3b" + }, + "700": { + "$type": "color", + "$value": "#1ba433" + }, + "800": { + "$type": "color", + "$value": "#178a2b" + }, + "900": { + "$type": "color", + "$value": "#126f23" + }, + "1000": { + "$type": "color", + "$value": "#0e531a" + }, + "1100": { + "$type": "color", + "$value": "#093811" + }, + "1200": { + "$type": "color", + "$value": "#051d09" + } + }, + "teal": { + "100": { + "$type": "color", + "$value": "#eaf8f5" + }, + "200": { + "$type": "color", + "$value": "#dbf3ee" + }, + "300": { + "$type": "color", + "$value": "#b1e7dd" + }, + "400": { + "$type": "color", + "$value": "#7bdbca" + }, + "500": { + "$type": "color", + "$value": "#00cfb7" + }, + "600": { + "$type": "color", + "$value": "#00b7a2" + }, + "700": { + "$type": "color", + "$value": "#009e8c" + }, + "800": { + "$type": "color", + "$value": "#008576" + }, + "900": { + "$type": "color", + "$value": "#006b5f" + }, + "1000": { + "$type": "color", + "$value": "#005147" + }, + "1100": { + "$type": "color", + "$value": "#003630" + }, + "1200": { + "$type": "color", + "$value": "#001c19" + } + }, + "aqua": { + "100": { + "$type": "color", + "$value": "#ebf9fe" + }, + "200": { + "$type": "color", + "$value": "#dcf4fd" + }, + "300": { + "$type": "color", + "$value": "#b3e9fc" + }, + "400": { + "$type": "color", + "$value": "#80defa" + }, + "500": { + "$type": "color", + "$value": "#27d3f9" + }, + "600": { + "$type": "color", + "$value": "#22bbdc" + }, + "700": { + "$type": "color", + "$value": "#1ea2bf" + }, + "800": { + "$type": "color", + "$value": "#1988a0" + }, + "900": { + "$type": "color", + "$value": "#146d81" + }, + "1000": { + "$type": "color", + "$value": "#0f5261" + }, + "1100": { + "$type": "color", + "$value": "#0a3741" + }, + "1200": { + "$type": "color", + "$value": "#051c21" + } + }, + "blue": { + "100": { + "$type": "color", + "$value": "#f2f4fd" + }, + "200": { + "$type": "color", + "$value": "#e9ecfc" + }, + "300": { + "$type": "color", + "$value": "#d0d7fa" + }, + "400": { + "$type": "color", + "$value": "#b5c0f7" + }, + "500": { + "$type": "color", + "$value": "#94a5f4" + }, + "600": { + "$type": "color", + "$value": "#6986f2" + }, + "700": { + "$type": "color", + "$value": "#105cef" + }, + "800": { + "$type": "color", + "$value": "#0f54da" + }, + "900": { + "$type": "color", + "$value": "#0d4bc3" + }, + "1000": { + "$type": "color", + "$value": "#0b41a9" + }, + "1100": { + "$type": "color", + "$value": "#09358a" + }, + "1200": { + "$type": "color", + "$value": "#072561" + } + }, + "indigo": { + "100": { + "$type": "color", + "$value": "#f3f2fb" + }, + "200": { + "$type": "color", + "$value": "#eae9f9" + }, + "300": { + "$type": "color", + "$value": "#d3d1f2" + }, + "400": { + "$type": "color", + "$value": "#bab5eb" + }, + "500": { + "$type": "color", + "$value": "#9d95e4" + }, + "600": { + "$type": "color", + "$value": "#786bdd" + }, + "700": { + "$type": "color", + "$value": "#411bd5" + }, + "800": { + "$type": "color", + "$value": "#3b19c3" + }, + "900": { + "$type": "color", + "$value": "#3516ae" + }, + "1000": { + "$type": "color", + "$value": "#2e1397" + }, + "1100": { + "$type": "color", + "$value": "#26107b" + }, + "1200": { + "$type": "color", + "$value": "#1a0b57" + } + }, + "violet": { + "100": { + "$type": "color", + "$value": "#f5f2fe" + }, + "200": { + "$type": "color", + "$value": "#eee9fd" + }, + "300": { + "$type": "color", + "$value": "#dcd1fb" + }, + "400": { + "$type": "color", + "$value": "#c9b6f9" + }, + "500": { + "$type": "color", + "$value": "#b396f6" + }, + "600": { + "$type": "color", + "$value": "#9a6cf4" + }, + "700": { + "$type": "color", + "$value": "#7c20f2" + }, + "800": { + "$type": "color", + "$value": "#711ddd" + }, + "900": { + "$type": "color", + "$value": "#651ac5" + }, + "1000": { + "$type": "color", + "$value": "#5817ab" + }, + "1100": { + "$type": "color", + "$value": "#48128c" + }, + "1200": { + "$type": "color", + "$value": "#330d63" + } + }, + "purple": { + "100": { + "$type": "color", + "$value": "#f9f3fe" + }, + "200": { + "$type": "color", + "$value": "#f5eafd" + }, + "300": { + "$type": "color", + "$value": "#e9d3fa" + }, + "400": { + "$type": "color", + "$value": "#deb9f8" + }, + "500": { + "$type": "color", + "$value": "#d29bf6" + }, + "600": { + "$type": "color", + "$value": "#c575f3" + }, + "700": { + "$type": "color", + "$value": "#b73cf1" + }, + "800": { + "$type": "color", + "$value": "#a737dc" + }, + "900": { + "$type": "color", + "$value": "#9531c5" + }, + "1000": { + "$type": "color", + "$value": "#812aaa" + }, + "1100": { + "$type": "color", + "$value": "#6a238b" + }, + "1200": { + "$type": "color", + "$value": "#4b1862" + } + }, + "magenta": { + "100": { + "$type": "color", + "$value": "#fdf3fb" + }, + "200": { + "$type": "color", + "$value": "#fcebf8" + }, + "300": { + "$type": "color", + "$value": "#f9d4f1" + }, + "400": { + "$type": "color", + "$value": "#f6bcea" + }, + "500": { + "$type": "color", + "$value": "#f39fe3" + }, + "600": { + "$type": "color", + "$value": "#f07cdb" + }, + "700": { + "$type": "color", + "$value": "#ed4ad3" + }, + "800": { + "$type": "color", + "$value": "#d844c1" + }, + "900": { + "$type": "color", + "$value": "#c13cac" + }, + "1000": { + "$type": "color", + "$value": "#a83495" + }, + "1100": { + "$type": "color", + "$value": "#892b7a" + }, + "1200": { + "$type": "color", + "$value": "#611e56" + } + }, + "pink": { + "100": { + "$type": "color", + "$value": "#fef3f5" + }, + "200": { + "$type": "color", + "$value": "#fdeaee" + }, + "300": { + "$type": "color", + "$value": "#fad3dc" + }, + "400": { + "$type": "color", + "$value": "#f8b9c9" + }, + "500": { + "$type": "color", + "$value": "#f69bb3" + }, + "600": { + "$type": "color", + "$value": "#f3759a" + }, + "700": { + "$type": "color", + "$value": "#f13b7d" + }, + "800": { + "$type": "color", + "$value": "#dc3672" + }, + "900": { + "$type": "color", + "$value": "#c53066" + }, + "1000": { + "$type": "color", + "$value": "#aa2a58" + }, + "1100": { + "$type": "color", + "$value": "#8b2248" + }, + "1200": { + "$type": "color", + "$value": "#621833" + } + } + }, + "z-index": { + "0": { + "$type": "dimension", + "$value": "0" + }, + "1": { + "$type": "dimension", + "$value": "100" + }, + "2": { + "$type": "dimension", + "$value": "200" + }, + "3": { + "$type": "dimension", + "$value": "300" + }, + "4": { + "$type": "dimension", + "$value": "400" + }, + "500": { + "$type": "dimension", + "$value": "500" + }, + "bottom": { + "$type": "dimension", + "$value": "-99999" + }, + "top": { + "$type": "dimension", + "$value": "99999" + } + }, + "scale": { + "0": { + "$type": "dimension", + "$value": "0px" + }, + "100": { + "$type": "dimension", + "$value": "4px" + }, + "150": { + "$type": "dimension", + "$value": "6px" + }, + "200": { + "$type": "dimension", + "$value": "8px" + }, + "250": { + "$type": "dimension", + "$value": "10px" + }, + "300": { + "$type": "dimension", + "$value": "12px" + }, + "400": { + "$type": "dimension", + "$value": "16px" + }, + "500": { + "$type": "dimension", + "$value": "20px" + }, + "600": { + "$type": "dimension", + "$value": "24px" + }, + "700": { + "$type": "dimension", + "$value": "28px" + }, + "800": { + "$type": "dimension", + "$value": "32px" + }, + "900": { + "$type": "dimension", + "$value": "36px" + }, + "1000": { + "$type": "dimension", + "$value": "40px" + }, + "1100": { + "$type": "dimension", + "$value": "44px" + }, + "1200": { + "$type": "dimension", + "$value": "48px" + }, + "1400": { + "$type": "dimension", + "$value": "56px" + }, + "1600": { + "$type": "dimension", + "$value": "64px" + }, + "1800": { + "$type": "dimension", + "$value": "72px" + }, + "2000": { + "$type": "dimension", + "$value": "80px" + }, + "2400": { + "$type": "dimension", + "$value": "96px" + }, + "3200": { + "$type": "dimension", + "$value": "128px" + }, + "4000": { + "$type": "dimension", + "$value": "160px" + }, + "5000": { + "$type": "dimension", + "$value": "200px" + }, + "6200": { + "$type": "dimension", + "$value": "248px" + }, + "7400": { + "$type": "dimension", + "$value": "296px" + }, + "9000": { + "$type": "dimension", + "$value": "360px" + }, + "025": { + "$type": "dimension", + "$value": "1px" + }, + "050": { + "$type": "dimension", + "$value": "2px" + }, + "075": { + "$type": "dimension", + "$value": "3px" + } + } +} diff --git a/core/src/foundations/tokens/text.styles.tokens.json b/core/src/foundations/tokens/text.styles.tokens.json new file mode 100644 index 0000000000..fffb0ad2fb --- /dev/null +++ b/core/src/foundations/tokens/text.styles.tokens.json @@ -0,0 +1,682 @@ +{ + "Display": { + "SM": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "32px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "44px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Light": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "32px", + "fontWeight": 300, + "letterSpacing": "0%", + "lineHeight": "44px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "LG": { + "Light": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "36px", + "fontWeight": 300, + "letterSpacing": "0%", + "lineHeight": "48px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "36px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "48px", + "textTransform": "none", + "textDecoration": "none" + } + } + } + }, + "Heading": { + "H1": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "28px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "28px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "28px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "28px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "H2": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "26px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "26px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "26px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "26px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "36px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "H3": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "24px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "32px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "24px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "32px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "24px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "32px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "24px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "32px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "H4": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "22px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "22px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "22px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "22px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "H5": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "20px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "20px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "20px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "20px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "H6": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "18px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "18px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "18px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "18px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "28px", + "textTransform": "none", + "textDecoration": "none" + } + } + } + }, + "Body": { + "SM": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Link": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "underline" + } + }, + "Italic": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "MD": { + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Link": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "underline" + } + }, + "Italic": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "LG": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 500, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 700, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Link": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "underline" + } + }, + "Italic": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 400, + "letterSpacing": "0%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + } + } + }, + "Action": { + "SM": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 500, + "letterSpacing": "1%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "MD": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "14px", + "fontWeight": 500, + "letterSpacing": "1%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "LG": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "16px", + "fontWeight": 500, + "letterSpacing": "1%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "XL": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "20px", + "fontWeight": 500, + "letterSpacing": "1%", + "lineHeight": "24px", + "textTransform": "none", + "textDecoration": "none" + } + } + }, + "Overline": { + "Regular": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 400, + "letterSpacing": "1.5%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Medium": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 500, + "letterSpacing": "1.5%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Semi Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 700, + "letterSpacing": "1.5%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + }, + "Bold": { + "$type": "typography", + "$value": { + "fontFamily": "Inter", + "fontSize": "12px", + "fontWeight": 700, + "letterSpacing": "1.5%", + "lineHeight": "16px", + "textTransform": "none", + "textDecoration": "none" + } + } + } +} \ No newline at end of file diff --git a/core/src/foundations/tokens/theme/theme.ionic.tokens.json b/core/src/foundations/tokens/theme/theme.ionic.tokens.json new file mode 100644 index 0000000000..404144ec34 --- /dev/null +++ b/core/src/foundations/tokens/theme/theme.ionic.tokens.json @@ -0,0 +1,308 @@ +{ + "font-family": { + "Inter": { + "$type": "string", + "$value": "Inter" + } + }, + "color": { + "primary": { + "100": { + "$type": "color", + "$value": "{color.blue.100}" + }, + "200": { + "$type": "color", + "$value": "{color.blue.200}" + }, + "300": { + "$type": "color", + "$value": "{color.blue.300}" + }, + "400": { + "$type": "color", + "$value": "{color.blue.400}" + }, + "500": { + "$type": "color", + "$value": "{color.blue.500}" + }, + "600": { + "$type": "color", + "$value": "{color.blue.600}" + }, + "700": { + "$type": "color", + "$value": "{color.blue.700}" + }, + "800": { + "$type": "color", + "$value": "{color.blue.800}" + }, + "900": { + "$type": "color", + "$value": "{color.blue.900}" + }, + "1000": { + "$type": "color", + "$value": "{color.blue.1000}" + }, + "1100": { + "$type": "color", + "$value": "{color.blue.1100}" + }, + "1200": { + "$type": "color", + "$value": "{color.blue.1200}" + }, + "base": { + "$type": "color", + "$value": "{color.primary.700}" + } + }, + "info": { + "100": { + "$type": "color", + "$value": "{color.aqua.100}" + }, + "200": { + "$type": "color", + "$value": "{color.aqua.200}" + }, + "300": { + "$type": "color", + "$value": "{color.aqua.300}" + }, + "400": { + "$type": "color", + "$value": "{color.aqua.400}" + }, + "500": { + "$type": "color", + "$value": "{color.aqua.500}" + }, + "600": { + "$type": "color", + "$value": "{color.aqua.600}" + }, + "700": { + "$type": "color", + "$value": "{color.aqua.700}" + }, + "800": { + "$type": "color", + "$value": "{color.aqua.800}" + }, + "900": { + "$type": "color", + "$value": "{color.aqua.900}" + }, + "1000": { + "$type": "color", + "$value": "{color.aqua.1000}" + }, + "1100": { + "$type": "color", + "$value": "{color.aqua.1100}" + }, + "1200": { + "$type": "color", + "$value": "{color.aqua.1200}" + }, + "base": { + "$type": "color", + "$value": "{color.info.700}" + } + }, + "warning": { + "100": { + "$type": "color", + "$value": "{color.orange.100}" + }, + "200": { + "$type": "color", + "$value": "{color.orange.200}" + }, + "300": { + "$type": "color", + "$value": "{color.orange.300}" + }, + "400": { + "$type": "color", + "$value": "{color.orange.400}" + }, + "500": { + "$type": "color", + "$value": "{color.orange.500}" + }, + "600": { + "$type": "color", + "$value": "{color.orange.600}" + }, + "700": { + "$type": "color", + "$value": "{color.orange.700}" + }, + "800": { + "$type": "color", + "$value": "{color.orange.800}" + }, + "900": { + "$type": "color", + "$value": "{color.orange.900}" + }, + "1000": { + "$type": "color", + "$value": "{color.orange.1000}" + }, + "1100": { + "$type": "color", + "$value": "{color.orange.1100}" + }, + "1200": { + "$type": "color", + "$value": "{color.orange.1200}" + }, + "base": { + "$type": "color", + "$value": "{color.orange.700}" + } + }, + "danger": { + "100": { + "$type": "color", + "$value": "{color.red.100}" + }, + "200": { + "$type": "color", + "$value": "{color.red.200}" + }, + "300": { + "$type": "color", + "$value": "{color.red.300}" + }, + "400": { + "$type": "color", + "$value": "{color.red.400}" + }, + "500": { + "$type": "color", + "$value": "{color.red.500}" + }, + "600": { + "$type": "color", + "$value": "{color.red.600}" + }, + "700": { + "$type": "color", + "$value": "{color.red.700}" + }, + "800": { + "$type": "color", + "$value": "{color.red.800}" + }, + "900": { + "$type": "color", + "$value": "{color.red.900}" + }, + "1000": { + "$type": "color", + "$value": "{color.red.1000}" + }, + "1100": { + "$type": "color", + "$value": "{color.red.1100}" + }, + "1200": { + "$type": "color", + "$value": "{color.red.1200}" + }, + "base": { + "$type": "color", + "$value": "{color.danger.700}" + } + }, + "success": { + "100": { + "$type": "color", + "$value": "{color.green.100}" + }, + "200": { + "$type": "color", + "$value": "{color.green.200}" + }, + "300": { + "$type": "color", + "$value": "{color.green.300}" + }, + "400": { + "$type": "color", + "$value": "{color.green.400}" + }, + "500": { + "$type": "color", + "$value": "{color.green.500}" + }, + "600": { + "$type": "color", + "$value": "{color.green.600}" + }, + "700": { + "$type": "color", + "$value": "{color.green.700}" + }, + "800": { + "$type": "color", + "$value": "{color.green.800}" + }, + "900": { + "$type": "color", + "$value": "{color.green.900}" + }, + "1000": { + "$type": "color", + "$value": "{color.green.1000}" + }, + "1100": { + "$type": "color", + "$value": "{color.green.1100}" + }, + "1200": { + "$type": "color", + "$value": "{color.green.1200}" + }, + "base": { + "$type": "color", + "$value": "{color.success.700}" + } + } + }, + "state": { + "focus": { + "0": { + "$type": "string", + "$value": "none" + }, + "1": { + "$type": "color", + "$value": "#9ec4fd" + }, + "2": { + "$type": "color", + "$value": "#ffafaf" + } + }, + "disabled": { + "$type": "color", + "$value": "#ffffff99" + }, + "hover": { + "$type": "color", + "$value": "#2424240a" + }, + "pressed": { + "$type": "color", + "$value": "#24242414" + } + } +} diff --git a/core/src/themes/mixins.scss b/core/src/themes/mixins.scss index 3cc5dc1537..1b7297aef6 100644 --- a/core/src/themes/mixins.scss +++ b/core/src/themes/mixins.scss @@ -112,6 +112,21 @@ opacity: 0; } +// Typography mixin to be used with typography scss variables (ionic.vars.scss) +// +// ex: @include typography($ionic-heading-h3-medium); +// +// -------------------------------------------------- +@mixin typography($properties) { + font-family: map-get($properties, font-family); + font-size: map-get($properties, font-size); + font-weight: map-get($properties, font-weight); + letter-spacing: map-get($properties, letter-spacing); + line-height: map-get($properties, line-height); + text-transform: map-get($properties, text-transform); + text-decoration: map-get($properties, text-decoration); +} + // Font smoothing // -------------------------------------------------- diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 4cd4048c24..c1467200f2 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -549,14 +549,14 @@ setting the `checked` property. @ProxyCmp({ - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'], }) export class IonChip { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 621703b647..76ae26028a 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -612,14 +612,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {} @ProxyCmp({ defineCustomElementFn: defineIonChip, - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'], standalone: true }) export class IonChip { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index aa334fb2b2..01f2150203 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -231,7 +231,8 @@ export const IonChip = /*@__PURE__*/ defineContainer('ion-chip', de 'color', 'outline', 'disabled', - 'shape' + 'shape', + 'size' ]);