diff --git a/core/scripts/tokens/utils.js b/core/scripts/tokens/utils.js index 1db088b2af8..c9d1c868863 100644 --- a/core/scripts/tokens/utils.js +++ b/core/scripts/tokens/utils.js @@ -142,8 +142,12 @@ function generateTypographyOutput(prop, propName, isVariable) { // Generates a color based css utility-class from a color Design Token structure function generateColorUtilityClasses(prop, className) { - return `.${variablesPrefix}-${className} {\n color: $${variablesPrefix}-${prop.name};\n} - .${variablesPrefix}-background-${className} {\n background-color: $${variablesPrefix}-${prop.name};\n}`; + const isBg = className.includes('bg'); + const cssProp = isBg ? 'background-color' : 'color'; + return `.${variablesPrefix}-${className} { + --${cssProp}: $${variablesPrefix}-${prop.name}; + ${cssProp}: $${variablesPrefix}-${prop.name}; +}`; } // Generates margin and padding utility classes to match the token-agnostic @@ -264,7 +268,10 @@ function generateSpaceUtilityClasses(prop, className) { // Generates a valid box-shadow value from a shadow Design Token structure function generateRadiusUtilityClasses(propName) { - return `.${variablesPrefix}-${propName} {\n border-radius: $${variablesPrefix}-${propName};\n}`; + return `.${variablesPrefix}-${propName} { + --border-radius: $${variablesPrefix}-${propName}; + border-radius: $${variablesPrefix}-${propName}; +}`; } // Generates a border based css utility-class from a font Design Token structure @@ -282,7 +289,10 @@ function generateBorderUtilityClasses(prop, propName) { default: attribute = 'border-color'; } - return `.${variablesPrefix}-${propName} {\n ${attribute}: $${variablesPrefix}-${propName};\n}`; + return `.${variablesPrefix}-${propName} { + --${attribute}: $${variablesPrefix}-${propName}; + ${attribute}: $${variablesPrefix}-${propName}; +}`; } // Generates a font based css utility-class from a font Design Token structure @@ -292,7 +302,10 @@ function generateFontUtilityClasses(prop, propName) { // Generates a valid box-shadow value from a shadow Design Token structure function generateShadowUtilityClasses(propName) { - return `.${variablesPrefix}-${propName} {\n box-shadow: $${variablesPrefix}-${propName};\n}`; + return `.${variablesPrefix}-${propName} { + --box-shadow: $${variablesPrefix}-${propName}; + box-shadow: $${variablesPrefix}-${propName}; +}`; } // Generates a utility class for a given token category and name diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts index a79d5dd438e..0a2cc851910 100644 --- a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts +++ b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts @@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens @@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens @@ -88,7 +88,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens @@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png index 44ca603d9aa..cd35cb2e3a5 100644 Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png index 072bd8296ee..c01a7c85aad 100644 Binary files a/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/expand/accordion-group.e2e.ts-snapshots/accordion-group-expand-inset-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts index 0fb0be24acb..e3a3f774717 100644 --- a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts +++ b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts @@ -10,7 +10,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index b4890d74476..4114cb68183 100644 Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8adebe8c207..68a11cbb195 100644 Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index 922ebc4e150..b893a79908d 100644 Binary files a/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion-group/test/shape/accordion-group.e2e.ts-snapshots/accordion-group-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 06cd87862c8..958d87c974a 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 12345b8acda..d2deb20a8bd 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 9ecf1a17c50..dd4d4e05c0f 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3de006ccfe4..db003242b41 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 188f837a3de..16ab85c3b22 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index c01611ed5a7..8c6e06f1511 100644 Binary files a/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/accordion/test/shape/accordion.e2e.ts-snapshots/accordion-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png index ba57d08494b..2c276a1085a 100644 Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts b/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts index ebb20c1d7c7..f4490902119 100644 --- a/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts +++ b/core/src/components/progress-bar/test/shape/progress-bar.e2e.ts @@ -8,7 +8,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh ` diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 353ec444ce0..9c3094ab0f3 100644 Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 862caf5a8e7..afe819f57ac 100644 Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9744d091a0b..c99fdab7ec2 100644 Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index d28da3717f3..a572c5b02f0 100644 Binary files a/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/searchbar/test/shape/searchbar.e2e.ts-snapshots/searchbar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts index c6db55b7a3e..2a710770a8c 100644 --- a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts @@ -11,7 +11,7 @@ configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, conf ` diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 2baaf0fabbc..e9b2c511b28 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 6f02f797917..a7d4623a951 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png index d20e5679a57..2a68dc45f08 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png index e8ae37408be..35e402a5004 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png index 9adac02c53c..41f50acc499 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png index 0f22394ff00..6d26868b500 100644 Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts index 823e902dfe8..70e2bbc135d 100644 --- a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts +++ b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts @@ -13,7 +13,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh ` @@ -49,7 +49,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh ` @@ -85,7 +85,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh ` diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png index c16fb99d945..ac24b27ff9d 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index d752f805669..25f088ae04f 100644 Binary files a/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/shape/tab-bar.e2e.ts-snapshots/tab-bar-shape-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss index c80cd0280bd..b5b62c4affe 100644 --- a/core/src/css/ionic/core.ionic.scss +++ b/core/src/css/ionic/core.ionic.scss @@ -23,7 +23,7 @@ html { } body { - background: var(--ion-background-color); + background: var(--ion-background-color, #{globals.$ion-bg-body}); color: var(--ion-text-color); } diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index 1fabbff5849..fe576ae5d7c 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -485,1305 +485,947 @@ Do not edit directly, this file was auto-generated. } .ion-semantics-primary-100 { + --color: $ion-semantics-primary-100; color: $ion-semantics-primary-100; } -.ion-background-semantics-primary-100 { - background-color: $ion-semantics-primary-100; -} .ion-semantics-primary-200 { + --color: $ion-semantics-primary-200; color: $ion-semantics-primary-200; } -.ion-background-semantics-primary-200 { - background-color: $ion-semantics-primary-200; -} .ion-semantics-primary-300 { + --color: $ion-semantics-primary-300; color: $ion-semantics-primary-300; } -.ion-background-semantics-primary-300 { - background-color: $ion-semantics-primary-300; -} .ion-semantics-primary-400 { + --color: $ion-semantics-primary-400; color: $ion-semantics-primary-400; } -.ion-background-semantics-primary-400 { - background-color: $ion-semantics-primary-400; -} .ion-semantics-primary-500 { + --color: $ion-semantics-primary-500; color: $ion-semantics-primary-500; } -.ion-background-semantics-primary-500 { - background-color: $ion-semantics-primary-500; -} .ion-semantics-primary-600 { + --color: $ion-semantics-primary-600; color: $ion-semantics-primary-600; } -.ion-background-semantics-primary-600 { - background-color: $ion-semantics-primary-600; -} .ion-semantics-primary-700 { + --color: $ion-semantics-primary-700; color: $ion-semantics-primary-700; } -.ion-background-semantics-primary-700 { - background-color: $ion-semantics-primary-700; -} .ion-semantics-primary-800 { + --color: $ion-semantics-primary-800; color: $ion-semantics-primary-800; } -.ion-background-semantics-primary-800 { - background-color: $ion-semantics-primary-800; -} .ion-semantics-primary-900 { + --color: $ion-semantics-primary-900; color: $ion-semantics-primary-900; } -.ion-background-semantics-primary-900 { - background-color: $ion-semantics-primary-900; -} .ion-semantics-primary-1000 { + --color: $ion-semantics-primary-1000; color: $ion-semantics-primary-1000; } -.ion-background-semantics-primary-1000 { - background-color: $ion-semantics-primary-1000; -} .ion-semantics-primary-1100 { + --color: $ion-semantics-primary-1100; color: $ion-semantics-primary-1100; } -.ion-background-semantics-primary-1100 { - background-color: $ion-semantics-primary-1100; -} .ion-semantics-primary-1200 { + --color: $ion-semantics-primary-1200; color: $ion-semantics-primary-1200; } -.ion-background-semantics-primary-1200 { - background-color: $ion-semantics-primary-1200; -} .ion-semantics-primary-base { + --color: $ion-semantics-primary-base; color: $ion-semantics-primary-base; } -.ion-background-semantics-primary-base { - background-color: $ion-semantics-primary-base; -} .ion-semantics-info-100 { + --color: $ion-semantics-info-100; color: $ion-semantics-info-100; } -.ion-background-semantics-info-100 { - background-color: $ion-semantics-info-100; -} .ion-semantics-info-200 { + --color: $ion-semantics-info-200; color: $ion-semantics-info-200; } -.ion-background-semantics-info-200 { - background-color: $ion-semantics-info-200; -} .ion-semantics-info-300 { + --color: $ion-semantics-info-300; color: $ion-semantics-info-300; } -.ion-background-semantics-info-300 { - background-color: $ion-semantics-info-300; -} .ion-semantics-info-400 { + --color: $ion-semantics-info-400; color: $ion-semantics-info-400; } -.ion-background-semantics-info-400 { - background-color: $ion-semantics-info-400; -} .ion-semantics-info-500 { + --color: $ion-semantics-info-500; color: $ion-semantics-info-500; } -.ion-background-semantics-info-500 { - background-color: $ion-semantics-info-500; -} .ion-semantics-info-600 { + --color: $ion-semantics-info-600; color: $ion-semantics-info-600; } -.ion-background-semantics-info-600 { - background-color: $ion-semantics-info-600; -} .ion-semantics-info-700 { + --color: $ion-semantics-info-700; color: $ion-semantics-info-700; } -.ion-background-semantics-info-700 { - background-color: $ion-semantics-info-700; -} .ion-semantics-info-800 { + --color: $ion-semantics-info-800; color: $ion-semantics-info-800; } -.ion-background-semantics-info-800 { - background-color: $ion-semantics-info-800; -} .ion-semantics-info-900 { + --color: $ion-semantics-info-900; color: $ion-semantics-info-900; } -.ion-background-semantics-info-900 { - background-color: $ion-semantics-info-900; -} .ion-semantics-info-1000 { + --color: $ion-semantics-info-1000; color: $ion-semantics-info-1000; } -.ion-background-semantics-info-1000 { - background-color: $ion-semantics-info-1000; -} .ion-semantics-info-1100 { + --color: $ion-semantics-info-1100; color: $ion-semantics-info-1100; } -.ion-background-semantics-info-1100 { - background-color: $ion-semantics-info-1100; -} .ion-semantics-info-1200 { + --color: $ion-semantics-info-1200; color: $ion-semantics-info-1200; } -.ion-background-semantics-info-1200 { - background-color: $ion-semantics-info-1200; -} .ion-semantics-info-base { + --color: $ion-semantics-info-base; color: $ion-semantics-info-base; } -.ion-background-semantics-info-base { - background-color: $ion-semantics-info-base; -} .ion-semantics-success-100 { + --color: $ion-semantics-success-100; color: $ion-semantics-success-100; } -.ion-background-semantics-success-100 { - background-color: $ion-semantics-success-100; -} .ion-semantics-success-200 { + --color: $ion-semantics-success-200; color: $ion-semantics-success-200; } -.ion-background-semantics-success-200 { - background-color: $ion-semantics-success-200; -} .ion-semantics-success-300 { + --color: $ion-semantics-success-300; color: $ion-semantics-success-300; } -.ion-background-semantics-success-300 { - background-color: $ion-semantics-success-300; -} .ion-semantics-success-400 { + --color: $ion-semantics-success-400; color: $ion-semantics-success-400; } -.ion-background-semantics-success-400 { - background-color: $ion-semantics-success-400; -} .ion-semantics-success-500 { + --color: $ion-semantics-success-500; color: $ion-semantics-success-500; } -.ion-background-semantics-success-500 { - background-color: $ion-semantics-success-500; -} .ion-semantics-success-600 { + --color: $ion-semantics-success-600; color: $ion-semantics-success-600; } -.ion-background-semantics-success-600 { - background-color: $ion-semantics-success-600; -} .ion-semantics-success-700 { + --color: $ion-semantics-success-700; color: $ion-semantics-success-700; } -.ion-background-semantics-success-700 { - background-color: $ion-semantics-success-700; -} .ion-semantics-success-800 { + --color: $ion-semantics-success-800; color: $ion-semantics-success-800; } -.ion-background-semantics-success-800 { - background-color: $ion-semantics-success-800; -} .ion-semantics-success-900 { + --color: $ion-semantics-success-900; color: $ion-semantics-success-900; } -.ion-background-semantics-success-900 { - background-color: $ion-semantics-success-900; -} .ion-semantics-success-1000 { + --color: $ion-semantics-success-1000; color: $ion-semantics-success-1000; } -.ion-background-semantics-success-1000 { - background-color: $ion-semantics-success-1000; -} .ion-semantics-success-1100 { + --color: $ion-semantics-success-1100; color: $ion-semantics-success-1100; } -.ion-background-semantics-success-1100 { - background-color: $ion-semantics-success-1100; -} .ion-semantics-success-1200 { + --color: $ion-semantics-success-1200; color: $ion-semantics-success-1200; } -.ion-background-semantics-success-1200 { - background-color: $ion-semantics-success-1200; -} .ion-semantics-success-base { + --color: $ion-semantics-success-base; color: $ion-semantics-success-base; } -.ion-background-semantics-success-base { - background-color: $ion-semantics-success-base; -} .ion-semantics-danger-100 { + --color: $ion-semantics-danger-100; color: $ion-semantics-danger-100; } -.ion-background-semantics-danger-100 { - background-color: $ion-semantics-danger-100; -} .ion-semantics-danger-200 { + --color: $ion-semantics-danger-200; color: $ion-semantics-danger-200; } -.ion-background-semantics-danger-200 { - background-color: $ion-semantics-danger-200; -} .ion-semantics-danger-300 { + --color: $ion-semantics-danger-300; color: $ion-semantics-danger-300; } -.ion-background-semantics-danger-300 { - background-color: $ion-semantics-danger-300; -} .ion-semantics-danger-400 { + --color: $ion-semantics-danger-400; color: $ion-semantics-danger-400; } -.ion-background-semantics-danger-400 { - background-color: $ion-semantics-danger-400; -} .ion-semantics-danger-500 { + --color: $ion-semantics-danger-500; color: $ion-semantics-danger-500; } -.ion-background-semantics-danger-500 { - background-color: $ion-semantics-danger-500; -} .ion-semantics-danger-600 { + --color: $ion-semantics-danger-600; color: $ion-semantics-danger-600; } -.ion-background-semantics-danger-600 { - background-color: $ion-semantics-danger-600; -} .ion-semantics-danger-700 { + --color: $ion-semantics-danger-700; color: $ion-semantics-danger-700; } -.ion-background-semantics-danger-700 { - background-color: $ion-semantics-danger-700; -} .ion-semantics-danger-800 { + --color: $ion-semantics-danger-800; color: $ion-semantics-danger-800; } -.ion-background-semantics-danger-800 { - background-color: $ion-semantics-danger-800; -} .ion-semantics-danger-900 { + --color: $ion-semantics-danger-900; color: $ion-semantics-danger-900; } -.ion-background-semantics-danger-900 { - background-color: $ion-semantics-danger-900; -} .ion-semantics-danger-1000 { + --color: $ion-semantics-danger-1000; color: $ion-semantics-danger-1000; } -.ion-background-semantics-danger-1000 { - background-color: $ion-semantics-danger-1000; -} .ion-semantics-danger-1100 { + --color: $ion-semantics-danger-1100; color: $ion-semantics-danger-1100; } -.ion-background-semantics-danger-1100 { - background-color: $ion-semantics-danger-1100; -} .ion-semantics-danger-1200 { + --color: $ion-semantics-danger-1200; color: $ion-semantics-danger-1200; } -.ion-background-semantics-danger-1200 { - background-color: $ion-semantics-danger-1200; -} .ion-semantics-danger-base { + --color: $ion-semantics-danger-base; color: $ion-semantics-danger-base; } -.ion-background-semantics-danger-base { - background-color: $ion-semantics-danger-base; -} .ion-semantics-warning-100 { + --color: $ion-semantics-warning-100; color: $ion-semantics-warning-100; } -.ion-background-semantics-warning-100 { - background-color: $ion-semantics-warning-100; -} .ion-semantics-warning-200 { + --color: $ion-semantics-warning-200; color: $ion-semantics-warning-200; } -.ion-background-semantics-warning-200 { - background-color: $ion-semantics-warning-200; -} .ion-semantics-warning-300 { + --color: $ion-semantics-warning-300; color: $ion-semantics-warning-300; } -.ion-background-semantics-warning-300 { - background-color: $ion-semantics-warning-300; -} .ion-semantics-warning-400 { + --color: $ion-semantics-warning-400; color: $ion-semantics-warning-400; } -.ion-background-semantics-warning-400 { - background-color: $ion-semantics-warning-400; -} .ion-semantics-warning-500 { + --color: $ion-semantics-warning-500; color: $ion-semantics-warning-500; } -.ion-background-semantics-warning-500 { - background-color: $ion-semantics-warning-500; -} .ion-semantics-warning-600 { + --color: $ion-semantics-warning-600; color: $ion-semantics-warning-600; } -.ion-background-semantics-warning-600 { - background-color: $ion-semantics-warning-600; -} .ion-semantics-warning-700 { + --color: $ion-semantics-warning-700; color: $ion-semantics-warning-700; } -.ion-background-semantics-warning-700 { - background-color: $ion-semantics-warning-700; -} .ion-semantics-warning-800 { + --color: $ion-semantics-warning-800; color: $ion-semantics-warning-800; } -.ion-background-semantics-warning-800 { - background-color: $ion-semantics-warning-800; -} .ion-semantics-warning-900 { + --color: $ion-semantics-warning-900; color: $ion-semantics-warning-900; } -.ion-background-semantics-warning-900 { - background-color: $ion-semantics-warning-900; -} .ion-semantics-warning-1000 { + --color: $ion-semantics-warning-1000; color: $ion-semantics-warning-1000; } -.ion-background-semantics-warning-1000 { - background-color: $ion-semantics-warning-1000; -} .ion-semantics-warning-1100 { + --color: $ion-semantics-warning-1100; color: $ion-semantics-warning-1100; } -.ion-background-semantics-warning-1100 { - background-color: $ion-semantics-warning-1100; -} .ion-semantics-warning-1200 { + --color: $ion-semantics-warning-1200; color: $ion-semantics-warning-1200; } -.ion-background-semantics-warning-1200 { - background-color: $ion-semantics-warning-1200; -} .ion-semantics-warning-base { + --color: $ion-semantics-warning-base; color: $ion-semantics-warning-base; } -.ion-background-semantics-warning-base { - background-color: $ion-semantics-warning-base; -} .ion-bg-primary-base-default { - color: $ion-bg-primary-base-default; -} -.ion-background-bg-primary-base-default { + --background-color: $ion-bg-primary-base-default; background-color: $ion-bg-primary-base-default; } .ion-bg-primary-base-press { - color: $ion-bg-primary-base-press; -} -.ion-background-bg-primary-base-press { + --background-color: $ion-bg-primary-base-press; background-color: $ion-bg-primary-base-press; } .ion-bg-primary-subtle-default { - color: $ion-bg-primary-subtle-default; -} -.ion-background-bg-primary-subtle-default { + --background-color: $ion-bg-primary-subtle-default; background-color: $ion-bg-primary-subtle-default; } .ion-bg-primary-subtle-press { - color: $ion-bg-primary-subtle-press; -} -.ion-background-bg-primary-subtle-press { + --background-color: $ion-bg-primary-subtle-press; background-color: $ion-bg-primary-subtle-press; } .ion-bg-danger-base-default { - color: $ion-bg-danger-base-default; -} -.ion-background-bg-danger-base-default { + --background-color: $ion-bg-danger-base-default; background-color: $ion-bg-danger-base-default; } .ion-bg-danger-base-press { - color: $ion-bg-danger-base-press; -} -.ion-background-bg-danger-base-press { + --background-color: $ion-bg-danger-base-press; background-color: $ion-bg-danger-base-press; } .ion-bg-danger-subtle-default { - color: $ion-bg-danger-subtle-default; -} -.ion-background-bg-danger-subtle-default { + --background-color: $ion-bg-danger-subtle-default; background-color: $ion-bg-danger-subtle-default; } .ion-bg-danger-subtle-press { - color: $ion-bg-danger-subtle-press; -} -.ion-background-bg-danger-subtle-press { + --background-color: $ion-bg-danger-subtle-press; background-color: $ion-bg-danger-subtle-press; } .ion-bg-success-base-default { - color: $ion-bg-success-base-default; -} -.ion-background-bg-success-base-default { + --background-color: $ion-bg-success-base-default; background-color: $ion-bg-success-base-default; } .ion-bg-success-base-press { - color: $ion-bg-success-base-press; -} -.ion-background-bg-success-base-press { + --background-color: $ion-bg-success-base-press; background-color: $ion-bg-success-base-press; } .ion-bg-success-subtle-default { - color: $ion-bg-success-subtle-default; -} -.ion-background-bg-success-subtle-default { + --background-color: $ion-bg-success-subtle-default; background-color: $ion-bg-success-subtle-default; } .ion-bg-success-subtle-press { - color: $ion-bg-success-subtle-press; -} -.ion-background-bg-success-subtle-press { + --background-color: $ion-bg-success-subtle-press; background-color: $ion-bg-success-subtle-press; } .ion-bg-info-base-default { - color: $ion-bg-info-base-default; -} -.ion-background-bg-info-base-default { + --background-color: $ion-bg-info-base-default; background-color: $ion-bg-info-base-default; } .ion-bg-info-base-press { - color: $ion-bg-info-base-press; -} -.ion-background-bg-info-base-press { + --background-color: $ion-bg-info-base-press; background-color: $ion-bg-info-base-press; } .ion-bg-info-subtle-default { - color: $ion-bg-info-subtle-default; -} -.ion-background-bg-info-subtle-default { + --background-color: $ion-bg-info-subtle-default; background-color: $ion-bg-info-subtle-default; } .ion-bg-info-subtle-press { - color: $ion-bg-info-subtle-press; -} -.ion-background-bg-info-subtle-press { + --background-color: $ion-bg-info-subtle-press; background-color: $ion-bg-info-subtle-press; } .ion-bg-warning-base-default { - color: $ion-bg-warning-base-default; -} -.ion-background-bg-warning-base-default { + --background-color: $ion-bg-warning-base-default; background-color: $ion-bg-warning-base-default; } .ion-bg-warning-base-press { - color: $ion-bg-warning-base-press; -} -.ion-background-bg-warning-base-press { + --background-color: $ion-bg-warning-base-press; background-color: $ion-bg-warning-base-press; } .ion-bg-warning-subtle-default { - color: $ion-bg-warning-subtle-default; -} -.ion-background-bg-warning-subtle-default { + --background-color: $ion-bg-warning-subtle-default; background-color: $ion-bg-warning-subtle-default; } .ion-bg-warning-subtle-press { - color: $ion-bg-warning-subtle-press; -} -.ion-background-bg-warning-subtle-press { + --background-color: $ion-bg-warning-subtle-press; background-color: $ion-bg-warning-subtle-press; } .ion-bg-body { - color: $ion-bg-body; -} -.ion-background-bg-body { + --background-color: $ion-bg-body; background-color: $ion-bg-body; } .ion-bg-neutral-subtle-default { - color: $ion-bg-neutral-subtle-default; -} -.ion-background-bg-neutral-subtle-default { + --background-color: $ion-bg-neutral-subtle-default; background-color: $ion-bg-neutral-subtle-default; } .ion-bg-neutral-subtle-press { - color: $ion-bg-neutral-subtle-press; -} -.ion-background-bg-neutral-subtle-press { + --background-color: $ion-bg-neutral-subtle-press; background-color: $ion-bg-neutral-subtle-press; } .ion-bg-neutral-base-default { - color: $ion-bg-neutral-base-default; -} -.ion-background-bg-neutral-base-default { + --background-color: $ion-bg-neutral-base-default; background-color: $ion-bg-neutral-base-default; } .ion-bg-neutral-base-press { - color: $ion-bg-neutral-base-press; -} -.ion-background-bg-neutral-base-press { + --background-color: $ion-bg-neutral-base-press; background-color: $ion-bg-neutral-base-press; } .ion-bg-neutral-subtlest-default { - color: $ion-bg-neutral-subtlest-default; -} -.ion-background-bg-neutral-subtlest-default { + --background-color: $ion-bg-neutral-subtlest-default; background-color: $ion-bg-neutral-subtlest-default; } .ion-bg-neutral-subtlest-press { - color: $ion-bg-neutral-subtlest-press; -} -.ion-background-bg-neutral-subtlest-press { + --background-color: $ion-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; 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; 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; background-color: $ion-bg-neutral-boldest-default; } .ion-bg-neutral-boldest-press { - color: $ion-bg-neutral-boldest-press; -} -.ion-background-bg-neutral-boldest-press { + --background-color: $ion-bg-neutral-boldest-press; background-color: $ion-bg-neutral-boldest-press; } .ion-bg-surface-default { - color: $ion-bg-surface-default; -} -.ion-background-bg-surface-default { + --background-color: $ion-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; background-color: $ion-bg-surface-inverse; } .ion-bg-input-default { - color: $ion-bg-input-default; -} -.ion-background-bg-input-default { + --background-color: $ion-bg-input-default; background-color: $ion-bg-input-default; } .ion-bg-input-read-only { - color: $ion-bg-input-read-only; -} -.ion-background-bg-input-read-only { + --background-color: $ion-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; 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; background-color: $ion-bg-input-disabled; } .ion-bg-input-bold-default { - color: $ion-bg-input-bold-default; -} -.ion-background-bg-input-bold-default { + --background-color: $ion-bg-input-bold-default; background-color: $ion-bg-input-bold-default; } .ion-bg-input-bold-press { - color: $ion-bg-input-bold-press; -} -.ion-background-bg-input-bold-press { + --background-color: $ion-bg-input-bold-press; background-color: $ion-bg-input-bold-press; } .ion-bg-input-bold-read-only { - color: $ion-bg-input-bold-read-only; -} -.ion-background-bg-input-bold-read-only { + --background-color: $ion-bg-input-bold-read-only; background-color: $ion-bg-input-bold-read-only; } .ion-bg-input-bold-disabled { - color: $ion-bg-input-bold-disabled; -} -.ion-background-bg-input-bold-disabled { + --background-color: $ion-bg-input-bold-disabled; background-color: $ion-bg-input-bold-disabled; } .ion-bg-select-default { - color: $ion-bg-select-default; -} -.ion-background-bg-select-default { + --background-color: $ion-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; background-color: $ion-bg-select-press; } .ion-bg-extended-pumpkin-base-default { - color: $ion-bg-extended-pumpkin-base-default; -} -.ion-background-bg-extended-pumpkin-base-default { + --background-color: $ion-bg-extended-pumpkin-base-default; background-color: $ion-bg-extended-pumpkin-base-default; } .ion-bg-extended-pumpkin-base-press { - color: $ion-bg-extended-pumpkin-base-press; -} -.ion-background-bg-extended-pumpkin-base-press { + --background-color: $ion-bg-extended-pumpkin-base-press; background-color: $ion-bg-extended-pumpkin-base-press; } .ion-bg-extended-pumpkin-subtle-default { - color: $ion-bg-extended-pumpkin-subtle-default; -} -.ion-background-bg-extended-pumpkin-subtle-default { + --background-color: $ion-bg-extended-pumpkin-subtle-default; background-color: $ion-bg-extended-pumpkin-subtle-default; } .ion-bg-extended-pumpkin-subtle-press { - color: $ion-bg-extended-pumpkin-subtle-press; -} -.ion-background-bg-extended-pumpkin-subtle-press { + --background-color: $ion-bg-extended-pumpkin-subtle-press; background-color: $ion-bg-extended-pumpkin-subtle-press; } .ion-bg-extended-orange-base-default { - color: $ion-bg-extended-orange-base-default; -} -.ion-background-bg-extended-orange-base-default { + --background-color: $ion-bg-extended-orange-base-default; background-color: $ion-bg-extended-orange-base-default; } .ion-bg-extended-orange-base-press { - color: $ion-bg-extended-orange-base-press; -} -.ion-background-bg-extended-orange-base-press { + --background-color: $ion-bg-extended-orange-base-press; background-color: $ion-bg-extended-orange-base-press; } .ion-bg-extended-orange-subtle-default { - color: $ion-bg-extended-orange-subtle-default; -} -.ion-background-bg-extended-orange-subtle-default { + --background-color: $ion-bg-extended-orange-subtle-default; background-color: $ion-bg-extended-orange-subtle-default; } .ion-bg-extended-orange-subtle-press { - color: $ion-bg-extended-orange-subtle-press; -} -.ion-background-bg-extended-orange-subtle-press { + --background-color: $ion-bg-extended-orange-subtle-press; background-color: $ion-bg-extended-orange-subtle-press; } .ion-bg-extended-lime-base-default { - color: $ion-bg-extended-lime-base-default; -} -.ion-background-bg-extended-lime-base-default { + --background-color: $ion-bg-extended-lime-base-default; background-color: $ion-bg-extended-lime-base-default; } .ion-bg-extended-lime-base-press { - color: $ion-bg-extended-lime-base-press; -} -.ion-background-bg-extended-lime-base-press { + --background-color: $ion-bg-extended-lime-base-press; background-color: $ion-bg-extended-lime-base-press; } .ion-bg-extended-lime-subtle-default { - color: $ion-bg-extended-lime-subtle-default; -} -.ion-background-bg-extended-lime-subtle-default { + --background-color: $ion-bg-extended-lime-subtle-default; background-color: $ion-bg-extended-lime-subtle-default; } .ion-bg-extended-lime-subtle-press { - color: $ion-bg-extended-lime-subtle-press; -} -.ion-background-bg-extended-lime-subtle-press { + --background-color: $ion-bg-extended-lime-subtle-press; background-color: $ion-bg-extended-lime-subtle-press; } .ion-bg-extended-teal-base-default { - color: $ion-bg-extended-teal-base-default; -} -.ion-background-bg-extended-teal-base-default { + --background-color: $ion-bg-extended-teal-base-default; background-color: $ion-bg-extended-teal-base-default; } .ion-bg-extended-teal-base-press { - color: $ion-bg-extended-teal-base-press; -} -.ion-background-bg-extended-teal-base-press { + --background-color: $ion-bg-extended-teal-base-press; background-color: $ion-bg-extended-teal-base-press; } .ion-bg-extended-teal-subtle-default { - color: $ion-bg-extended-teal-subtle-default; -} -.ion-background-bg-extended-teal-subtle-default { + --background-color: $ion-bg-extended-teal-subtle-default; background-color: $ion-bg-extended-teal-subtle-default; } .ion-bg-extended-teal-subtle-press { - color: $ion-bg-extended-teal-subtle-press; -} -.ion-background-bg-extended-teal-subtle-press { + --background-color: $ion-bg-extended-teal-subtle-press; background-color: $ion-bg-extended-teal-subtle-press; } .ion-bg-extended-aqua-base-default { - color: $ion-bg-extended-aqua-base-default; -} -.ion-background-bg-extended-aqua-base-default { + --background-color: $ion-bg-extended-aqua-base-default; background-color: $ion-bg-extended-aqua-base-default; } .ion-bg-extended-aqua-base-press { - color: $ion-bg-extended-aqua-base-press; -} -.ion-background-bg-extended-aqua-base-press { + --background-color: $ion-bg-extended-aqua-base-press; background-color: $ion-bg-extended-aqua-base-press; } .ion-bg-extended-aqua-subtle-default { - color: $ion-bg-extended-aqua-subtle-default; -} -.ion-background-bg-extended-aqua-subtle-default { + --background-color: $ion-bg-extended-aqua-subtle-default; background-color: $ion-bg-extended-aqua-subtle-default; } .ion-bg-extended-aqua-subtle-press { - color: $ion-bg-extended-aqua-subtle-press; -} -.ion-background-bg-extended-aqua-subtle-press { + --background-color: $ion-bg-extended-aqua-subtle-press; background-color: $ion-bg-extended-aqua-subtle-press; } .ion-bg-extended-indigo-base-default { - color: $ion-bg-extended-indigo-base-default; -} -.ion-background-bg-extended-indigo-base-default { + --background-color: $ion-bg-extended-indigo-base-default; background-color: $ion-bg-extended-indigo-base-default; } .ion-bg-extended-indigo-base-press { - color: $ion-bg-extended-indigo-base-press; -} -.ion-background-bg-extended-indigo-base-press { + --background-color: $ion-bg-extended-indigo-base-press; background-color: $ion-bg-extended-indigo-base-press; } .ion-bg-extended-indigo-subtle-default { - color: $ion-bg-extended-indigo-subtle-default; -} -.ion-background-bg-extended-indigo-subtle-default { + --background-color: $ion-bg-extended-indigo-subtle-default; background-color: $ion-bg-extended-indigo-subtle-default; } .ion-bg-extended-indigo-subtle-press { - color: $ion-bg-extended-indigo-subtle-press; -} -.ion-background-bg-extended-indigo-subtle-press { + --background-color: $ion-bg-extended-indigo-subtle-press; background-color: $ion-bg-extended-indigo-subtle-press; } .ion-bg-extended-violet-base-default { - color: $ion-bg-extended-violet-base-default; -} -.ion-background-bg-extended-violet-base-default { + --background-color: $ion-bg-extended-violet-base-default; background-color: $ion-bg-extended-violet-base-default; } .ion-bg-extended-violet-base-press { - color: $ion-bg-extended-violet-base-press; -} -.ion-background-bg-extended-violet-base-press { + --background-color: $ion-bg-extended-violet-base-press; background-color: $ion-bg-extended-violet-base-press; } .ion-bg-extended-violet-subtle-default { - color: $ion-bg-extended-violet-subtle-default; -} -.ion-background-bg-extended-violet-subtle-default { + --background-color: $ion-bg-extended-violet-subtle-default; background-color: $ion-bg-extended-violet-subtle-default; } .ion-bg-extended-violet-subtle-press { - color: $ion-bg-extended-violet-subtle-press; -} -.ion-background-bg-extended-violet-subtle-press { + --background-color: $ion-bg-extended-violet-subtle-press; background-color: $ion-bg-extended-violet-subtle-press; } .ion-bg-extended-purple-base-default { - color: $ion-bg-extended-purple-base-default; -} -.ion-background-bg-extended-purple-base-default { + --background-color: $ion-bg-extended-purple-base-default; background-color: $ion-bg-extended-purple-base-default; } .ion-bg-extended-purple-base-press { - color: $ion-bg-extended-purple-base-press; -} -.ion-background-bg-extended-purple-base-press { + --background-color: $ion-bg-extended-purple-base-press; background-color: $ion-bg-extended-purple-base-press; } .ion-bg-extended-purple-subtle-default { - color: $ion-bg-extended-purple-subtle-default; -} -.ion-background-bg-extended-purple-subtle-default { + --background-color: $ion-bg-extended-purple-subtle-default; background-color: $ion-bg-extended-purple-subtle-default; } .ion-bg-extended-purple-subtle-press { - color: $ion-bg-extended-purple-subtle-press; -} -.ion-background-bg-extended-purple-subtle-press { + --background-color: $ion-bg-extended-purple-subtle-press; background-color: $ion-bg-extended-purple-subtle-press; } .ion-bg-extended-magenta-base-default { - color: $ion-bg-extended-magenta-base-default; -} -.ion-background-bg-extended-magenta-base-default { + --background-color: $ion-bg-extended-magenta-base-default; background-color: $ion-bg-extended-magenta-base-default; } .ion-bg-extended-magenta-base-press { - color: $ion-bg-extended-magenta-base-press; -} -.ion-background-bg-extended-magenta-base-press { + --background-color: $ion-bg-extended-magenta-base-press; background-color: $ion-bg-extended-magenta-base-press; } .ion-bg-extended-magenta-subtle-default { - color: $ion-bg-extended-magenta-subtle-default; -} -.ion-background-bg-extended-magenta-subtle-default { + --background-color: $ion-bg-extended-magenta-subtle-default; background-color: $ion-bg-extended-magenta-subtle-default; } .ion-bg-extended-magenta-subtle-press { - color: $ion-bg-extended-magenta-subtle-press; -} -.ion-background-bg-extended-magenta-subtle-press { + --background-color: $ion-bg-extended-magenta-subtle-press; background-color: $ion-bg-extended-magenta-subtle-press; } .ion-bg-extended-pink-base-default { - color: $ion-bg-extended-pink-base-default; -} -.ion-background-bg-extended-pink-base-default { + --background-color: $ion-bg-extended-pink-base-default; background-color: $ion-bg-extended-pink-base-default; } .ion-bg-extended-pink-base-press { - color: $ion-bg-extended-pink-base-press; -} -.ion-background-bg-extended-pink-base-press { + --background-color: $ion-bg-extended-pink-base-press; background-color: $ion-bg-extended-pink-base-press; } .ion-bg-extended-pink-subtle-default { - color: $ion-bg-extended-pink-subtle-default; -} -.ion-background-bg-extended-pink-subtle-default { + --background-color: $ion-bg-extended-pink-subtle-default; background-color: $ion-bg-extended-pink-subtle-default; } .ion-bg-extended-pink-subtle-press { - color: $ion-bg-extended-pink-subtle-press; -} -.ion-background-bg-extended-pink-subtle-press { + --background-color: $ion-bg-extended-pink-subtle-press; background-color: $ion-bg-extended-pink-subtle-press; } .ion-text-default { + --color: $ion-text-default; color: $ion-text-default; } -.ion-background-text-default { - background-color: $ion-text-default; -} .ion-text-subtle { + --color: $ion-text-subtle; color: $ion-text-subtle; } -.ion-background-text-subtle { - background-color: $ion-text-subtle; -} .ion-text-subtlest { + --color: $ion-text-subtlest; color: $ion-text-subtlest; } -.ion-background-text-subtlest { - background-color: $ion-text-subtlest; -} .ion-text-primary { + --color: $ion-text-primary; color: $ion-text-primary; } -.ion-background-text-primary { - background-color: $ion-text-primary; -} .ion-text-disabled { + --color: $ion-text-disabled; color: $ion-text-disabled; } -.ion-background-text-disabled { - background-color: $ion-text-disabled; -} .ion-text-danger { + --color: $ion-text-danger; color: $ion-text-danger; } -.ion-background-text-danger { - background-color: $ion-text-danger; -} .ion-text-info { + --color: $ion-text-info; color: $ion-text-info; } -.ion-background-text-info { - background-color: $ion-text-info; -} .ion-text-warning { + --color: $ion-text-warning; color: $ion-text-warning; } -.ion-background-text-warning { - background-color: $ion-text-warning; -} .ion-text-success { + --color: $ion-text-success; color: $ion-text-success; } -.ion-background-text-success { - background-color: $ion-text-success; -} .ion-text-link-default { + --color: $ion-text-link-default; color: $ion-text-link-default; } -.ion-background-text-link-default { - background-color: $ion-text-link-default; -} .ion-text-link-press { + --color: $ion-text-link-press; color: $ion-text-link-press; } -.ion-background-text-link-press { - background-color: $ion-text-link-press; -} .ion-text-link-visited { + --color: $ion-text-link-visited; color: $ion-text-link-visited; } -.ion-background-text-link-visited { - background-color: $ion-text-link-visited; -} .ion-text-inverse { + --color: $ion-text-inverse; color: $ion-text-inverse; } -.ion-background-text-inverse { - background-color: $ion-text-inverse; -} .ion-text-select { + --color: $ion-text-select; color: $ion-text-select; } -.ion-background-text-select { - background-color: $ion-text-select; -} .ion-text-extended-pumpkin { + --color: $ion-text-extended-pumpkin; color: $ion-text-extended-pumpkin; } -.ion-background-text-extended-pumpkin { - background-color: $ion-text-extended-pumpkin; -} .ion-text-extended-orange { + --color: $ion-text-extended-orange; color: $ion-text-extended-orange; } -.ion-background-text-extended-orange { - background-color: $ion-text-extended-orange; -} .ion-text-extended-lime { + --color: $ion-text-extended-lime; color: $ion-text-extended-lime; } -.ion-background-text-extended-lime { - background-color: $ion-text-extended-lime; -} .ion-text-extended-teal { + --color: $ion-text-extended-teal; color: $ion-text-extended-teal; } -.ion-background-text-extended-teal { - background-color: $ion-text-extended-teal; -} .ion-text-extended-aqua { + --color: $ion-text-extended-aqua; color: $ion-text-extended-aqua; } -.ion-background-text-extended-aqua { - background-color: $ion-text-extended-aqua; -} .ion-text-extended-indigo { + --color: $ion-text-extended-indigo; color: $ion-text-extended-indigo; } -.ion-background-text-extended-indigo { - background-color: $ion-text-extended-indigo; -} .ion-text-extended-violet { + --color: $ion-text-extended-violet; color: $ion-text-extended-violet; } -.ion-background-text-extended-violet { - background-color: $ion-text-extended-violet; -} .ion-text-extended-purple { + --color: $ion-text-extended-purple; color: $ion-text-extended-purple; } -.ion-background-text-extended-purple { - background-color: $ion-text-extended-purple; -} .ion-text-extended-magenta { + --color: $ion-text-extended-magenta; color: $ion-text-extended-magenta; } -.ion-background-text-extended-magenta { - background-color: $ion-text-extended-magenta; -} .ion-text-extended-pink { + --color: $ion-text-extended-pink; color: $ion-text-extended-pink; } -.ion-background-text-extended-pink { - background-color: $ion-text-extended-pink; -} .ion-border-default { + --border-color: $ion-border-default; border-color: $ion-border-default; } .ion-border-boldest { + --border-color: $ion-border-boldest; border-color: $ion-border-boldest; } .ion-border-subtle { + --border-color: $ion-border-subtle; border-color: $ion-border-subtle; } .ion-border-subtlest { + --border-color: $ion-border-subtlest; border-color: $ion-border-subtlest; } .ion-border-primary { + --border-color: $ion-border-primary; border-color: $ion-border-primary; } .ion-border-success { + --border-color: $ion-border-success; border-color: $ion-border-success; } .ion-border-warning { + --border-color: $ion-border-warning; border-color: $ion-border-warning; } .ion-border-disabled { + --border-color: $ion-border-disabled; border-color: $ion-border-disabled; } .ion-border-focus-0 { + --border-color: $ion-border-focus-0; border-color: $ion-border-focus-0; } .ion-border-focus-default { + --border-color: $ion-border-focus-default; border-color: $ion-border-focus-default; } .ion-border-focus-error { + --border-color: $ion-border-focus-error; border-color: $ion-border-focus-error; } .ion-border-danger-default { + --border-color: $ion-border-danger-default; border-color: $ion-border-danger-default; } .ion-border-danger-press { + --border-color: $ion-border-danger-press; border-color: $ion-border-danger-press; } .ion-border-input-default { + --border-color: $ion-border-input-default; border-color: $ion-border-input-default; } .ion-border-input-press { + --border-color: $ion-border-input-press; border-color: $ion-border-input-press; } .ion-border-input-read-only { + --border-color: $ion-border-input-read-only; border-color: $ion-border-input-read-only; } .ion-border-style-none { + --border-style: $ion-border-style-none; border-style: $ion-border-style-none; } .ion-border-style-solid { + --border-style: $ion-border-style-solid; border-style: $ion-border-style-solid; } .ion-border-style-dashed { + --border-style: $ion-border-style-dashed; border-style: $ion-border-style-dashed; } .ion-border-style-dotted { + --border-style: $ion-border-style-dotted; border-style: $ion-border-style-dotted; } .ion-border-size-0 { + --border-width: $ion-border-size-0; border-width: $ion-border-size-0; } .ion-border-size-025 { + --border-width: $ion-border-size-025; border-width: $ion-border-size-025; } .ion-border-size-050 { + --border-width: $ion-border-size-050; border-width: $ion-border-size-050; } .ion-border-size-075 { + --border-width: $ion-border-size-075; border-width: $ion-border-size-075; } .ion-border-radius-0 { + --border-radius: $ion-border-radius-0; border-radius: $ion-border-radius-0; } .ion-border-radius-100 { + --border-radius: $ion-border-radius-100; border-radius: $ion-border-radius-100; } .ion-border-radius-200 { + --border-radius: $ion-border-radius-200; border-radius: $ion-border-radius-200; } .ion-border-radius-300 { + --border-radius: $ion-border-radius-300; border-radius: $ion-border-radius-300; } .ion-border-radius-400 { + --border-radius: $ion-border-radius-400; border-radius: $ion-border-radius-400; } .ion-border-radius-500 { + --border-radius: $ion-border-radius-500; border-radius: $ion-border-radius-500; } .ion-border-radius-800 { + --border-radius: $ion-border-radius-800; border-radius: $ion-border-radius-800; } .ion-border-radius-1000 { + --border-radius: $ion-border-radius-1000; border-radius: $ion-border-radius-1000; } .ion-border-radius-full { + --border-radius: $ion-border-radius-full; border-radius: $ion-border-radius-full; } .ion-border-radius-025 { + --border-radius: $ion-border-radius-025; border-radius: $ion-border-radius-025; } .ion-icon-default { + --color: $ion-icon-default; color: $ion-icon-default; } -.ion-background-icon-default { - background-color: $ion-icon-default; -} .ion-icon-subtle { + --color: $ion-icon-subtle; color: $ion-icon-subtle; } -.ion-background-icon-subtle { - background-color: $ion-icon-subtle; -} .ion-icon-subtlest { + --color: $ion-icon-subtlest; color: $ion-icon-subtlest; } -.ion-background-icon-subtlest { - background-color: $ion-icon-subtlest; -} .ion-icon-disabled { + --color: $ion-icon-disabled; color: $ion-icon-disabled; } -.ion-background-icon-disabled { - background-color: $ion-icon-disabled; -} .ion-icon-primary { + --color: $ion-icon-primary; color: $ion-icon-primary; } -.ion-background-icon-primary { - background-color: $ion-icon-primary; -} .ion-icon-select { + --color: $ion-icon-select; color: $ion-icon-select; } -.ion-background-icon-select { - background-color: $ion-icon-select; -} .ion-icon-info { + --color: $ion-icon-info; color: $ion-icon-info; } -.ion-background-icon-info { - background-color: $ion-icon-info; -} .ion-icon-success { + --color: $ion-icon-success; color: $ion-icon-success; } -.ion-background-icon-success { - background-color: $ion-icon-success; -} .ion-icon-danger { + --color: $ion-icon-danger; color: $ion-icon-danger; } -.ion-background-icon-danger { - background-color: $ion-icon-danger; -} .ion-icon-warning { + --color: $ion-icon-warning; color: $ion-icon-warning; } -.ion-background-icon-warning { - background-color: $ion-icon-warning; -} .ion-icon-inverse { + --color: $ion-icon-inverse; color: $ion-icon-inverse; } -.ion-background-icon-inverse { - background-color: $ion-icon-inverse; -} .ion-icon-link-default { + --color: $ion-icon-link-default; color: $ion-icon-link-default; } -.ion-background-icon-link-default { - background-color: $ion-icon-link-default; -} .ion-icon-link-press { + --color: $ion-icon-link-press; color: $ion-icon-link-press; } -.ion-background-icon-link-press { - background-color: $ion-icon-link-press; -} .ion-icon-link-visited { + --color: $ion-icon-link-visited; color: $ion-icon-link-visited; } -.ion-background-icon-link-visited { - background-color: $ion-icon-link-visited; -} .ion-icon-extended-pumpkin { + --color: $ion-icon-extended-pumpkin; color: $ion-icon-extended-pumpkin; } -.ion-background-icon-extended-pumpkin { - background-color: $ion-icon-extended-pumpkin; -} .ion-icon-extended-orange { + --color: $ion-icon-extended-orange; color: $ion-icon-extended-orange; } -.ion-background-icon-extended-orange { - background-color: $ion-icon-extended-orange; -} .ion-icon-extended-lime { + --color: $ion-icon-extended-lime; color: $ion-icon-extended-lime; } -.ion-background-icon-extended-lime { - background-color: $ion-icon-extended-lime; -} .ion-icon-extended-teal { + --color: $ion-icon-extended-teal; color: $ion-icon-extended-teal; } -.ion-background-icon-extended-teal { - background-color: $ion-icon-extended-teal; -} .ion-icon-extended-aqua { + --color: $ion-icon-extended-aqua; color: $ion-icon-extended-aqua; } -.ion-background-icon-extended-aqua { - background-color: $ion-icon-extended-aqua; -} .ion-icon-extended-indigo { + --color: $ion-icon-extended-indigo; color: $ion-icon-extended-indigo; } -.ion-background-icon-extended-indigo { - background-color: $ion-icon-extended-indigo; -} .ion-icon-extended-violet { + --color: $ion-icon-extended-violet; color: $ion-icon-extended-violet; } -.ion-background-icon-extended-violet { - background-color: $ion-icon-extended-violet; -} .ion-icon-extended-purple { + --color: $ion-icon-extended-purple; color: $ion-icon-extended-purple; } -.ion-background-icon-extended-purple { - background-color: $ion-icon-extended-purple; -} .ion-icon-extended-magenta { + --color: $ion-icon-extended-magenta; color: $ion-icon-extended-magenta; } -.ion-background-icon-extended-magenta { - background-color: $ion-icon-extended-magenta; -} .ion-icon-extended-pink { + --color: $ion-icon-extended-pink; color: $ion-icon-extended-pink; } -.ion-background-icon-extended-pink { - background-color: $ion-icon-extended-pink; -} .ion-state-disabled { + --color: $ion-state-disabled; color: $ion-state-disabled; } -.ion-background-state-disabled { - background-color: $ion-state-disabled; -} .ion-state-press { + --color: $ion-state-press; color: $ion-state-press; } -.ion-background-state-press { - background-color: $ion-state-press; -} .ion-elevation-1 { + --box-shadow: $ion-elevation-1; box-shadow: $ion-elevation-1; } .ion-elevation-2 { + --box-shadow: $ion-elevation-2; box-shadow: $ion-elevation-2; } .ion-elevation-3 { + --box-shadow: $ion-elevation-3; box-shadow: $ion-elevation-3; } .ion-elevation-4 { + --box-shadow: $ion-elevation-4; box-shadow: $ion-elevation-4; } @@ -3003,1179 +2645,843 @@ Do not edit directly, this file was auto-generated. z-index: $ion-z-index-top; } .ion-rectangular-2xs { + --border-radius: $ion-rectangular-2xs; border-radius: $ion-rectangular-2xs; } .ion-rectangular-xs { + --border-radius: $ion-rectangular-xs; border-radius: $ion-rectangular-xs; } .ion-rectangular-sm { + --border-radius: $ion-rectangular-sm; border-radius: $ion-rectangular-sm; } .ion-rectangular-md { + --border-radius: $ion-rectangular-md; border-radius: $ion-rectangular-md; } .ion-rectangular-lg { + --border-radius: $ion-rectangular-lg; border-radius: $ion-rectangular-lg; } .ion-rectangular-xl { + --border-radius: $ion-rectangular-xl; border-radius: $ion-rectangular-xl; } .ion-rectangular-2xl { + --border-radius: $ion-rectangular-2xl; border-radius: $ion-rectangular-2xl; } .ion-round-2xs { + --border-radius: $ion-round-2xs; border-radius: $ion-round-2xs; } .ion-round-xs { + --border-radius: $ion-round-xs; border-radius: $ion-round-xs; } .ion-round-sm { + --border-radius: $ion-round-sm; border-radius: $ion-round-sm; } .ion-round-md { + --border-radius: $ion-round-md; border-radius: $ion-round-md; } .ion-round-lg { + --border-radius: $ion-round-lg; border-radius: $ion-round-lg; } .ion-round-xl { + --border-radius: $ion-round-xl; border-radius: $ion-round-xl; } .ion-round-2xl { + --border-radius: $ion-round-2xl; border-radius: $ion-round-2xl; } .ion-soft-2xs { + --border-radius: $ion-soft-2xs; border-radius: $ion-soft-2xs; } .ion-soft-xs { + --border-radius: $ion-soft-xs; border-radius: $ion-soft-xs; } .ion-soft-sm { + --border-radius: $ion-soft-sm; border-radius: $ion-soft-sm; } .ion-soft-md { + --border-radius: $ion-soft-md; border-radius: $ion-soft-md; } .ion-soft-lg { + --border-radius: $ion-soft-lg; border-radius: $ion-soft-lg; } .ion-soft-xl { + --border-radius: $ion-soft-xl; border-radius: $ion-soft-xl; } .ion-soft-2xl { + --border-radius: $ion-soft-2xl; border-radius: $ion-soft-2xl; } .ion-primitives-neutral-100 { + --color: $ion-primitives-neutral-100; color: $ion-primitives-neutral-100; } -.ion-background-primitives-neutral-100 { - background-color: $ion-primitives-neutral-100; -} .ion-primitives-neutral-200 { + --color: $ion-primitives-neutral-200; color: $ion-primitives-neutral-200; } -.ion-background-primitives-neutral-200 { - background-color: $ion-primitives-neutral-200; -} .ion-primitives-neutral-300 { + --color: $ion-primitives-neutral-300; color: $ion-primitives-neutral-300; } -.ion-background-primitives-neutral-300 { - background-color: $ion-primitives-neutral-300; -} .ion-primitives-neutral-400 { + --color: $ion-primitives-neutral-400; color: $ion-primitives-neutral-400; } -.ion-background-primitives-neutral-400 { - background-color: $ion-primitives-neutral-400; -} .ion-primitives-neutral-500 { + --color: $ion-primitives-neutral-500; color: $ion-primitives-neutral-500; } -.ion-background-primitives-neutral-500 { - background-color: $ion-primitives-neutral-500; -} .ion-primitives-neutral-600 { + --color: $ion-primitives-neutral-600; color: $ion-primitives-neutral-600; } -.ion-background-primitives-neutral-600 { - background-color: $ion-primitives-neutral-600; -} .ion-primitives-neutral-700 { + --color: $ion-primitives-neutral-700; color: $ion-primitives-neutral-700; } -.ion-background-primitives-neutral-700 { - background-color: $ion-primitives-neutral-700; -} .ion-primitives-neutral-800 { + --color: $ion-primitives-neutral-800; color: $ion-primitives-neutral-800; } -.ion-background-primitives-neutral-800 { - background-color: $ion-primitives-neutral-800; -} .ion-primitives-neutral-900 { + --color: $ion-primitives-neutral-900; color: $ion-primitives-neutral-900; } -.ion-background-primitives-neutral-900 { - background-color: $ion-primitives-neutral-900; -} .ion-primitives-neutral-1000 { + --color: $ion-primitives-neutral-1000; color: $ion-primitives-neutral-1000; } -.ion-background-primitives-neutral-1000 { - background-color: $ion-primitives-neutral-1000; -} .ion-primitives-neutral-1100 { + --color: $ion-primitives-neutral-1100; color: $ion-primitives-neutral-1100; } -.ion-background-primitives-neutral-1100 { - background-color: $ion-primitives-neutral-1100; -} .ion-primitives-neutral-1200 { + --color: $ion-primitives-neutral-1200; color: $ion-primitives-neutral-1200; } -.ion-background-primitives-neutral-1200 { - background-color: $ion-primitives-neutral-1200; -} .ion-primitives-base-white { + --color: $ion-primitives-base-white; color: $ion-primitives-base-white; } -.ion-background-primitives-base-white { - background-color: $ion-primitives-base-white; -} .ion-primitives-base-black { + --color: $ion-primitives-base-black; color: $ion-primitives-base-black; } -.ion-background-primitives-base-black { - background-color: $ion-primitives-base-black; -} .ion-primitives-red-100 { + --color: $ion-primitives-red-100; color: $ion-primitives-red-100; } -.ion-background-primitives-red-100 { - background-color: $ion-primitives-red-100; -} .ion-primitives-red-200 { + --color: $ion-primitives-red-200; color: $ion-primitives-red-200; } -.ion-background-primitives-red-200 { - background-color: $ion-primitives-red-200; -} .ion-primitives-red-300 { + --color: $ion-primitives-red-300; color: $ion-primitives-red-300; } -.ion-background-primitives-red-300 { - background-color: $ion-primitives-red-300; -} .ion-primitives-red-400 { + --color: $ion-primitives-red-400; color: $ion-primitives-red-400; } -.ion-background-primitives-red-400 { - background-color: $ion-primitives-red-400; -} .ion-primitives-red-500 { + --color: $ion-primitives-red-500; color: $ion-primitives-red-500; } -.ion-background-primitives-red-500 { - background-color: $ion-primitives-red-500; -} .ion-primitives-red-600 { + --color: $ion-primitives-red-600; color: $ion-primitives-red-600; } -.ion-background-primitives-red-600 { - background-color: $ion-primitives-red-600; -} .ion-primitives-red-700 { + --color: $ion-primitives-red-700; color: $ion-primitives-red-700; } -.ion-background-primitives-red-700 { - background-color: $ion-primitives-red-700; -} .ion-primitives-red-800 { + --color: $ion-primitives-red-800; color: $ion-primitives-red-800; } -.ion-background-primitives-red-800 { - background-color: $ion-primitives-red-800; -} .ion-primitives-red-900 { + --color: $ion-primitives-red-900; color: $ion-primitives-red-900; } -.ion-background-primitives-red-900 { - background-color: $ion-primitives-red-900; -} .ion-primitives-red-1000 { + --color: $ion-primitives-red-1000; color: $ion-primitives-red-1000; } -.ion-background-primitives-red-1000 { - background-color: $ion-primitives-red-1000; -} .ion-primitives-red-1100 { + --color: $ion-primitives-red-1100; color: $ion-primitives-red-1100; } -.ion-background-primitives-red-1100 { - background-color: $ion-primitives-red-1100; -} .ion-primitives-red-1200 { + --color: $ion-primitives-red-1200; color: $ion-primitives-red-1200; } -.ion-background-primitives-red-1200 { - background-color: $ion-primitives-red-1200; -} .ion-primitives-pumpkin-100 { + --color: $ion-primitives-pumpkin-100; color: $ion-primitives-pumpkin-100; } -.ion-background-primitives-pumpkin-100 { - background-color: $ion-primitives-pumpkin-100; -} .ion-primitives-pumpkin-200 { + --color: $ion-primitives-pumpkin-200; color: $ion-primitives-pumpkin-200; } -.ion-background-primitives-pumpkin-200 { - background-color: $ion-primitives-pumpkin-200; -} .ion-primitives-pumpkin-300 { + --color: $ion-primitives-pumpkin-300; color: $ion-primitives-pumpkin-300; } -.ion-background-primitives-pumpkin-300 { - background-color: $ion-primitives-pumpkin-300; -} .ion-primitives-pumpkin-400 { + --color: $ion-primitives-pumpkin-400; color: $ion-primitives-pumpkin-400; } -.ion-background-primitives-pumpkin-400 { - background-color: $ion-primitives-pumpkin-400; -} .ion-primitives-pumpkin-500 { + --color: $ion-primitives-pumpkin-500; color: $ion-primitives-pumpkin-500; } -.ion-background-primitives-pumpkin-500 { - background-color: $ion-primitives-pumpkin-500; -} .ion-primitives-pumpkin-600 { + --color: $ion-primitives-pumpkin-600; color: $ion-primitives-pumpkin-600; } -.ion-background-primitives-pumpkin-600 { - background-color: $ion-primitives-pumpkin-600; -} .ion-primitives-pumpkin-700 { + --color: $ion-primitives-pumpkin-700; color: $ion-primitives-pumpkin-700; } -.ion-background-primitives-pumpkin-700 { - background-color: $ion-primitives-pumpkin-700; -} .ion-primitives-pumpkin-800 { + --color: $ion-primitives-pumpkin-800; color: $ion-primitives-pumpkin-800; } -.ion-background-primitives-pumpkin-800 { - background-color: $ion-primitives-pumpkin-800; -} .ion-primitives-pumpkin-900 { + --color: $ion-primitives-pumpkin-900; color: $ion-primitives-pumpkin-900; } -.ion-background-primitives-pumpkin-900 { - background-color: $ion-primitives-pumpkin-900; -} .ion-primitives-pumpkin-1000 { + --color: $ion-primitives-pumpkin-1000; color: $ion-primitives-pumpkin-1000; } -.ion-background-primitives-pumpkin-1000 { - background-color: $ion-primitives-pumpkin-1000; -} .ion-primitives-pumpkin-1100 { + --color: $ion-primitives-pumpkin-1100; color: $ion-primitives-pumpkin-1100; } -.ion-background-primitives-pumpkin-1100 { - background-color: $ion-primitives-pumpkin-1100; -} .ion-primitives-pumpkin-1200 { + --color: $ion-primitives-pumpkin-1200; color: $ion-primitives-pumpkin-1200; } -.ion-background-primitives-pumpkin-1200 { - background-color: $ion-primitives-pumpkin-1200; -} .ion-primitives-orange-100 { + --color: $ion-primitives-orange-100; color: $ion-primitives-orange-100; } -.ion-background-primitives-orange-100 { - background-color: $ion-primitives-orange-100; -} .ion-primitives-orange-200 { + --color: $ion-primitives-orange-200; color: $ion-primitives-orange-200; } -.ion-background-primitives-orange-200 { - background-color: $ion-primitives-orange-200; -} .ion-primitives-orange-300 { + --color: $ion-primitives-orange-300; color: $ion-primitives-orange-300; } -.ion-background-primitives-orange-300 { - background-color: $ion-primitives-orange-300; -} .ion-primitives-orange-400 { + --color: $ion-primitives-orange-400; color: $ion-primitives-orange-400; } -.ion-background-primitives-orange-400 { - background-color: $ion-primitives-orange-400; -} .ion-primitives-orange-500 { + --color: $ion-primitives-orange-500; color: $ion-primitives-orange-500; } -.ion-background-primitives-orange-500 { - background-color: $ion-primitives-orange-500; -} .ion-primitives-orange-600 { + --color: $ion-primitives-orange-600; color: $ion-primitives-orange-600; } -.ion-background-primitives-orange-600 { - background-color: $ion-primitives-orange-600; -} .ion-primitives-orange-700 { + --color: $ion-primitives-orange-700; color: $ion-primitives-orange-700; } -.ion-background-primitives-orange-700 { - background-color: $ion-primitives-orange-700; -} .ion-primitives-orange-800 { + --color: $ion-primitives-orange-800; color: $ion-primitives-orange-800; } -.ion-background-primitives-orange-800 { - background-color: $ion-primitives-orange-800; -} .ion-primitives-orange-900 { + --color: $ion-primitives-orange-900; color: $ion-primitives-orange-900; } -.ion-background-primitives-orange-900 { - background-color: $ion-primitives-orange-900; -} .ion-primitives-orange-1000 { + --color: $ion-primitives-orange-1000; color: $ion-primitives-orange-1000; } -.ion-background-primitives-orange-1000 { - background-color: $ion-primitives-orange-1000; -} .ion-primitives-orange-1100 { + --color: $ion-primitives-orange-1100; color: $ion-primitives-orange-1100; } -.ion-background-primitives-orange-1100 { - background-color: $ion-primitives-orange-1100; -} .ion-primitives-orange-1200 { + --color: $ion-primitives-orange-1200; color: $ion-primitives-orange-1200; } -.ion-background-primitives-orange-1200 { - background-color: $ion-primitives-orange-1200; -} .ion-primitives-yellow-100 { + --color: $ion-primitives-yellow-100; color: $ion-primitives-yellow-100; } -.ion-background-primitives-yellow-100 { - background-color: $ion-primitives-yellow-100; -} .ion-primitives-yellow-200 { + --color: $ion-primitives-yellow-200; color: $ion-primitives-yellow-200; } -.ion-background-primitives-yellow-200 { - background-color: $ion-primitives-yellow-200; -} .ion-primitives-yellow-300 { + --color: $ion-primitives-yellow-300; color: $ion-primitives-yellow-300; } -.ion-background-primitives-yellow-300 { - background-color: $ion-primitives-yellow-300; -} .ion-primitives-yellow-400 { + --color: $ion-primitives-yellow-400; color: $ion-primitives-yellow-400; } -.ion-background-primitives-yellow-400 { - background-color: $ion-primitives-yellow-400; -} .ion-primitives-yellow-500 { + --color: $ion-primitives-yellow-500; color: $ion-primitives-yellow-500; } -.ion-background-primitives-yellow-500 { - background-color: $ion-primitives-yellow-500; -} .ion-primitives-yellow-600 { + --color: $ion-primitives-yellow-600; color: $ion-primitives-yellow-600; } -.ion-background-primitives-yellow-600 { - background-color: $ion-primitives-yellow-600; -} .ion-primitives-yellow-700 { + --color: $ion-primitives-yellow-700; color: $ion-primitives-yellow-700; } -.ion-background-primitives-yellow-700 { - background-color: $ion-primitives-yellow-700; -} .ion-primitives-yellow-800 { + --color: $ion-primitives-yellow-800; color: $ion-primitives-yellow-800; } -.ion-background-primitives-yellow-800 { - background-color: $ion-primitives-yellow-800; -} .ion-primitives-yellow-900 { + --color: $ion-primitives-yellow-900; color: $ion-primitives-yellow-900; } -.ion-background-primitives-yellow-900 { - background-color: $ion-primitives-yellow-900; -} .ion-primitives-yellow-1000 { + --color: $ion-primitives-yellow-1000; color: $ion-primitives-yellow-1000; } -.ion-background-primitives-yellow-1000 { - background-color: $ion-primitives-yellow-1000; -} .ion-primitives-yellow-1100 { + --color: $ion-primitives-yellow-1100; color: $ion-primitives-yellow-1100; } -.ion-background-primitives-yellow-1100 { - background-color: $ion-primitives-yellow-1100; -} .ion-primitives-yellow-1200 { + --color: $ion-primitives-yellow-1200; color: $ion-primitives-yellow-1200; } -.ion-background-primitives-yellow-1200 { - background-color: $ion-primitives-yellow-1200; -} .ion-primitives-lime-100 { + --color: $ion-primitives-lime-100; color: $ion-primitives-lime-100; } -.ion-background-primitives-lime-100 { - background-color: $ion-primitives-lime-100; -} .ion-primitives-lime-200 { + --color: $ion-primitives-lime-200; color: $ion-primitives-lime-200; } -.ion-background-primitives-lime-200 { - background-color: $ion-primitives-lime-200; -} .ion-primitives-lime-300 { + --color: $ion-primitives-lime-300; color: $ion-primitives-lime-300; } -.ion-background-primitives-lime-300 { - background-color: $ion-primitives-lime-300; -} .ion-primitives-lime-400 { + --color: $ion-primitives-lime-400; color: $ion-primitives-lime-400; } -.ion-background-primitives-lime-400 { - background-color: $ion-primitives-lime-400; -} .ion-primitives-lime-500 { + --color: $ion-primitives-lime-500; color: $ion-primitives-lime-500; } -.ion-background-primitives-lime-500 { - background-color: $ion-primitives-lime-500; -} .ion-primitives-lime-600 { + --color: $ion-primitives-lime-600; color: $ion-primitives-lime-600; } -.ion-background-primitives-lime-600 { - background-color: $ion-primitives-lime-600; -} .ion-primitives-lime-700 { + --color: $ion-primitives-lime-700; color: $ion-primitives-lime-700; } -.ion-background-primitives-lime-700 { - background-color: $ion-primitives-lime-700; -} .ion-primitives-lime-800 { + --color: $ion-primitives-lime-800; color: $ion-primitives-lime-800; } -.ion-background-primitives-lime-800 { - background-color: $ion-primitives-lime-800; -} .ion-primitives-lime-900 { + --color: $ion-primitives-lime-900; color: $ion-primitives-lime-900; } -.ion-background-primitives-lime-900 { - background-color: $ion-primitives-lime-900; -} .ion-primitives-lime-1000 { + --color: $ion-primitives-lime-1000; color: $ion-primitives-lime-1000; } -.ion-background-primitives-lime-1000 { - background-color: $ion-primitives-lime-1000; -} .ion-primitives-lime-1100 { + --color: $ion-primitives-lime-1100; color: $ion-primitives-lime-1100; } -.ion-background-primitives-lime-1100 { - background-color: $ion-primitives-lime-1100; -} .ion-primitives-lime-1200 { + --color: $ion-primitives-lime-1200; color: $ion-primitives-lime-1200; } -.ion-background-primitives-lime-1200 { - background-color: $ion-primitives-lime-1200; -} .ion-primitives-green-100 { + --color: $ion-primitives-green-100; color: $ion-primitives-green-100; } -.ion-background-primitives-green-100 { - background-color: $ion-primitives-green-100; -} .ion-primitives-green-200 { + --color: $ion-primitives-green-200; color: $ion-primitives-green-200; } -.ion-background-primitives-green-200 { - background-color: $ion-primitives-green-200; -} .ion-primitives-green-300 { + --color: $ion-primitives-green-300; color: $ion-primitives-green-300; } -.ion-background-primitives-green-300 { - background-color: $ion-primitives-green-300; -} .ion-primitives-green-400 { + --color: $ion-primitives-green-400; color: $ion-primitives-green-400; } -.ion-background-primitives-green-400 { - background-color: $ion-primitives-green-400; -} .ion-primitives-green-500 { + --color: $ion-primitives-green-500; color: $ion-primitives-green-500; } -.ion-background-primitives-green-500 { - background-color: $ion-primitives-green-500; -} .ion-primitives-green-600 { + --color: $ion-primitives-green-600; color: $ion-primitives-green-600; } -.ion-background-primitives-green-600 { - background-color: $ion-primitives-green-600; -} .ion-primitives-green-700 { + --color: $ion-primitives-green-700; color: $ion-primitives-green-700; } -.ion-background-primitives-green-700 { - background-color: $ion-primitives-green-700; -} .ion-primitives-green-800 { + --color: $ion-primitives-green-800; color: $ion-primitives-green-800; } -.ion-background-primitives-green-800 { - background-color: $ion-primitives-green-800; -} .ion-primitives-green-900 { + --color: $ion-primitives-green-900; color: $ion-primitives-green-900; } -.ion-background-primitives-green-900 { - background-color: $ion-primitives-green-900; -} .ion-primitives-green-1000 { + --color: $ion-primitives-green-1000; color: $ion-primitives-green-1000; } -.ion-background-primitives-green-1000 { - background-color: $ion-primitives-green-1000; -} .ion-primitives-green-1100 { + --color: $ion-primitives-green-1100; color: $ion-primitives-green-1100; } -.ion-background-primitives-green-1100 { - background-color: $ion-primitives-green-1100; -} .ion-primitives-green-1200 { + --color: $ion-primitives-green-1200; color: $ion-primitives-green-1200; } -.ion-background-primitives-green-1200 { - background-color: $ion-primitives-green-1200; -} .ion-primitives-teal-100 { + --color: $ion-primitives-teal-100; color: $ion-primitives-teal-100; } -.ion-background-primitives-teal-100 { - background-color: $ion-primitives-teal-100; -} .ion-primitives-teal-200 { + --color: $ion-primitives-teal-200; color: $ion-primitives-teal-200; } -.ion-background-primitives-teal-200 { - background-color: $ion-primitives-teal-200; -} .ion-primitives-teal-300 { + --color: $ion-primitives-teal-300; color: $ion-primitives-teal-300; } -.ion-background-primitives-teal-300 { - background-color: $ion-primitives-teal-300; -} .ion-primitives-teal-400 { + --color: $ion-primitives-teal-400; color: $ion-primitives-teal-400; } -.ion-background-primitives-teal-400 { - background-color: $ion-primitives-teal-400; -} .ion-primitives-teal-500 { + --color: $ion-primitives-teal-500; color: $ion-primitives-teal-500; } -.ion-background-primitives-teal-500 { - background-color: $ion-primitives-teal-500; -} .ion-primitives-teal-600 { + --color: $ion-primitives-teal-600; color: $ion-primitives-teal-600; } -.ion-background-primitives-teal-600 { - background-color: $ion-primitives-teal-600; -} .ion-primitives-teal-700 { + --color: $ion-primitives-teal-700; color: $ion-primitives-teal-700; } -.ion-background-primitives-teal-700 { - background-color: $ion-primitives-teal-700; -} .ion-primitives-teal-800 { + --color: $ion-primitives-teal-800; color: $ion-primitives-teal-800; } -.ion-background-primitives-teal-800 { - background-color: $ion-primitives-teal-800; -} .ion-primitives-teal-900 { + --color: $ion-primitives-teal-900; color: $ion-primitives-teal-900; } -.ion-background-primitives-teal-900 { - background-color: $ion-primitives-teal-900; -} .ion-primitives-teal-1000 { + --color: $ion-primitives-teal-1000; color: $ion-primitives-teal-1000; } -.ion-background-primitives-teal-1000 { - background-color: $ion-primitives-teal-1000; -} .ion-primitives-teal-1100 { + --color: $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; color: $ion-primitives-teal-1200; } -.ion-background-primitives-teal-1200 { - background-color: $ion-primitives-teal-1200; -} .ion-primitives-aqua-100 { + --color: $ion-primitives-aqua-100; color: $ion-primitives-aqua-100; } -.ion-background-primitives-aqua-100 { - background-color: $ion-primitives-aqua-100; -} .ion-primitives-aqua-200 { + --color: $ion-primitives-aqua-200; color: $ion-primitives-aqua-200; } -.ion-background-primitives-aqua-200 { - background-color: $ion-primitives-aqua-200; -} .ion-primitives-aqua-300 { + --color: $ion-primitives-aqua-300; color: $ion-primitives-aqua-300; } -.ion-background-primitives-aqua-300 { - background-color: $ion-primitives-aqua-300; -} .ion-primitives-aqua-400 { + --color: $ion-primitives-aqua-400; color: $ion-primitives-aqua-400; } -.ion-background-primitives-aqua-400 { - background-color: $ion-primitives-aqua-400; -} .ion-primitives-aqua-500 { + --color: $ion-primitives-aqua-500; color: $ion-primitives-aqua-500; } -.ion-background-primitives-aqua-500 { - background-color: $ion-primitives-aqua-500; -} .ion-primitives-aqua-600 { + --color: $ion-primitives-aqua-600; color: $ion-primitives-aqua-600; } -.ion-background-primitives-aqua-600 { - background-color: $ion-primitives-aqua-600; -} .ion-primitives-aqua-700 { + --color: $ion-primitives-aqua-700; color: $ion-primitives-aqua-700; } -.ion-background-primitives-aqua-700 { - background-color: $ion-primitives-aqua-700; -} .ion-primitives-aqua-800 { + --color: $ion-primitives-aqua-800; color: $ion-primitives-aqua-800; } -.ion-background-primitives-aqua-800 { - background-color: $ion-primitives-aqua-800; -} .ion-primitives-aqua-900 { + --color: $ion-primitives-aqua-900; color: $ion-primitives-aqua-900; } -.ion-background-primitives-aqua-900 { - background-color: $ion-primitives-aqua-900; -} .ion-primitives-aqua-1000 { + --color: $ion-primitives-aqua-1000; color: $ion-primitives-aqua-1000; } -.ion-background-primitives-aqua-1000 { - background-color: $ion-primitives-aqua-1000; -} .ion-primitives-aqua-1100 { + --color: $ion-primitives-aqua-1100; color: $ion-primitives-aqua-1100; } -.ion-background-primitives-aqua-1100 { - background-color: $ion-primitives-aqua-1100; -} .ion-primitives-aqua-1200 { + --color: $ion-primitives-aqua-1200; color: $ion-primitives-aqua-1200; } -.ion-background-primitives-aqua-1200 { - background-color: $ion-primitives-aqua-1200; -} .ion-primitives-blue-100 { + --color: $ion-primitives-blue-100; color: $ion-primitives-blue-100; } -.ion-background-primitives-blue-100 { - background-color: $ion-primitives-blue-100; -} .ion-primitives-blue-200 { + --color: $ion-primitives-blue-200; color: $ion-primitives-blue-200; } -.ion-background-primitives-blue-200 { - background-color: $ion-primitives-blue-200; -} .ion-primitives-blue-300 { + --color: $ion-primitives-blue-300; color: $ion-primitives-blue-300; } -.ion-background-primitives-blue-300 { - background-color: $ion-primitives-blue-300; -} .ion-primitives-blue-400 { + --color: $ion-primitives-blue-400; color: $ion-primitives-blue-400; } -.ion-background-primitives-blue-400 { - background-color: $ion-primitives-blue-400; -} .ion-primitives-blue-500 { + --color: $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; color: $ion-primitives-blue-600; } -.ion-background-primitives-blue-600 { - background-color: $ion-primitives-blue-600; -} .ion-primitives-blue-700 { + --color: $ion-primitives-blue-700; color: $ion-primitives-blue-700; } -.ion-background-primitives-blue-700 { - background-color: $ion-primitives-blue-700; -} .ion-primitives-blue-800 { + --color: $ion-primitives-blue-800; color: $ion-primitives-blue-800; } -.ion-background-primitives-blue-800 { - background-color: $ion-primitives-blue-800; -} .ion-primitives-blue-900 { + --color: $ion-primitives-blue-900; color: $ion-primitives-blue-900; } -.ion-background-primitives-blue-900 { - background-color: $ion-primitives-blue-900; -} .ion-primitives-blue-1000 { + --color: $ion-primitives-blue-1000; color: $ion-primitives-blue-1000; } -.ion-background-primitives-blue-1000 { - background-color: $ion-primitives-blue-1000; -} .ion-primitives-blue-1100 { + --color: $ion-primitives-blue-1100; color: $ion-primitives-blue-1100; } -.ion-background-primitives-blue-1100 { - background-color: $ion-primitives-blue-1100; -} .ion-primitives-blue-1200 { + --color: $ion-primitives-blue-1200; color: $ion-primitives-blue-1200; } -.ion-background-primitives-blue-1200 { - background-color: $ion-primitives-blue-1200; -} .ion-primitives-indigo-100 { + --color: $ion-primitives-indigo-100; color: $ion-primitives-indigo-100; } -.ion-background-primitives-indigo-100 { - background-color: $ion-primitives-indigo-100; -} .ion-primitives-indigo-200 { + --color: $ion-primitives-indigo-200; color: $ion-primitives-indigo-200; } -.ion-background-primitives-indigo-200 { - background-color: $ion-primitives-indigo-200; -} .ion-primitives-indigo-300 { + --color: $ion-primitives-indigo-300; color: $ion-primitives-indigo-300; } -.ion-background-primitives-indigo-300 { - background-color: $ion-primitives-indigo-300; -} .ion-primitives-indigo-400 { + --color: $ion-primitives-indigo-400; color: $ion-primitives-indigo-400; } -.ion-background-primitives-indigo-400 { - background-color: $ion-primitives-indigo-400; -} .ion-primitives-indigo-500 { + --color: $ion-primitives-indigo-500; color: $ion-primitives-indigo-500; } -.ion-background-primitives-indigo-500 { - background-color: $ion-primitives-indigo-500; -} .ion-primitives-indigo-600 { + --color: $ion-primitives-indigo-600; color: $ion-primitives-indigo-600; } -.ion-background-primitives-indigo-600 { - background-color: $ion-primitives-indigo-600; -} .ion-primitives-indigo-700 { + --color: $ion-primitives-indigo-700; color: $ion-primitives-indigo-700; } -.ion-background-primitives-indigo-700 { - background-color: $ion-primitives-indigo-700; -} .ion-primitives-indigo-800 { + --color: $ion-primitives-indigo-800; color: $ion-primitives-indigo-800; } -.ion-background-primitives-indigo-800 { - background-color: $ion-primitives-indigo-800; -} .ion-primitives-indigo-900 { + --color: $ion-primitives-indigo-900; color: $ion-primitives-indigo-900; } -.ion-background-primitives-indigo-900 { - background-color: $ion-primitives-indigo-900; -} .ion-primitives-indigo-1000 { + --color: $ion-primitives-indigo-1000; color: $ion-primitives-indigo-1000; } -.ion-background-primitives-indigo-1000 { - background-color: $ion-primitives-indigo-1000; -} .ion-primitives-indigo-1100 { + --color: $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; color: $ion-primitives-indigo-1200; } -.ion-background-primitives-indigo-1200 { - background-color: $ion-primitives-indigo-1200; -} .ion-primitives-violet-100 { + --color: $ion-primitives-violet-100; color: $ion-primitives-violet-100; } -.ion-background-primitives-violet-100 { - background-color: $ion-primitives-violet-100; -} .ion-primitives-violet-200 { + --color: $ion-primitives-violet-200; color: $ion-primitives-violet-200; } -.ion-background-primitives-violet-200 { - background-color: $ion-primitives-violet-200; -} .ion-primitives-violet-300 { + --color: $ion-primitives-violet-300; color: $ion-primitives-violet-300; } -.ion-background-primitives-violet-300 { - background-color: $ion-primitives-violet-300; -} .ion-primitives-violet-400 { + --color: $ion-primitives-violet-400; color: $ion-primitives-violet-400; } -.ion-background-primitives-violet-400 { - background-color: $ion-primitives-violet-400; -} .ion-primitives-violet-500 { + --color: $ion-primitives-violet-500; color: $ion-primitives-violet-500; } -.ion-background-primitives-violet-500 { - background-color: $ion-primitives-violet-500; -} .ion-primitives-violet-600 { + --color: $ion-primitives-violet-600; color: $ion-primitives-violet-600; } -.ion-background-primitives-violet-600 { - background-color: $ion-primitives-violet-600; -} .ion-primitives-violet-700 { + --color: $ion-primitives-violet-700; color: $ion-primitives-violet-700; } -.ion-background-primitives-violet-700 { - background-color: $ion-primitives-violet-700; -} .ion-primitives-violet-800 { + --color: $ion-primitives-violet-800; color: $ion-primitives-violet-800; } -.ion-background-primitives-violet-800 { - background-color: $ion-primitives-violet-800; -} .ion-primitives-violet-900 { + --color: $ion-primitives-violet-900; color: $ion-primitives-violet-900; } -.ion-background-primitives-violet-900 { - background-color: $ion-primitives-violet-900; -} .ion-primitives-violet-1000 { + --color: $ion-primitives-violet-1000; color: $ion-primitives-violet-1000; } -.ion-background-primitives-violet-1000 { - background-color: $ion-primitives-violet-1000; -} .ion-primitives-violet-1100 { + --color: $ion-primitives-violet-1100; color: $ion-primitives-violet-1100; } -.ion-background-primitives-violet-1100 { - background-color: $ion-primitives-violet-1100; -} .ion-primitives-violet-1200 { + --color: $ion-primitives-violet-1200; color: $ion-primitives-violet-1200; } -.ion-background-primitives-violet-1200 { - background-color: $ion-primitives-violet-1200; -} .ion-primitives-purple-100 { + --color: $ion-primitives-purple-100; color: $ion-primitives-purple-100; } -.ion-background-primitives-purple-100 { - background-color: $ion-primitives-purple-100; -} .ion-primitives-purple-200 { + --color: $ion-primitives-purple-200; color: $ion-primitives-purple-200; } -.ion-background-primitives-purple-200 { - background-color: $ion-primitives-purple-200; -} .ion-primitives-purple-300 { + --color: $ion-primitives-purple-300; color: $ion-primitives-purple-300; } -.ion-background-primitives-purple-300 { - background-color: $ion-primitives-purple-300; -} .ion-primitives-purple-400 { + --color: $ion-primitives-purple-400; color: $ion-primitives-purple-400; } -.ion-background-primitives-purple-400 { - background-color: $ion-primitives-purple-400; -} .ion-primitives-purple-500 { + --color: $ion-primitives-purple-500; color: $ion-primitives-purple-500; } -.ion-background-primitives-purple-500 { - background-color: $ion-primitives-purple-500; -} .ion-primitives-purple-600 { + --color: $ion-primitives-purple-600; color: $ion-primitives-purple-600; } -.ion-background-primitives-purple-600 { - background-color: $ion-primitives-purple-600; -} .ion-primitives-purple-700 { + --color: $ion-primitives-purple-700; color: $ion-primitives-purple-700; } -.ion-background-primitives-purple-700 { - background-color: $ion-primitives-purple-700; -} .ion-primitives-purple-800 { + --color: $ion-primitives-purple-800; color: $ion-primitives-purple-800; } -.ion-background-primitives-purple-800 { - background-color: $ion-primitives-purple-800; -} .ion-primitives-purple-900 { + --color: $ion-primitives-purple-900; color: $ion-primitives-purple-900; } -.ion-background-primitives-purple-900 { - background-color: $ion-primitives-purple-900; -} .ion-primitives-purple-1000 { + --color: $ion-primitives-purple-1000; color: $ion-primitives-purple-1000; } -.ion-background-primitives-purple-1000 { - background-color: $ion-primitives-purple-1000; -} .ion-primitives-purple-1100 { + --color: $ion-primitives-purple-1100; color: $ion-primitives-purple-1100; } -.ion-background-primitives-purple-1100 { - background-color: $ion-primitives-purple-1100; -} .ion-primitives-purple-1200 { + --color: $ion-primitives-purple-1200; color: $ion-primitives-purple-1200; } -.ion-background-primitives-purple-1200 { - background-color: $ion-primitives-purple-1200; -} .ion-primitives-magenta-100 { + --color: $ion-primitives-magenta-100; color: $ion-primitives-magenta-100; } -.ion-background-primitives-magenta-100 { - background-color: $ion-primitives-magenta-100; -} .ion-primitives-magenta-200 { + --color: $ion-primitives-magenta-200; color: $ion-primitives-magenta-200; } -.ion-background-primitives-magenta-200 { - background-color: $ion-primitives-magenta-200; -} .ion-primitives-magenta-300 { + --color: $ion-primitives-magenta-300; color: $ion-primitives-magenta-300; } -.ion-background-primitives-magenta-300 { - background-color: $ion-primitives-magenta-300; -} .ion-primitives-magenta-400 { + --color: $ion-primitives-magenta-400; color: $ion-primitives-magenta-400; } -.ion-background-primitives-magenta-400 { - background-color: $ion-primitives-magenta-400; -} .ion-primitives-magenta-500 { + --color: $ion-primitives-magenta-500; color: $ion-primitives-magenta-500; } -.ion-background-primitives-magenta-500 { - background-color: $ion-primitives-magenta-500; -} .ion-primitives-magenta-600 { + --color: $ion-primitives-magenta-600; color: $ion-primitives-magenta-600; } -.ion-background-primitives-magenta-600 { - background-color: $ion-primitives-magenta-600; -} .ion-primitives-magenta-700 { + --color: $ion-primitives-magenta-700; color: $ion-primitives-magenta-700; } -.ion-background-primitives-magenta-700 { - background-color: $ion-primitives-magenta-700; -} .ion-primitives-magenta-800 { + --color: $ion-primitives-magenta-800; color: $ion-primitives-magenta-800; } -.ion-background-primitives-magenta-800 { - background-color: $ion-primitives-magenta-800; -} .ion-primitives-magenta-900 { + --color: $ion-primitives-magenta-900; color: $ion-primitives-magenta-900; } -.ion-background-primitives-magenta-900 { - background-color: $ion-primitives-magenta-900; -} .ion-primitives-magenta-1000 { + --color: $ion-primitives-magenta-1000; color: $ion-primitives-magenta-1000; } -.ion-background-primitives-magenta-1000 { - background-color: $ion-primitives-magenta-1000; -} .ion-primitives-magenta-1100 { + --color: $ion-primitives-magenta-1100; color: $ion-primitives-magenta-1100; } -.ion-background-primitives-magenta-1100 { - background-color: $ion-primitives-magenta-1100; -} .ion-primitives-magenta-1200 { + --color: $ion-primitives-magenta-1200; color: $ion-primitives-magenta-1200; } -.ion-background-primitives-magenta-1200 { - background-color: $ion-primitives-magenta-1200; -} .ion-primitives-pink-100 { + --color: $ion-primitives-pink-100; color: $ion-primitives-pink-100; } -.ion-background-primitives-pink-100 { - background-color: $ion-primitives-pink-100; -} .ion-primitives-pink-200 { + --color: $ion-primitives-pink-200; color: $ion-primitives-pink-200; } -.ion-background-primitives-pink-200 { - background-color: $ion-primitives-pink-200; -} .ion-primitives-pink-300 { + --color: $ion-primitives-pink-300; color: $ion-primitives-pink-300; } -.ion-background-primitives-pink-300 { - background-color: $ion-primitives-pink-300; -} .ion-primitives-pink-400 { + --color: $ion-primitives-pink-400; color: $ion-primitives-pink-400; } -.ion-background-primitives-pink-400 { - background-color: $ion-primitives-pink-400; -} .ion-primitives-pink-500 { + --color: $ion-primitives-pink-500; color: $ion-primitives-pink-500; } -.ion-background-primitives-pink-500 { - background-color: $ion-primitives-pink-500; -} .ion-primitives-pink-600 { + --color: $ion-primitives-pink-600; color: $ion-primitives-pink-600; } -.ion-background-primitives-pink-600 { - background-color: $ion-primitives-pink-600; -} .ion-primitives-pink-700 { + --color: $ion-primitives-pink-700; color: $ion-primitives-pink-700; } -.ion-background-primitives-pink-700 { - background-color: $ion-primitives-pink-700; -} .ion-primitives-pink-800 { + --color: $ion-primitives-pink-800; color: $ion-primitives-pink-800; } -.ion-background-primitives-pink-800 { - background-color: $ion-primitives-pink-800; -} .ion-primitives-pink-900 { + --color: $ion-primitives-pink-900; color: $ion-primitives-pink-900; } -.ion-background-primitives-pink-900 { - background-color: $ion-primitives-pink-900; -} .ion-primitives-pink-1000 { + --color: $ion-primitives-pink-1000; color: $ion-primitives-pink-1000; } -.ion-background-primitives-pink-1000 { - background-color: $ion-primitives-pink-1000; -} .ion-primitives-pink-1100 { + --color: $ion-primitives-pink-1100; color: $ion-primitives-pink-1100; } -.ion-background-primitives-pink-1100 { - background-color: $ion-primitives-pink-1100; -} .ion-primitives-pink-1200 { + --color: $ion-primitives-pink-1200; color: $ion-primitives-pink-1200; } -.ion-background-primitives-pink-1200 { - background-color: $ion-primitives-pink-1200; -} .ion-shadow-1 { + --box-shadow: $ion-shadow-1; box-shadow: $ion-shadow-1; } .ion-shadow-2 { + --box-shadow: $ion-shadow-2; box-shadow: $ion-shadow-2; } .ion-shadow-3 { + --box-shadow: $ion-shadow-3; box-shadow: $ion-shadow-3; } .ion-shadow-4 { + --box-shadow: $ion-shadow-4; box-shadow: $ion-shadow-4; } .ion-shadow-5 { + --box-shadow: $ion-shadow-5; box-shadow: $ion-shadow-5; } .ion-shadow-6 { + --box-shadow: $ion-shadow-6; box-shadow: $ion-shadow-6; } .ion-shadow-7 { + --box-shadow: $ion-shadow-7; box-shadow: $ion-shadow-7; }