@umbraco-ui/uui-checkbox 1.2.0 → 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.
Files changed (2) hide show
  1. package/lib/index.js +21 -17
  2. package/package.json +6 -6
package/lib/index.js CHANGED
@@ -24,6 +24,10 @@ let UUICheckboxElement = class extends UUIBooleanInputElement {
24
24
  `;
25
25
  }
26
26
  };
27
+ /**
28
+ * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals. Read more about form controls here https://web.dev/more-capable-form-controls/
29
+ * @type {boolean}
30
+ */
27
31
  UUICheckboxElement.formAssociated = true;
28
32
  UUICheckboxElement.styles = [
29
33
  ...UUIBooleanInputElement.styles,
@@ -46,7 +50,7 @@ UUICheckboxElement.styles = [
46
50
  height: var(--uui-checkbox-size);
47
51
  border-radius: var(
48
52
  --uui-checkbox-border-radius,
49
- var(--uui-border-radius,3px)
53
+ var(--uui-border-radius,var(--uui-size-1))
50
54
  );
51
55
 
52
56
  color: var(--uui-toggle-color, var(--uui-color-selected-contrast,#fff));
@@ -65,7 +69,7 @@ UUICheckboxElement.styles = [
65
69
  );
66
70
  background-color: var(
67
71
  --uui-checkbox-background-color-hover,
68
- var(--uui-color-surface-emphasis,rgb(250, 250, 250))
72
+ var(--uui-color-surface-emphasis,var(--uui-palette-white-dark))
69
73
  );
70
74
  }
71
75
  label:focus #ticker {
@@ -75,17 +79,17 @@ UUICheckboxElement.styles = [
75
79
  );
76
80
  background-color: var(
77
81
  --uui-checkbox-background-color-focus,
78
- var(--uui-color-surface-emphasis,rgb(250, 250, 250))
82
+ var(--uui-color-surface-emphasis,var(--uui-palette-white-dark))
79
83
  );
80
84
  }
81
85
  input:checked:not([disabled]) + #ticker {
82
- border-color: var(--uui-color-selected,#3544b1);
86
+ border-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
83
87
  }
84
88
  label:hover input:checked:not([disabled]) + #ticker {
85
- border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
89
+ border-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
86
90
  }
87
91
  label:focus input:checked + #ticker {
88
- border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
92
+ border-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
89
93
  }
90
94
 
91
95
  #icon-check {
@@ -107,15 +111,15 @@ UUICheckboxElement.styles = [
107
111
  bottom: 0;
108
112
  right: 0;
109
113
  border-radius: calc(
110
- var(--uui-checkbox-border-radius, var(--uui-border-radius,3px)) * 0.5
114
+ var(--uui-checkbox-border-radius, var(--uui-border-radius,var(--uui-size-1))) * 0.5
111
115
  );
112
- background-color: var(--uui-color-selected,#3544b1);
116
+ background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
113
117
  transition: transform 120ms ease, opacity 120ms, background-color 120ms;
114
118
  transform: scale(0);
115
119
  opacity: 0;
116
120
  }
117
121
  label:hover input:checked:not([disabled]) + #ticker::before {
118
- background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
122
+ background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
119
123
  }
120
124
 
121
125
  input:checked + #ticker::before {
@@ -126,12 +130,12 @@ UUICheckboxElement.styles = [
126
130
  opacity: 1;
127
131
  }
128
132
  label:focus input:checked + #ticker {
129
- background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
133
+ background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
130
134
  }
131
135
 
132
136
  input:focus + #ticker {
133
137
  outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
134
- var(--uui-color-focus,#3879ff);
138
+ var(--uui-color-focus,var(--uui-palette-malibu));
135
139
  }
136
140
 
137
141
  :host(:not([disabled])) label:active input:checked + #ticker::before {
@@ -148,26 +152,26 @@ UUICheckboxElement.styles = [
148
152
  :host(:not([pristine])[internals-invalid]) label:hover #ticker,
149
153
  :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
150
154
  :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker {
151
- border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
155
+ border: 1px solid var(--uui-color-danger-standalone,var(--uui-palette-maroon-flush-dark));
152
156
  }
153
157
 
154
158
  :host([disabled]) #ticker {
155
- background-color: var(--uui-color-disabled,#f3f3f5);
159
+ background-color: var(--uui-color-disabled,var(--uui-palette-sand));
156
160
  }
157
161
  :host([disabled]) input:checked + #ticker {
158
- background-color: var(--uui-color-disabled,#f3f3f5);
162
+ background-color: var(--uui-color-disabled,var(--uui-palette-sand));
159
163
  }
160
164
  :host([disabled]) #ticker::before {
161
- background-color: var(--uui-color-disabled,#f3f3f5);
165
+ background-color: var(--uui-color-disabled,var(--uui-palette-sand));
162
166
  }
163
167
  :host([disabled]) #ticker #icon-check {
164
- fill: var(--uui-color-disabled-contrast,#c4c4c4);
168
+ fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
165
169
  }
166
170
  :host([disabled]) label:active #ticker {
167
171
  animation: ${UUIHorizontalShakeAnimationValue};
168
172
  }
169
173
  :host([disabled]) input:checked + #ticker #icon-check {
170
- fill: var(--uui-color-disabled-contrast,#c4c4c4);
174
+ fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
171
175
  }
172
176
  `
173
177
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-checkbox",
3
- "version": "1.2.0",
3
+ "version": "1.3.0-rc.0",
4
4
  "license": "MIT",
5
5
  "keywords": [
6
6
  "Umbraco",
@@ -33,18 +33,18 @@
33
33
  "custom-elements.json"
34
34
  ],
35
35
  "dependencies": {
36
- "@umbraco-ui/uui-base": "1.2.0",
37
- "@umbraco-ui/uui-boolean-input": "1.2.0",
38
- "@umbraco-ui/uui-icon-registry-essential": "1.2.0"
36
+ "@umbraco-ui/uui-base": "1.3.0-rc.0",
37
+ "@umbraco-ui/uui-boolean-input": "1.3.0-rc.0",
38
+ "@umbraco-ui/uui-icon-registry-essential": "1.3.0-rc.0"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
42
- "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
42
+ "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
43
43
  "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
44
44
  },
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
48
  "homepage": "https://uui.umbraco.com/?path=/story/uui-checkbox",
49
- "gitHead": "78ce6df4b259921ed47e25ce10812920f25cbc1c"
49
+ "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
50
50
  }