diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml index 0e7a49eec6..184d0ee4fe 100644 --- a/core/.stylelintrc.yml +++ b/core/.stylelintrc.yml @@ -15,6 +15,7 @@ ignoreFiles: - src/themes/functions.string.scss - src/themes/native.theme.default.scss - src/css/themes/*.scss + - scripts/tokens/*.css indentation: 2 diff --git a/core/api.txt b/core/api.txt index 292fc24e23..98512aed32 100644 --- a/core/api.txt +++ b/core/api.txt @@ -184,6 +184,8 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-avatar,shadow ion-avatar,prop,mode,"ios" | "md",undefined,false,false +ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false +ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false ion-avatar,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-avatar,css-prop,--border-radius,ionic ion-avatar,css-prop,--border-radius,ios @@ -310,6 +312,7 @@ ion-backdrop,event,ionBackdropTap,void,true ion-badge,shadow ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true ion-badge,prop,mode,"ios" | "md",undefined,false,false +ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | undefined,undefined,false,false ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-badge,css-prop,--background,ionic ion-badge,css-prop,--background,ios diff --git a/core/package.json b/core/package.json index 02ebdb39b3..f8b47d7d19 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/index.js && npm run lint.sass.fix && npm run prettier.tokens", + "build.tokens": "node ./scripts/tokens/index.js && npm run lint.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", @@ -90,7 +90,7 @@ "lint.ts.fix": "npm run eslint -- --fix", "prerender.e2e": "node scripts/testing/prerender.js", "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"", - "prettier.tokens": "prettier \"./src/foundations/*.scss\" --write --cache", + "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache", "start": "npm run build.css && stencil build --dev --watch --serve", "test": "npm run test.spec && npm run test.e2e", "test.spec": "stencil test --spec --max-workers=2", diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js index 777f9a2f56..09c5647227 100644 --- a/core/scripts/tokens/index.js +++ b/core/scripts/tokens/index.js @@ -5,12 +5,15 @@ // - 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 fs = require('fs'); +const path = require('path'); const StyleDictionary = require('style-dictionary'); const targetPath = './src/foundations/'; const { variablesPrefix, + getRgbaValue, hexToRgb, generateShadowValue, generateFontFamilyValue, @@ -41,8 +44,8 @@ StyleDictionary.registerFormat({ } 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); + prop.value = getRgbaValue(prop.value); return ` --${variablesPrefix}-${prop.name}: ${prop.value};${ rgb ? `\n --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : `` }`; @@ -137,6 +140,137 @@ StyleDictionary.registerFormat({ }, }); +// Register the custom format to generate HTML +// Load the HTML template +const template = fs.readFileSync(path.join(__dirname, 'preview.template.html'), 'utf8'); + +StyleDictionary.registerFormat({ + name: 'html/tokens', + formatter: function ({ dictionary }) { + // Function to extract numerical value from token name + const extractValue = (tokenName) => { + const match = tokenName.match(/-([0-9]+)/); + return match ? parseInt(match[1], 10) : Number.MAX_SAFE_INTEGER; + }; + + let colorTokens = ` + + + + + + + + + + `; + let fontSizeTokens = ''; + let boxShadowTokens = ''; + let borderSizeTokens = ''; + let borderRadiusTokens = ''; + let borderStyleTokens = ''; + let fontWeightTokens = ''; + let letterSpacingTokens = ''; + let spaceTokens = ''; + + // Collect border-radius and space tokens for separate sorting + let borderRadiusTokenList = []; + let spaceTokenList = []; + + dictionary.allProperties.forEach((token) => { + if (token.attributes.category === 'color') { + colorTokens += ` + + + + + + `; + } else if (token.attributes.category === 'font-size') { + fontSizeTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category.startsWith('Elevation')) { + const cssShadow = token.value.map(generateShadowValue).join(', '); + boxShadowTokens += ` +
+ ${token.name} +
+ `; + } else if (token.attributes.category === 'border-size' || token.attributes.category === 'border-width') { + borderSizeTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'border-radius') { + borderRadiusTokenList.push(token); // Collect border-radius tokens + } else if (token.attributes.category === 'border-style') { + borderStyleTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'font-weight') { + fontWeightTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + } else if (token.attributes.category === 'letter-spacing') { + // Convert % to px + const letterSpacingValue = token.value.replace('%', '') + 'px'; + letterSpacingTokens += ` +
+ ${token.name} (${letterSpacingValue}) +
+ `; + } else if (token.attributes.category === 'space') { + spaceTokenList.push(token); // Collect space tokens + } + }); + + // Sort border-radius and space tokens + borderRadiusTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name)); + spaceTokenList.sort((a, b) => extractValue(a.name) - extractValue(b.name)); + + // Generate HTML for sorted border-radius tokens + borderRadiusTokenList.forEach((token) => { + borderRadiusTokens += ` +
+ ${token.name} (${token.value}) +
+ `; + }); + + // Generate HTML for sorted space tokens + spaceTokenList.forEach((token) => { + spaceTokens += ` +
+
+ ${token.name} (${token.value}) +
+
+ `; + }); + + colorTokens += '
ColorHexToken Name
${token.value}${token.name}
'; + + return template + .replace('{{colorTokens}}', colorTokens) + .replace('{{fontSizeTokens}}', fontSizeTokens) + .replace('{{boxShadowTokens}}', boxShadowTokens) + .replace('{{borderSizeTokens}}', borderSizeTokens) + .replace('{{borderRadiusTokens}}', borderRadiusTokens) + .replace('{{borderStyleTokens}}', borderStyleTokens) + .replace('{{fontWeightTokens}}', fontWeightTokens) + .replace('{{letterSpacingTokens}}', letterSpacingTokens) + .replace('{{spaceTokens}}', spaceTokens); + }, +}); + // Custom transform to ensure unique token names StyleDictionary.registerTransform({ name: 'name/cti/kebab-unique', @@ -209,6 +343,16 @@ StyleDictionary.extend({ }, ], }, + html: { + transformGroup: 'custom', + buildPath: targetPath, + files: [ + { + destination: 'tokens.preview.html', + format: 'html/tokens', + }, + ], + }, }, fileHeader: { myFileHeader: () => { diff --git a/core/scripts/tokens/preview.styles.css b/core/scripts/tokens/preview.styles.css new file mode 100644 index 0000000000..56349b7fb7 --- /dev/null +++ b/core/scripts/tokens/preview.styles.css @@ -0,0 +1,63 @@ +table { + width: 100%; + border-collapse: collapse; + margin-bottom: 20px; +} + +th, +td { + padding: 10px; + border: 1px solid #ccc; + text-align: left; +} + +th { + background-color: #f4f4f4; +} + +thead th { + position: sticky; + top: 0; + background-color: #f4f4f4; + z-index: 1; +} + +.color-swatch { + width: 50px; + height: 50px; +} + +.font-size-token, +.weight-token, +.letter-spacing-token { + margin: 10px 0; +} + +.border-token, +.shadow-token { + margin: 10px; + padding: 10px; +} + +.border-token { + border: 1px solid #000; +} + +.spacing-wrapper { + background-color: lightblue; +} + +.spacing-wrapper > div { + background-color: #fff; +} + +.token-wrapper:has(.spacing-wrapper) { + display: flex; + flex-direction: column; + gap: 20px; +} + +hr { + background-color: #ccc; + margin: 20px 0; +} diff --git a/core/scripts/tokens/preview.template.html b/core/scripts/tokens/preview.template.html new file mode 100644 index 0000000000..462b49fa39 --- /dev/null +++ b/core/scripts/tokens/preview.template.html @@ -0,0 +1,52 @@ + + + + + + Design Tokens + + + + + + + + + + Design Tokens - Preview + + + +

Color Tokens

+
{{colorTokens}}
+
+

Font Size Tokens

+
{{fontSizeTokens}}
+
+

Font Weight Tokens

+
{{fontWeightTokens}}
+
+

Letter Spacing Tokens

+
{{letterSpacingTokens}}
+
+

Box Shadow Tokens

+
{{boxShadowTokens}}
+
+

Border Size Tokens

+
{{borderSizeTokens}}
+
+

Border Radius Tokens

+
{{borderRadiusTokens}}
+
+

Border Style Tokens

+
{{borderStyleTokens}}
+
+

Space Tokens

+
{{spaceTokens}}
+ + + + diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js index 499ecb6f4e..82039a5686 100644 --- a/core/scripts/tokens/utilities.js +++ b/core/scripts/tokens/utilities.js @@ -1,6 +1,18 @@ const variablesPrefix = 'ionic'; // Variable that holds the prefix used on all css and scss variables generated -// Generates translate an hex color value to rgb +// Generates a valid rgba() color +function getRgbaValue(propValue) { + // Check if its rgba color + const isRgba = hexToRgba(propValue); + // If it is, then compose rgba() color, otherwise use the normal color + if (isRgba !== null) { + return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`); + } else { + return propValue; + } +} + +// Translates 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 @@ -12,9 +24,24 @@ function hexToRgb(hex) { : null; } +// Translates an hex color value to rgba +function hexToRgba(hex) { + const result = /^#?([a-f\d]{2})([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), + a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100, + } + : 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}`; + const color = getRgbaValue(shadow.color); + + return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${color}`; } // Generates a valid font-family value from a font-family Design Token structure @@ -55,16 +82,19 @@ function getTypeMap(dictionary, type) { ); } -// Generates a rgb color value, based on a color Design Token -function generateRgbValue(prop) { +// Generates a final value, based if the Design Token is of type color or not +function generateValue(prop) { const rgb = hexToRgb(prop.value); + let rgbDeclaration = ''; - // If the token is color, also add a rgb variable using the same color if (rgb) { + // If the token is color, also add a rgb variable using the same color rgbDeclaration = `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`; } + prop.value = getRgbaValue(prop.value); + return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${rgbDeclaration}`; } @@ -135,11 +165,13 @@ function generateSpaceUtilityClasses(prop, className) { // Export all methods to be used on the tokens.js script module.exports = { variablesPrefix, + getRgbaValue, hexToRgb, + hexToRgba, generateShadowValue, generateFontFamilyValue, generateTypographyValue, - generateRgbValue, + generateRgbValue: generateValue, generateColorUtilityClasses, generateFontUtilityClass, generateSpaceUtilityClasses, diff --git a/core/src/components.d.ts b/core/src/components.d.ts index a7b2e06be4..c3905ecdf4 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -335,6 +335,14 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; + /** + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + */ + "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ @@ -409,6 +417,10 @@ export namespace Components { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + */ + "size"?: 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ @@ -5563,6 +5575,14 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; + /** + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` for the default height and width, `"large"` for a larger size, or `"xlarge"` for the largest dimensions. Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + */ + "size"?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ @@ -5641,6 +5661,10 @@ declare namespace LocalJSX { * The mode determines the platform behaviors of the component. */ "mode"?: "ios" | "md"; + /** + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + */ + "size"?: 'small' | 'medium' | 'large' | 'xlarge'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss new file mode 100644 index 0000000000..3a5b5b0999 --- /dev/null +++ b/core/src/components/avatar/avatar.ionic.scss @@ -0,0 +1,105 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./avatar"; + +// Ionic Avatar +// -------------------------------------------------- + +:host { + --padding-top: #{globals.$ionic-space-0}; + --padding-bottom: #{globals.$ionic-space-0}; + + display: flex; + + align-items: center; + justify-content: center; + + background: globals.$ionic-color-neutral-100; + color: globals.$ionic-color-neutral-800; + + font-weight: globals.$ionic-font-weight-medium; + + line-height: globals.$ionic-line-height-700; +} + +:host(:not(.avatar-image)) { + @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + + border: globals.$ionic-border-size-025 globals.$ionic-border-style-solid globals.$ionic-color-neutral-800; +} + +// Avatar Sizes +// -------------------------------------------------- + +:host(.avatar-xsmall) { + --padding-end: #{globals.$ionic-space-050}; + --padding-start: #{globals.$ionic-space-050}; + + width: globals.$ionic-scale-600; + height: globals.$ionic-scale-600; + + font-size: globals.$ionic-font-size-300; + + line-height: globals.$ionic-line-height-400; +} + +:host(.avatar-small) { + --padding-end: #{globals.$ionic-space-150}; + --padding-start: #{globals.$ionic-space-150}; + + width: globals.$ionic-scale-800; + height: globals.$ionic-scale-800; + + font-size: globals.$ionic-font-size-400; + + line-height: globals.$ionic-line-height-600; +} + +:host(.avatar-medium) { + --padding-end: #{globals.$ionic-space-200}; + --padding-start: #{globals.$ionic-space-200}; + + width: globals.$ionic-scale-1000; + height: globals.$ionic-scale-1000; + + font-size: globals.$ionic-font-size-450; +} + +:host(.avatar-large) { + --padding-end: #{globals.$ionic-space-250}; + --padding-start: #{globals.$ionic-space-250}; + + width: globals.$ionic-scale-1200; + height: globals.$ionic-scale-1200; + + font-size: globals.$ionic-font-size-500; +} + +:host(.avatar-xlarge) { + --padding-end: #{globals.$ionic-space-300}; + --padding-start: #{globals.$ionic-space-300}; + + width: globals.$ionic-scale-1400; + height: globals.$ionic-scale-1400; + + font-size: globals.$ionic-font-size-550; +} + +// Avatar Shapes +// -------------------------------------------------- + +:host(.avatar-xsmall.avatar-soft), +:host(.avatar-small.avatar-soft) { + --border-radius: #{globals.$ionic-border-radius-100}; +} + +:host(.avatar-soft) { + --border-radius: #{globals.$ionic-border-radius-200}; +} + +:host(.avatar-round) { + --border-radius: #{globals.$ionic-border-radius-full}; +} + +:host(.avatar-rectangular) { + --border-radius: #{globals.$ionic-border-radius-0}; +} diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx index 8f8bbaf3bf..40ced26c33 100644 --- a/core/src/components/avatar/avatar.tsx +++ b/core/src/components/avatar/avatar.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface } from '@stencil/core'; -import { Component, Host, h } from '@stencil/core'; +import { Component, Element, Host, Prop, h } from '@stencil/core'; import { getIonTheme } from '../../global/ionic-global'; @@ -12,17 +12,79 @@ import { getIonTheme } from '../../global/ionic-global'; styleUrls: { ios: 'avatar.ios.scss', md: 'avatar.md.scss', - ionic: 'avatar.md.scss', + ionic: 'avatar.ionic.scss', }, shadow: true, }) export class Avatar implements ComponentInterface { + @Element() el!: HTMLElement; + + /** + * Set to `"xsmall"` for the smallest size, `"small"` for a compact size, `"medium"` + * for the default height and width, `"large"` for a larger size, or `"xlarge"` for + * the largest dimensions. + * + * Defaults to `"medium"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() size?: `xsmall` | 'small' | 'medium' | 'large' | 'xlarge'; + + /** + * Set to `"soft"` for an avatar with slightly rounded corners, + * `"round"` for an avatar with fully rounded corners, or `"rectangular"` + * for an avatar without rounded corners. + * + * Defaults to `"round"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + + get hasImage() { + return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img'); + } + + private getSize(): string | undefined { + const theme = getIonTheme(this); + const { size } = this; + + // TODO(ROU-10752): Remove theme check when sizes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (size === undefined) { + return 'medium'; + } + + return size; + } + + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-10755): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined) { + return 'round'; + } + + return shape; + } + render() { const theme = getIonTheme(this); + const size = this.getSize(); + const shape = this.getShape(); + return ( diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts b/core/src/components/avatar/test/shape/avatar.e2e.ts new file mode 100644 index 0000000000..8bf6128bb6 --- /dev/null +++ b/core/src/components/avatar/test/shape/avatar.e2e.ts @@ -0,0 +1,185 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('avatar: shape'), () => { + test.describe('round', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-image`)); + }); + }); + + test.describe('rectangular', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-rectangular-image`)); + }); + }); + + test.describe('soft', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + + +
+ AB + AB + AB +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + +
+ + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + +
+ + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + + await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-image`)); + }); + }); + }); +}); diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b78ce06190 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d7453e9c38 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..abb8936be2 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..771f594575 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a566b986a1 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4b80c96bab Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..137e45f740 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f543f304e9 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..554689c0d5 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-rectangular-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e0c8a79450 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..58bad1c8f2 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..626c0b6bba Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6413156d07 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa7ba21193 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a379340ad6 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f9d903c1d6 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20b1c6dd07 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..279372297e Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-round-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ec0fd1d2d8 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4ee7d64b0c Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6adeeb63fb Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..78d54a7adc Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..70b9f8a910 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b65394b67c Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..93ba05b6f8 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4f283a6812 Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a509f95a8a Binary files /dev/null and b/core/src/components/avatar/test/shape/avatar.e2e.ts-snapshots/avatar-shape-soft-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/shape/index.html b/core/src/components/avatar/test/shape/index.html new file mode 100644 index 0000000000..16434a73b3 --- /dev/null +++ b/core/src/components/avatar/test/shape/index.html @@ -0,0 +1,73 @@ + + + + + Avatar - Shape + + + + + + + + + + + + + + + Avatar - Shape + + + + +

Default

+
+ AB + + + + + + +
+ +

Soft

+
+ AB + AB + AB + AB + AB +
+ +

Round

+
+ AB + AB + AB + AB + AB +
+ +

Rectangular

+
+ AB + AB + AB + AB + AB +
+ + + + diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts b/core/src/components/avatar/test/size/avatar.e2e.ts new file mode 100644 index 0000000000..5838519dc5 --- /dev/null +++ b/core/src/components/avatar/test/size/avatar.e2e.ts @@ -0,0 +1,234 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('avatar: size'), () => { + test.describe('xsmall', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xsmall-image`)); + }); + }); + + test.describe('small', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-small-image`)); + }); + }); + + test.describe('medium', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-medium-image`)); + }); + }); + + test.describe('large', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-large-image`)); + }); + }); + + test.describe('xlarge', () => { + test('should not have visual regressions when containing text', async ({ page }) => { + await page.setContent( + ` + AB + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-text`)); + }); + + test('should not have visual regressions when containing an icon', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-icon`)); + }); + + test('should not have visual regressions when containing an image', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const avatar = page.locator('ion-avatar'); + + await expect(avatar).toHaveScreenshot(screenshot(`avatar-size-xlarge-image`)); + }); + }); + }); +}); diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a090367642 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..843b48ce62 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a7546575c3 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2078f94c11 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..11597cf239 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e09b5d0d2f Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..56bb30c846 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bd5bc9a56b Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..60409f0d91 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-large-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e0c8a79450 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..58bad1c8f2 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..626c0b6bba Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6413156d07 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..fa7ba21193 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a379340ad6 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f9d903c1d6 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20b1c6dd07 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..279372297e Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-medium-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..22c8881b8d Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9373dd65aa Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..59feb04764 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..07d1a1b8f2 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f13b8fdf87 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6c7b0eada2 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fd138f1100 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7a8e0520e6 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..55b3f32aa6 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-small-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..69ae02132f Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..02cbc44776 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9d81438410 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..fec443a68f Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8ac67ec89f Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..69b00065ed Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7da2e495a9 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9a5d8246b0 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a07700d9cc Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xlarge-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..25b5453b40 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e53bc71141 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ac6867ae89 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-icon-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ad929e04bd Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5e5cfe0d15 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..40195fc59a Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-image-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..40cab8b9f6 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..601938fc20 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..aca9f6d281 Binary files /dev/null and b/core/src/components/avatar/test/size/avatar.e2e.ts-snapshots/avatar-size-xsmall-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/avatar/test/size/index.html b/core/src/components/avatar/test/size/index.html new file mode 100644 index 0000000000..875d5f7ddf --- /dev/null +++ b/core/src/components/avatar/test/size/index.html @@ -0,0 +1,93 @@ + + + + + Avatar - Size + + + + + + + + + + + + + + + Avatar - Size + + + + +

