@waggylabs/yumekit 0.4.0-beta.26 → 0.4.0-beta.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { contrastTextColor } from '../modules/helpers.js';
|
|
2
|
+
|
|
1
3
|
class YumeBadge extends HTMLElement {
|
|
2
4
|
static get observedAttributes() {
|
|
3
5
|
return ["value", "position", "alignment", "color", "size"];
|
|
@@ -69,7 +71,7 @@ class YumeBadge extends HTMLElement {
|
|
|
69
71
|
error: ["var(--error-content--)", "var(--error-content-inverse)"],
|
|
70
72
|
help: ["var(--help-content--)", "var(--help-content-inverse)"],
|
|
71
73
|
};
|
|
72
|
-
return colorMap[color] || [color,
|
|
74
|
+
return colorMap[color] || [color, contrastTextColor(color)];
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
getBadgePosition(position, alignment) {
|
|
@@ -106,6 +106,12 @@ class YumeRating extends HTMLElement {
|
|
|
106
106
|
const iconSizePx = { small: "18px", medium: "24px", large: "32px" }[size] || "24px";
|
|
107
107
|
const gapPx = { small: "2px", medium: "4px", large: "6px" }[size] || "4px";
|
|
108
108
|
|
|
109
|
+
const isCustomColor =
|
|
110
|
+
color.startsWith("#") ||
|
|
111
|
+
color.startsWith("rgb") ||
|
|
112
|
+
color.startsWith("hsl");
|
|
113
|
+
const filledColor = isCustomColor ? color : `var(--${color}-content--)`;
|
|
114
|
+
|
|
109
115
|
const sheet = new CSSStyleSheet();
|
|
110
116
|
sheet.replaceSync(`
|
|
111
117
|
:host {
|
|
@@ -134,7 +140,7 @@ class YumeRating extends HTMLElement {
|
|
|
134
140
|
}
|
|
135
141
|
|
|
136
142
|
.icon.filled {
|
|
137
|
-
color:
|
|
143
|
+
color: ${filledColor};
|
|
138
144
|
}
|
|
139
145
|
|
|
140
146
|
.icon svg {
|
package/dist/index.js
CHANGED
|
@@ -2740,7 +2740,7 @@ class YumeBadge extends HTMLElement {
|
|
|
2740
2740
|
error: ["var(--error-content--)", "var(--error-content-inverse)"],
|
|
2741
2741
|
help: ["var(--help-content--)", "var(--help-content-inverse)"],
|
|
2742
2742
|
};
|
|
2743
|
-
return colorMap[color] || [color,
|
|
2743
|
+
return colorMap[color] || [color, contrastTextColor(color)];
|
|
2744
2744
|
}
|
|
2745
2745
|
|
|
2746
2746
|
getBadgePosition(position, alignment) {
|
|
@@ -5288,6 +5288,12 @@ class YumeRating extends HTMLElement {
|
|
|
5288
5288
|
const iconSizePx = { small: "18px", medium: "24px", large: "32px" }[size] || "24px";
|
|
5289
5289
|
const gapPx = { small: "2px", medium: "4px", large: "6px" }[size] || "4px";
|
|
5290
5290
|
|
|
5291
|
+
const isCustomColor =
|
|
5292
|
+
color.startsWith("#") ||
|
|
5293
|
+
color.startsWith("rgb") ||
|
|
5294
|
+
color.startsWith("hsl");
|
|
5295
|
+
const filledColor = isCustomColor ? color : `var(--${color}-content--)`;
|
|
5296
|
+
|
|
5291
5297
|
const sheet = new CSSStyleSheet();
|
|
5292
5298
|
sheet.replaceSync(`
|
|
5293
5299
|
:host {
|
|
@@ -5316,7 +5322,7 @@ class YumeRating extends HTMLElement {
|
|
|
5316
5322
|
}
|
|
5317
5323
|
|
|
5318
5324
|
.icon.filled {
|
|
5319
|
-
color:
|
|
5325
|
+
color: ${filledColor};
|
|
5320
5326
|
}
|
|
5321
5327
|
|
|
5322
5328
|
.icon svg {
|