diff --git a/core/package-lock.json b/core/package-lock.json index 81365751c2..59509fe428 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -44,7 +44,7 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "outsystems-design-tokens": "^1.1.2", + "outsystems-design-tokens": "^1.2.0", "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", @@ -8237,15 +8237,15 @@ } }, "node_modules/outsystems-design-tokens": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.1.2.tgz", - "integrity": "sha512-U5EBQKmz+XZL6T8rykGY28lxV0//6AgLVFSRTe/DvlpXyBRSwjdESg3HlPN2uk88oVc7fbLlWGT+2JATvg0r/Q==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.2.0.tgz", + "integrity": "sha512-6GJ/jBZO0UL/YNfhrLpZjWRF52sJXZZJ/sYS5t3vCpAAlxw43AhHu/OEwdJbvYU/1t3IMdVC6RFw7sDbRvuETg==", "dev": true, "license": "BSD-3-Clause", "dependencies": { "glob": "^11.0.0", "minimist": "^1.2.8", - "style-dictionary": "^4.1.4" + "style-dictionary": "^4.3.0" }, "bin": { "build.tokens": "scripts/index.js" @@ -15945,14 +15945,14 @@ "dev": true }, "outsystems-design-tokens": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.1.2.tgz", - "integrity": "sha512-U5EBQKmz+XZL6T8rykGY28lxV0//6AgLVFSRTe/DvlpXyBRSwjdESg3HlPN2uk88oVc7fbLlWGT+2JATvg0r/Q==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.2.0.tgz", + "integrity": "sha512-6GJ/jBZO0UL/YNfhrLpZjWRF52sJXZZJ/sYS5t3vCpAAlxw43AhHu/OEwdJbvYU/1t3IMdVC6RFw7sDbRvuETg==", "dev": true, "requires": { "glob": "^11.0.0", "minimist": "^1.2.8", - "style-dictionary": "^4.1.4" + "style-dictionary": "^4.3.0" }, "dependencies": { "brace-expansion": { diff --git a/core/package.json b/core/package.json index 9b6a033abc..73afdefbcd 100644 --- a/core/package.json +++ b/core/package.json @@ -66,7 +66,7 @@ "fs-extra": "^9.0.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", - "outsystems-design-tokens": "^1.1.2", + "outsystems-design-tokens": "^1.2.0", "prettier": "^2.8.8", "rollup": "^2.26.4", "sass": "^1.33.0", diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss index 245d65f434..8587c13ca5 100644 --- a/core/src/components/datetime/datetime.ionic.scss +++ b/core/src/components/datetime/datetime.ionic.scss @@ -70,7 +70,7 @@ // default round clear button style .calendar-month-year-toggle { @include globals.border-radius(globals.$ion-border-radius-full); - @include globals.typography(globals.$ion-body-action-lg); + @include globals.typography(globals.$ion-body-action-md); @include globals.padding(globals.$ion-space-200, globals.$ion-space-400); min-width: globals.$ion-scale-1600; @@ -132,7 +132,7 @@ .calendar-day { @include globals.border-radius(globals.$ion-border-radius-full); @include globals.padding(globals.$ion-space-100); - @include globals.typography(globals.$ion-body-action-md); + @include globals.typography(globals.$ion-body-action-sm); width: globals.$ion-scale-1200; min-width: globals.$ion-scale-1200; @@ -183,7 +183,7 @@ } :host .datetime-time .time-header { - @include globals.typography(globals.$ion-body-action-lg); + @include globals.typography(globals.$ion-body-action-md); color: globals.$ion-primitives-neutral-800; } @@ -212,7 +212,7 @@ } :host .datetime-buttons ion-buttons ion-button { - @include globals.typography(globals.$ion-body-action-lg); + @include globals.typography(globals.$ion-body-action-md); min-height: globals.$ion-space-1200; } diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png index df46530dc3..489a37dca2 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png index 10b9052b16..af7c9524d2 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png index e9449194dc..fe2a6073cc 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png index 6bb5d78c20..3e713ec0c7 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png index 76b5920b72..211e0313f9 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png index e00cca0f0c..ea15a7f1f3 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png index 2f6d8c7e08..dba29245d3 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png index 7c37ec8fa8..9f11b32880 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png index 6489e0fe70..531c404fee 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png index dac7174b41..784619b3a5 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png index 98a97c268a..3729f3ce72 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png index 9dbbd4ff2a..3ed4eb742e 100644 Binary files a/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list-header/test/basic/list-header.e2e.ts-snapshots/list-header-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/segment-button/segment-button.ionic.scss b/core/src/components/segment-button/segment-button.ionic.scss index 70ed7dbe46..95131ec4a1 100644 --- a/core/src/components/segment-button/segment-button.ionic.scss +++ b/core/src/components/segment-button/segment-button.ionic.scss @@ -48,7 +48,7 @@ // -------------------------------------------------- ::slotted(ion-label) { - @include globals.typography(globals.$ion-body-action-md); + @include globals.typography(globals.$ion-body-action-sm); color: var(--color); } diff --git a/core/src/css/ionic/link.ionic.scss b/core/src/css/ionic/link.ionic.scss index e9d9d633c8..1312ace329 100644 --- a/core/src/css/ionic/link.ionic.scss +++ b/core/src/css/ionic/link.ionic.scss @@ -23,7 +23,7 @@ // ------------------------------------------------------------------------------- &:visited { - color: globals.$ion-semantics-info-500; + color: globals.$ion-text-link-visited; } } @@ -31,7 +31,7 @@ // ------------------------------------------------------------------------------- @mixin ionic-link { - color: globals.$ion-semantics-info-400; + color: globals.$ion-text-link-default; text-decoration: none; @@ -51,7 +51,7 @@ &:focus, &.ion-focused { - outline: 2px solid globals.$ion-semantics-primary-100; + outline: 2px solid globals.$ion-text-link-default; outline-offset: 2px; text-decoration: underline; @@ -62,7 +62,7 @@ &:active, &.ion-activated { - color: globals.$ion-semantics-info-500; + color: globals.$ion-text-link-press; text-decoration: underline; } @@ -88,7 +88,7 @@ a.ionic-link, @media (any-hover: hover) { &:hover { - color: globals.$ion-semantics-info-400; + color: globals.$ion-text-link-press; } } @@ -97,7 +97,7 @@ a.ionic-link, &:focus, &.ion-focused { - outline: 2px solid globals.$ion-semantics-primary-100; + outline: 2px solid globals.$ion-text-link-default; outline-offset: 2px; color: currentColor; @@ -110,7 +110,7 @@ a.ionic-link, &:active, &.ion-activated { - color: globals.$ion-semantics-info-500; + color: globals.$ion-text-link-press; } } diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png index 91d39acd79..f0078da540 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png index b50b8dfd2b..cd82520472 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png index cc09335784..b45c067a62 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png index 23b20da335..5c88152cbd 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png index f38fbcf8b0..96c64b7e9b 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png index 2edf18dacc..c1f33e3052 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png index c2bbff7ea8..cfabbcc138 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 574419bc5f..b0f184e786 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png index 2708aa9500..bbdcd89a93 100644 Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html index 2d88f16417..818ee6d814 100644 --- a/core/src/css/test/typography/basic/index.html +++ b/core/src/css/test/typography/basic/index.html @@ -89,10 +89,10 @@
Action +

ion-action-xs

ion-action-sm

ion-action-md

ion-action-lg

-

ion-action-xl


diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7daa4d1dee..602e134569 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png index 42643eb2d2..9e058e1477 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png index 8e1e568926..e8471e2bac 100644 Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index e780dabfe0..67c5b3349f 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -284,7 +284,7 @@ Do not edit directly, this file was auto-generated. text-decoration: none; } -.ion-body-action-xl { +.ion-body-action-lg { font-size: $ion-font-size-500; font-style: normal; font-weight: $ion-font-weight-medium; @@ -294,7 +294,7 @@ Do not edit directly, this file was auto-generated. text-decoration: none; } -.ion-body-action-lg { +.ion-body-action-md { font-size: $ion-font-size-400; font-style: normal; font-weight: $ion-font-weight-medium; @@ -304,7 +304,7 @@ Do not edit directly, this file was auto-generated. text-decoration: none; } -.ion-body-action-md { +.ion-body-action-sm { font-size: $ion-font-size-350; font-style: normal; font-weight: $ion-font-weight-medium; @@ -314,7 +314,7 @@ Do not edit directly, this file was auto-generated. text-decoration: none; } -.ion-body-action-sm { +.ion-body-action-xs { font-size: $ion-font-size-300; font-style: normal; font-weight: $ion-font-weight-medium; @@ -1036,12 +1036,36 @@ Do not edit directly, this file was auto-generated. .ion-background-bg-neutral-subtlest-press { background-color: $ion-bg-neutral-subtlest-press; } +.ion-bg-neutral-bold-default { + color: $ion-bg-neutral-bold-default; +} +.ion-background-bg-neutral-bold-default { + background-color: $ion-bg-neutral-bold-default; +} +.ion-bg-neutral-bold-press { + color: $ion-bg-neutral-bold-press; +} +.ion-background-bg-neutral-bold-press { + background-color: $ion-bg-neutral-bold-press; +} +.ion-bg-neutral-boldest-default { + color: $ion-bg-neutral-boldest-default; +} +.ion-background-bg-neutral-boldest-default { + background-color: $ion-bg-neutral-boldest-default; +} .ion-bg-surface-default { color: $ion-bg-surface-default; } .ion-background-bg-surface-default { background-color: $ion-bg-surface-default; } +.ion-bg-surface-inverse { + color: $ion-bg-surface-inverse; +} +.ion-background-bg-surface-inverse { + background-color: $ion-bg-surface-inverse; +} .ion-bg-input-default { color: $ion-bg-input-default; } @@ -1054,6 +1078,30 @@ Do not edit directly, this file was auto-generated. .ion-background-bg-input-read-only { background-color: $ion-bg-input-read-only; } +.ion-bg-input-press { + color: $ion-bg-input-press; +} +.ion-background-bg-input-press { + background-color: $ion-bg-input-press; +} +.ion-bg-input-disabled { + color: $ion-bg-input-disabled; +} +.ion-background-bg-input-disabled { + background-color: $ion-bg-input-disabled; +} +.ion-bg-select-default { + color: $ion-bg-select-default; +} +.ion-background-bg-select-default { + background-color: $ion-bg-select-default; +} +.ion-bg-select-press { + color: $ion-bg-select-press; +} +.ion-background-bg-select-press { + background-color: $ion-bg-select-press; +} .ion-text-default { color: $ion-text-default; } @@ -1159,8 +1207,11 @@ Do not edit directly, this file was auto-generated. .ion-border-warning { border-color: $ion-border-warning; } -.ion-border-danger { - border-color: $ion-border-danger; +.ion-border-danger-default { + border-color: $ion-border-danger-default; +} +.ion-border-danger-press { + border-color: $ion-border-danger-press; } .ion-border-subtle { border-color: $ion-border-subtle; @@ -1174,6 +1225,9 @@ Do not edit directly, this file was auto-generated. .ion-border-input-read-only { border-color: $ion-border-input-read-only; } +.ion-border-subtlest { + border-color: $ion-border-subtlest; +} .ion-border-style-none { border-style: $ion-border-style-none; } @@ -1228,27 +1282,6 @@ Do not edit directly, this file was auto-generated. .ion-border-radius-025 { border-radius: $ion-border-radius-025; } -.ion-shadow-1 { - box-shadow: $ion-shadow-1; -} -.ion-shadow-2 { - box-shadow: $ion-shadow-2; -} -.ion-shadow-3 { - box-shadow: $ion-shadow-3; -} -.ion-shadow-4 { - box-shadow: $ion-shadow-4; -} -.ion-shadow-5 { - box-shadow: $ion-shadow-5; -} -.ion-shadow-6 { - box-shadow: $ion-shadow-6; -} -.ion-shadow-7 { - box-shadow: $ion-shadow-7; -} .ion-icon-subtlest { color: $ion-icon-subtlest; } @@ -1315,2400 +1348,2439 @@ Do not edit directly, this file was auto-generated. .ion-background-icon-select { background-color: $ion-icon-select; } -.ion-primitives-neutral-100 { - color: $ion-primitives-neutral-100; +.ion-icon-link-default { + color: $ion-icon-link-default; } -.ion-background-primitives-neutral-100 { - background-color: $ion-primitives-neutral-100; +.ion-background-icon-link-default { + background-color: $ion-icon-link-default; } -.ion-primitives-neutral-200 { - color: $ion-primitives-neutral-200; +.ion-icon-link-press { + color: $ion-icon-link-press; } -.ion-background-primitives-neutral-200 { - background-color: $ion-primitives-neutral-200; +.ion-background-icon-link-press { + background-color: $ion-icon-link-press; } -.ion-primitives-neutral-300 { - color: $ion-primitives-neutral-300; +.ion-icon-link-visited { + color: $ion-icon-link-visited; } -.ion-background-primitives-neutral-300 { - background-color: $ion-primitives-neutral-300; +.ion-background-icon-link-visited { + background-color: $ion-icon-link-visited; } -.ion-primitives-neutral-400 { - color: $ion-primitives-neutral-400; +.ion-state-disabled { + color: $ion-state-disabled; } -.ion-background-primitives-neutral-400 { - background-color: $ion-primitives-neutral-400; +.ion-background-state-disabled { + background-color: $ion-state-disabled; } -.ion-primitives-neutral-500 { - color: $ion-primitives-neutral-500; +.ion-state-press { + color: $ion-state-press; } -.ion-background-primitives-neutral-500 { - background-color: $ion-primitives-neutral-500; +.ion-background-state-press { + background-color: $ion-state-press; } -.ion-primitives-neutral-600 { - color: $ion-primitives-neutral-600; +.ion-elevation-1 { + box-shadow: $ion-elevation-1; } -.ion-background-primitives-neutral-600 { - background-color: $ion-primitives-neutral-600; +.ion-elevation-2 { + box-shadow: $ion-elevation-2; } -.ion-primitives-neutral-700 { - color: $ion-primitives-neutral-700; +.ion-elevation-3 { + box-shadow: $ion-elevation-3; } -.ion-background-primitives-neutral-700 { - background-color: $ion-primitives-neutral-700; +.ion-elevation-4 { + box-shadow: $ion-elevation-4; } -.ion-primitives-neutral-800 { - color: $ion-primitives-neutral-800; + +.ion-gap-space-0 { + gap: #{$ion-space-0}; } -.ion-background-primitives-neutral-800 { - background-color: $ion-primitives-neutral-800; + +.ion-margin-space-0 { + --margin-top: #{$ion-space-0}; + --margin-end: #{$ion-space-0}; + --margin-bottom: #{$ion-space-0}; + --margin-start: #{$ion-space-0}; + + @include margin($ion-space-0); } -.ion-primitives-neutral-900 { - color: $ion-primitives-neutral-900; + +.ion-margin-top-space-0 { + --margin-top: #{$ion-space-0}; + + @include margin($ion-space-0, null, null, null); } -.ion-background-primitives-neutral-900 { - background-color: $ion-primitives-neutral-900; + +.ion-margin-end-space-0 { + --margin-end: #{$ion-space-0}; + + @include margin(null, $ion-space-0, null, null); } -.ion-primitives-neutral-1000 { - color: $ion-primitives-neutral-1000; + +.ion-margin-bottom-space-0 { + --margin-bottom: #{$ion-space-0}; + + @include margin(null, null, $ion-space-0, null); } -.ion-background-primitives-neutral-1000 { - background-color: $ion-primitives-neutral-1000; + +.ion-margin-start-space-0 { + --margin-start: #{$ion-space-0}; + + @include margin(null, null, null, $ion-space-0); } -.ion-primitives-neutral-1100 { - color: $ion-primitives-neutral-1100; + +.ion-padding-space-0 { + --padding-top: #{$ion-space-0}; + --padding-end: #{$ion-space-0}; + --padding-bottom: #{$ion-space-0}; + --padding-start: #{$ion-space-0}; + + @include padding($ion-space-0); } -.ion-background-primitives-neutral-1100 { - background-color: $ion-primitives-neutral-1100; + +.ion-padding-top-space-0 { + --padding-top: #{$ion-space-0}; + + @include padding($ion-space-0, null, null, null); } -.ion-primitives-neutral-1200 { - color: $ion-primitives-neutral-1200; + +.ion-padding-end-space-0 { + --padding-end: #{$ion-space-0}; + + @include padding(null, $ion-space-0, null, null); } -.ion-background-primitives-neutral-1200 { - background-color: $ion-primitives-neutral-1200; + +.ion-padding-bottom-space-0 { + --padding-bottom: #{$ion-space-0}; + + @include padding(null, null, $ion-space-0, null); } -.ion-primitives-base-white { - color: $ion-primitives-base-white; + +.ion-padding-start-space-0 { + --padding-start: #{$ion-space-0}; + + @include padding(null, null, null, $ion-space-0); } -.ion-background-primitives-base-white { - background-color: $ion-primitives-base-white; + +.ion-gap-space-100 { + gap: #{$ion-space-100}; } -.ion-primitives-base-black { - color: $ion-primitives-base-black; + +.ion-margin-space-100 { + --margin-top: #{$ion-space-100}; + --margin-end: #{$ion-space-100}; + --margin-bottom: #{$ion-space-100}; + --margin-start: #{$ion-space-100}; + + @include margin($ion-space-100); } -.ion-background-primitives-base-black { - background-color: $ion-primitives-base-black; + +.ion-margin-top-space-100 { + --margin-top: #{$ion-space-100}; + + @include margin($ion-space-100, null, null, null); } -.ion-primitives-red-100 { - color: $ion-primitives-red-100; + +.ion-margin-end-space-100 { + --margin-end: #{$ion-space-100}; + + @include margin(null, $ion-space-100, null, null); } -.ion-background-primitives-red-100 { - background-color: $ion-primitives-red-100; + +.ion-margin-bottom-space-100 { + --margin-bottom: #{$ion-space-100}; + + @include margin(null, null, $ion-space-100, null); } -.ion-primitives-red-200 { - color: $ion-primitives-red-200; + +.ion-margin-start-space-100 { + --margin-start: #{$ion-space-100}; + + @include margin(null, null, null, $ion-space-100); } -.ion-background-primitives-red-200 { - background-color: $ion-primitives-red-200; + +.ion-padding-space-100 { + --padding-top: #{$ion-space-100}; + --padding-end: #{$ion-space-100}; + --padding-bottom: #{$ion-space-100}; + --padding-start: #{$ion-space-100}; + + @include padding($ion-space-100); } -.ion-primitives-red-300 { - color: $ion-primitives-red-300; + +.ion-padding-top-space-100 { + --padding-top: #{$ion-space-100}; + + @include padding($ion-space-100, null, null, null); } -.ion-background-primitives-red-300 { - background-color: $ion-primitives-red-300; + +.ion-padding-end-space-100 { + --padding-end: #{$ion-space-100}; + + @include padding(null, $ion-space-100, null, null); } -.ion-primitives-red-400 { - color: $ion-primitives-red-400; + +.ion-padding-bottom-space-100 { + --padding-bottom: #{$ion-space-100}; + + @include padding(null, null, $ion-space-100, null); } -.ion-background-primitives-red-400 { - background-color: $ion-primitives-red-400; + +.ion-padding-start-space-100 { + --padding-start: #{$ion-space-100}; + + @include padding(null, null, null, $ion-space-100); } -.ion-primitives-red-500 { - color: $ion-primitives-red-500; + +.ion-gap-space-150 { + gap: #{$ion-space-150}; } -.ion-background-primitives-red-500 { - background-color: $ion-primitives-red-500; + +.ion-margin-space-150 { + --margin-top: #{$ion-space-150}; + --margin-end: #{$ion-space-150}; + --margin-bottom: #{$ion-space-150}; + --margin-start: #{$ion-space-150}; + + @include margin($ion-space-150); } -.ion-primitives-red-600 { - color: $ion-primitives-red-600; + +.ion-margin-top-space-150 { + --margin-top: #{$ion-space-150}; + + @include margin($ion-space-150, null, null, null); } -.ion-background-primitives-red-600 { - background-color: $ion-primitives-red-600; + +.ion-margin-end-space-150 { + --margin-end: #{$ion-space-150}; + + @include margin(null, $ion-space-150, null, null); } -.ion-primitives-red-700 { - color: $ion-primitives-red-700; + +.ion-margin-bottom-space-150 { + --margin-bottom: #{$ion-space-150}; + + @include margin(null, null, $ion-space-150, null); } -.ion-background-primitives-red-700 { - background-color: $ion-primitives-red-700; + +.ion-margin-start-space-150 { + --margin-start: #{$ion-space-150}; + + @include margin(null, null, null, $ion-space-150); } -.ion-primitives-red-800 { - color: $ion-primitives-red-800; + +.ion-padding-space-150 { + --padding-top: #{$ion-space-150}; + --padding-end: #{$ion-space-150}; + --padding-bottom: #{$ion-space-150}; + --padding-start: #{$ion-space-150}; + + @include padding($ion-space-150); } -.ion-background-primitives-red-800 { - background-color: $ion-primitives-red-800; + +.ion-padding-top-space-150 { + --padding-top: #{$ion-space-150}; + + @include padding($ion-space-150, null, null, null); } -.ion-primitives-red-900 { - color: $ion-primitives-red-900; + +.ion-padding-end-space-150 { + --padding-end: #{$ion-space-150}; + + @include padding(null, $ion-space-150, null, null); } -.ion-background-primitives-red-900 { - background-color: $ion-primitives-red-900; + +.ion-padding-bottom-space-150 { + --padding-bottom: #{$ion-space-150}; + + @include padding(null, null, $ion-space-150, null); } -.ion-primitives-red-1000 { - color: $ion-primitives-red-1000; + +.ion-padding-start-space-150 { + --padding-start: #{$ion-space-150}; + + @include padding(null, null, null, $ion-space-150); } -.ion-background-primitives-red-1000 { - background-color: $ion-primitives-red-1000; + +.ion-gap-space-200 { + gap: #{$ion-space-200}; } -.ion-primitives-red-1100 { - color: $ion-primitives-red-1100; + +.ion-margin-space-200 { + --margin-top: #{$ion-space-200}; + --margin-end: #{$ion-space-200}; + --margin-bottom: #{$ion-space-200}; + --margin-start: #{$ion-space-200}; + + @include margin($ion-space-200); } -.ion-background-primitives-red-1100 { - background-color: $ion-primitives-red-1100; + +.ion-margin-top-space-200 { + --margin-top: #{$ion-space-200}; + + @include margin($ion-space-200, null, null, null); } -.ion-primitives-red-1200 { - color: $ion-primitives-red-1200; + +.ion-margin-end-space-200 { + --margin-end: #{$ion-space-200}; + + @include margin(null, $ion-space-200, null, null); } -.ion-background-primitives-red-1200 { - background-color: $ion-primitives-red-1200; + +.ion-margin-bottom-space-200 { + --margin-bottom: #{$ion-space-200}; + + @include margin(null, null, $ion-space-200, null); } -.ion-primitives-pumpkin-100 { - color: $ion-primitives-pumpkin-100; + +.ion-margin-start-space-200 { + --margin-start: #{$ion-space-200}; + + @include margin(null, null, null, $ion-space-200); } -.ion-background-primitives-pumpkin-100 { - background-color: $ion-primitives-pumpkin-100; + +.ion-padding-space-200 { + --padding-top: #{$ion-space-200}; + --padding-end: #{$ion-space-200}; + --padding-bottom: #{$ion-space-200}; + --padding-start: #{$ion-space-200}; + + @include padding($ion-space-200); } -.ion-primitives-pumpkin-200 { - color: $ion-primitives-pumpkin-200; + +.ion-padding-top-space-200 { + --padding-top: #{$ion-space-200}; + + @include padding($ion-space-200, null, null, null); } -.ion-background-primitives-pumpkin-200 { - background-color: $ion-primitives-pumpkin-200; + +.ion-padding-end-space-200 { + --padding-end: #{$ion-space-200}; + + @include padding(null, $ion-space-200, null, null); } -.ion-primitives-pumpkin-300 { - color: $ion-primitives-pumpkin-300; + +.ion-padding-bottom-space-200 { + --padding-bottom: #{$ion-space-200}; + + @include padding(null, null, $ion-space-200, null); } -.ion-background-primitives-pumpkin-300 { - background-color: $ion-primitives-pumpkin-300; + +.ion-padding-start-space-200 { + --padding-start: #{$ion-space-200}; + + @include padding(null, null, null, $ion-space-200); } -.ion-primitives-pumpkin-400 { - color: $ion-primitives-pumpkin-400; + +.ion-gap-space-250 { + gap: #{$ion-space-250}; } -.ion-background-primitives-pumpkin-400 { - background-color: $ion-primitives-pumpkin-400; + +.ion-margin-space-250 { + --margin-top: #{$ion-space-250}; + --margin-end: #{$ion-space-250}; + --margin-bottom: #{$ion-space-250}; + --margin-start: #{$ion-space-250}; + + @include margin($ion-space-250); } -.ion-primitives-pumpkin-500 { - color: $ion-primitives-pumpkin-500; + +.ion-margin-top-space-250 { + --margin-top: #{$ion-space-250}; + + @include margin($ion-space-250, null, null, null); } -.ion-background-primitives-pumpkin-500 { - background-color: $ion-primitives-pumpkin-500; + +.ion-margin-end-space-250 { + --margin-end: #{$ion-space-250}; + + @include margin(null, $ion-space-250, null, null); } -.ion-primitives-pumpkin-600 { - color: $ion-primitives-pumpkin-600; + +.ion-margin-bottom-space-250 { + --margin-bottom: #{$ion-space-250}; + + @include margin(null, null, $ion-space-250, null); } -.ion-background-primitives-pumpkin-600 { - background-color: $ion-primitives-pumpkin-600; + +.ion-margin-start-space-250 { + --margin-start: #{$ion-space-250}; + + @include margin(null, null, null, $ion-space-250); } -.ion-primitives-pumpkin-700 { - color: $ion-primitives-pumpkin-700; + +.ion-padding-space-250 { + --padding-top: #{$ion-space-250}; + --padding-end: #{$ion-space-250}; + --padding-bottom: #{$ion-space-250}; + --padding-start: #{$ion-space-250}; + + @include padding($ion-space-250); } -.ion-background-primitives-pumpkin-700 { - background-color: $ion-primitives-pumpkin-700; + +.ion-padding-top-space-250 { + --padding-top: #{$ion-space-250}; + + @include padding($ion-space-250, null, null, null); } -.ion-primitives-pumpkin-800 { - color: $ion-primitives-pumpkin-800; + +.ion-padding-end-space-250 { + --padding-end: #{$ion-space-250}; + + @include padding(null, $ion-space-250, null, null); } -.ion-background-primitives-pumpkin-800 { - background-color: $ion-primitives-pumpkin-800; + +.ion-padding-bottom-space-250 { + --padding-bottom: #{$ion-space-250}; + + @include padding(null, null, $ion-space-250, null); } -.ion-primitives-pumpkin-900 { - color: $ion-primitives-pumpkin-900; + +.ion-padding-start-space-250 { + --padding-start: #{$ion-space-250}; + + @include padding(null, null, null, $ion-space-250); } -.ion-background-primitives-pumpkin-900 { - background-color: $ion-primitives-pumpkin-900; + +.ion-gap-space-300 { + gap: #{$ion-space-300}; } -.ion-primitives-pumpkin-1000 { - color: $ion-primitives-pumpkin-1000; + +.ion-margin-space-300 { + --margin-top: #{$ion-space-300}; + --margin-end: #{$ion-space-300}; + --margin-bottom: #{$ion-space-300}; + --margin-start: #{$ion-space-300}; + + @include margin($ion-space-300); } -.ion-background-primitives-pumpkin-1000 { - background-color: $ion-primitives-pumpkin-1000; + +.ion-margin-top-space-300 { + --margin-top: #{$ion-space-300}; + + @include margin($ion-space-300, null, null, null); } -.ion-primitives-pumpkin-1100 { - color: $ion-primitives-pumpkin-1100; + +.ion-margin-end-space-300 { + --margin-end: #{$ion-space-300}; + + @include margin(null, $ion-space-300, null, null); } -.ion-background-primitives-pumpkin-1100 { - background-color: $ion-primitives-pumpkin-1100; + +.ion-margin-bottom-space-300 { + --margin-bottom: #{$ion-space-300}; + + @include margin(null, null, $ion-space-300, null); } -.ion-primitives-pumpkin-1200 { - color: $ion-primitives-pumpkin-1200; + +.ion-margin-start-space-300 { + --margin-start: #{$ion-space-300}; + + @include margin(null, null, null, $ion-space-300); +} + +.ion-padding-space-300 { + --padding-top: #{$ion-space-300}; + --padding-end: #{$ion-space-300}; + --padding-bottom: #{$ion-space-300}; + --padding-start: #{$ion-space-300}; + + @include padding($ion-space-300); +} + +.ion-padding-top-space-300 { + --padding-top: #{$ion-space-300}; + + @include padding($ion-space-300, null, null, null); +} + +.ion-padding-end-space-300 { + --padding-end: #{$ion-space-300}; + + @include padding(null, $ion-space-300, null, null); +} + +.ion-padding-bottom-space-300 { + --padding-bottom: #{$ion-space-300}; + + @include padding(null, null, $ion-space-300, null); } -.ion-background-primitives-pumpkin-1200 { - background-color: $ion-primitives-pumpkin-1200; + +.ion-padding-start-space-300 { + --padding-start: #{$ion-space-300}; + + @include padding(null, null, null, $ion-space-300); } -.ion-primitives-orange-100 { - color: $ion-primitives-orange-100; + +.ion-gap-space-400 { + gap: #{$ion-space-400}; } -.ion-background-primitives-orange-100 { - background-color: $ion-primitives-orange-100; + +.ion-margin-space-400 { + --margin-top: #{$ion-space-400}; + --margin-end: #{$ion-space-400}; + --margin-bottom: #{$ion-space-400}; + --margin-start: #{$ion-space-400}; + + @include margin($ion-space-400); } -.ion-primitives-orange-200 { - color: $ion-primitives-orange-200; + +.ion-margin-top-space-400 { + --margin-top: #{$ion-space-400}; + + @include margin($ion-space-400, null, null, null); } -.ion-background-primitives-orange-200 { - background-color: $ion-primitives-orange-200; + +.ion-margin-end-space-400 { + --margin-end: #{$ion-space-400}; + + @include margin(null, $ion-space-400, null, null); } -.ion-primitives-orange-300 { - color: $ion-primitives-orange-300; + +.ion-margin-bottom-space-400 { + --margin-bottom: #{$ion-space-400}; + + @include margin(null, null, $ion-space-400, null); } -.ion-background-primitives-orange-300 { - background-color: $ion-primitives-orange-300; + +.ion-margin-start-space-400 { + --margin-start: #{$ion-space-400}; + + @include margin(null, null, null, $ion-space-400); } -.ion-primitives-orange-400 { - color: $ion-primitives-orange-400; + +.ion-padding-space-400 { + --padding-top: #{$ion-space-400}; + --padding-end: #{$ion-space-400}; + --padding-bottom: #{$ion-space-400}; + --padding-start: #{$ion-space-400}; + + @include padding($ion-space-400); } -.ion-background-primitives-orange-400 { - background-color: $ion-primitives-orange-400; + +.ion-padding-top-space-400 { + --padding-top: #{$ion-space-400}; + + @include padding($ion-space-400, null, null, null); } -.ion-primitives-orange-500 { - color: $ion-primitives-orange-500; + +.ion-padding-end-space-400 { + --padding-end: #{$ion-space-400}; + + @include padding(null, $ion-space-400, null, null); } -.ion-background-primitives-orange-500 { - background-color: $ion-primitives-orange-500; + +.ion-padding-bottom-space-400 { + --padding-bottom: #{$ion-space-400}; + + @include padding(null, null, $ion-space-400, null); } -.ion-primitives-orange-600 { - color: $ion-primitives-orange-600; + +.ion-padding-start-space-400 { + --padding-start: #{$ion-space-400}; + + @include padding(null, null, null, $ion-space-400); } -.ion-background-primitives-orange-600 { - background-color: $ion-primitives-orange-600; + +.ion-gap-space-500 { + gap: #{$ion-space-500}; } -.ion-primitives-orange-700 { - color: $ion-primitives-orange-700; + +.ion-margin-space-500 { + --margin-top: #{$ion-space-500}; + --margin-end: #{$ion-space-500}; + --margin-bottom: #{$ion-space-500}; + --margin-start: #{$ion-space-500}; + + @include margin($ion-space-500); } -.ion-background-primitives-orange-700 { - background-color: $ion-primitives-orange-700; + +.ion-margin-top-space-500 { + --margin-top: #{$ion-space-500}; + + @include margin($ion-space-500, null, null, null); } -.ion-primitives-orange-800 { - color: $ion-primitives-orange-800; + +.ion-margin-end-space-500 { + --margin-end: #{$ion-space-500}; + + @include margin(null, $ion-space-500, null, null); } -.ion-background-primitives-orange-800 { - background-color: $ion-primitives-orange-800; + +.ion-margin-bottom-space-500 { + --margin-bottom: #{$ion-space-500}; + + @include margin(null, null, $ion-space-500, null); } -.ion-primitives-orange-900 { - color: $ion-primitives-orange-900; + +.ion-margin-start-space-500 { + --margin-start: #{$ion-space-500}; + + @include margin(null, null, null, $ion-space-500); } -.ion-background-primitives-orange-900 { - background-color: $ion-primitives-orange-900; + +.ion-padding-space-500 { + --padding-top: #{$ion-space-500}; + --padding-end: #{$ion-space-500}; + --padding-bottom: #{$ion-space-500}; + --padding-start: #{$ion-space-500}; + + @include padding($ion-space-500); } -.ion-primitives-orange-1000 { - color: $ion-primitives-orange-1000; + +.ion-padding-top-space-500 { + --padding-top: #{$ion-space-500}; + + @include padding($ion-space-500, null, null, null); } -.ion-background-primitives-orange-1000 { - background-color: $ion-primitives-orange-1000; + +.ion-padding-end-space-500 { + --padding-end: #{$ion-space-500}; + + @include padding(null, $ion-space-500, null, null); } -.ion-primitives-orange-1100 { - color: $ion-primitives-orange-1100; + +.ion-padding-bottom-space-500 { + --padding-bottom: #{$ion-space-500}; + + @include padding(null, null, $ion-space-500, null); } -.ion-background-primitives-orange-1100 { - background-color: $ion-primitives-orange-1100; + +.ion-padding-start-space-500 { + --padding-start: #{$ion-space-500}; + + @include padding(null, null, null, $ion-space-500); } -.ion-primitives-orange-1200 { - color: $ion-primitives-orange-1200; + +.ion-gap-space-600 { + gap: #{$ion-space-600}; } -.ion-background-primitives-orange-1200 { - background-color: $ion-primitives-orange-1200; + +.ion-margin-space-600 { + --margin-top: #{$ion-space-600}; + --margin-end: #{$ion-space-600}; + --margin-bottom: #{$ion-space-600}; + --margin-start: #{$ion-space-600}; + + @include margin($ion-space-600); } -.ion-primitives-yellow-100 { - color: $ion-primitives-yellow-100; + +.ion-margin-top-space-600 { + --margin-top: #{$ion-space-600}; + + @include margin($ion-space-600, null, null, null); } -.ion-background-primitives-yellow-100 { - background-color: $ion-primitives-yellow-100; + +.ion-margin-end-space-600 { + --margin-end: #{$ion-space-600}; + + @include margin(null, $ion-space-600, null, null); } -.ion-primitives-yellow-200 { - color: $ion-primitives-yellow-200; + +.ion-margin-bottom-space-600 { + --margin-bottom: #{$ion-space-600}; + + @include margin(null, null, $ion-space-600, null); } -.ion-background-primitives-yellow-200 { - background-color: $ion-primitives-yellow-200; + +.ion-margin-start-space-600 { + --margin-start: #{$ion-space-600}; + + @include margin(null, null, null, $ion-space-600); } -.ion-primitives-yellow-300 { - color: $ion-primitives-yellow-300; + +.ion-padding-space-600 { + --padding-top: #{$ion-space-600}; + --padding-end: #{$ion-space-600}; + --padding-bottom: #{$ion-space-600}; + --padding-start: #{$ion-space-600}; + + @include padding($ion-space-600); } -.ion-background-primitives-yellow-300 { - background-color: $ion-primitives-yellow-300; + +.ion-padding-top-space-600 { + --padding-top: #{$ion-space-600}; + + @include padding($ion-space-600, null, null, null); } -.ion-primitives-yellow-400 { - color: $ion-primitives-yellow-400; + +.ion-padding-end-space-600 { + --padding-end: #{$ion-space-600}; + + @include padding(null, $ion-space-600, null, null); } -.ion-background-primitives-yellow-400 { - background-color: $ion-primitives-yellow-400; + +.ion-padding-bottom-space-600 { + --padding-bottom: #{$ion-space-600}; + + @include padding(null, null, $ion-space-600, null); } -.ion-primitives-yellow-500 { - color: $ion-primitives-yellow-500; + +.ion-padding-start-space-600 { + --padding-start: #{$ion-space-600}; + + @include padding(null, null, null, $ion-space-600); } -.ion-background-primitives-yellow-500 { - background-color: $ion-primitives-yellow-500; + +.ion-gap-space-700 { + gap: #{$ion-space-700}; +} + +.ion-margin-space-700 { + --margin-top: #{$ion-space-700}; + --margin-end: #{$ion-space-700}; + --margin-bottom: #{$ion-space-700}; + --margin-start: #{$ion-space-700}; + + @include margin($ion-space-700); } -.ion-primitives-yellow-600 { - color: $ion-primitives-yellow-600; + +.ion-margin-top-space-700 { + --margin-top: #{$ion-space-700}; + + @include margin($ion-space-700, null, null, null); } -.ion-background-primitives-yellow-600 { - background-color: $ion-primitives-yellow-600; + +.ion-margin-end-space-700 { + --margin-end: #{$ion-space-700}; + + @include margin(null, $ion-space-700, null, null); } -.ion-primitives-yellow-700 { - color: $ion-primitives-yellow-700; + +.ion-margin-bottom-space-700 { + --margin-bottom: #{$ion-space-700}; + + @include margin(null, null, $ion-space-700, null); } -.ion-background-primitives-yellow-700 { - background-color: $ion-primitives-yellow-700; + +.ion-margin-start-space-700 { + --margin-start: #{$ion-space-700}; + + @include margin(null, null, null, $ion-space-700); } -.ion-primitives-yellow-800 { - color: $ion-primitives-yellow-800; + +.ion-padding-space-700 { + --padding-top: #{$ion-space-700}; + --padding-end: #{$ion-space-700}; + --padding-bottom: #{$ion-space-700}; + --padding-start: #{$ion-space-700}; + + @include padding($ion-space-700); } -.ion-background-primitives-yellow-800 { - background-color: $ion-primitives-yellow-800; + +.ion-padding-top-space-700 { + --padding-top: #{$ion-space-700}; + + @include padding($ion-space-700, null, null, null); } -.ion-primitives-yellow-900 { - color: $ion-primitives-yellow-900; + +.ion-padding-end-space-700 { + --padding-end: #{$ion-space-700}; + + @include padding(null, $ion-space-700, null, null); } -.ion-background-primitives-yellow-900 { - background-color: $ion-primitives-yellow-900; + +.ion-padding-bottom-space-700 { + --padding-bottom: #{$ion-space-700}; + + @include padding(null, null, $ion-space-700, null); } -.ion-primitives-yellow-1000 { - color: $ion-primitives-yellow-1000; + +.ion-padding-start-space-700 { + --padding-start: #{$ion-space-700}; + + @include padding(null, null, null, $ion-space-700); } -.ion-background-primitives-yellow-1000 { - background-color: $ion-primitives-yellow-1000; + +.ion-gap-space-800 { + gap: #{$ion-space-800}; } -.ion-primitives-yellow-1100 { - color: $ion-primitives-yellow-1100; + +.ion-margin-space-800 { + --margin-top: #{$ion-space-800}; + --margin-end: #{$ion-space-800}; + --margin-bottom: #{$ion-space-800}; + --margin-start: #{$ion-space-800}; + + @include margin($ion-space-800); } -.ion-background-primitives-yellow-1100 { - background-color: $ion-primitives-yellow-1100; + +.ion-margin-top-space-800 { + --margin-top: #{$ion-space-800}; + + @include margin($ion-space-800, null, null, null); } -.ion-primitives-yellow-1200 { - color: $ion-primitives-yellow-1200; + +.ion-margin-end-space-800 { + --margin-end: #{$ion-space-800}; + + @include margin(null, $ion-space-800, null, null); } -.ion-background-primitives-yellow-1200 { - background-color: $ion-primitives-yellow-1200; + +.ion-margin-bottom-space-800 { + --margin-bottom: #{$ion-space-800}; + + @include margin(null, null, $ion-space-800, null); } -.ion-primitives-lime-100 { - color: $ion-primitives-lime-100; + +.ion-margin-start-space-800 { + --margin-start: #{$ion-space-800}; + + @include margin(null, null, null, $ion-space-800); } -.ion-background-primitives-lime-100 { - background-color: $ion-primitives-lime-100; + +.ion-padding-space-800 { + --padding-top: #{$ion-space-800}; + --padding-end: #{$ion-space-800}; + --padding-bottom: #{$ion-space-800}; + --padding-start: #{$ion-space-800}; + + @include padding($ion-space-800); } -.ion-primitives-lime-200 { - color: $ion-primitives-lime-200; + +.ion-padding-top-space-800 { + --padding-top: #{$ion-space-800}; + + @include padding($ion-space-800, null, null, null); } -.ion-background-primitives-lime-200 { - background-color: $ion-primitives-lime-200; + +.ion-padding-end-space-800 { + --padding-end: #{$ion-space-800}; + + @include padding(null, $ion-space-800, null, null); } -.ion-primitives-lime-300 { - color: $ion-primitives-lime-300; + +.ion-padding-bottom-space-800 { + --padding-bottom: #{$ion-space-800}; + + @include padding(null, null, $ion-space-800, null); } -.ion-background-primitives-lime-300 { - background-color: $ion-primitives-lime-300; + +.ion-padding-start-space-800 { + --padding-start: #{$ion-space-800}; + + @include padding(null, null, null, $ion-space-800); } -.ion-primitives-lime-400 { - color: $ion-primitives-lime-400; + +.ion-gap-space-900 { + gap: #{$ion-space-900}; } -.ion-background-primitives-lime-400 { - background-color: $ion-primitives-lime-400; + +.ion-margin-space-900 { + --margin-top: #{$ion-space-900}; + --margin-end: #{$ion-space-900}; + --margin-bottom: #{$ion-space-900}; + --margin-start: #{$ion-space-900}; + + @include margin($ion-space-900); } -.ion-primitives-lime-500 { - color: $ion-primitives-lime-500; + +.ion-margin-top-space-900 { + --margin-top: #{$ion-space-900}; + + @include margin($ion-space-900, null, null, null); } -.ion-background-primitives-lime-500 { - background-color: $ion-primitives-lime-500; + +.ion-margin-end-space-900 { + --margin-end: #{$ion-space-900}; + + @include margin(null, $ion-space-900, null, null); } -.ion-primitives-lime-600 { - color: $ion-primitives-lime-600; + +.ion-margin-bottom-space-900 { + --margin-bottom: #{$ion-space-900}; + + @include margin(null, null, $ion-space-900, null); } -.ion-background-primitives-lime-600 { - background-color: $ion-primitives-lime-600; + +.ion-margin-start-space-900 { + --margin-start: #{$ion-space-900}; + + @include margin(null, null, null, $ion-space-900); } -.ion-primitives-lime-700 { - color: $ion-primitives-lime-700; + +.ion-padding-space-900 { + --padding-top: #{$ion-space-900}; + --padding-end: #{$ion-space-900}; + --padding-bottom: #{$ion-space-900}; + --padding-start: #{$ion-space-900}; + + @include padding($ion-space-900); } -.ion-background-primitives-lime-700 { - background-color: $ion-primitives-lime-700; + +.ion-padding-top-space-900 { + --padding-top: #{$ion-space-900}; + + @include padding($ion-space-900, null, null, null); } -.ion-primitives-lime-800 { - color: $ion-primitives-lime-800; + +.ion-padding-end-space-900 { + --padding-end: #{$ion-space-900}; + + @include padding(null, $ion-space-900, null, null); } -.ion-background-primitives-lime-800 { - background-color: $ion-primitives-lime-800; + +.ion-padding-bottom-space-900 { + --padding-bottom: #{$ion-space-900}; + + @include padding(null, null, $ion-space-900, null); } -.ion-primitives-lime-900 { - color: $ion-primitives-lime-900; + +.ion-padding-start-space-900 { + --padding-start: #{$ion-space-900}; + + @include padding(null, null, null, $ion-space-900); } -.ion-background-primitives-lime-900 { - background-color: $ion-primitives-lime-900; + +.ion-gap-space-1000 { + gap: #{$ion-space-1000}; } -.ion-primitives-lime-1000 { - color: $ion-primitives-lime-1000; + +.ion-margin-space-1000 { + --margin-top: #{$ion-space-1000}; + --margin-end: #{$ion-space-1000}; + --margin-bottom: #{$ion-space-1000}; + --margin-start: #{$ion-space-1000}; + + @include margin($ion-space-1000); } -.ion-background-primitives-lime-1000 { - background-color: $ion-primitives-lime-1000; + +.ion-margin-top-space-1000 { + --margin-top: #{$ion-space-1000}; + + @include margin($ion-space-1000, null, null, null); } -.ion-primitives-lime-1100 { - color: $ion-primitives-lime-1100; + +.ion-margin-end-space-1000 { + --margin-end: #{$ion-space-1000}; + + @include margin(null, $ion-space-1000, null, null); } -.ion-background-primitives-lime-1100 { - background-color: $ion-primitives-lime-1100; + +.ion-margin-bottom-space-1000 { + --margin-bottom: #{$ion-space-1000}; + + @include margin(null, null, $ion-space-1000, null); } -.ion-primitives-lime-1200 { - color: $ion-primitives-lime-1200; + +.ion-margin-start-space-1000 { + --margin-start: #{$ion-space-1000}; + + @include margin(null, null, null, $ion-space-1000); } -.ion-background-primitives-lime-1200 { - background-color: $ion-primitives-lime-1200; + +.ion-padding-space-1000 { + --padding-top: #{$ion-space-1000}; + --padding-end: #{$ion-space-1000}; + --padding-bottom: #{$ion-space-1000}; + --padding-start: #{$ion-space-1000}; + + @include padding($ion-space-1000); } -.ion-primitives-green-100 { - color: $ion-primitives-green-100; + +.ion-padding-top-space-1000 { + --padding-top: #{$ion-space-1000}; + + @include padding($ion-space-1000, null, null, null); } -.ion-background-primitives-green-100 { - background-color: $ion-primitives-green-100; + +.ion-padding-end-space-1000 { + --padding-end: #{$ion-space-1000}; + + @include padding(null, $ion-space-1000, null, null); } -.ion-primitives-green-200 { - color: $ion-primitives-green-200; + +.ion-padding-bottom-space-1000 { + --padding-bottom: #{$ion-space-1000}; + + @include padding(null, null, $ion-space-1000, null); } -.ion-background-primitives-green-200 { - background-color: $ion-primitives-green-200; + +.ion-padding-start-space-1000 { + --padding-start: #{$ion-space-1000}; + + @include padding(null, null, null, $ion-space-1000); } -.ion-primitives-green-300 { - color: $ion-primitives-green-300; + +.ion-gap-space-1200 { + gap: #{$ion-space-1200}; } -.ion-background-primitives-green-300 { - background-color: $ion-primitives-green-300; + +.ion-margin-space-1200 { + --margin-top: #{$ion-space-1200}; + --margin-end: #{$ion-space-1200}; + --margin-bottom: #{$ion-space-1200}; + --margin-start: #{$ion-space-1200}; + + @include margin($ion-space-1200); } -.ion-primitives-green-400 { - color: $ion-primitives-green-400; + +.ion-margin-top-space-1200 { + --margin-top: #{$ion-space-1200}; + + @include margin($ion-space-1200, null, null, null); } -.ion-background-primitives-green-400 { - background-color: $ion-primitives-green-400; + +.ion-margin-end-space-1200 { + --margin-end: #{$ion-space-1200}; + + @include margin(null, $ion-space-1200, null, null); } -.ion-primitives-green-500 { - color: $ion-primitives-green-500; + +.ion-margin-bottom-space-1200 { + --margin-bottom: #{$ion-space-1200}; + + @include margin(null, null, $ion-space-1200, null); } -.ion-background-primitives-green-500 { - background-color: $ion-primitives-green-500; + +.ion-margin-start-space-1200 { + --margin-start: #{$ion-space-1200}; + + @include margin(null, null, null, $ion-space-1200); } -.ion-primitives-green-600 { - color: $ion-primitives-green-600; + +.ion-padding-space-1200 { + --padding-top: #{$ion-space-1200}; + --padding-end: #{$ion-space-1200}; + --padding-bottom: #{$ion-space-1200}; + --padding-start: #{$ion-space-1200}; + + @include padding($ion-space-1200); } -.ion-background-primitives-green-600 { - background-color: $ion-primitives-green-600; + +.ion-padding-top-space-1200 { + --padding-top: #{$ion-space-1200}; + + @include padding($ion-space-1200, null, null, null); } -.ion-primitives-green-700 { - color: $ion-primitives-green-700; + +.ion-padding-end-space-1200 { + --padding-end: #{$ion-space-1200}; + + @include padding(null, $ion-space-1200, null, null); } -.ion-background-primitives-green-700 { - background-color: $ion-primitives-green-700; + +.ion-padding-bottom-space-1200 { + --padding-bottom: #{$ion-space-1200}; + + @include padding(null, null, $ion-space-1200, null); } -.ion-primitives-green-800 { - color: $ion-primitives-green-800; + +.ion-padding-start-space-1200 { + --padding-start: #{$ion-space-1200}; + + @include padding(null, null, null, $ion-space-1200); } -.ion-background-primitives-green-800 { - background-color: $ion-primitives-green-800; + +.ion-gap-space-050 { + gap: #{$ion-space-050}; } -.ion-primitives-green-900 { - color: $ion-primitives-green-900; + +.ion-margin-space-050 { + --margin-top: #{$ion-space-050}; + --margin-end: #{$ion-space-050}; + --margin-bottom: #{$ion-space-050}; + --margin-start: #{$ion-space-050}; + + @include margin($ion-space-050); } -.ion-background-primitives-green-900 { - background-color: $ion-primitives-green-900; + +.ion-margin-top-space-050 { + --margin-top: #{$ion-space-050}; + + @include margin($ion-space-050, null, null, null); } -.ion-primitives-green-1000 { - color: $ion-primitives-green-1000; + +.ion-margin-end-space-050 { + --margin-end: #{$ion-space-050}; + + @include margin(null, $ion-space-050, null, null); } -.ion-background-primitives-green-1000 { - background-color: $ion-primitives-green-1000; + +.ion-margin-bottom-space-050 { + --margin-bottom: #{$ion-space-050}; + + @include margin(null, null, $ion-space-050, null); } -.ion-primitives-green-1100 { - color: $ion-primitives-green-1100; + +.ion-margin-start-space-050 { + --margin-start: #{$ion-space-050}; + + @include margin(null, null, null, $ion-space-050); } -.ion-background-primitives-green-1100 { - background-color: $ion-primitives-green-1100; + +.ion-padding-space-050 { + --padding-top: #{$ion-space-050}; + --padding-end: #{$ion-space-050}; + --padding-bottom: #{$ion-space-050}; + --padding-start: #{$ion-space-050}; + + @include padding($ion-space-050); } -.ion-primitives-green-1200 { - color: $ion-primitives-green-1200; + +.ion-padding-top-space-050 { + --padding-top: #{$ion-space-050}; + + @include padding($ion-space-050, null, null, null); } -.ion-background-primitives-green-1200 { - background-color: $ion-primitives-green-1200; + +.ion-padding-end-space-050 { + --padding-end: #{$ion-space-050}; + + @include padding(null, $ion-space-050, null, null); } -.ion-primitives-teal-100 { - color: $ion-primitives-teal-100; + +.ion-padding-bottom-space-050 { + --padding-bottom: #{$ion-space-050}; + + @include padding(null, null, $ion-space-050, null); } -.ion-background-primitives-teal-100 { - background-color: $ion-primitives-teal-100; + +.ion-padding-start-space-050 { + --padding-start: #{$ion-space-050}; + + @include padding(null, null, null, $ion-space-050); } -.ion-primitives-teal-200 { - color: $ion-primitives-teal-200; + +.ion-z-index-0 { + z-index: $ion-z-index-0; } -.ion-background-primitives-teal-200 { - background-color: $ion-primitives-teal-200; +.ion-z-index-100 { + z-index: $ion-z-index-100; } -.ion-primitives-teal-300 { - color: $ion-primitives-teal-300; +.ion-z-index-200 { + z-index: $ion-z-index-200; } -.ion-background-primitives-teal-300 { - background-color: $ion-primitives-teal-300; +.ion-z-index-300 { + z-index: $ion-z-index-300; } -.ion-primitives-teal-400 { - color: $ion-primitives-teal-400; +.ion-z-index-400 { + z-index: $ion-z-index-400; } -.ion-background-primitives-teal-400 { - background-color: $ion-primitives-teal-400; +.ion-z-index-500 { + z-index: $ion-z-index-500; } -.ion-primitives-teal-500 { - color: $ion-primitives-teal-500; +.ion-z-index-bottom { + z-index: $ion-z-index-bottom; } -.ion-background-primitives-teal-500 { - background-color: $ion-primitives-teal-500; +.ion-z-index-top { + z-index: $ion-z-index-top; } -.ion-primitives-teal-600 { - color: $ion-primitives-teal-600; +.ion-transition-curve-linear { + transition: $ion-transition-curve-linear; } -.ion-background-primitives-teal-600 { - background-color: $ion-primitives-teal-600; +.ion-transition-curve-quick { + transition: $ion-transition-curve-quick; } -.ion-primitives-teal-700 { - color: $ion-primitives-teal-700; +.ion-transition-curve-base { + transition: $ion-transition-curve-base; } -.ion-background-primitives-teal-700 { - background-color: $ion-primitives-teal-700; +.ion-transition-curve-expressive { + transition: $ion-transition-curve-expressive; } -.ion-primitives-teal-800 { - color: $ion-primitives-teal-800; +.ion-transition-curve-bounce { + transition: $ion-transition-curve-bounce; } -.ion-background-primitives-teal-800 { - background-color: $ion-primitives-teal-800; +.ion-transition-time-0 { + transition: $ion-transition-time-0; } -.ion-primitives-teal-900 { - color: $ion-primitives-teal-900; +.ion-transition-time-100 { + transition: $ion-transition-time-100; } -.ion-background-primitives-teal-900 { - background-color: $ion-primitives-teal-900; +.ion-transition-time-150 { + transition: $ion-transition-time-150; } -.ion-primitives-teal-1000 { - color: $ion-primitives-teal-1000; +.ion-transition-time-200 { + transition: $ion-transition-time-200; } -.ion-background-primitives-teal-1000 { - background-color: $ion-primitives-teal-1000; +.ion-transition-time-300 { + transition: $ion-transition-time-300; } -.ion-primitives-teal-1100 { - color: $ion-primitives-teal-1100; +.ion-transition-time-500 { + transition: $ion-transition-time-500; } -.ion-background-primitives-teal-1100 { - background-color: $ion-primitives-teal-1100; +.ion-transition-time-1000 { + transition: $ion-transition-time-1000; } -.ion-primitives-teal-1200 { - color: $ion-primitives-teal-1200; +.ion-transition-time-1500 { + transition: $ion-transition-time-1500; } -.ion-background-primitives-teal-1200 { - background-color: $ion-primitives-teal-1200; +.ion-font-weight-thin { + font-weight: $ion-font-weight-thin; } -.ion-primitives-aqua-100 { - color: $ion-primitives-aqua-100; +.ion-font-weight-extra-light { + font-weight: $ion-font-weight-extra-light; } -.ion-background-primitives-aqua-100 { - background-color: $ion-primitives-aqua-100; +.ion-font-weight-light { + font-weight: $ion-font-weight-light; } -.ion-primitives-aqua-200 { - color: $ion-primitives-aqua-200; +.ion-font-weight-regular { + font-weight: $ion-font-weight-regular; } -.ion-background-primitives-aqua-200 { - background-color: $ion-primitives-aqua-200; +.ion-font-weight-medium { + font-weight: $ion-font-weight-medium; } -.ion-primitives-aqua-300 { - color: $ion-primitives-aqua-300; +.ion-font-weight-semi-bold { + font-weight: $ion-font-weight-semi-bold; } -.ion-background-primitives-aqua-300 { - background-color: $ion-primitives-aqua-300; +.ion-font-weight-bold { + font-weight: $ion-font-weight-bold; } -.ion-primitives-aqua-400 { - color: $ion-primitives-aqua-400; +.ion-font-weight-extra-bold { + font-weight: $ion-font-weight-extra-bold; } -.ion-background-primitives-aqua-400 { - background-color: $ion-primitives-aqua-400; +.ion-font-weight-black { + font-weight: $ion-font-weight-black; } -.ion-primitives-aqua-500 { - color: $ion-primitives-aqua-500; +.ion-font-size-275 { + font-size: $ion-font-size-275; } -.ion-background-primitives-aqua-500 { - background-color: $ion-primitives-aqua-500; +.ion-font-size-300 { + font-size: $ion-font-size-300; } -.ion-primitives-aqua-600 { - color: $ion-primitives-aqua-600; +.ion-font-size-350 { + font-size: $ion-font-size-350; } -.ion-background-primitives-aqua-600 { - background-color: $ion-primitives-aqua-600; +.ion-font-size-400 { + font-size: $ion-font-size-400; } -.ion-primitives-aqua-700 { - color: $ion-primitives-aqua-700; +.ion-font-size-450 { + font-size: $ion-font-size-450; } -.ion-background-primitives-aqua-700 { - background-color: $ion-primitives-aqua-700; +.ion-font-size-500 { + font-size: $ion-font-size-500; } -.ion-primitives-aqua-800 { - color: $ion-primitives-aqua-800; +.ion-font-size-550 { + font-size: $ion-font-size-550; } -.ion-background-primitives-aqua-800 { - background-color: $ion-primitives-aqua-800; +.ion-font-size-600 { + font-size: $ion-font-size-600; } -.ion-primitives-aqua-900 { - color: $ion-primitives-aqua-900; +.ion-font-size-650 { + font-size: $ion-font-size-650; } -.ion-background-primitives-aqua-900 { - background-color: $ion-primitives-aqua-900; +.ion-font-size-700 { + font-size: $ion-font-size-700; } -.ion-primitives-aqua-1000 { - color: $ion-primitives-aqua-1000; +.ion-font-size-800 { + font-size: $ion-font-size-800; } -.ion-background-primitives-aqua-1000 { - background-color: $ion-primitives-aqua-1000; +.ion-font-size-900 { + font-size: $ion-font-size-900; } -.ion-primitives-aqua-1100 { - color: $ion-primitives-aqua-1100; +.ion-font-letter-spacing-0 { + letter-spacing: $ion-font-letter-spacing-0; } -.ion-background-primitives-aqua-1100 { - background-color: $ion-primitives-aqua-1100; +.ion-font-letter-spacing-1 { + letter-spacing: $ion-font-letter-spacing-1; } -.ion-primitives-aqua-1200 { - color: $ion-primitives-aqua-1200; +.ion-font-letter-spacing-2 { + letter-spacing: $ion-font-letter-spacing-2; } -.ion-background-primitives-aqua-1200 { - background-color: $ion-primitives-aqua-1200; +.ion-font-line-height-300 { + line-height: $ion-font-line-height-300; } -.ion-primitives-blue-100 { - color: $ion-primitives-blue-100; +.ion-font-line-height-400 { + line-height: $ion-font-line-height-400; } -.ion-background-primitives-blue-100 { - background-color: $ion-primitives-blue-100; +.ion-font-line-height-500 { + line-height: $ion-font-line-height-500; } -.ion-primitives-blue-200 { - color: $ion-primitives-blue-200; +.ion-font-line-height-600 { + line-height: $ion-font-line-height-600; } -.ion-background-primitives-blue-200 { - background-color: $ion-primitives-blue-200; +.ion-font-line-height-700 { + line-height: $ion-font-line-height-700; } -.ion-primitives-blue-300 { - color: $ion-primitives-blue-300; +.ion-font-line-height-800 { + line-height: $ion-font-line-height-800; } -.ion-background-primitives-blue-300 { - background-color: $ion-primitives-blue-300; +.ion-font-line-height-900 { + line-height: $ion-font-line-height-900; } -.ion-primitives-blue-400 { - color: $ion-primitives-blue-400; +.ion-font-line-height-1100 { + line-height: $ion-font-line-height-1100; } -.ion-background-primitives-blue-400 { - background-color: $ion-primitives-blue-400; +.ion-font-line-height-1200 { + line-height: $ion-font-line-height-1200; } -.ion-primitives-blue-500 { - color: $ion-primitives-blue-500; +.ion-font-line-height-full { + line-height: $ion-font-line-height-full; } -.ion-background-primitives-blue-500 { - background-color: $ion-primitives-blue-500; +.ion-rectangular-2xs { + border-radius: $ion-rectangular-2xs; } -.ion-primitives-blue-600 { - color: $ion-primitives-blue-600; +.ion-rectangular-xs { + border-radius: $ion-rectangular-xs; } -.ion-background-primitives-blue-600 { - background-color: $ion-primitives-blue-600; +.ion-rectangular-sm { + border-radius: $ion-rectangular-sm; } -.ion-primitives-blue-700 { - color: $ion-primitives-blue-700; +.ion-rectangular-md { + border-radius: $ion-rectangular-md; } -.ion-background-primitives-blue-700 { - background-color: $ion-primitives-blue-700; +.ion-rectangular-lg { + border-radius: $ion-rectangular-lg; } -.ion-primitives-blue-800 { - color: $ion-primitives-blue-800; +.ion-rectangular-xl { + border-radius: $ion-rectangular-xl; } -.ion-background-primitives-blue-800 { - background-color: $ion-primitives-blue-800; +.ion-rectangular-2xl { + border-radius: $ion-rectangular-2xl; } -.ion-primitives-blue-900 { - color: $ion-primitives-blue-900; +.ion-round-2xs { + border-radius: $ion-round-2xs; } -.ion-background-primitives-blue-900 { - background-color: $ion-primitives-blue-900; +.ion-round-xs { + border-radius: $ion-round-xs; } -.ion-primitives-blue-1000 { - color: $ion-primitives-blue-1000; +.ion-round-sm { + border-radius: $ion-round-sm; } -.ion-background-primitives-blue-1000 { - background-color: $ion-primitives-blue-1000; +.ion-round-md { + border-radius: $ion-round-md; } -.ion-primitives-blue-1100 { - color: $ion-primitives-blue-1100; +.ion-round-lg { + border-radius: $ion-round-lg; } -.ion-background-primitives-blue-1100 { - background-color: $ion-primitives-blue-1100; +.ion-round-xl { + border-radius: $ion-round-xl; } -.ion-primitives-blue-1200 { - color: $ion-primitives-blue-1200; +.ion-round-2xl { + border-radius: $ion-round-2xl; } -.ion-background-primitives-blue-1200 { - background-color: $ion-primitives-blue-1200; +.ion-soft-2xs { + border-radius: $ion-soft-2xs; } -.ion-primitives-indigo-100 { - color: $ion-primitives-indigo-100; +.ion-soft-xs { + border-radius: $ion-soft-xs; } -.ion-background-primitives-indigo-100 { - background-color: $ion-primitives-indigo-100; +.ion-soft-sm { + border-radius: $ion-soft-sm; } -.ion-primitives-indigo-200 { - color: $ion-primitives-indigo-200; +.ion-soft-md { + border-radius: $ion-soft-md; } -.ion-background-primitives-indigo-200 { - background-color: $ion-primitives-indigo-200; +.ion-soft-lg { + border-radius: $ion-soft-lg; } -.ion-primitives-indigo-300 { - color: $ion-primitives-indigo-300; +.ion-soft-xl { + border-radius: $ion-soft-xl; } -.ion-background-primitives-indigo-300 { - background-color: $ion-primitives-indigo-300; +.ion-soft-2xl { + border-radius: $ion-soft-2xl; } -.ion-primitives-indigo-400 { - color: $ion-primitives-indigo-400; +.ion-primitives-neutral-100 { + color: $ion-primitives-neutral-100; } -.ion-background-primitives-indigo-400 { - background-color: $ion-primitives-indigo-400; +.ion-background-primitives-neutral-100 { + background-color: $ion-primitives-neutral-100; } -.ion-primitives-indigo-500 { - color: $ion-primitives-indigo-500; +.ion-primitives-neutral-200 { + color: $ion-primitives-neutral-200; } -.ion-background-primitives-indigo-500 { - background-color: $ion-primitives-indigo-500; +.ion-background-primitives-neutral-200 { + background-color: $ion-primitives-neutral-200; } -.ion-primitives-indigo-600 { - color: $ion-primitives-indigo-600; +.ion-primitives-neutral-300 { + color: $ion-primitives-neutral-300; } -.ion-background-primitives-indigo-600 { - background-color: $ion-primitives-indigo-600; +.ion-background-primitives-neutral-300 { + background-color: $ion-primitives-neutral-300; } -.ion-primitives-indigo-700 { - color: $ion-primitives-indigo-700; +.ion-primitives-neutral-400 { + color: $ion-primitives-neutral-400; } -.ion-background-primitives-indigo-700 { - background-color: $ion-primitives-indigo-700; +.ion-background-primitives-neutral-400 { + background-color: $ion-primitives-neutral-400; } -.ion-primitives-indigo-800 { - color: $ion-primitives-indigo-800; +.ion-primitives-neutral-500 { + color: $ion-primitives-neutral-500; } -.ion-background-primitives-indigo-800 { - background-color: $ion-primitives-indigo-800; +.ion-background-primitives-neutral-500 { + background-color: $ion-primitives-neutral-500; } -.ion-primitives-indigo-900 { - color: $ion-primitives-indigo-900; +.ion-primitives-neutral-600 { + color: $ion-primitives-neutral-600; } -.ion-background-primitives-indigo-900 { - background-color: $ion-primitives-indigo-900; +.ion-background-primitives-neutral-600 { + background-color: $ion-primitives-neutral-600; } -.ion-primitives-indigo-1000 { - color: $ion-primitives-indigo-1000; +.ion-primitives-neutral-700 { + color: $ion-primitives-neutral-700; } -.ion-background-primitives-indigo-1000 { - background-color: $ion-primitives-indigo-1000; +.ion-background-primitives-neutral-700 { + background-color: $ion-primitives-neutral-700; } -.ion-primitives-indigo-1100 { - color: $ion-primitives-indigo-1100; +.ion-primitives-neutral-800 { + color: $ion-primitives-neutral-800; } -.ion-background-primitives-indigo-1100 { - background-color: $ion-primitives-indigo-1100; +.ion-background-primitives-neutral-800 { + background-color: $ion-primitives-neutral-800; } -.ion-primitives-indigo-1200 { - color: $ion-primitives-indigo-1200; +.ion-primitives-neutral-900 { + color: $ion-primitives-neutral-900; } -.ion-background-primitives-indigo-1200 { - background-color: $ion-primitives-indigo-1200; +.ion-background-primitives-neutral-900 { + background-color: $ion-primitives-neutral-900; } -.ion-primitives-violet-100 { - color: $ion-primitives-violet-100; +.ion-primitives-neutral-1000 { + color: $ion-primitives-neutral-1000; } -.ion-background-primitives-violet-100 { - background-color: $ion-primitives-violet-100; +.ion-background-primitives-neutral-1000 { + background-color: $ion-primitives-neutral-1000; } -.ion-primitives-violet-200 { - color: $ion-primitives-violet-200; +.ion-primitives-neutral-1100 { + color: $ion-primitives-neutral-1100; } -.ion-background-primitives-violet-200 { - background-color: $ion-primitives-violet-200; +.ion-background-primitives-neutral-1100 { + background-color: $ion-primitives-neutral-1100; } -.ion-primitives-violet-300 { - color: $ion-primitives-violet-300; +.ion-primitives-neutral-1200 { + color: $ion-primitives-neutral-1200; } -.ion-background-primitives-violet-300 { - background-color: $ion-primitives-violet-300; +.ion-background-primitives-neutral-1200 { + background-color: $ion-primitives-neutral-1200; } -.ion-primitives-violet-400 { - color: $ion-primitives-violet-400; +.ion-primitives-base-white { + color: $ion-primitives-base-white; } -.ion-background-primitives-violet-400 { - background-color: $ion-primitives-violet-400; +.ion-background-primitives-base-white { + background-color: $ion-primitives-base-white; } -.ion-primitives-violet-500 { - color: $ion-primitives-violet-500; +.ion-primitives-base-black { + color: $ion-primitives-base-black; } -.ion-background-primitives-violet-500 { - background-color: $ion-primitives-violet-500; +.ion-background-primitives-base-black { + background-color: $ion-primitives-base-black; } -.ion-primitives-violet-600 { - color: $ion-primitives-violet-600; +.ion-primitives-red-100 { + color: $ion-primitives-red-100; } -.ion-background-primitives-violet-600 { - background-color: $ion-primitives-violet-600; +.ion-background-primitives-red-100 { + background-color: $ion-primitives-red-100; } -.ion-primitives-violet-700 { - color: $ion-primitives-violet-700; +.ion-primitives-red-200 { + color: $ion-primitives-red-200; } -.ion-background-primitives-violet-700 { - background-color: $ion-primitives-violet-700; +.ion-background-primitives-red-200 { + background-color: $ion-primitives-red-200; } -.ion-primitives-violet-800 { - color: $ion-primitives-violet-800; +.ion-primitives-red-300 { + color: $ion-primitives-red-300; } -.ion-background-primitives-violet-800 { - background-color: $ion-primitives-violet-800; +.ion-background-primitives-red-300 { + background-color: $ion-primitives-red-300; } -.ion-primitives-violet-900 { - color: $ion-primitives-violet-900; +.ion-primitives-red-400 { + color: $ion-primitives-red-400; } -.ion-background-primitives-violet-900 { - background-color: $ion-primitives-violet-900; +.ion-background-primitives-red-400 { + background-color: $ion-primitives-red-400; } -.ion-primitives-violet-1000 { - color: $ion-primitives-violet-1000; +.ion-primitives-red-500 { + color: $ion-primitives-red-500; } -.ion-background-primitives-violet-1000 { - background-color: $ion-primitives-violet-1000; +.ion-background-primitives-red-500 { + background-color: $ion-primitives-red-500; } -.ion-primitives-violet-1100 { - color: $ion-primitives-violet-1100; +.ion-primitives-red-600 { + color: $ion-primitives-red-600; } -.ion-background-primitives-violet-1100 { - background-color: $ion-primitives-violet-1100; +.ion-background-primitives-red-600 { + background-color: $ion-primitives-red-600; } -.ion-primitives-violet-1200 { - color: $ion-primitives-violet-1200; +.ion-primitives-red-700 { + color: $ion-primitives-red-700; } -.ion-background-primitives-violet-1200 { - background-color: $ion-primitives-violet-1200; +.ion-background-primitives-red-700 { + background-color: $ion-primitives-red-700; } -.ion-primitives-purple-100 { - color: $ion-primitives-purple-100; +.ion-primitives-red-800 { + color: $ion-primitives-red-800; } -.ion-background-primitives-purple-100 { - background-color: $ion-primitives-purple-100; +.ion-background-primitives-red-800 { + background-color: $ion-primitives-red-800; } -.ion-primitives-purple-200 { - color: $ion-primitives-purple-200; +.ion-primitives-red-900 { + color: $ion-primitives-red-900; } -.ion-background-primitives-purple-200 { - background-color: $ion-primitives-purple-200; +.ion-background-primitives-red-900 { + background-color: $ion-primitives-red-900; } -.ion-primitives-purple-300 { - color: $ion-primitives-purple-300; +.ion-primitives-red-1000 { + color: $ion-primitives-red-1000; } -.ion-background-primitives-purple-300 { - background-color: $ion-primitives-purple-300; +.ion-background-primitives-red-1000 { + background-color: $ion-primitives-red-1000; } -.ion-primitives-purple-400 { - color: $ion-primitives-purple-400; +.ion-primitives-red-1100 { + color: $ion-primitives-red-1100; } -.ion-background-primitives-purple-400 { - background-color: $ion-primitives-purple-400; +.ion-background-primitives-red-1100 { + background-color: $ion-primitives-red-1100; } -.ion-primitives-purple-500 { - color: $ion-primitives-purple-500; +.ion-primitives-red-1200 { + color: $ion-primitives-red-1200; } -.ion-background-primitives-purple-500 { - background-color: $ion-primitives-purple-500; +.ion-background-primitives-red-1200 { + background-color: $ion-primitives-red-1200; } -.ion-primitives-purple-600 { - color: $ion-primitives-purple-600; +.ion-primitives-pumpkin-100 { + color: $ion-primitives-pumpkin-100; } -.ion-background-primitives-purple-600 { - background-color: $ion-primitives-purple-600; +.ion-background-primitives-pumpkin-100 { + background-color: $ion-primitives-pumpkin-100; } -.ion-primitives-purple-700 { - color: $ion-primitives-purple-700; +.ion-primitives-pumpkin-200 { + color: $ion-primitives-pumpkin-200; } -.ion-background-primitives-purple-700 { - background-color: $ion-primitives-purple-700; +.ion-background-primitives-pumpkin-200 { + background-color: $ion-primitives-pumpkin-200; } -.ion-primitives-purple-800 { - color: $ion-primitives-purple-800; +.ion-primitives-pumpkin-300 { + color: $ion-primitives-pumpkin-300; } -.ion-background-primitives-purple-800 { - background-color: $ion-primitives-purple-800; +.ion-background-primitives-pumpkin-300 { + background-color: $ion-primitives-pumpkin-300; } -.ion-primitives-purple-900 { - color: $ion-primitives-purple-900; +.ion-primitives-pumpkin-400 { + color: $ion-primitives-pumpkin-400; } -.ion-background-primitives-purple-900 { - background-color: $ion-primitives-purple-900; +.ion-background-primitives-pumpkin-400 { + background-color: $ion-primitives-pumpkin-400; } -.ion-primitives-purple-1000 { - color: $ion-primitives-purple-1000; +.ion-primitives-pumpkin-500 { + color: $ion-primitives-pumpkin-500; } -.ion-background-primitives-purple-1000 { - background-color: $ion-primitives-purple-1000; +.ion-background-primitives-pumpkin-500 { + background-color: $ion-primitives-pumpkin-500; } -.ion-primitives-purple-1100 { - color: $ion-primitives-purple-1100; +.ion-primitives-pumpkin-600 { + color: $ion-primitives-pumpkin-600; } -.ion-background-primitives-purple-1100 { - background-color: $ion-primitives-purple-1100; +.ion-background-primitives-pumpkin-600 { + background-color: $ion-primitives-pumpkin-600; } -.ion-primitives-purple-1200 { - color: $ion-primitives-purple-1200; +.ion-primitives-pumpkin-700 { + color: $ion-primitives-pumpkin-700; } -.ion-background-primitives-purple-1200 { - background-color: $ion-primitives-purple-1200; +.ion-background-primitives-pumpkin-700 { + background-color: $ion-primitives-pumpkin-700; } -.ion-primitives-magenta-100 { - color: $ion-primitives-magenta-100; +.ion-primitives-pumpkin-800 { + color: $ion-primitives-pumpkin-800; } -.ion-background-primitives-magenta-100 { - background-color: $ion-primitives-magenta-100; +.ion-background-primitives-pumpkin-800 { + background-color: $ion-primitives-pumpkin-800; } -.ion-primitives-magenta-200 { - color: $ion-primitives-magenta-200; +.ion-primitives-pumpkin-900 { + color: $ion-primitives-pumpkin-900; } -.ion-background-primitives-magenta-200 { - background-color: $ion-primitives-magenta-200; +.ion-background-primitives-pumpkin-900 { + background-color: $ion-primitives-pumpkin-900; } -.ion-primitives-magenta-300 { - color: $ion-primitives-magenta-300; +.ion-primitives-pumpkin-1000 { + color: $ion-primitives-pumpkin-1000; } -.ion-background-primitives-magenta-300 { - background-color: $ion-primitives-magenta-300; +.ion-background-primitives-pumpkin-1000 { + background-color: $ion-primitives-pumpkin-1000; } -.ion-primitives-magenta-400 { - color: $ion-primitives-magenta-400; +.ion-primitives-pumpkin-1100 { + color: $ion-primitives-pumpkin-1100; } -.ion-background-primitives-magenta-400 { - background-color: $ion-primitives-magenta-400; +.ion-background-primitives-pumpkin-1100 { + background-color: $ion-primitives-pumpkin-1100; } -.ion-primitives-magenta-500 { - color: $ion-primitives-magenta-500; +.ion-primitives-pumpkin-1200 { + color: $ion-primitives-pumpkin-1200; } -.ion-background-primitives-magenta-500 { - background-color: $ion-primitives-magenta-500; +.ion-background-primitives-pumpkin-1200 { + background-color: $ion-primitives-pumpkin-1200; } -.ion-primitives-magenta-600 { - color: $ion-primitives-magenta-600; +.ion-primitives-orange-100 { + color: $ion-primitives-orange-100; } -.ion-background-primitives-magenta-600 { - background-color: $ion-primitives-magenta-600; +.ion-background-primitives-orange-100 { + background-color: $ion-primitives-orange-100; } -.ion-primitives-magenta-700 { - color: $ion-primitives-magenta-700; +.ion-primitives-orange-200 { + color: $ion-primitives-orange-200; } -.ion-background-primitives-magenta-700 { - background-color: $ion-primitives-magenta-700; +.ion-background-primitives-orange-200 { + background-color: $ion-primitives-orange-200; } -.ion-primitives-magenta-800 { - color: $ion-primitives-magenta-800; +.ion-primitives-orange-300 { + color: $ion-primitives-orange-300; } -.ion-background-primitives-magenta-800 { - background-color: $ion-primitives-magenta-800; +.ion-background-primitives-orange-300 { + background-color: $ion-primitives-orange-300; } -.ion-primitives-magenta-900 { - color: $ion-primitives-magenta-900; +.ion-primitives-orange-400 { + color: $ion-primitives-orange-400; } -.ion-background-primitives-magenta-900 { - background-color: $ion-primitives-magenta-900; +.ion-background-primitives-orange-400 { + background-color: $ion-primitives-orange-400; } -.ion-primitives-magenta-1000 { - color: $ion-primitives-magenta-1000; +.ion-primitives-orange-500 { + color: $ion-primitives-orange-500; } -.ion-background-primitives-magenta-1000 { - background-color: $ion-primitives-magenta-1000; +.ion-background-primitives-orange-500 { + background-color: $ion-primitives-orange-500; } -.ion-primitives-magenta-1100 { - color: $ion-primitives-magenta-1100; +.ion-primitives-orange-600 { + color: $ion-primitives-orange-600; } -.ion-background-primitives-magenta-1100 { - background-color: $ion-primitives-magenta-1100; +.ion-background-primitives-orange-600 { + background-color: $ion-primitives-orange-600; } -.ion-primitives-magenta-1200 { - color: $ion-primitives-magenta-1200; +.ion-primitives-orange-700 { + color: $ion-primitives-orange-700; } -.ion-background-primitives-magenta-1200 { - background-color: $ion-primitives-magenta-1200; +.ion-background-primitives-orange-700 { + background-color: $ion-primitives-orange-700; } -.ion-primitives-pink-100 { - color: $ion-primitives-pink-100; +.ion-primitives-orange-800 { + color: $ion-primitives-orange-800; } -.ion-background-primitives-pink-100 { - background-color: $ion-primitives-pink-100; +.ion-background-primitives-orange-800 { + background-color: $ion-primitives-orange-800; } -.ion-primitives-pink-200 { - color: $ion-primitives-pink-200; +.ion-primitives-orange-900 { + color: $ion-primitives-orange-900; } -.ion-background-primitives-pink-200 { - background-color: $ion-primitives-pink-200; +.ion-background-primitives-orange-900 { + background-color: $ion-primitives-orange-900; } -.ion-primitives-pink-300 { - color: $ion-primitives-pink-300; +.ion-primitives-orange-1000 { + color: $ion-primitives-orange-1000; } -.ion-background-primitives-pink-300 { - background-color: $ion-primitives-pink-300; +.ion-background-primitives-orange-1000 { + background-color: $ion-primitives-orange-1000; } -.ion-primitives-pink-400 { - color: $ion-primitives-pink-400; +.ion-primitives-orange-1100 { + color: $ion-primitives-orange-1100; } -.ion-background-primitives-pink-400 { - background-color: $ion-primitives-pink-400; +.ion-background-primitives-orange-1100 { + background-color: $ion-primitives-orange-1100; } -.ion-primitives-pink-500 { - color: $ion-primitives-pink-500; +.ion-primitives-orange-1200 { + color: $ion-primitives-orange-1200; } -.ion-background-primitives-pink-500 { - background-color: $ion-primitives-pink-500; +.ion-background-primitives-orange-1200 { + background-color: $ion-primitives-orange-1200; } -.ion-primitives-pink-600 { - color: $ion-primitives-pink-600; +.ion-primitives-yellow-100 { + color: $ion-primitives-yellow-100; } -.ion-background-primitives-pink-600 { - background-color: $ion-primitives-pink-600; +.ion-background-primitives-yellow-100 { + background-color: $ion-primitives-yellow-100; } -.ion-primitives-pink-700 { - color: $ion-primitives-pink-700; +.ion-primitives-yellow-200 { + color: $ion-primitives-yellow-200; } -.ion-background-primitives-pink-700 { - background-color: $ion-primitives-pink-700; +.ion-background-primitives-yellow-200 { + background-color: $ion-primitives-yellow-200; } -.ion-primitives-pink-800 { - color: $ion-primitives-pink-800; +.ion-primitives-yellow-300 { + color: $ion-primitives-yellow-300; } -.ion-background-primitives-pink-800 { - background-color: $ion-primitives-pink-800; +.ion-background-primitives-yellow-300 { + background-color: $ion-primitives-yellow-300; } -.ion-primitives-pink-900 { - color: $ion-primitives-pink-900; +.ion-primitives-yellow-400 { + color: $ion-primitives-yellow-400; } -.ion-background-primitives-pink-900 { - background-color: $ion-primitives-pink-900; +.ion-background-primitives-yellow-400 { + background-color: $ion-primitives-yellow-400; } -.ion-primitives-pink-1000 { - color: $ion-primitives-pink-1000; +.ion-primitives-yellow-500 { + color: $ion-primitives-yellow-500; } -.ion-background-primitives-pink-1000 { - background-color: $ion-primitives-pink-1000; +.ion-background-primitives-yellow-500 { + background-color: $ion-primitives-yellow-500; } -.ion-primitives-pink-1100 { - color: $ion-primitives-pink-1100; +.ion-primitives-yellow-600 { + color: $ion-primitives-yellow-600; } -.ion-background-primitives-pink-1100 { - background-color: $ion-primitives-pink-1100; +.ion-background-primitives-yellow-600 { + background-color: $ion-primitives-yellow-600; } -.ion-primitives-pink-1200 { - color: $ion-primitives-pink-1200; +.ion-primitives-yellow-700 { + color: $ion-primitives-yellow-700; } -.ion-background-primitives-pink-1200 { - background-color: $ion-primitives-pink-1200; +.ion-background-primitives-yellow-700 { + background-color: $ion-primitives-yellow-700; } -.ion-state-disabled { - color: $ion-state-disabled; +.ion-primitives-yellow-800 { + color: $ion-primitives-yellow-800; } -.ion-background-state-disabled { - background-color: $ion-state-disabled; +.ion-background-primitives-yellow-800 { + background-color: $ion-primitives-yellow-800; } -.ion-state-press { - color: $ion-state-press; +.ion-primitives-yellow-900 { + color: $ion-primitives-yellow-900; } -.ion-background-state-press { - background-color: $ion-state-press; +.ion-background-primitives-yellow-900 { + background-color: $ion-primitives-yellow-900; } -.ion-elevation-1 { - box-shadow: $ion-elevation-1; +.ion-primitives-yellow-1000 { + color: $ion-primitives-yellow-1000; } -.ion-elevation-2 { - box-shadow: $ion-elevation-2; +.ion-background-primitives-yellow-1000 { + background-color: $ion-primitives-yellow-1000; } -.ion-elevation-3 { - box-shadow: $ion-elevation-3; +.ion-primitives-yellow-1100 { + color: $ion-primitives-yellow-1100; } -.ion-elevation-4 { - box-shadow: $ion-elevation-4; +.ion-background-primitives-yellow-1100 { + background-color: $ion-primitives-yellow-1100; } - -.ion-gap-space-0 { - gap: #{$ion-space-0}; +.ion-primitives-yellow-1200 { + color: $ion-primitives-yellow-1200; +} +.ion-background-primitives-yellow-1200 { + background-color: $ion-primitives-yellow-1200; } - -.ion-margin-space-0 { - --margin-top: #{$ion-space-0}; - --margin-end: #{$ion-space-0}; - --margin-bottom: #{$ion-space-0}; - --margin-start: #{$ion-space-0}; - - @include margin($ion-space-0); +.ion-primitives-lime-100 { + color: $ion-primitives-lime-100; } - -.ion-margin-top-space-0 { - --margin-top: #{$ion-space-0}; - - @include margin($ion-space-0, null, null, null); +.ion-background-primitives-lime-100 { + background-color: $ion-primitives-lime-100; } - -.ion-margin-end-space-0 { - --margin-end: #{$ion-space-0}; - - @include margin(null, $ion-space-0, null, null); +.ion-primitives-lime-200 { + color: $ion-primitives-lime-200; } - -.ion-margin-bottom-space-0 { - --margin-bottom: #{$ion-space-0}; - - @include margin(null, null, $ion-space-0, null); +.ion-background-primitives-lime-200 { + background-color: $ion-primitives-lime-200; } - -.ion-margin-start-space-0 { - --margin-start: #{$ion-space-0}; - - @include margin(null, null, null, $ion-space-0); +.ion-primitives-lime-300 { + color: $ion-primitives-lime-300; } - -.ion-padding-space-0 { - --padding-top: #{$ion-space-0}; - --padding-end: #{$ion-space-0}; - --padding-bottom: #{$ion-space-0}; - --padding-start: #{$ion-space-0}; - - @include padding($ion-space-0); +.ion-background-primitives-lime-300 { + background-color: $ion-primitives-lime-300; } - -.ion-padding-top-space-0 { - --padding-top: #{$ion-space-0}; - - @include padding($ion-space-0, null, null, null); +.ion-primitives-lime-400 { + color: $ion-primitives-lime-400; } - -.ion-padding-end-space-0 { - --padding-end: #{$ion-space-0}; - - @include padding(null, $ion-space-0, null, null); +.ion-background-primitives-lime-400 { + background-color: $ion-primitives-lime-400; } - -.ion-padding-bottom-space-0 { - --padding-bottom: #{$ion-space-0}; - - @include padding(null, null, $ion-space-0, null); +.ion-primitives-lime-500 { + color: $ion-primitives-lime-500; } - -.ion-padding-start-space-0 { - --padding-start: #{$ion-space-0}; - - @include padding(null, null, null, $ion-space-0); +.ion-background-primitives-lime-500 { + background-color: $ion-primitives-lime-500; } - -.ion-gap-space-100 { - gap: #{$ion-space-100}; +.ion-primitives-lime-600 { + color: $ion-primitives-lime-600; } - -.ion-margin-space-100 { - --margin-top: #{$ion-space-100}; - --margin-end: #{$ion-space-100}; - --margin-bottom: #{$ion-space-100}; - --margin-start: #{$ion-space-100}; - - @include margin($ion-space-100); +.ion-background-primitives-lime-600 { + background-color: $ion-primitives-lime-600; } - -.ion-margin-top-space-100 { - --margin-top: #{$ion-space-100}; - - @include margin($ion-space-100, null, null, null); +.ion-primitives-lime-700 { + color: $ion-primitives-lime-700; } - -.ion-margin-end-space-100 { - --margin-end: #{$ion-space-100}; - - @include margin(null, $ion-space-100, null, null); +.ion-background-primitives-lime-700 { + background-color: $ion-primitives-lime-700; } - -.ion-margin-bottom-space-100 { - --margin-bottom: #{$ion-space-100}; - - @include margin(null, null, $ion-space-100, null); +.ion-primitives-lime-800 { + color: $ion-primitives-lime-800; } - -.ion-margin-start-space-100 { - --margin-start: #{$ion-space-100}; - - @include margin(null, null, null, $ion-space-100); +.ion-background-primitives-lime-800 { + background-color: $ion-primitives-lime-800; } - -.ion-padding-space-100 { - --padding-top: #{$ion-space-100}; - --padding-end: #{$ion-space-100}; - --padding-bottom: #{$ion-space-100}; - --padding-start: #{$ion-space-100}; - - @include padding($ion-space-100); +.ion-primitives-lime-900 { + color: $ion-primitives-lime-900; } - -.ion-padding-top-space-100 { - --padding-top: #{$ion-space-100}; - - @include padding($ion-space-100, null, null, null); +.ion-background-primitives-lime-900 { + background-color: $ion-primitives-lime-900; } - -.ion-padding-end-space-100 { - --padding-end: #{$ion-space-100}; - - @include padding(null, $ion-space-100, null, null); +.ion-primitives-lime-1000 { + color: $ion-primitives-lime-1000; } - -.ion-padding-bottom-space-100 { - --padding-bottom: #{$ion-space-100}; - - @include padding(null, null, $ion-space-100, null); +.ion-background-primitives-lime-1000 { + background-color: $ion-primitives-lime-1000; } - -.ion-padding-start-space-100 { - --padding-start: #{$ion-space-100}; - - @include padding(null, null, null, $ion-space-100); +.ion-primitives-lime-1100 { + color: $ion-primitives-lime-1100; } - -.ion-gap-space-150 { - gap: #{$ion-space-150}; +.ion-background-primitives-lime-1100 { + background-color: $ion-primitives-lime-1100; } - -.ion-margin-space-150 { - --margin-top: #{$ion-space-150}; - --margin-end: #{$ion-space-150}; - --margin-bottom: #{$ion-space-150}; - --margin-start: #{$ion-space-150}; - - @include margin($ion-space-150); +.ion-primitives-lime-1200 { + color: $ion-primitives-lime-1200; } - -.ion-margin-top-space-150 { - --margin-top: #{$ion-space-150}; - - @include margin($ion-space-150, null, null, null); +.ion-background-primitives-lime-1200 { + background-color: $ion-primitives-lime-1200; } - -.ion-margin-end-space-150 { - --margin-end: #{$ion-space-150}; - - @include margin(null, $ion-space-150, null, null); +.ion-primitives-green-100 { + color: $ion-primitives-green-100; } - -.ion-margin-bottom-space-150 { - --margin-bottom: #{$ion-space-150}; - - @include margin(null, null, $ion-space-150, null); +.ion-background-primitives-green-100 { + background-color: $ion-primitives-green-100; } - -.ion-margin-start-space-150 { - --margin-start: #{$ion-space-150}; - - @include margin(null, null, null, $ion-space-150); +.ion-primitives-green-200 { + color: $ion-primitives-green-200; } - -.ion-padding-space-150 { - --padding-top: #{$ion-space-150}; - --padding-end: #{$ion-space-150}; - --padding-bottom: #{$ion-space-150}; - --padding-start: #{$ion-space-150}; - - @include padding($ion-space-150); +.ion-background-primitives-green-200 { + background-color: $ion-primitives-green-200; } - -.ion-padding-top-space-150 { - --padding-top: #{$ion-space-150}; - - @include padding($ion-space-150, null, null, null); +.ion-primitives-green-300 { + color: $ion-primitives-green-300; } - -.ion-padding-end-space-150 { - --padding-end: #{$ion-space-150}; - - @include padding(null, $ion-space-150, null, null); +.ion-background-primitives-green-300 { + background-color: $ion-primitives-green-300; } - -.ion-padding-bottom-space-150 { - --padding-bottom: #{$ion-space-150}; - - @include padding(null, null, $ion-space-150, null); +.ion-primitives-green-400 { + color: $ion-primitives-green-400; } - -.ion-padding-start-space-150 { - --padding-start: #{$ion-space-150}; - - @include padding(null, null, null, $ion-space-150); +.ion-background-primitives-green-400 { + background-color: $ion-primitives-green-400; } - -.ion-gap-space-200 { - gap: #{$ion-space-200}; +.ion-primitives-green-500 { + color: $ion-primitives-green-500; } - -.ion-margin-space-200 { - --margin-top: #{$ion-space-200}; - --margin-end: #{$ion-space-200}; - --margin-bottom: #{$ion-space-200}; - --margin-start: #{$ion-space-200}; - - @include margin($ion-space-200); +.ion-background-primitives-green-500 { + background-color: $ion-primitives-green-500; +} +.ion-primitives-green-600 { + color: $ion-primitives-green-600; } - -.ion-margin-top-space-200 { - --margin-top: #{$ion-space-200}; - - @include margin($ion-space-200, null, null, null); +.ion-background-primitives-green-600 { + background-color: $ion-primitives-green-600; } - -.ion-margin-end-space-200 { - --margin-end: #{$ion-space-200}; - - @include margin(null, $ion-space-200, null, null); +.ion-primitives-green-700 { + color: $ion-primitives-green-700; } - -.ion-margin-bottom-space-200 { - --margin-bottom: #{$ion-space-200}; - - @include margin(null, null, $ion-space-200, null); +.ion-background-primitives-green-700 { + background-color: $ion-primitives-green-700; } - -.ion-margin-start-space-200 { - --margin-start: #{$ion-space-200}; - - @include margin(null, null, null, $ion-space-200); +.ion-primitives-green-800 { + color: $ion-primitives-green-800; } - -.ion-padding-space-200 { - --padding-top: #{$ion-space-200}; - --padding-end: #{$ion-space-200}; - --padding-bottom: #{$ion-space-200}; - --padding-start: #{$ion-space-200}; - - @include padding($ion-space-200); +.ion-background-primitives-green-800 { + background-color: $ion-primitives-green-800; } - -.ion-padding-top-space-200 { - --padding-top: #{$ion-space-200}; - - @include padding($ion-space-200, null, null, null); +.ion-primitives-green-900 { + color: $ion-primitives-green-900; } - -.ion-padding-end-space-200 { - --padding-end: #{$ion-space-200}; - - @include padding(null, $ion-space-200, null, null); +.ion-background-primitives-green-900 { + background-color: $ion-primitives-green-900; } - -.ion-padding-bottom-space-200 { - --padding-bottom: #{$ion-space-200}; - - @include padding(null, null, $ion-space-200, null); +.ion-primitives-green-1000 { + color: $ion-primitives-green-1000; } - -.ion-padding-start-space-200 { - --padding-start: #{$ion-space-200}; - - @include padding(null, null, null, $ion-space-200); +.ion-background-primitives-green-1000 { + background-color: $ion-primitives-green-1000; } - -.ion-gap-space-250 { - gap: #{$ion-space-250}; +.ion-primitives-green-1100 { + color: $ion-primitives-green-1100; } - -.ion-margin-space-250 { - --margin-top: #{$ion-space-250}; - --margin-end: #{$ion-space-250}; - --margin-bottom: #{$ion-space-250}; - --margin-start: #{$ion-space-250}; - - @include margin($ion-space-250); +.ion-background-primitives-green-1100 { + background-color: $ion-primitives-green-1100; } - -.ion-margin-top-space-250 { - --margin-top: #{$ion-space-250}; - - @include margin($ion-space-250, null, null, null); +.ion-primitives-green-1200 { + color: $ion-primitives-green-1200; } - -.ion-margin-end-space-250 { - --margin-end: #{$ion-space-250}; - - @include margin(null, $ion-space-250, null, null); +.ion-background-primitives-green-1200 { + background-color: $ion-primitives-green-1200; } - -.ion-margin-bottom-space-250 { - --margin-bottom: #{$ion-space-250}; - - @include margin(null, null, $ion-space-250, null); +.ion-primitives-teal-100 { + color: $ion-primitives-teal-100; } - -.ion-margin-start-space-250 { - --margin-start: #{$ion-space-250}; - - @include margin(null, null, null, $ion-space-250); +.ion-background-primitives-teal-100 { + background-color: $ion-primitives-teal-100; } - -.ion-padding-space-250 { - --padding-top: #{$ion-space-250}; - --padding-end: #{$ion-space-250}; - --padding-bottom: #{$ion-space-250}; - --padding-start: #{$ion-space-250}; - - @include padding($ion-space-250); +.ion-primitives-teal-200 { + color: $ion-primitives-teal-200; } - -.ion-padding-top-space-250 { - --padding-top: #{$ion-space-250}; - - @include padding($ion-space-250, null, null, null); +.ion-background-primitives-teal-200 { + background-color: $ion-primitives-teal-200; } - -.ion-padding-end-space-250 { - --padding-end: #{$ion-space-250}; - - @include padding(null, $ion-space-250, null, null); +.ion-primitives-teal-300 { + color: $ion-primitives-teal-300; } - -.ion-padding-bottom-space-250 { - --padding-bottom: #{$ion-space-250}; - - @include padding(null, null, $ion-space-250, null); +.ion-background-primitives-teal-300 { + background-color: $ion-primitives-teal-300; } - -.ion-padding-start-space-250 { - --padding-start: #{$ion-space-250}; - - @include padding(null, null, null, $ion-space-250); +.ion-primitives-teal-400 { + color: $ion-primitives-teal-400; } - -.ion-gap-space-300 { - gap: #{$ion-space-300}; +.ion-background-primitives-teal-400 { + background-color: $ion-primitives-teal-400; } - -.ion-margin-space-300 { - --margin-top: #{$ion-space-300}; - --margin-end: #{$ion-space-300}; - --margin-bottom: #{$ion-space-300}; - --margin-start: #{$ion-space-300}; - - @include margin($ion-space-300); +.ion-primitives-teal-500 { + color: $ion-primitives-teal-500; } - -.ion-margin-top-space-300 { - --margin-top: #{$ion-space-300}; - - @include margin($ion-space-300, null, null, null); +.ion-background-primitives-teal-500 { + background-color: $ion-primitives-teal-500; } - -.ion-margin-end-space-300 { - --margin-end: #{$ion-space-300}; - - @include margin(null, $ion-space-300, null, null); +.ion-primitives-teal-600 { + color: $ion-primitives-teal-600; } - -.ion-margin-bottom-space-300 { - --margin-bottom: #{$ion-space-300}; - - @include margin(null, null, $ion-space-300, null); +.ion-background-primitives-teal-600 { + background-color: $ion-primitives-teal-600; } - -.ion-margin-start-space-300 { - --margin-start: #{$ion-space-300}; - - @include margin(null, null, null, $ion-space-300); +.ion-primitives-teal-700 { + color: $ion-primitives-teal-700; } - -.ion-padding-space-300 { - --padding-top: #{$ion-space-300}; - --padding-end: #{$ion-space-300}; - --padding-bottom: #{$ion-space-300}; - --padding-start: #{$ion-space-300}; - - @include padding($ion-space-300); +.ion-background-primitives-teal-700 { + background-color: $ion-primitives-teal-700; } - -.ion-padding-top-space-300 { - --padding-top: #{$ion-space-300}; - - @include padding($ion-space-300, null, null, null); +.ion-primitives-teal-800 { + color: $ion-primitives-teal-800; } - -.ion-padding-end-space-300 { - --padding-end: #{$ion-space-300}; - - @include padding(null, $ion-space-300, null, null); +.ion-background-primitives-teal-800 { + background-color: $ion-primitives-teal-800; } - -.ion-padding-bottom-space-300 { - --padding-bottom: #{$ion-space-300}; - - @include padding(null, null, $ion-space-300, null); +.ion-primitives-teal-900 { + color: $ion-primitives-teal-900; } - -.ion-padding-start-space-300 { - --padding-start: #{$ion-space-300}; - - @include padding(null, null, null, $ion-space-300); +.ion-background-primitives-teal-900 { + background-color: $ion-primitives-teal-900; } - -.ion-gap-space-400 { - gap: #{$ion-space-400}; +.ion-primitives-teal-1000 { + color: $ion-primitives-teal-1000; } - -.ion-margin-space-400 { - --margin-top: #{$ion-space-400}; - --margin-end: #{$ion-space-400}; - --margin-bottom: #{$ion-space-400}; - --margin-start: #{$ion-space-400}; - - @include margin($ion-space-400); +.ion-background-primitives-teal-1000 { + background-color: $ion-primitives-teal-1000; } - -.ion-margin-top-space-400 { - --margin-top: #{$ion-space-400}; - - @include margin($ion-space-400, null, null, null); +.ion-primitives-teal-1100 { + color: $ion-primitives-teal-1100; +} +.ion-background-primitives-teal-1100 { + background-color: $ion-primitives-teal-1100; +} +.ion-primitives-teal-1200 { + color: $ion-primitives-teal-1200; } - -.ion-margin-end-space-400 { - --margin-end: #{$ion-space-400}; - - @include margin(null, $ion-space-400, null, null); +.ion-background-primitives-teal-1200 { + background-color: $ion-primitives-teal-1200; } - -.ion-margin-bottom-space-400 { - --margin-bottom: #{$ion-space-400}; - - @include margin(null, null, $ion-space-400, null); +.ion-primitives-aqua-100 { + color: $ion-primitives-aqua-100; } - -.ion-margin-start-space-400 { - --margin-start: #{$ion-space-400}; - - @include margin(null, null, null, $ion-space-400); +.ion-background-primitives-aqua-100 { + background-color: $ion-primitives-aqua-100; } - -.ion-padding-space-400 { - --padding-top: #{$ion-space-400}; - --padding-end: #{$ion-space-400}; - --padding-bottom: #{$ion-space-400}; - --padding-start: #{$ion-space-400}; - - @include padding($ion-space-400); +.ion-primitives-aqua-200 { + color: $ion-primitives-aqua-200; } - -.ion-padding-top-space-400 { - --padding-top: #{$ion-space-400}; - - @include padding($ion-space-400, null, null, null); +.ion-background-primitives-aqua-200 { + background-color: $ion-primitives-aqua-200; } - -.ion-padding-end-space-400 { - --padding-end: #{$ion-space-400}; - - @include padding(null, $ion-space-400, null, null); +.ion-primitives-aqua-300 { + color: $ion-primitives-aqua-300; } - -.ion-padding-bottom-space-400 { - --padding-bottom: #{$ion-space-400}; - - @include padding(null, null, $ion-space-400, null); +.ion-background-primitives-aqua-300 { + background-color: $ion-primitives-aqua-300; } - -.ion-padding-start-space-400 { - --padding-start: #{$ion-space-400}; - - @include padding(null, null, null, $ion-space-400); +.ion-primitives-aqua-400 { + color: $ion-primitives-aqua-400; } - -.ion-gap-space-500 { - gap: #{$ion-space-500}; +.ion-background-primitives-aqua-400 { + background-color: $ion-primitives-aqua-400; } - -.ion-margin-space-500 { - --margin-top: #{$ion-space-500}; - --margin-end: #{$ion-space-500}; - --margin-bottom: #{$ion-space-500}; - --margin-start: #{$ion-space-500}; - - @include margin($ion-space-500); +.ion-primitives-aqua-500 { + color: $ion-primitives-aqua-500; } - -.ion-margin-top-space-500 { - --margin-top: #{$ion-space-500}; - - @include margin($ion-space-500, null, null, null); +.ion-background-primitives-aqua-500 { + background-color: $ion-primitives-aqua-500; } - -.ion-margin-end-space-500 { - --margin-end: #{$ion-space-500}; - - @include margin(null, $ion-space-500, null, null); +.ion-primitives-aqua-600 { + color: $ion-primitives-aqua-600; } - -.ion-margin-bottom-space-500 { - --margin-bottom: #{$ion-space-500}; - - @include margin(null, null, $ion-space-500, null); +.ion-background-primitives-aqua-600 { + background-color: $ion-primitives-aqua-600; } - -.ion-margin-start-space-500 { - --margin-start: #{$ion-space-500}; - - @include margin(null, null, null, $ion-space-500); +.ion-primitives-aqua-700 { + color: $ion-primitives-aqua-700; } - -.ion-padding-space-500 { - --padding-top: #{$ion-space-500}; - --padding-end: #{$ion-space-500}; - --padding-bottom: #{$ion-space-500}; - --padding-start: #{$ion-space-500}; - - @include padding($ion-space-500); +.ion-background-primitives-aqua-700 { + background-color: $ion-primitives-aqua-700; } - -.ion-padding-top-space-500 { - --padding-top: #{$ion-space-500}; - - @include padding($ion-space-500, null, null, null); +.ion-primitives-aqua-800 { + color: $ion-primitives-aqua-800; } - -.ion-padding-end-space-500 { - --padding-end: #{$ion-space-500}; - - @include padding(null, $ion-space-500, null, null); +.ion-background-primitives-aqua-800 { + background-color: $ion-primitives-aqua-800; } - -.ion-padding-bottom-space-500 { - --padding-bottom: #{$ion-space-500}; - - @include padding(null, null, $ion-space-500, null); +.ion-primitives-aqua-900 { + color: $ion-primitives-aqua-900; } - -.ion-padding-start-space-500 { - --padding-start: #{$ion-space-500}; - - @include padding(null, null, null, $ion-space-500); +.ion-background-primitives-aqua-900 { + background-color: $ion-primitives-aqua-900; } - -.ion-gap-space-600 { - gap: #{$ion-space-600}; +.ion-primitives-aqua-1000 { + color: $ion-primitives-aqua-1000; } - -.ion-margin-space-600 { - --margin-top: #{$ion-space-600}; - --margin-end: #{$ion-space-600}; - --margin-bottom: #{$ion-space-600}; - --margin-start: #{$ion-space-600}; - - @include margin($ion-space-600); +.ion-background-primitives-aqua-1000 { + background-color: $ion-primitives-aqua-1000; } - -.ion-margin-top-space-600 { - --margin-top: #{$ion-space-600}; - - @include margin($ion-space-600, null, null, null); +.ion-primitives-aqua-1100 { + color: $ion-primitives-aqua-1100; } - -.ion-margin-end-space-600 { - --margin-end: #{$ion-space-600}; - - @include margin(null, $ion-space-600, null, null); +.ion-background-primitives-aqua-1100 { + background-color: $ion-primitives-aqua-1100; } - -.ion-margin-bottom-space-600 { - --margin-bottom: #{$ion-space-600}; - - @include margin(null, null, $ion-space-600, null); +.ion-primitives-aqua-1200 { + color: $ion-primitives-aqua-1200; } - -.ion-margin-start-space-600 { - --margin-start: #{$ion-space-600}; - - @include margin(null, null, null, $ion-space-600); +.ion-background-primitives-aqua-1200 { + background-color: $ion-primitives-aqua-1200; } - -.ion-padding-space-600 { - --padding-top: #{$ion-space-600}; - --padding-end: #{$ion-space-600}; - --padding-bottom: #{$ion-space-600}; - --padding-start: #{$ion-space-600}; - - @include padding($ion-space-600); +.ion-primitives-blue-100 { + color: $ion-primitives-blue-100; } - -.ion-padding-top-space-600 { - --padding-top: #{$ion-space-600}; - - @include padding($ion-space-600, null, null, null); +.ion-background-primitives-blue-100 { + background-color: $ion-primitives-blue-100; } - -.ion-padding-end-space-600 { - --padding-end: #{$ion-space-600}; - - @include padding(null, $ion-space-600, null, null); +.ion-primitives-blue-200 { + color: $ion-primitives-blue-200; } - -.ion-padding-bottom-space-600 { - --padding-bottom: #{$ion-space-600}; - - @include padding(null, null, $ion-space-600, null); +.ion-background-primitives-blue-200 { + background-color: $ion-primitives-blue-200; } - -.ion-padding-start-space-600 { - --padding-start: #{$ion-space-600}; - - @include padding(null, null, null, $ion-space-600); +.ion-primitives-blue-300 { + color: $ion-primitives-blue-300; } - -.ion-gap-space-700 { - gap: #{$ion-space-700}; +.ion-background-primitives-blue-300 { + background-color: $ion-primitives-blue-300; } - -.ion-margin-space-700 { - --margin-top: #{$ion-space-700}; - --margin-end: #{$ion-space-700}; - --margin-bottom: #{$ion-space-700}; - --margin-start: #{$ion-space-700}; - - @include margin($ion-space-700); +.ion-primitives-blue-400 { + color: $ion-primitives-blue-400; } - -.ion-margin-top-space-700 { - --margin-top: #{$ion-space-700}; - - @include margin($ion-space-700, null, null, null); +.ion-background-primitives-blue-400 { + background-color: $ion-primitives-blue-400; } - -.ion-margin-end-space-700 { - --margin-end: #{$ion-space-700}; - - @include margin(null, $ion-space-700, null, null); +.ion-primitives-blue-500 { + color: $ion-primitives-blue-500; +} +.ion-background-primitives-blue-500 { + background-color: $ion-primitives-blue-500; +} +.ion-primitives-blue-600 { + color: $ion-primitives-blue-600; } - -.ion-margin-bottom-space-700 { - --margin-bottom: #{$ion-space-700}; - - @include margin(null, null, $ion-space-700, null); +.ion-background-primitives-blue-600 { + background-color: $ion-primitives-blue-600; } - -.ion-margin-start-space-700 { - --margin-start: #{$ion-space-700}; - - @include margin(null, null, null, $ion-space-700); +.ion-primitives-blue-700 { + color: $ion-primitives-blue-700; } - -.ion-padding-space-700 { - --padding-top: #{$ion-space-700}; - --padding-end: #{$ion-space-700}; - --padding-bottom: #{$ion-space-700}; - --padding-start: #{$ion-space-700}; - - @include padding($ion-space-700); +.ion-background-primitives-blue-700 { + background-color: $ion-primitives-blue-700; } - -.ion-padding-top-space-700 { - --padding-top: #{$ion-space-700}; - - @include padding($ion-space-700, null, null, null); +.ion-primitives-blue-800 { + color: $ion-primitives-blue-800; } - -.ion-padding-end-space-700 { - --padding-end: #{$ion-space-700}; - - @include padding(null, $ion-space-700, null, null); +.ion-background-primitives-blue-800 { + background-color: $ion-primitives-blue-800; } - -.ion-padding-bottom-space-700 { - --padding-bottom: #{$ion-space-700}; - - @include padding(null, null, $ion-space-700, null); +.ion-primitives-blue-900 { + color: $ion-primitives-blue-900; } - -.ion-padding-start-space-700 { - --padding-start: #{$ion-space-700}; - - @include padding(null, null, null, $ion-space-700); +.ion-background-primitives-blue-900 { + background-color: $ion-primitives-blue-900; } - -.ion-gap-space-800 { - gap: #{$ion-space-800}; +.ion-primitives-blue-1000 { + color: $ion-primitives-blue-1000; } - -.ion-margin-space-800 { - --margin-top: #{$ion-space-800}; - --margin-end: #{$ion-space-800}; - --margin-bottom: #{$ion-space-800}; - --margin-start: #{$ion-space-800}; - - @include margin($ion-space-800); +.ion-background-primitives-blue-1000 { + background-color: $ion-primitives-blue-1000; } - -.ion-margin-top-space-800 { - --margin-top: #{$ion-space-800}; - - @include margin($ion-space-800, null, null, null); +.ion-primitives-blue-1100 { + color: $ion-primitives-blue-1100; } - -.ion-margin-end-space-800 { - --margin-end: #{$ion-space-800}; - - @include margin(null, $ion-space-800, null, null); +.ion-background-primitives-blue-1100 { + background-color: $ion-primitives-blue-1100; } - -.ion-margin-bottom-space-800 { - --margin-bottom: #{$ion-space-800}; - - @include margin(null, null, $ion-space-800, null); +.ion-primitives-blue-1200 { + color: $ion-primitives-blue-1200; } - -.ion-margin-start-space-800 { - --margin-start: #{$ion-space-800}; - - @include margin(null, null, null, $ion-space-800); +.ion-background-primitives-blue-1200 { + background-color: $ion-primitives-blue-1200; } - -.ion-padding-space-800 { - --padding-top: #{$ion-space-800}; - --padding-end: #{$ion-space-800}; - --padding-bottom: #{$ion-space-800}; - --padding-start: #{$ion-space-800}; - - @include padding($ion-space-800); +.ion-primitives-indigo-100 { + color: $ion-primitives-indigo-100; } - -.ion-padding-top-space-800 { - --padding-top: #{$ion-space-800}; - - @include padding($ion-space-800, null, null, null); +.ion-background-primitives-indigo-100 { + background-color: $ion-primitives-indigo-100; } - -.ion-padding-end-space-800 { - --padding-end: #{$ion-space-800}; - - @include padding(null, $ion-space-800, null, null); +.ion-primitives-indigo-200 { + color: $ion-primitives-indigo-200; } - -.ion-padding-bottom-space-800 { - --padding-bottom: #{$ion-space-800}; - - @include padding(null, null, $ion-space-800, null); +.ion-background-primitives-indigo-200 { + background-color: $ion-primitives-indigo-200; } - -.ion-padding-start-space-800 { - --padding-start: #{$ion-space-800}; - - @include padding(null, null, null, $ion-space-800); +.ion-primitives-indigo-300 { + color: $ion-primitives-indigo-300; } - -.ion-gap-space-900 { - gap: #{$ion-space-900}; +.ion-background-primitives-indigo-300 { + background-color: $ion-primitives-indigo-300; } - -.ion-margin-space-900 { - --margin-top: #{$ion-space-900}; - --margin-end: #{$ion-space-900}; - --margin-bottom: #{$ion-space-900}; - --margin-start: #{$ion-space-900}; - - @include margin($ion-space-900); +.ion-primitives-indigo-400 { + color: $ion-primitives-indigo-400; } - -.ion-margin-top-space-900 { - --margin-top: #{$ion-space-900}; - - @include margin($ion-space-900, null, null, null); +.ion-background-primitives-indigo-400 { + background-color: $ion-primitives-indigo-400; } - -.ion-margin-end-space-900 { - --margin-end: #{$ion-space-900}; - - @include margin(null, $ion-space-900, null, null); +.ion-primitives-indigo-500 { + color: $ion-primitives-indigo-500; } - -.ion-margin-bottom-space-900 { - --margin-bottom: #{$ion-space-900}; - - @include margin(null, null, $ion-space-900, null); +.ion-background-primitives-indigo-500 { + background-color: $ion-primitives-indigo-500; } - -.ion-margin-start-space-900 { - --margin-start: #{$ion-space-900}; - - @include margin(null, null, null, $ion-space-900); +.ion-primitives-indigo-600 { + color: $ion-primitives-indigo-600; } - -.ion-padding-space-900 { - --padding-top: #{$ion-space-900}; - --padding-end: #{$ion-space-900}; - --padding-bottom: #{$ion-space-900}; - --padding-start: #{$ion-space-900}; - - @include padding($ion-space-900); +.ion-background-primitives-indigo-600 { + background-color: $ion-primitives-indigo-600; } - -.ion-padding-top-space-900 { - --padding-top: #{$ion-space-900}; - - @include padding($ion-space-900, null, null, null); +.ion-primitives-indigo-700 { + color: $ion-primitives-indigo-700; } - -.ion-padding-end-space-900 { - --padding-end: #{$ion-space-900}; - - @include padding(null, $ion-space-900, null, null); +.ion-background-primitives-indigo-700 { + background-color: $ion-primitives-indigo-700; } - -.ion-padding-bottom-space-900 { - --padding-bottom: #{$ion-space-900}; - - @include padding(null, null, $ion-space-900, null); +.ion-primitives-indigo-800 { + color: $ion-primitives-indigo-800; } - -.ion-padding-start-space-900 { - --padding-start: #{$ion-space-900}; - - @include padding(null, null, null, $ion-space-900); +.ion-background-primitives-indigo-800 { + background-color: $ion-primitives-indigo-800; } - -.ion-gap-space-1000 { - gap: #{$ion-space-1000}; +.ion-primitives-indigo-900 { + color: $ion-primitives-indigo-900; } - -.ion-margin-space-1000 { - --margin-top: #{$ion-space-1000}; - --margin-end: #{$ion-space-1000}; - --margin-bottom: #{$ion-space-1000}; - --margin-start: #{$ion-space-1000}; - - @include margin($ion-space-1000); +.ion-background-primitives-indigo-900 { + background-color: $ion-primitives-indigo-900; } - -.ion-margin-top-space-1000 { - --margin-top: #{$ion-space-1000}; - - @include margin($ion-space-1000, null, null, null); +.ion-primitives-indigo-1000 { + color: $ion-primitives-indigo-1000; } - -.ion-margin-end-space-1000 { - --margin-end: #{$ion-space-1000}; - - @include margin(null, $ion-space-1000, null, null); +.ion-background-primitives-indigo-1000 { + background-color: $ion-primitives-indigo-1000; } - -.ion-margin-bottom-space-1000 { - --margin-bottom: #{$ion-space-1000}; - - @include margin(null, null, $ion-space-1000, null); +.ion-primitives-indigo-1100 { + color: $ion-primitives-indigo-1100; +} +.ion-background-primitives-indigo-1100 { + background-color: $ion-primitives-indigo-1100; +} +.ion-primitives-indigo-1200 { + color: $ion-primitives-indigo-1200; } - -.ion-margin-start-space-1000 { - --margin-start: #{$ion-space-1000}; - - @include margin(null, null, null, $ion-space-1000); +.ion-background-primitives-indigo-1200 { + background-color: $ion-primitives-indigo-1200; } - -.ion-padding-space-1000 { - --padding-top: #{$ion-space-1000}; - --padding-end: #{$ion-space-1000}; - --padding-bottom: #{$ion-space-1000}; - --padding-start: #{$ion-space-1000}; - - @include padding($ion-space-1000); +.ion-primitives-violet-100 { + color: $ion-primitives-violet-100; } - -.ion-padding-top-space-1000 { - --padding-top: #{$ion-space-1000}; - - @include padding($ion-space-1000, null, null, null); +.ion-background-primitives-violet-100 { + background-color: $ion-primitives-violet-100; } - -.ion-padding-end-space-1000 { - --padding-end: #{$ion-space-1000}; - - @include padding(null, $ion-space-1000, null, null); +.ion-primitives-violet-200 { + color: $ion-primitives-violet-200; } - -.ion-padding-bottom-space-1000 { - --padding-bottom: #{$ion-space-1000}; - - @include padding(null, null, $ion-space-1000, null); +.ion-background-primitives-violet-200 { + background-color: $ion-primitives-violet-200; } - -.ion-padding-start-space-1000 { - --padding-start: #{$ion-space-1000}; - - @include padding(null, null, null, $ion-space-1000); +.ion-primitives-violet-300 { + color: $ion-primitives-violet-300; } - -.ion-gap-space-1200 { - gap: #{$ion-space-1200}; +.ion-background-primitives-violet-300 { + background-color: $ion-primitives-violet-300; } - -.ion-margin-space-1200 { - --margin-top: #{$ion-space-1200}; - --margin-end: #{$ion-space-1200}; - --margin-bottom: #{$ion-space-1200}; - --margin-start: #{$ion-space-1200}; - - @include margin($ion-space-1200); +.ion-primitives-violet-400 { + color: $ion-primitives-violet-400; } - -.ion-margin-top-space-1200 { - --margin-top: #{$ion-space-1200}; - - @include margin($ion-space-1200, null, null, null); +.ion-background-primitives-violet-400 { + background-color: $ion-primitives-violet-400; } - -.ion-margin-end-space-1200 { - --margin-end: #{$ion-space-1200}; - - @include margin(null, $ion-space-1200, null, null); +.ion-primitives-violet-500 { + color: $ion-primitives-violet-500; } - -.ion-margin-bottom-space-1200 { - --margin-bottom: #{$ion-space-1200}; - - @include margin(null, null, $ion-space-1200, null); +.ion-background-primitives-violet-500 { + background-color: $ion-primitives-violet-500; } - -.ion-margin-start-space-1200 { - --margin-start: #{$ion-space-1200}; - - @include margin(null, null, null, $ion-space-1200); +.ion-primitives-violet-600 { + color: $ion-primitives-violet-600; } - -.ion-padding-space-1200 { - --padding-top: #{$ion-space-1200}; - --padding-end: #{$ion-space-1200}; - --padding-bottom: #{$ion-space-1200}; - --padding-start: #{$ion-space-1200}; - - @include padding($ion-space-1200); +.ion-background-primitives-violet-600 { + background-color: $ion-primitives-violet-600; } - -.ion-padding-top-space-1200 { - --padding-top: #{$ion-space-1200}; - - @include padding($ion-space-1200, null, null, null); +.ion-primitives-violet-700 { + color: $ion-primitives-violet-700; } - -.ion-padding-end-space-1200 { - --padding-end: #{$ion-space-1200}; - - @include padding(null, $ion-space-1200, null, null); +.ion-background-primitives-violet-700 { + background-color: $ion-primitives-violet-700; } - -.ion-padding-bottom-space-1200 { - --padding-bottom: #{$ion-space-1200}; - - @include padding(null, null, $ion-space-1200, null); +.ion-primitives-violet-800 { + color: $ion-primitives-violet-800; } - -.ion-padding-start-space-1200 { - --padding-start: #{$ion-space-1200}; - - @include padding(null, null, null, $ion-space-1200); +.ion-background-primitives-violet-800 { + background-color: $ion-primitives-violet-800; } - -.ion-gap-space-050 { - gap: #{$ion-space-050}; +.ion-primitives-violet-900 { + color: $ion-primitives-violet-900; } - -.ion-margin-space-050 { - --margin-top: #{$ion-space-050}; - --margin-end: #{$ion-space-050}; - --margin-bottom: #{$ion-space-050}; - --margin-start: #{$ion-space-050}; - - @include margin($ion-space-050); +.ion-background-primitives-violet-900 { + background-color: $ion-primitives-violet-900; } - -.ion-margin-top-space-050 { - --margin-top: #{$ion-space-050}; - - @include margin($ion-space-050, null, null, null); +.ion-primitives-violet-1000 { + color: $ion-primitives-violet-1000; } - -.ion-margin-end-space-050 { - --margin-end: #{$ion-space-050}; - - @include margin(null, $ion-space-050, null, null); +.ion-background-primitives-violet-1000 { + background-color: $ion-primitives-violet-1000; } - -.ion-margin-bottom-space-050 { - --margin-bottom: #{$ion-space-050}; - - @include margin(null, null, $ion-space-050, null); +.ion-primitives-violet-1100 { + color: $ion-primitives-violet-1100; } - -.ion-margin-start-space-050 { - --margin-start: #{$ion-space-050}; - - @include margin(null, null, null, $ion-space-050); +.ion-background-primitives-violet-1100 { + background-color: $ion-primitives-violet-1100; } - -.ion-padding-space-050 { - --padding-top: #{$ion-space-050}; - --padding-end: #{$ion-space-050}; - --padding-bottom: #{$ion-space-050}; - --padding-start: #{$ion-space-050}; - - @include padding($ion-space-050); +.ion-primitives-violet-1200 { + color: $ion-primitives-violet-1200; } - -.ion-padding-top-space-050 { - --padding-top: #{$ion-space-050}; - - @include padding($ion-space-050, null, null, null); +.ion-background-primitives-violet-1200 { + background-color: $ion-primitives-violet-1200; } - -.ion-padding-end-space-050 { - --padding-end: #{$ion-space-050}; - - @include padding(null, $ion-space-050, null, null); +.ion-primitives-purple-100 { + color: $ion-primitives-purple-100; } - -.ion-padding-bottom-space-050 { - --padding-bottom: #{$ion-space-050}; - - @include padding(null, null, $ion-space-050, null); +.ion-background-primitives-purple-100 { + background-color: $ion-primitives-purple-100; } - -.ion-padding-start-space-050 { - --padding-start: #{$ion-space-050}; - - @include padding(null, null, null, $ion-space-050); +.ion-primitives-purple-200 { + color: $ion-primitives-purple-200; } - -.ion-z-index-0 { - z-index: $ion-z-index-0; +.ion-background-primitives-purple-200 { + background-color: $ion-primitives-purple-200; } -.ion-z-index-100 { - z-index: $ion-z-index-100; +.ion-primitives-purple-300 { + color: $ion-primitives-purple-300; } -.ion-z-index-200 { - z-index: $ion-z-index-200; +.ion-background-primitives-purple-300 { + background-color: $ion-primitives-purple-300; } -.ion-z-index-300 { - z-index: $ion-z-index-300; +.ion-primitives-purple-400 { + color: $ion-primitives-purple-400; } -.ion-z-index-400 { - z-index: $ion-z-index-400; +.ion-background-primitives-purple-400 { + background-color: $ion-primitives-purple-400; } -.ion-z-index-500 { - z-index: $ion-z-index-500; +.ion-primitives-purple-500 { + color: $ion-primitives-purple-500; } -.ion-z-index-bottom { - z-index: $ion-z-index-bottom; +.ion-background-primitives-purple-500 { + background-color: $ion-primitives-purple-500; } -.ion-z-index-top { - z-index: $ion-z-index-top; +.ion-primitives-purple-600 { + color: $ion-primitives-purple-600; } -.ion-transition-curve-linear { - transition: $ion-transition-curve-linear; +.ion-background-primitives-purple-600 { + background-color: $ion-primitives-purple-600; } -.ion-transition-curve-quick { - transition: $ion-transition-curve-quick; +.ion-primitives-purple-700 { + color: $ion-primitives-purple-700; } -.ion-transition-curve-base { - transition: $ion-transition-curve-base; +.ion-background-primitives-purple-700 { + background-color: $ion-primitives-purple-700; } -.ion-transition-curve-expressive { - transition: $ion-transition-curve-expressive; +.ion-primitives-purple-800 { + color: $ion-primitives-purple-800; } -.ion-transition-curve-bounce { - transition: $ion-transition-curve-bounce; +.ion-background-primitives-purple-800 { + background-color: $ion-primitives-purple-800; } -.ion-transition-time-0 { - transition: $ion-transition-time-0; +.ion-primitives-purple-900 { + color: $ion-primitives-purple-900; } -.ion-transition-time-100 { - transition: $ion-transition-time-100; +.ion-background-primitives-purple-900 { + background-color: $ion-primitives-purple-900; } -.ion-transition-time-150 { - transition: $ion-transition-time-150; +.ion-primitives-purple-1000 { + color: $ion-primitives-purple-1000; } -.ion-transition-time-200 { - transition: $ion-transition-time-200; +.ion-background-primitives-purple-1000 { + background-color: $ion-primitives-purple-1000; } -.ion-transition-time-300 { - transition: $ion-transition-time-300; +.ion-primitives-purple-1100 { + color: $ion-primitives-purple-1100; } -.ion-transition-time-500 { - transition: $ion-transition-time-500; +.ion-background-primitives-purple-1100 { + background-color: $ion-primitives-purple-1100; } -.ion-transition-time-1000 { - transition: $ion-transition-time-1000; +.ion-primitives-purple-1200 { + color: $ion-primitives-purple-1200; } -.ion-transition-time-1500 { - transition: $ion-transition-time-1500; +.ion-background-primitives-purple-1200 { + background-color: $ion-primitives-purple-1200; } -.ion-font-weight-thin { - font-weight: $ion-font-weight-thin; +.ion-primitives-magenta-100 { + color: $ion-primitives-magenta-100; } -.ion-font-weight-extra-light { - font-weight: $ion-font-weight-extra-light; +.ion-background-primitives-magenta-100 { + background-color: $ion-primitives-magenta-100; } -.ion-font-weight-light { - font-weight: $ion-font-weight-light; +.ion-primitives-magenta-200 { + color: $ion-primitives-magenta-200; } -.ion-font-weight-regular { - font-weight: $ion-font-weight-regular; +.ion-background-primitives-magenta-200 { + background-color: $ion-primitives-magenta-200; } -.ion-font-weight-medium { - font-weight: $ion-font-weight-medium; +.ion-primitives-magenta-300 { + color: $ion-primitives-magenta-300; } -.ion-font-weight-semi-bold { - font-weight: $ion-font-weight-semi-bold; +.ion-background-primitives-magenta-300 { + background-color: $ion-primitives-magenta-300; } -.ion-font-weight-bold { - font-weight: $ion-font-weight-bold; +.ion-primitives-magenta-400 { + color: $ion-primitives-magenta-400; } -.ion-font-weight-extra-bold { - font-weight: $ion-font-weight-extra-bold; +.ion-background-primitives-magenta-400 { + background-color: $ion-primitives-magenta-400; } -.ion-font-weight-black { - font-weight: $ion-font-weight-black; +.ion-primitives-magenta-500 { + color: $ion-primitives-magenta-500; } -.ion-font-size-275 { - font-size: $ion-font-size-275; +.ion-background-primitives-magenta-500 { + background-color: $ion-primitives-magenta-500; } -.ion-font-size-300 { - font-size: $ion-font-size-300; +.ion-primitives-magenta-600 { + color: $ion-primitives-magenta-600; } -.ion-font-size-350 { - font-size: $ion-font-size-350; +.ion-background-primitives-magenta-600 { + background-color: $ion-primitives-magenta-600; } -.ion-font-size-400 { - font-size: $ion-font-size-400; +.ion-primitives-magenta-700 { + color: $ion-primitives-magenta-700; } -.ion-font-size-450 { - font-size: $ion-font-size-450; +.ion-background-primitives-magenta-700 { + background-color: $ion-primitives-magenta-700; } -.ion-font-size-500 { - font-size: $ion-font-size-500; +.ion-primitives-magenta-800 { + color: $ion-primitives-magenta-800; } -.ion-font-size-550 { - font-size: $ion-font-size-550; +.ion-background-primitives-magenta-800 { + background-color: $ion-primitives-magenta-800; } -.ion-font-size-600 { - font-size: $ion-font-size-600; +.ion-primitives-magenta-900 { + color: $ion-primitives-magenta-900; } -.ion-font-size-650 { - font-size: $ion-font-size-650; +.ion-background-primitives-magenta-900 { + background-color: $ion-primitives-magenta-900; } -.ion-font-size-700 { - font-size: $ion-font-size-700; +.ion-primitives-magenta-1000 { + color: $ion-primitives-magenta-1000; } -.ion-font-size-800 { - font-size: $ion-font-size-800; +.ion-background-primitives-magenta-1000 { + background-color: $ion-primitives-magenta-1000; } -.ion-font-size-900 { - font-size: $ion-font-size-900; +.ion-primitives-magenta-1100 { + color: $ion-primitives-magenta-1100; } -.ion-font-letter-spacing-0 { - letter-spacing: $ion-font-letter-spacing-0; +.ion-background-primitives-magenta-1100 { + background-color: $ion-primitives-magenta-1100; } -.ion-font-letter-spacing-1 { - letter-spacing: $ion-font-letter-spacing-1; +.ion-primitives-magenta-1200 { + color: $ion-primitives-magenta-1200; } -.ion-font-letter-spacing-2 { - letter-spacing: $ion-font-letter-spacing-2; +.ion-background-primitives-magenta-1200 { + background-color: $ion-primitives-magenta-1200; } -.ion-font-line-height-300 { - line-height: $ion-font-line-height-300; +.ion-primitives-pink-100 { + color: $ion-primitives-pink-100; } -.ion-font-line-height-400 { - line-height: $ion-font-line-height-400; +.ion-background-primitives-pink-100 { + background-color: $ion-primitives-pink-100; } -.ion-font-line-height-500 { - line-height: $ion-font-line-height-500; +.ion-primitives-pink-200 { + color: $ion-primitives-pink-200; } -.ion-font-line-height-600 { - line-height: $ion-font-line-height-600; +.ion-background-primitives-pink-200 { + background-color: $ion-primitives-pink-200; } -.ion-font-line-height-700 { - line-height: $ion-font-line-height-700; +.ion-primitives-pink-300 { + color: $ion-primitives-pink-300; } -.ion-font-line-height-800 { - line-height: $ion-font-line-height-800; +.ion-background-primitives-pink-300 { + background-color: $ion-primitives-pink-300; } -.ion-font-line-height-900 { - line-height: $ion-font-line-height-900; +.ion-primitives-pink-400 { + color: $ion-primitives-pink-400; } -.ion-font-line-height-1100 { - line-height: $ion-font-line-height-1100; +.ion-background-primitives-pink-400 { + background-color: $ion-primitives-pink-400; } -.ion-font-line-height-1200 { - line-height: $ion-font-line-height-1200; +.ion-primitives-pink-500 { + color: $ion-primitives-pink-500; } -.ion-font-line-height-full { - line-height: $ion-font-line-height-full; +.ion-background-primitives-pink-500 { + background-color: $ion-primitives-pink-500; } -.ion-rectangular-2xs { - border-radius: $ion-rectangular-2xs; +.ion-primitives-pink-600 { + color: $ion-primitives-pink-600; } -.ion-rectangular-xs { - border-radius: $ion-rectangular-xs; +.ion-background-primitives-pink-600 { + background-color: $ion-primitives-pink-600; } -.ion-rectangular-sm { - border-radius: $ion-rectangular-sm; +.ion-primitives-pink-700 { + color: $ion-primitives-pink-700; } -.ion-rectangular-md { - border-radius: $ion-rectangular-md; +.ion-background-primitives-pink-700 { + background-color: $ion-primitives-pink-700; } -.ion-rectangular-lg { - border-radius: $ion-rectangular-lg; +.ion-primitives-pink-800 { + color: $ion-primitives-pink-800; } -.ion-rectangular-xl { - border-radius: $ion-rectangular-xl; +.ion-background-primitives-pink-800 { + background-color: $ion-primitives-pink-800; } -.ion-rectangular-2xl { - border-radius: $ion-rectangular-2xl; +.ion-primitives-pink-900 { + color: $ion-primitives-pink-900; } -.ion-round-2xs { - border-radius: $ion-round-2xs; +.ion-background-primitives-pink-900 { + background-color: $ion-primitives-pink-900; } -.ion-round-xs { - border-radius: $ion-round-xs; +.ion-primitives-pink-1000 { + color: $ion-primitives-pink-1000; } -.ion-round-sm { - border-radius: $ion-round-sm; +.ion-background-primitives-pink-1000 { + background-color: $ion-primitives-pink-1000; } -.ion-round-md { - border-radius: $ion-round-md; +.ion-primitives-pink-1100 { + color: $ion-primitives-pink-1100; } -.ion-round-lg { - border-radius: $ion-round-lg; +.ion-background-primitives-pink-1100 { + background-color: $ion-primitives-pink-1100; } -.ion-round-xl { - border-radius: $ion-round-xl; +.ion-primitives-pink-1200 { + color: $ion-primitives-pink-1200; } -.ion-round-2xl { - border-radius: $ion-round-2xl; +.ion-background-primitives-pink-1200 { + background-color: $ion-primitives-pink-1200; } -.ion-soft-2xs { - border-radius: $ion-soft-2xs; +.ion-shadow-1 { + box-shadow: $ion-shadow-1; } -.ion-soft-xs { - border-radius: $ion-soft-xs; +.ion-shadow-2 { + box-shadow: $ion-shadow-2; } -.ion-soft-sm { - border-radius: $ion-soft-sm; +.ion-shadow-3 { + box-shadow: $ion-shadow-3; } -.ion-soft-md { - border-radius: $ion-soft-md; +.ion-shadow-4 { + box-shadow: $ion-shadow-4; } -.ion-soft-lg { - border-radius: $ion-soft-lg; +.ion-shadow-5 { + box-shadow: $ion-shadow-5; } -.ion-soft-xl { - border-radius: $ion-soft-xl; +.ion-shadow-6 { + box-shadow: $ion-shadow-6; } -.ion-soft-2xl { - border-radius: $ion-soft-2xl; +.ion-shadow-7 { + box-shadow: $ion-shadow-7; } .ion-no-margin { diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index 7eda2a4e6b..cbc70fb210 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -29,32 +29,32 @@ $ion-semantics-primary-1200: var(--ion-semantics-primary-1200, #072561); $ion-semantics-primary-1200-rgb: var(--ion-semantics-primary-1200-rgb, 7, 37, 97); $ion-semantics-primary-base: var(--ion-semantics-primary-base, #105cef); $ion-semantics-primary-base-rgb: var(--ion-semantics-primary-base-rgb, 16, 92, 239); -$ion-semantics-info-100: var(--ion-semantics-info-100, #ebf9fe); -$ion-semantics-info-100-rgb: var(--ion-semantics-info-100-rgb, 235, 249, 254); -$ion-semantics-info-200: var(--ion-semantics-info-200, #dcf4fd); -$ion-semantics-info-200-rgb: var(--ion-semantics-info-200-rgb, 220, 244, 253); -$ion-semantics-info-300: var(--ion-semantics-info-300, #b3e9fc); -$ion-semantics-info-300-rgb: var(--ion-semantics-info-300-rgb, 179, 233, 252); -$ion-semantics-info-400: var(--ion-semantics-info-400, #80defa); -$ion-semantics-info-400-rgb: var(--ion-semantics-info-400-rgb, 128, 222, 250); -$ion-semantics-info-500: var(--ion-semantics-info-500, #27d3f9); -$ion-semantics-info-500-rgb: var(--ion-semantics-info-500-rgb, 39, 211, 249); -$ion-semantics-info-600: var(--ion-semantics-info-600, #22bbdc); -$ion-semantics-info-600-rgb: var(--ion-semantics-info-600-rgb, 34, 187, 220); -$ion-semantics-info-700: var(--ion-semantics-info-700, #1ea2bf); -$ion-semantics-info-700-rgb: var(--ion-semantics-info-700-rgb, 30, 162, 191); -$ion-semantics-info-800: var(--ion-semantics-info-800, #1988a0); -$ion-semantics-info-800-rgb: var(--ion-semantics-info-800-rgb, 25, 136, 160); -$ion-semantics-info-900: var(--ion-semantics-info-900, #146d81); -$ion-semantics-info-900-rgb: var(--ion-semantics-info-900-rgb, 20, 109, 129); -$ion-semantics-info-1000: var(--ion-semantics-info-1000, #0f5261); -$ion-semantics-info-1000-rgb: var(--ion-semantics-info-1000-rgb, 15, 82, 97); -$ion-semantics-info-1100: var(--ion-semantics-info-1100, #0a3741); -$ion-semantics-info-1100-rgb: var(--ion-semantics-info-1100-rgb, 10, 55, 65); -$ion-semantics-info-1200: var(--ion-semantics-info-1200, #051c21); -$ion-semantics-info-1200-rgb: var(--ion-semantics-info-1200-rgb, 5, 28, 33); -$ion-semantics-info-base: var(--ion-semantics-info-base, #1ea2bf); -$ion-semantics-info-base-rgb: var(--ion-semantics-info-base-rgb, 30, 162, 191); +$ion-semantics-info-100: var(--ion-semantics-info-100, #f2f4fd); +$ion-semantics-info-100-rgb: var(--ion-semantics-info-100-rgb, 242, 244, 253); +$ion-semantics-info-200: var(--ion-semantics-info-200, #e9ecfc); +$ion-semantics-info-200-rgb: var(--ion-semantics-info-200-rgb, 233, 236, 252); +$ion-semantics-info-300: var(--ion-semantics-info-300, #d0d7fa); +$ion-semantics-info-300-rgb: var(--ion-semantics-info-300-rgb, 208, 215, 250); +$ion-semantics-info-400: var(--ion-semantics-info-400, #b5c0f7); +$ion-semantics-info-400-rgb: var(--ion-semantics-info-400-rgb, 181, 192, 247); +$ion-semantics-info-500: var(--ion-semantics-info-500, #94a5f4); +$ion-semantics-info-500-rgb: var(--ion-semantics-info-500-rgb, 148, 165, 244); +$ion-semantics-info-600: var(--ion-semantics-info-600, #6986f2); +$ion-semantics-info-600-rgb: var(--ion-semantics-info-600-rgb, 105, 134, 242); +$ion-semantics-info-700: var(--ion-semantics-info-700, #105cef); +$ion-semantics-info-700-rgb: var(--ion-semantics-info-700-rgb, 16, 92, 239); +$ion-semantics-info-800: var(--ion-semantics-info-800, #0f54da); +$ion-semantics-info-800-rgb: var(--ion-semantics-info-800-rgb, 15, 84, 218); +$ion-semantics-info-900: var(--ion-semantics-info-900, #0d4bc3); +$ion-semantics-info-900-rgb: var(--ion-semantics-info-900-rgb, 13, 75, 195); +$ion-semantics-info-1000: var(--ion-semantics-info-1000, #0b41a9); +$ion-semantics-info-1000-rgb: var(--ion-semantics-info-1000-rgb, 11, 65, 169); +$ion-semantics-info-1100: var(--ion-semantics-info-1100, #09358a); +$ion-semantics-info-1100-rgb: var(--ion-semantics-info-1100-rgb, 9, 53, 138); +$ion-semantics-info-1200: var(--ion-semantics-info-1200, #072561); +$ion-semantics-info-1200-rgb: var(--ion-semantics-info-1200-rgb, 7, 37, 97); +$ion-semantics-info-base: var(--ion-semantics-info-base, #105cef); +$ion-semantics-info-base-rgb: var(--ion-semantics-info-base-rgb, 16, 92, 239); $ion-semantics-success-100: var(--ion-semantics-success-100, #ebf9ec); $ion-semantics-success-100-rgb: var(--ion-semantics-success-100-rgb, 235, 249, 236); $ion-semantics-success-200: var(--ion-semantics-success-200, #dcf5de); @@ -157,14 +157,14 @@ $ion-bg-success-subtle-default: var(--ion-bg-success-subtle-default, #ebf9ec); $ion-bg-success-subtle-default-rgb: var(--ion-bg-success-subtle-default-rgb, 235, 249, 236); $ion-bg-success-subtle-press: var(--ion-bg-success-subtle-press, #b3ebb7); $ion-bg-success-subtle-press-rgb: var(--ion-bg-success-subtle-press-rgb, 179, 235, 183); -$ion-bg-info-base-default: var(--ion-bg-info-base-default, #146d81); -$ion-bg-info-base-default-rgb: var(--ion-bg-info-base-default-rgb, 20, 109, 129); -$ion-bg-info-base-press: var(--ion-bg-info-base-press, #0a3741); -$ion-bg-info-base-press-rgb: var(--ion-bg-info-base-press-rgb, 10, 55, 65); -$ion-bg-info-subtle-default: var(--ion-bg-info-subtle-default, #ebf9fe); -$ion-bg-info-subtle-default-rgb: var(--ion-bg-info-subtle-default-rgb, 235, 249, 254); -$ion-bg-info-subtle-press: var(--ion-bg-info-subtle-press, #b3e9fc); -$ion-bg-info-subtle-press-rgb: var(--ion-bg-info-subtle-press-rgb, 179, 233, 252); +$ion-bg-info-base-default: var(--ion-bg-info-base-default, #0d4bc3); +$ion-bg-info-base-default-rgb: var(--ion-bg-info-base-default-rgb, 13, 75, 195); +$ion-bg-info-base-press: var(--ion-bg-info-base-press, #09358a); +$ion-bg-info-base-press-rgb: var(--ion-bg-info-base-press-rgb, 9, 53, 138); +$ion-bg-info-subtle-default: var(--ion-bg-info-subtle-default, #f2f4fd); +$ion-bg-info-subtle-default-rgb: var(--ion-bg-info-subtle-default-rgb, 242, 244, 253); +$ion-bg-info-subtle-press: var(--ion-bg-info-subtle-press, #d0d7fa); +$ion-bg-info-subtle-press-rgb: var(--ion-bg-info-subtle-press-rgb, 208, 215, 250); $ion-bg-warning-base-default: var(--ion-bg-warning-base-default, #a45f00); $ion-bg-warning-base-default-rgb: var(--ion-bg-warning-base-default-rgb, 164, 95, 0); $ion-bg-warning-base-press: var(--ion-bg-warning-base-press, #633a00); @@ -173,26 +173,42 @@ $ion-bg-warning-subtle-default: var(--ion-bg-warning-subtle-default, #fff1ea); $ion-bg-warning-subtle-default-rgb: var(--ion-bg-warning-subtle-default-rgb, 255, 241, 234); $ion-bg-warning-subtle-press: var(--ion-bg-warning-subtle-press, #ffcfb1); $ion-bg-warning-subtle-press-rgb: var(--ion-bg-warning-subtle-press-rgb, 255, 207, 177); -$ion-bg-body: var(--ion-bg-body, #f5f5f5); -$ion-bg-body-rgb: var(--ion-bg-body-rgb, 245, 245, 245); +$ion-bg-body: var(--ion-bg-body, #ffffff); +$ion-bg-body-rgb: var(--ion-bg-body-rgb, 255, 255, 255); $ion-bg-neutral-subtle-default: var(--ion-bg-neutral-subtle-default, #e7e7e7); $ion-bg-neutral-subtle-default-rgb: var(--ion-bg-neutral-subtle-default-rgb, 231, 231, 231); $ion-bg-neutral-subtle-press: var(--ion-bg-neutral-subtle-press, #b9b9b9); $ion-bg-neutral-subtle-press-rgb: var(--ion-bg-neutral-subtle-press-rgb, 185, 185, 185); -$ion-bg-neutral-base-default: var(--ion-bg-neutral-base-default, #626262); -$ion-bg-neutral-base-default-rgb: var(--ion-bg-neutral-base-default-rgb, 98, 98, 98); -$ion-bg-neutral-base-press: var(--ion-bg-neutral-base-press, #3b3b3b); -$ion-bg-neutral-base-press-rgb: var(--ion-bg-neutral-base-press-rgb, 59, 59, 59); +$ion-bg-neutral-base-default: var(--ion-bg-neutral-base-default, #a2a2a2); +$ion-bg-neutral-base-default-rgb: var(--ion-bg-neutral-base-default-rgb, 162, 162, 162); +$ion-bg-neutral-base-press: var(--ion-bg-neutral-base-press, #777777); +$ion-bg-neutral-base-press-rgb: var(--ion-bg-neutral-base-press-rgb, 119, 119, 119); $ion-bg-neutral-subtlest-default: var(--ion-bg-neutral-subtlest-default, #ffffff); $ion-bg-neutral-subtlest-default-rgb: var(--ion-bg-neutral-subtlest-default-rgb, 255, 255, 255); $ion-bg-neutral-subtlest-press: var(--ion-bg-neutral-subtlest-press, #e7e7e7); $ion-bg-neutral-subtlest-press-rgb: var(--ion-bg-neutral-subtlest-press-rgb, 231, 231, 231); +$ion-bg-neutral-bold-default: var(--ion-bg-neutral-bold-default, #626262); +$ion-bg-neutral-bold-default-rgb: var(--ion-bg-neutral-bold-default-rgb, 98, 98, 98); +$ion-bg-neutral-bold-press: var(--ion-bg-neutral-bold-press, #3b3b3b); +$ion-bg-neutral-bold-press-rgb: var(--ion-bg-neutral-bold-press-rgb, 59, 59, 59); +$ion-bg-neutral-boldest-default: var(--ion-bg-neutral-boldest-default, #242424); +$ion-bg-neutral-boldest-default-rgb: var(--ion-bg-neutral-boldest-default-rgb, 36, 36, 36); $ion-bg-surface-default: var(--ion-bg-surface-default, #ffffff); $ion-bg-surface-default-rgb: var(--ion-bg-surface-default-rgb, 255, 255, 255); +$ion-bg-surface-inverse: var(--ion-bg-surface-inverse, #ffffff); +$ion-bg-surface-inverse-rgb: var(--ion-bg-surface-inverse-rgb, 255, 255, 255); $ion-bg-input-default: var(--ion-bg-input-default, #ffffff); $ion-bg-input-default-rgb: var(--ion-bg-input-default-rgb, 255, 255, 255); $ion-bg-input-read-only: var(--ion-bg-input-read-only, #f5f5f5); $ion-bg-input-read-only-rgb: var(--ion-bg-input-read-only-rgb, 245, 245, 245); +$ion-bg-input-press: var(--ion-bg-input-press, #e7e7e7); +$ion-bg-input-press-rgb: var(--ion-bg-input-press-rgb, 231, 231, 231); +$ion-bg-input-disabled: var(--ion-bg-input-disabled, #f5f5f5); +$ion-bg-input-disabled-rgb: var(--ion-bg-input-disabled-rgb, 245, 245, 245); +$ion-bg-select-default: var(--ion-bg-select-default, #f2f4fd); +$ion-bg-select-default-rgb: var(--ion-bg-select-default-rgb, 242, 244, 253); +$ion-bg-select-press: var(--ion-bg-select-press, #d0d7fa); +$ion-bg-select-press-rgb: var(--ion-bg-select-press-rgb, 208, 215, 250); $ion-text-default: var(--ion-text-default, #242424); $ion-text-default-rgb: var(--ion-text-default-rgb, 36, 36, 36); $ion-text-subtle: var(--ion-text-subtle, #3b3b3b); @@ -205,8 +221,8 @@ $ion-text-disabled: var(--ion-text-disabled, #a2a2a2); $ion-text-disabled-rgb: var(--ion-text-disabled-rgb, 162, 162, 162); $ion-text-danger: var(--ion-text-danger, #bf2222); $ion-text-danger-rgb: var(--ion-text-danger-rgb, 191, 34, 34); -$ion-text-info: var(--ion-text-info, #146d81); -$ion-text-info-rgb: var(--ion-text-info-rgb, 20, 109, 129); +$ion-text-info: var(--ion-text-info, #0d4bc3); +$ion-text-info-rgb: var(--ion-text-info-rgb, 13, 75, 195); $ion-text-warning: var(--ion-text-warning, #a45f00); $ion-text-warning-rgb: var(--ion-text-warning-rgb, 164, 95, 0); $ion-text-success: var(--ion-text-success, #126f23); @@ -232,18 +248,22 @@ $ion-border-primary: var(--ion-border-primary, #105cef); $ion-border-primary-rgb: var(--ion-border-primary-rgb, 16, 92, 239); $ion-border-success: var(--ion-border-success, #126f23); $ion-border-success-rgb: var(--ion-border-success-rgb, 18, 111, 35); -$ion-border-warning: var(--ion-border-warning, #a45f00); -$ion-border-warning-rgb: var(--ion-border-warning-rgb, 164, 95, 0); -$ion-border-danger: var(--ion-border-danger, #bf2222); -$ion-border-danger-rgb: var(--ion-border-danger-rgb, 191, 34, 34); -$ion-border-subtle: var(--ion-border-subtle, #cfcfcf); -$ion-border-subtle-rgb: var(--ion-border-subtle-rgb, 207, 207, 207); +$ion-border-warning: var(--ion-border-warning, #844d00); +$ion-border-warning-rgb: var(--ion-border-warning-rgb, 132, 77, 0); +$ion-border-danger-default: var(--ion-border-danger-default, #bf2222); +$ion-border-danger-default-rgb: var(--ion-border-danger-default-rgb, 191, 34, 34); +$ion-border-danger-press: var(--ion-border-danger-press, #761515); +$ion-border-danger-press-rgb: var(--ion-border-danger-press-rgb, 118, 21, 21); +$ion-border-subtle: var(--ion-border-subtle, #f5f5f5); +$ion-border-subtle-rgb: var(--ion-border-subtle-rgb, 245, 245, 245); $ion-border-input-default: var(--ion-border-input-default, #a2a2a2); $ion-border-input-default-rgb: var(--ion-border-input-default-rgb, 162, 162, 162); $ion-border-input-press: var(--ion-border-input-press, #777777); $ion-border-input-press-rgb: var(--ion-border-input-press-rgb, 119, 119, 119); $ion-border-input-read-only: var(--ion-border-input-read-only, #a2a2a2); $ion-border-input-read-only-rgb: var(--ion-border-input-read-only-rgb, 162, 162, 162); +$ion-border-subtlest: var(--ion-border-subtlest, #ffffff); +$ion-border-subtlest-rgb: var(--ion-border-subtlest-rgb, 255, 255, 255); $ion-border-style-none: var(--ion-border-style-none, none); $ion-border-style-solid: var(--ion-border-style-solid, solid); $ion-border-style-dashed: var(--ion-border-style-dashed, dashed); @@ -262,17 +282,10 @@ $ion-border-radius-800: var(--ion-border-radius-800, 32px); $ion-border-radius-1000: var(--ion-border-radius-1000, 40px); $ion-border-radius-full: var(--ion-border-radius-full, 999px); $ion-border-radius-025: var(--ion-border-radius-025, 2px); -$ion-shadow-1: var(--ion-shadow-1, rgba(0, 0, 0, 0.04)); -$ion-shadow-2: var(--ion-shadow-2, rgba(0, 0, 0, 0.05)); -$ion-shadow-3: var(--ion-shadow-3, rgba(0, 0, 0, 0.07)); -$ion-shadow-4: var(--ion-shadow-4, rgba(0, 0, 0, 0.08)); -$ion-shadow-5: var(--ion-shadow-5, rgba(0, 0, 0, 0.12)); -$ion-shadow-6: var(--ion-shadow-6, rgba(0, 0, 0, 0.16)); -$ion-shadow-7: var(--ion-shadow-7, rgba(0, 0, 0, 0.18)); $ion-icon-subtlest: var(--ion-icon-subtlest, #626262); $ion-icon-subtlest-rgb: var(--ion-icon-subtlest-rgb, 98, 98, 98); -$ion-icon-info: var(--ion-icon-info, #146d81); -$ion-icon-info-rgb: var(--ion-icon-info-rgb, 20, 109, 129); +$ion-icon-info: var(--ion-icon-info, #0d4bc3); +$ion-icon-info-rgb: var(--ion-icon-info-rgb, 13, 75, 195); $ion-icon-success: var(--ion-icon-success, #126f23); $ion-icon-success-rgb: var(--ion-icon-success-rgb, 18, 111, 35); $ion-icon-danger: var(--ion-icon-danger, #bf2222); @@ -291,6 +304,143 @@ $ion-icon-subtle: var(--ion-icon-subtle, #3b3b3b); $ion-icon-subtle-rgb: var(--ion-icon-subtle-rgb, 59, 59, 59); $ion-icon-select: var(--ion-icon-select, #105cef); $ion-icon-select-rgb: var(--ion-icon-select-rgb, 16, 92, 239); +$ion-icon-link-default: var(--ion-icon-link-default, #105cef); +$ion-icon-link-default-rgb: var(--ion-icon-link-default-rgb, 16, 92, 239); +$ion-icon-link-press: var(--ion-icon-link-press, #0f54da); +$ion-icon-link-press-rgb: var(--ion-icon-link-press-rgb, 15, 84, 218); +$ion-icon-link-visited: var(--ion-icon-link-visited, #0d4bc3); +$ion-icon-link-visited-rgb: var(--ion-icon-link-visited-rgb, 13, 75, 195); +$ion-state-disabled: var(--ion-state-disabled, rgba(255, 255, 255, 0.6)); +$ion-state-press: var(--ion-state-press, rgba(36, 36, 36, 0.08)); +$ion-elevation-1: var(--ion-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07)); +$ion-elevation-2: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08)); +$ion-elevation-3: var(--ion-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16)); +$ion-elevation-4: var(--ion-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18)); +$ion-backdrop: var(--ion-backdrop, [object Object]); +$ion-scale-0: var(--ion-scale-0, 0px); +$ion-scale-100: var(--ion-scale-100, 4px); +$ion-scale-150: var(--ion-scale-150, 6px); +$ion-scale-200: var(--ion-scale-200, 8px); +$ion-scale-250: var(--ion-scale-250, 10px); +$ion-scale-300: var(--ion-scale-300, 12px); +$ion-scale-400: var(--ion-scale-400, 16px); +$ion-scale-500: var(--ion-scale-500, 20px); +$ion-scale-600: var(--ion-scale-600, 24px); +$ion-scale-700: var(--ion-scale-700, 28px); +$ion-scale-800: var(--ion-scale-800, 32px); +$ion-scale-900: var(--ion-scale-900, 36px); +$ion-scale-1000: var(--ion-scale-1000, 40px); +$ion-scale-1100: var(--ion-scale-1100, 44px); +$ion-scale-1200: var(--ion-scale-1200, 48px); +$ion-scale-1400: var(--ion-scale-1400, 56px); +$ion-scale-1600: var(--ion-scale-1600, 64px); +$ion-scale-1800: var(--ion-scale-1800, 72px); +$ion-scale-2000: var(--ion-scale-2000, 80px); +$ion-scale-2400: var(--ion-scale-2400, 96px); +$ion-scale-2800: var(--ion-scale-2800, 112px); +$ion-scale-3200: var(--ion-scale-3200, 128px); +$ion-scale-3400: var(--ion-scale-3400, 136px); +$ion-scale-3600: var(--ion-scale-3600, 144px); +$ion-scale-4000: var(--ion-scale-4000, 160px); +$ion-scale-5000: var(--ion-scale-5000, 200px); +$ion-scale-6200: var(--ion-scale-6200, 248px); +$ion-scale-7400: var(--ion-scale-7400, 296px); +$ion-scale-9000: var(--ion-scale-9000, 360px); +$ion-scale-025: var(--ion-scale-025, 1px); +$ion-scale-050: var(--ion-scale-050, 2px); +$ion-scale-075: var(--ion-scale-075, 3px); +$ion-space-0: var(--ion-space-0, 0px); +$ion-space-100: var(--ion-space-100, 4px); +$ion-space-150: var(--ion-space-150, 6px); +$ion-space-200: var(--ion-space-200, 8px); +$ion-space-250: var(--ion-space-250, 10px); +$ion-space-300: var(--ion-space-300, 12px); +$ion-space-400: var(--ion-space-400, 16px); +$ion-space-500: var(--ion-space-500, 20px); +$ion-space-600: var(--ion-space-600, 24px); +$ion-space-700: var(--ion-space-700, 28px); +$ion-space-800: var(--ion-space-800, 32px); +$ion-space-900: var(--ion-space-900, 36px); +$ion-space-1000: var(--ion-space-1000, 40px); +$ion-space-1200: var(--ion-space-1200, 48px); +$ion-space-050: var(--ion-space-050, 2px); +$ion-z-index-0: var(--ion-z-index-0, 0px); +$ion-z-index-100: var(--ion-z-index-100, 100px); +$ion-z-index-200: var(--ion-z-index-200, 200px); +$ion-z-index-300: var(--ion-z-index-300, 300px); +$ion-z-index-400: var(--ion-z-index-400, 400px); +$ion-z-index-500: var(--ion-z-index-500, 500px); +$ion-z-index-bottom: var(--ion-z-index-bottom, -99999px); +$ion-z-index-top: var(--ion-z-index-top, 99999px); +$ion-transition-curve-linear: var(--ion-transition-curve-linear, linear); +$ion-transition-curve-quick: var(--ion-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1)); +$ion-transition-curve-base: var(--ion-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)); +$ion-transition-curve-expressive: var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)); +$ion-transition-curve-bounce: var(--ion-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)); +$ion-transition-time-0: var(--ion-transition-time-0, 0); +$ion-transition-time-100: var(--ion-transition-time-100, 100); +$ion-transition-time-150: var(--ion-transition-time-150, 150); +$ion-transition-time-200: var(--ion-transition-time-200, 200); +$ion-transition-time-300: var(--ion-transition-time-300, 300); +$ion-transition-time-500: var(--ion-transition-time-500, 500); +$ion-transition-time-1000: var(--ion-transition-time-1000, 1000); +$ion-transition-time-1500: var(--ion-transition-time-1500, 1500); +$ion-font-family: var(--ion-font-family, "Inter", sans-serif); +$ion-font-weight-thin: var(--ion-font-weight-thin, 100); +$ion-font-weight-extra-light: var(--ion-font-weight-extra-light, 200); +$ion-font-weight-light: var(--ion-font-weight-light, 300); +$ion-font-weight-regular: var(--ion-font-weight-regular, 400); +$ion-font-weight-medium: var(--ion-font-weight-medium, 500); +$ion-font-weight-semi-bold: var(--ion-font-weight-semi-bold, 600); +$ion-font-weight-bold: var(--ion-font-weight-bold, 700); +$ion-font-weight-extra-bold: var(--ion-font-weight-extra-bold, 800); +$ion-font-weight-black: var(--ion-font-weight-black, 900); +$ion-font-size-275: var(--ion-font-size-275, font.px-to-rem(11)); +$ion-font-size-300: var(--ion-font-size-300, font.px-to-rem(12)); +$ion-font-size-350: var(--ion-font-size-350, font.px-to-rem(14)); +$ion-font-size-400: var(--ion-font-size-400, font.px-to-rem(16)); +$ion-font-size-450: var(--ion-font-size-450, font.px-to-rem(18)); +$ion-font-size-500: var(--ion-font-size-500, font.px-to-rem(20)); +$ion-font-size-550: var(--ion-font-size-550, font.px-to-rem(22)); +$ion-font-size-600: var(--ion-font-size-600, font.px-to-rem(24)); +$ion-font-size-650: var(--ion-font-size-650, font.px-to-rem(26)); +$ion-font-size-700: var(--ion-font-size-700, font.px-to-rem(28)); +$ion-font-size-800: var(--ion-font-size-800, font.px-to-rem(32)); +$ion-font-size-900: var(--ion-font-size-900, font.px-to-rem(36)); +$ion-font-letter-spacing-0: var(--ion-font-letter-spacing-0, 0%); +$ion-font-letter-spacing-1: var(--ion-font-letter-spacing-1, 1%); +$ion-font-letter-spacing-2: var(--ion-font-letter-spacing-2, 1.5%); +$ion-font-line-height-300: var(--ion-font-line-height-300, 12px); +$ion-font-line-height-400: var(--ion-font-line-height-400, 16px); +$ion-font-line-height-500: var(--ion-font-line-height-500, 20px); +$ion-font-line-height-600: var(--ion-font-line-height-600, 24px); +$ion-font-line-height-700: var(--ion-font-line-height-700, 28px); +$ion-font-line-height-800: var(--ion-font-line-height-800, 32px); +$ion-font-line-height-900: var(--ion-font-line-height-900, 36px); +$ion-font-line-height-1100: var(--ion-font-line-height-1100, 44px); +$ion-font-line-height-1200: var(--ion-font-line-height-1200, 48px); +$ion-font-line-height-full: var(--ion-font-line-height-full, 100%); +$ion-rectangular-2xs: var(--ion-rectangular-2xs, 0px); +$ion-rectangular-xs: var(--ion-rectangular-xs, 0px); +$ion-rectangular-sm: var(--ion-rectangular-sm, 0px); +$ion-rectangular-md: var(--ion-rectangular-md, 0px); +$ion-rectangular-lg: var(--ion-rectangular-lg, 0px); +$ion-rectangular-xl: var(--ion-rectangular-xl, 0px); +$ion-rectangular-2xl: var(--ion-rectangular-2xl, 0px); +$ion-round-2xs: var(--ion-round-2xs, 999px); +$ion-round-xs: var(--ion-round-xs, 999px); +$ion-round-sm: var(--ion-round-sm, 999px); +$ion-round-md: var(--ion-round-md, 999px); +$ion-round-lg: var(--ion-round-lg, 12px); +$ion-round-xl: var(--ion-round-xl, 16px); +$ion-round-2xl: var(--ion-round-2xl, 40px); +$ion-soft-2xs: var(--ion-soft-2xs, 4px); +$ion-soft-xs: var(--ion-soft-xs, 8px); +$ion-soft-sm: var(--ion-soft-sm, 12px); +$ion-soft-md: var(--ion-soft-md, 16px); +$ion-soft-lg: var(--ion-soft-lg, 8px); +$ion-soft-xl: var(--ion-soft-xl, 8px); +$ion-soft-2xl: var(--ion-soft-2xl, 16px); $ion-primitives-neutral-100: var(--ion-primitives-neutral-100, #f5f5f5); $ion-primitives-neutral-100-rgb: var(--ion-primitives-neutral-100-rgb, 245, 245, 245); $ion-primitives-neutral-200: var(--ion-primitives-neutral-200, #e7e7e7); @@ -401,20 +551,20 @@ $ion-primitives-yellow-400: var(--ion-primitives-yellow-400, #ffe07b); $ion-primitives-yellow-400-rgb: var(--ion-primitives-yellow-400-rgb, 255, 224, 123); $ion-primitives-yellow-500: var(--ion-primitives-yellow-500, #ffd600); $ion-primitives-yellow-500-rgb: var(--ion-primitives-yellow-500-rgb, 255, 214, 0); -$ion-primitives-yellow-600: var(--ion-primitives-yellow-600, #e1bd00); -$ion-primitives-yellow-600-rgb: var(--ion-primitives-yellow-600-rgb, 225, 189, 0); -$ion-primitives-yellow-700: var(--ion-primitives-yellow-700, #c3a400); -$ion-primitives-yellow-700-rgb: var(--ion-primitives-yellow-700-rgb, 195, 164, 0); -$ion-primitives-yellow-800: var(--ion-primitives-yellow-800, #a48a00); -$ion-primitives-yellow-800-rgb: var(--ion-primitives-yellow-800-rgb, 164, 138, 0); -$ion-primitives-yellow-900: var(--ion-primitives-yellow-900, #846f00); -$ion-primitives-yellow-900-rgb: var(--ion-primitives-yellow-900-rgb, 132, 111, 0); -$ion-primitives-yellow-1000: var(--ion-primitives-yellow-1000, #635300); -$ion-primitives-yellow-1000-rgb: var(--ion-primitives-yellow-1000-rgb, 99, 83, 0); -$ion-primitives-yellow-1100: var(--ion-primitives-yellow-1100, #423800); -$ion-primitives-yellow-1100-rgb: var(--ion-primitives-yellow-1100-rgb, 66, 56, 0); -$ion-primitives-yellow-1200: var(--ion-primitives-yellow-1200, #221d00); -$ion-primitives-yellow-1200-rgb: var(--ion-primitives-yellow-1200-rgb, 34, 29, 0); +$ion-primitives-yellow-600: var(--ion-primitives-yellow-600, #f9bd0a); +$ion-primitives-yellow-600-rgb: var(--ion-primitives-yellow-600-rgb, 249, 189, 10); +$ion-primitives-yellow-700: var(--ion-primitives-yellow-700, #df9c00); +$ion-primitives-yellow-700-rgb: var(--ion-primitives-yellow-700-rgb, 223, 156, 0); +$ion-primitives-yellow-800: var(--ion-primitives-yellow-800, #ba8200); +$ion-primitives-yellow-800-rgb: var(--ion-primitives-yellow-800-rgb, 186, 130, 0); +$ion-primitives-yellow-900: var(--ion-primitives-yellow-900, #966503); +$ion-primitives-yellow-900-rgb: var(--ion-primitives-yellow-900-rgb, 150, 101, 3); +$ion-primitives-yellow-1000: var(--ion-primitives-yellow-1000, #704b02); +$ion-primitives-yellow-1000-rgb: var(--ion-primitives-yellow-1000-rgb, 112, 75, 2); +$ion-primitives-yellow-1100: var(--ion-primitives-yellow-1100, #533802); +$ion-primitives-yellow-1100-rgb: var(--ion-primitives-yellow-1100-rgb, 83, 56, 2); +$ion-primitives-yellow-1200: var(--ion-primitives-yellow-1200, #2c1e02); +$ion-primitives-yellow-1200-rgb: var(--ion-primitives-yellow-1200-rgb, 44, 30, 2); $ion-primitives-lime-100: var(--ion-primitives-lime-100, #f3faea); $ion-primitives-lime-100-rgb: var(--ion-primitives-lime-100-rgb, 243, 250, 234); $ion-primitives-lime-200: var(--ion-primitives-lime-200, #eaf7db); @@ -655,137 +805,13 @@ $ion-primitives-pink-1100: var(--ion-primitives-pink-1100, #8b2248); $ion-primitives-pink-1100-rgb: var(--ion-primitives-pink-1100-rgb, 139, 34, 72); $ion-primitives-pink-1200: var(--ion-primitives-pink-1200, #621833); $ion-primitives-pink-1200-rgb: var(--ion-primitives-pink-1200-rgb, 98, 24, 51); -$ion-state-disabled: var(--ion-state-disabled, rgba(255, 255, 255, 0.6)); -$ion-state-press: var(--ion-state-press, rgba(36, 36, 36, 0.08)); -$ion-elevation-1: var(--ion-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07)); -$ion-elevation-2: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08)); -$ion-elevation-3: var(--ion-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16)); -$ion-elevation-4: var(--ion-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18)); -$ion-backdrop: var(--ion-backdrop, [object Object]); -$ion-scale-0: var(--ion-scale-0, 0px); -$ion-scale-100: var(--ion-scale-100, 4px); -$ion-scale-150: var(--ion-scale-150, 6px); -$ion-scale-200: var(--ion-scale-200, 8px); -$ion-scale-250: var(--ion-scale-250, 10px); -$ion-scale-300: var(--ion-scale-300, 12px); -$ion-scale-400: var(--ion-scale-400, 16px); -$ion-scale-500: var(--ion-scale-500, 20px); -$ion-scale-600: var(--ion-scale-600, 24px); -$ion-scale-700: var(--ion-scale-700, 28px); -$ion-scale-800: var(--ion-scale-800, 32px); -$ion-scale-900: var(--ion-scale-900, 36px); -$ion-scale-1000: var(--ion-scale-1000, 40px); -$ion-scale-1100: var(--ion-scale-1100, 44px); -$ion-scale-1200: var(--ion-scale-1200, 48px); -$ion-scale-1400: var(--ion-scale-1400, 56px); -$ion-scale-1600: var(--ion-scale-1600, 64px); -$ion-scale-1800: var(--ion-scale-1800, 72px); -$ion-scale-2000: var(--ion-scale-2000, 80px); -$ion-scale-2400: var(--ion-scale-2400, 96px); -$ion-scale-2800: var(--ion-scale-2800, 112px); -$ion-scale-3200: var(--ion-scale-3200, 128px); -$ion-scale-3400: var(--ion-scale-3400, 136px); -$ion-scale-3600: var(--ion-scale-3600, 144px); -$ion-scale-4000: var(--ion-scale-4000, 160px); -$ion-scale-5000: var(--ion-scale-5000, 200px); -$ion-scale-6200: var(--ion-scale-6200, 248px); -$ion-scale-7400: var(--ion-scale-7400, 296px); -$ion-scale-9000: var(--ion-scale-9000, 360px); -$ion-scale-025: var(--ion-scale-025, 1px); -$ion-scale-050: var(--ion-scale-050, 2px); -$ion-scale-075: var(--ion-scale-075, 3px); -$ion-space-0: var(--ion-space-0, 0px); -$ion-space-100: var(--ion-space-100, 4px); -$ion-space-150: var(--ion-space-150, 6px); -$ion-space-200: var(--ion-space-200, 8px); -$ion-space-250: var(--ion-space-250, 10px); -$ion-space-300: var(--ion-space-300, 12px); -$ion-space-400: var(--ion-space-400, 16px); -$ion-space-500: var(--ion-space-500, 20px); -$ion-space-600: var(--ion-space-600, 24px); -$ion-space-700: var(--ion-space-700, 28px); -$ion-space-800: var(--ion-space-800, 32px); -$ion-space-900: var(--ion-space-900, 36px); -$ion-space-1000: var(--ion-space-1000, 40px); -$ion-space-1200: var(--ion-space-1200, 48px); -$ion-space-050: var(--ion-space-050, 2px); -$ion-z-index-0: var(--ion-z-index-0, 0px); -$ion-z-index-100: var(--ion-z-index-100, 100px); -$ion-z-index-200: var(--ion-z-index-200, 200px); -$ion-z-index-300: var(--ion-z-index-300, 300px); -$ion-z-index-400: var(--ion-z-index-400, 400px); -$ion-z-index-500: var(--ion-z-index-500, 500px); -$ion-z-index-bottom: var(--ion-z-index-bottom, -99999px); -$ion-z-index-top: var(--ion-z-index-top, 99999px); -$ion-transition-curve-linear: var(--ion-transition-curve-linear, linear); -$ion-transition-curve-quick: var(--ion-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1)); -$ion-transition-curve-base: var(--ion-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)); -$ion-transition-curve-expressive: var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)); -$ion-transition-curve-bounce: var(--ion-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38)); -$ion-transition-time-0: var(--ion-transition-time-0, 0); -$ion-transition-time-100: var(--ion-transition-time-100, 100); -$ion-transition-time-150: var(--ion-transition-time-150, 150); -$ion-transition-time-200: var(--ion-transition-time-200, 200); -$ion-transition-time-300: var(--ion-transition-time-300, 300); -$ion-transition-time-500: var(--ion-transition-time-500, 500); -$ion-transition-time-1000: var(--ion-transition-time-1000, 1000); -$ion-transition-time-1500: var(--ion-transition-time-1500, 1500); -$ion-font-family: var(--ion-font-family, "Inter", sans-serif); -$ion-font-weight-thin: var(--ion-font-weight-thin, 100); -$ion-font-weight-extra-light: var(--ion-font-weight-extra-light, 200); -$ion-font-weight-light: var(--ion-font-weight-light, 300); -$ion-font-weight-regular: var(--ion-font-weight-regular, 400); -$ion-font-weight-medium: var(--ion-font-weight-medium, 500); -$ion-font-weight-semi-bold: var(--ion-font-weight-semi-bold, 600); -$ion-font-weight-bold: var(--ion-font-weight-bold, 700); -$ion-font-weight-extra-bold: var(--ion-font-weight-extra-bold, 800); -$ion-font-weight-black: var(--ion-font-weight-black, 900); -$ion-font-size-275: var(--ion-font-size-275, font.px-to-rem(11)); -$ion-font-size-300: var(--ion-font-size-300, font.px-to-rem(12)); -$ion-font-size-350: var(--ion-font-size-350, font.px-to-rem(14)); -$ion-font-size-400: var(--ion-font-size-400, font.px-to-rem(16)); -$ion-font-size-450: var(--ion-font-size-450, font.px-to-rem(18)); -$ion-font-size-500: var(--ion-font-size-500, font.px-to-rem(20)); -$ion-font-size-550: var(--ion-font-size-550, font.px-to-rem(22)); -$ion-font-size-600: var(--ion-font-size-600, font.px-to-rem(24)); -$ion-font-size-650: var(--ion-font-size-650, font.px-to-rem(26)); -$ion-font-size-700: var(--ion-font-size-700, font.px-to-rem(28)); -$ion-font-size-800: var(--ion-font-size-800, font.px-to-rem(32)); -$ion-font-size-900: var(--ion-font-size-900, font.px-to-rem(36)); -$ion-font-letter-spacing-0: var(--ion-font-letter-spacing-0, 0%); -$ion-font-letter-spacing-1: var(--ion-font-letter-spacing-1, 1%); -$ion-font-letter-spacing-2: var(--ion-font-letter-spacing-2, 1.5%); -$ion-font-line-height-300: var(--ion-font-line-height-300, 12px); -$ion-font-line-height-400: var(--ion-font-line-height-400, 16px); -$ion-font-line-height-500: var(--ion-font-line-height-500, 20px); -$ion-font-line-height-600: var(--ion-font-line-height-600, 24px); -$ion-font-line-height-700: var(--ion-font-line-height-700, 28px); -$ion-font-line-height-800: var(--ion-font-line-height-800, 32px); -$ion-font-line-height-900: var(--ion-font-line-height-900, 36px); -$ion-font-line-height-1100: var(--ion-font-line-height-1100, 44px); -$ion-font-line-height-1200: var(--ion-font-line-height-1200, 48px); -$ion-font-line-height-full: var(--ion-font-line-height-full, 100%); -$ion-rectangular-2xs: var(--ion-rectangular-2xs, 0px); -$ion-rectangular-xs: var(--ion-rectangular-xs, 0px); -$ion-rectangular-sm: var(--ion-rectangular-sm, 0px); -$ion-rectangular-md: var(--ion-rectangular-md, 0px); -$ion-rectangular-lg: var(--ion-rectangular-lg, 0px); -$ion-rectangular-xl: var(--ion-rectangular-xl, 0px); -$ion-rectangular-2xl: var(--ion-rectangular-2xl, 0px); -$ion-round-2xs: var(--ion-round-2xs, 999px); -$ion-round-xs: var(--ion-round-xs, 999px); -$ion-round-sm: var(--ion-round-sm, 999px); -$ion-round-md: var(--ion-round-md, 999px); -$ion-round-lg: var(--ion-round-lg, 12px); -$ion-round-xl: var(--ion-round-xl, 16px); -$ion-round-2xl: var(--ion-round-2xl, 40px); -$ion-soft-2xs: var(--ion-soft-2xs, 4px); -$ion-soft-xs: var(--ion-soft-xs, 8px); -$ion-soft-sm: var(--ion-soft-sm, 12px); -$ion-soft-md: var(--ion-soft-md, 16px); -$ion-soft-lg: var(--ion-soft-lg, 8px); -$ion-soft-xl: var(--ion-soft-xl, 8px); -$ion-soft-2xl: var(--ion-soft-2xl, 16px); +$ion-shadow-1: var(--ion-shadow-1, rgba(0, 0, 0, 0.04)); +$ion-shadow-2: var(--ion-shadow-2, rgba(0, 0, 0, 0.05)); +$ion-shadow-3: var(--ion-shadow-3, rgba(0, 0, 0, 0.07)); +$ion-shadow-4: var(--ion-shadow-4, rgba(0, 0, 0, 0.08)); +$ion-shadow-5: var(--ion-shadow-5, rgba(0, 0, 0, 0.12)); +$ion-shadow-6: var(--ion-shadow-6, rgba(0, 0, 0, 0.16)); +$ion-shadow-7: var(--ion-shadow-7, rgba(0, 0, 0, 0.18)); $ion-display-sm-regular: ( font-size: $ion-font-size-800, @@ -1067,7 +1093,7 @@ $ion-heading-h6-bold: ( text-decoration: none, ); -$ion-body-action-xl: ( +$ion-body-action-lg: ( font-size: $ion-font-size-500, font-style: normal, font-weight: $ion-font-weight-medium, @@ -1077,7 +1103,7 @@ $ion-body-action-xl: ( text-decoration: none, ); -$ion-body-action-lg: ( +$ion-body-action-md: ( font-size: $ion-font-size-400, font-style: normal, font-weight: $ion-font-weight-medium, @@ -1087,7 +1113,7 @@ $ion-body-action-lg: ( text-decoration: none, ); -$ion-body-action-md: ( +$ion-body-action-sm: ( font-size: $ion-font-size-350, font-style: normal, font-weight: $ion-font-weight-medium, @@ -1097,7 +1123,7 @@ $ion-body-action-md: ( text-decoration: none, ); -$ion-body-action-sm: ( +$ion-body-action-xs: ( font-size: $ion-font-size-300, font-style: normal, font-weight: $ion-font-weight-medium,