Default

+
+ AB + + + + + + +
+ +

Text

+
+ AB + AB + AB + AB + AB +
+ +

Icons

+
+ + + + + + + + + + + + + + + +
+ +

Images

+
+ + + + + + + + + + + + + + + +
+ + + + diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss new file mode 100644 index 0000000000..dfb72a521e --- /dev/null +++ b/core/src/components/badge/badge.ionic.scss @@ -0,0 +1,68 @@ +@use "../../themes/ionic/ionic.globals.scss" as globals; +@import "./badge"; + +// Ionic Badge +// -------------------------------------------------- + +:host { + --padding-start: #{globals.$ionic-space-100}; + --padding-end: #{globals.$ionic-space-100}; + --padding-top: #{globals.$ionic-space-0}; + --padding-bottom: #{globals.$ionic-space-0}; + + display: inline-flex; + + align-items: center; + justify-content: center; + + font-weight: globals.$ionic-font-weight-medium; +} + +// Badge Sizes +// -------------------------------------------------- + +/* Small Badge */ +:host(.badge-small) { + min-width: globals.$ionic-scale-800; + height: globals.$ionic-scale-800; + + font-size: globals.$ionic-font-size-400; + + line-height: globals.$ionic-line-height-600; +} + +/* Medium Badge */ +:host(.badge-medium) { + min-width: globals.$ionic-scale-1000; + height: globals.$ionic-scale-1000; + + font-size: globals.$ionic-font-size-450; + + line-height: globals.$ionic-line-height-700; +} + +/* Large Badge */ +:host(.badge-large) { + --padding-start: #{globals.$ionic-space-200}; + --padding-end: #{globals.$ionic-space-200}; + + min-width: globals.$ionic-scale-1200; + height: globals.$ionic-scale-1200; + + font-size: globals.$ionic-font-size-500; + + line-height: globals.$ionic-line-height-700; +} + +/* Extra Large Badge */ +:host(.badge-xlarge) { + --padding-start: #{globals.$ionic-space-200}; + --padding-end: #{globals.$ionic-space-200}; + + min-width: globals.$ionic-scale-1400; + height: globals.$ionic-scale-1400; + + font-size: globals.$ionic-font-size-550; + + line-height: globals.$ionic-line-height-700; +} diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx index 46dbd5a165..c733457c6c 100644 --- a/core/src/components/badge/badge.tsx +++ b/core/src/components/badge/badge.tsx @@ -14,7 +14,7 @@ import type { Color } from '../../interface'; styleUrls: { ios: 'badge.ios.scss', md: 'badge.md.scss', - ionic: 'badge.md.scss', + ionic: 'badge.ionic.scss', }, shadow: true, }) @@ -26,12 +26,36 @@ export class Badge implements ComponentInterface { */ @Prop({ reflect: true }) color?: Color; + /** + * Set to `"small"` for less height and width. Set to "medium" for slightly larger dimensions. Set to "large" for even greater height and width. Set to `"xlarge"` for the largest badge. + * Defaults to `"small"` for the `ionic` theme, undefined for all other themes. + */ + @Prop() size?: 'small' | 'medium' | 'large' | 'xlarge'; + + private getSize(): string | undefined { + const theme = getIonTheme(this); + const { size } = this; + + // TODO(ROU-10747): Remove theme check when sizes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (size === undefined) { + return 'small'; + } + + return size; + } + render() { + const size = this.getSize(); const theme = getIonTheme(this); return ( diff --git a/core/src/components/badge/test/size/badge.e2e.ts b/core/src/components/badge/test/size/badge.e2e.ts new file mode 100644 index 0000000000..48e3b96461 --- /dev/null +++ b/core/src/components/badge/test/size/badge.e2e.ts @@ -0,0 +1,61 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('badge: size'), () => { + test('should render small badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-small`)); + }); + + test('should render medium badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-medium`)); + }); + + test('should render large badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-large`)); + }); + + test('should render xlarge badges', async ({ page }) => { + await page.setContent( + ` + 00 + `, + config + ); + + const badge = page.locator('ion-badge'); + + await expect(badge).toHaveScreenshot(screenshot(`badge-size-xlarge`)); + }); + }); +}); diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bdb603037a Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b754d91de8 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe4ef45947 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6c1265c54f Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cf273fdf75 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fe1e303c84 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9fe9cd84a5 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..030afe81e5 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..94ffc598e3 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ae25c46730 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4ea0076250 Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cd0d1e965a Binary files /dev/null and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xlarge-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/index.html b/core/src/components/badge/test/size/index.html new file mode 100644 index 0000000000..10db12c721 --- /dev/null +++ b/core/src/components/badge/test/size/index.html @@ -0,0 +1,51 @@ + + + + + Badge - Size + + + + + + + + + + + + + Button - Size + + + + + + + Default + 00 + + + Small + 00 + + + Medium + 00 + + + Large + 00 + + + XLarge + 00 + + + + + + diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index 4bbee0272c..cdf1ba1b8c 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -1,17 +1,12 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; -@use "../../foundations/ionic.vars.scss" as tokens; // Ionic Chip // -------------------------------------------------- -// TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done -$ionic-states-focus-primary: #9ec4fd; -$ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba(). - :host { --background: #{globals.$ionic-color-neutral-100}; --color: #{globals.$ionic-color-neutral-900}; - --focus-ring-color: #{$ionic-states-focus-primary}; + --focus-ring-color: #{globals.$ionic-state-focus-1}; --focus-ring-width: #{globals.$ionic-border-size-050}; @include globals.font-smoothing; @@ -58,7 +53,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi // --------------------------------------------- :host(.ion-focused) { - outline: var(--focus-ring-width) solid var(--focus-ring-color); + outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color); outline-offset: var(--focus-ring-width); } @@ -67,7 +62,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi @media (any-hover: hover) { :host(:hover) { - --background: #{$ionic-states-hover}; + --background: #{globals.$ionic-color-neutral-200}; } } @@ -104,13 +99,13 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi // --------------------------------------------- :host(.chip-small) { - min-height: 24px; + min-height: globals.$ionic-scale-600; - font-size: #{tokens.$ionic-font-size-300}; + font-size: #{globals.$ionic-font-size-300}; } :host(.chip-large) { - min-height: 32px; + min-height: globals.$ionic-scale-800; font-size: globals.$ionic-font-size-350; } diff --git a/core/src/components/chip/test/theme-ionic/index.html b/core/src/components/chip/test/theme-ionic/index.html index e16f1e7ed2..2d424f07c2 100644 --- a/core/src/components/chip/test/theme-ionic/index.html +++ b/core/src/components/chip/test/theme-ionic/index.html @@ -1,5 +1,5 @@ - + Chip - Ionic States diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss index e05636a292..0cf695c09e 100644 --- a/core/src/foundations/ionic.root.scss +++ b/core/src/foundations/ionic.root.scss @@ -4,14 +4,14 @@ */ :root { - --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-elevation-100: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04); + --ionic-elevation-200: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05); + --ionic-elevation-300: 0px 6px 32px 0px rgba(0, 0, 0, 0.16), 0px 2px 7px 0px rgba(0, 0, 0, 0.05); + --ionic-elevation-400: 0px 15px 48px 0px rgba(0, 0, 0, 0.18), 0px 3px 12px 0px rgba(0, 0, 0, 0.12); + --ionic-elevation-500: 0px 3px 9px 0px rgba(6, 43, 99, 0.07), 0px 0px 4px 0px rgba(6, 43, 99, 0.04); + --ionic-elevation-600: 0px 8px 25px 0px rgba(6, 43, 99, 0.08), 0px 1px 5px 0px rgba(6, 43, 99, 0.05); + --ionic-elevation-700: 0px 15px 32px 0px rgba(6, 43, 99, 0.09), 0px 2px 7px 0px rgba(6, 43, 99, 0.05); + --ionic-elevation-800: 0px 20px 48px 0px rgba(6, 43, 99, 0.12), 0px 3px 14px 0px rgba(6, 43, 99, 0.12); --ionic-font-size-275: 11px; --ionic-font-size-300: 12px; --ionic-font-size-350: 14px; @@ -615,7 +615,7 @@ --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; + --ionic-state-disabled: rgba(255, 255, 255, 0.6); + --ionic-state-hover: rgba(36, 36, 36, 0.04); + --ionic-state-pressed: rgba(36, 36, 36, 0.08); } diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index 9a212c151c..f37cec7000 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -3,14 +3,46 @@ * Ionic Design System */ -$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-elevation-100: var( + --ionic-elevation-100, + 0px 3px 9px 0px rgba(0, 0, 0, 0.07), + 0px 0px 4px 0px rgba(0, 0, 0, 0.04) +); +$ionic-elevation-200: var( + --ionic-elevation-200, + 0px 8px 25px 0px rgba(0, 0, 0, 0.08), + 0px 1px 5px 0px rgba(0, 0, 0, 0.05) +); +$ionic-elevation-300: var( + --ionic-elevation-300, + 0px 6px 32px 0px rgba(0, 0, 0, 0.16), + 0px 2px 7px 0px rgba(0, 0, 0, 0.05) +); +$ionic-elevation-400: var( + --ionic-elevation-400, + 0px 15px 48px 0px rgba(0, 0, 0, 0.18), + 0px 3px 12px 0px rgba(0, 0, 0, 0.12) +); +$ionic-elevation-500: var( + --ionic-elevation-500, + 0px 3px 9px 0px rgba(6, 43, 99, 0.07), + 0px 0px 4px 0px rgba(6, 43, 99, 0.04) +); +$ionic-elevation-600: var( + --ionic-elevation-600, + 0px 8px 25px 0px rgba(6, 43, 99, 0.08), + 0px 1px 5px 0px rgba(6, 43, 99, 0.05) +); +$ionic-elevation-700: var( + --ionic-elevation-700, + 0px 15px 32px 0px rgba(6, 43, 99, 0.09), + 0px 2px 7px 0px rgba(6, 43, 99, 0.05) +); +$ionic-elevation-800: var( + --ionic-elevation-800, + 0px 20px 48px 0px rgba(6, 43, 99, 0.12), + 0px 3px 14px 0px rgba(6, 43, 99, 0.12) +); $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); @@ -614,9 +646,9 @@ $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-state-disabled: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6)); +$ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04)); +$ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08)); $ionic-display-sm-regular: ( font-family: $ionic-font-family, diff --git a/core/src/foundations/tokens.preview.html b/core/src/foundations/tokens.preview.html new file mode 100644 index 0000000000..be20ee99c0 --- /dev/null +++ b/core/src/foundations/tokens.preview.html @@ -0,0 +1,1743 @@ + + + + + + Design Tokens + + + + + + + + + + Design Tokens - Preview + + + +

