diff --git a/core/src/components/badge/badge.scss b/core/src/components/badge/badge.common.scss similarity index 89% rename from core/src/components/badge/badge.scss rename to core/src/components/badge/badge.common.scss index 22252d5523..fc29ca7608 100644 --- a/core/src/components/badge/badge.scss +++ b/core/src/components/badge/badge.common.scss @@ -1,4 +1,5 @@ -@import "./badge.vars"; +@import "../../themes/mixins"; +@import "./badge.common.vars"; // Badge // -------------------------------------------------- @@ -13,8 +14,6 @@ * @prop --padding-bottom: Bottom padding of the badge * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge */ - --background: #{ion-color(primary, base)}; - --color: #{ion-color(primary, contrast)}; --padding-top: #{$badge-padding-top}; --padding-end: #{$badge-padding-end}; --padding-bottom: #{$badge-padding-bottom}; @@ -30,7 +29,6 @@ background: var(--background); color: var(--color); - font-family: $font-family-base; font-size: $badge-font-size; font-weight: $badge-font-weight; diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.common.vars.scss similarity index 93% rename from core/src/components/badge/badge.vars.scss rename to core/src/components/badge/badge.common.vars.scss index 42e3030f84..d6941d1d77 100644 --- a/core/src/components/badge/badge.vars.scss +++ b/core/src/components/badge/badge.common.vars.scss @@ -1,4 +1,4 @@ -@import "../../themes/native/native.globals"; +@import "../../themes/functions.font"; // Badge // -------------------------------------------------- diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index 0ec10a3496..c9d93d4c3c 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -1,12 +1,16 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; -@import "./badge"; +@use "./badge.common"; // Ionic Badge // -------------------------------------------------- :host { - --padding-start: #{globals.$ionic-space-100}; - --padding-end: #{globals.$ionic-space-100}; + // TODO(ROU-10872): replace this value the color function + --background: #{globals.$ionic-color-blue-700}; + // TODO(ROU-10872): replace this value the color function + --color: #{globals.$ionic-color-base-white}; + --padding-start: #{globals.$ionic-space-200}; + --padding-end: #{globals.$ionic-space-200}; --padding-top: #{globals.$ionic-space-0}; --padding-bottom: #{globals.$ionic-space-0}; @@ -23,23 +27,23 @@ /* Soft Badge */ :host(.badge-soft) { - @include border-radius(globals.$ionic-border-radius-200); + @include globals.border-radius(globals.$ionic-border-radius-200); } :host(.badge-xxsmall.badge-soft), :host(.badge-xsmall.badge-soft), :host(.badge-small.badge-soft) { - @include border-radius(globals.$ionic-border-radius-100); + @include globals.border-radius(globals.$ionic-border-radius-100); } /* Round Badge */ :host(.badge-round) { - @include border-radius(globals.$ionic-border-radius-full); + @include globals.border-radius(globals.$ionic-border-radius-full); } /* Rectangular Badge */ :host(.badge-rectangular) { - @include border-radius(globals.$ionic-border-radius-0); + @include globals.border-radius(globals.$ionic-border-radius-0); } // Badge Sizes @@ -47,6 +51,9 @@ /* 2-Extra Small Badge */ :host(.badge-xxsmall) { + --padding-start: #{globals.$ionic-space-050}; + --padding-end: #{globals.$ionic-space-050}; + min-width: globals.$ionic-scale-400; height: globals.$ionic-scale-400; @@ -57,6 +64,9 @@ /* Extra Small Badge */ :host(.badge-xsmall) { + --padding-start: #{globals.$ionic-space-100}; + --padding-end: #{globals.$ionic-space-100}; + min-width: globals.$ionic-scale-600; height: globals.$ionic-scale-600; @@ -67,6 +77,9 @@ /* Small Badge */ :host(.badge-small) { + --padding-start: #{globals.$ionic-space-100}; + --padding-end: #{globals.$ionic-space-100}; + min-width: globals.$ionic-scale-800; height: globals.$ionic-scale-800; @@ -87,9 +100,6 @@ /* Large Badge */ :host(.badge-large) { - --padding-start: #{globals.$ionic-space-200}; - --padding-end: #{globals.$ionic-space-200}; - min-width: globals.$ionic-scale-1200; height: globals.$ionic-scale-1200; @@ -100,9 +110,6 @@ /* Extra Large Badge */ :host(.badge-xlarge) { - --padding-start: #{globals.$ionic-space-200}; - --padding-end: #{globals.$ionic-space-200}; - min-width: globals.$ionic-scale-1400; height: globals.$ionic-scale-1400; diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss index 68183d96fb..e48c325e12 100644 --- a/core/src/components/badge/badge.ios.scss +++ b/core/src/components/badge/badge.ios.scss @@ -1,4 +1,4 @@ -@import "./badge"; +@import "./badge.native"; @import "./badge.ios.vars"; // iOS Badge diff --git a/core/src/components/badge/badge.md.scss b/core/src/components/badge/badge.md.scss index d1038913dc..3d0e94bbde 100644 --- a/core/src/components/badge/badge.md.scss +++ b/core/src/components/badge/badge.md.scss @@ -1,4 +1,4 @@ -@import "./badge"; +@import "./badge.native"; @import "./badge.md.vars"; // Material Design Badge diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss new file mode 100644 index 0000000000..820c5599ae --- /dev/null +++ b/core/src/components/badge/badge.native.scss @@ -0,0 +1,13 @@ +@import "../../themes/native/native.globals.md"; +@import "./badge.common"; +@import "./badge.common.vars"; + +// Badge +// -------------------------------------------------- + +:host { + --background: #{ion-color(primary, base)}; + --color: #{ion-color(primary, contrast)}; + + font-family: $font-family-base; +} diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 117f06854d..9dec6299c5 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index df43559f40..e622d87976 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 3ac6cd5399..d230f4803a 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-larger-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8050298f22..4c40eece2f 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index 82086cedb2..ea9923a629 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png index 20d70ff0bb..c42b32c080 100644 Binary files a/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/shape/badge.e2e.ts-snapshots/badge-shape-soft-smaller-sizes-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 1acad845e7..99dbe06825 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index fe75f921ac..eae2fd09ef 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png index cb8ad5f3d3..d61f95245e 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-medium-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png index 630fde70c5..7ebab3ddc2 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png index a02e73ecf1..2637176a81 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png index f83e990be2..f65d53021d 100644 Binary files a/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/size/badge.e2e.ts-snapshots/badge-size-xxsmall-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