@umbraco-ui/uui-color-swatch 1.2.1 → 1.3.0-rc.0
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.
- package/lib/index.js +16 -4
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -40,12 +40,24 @@ let UUIColorSwatchElement = class extends LabelMixin(
|
|
|
40
40
|
this._value = newValue;
|
|
41
41
|
this.requestUpdate("value", oldValue);
|
|
42
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)
|
|
45
|
+
*
|
|
46
|
+
* @type {(Colord | null)}
|
|
47
|
+
* @memberof UUIColorSwatchElement
|
|
48
|
+
*/
|
|
43
49
|
get color() {
|
|
44
50
|
return this._color;
|
|
45
51
|
}
|
|
46
52
|
set color(_) {
|
|
47
53
|
return;
|
|
48
54
|
}
|
|
55
|
+
/**
|
|
56
|
+
* Returns true if the color brightness is >= 0.5
|
|
57
|
+
*
|
|
58
|
+
* @readonly
|
|
59
|
+
* @memberof UUIColorSwatchElement
|
|
60
|
+
*/
|
|
49
61
|
get isLight() {
|
|
50
62
|
var _a, _b;
|
|
51
63
|
return (_b = (_a = this.color) == null ? void 0 : _a.isLight()) != null ? _b : false;
|
|
@@ -129,7 +141,7 @@ UUIColorSwatchElement.styles = [
|
|
|
129
141
|
:host(*),
|
|
130
142
|
* {
|
|
131
143
|
/* TODO: implement globally shared outline style */
|
|
132
|
-
outline-color: var(--uui-color-focus
|
|
144
|
+
outline-color: var(--uui-color-focus,var(--uui-palette-malibu));
|
|
133
145
|
outline-offset: 4px;
|
|
134
146
|
}
|
|
135
147
|
|
|
@@ -138,7 +150,7 @@ UUIColorSwatchElement.styles = [
|
|
|
138
150
|
}
|
|
139
151
|
|
|
140
152
|
:host(:focus:not([disabled])) #swatch {
|
|
141
|
-
outline-color: var(--uui-color-focus
|
|
153
|
+
outline-color: var(--uui-color-focus,var(--uui-palette-malibu));
|
|
142
154
|
outline-width: var(--uui-swatch-border-width, 1px);
|
|
143
155
|
outline-style: solid;
|
|
144
156
|
outline-offset: var(--uui-swatch-border-width, 1px);
|
|
@@ -175,9 +187,9 @@ UUIColorSwatchElement.styles = [
|
|
|
175
187
|
height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));
|
|
176
188
|
box-sizing: border-box;
|
|
177
189
|
border: var(--uui-swatch-border-width, 1px) solid
|
|
178
|
-
var(--uui-color-selected
|
|
190
|
+
var(--uui-color-selected,var(--uui-palette-violet-blue));
|
|
179
191
|
border-radius: calc(
|
|
180
|
-
var(--uui-border-radius,
|
|
192
|
+
var(--uui-border-radius,var(--uui-size-1)) + var(--uui-swatch-border-width, 1px)
|
|
181
193
|
);
|
|
182
194
|
transition: opacity 100ms ease-out;
|
|
183
195
|
opacity: 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umbraco-ui/uui-color-swatch",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Umbraco",
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
"custom-elements.json"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@umbraco-ui/uui-base": "1.
|
|
34
|
-
"@umbraco-ui/uui-icon-registry-essential": "1.
|
|
33
|
+
"@umbraco-ui/uui-base": "1.3.0-rc.0",
|
|
34
|
+
"@umbraco-ui/uui-icon-registry-essential": "1.3.0-rc.0",
|
|
35
35
|
"colord": "^2.9.3"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
|
|
39
|
-
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
|
|
39
|
+
"clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
|
|
40
40
|
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
|
|
41
41
|
},
|
|
42
42
|
"publishConfig": {
|
|
43
43
|
"access": "public"
|
|
44
44
|
},
|
|
45
45
|
"homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatch",
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
|
|
47
47
|
}
|