Color Tokens

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ColorHexToken Name
#ffffff-color-base-white
#111111-color-base-black
#f1f1f1-color-neutral-100
#e7e7e7-color-neutral-200
#cfcfcf-color-neutral-300
#b9b9b9-color-neutral-400
#a2a2a2-color-neutral-500
#8c8c8c-color-neutral-600
#777777-color-neutral-700
#626262-color-neutral-800
#4e4e4e-color-neutral-900
#3b3b3b-color-neutral-1000
#292929-color-neutral-1100
#242424-color-neutral-1200
#feeded-color-red-100
#fde1e1-color-red-200
#fcc1c1-color-red-300
#faa1a1-color-red-400
#f97d7d-color-red-500
#f85151-color-red-600
#e52929-color-red-700
#bf2222-color-red-800
#991b1b-color-red-900
#761515-color-red-1000
#540f0f-color-red-1100
#330909-color-red-1200
#feedea-color-pumpkin-100
#fde0db-color-pumpkin-200
#fbbdb1-color-pumpkin-300
#f9947c-color-pumpkin-400
#f75d07-color-pumpkin-500
#da5206-color-pumpkin-600
#bd4705-color-pumpkin-700
#9f3c05-color-pumpkin-800
#803004-color-pumpkin-900
#602403-color-pumpkin-1000
#401802-color-pumpkin-1100
#210c01-color-pumpkin-1200
#fff1ea-color-orange-100
#ffe8db-color-orange-200
#ffcfb1-color-orange-300
#ffb37b-color-orange-400
#ff9400-color-orange-500
#e18300-color-orange-600
#c37100-color-orange-700
#a45f00-color-orange-800
#844d00-color-orange-900
#633a00-color-orange-1000
#422700-color-orange-1100
#221400-color-orange-1200
#fff9ea-color-yellow-100
#fff5db-color-yellow-200
#ffebb1-color-yellow-300
#ffe07b-color-yellow-400
#ffd600-color-yellow-500
#e1bd00-color-yellow-600
#c3a400-color-yellow-700
#a48a00-color-yellow-800
#846f00-color-yellow-900
#635300-color-yellow-1000
#423800-color-yellow-1100
#221d00-color-yellow-1200
#f3faea-color-lime-100
#eaf7db-color-lime-200
#d3efb2-color-lime-300
#bbe77d-color-lime-400
#a0df18-color-lime-500
#8dc515-color-lime-600
#7aab12-color-lime-700
#678f0f-color-lime-800
#53730c-color-lime-900
#3e5709-color-lime-1000
#2a3a06-color-lime-1100
#151e03-color-lime-1200
#ebf9ec-color-green-100
#dcf5de-color-green-200
#b3ebb7-color-green-300
#7fe089-color-green-400
#23d643-color-green-500
#1fbd3b-color-green-600
#1ba433-color-green-700
#178a2b-color-green-800
#126f23-color-green-900
#0e531a-color-green-1000
#093811-color-green-1100
#051d09-color-green-1200
#eaf8f5-color-teal-100
#dbf3ee-color-teal-200
#b1e7dd-color-teal-300
#7bdbca-color-teal-400
#00cfb7-color-teal-500
#00b7a2-color-teal-600
#009e8c-color-teal-700
#008576-color-teal-800
#006b5f-color-teal-900
#005147-color-teal-1000
#003630-color-teal-1100
#001c19-color-teal-1200
#ebf9fe-color-aqua-100
#dcf4fd-color-aqua-200
#b3e9fc-color-aqua-300
#80defa-color-aqua-400
#27d3f9-color-aqua-500
#22bbdc-color-aqua-600
#1ea2bf-color-aqua-700
#1988a0-color-aqua-800
#146d81-color-aqua-900
#0f5261-color-aqua-1000
#0a3741-color-aqua-1100
#051c21-color-aqua-1200
#f2f4fd-color-blue-100
#e9ecfc-color-blue-200
#d0d7fa-color-blue-300
#b5c0f7-color-blue-400
#94a5f4-color-blue-500
#6986f2-color-blue-600
#105cef-color-blue-700
#0f54da-color-blue-800
#0d4bc3-color-blue-900
#0b41a9-color-blue-1000
#09358a-color-blue-1100
#072561-color-blue-1200
#f3f2fb-color-indigo-100
#eae9f9-color-indigo-200
#d3d1f2-color-indigo-300
#bab5eb-color-indigo-400
#9d95e4-color-indigo-500
#786bdd-color-indigo-600
#411bd5-color-indigo-700
#3b19c3-color-indigo-800
#3516ae-color-indigo-900
#2e1397-color-indigo-1000
#26107b-color-indigo-1100
#1a0b57-color-indigo-1200
#f5f2fe-color-violet-100
#eee9fd-color-violet-200
#dcd1fb-color-violet-300
#c9b6f9-color-violet-400
#b396f6-color-violet-500
#9a6cf4-color-violet-600
#7c20f2-color-violet-700
#711ddd-color-violet-800
#651ac5-color-violet-900
#5817ab-color-violet-1000
#48128c-color-violet-1100
#330d63-color-violet-1200
#f9f3fe-color-purple-100
#f5eafd-color-purple-200
#e9d3fa-color-purple-300
#deb9f8-color-purple-400
#d29bf6-color-purple-500
#c575f3-color-purple-600
#b73cf1-color-purple-700
#a737dc-color-purple-800
#9531c5-color-purple-900
#812aaa-color-purple-1000
#6a238b-color-purple-1100
#4b1862-color-purple-1200
#fdf3fb-color-magenta-100
#fcebf8-color-magenta-200
#f9d4f1-color-magenta-300
#f6bcea-color-magenta-400
#f39fe3-color-magenta-500
#f07cdb-color-magenta-600
#ed4ad3-color-magenta-700
#d844c1-color-magenta-800
#c13cac-color-magenta-900
#a83495-color-magenta-1000
#892b7a-color-magenta-1100
#611e56-color-magenta-1200
#fef3f5-color-pink-100
#fdeaee-color-pink-200
#fad3dc-color-pink-300
#f8b9c9-color-pink-400
#f69bb3-color-pink-500
#f3759a-color-pink-600
#f13b7d-color-pink-700
#dc3672-color-pink-800
#c53066-color-pink-900
#aa2a58-color-pink-1000
#8b2248-color-pink-1100
#621833-color-pink-1200
#f2f4fd-color-primary-100
#e9ecfc-color-primary-200
#d0d7fa-color-primary-300
#b5c0f7-color-primary-400
#94a5f4-color-primary-500
#6986f2-color-primary-600
#105cef-color-primary-700
#0f54da-color-primary-800
#0d4bc3-color-primary-900
#0b41a9-color-primary-1000
#09358a-color-primary-1100
#072561-color-primary-1200
#105cef-color-primary-base
#ebf9fe-color-info-100
#dcf4fd-color-info-200
#b3e9fc-color-info-300
#80defa-color-info-400
#27d3f9-color-info-500
#22bbdc-color-info-600
#1ea2bf-color-info-700
#1988a0-color-info-800
#146d81-color-info-900
#0f5261-color-info-1000
#0a3741-color-info-1100
#051c21-color-info-1200
#1ea2bf-color-info-base
#fff1ea-color-warning-100
#ffe8db-color-warning-200
#ffcfb1-color-warning-300
#ffb37b-color-warning-400
#ff9400-color-warning-500
#e18300-color-warning-600
#c37100-color-warning-700
#a45f00-color-warning-800
#844d00-color-warning-900
#633a00-color-warning-1000
#422700-color-warning-1100
#221400-color-warning-1200
#c37100-color-warning-base
#feeded-color-danger-100
#fde1e1-color-danger-200
#fcc1c1-color-danger-300
#faa1a1-color-danger-400
#f97d7d-color-danger-500
#f85151-color-danger-600
#e52929-color-danger-700
#bf2222-color-danger-800
#991b1b-color-danger-900
#761515-color-danger-1000
#540f0f-color-danger-1100
#330909-color-danger-1200
#e52929-color-danger-base
#ebf9ec-color-success-100
#dcf5de-color-success-200
#b3ebb7-color-success-300
#7fe089-color-success-400
#23d643-color-success-500
#1fbd3b-color-success-600
#1ba433-color-success-700
#178a2b-color-success-800
#126f23-color-success-900
#0e531a-color-success-1000
#093811-color-success-1100
#051d09-color-success-1200
#1ba433-color-success-base
+
+
+

Font Size Tokens

+
+
-font-size-275 (11px)
+ +
-font-size-300 (12px)
+ +
-font-size-350 (14px)
+ +
-font-size-400 (16px)
+ +
-font-size-450 (18px)
+ +
-font-size-500 (20px)
+ +
-font-size-550 (22px)
+ +
-font-size-600 (24px)
+ +
-font-size-650 (26px)
+ +
-font-size-700 (28px)
+ +
-font-size-800 (32px)
+ +
-font-size-900 (36px)
+
+
+

Font Weight Tokens

+
+
-font-weight-thin (100)
+ +
-font-weight-extra-light (200)
+ +
-font-weight-light (300)
+ +
-font-weight-regular (400)
+ +
-font-weight-medium (500)
+ +
-font-weight-semi-bold (600)
+ +
-font-weight-bold (700)
+ +
-font-weight-extra-bold (800)
+ +
-font-weight-black (900)
+
+
+

Letter Spacing Tokens

+
+
-letter-spacing-0 (0px)
+ +
-letter-spacing-1 (1px)
+ +
-letter-spacing-2 (1.5px)
+
+
+

Box Shadow Tokens

+
+
+ -elevation-100 +
+ +
+ -elevation-200 +
+ +
+ -elevation-300 +
+ +
+ -elevation-400 +
+ +
+ -elevation-500 +
+ +
+ -elevation-600 +
+ +
+ -elevation-700 +
+ +
+ -elevation-800 +
+
+
+

Border Size Tokens

+
+
-border-size-0 (0px)
+ +
-border-size-025 (1px)
+ +
-border-size-050 (2px)
+ +
-border-size-075 (3px)
+
+
+

Border Radius Tokens

+
+
-border-radius-0 (0px)
+ +
-border-radius-050 (2px)
+ +
-border-radius-100 (4px)
+ +
-border-radius-200 (8px)
+ +
-border-radius-300 (12px)
+ +
-border-radius-400 (16px)
+ +
-border-radius-800 (32px)
+ +
-border-radius-1000 (40px)
+ +
-border-radius-full (999px)
+
+
+

Border Style Tokens

+
+
-border-style-none (none)
+ +
-border-style-solid (solid)
+ +
-border-style-dashed (dashed)
+ +
-border-style-dotted (dotted)
+
+
+

Space Tokens

+
+
+
-space-0 (0px)
+
+ +
+
-space-050 (2px)
+
+ +
+
-space-100 (4px)
+
+ +
+
-space-150 (6px)
+
+ +
+
-space-200 (8px)
+
+ +
+
-space-250 (10px)
+
+ +
+
-space-300 (12px)
+
+ +
+
-space-400 (16px)
+
+ +
+
-space-500 (20px)
+
+ +
+
-space-600 (24px)
+
+ +
+
-space-700 (28px)
+
+ +
+
-space-800 (32px)
+
+ +
+
-space-900 (36px)
+
+ +
+
-space-1000 (40px)
+
+ +
+
-space-1200 (48px)
+
+
+ + + + diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index c1467200f2..dc31523cea 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -210,14 +210,14 @@ export declare interface IonApp extends Components.IonApp {} @ProxyCmp({ - inputs: ['mode', 'theme'] + inputs: ['mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'theme'], + inputs: ['mode', 'shape', 'size', 'theme'], }) export class IonAvatar { protected el: HTMLElement; @@ -260,14 +260,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'mode', 'size', 'theme'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'mode', 'size', 'theme'], }) export class IonBadge { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 76ae26028a..2c40bd0556 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -290,14 +290,14 @@ export declare interface IonApp extends Components.IonApp {} @ProxyCmp({ defineCustomElementFn: defineIonAvatar, - inputs: ['mode', 'theme'] + inputs: ['mode', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['mode', 'theme'], + inputs: ['mode', 'shape', 'size', 'theme'], standalone: true }) export class IonAvatar { @@ -344,14 +344,14 @@ export declare interface IonBackdrop extends Components.IonBackdrop { @ProxyCmp({ defineCustomElementFn: defineIonBadge, - inputs: ['color', 'mode', 'theme'] + inputs: ['color', 'mode', 'size', 'theme'] }) @Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'mode', 'theme'], + inputs: ['color', 'mode', 'size', 'theme'], standalone: true }) export class IonBadge { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 01f2150203..958a52c82a 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -102,7 +102,10 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-avatar', defineIonAvatar); +export const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineIonAvatar, [ + 'size', + 'shape' +]); export const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineIonBackdrop, [ @@ -114,7 +117,8 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer('ion-b export const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineIonBadge, [ - 'color' + 'color', + 'size' ]);