@umbraco-ui/uui-checkbox 0.1.1 → 1.0.0-alpha.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 (3) hide show
  1. package/custom-elements.json +4 -0
  2. package/lib/index.js +24 -23
  3. package/package.json +5 -5
package/custom-elements.json CHANGED
@@ -154,6 +154,10 @@
154
154
  "type": "string",
155
155
  "default": "\"This field is invalid\""
156
156
  },
157
+ {
158
+ "name": "validity",
159
+ "type": "ValidityState"
160
+ },
157
161
  {
158
162
  "name": "validationMessage"
159
163
  },
package/lib/index.js CHANGED
@@ -39,6 +39,7 @@ UUICheckboxElement.styles = [
39
39
  display: flex;
40
40
  align-items: center;
41
41
  justify-content: center;
42
+ flex-shrink: 0;
42
43
 
43
44
  box-sizing: border-box;
44
45
  width: var(--uui-checkbox-size);
@@ -48,43 +49,43 @@ UUICheckboxElement.styles = [
48
49
  var(--uui-border-radius,3px)
49
50
  );
50
51
 
51
- color: var(--uui-toggle-color, var(--uui-interface-chosen-contrast,#fefefe));
52
+ color: var(--uui-toggle-color, var(--uui-color-selected-contrast,#fff));
52
53
  background-color: var(
53
54
  --uui-toggle-background-color,
54
- var(--uui-interface-surface,#fefefe)
55
+ var(--uui-color-surface,#fff)
55
56
  );
56
57
  border: 1px solid
57
- var(--uui-checkbox-border-color, var(--uui-interface-border,#c4c4c4));
58
+ var(--uui-checkbox-border-color, var(--uui-color-border-standalone,#c2c2c2));
58
59
  font-size: calc(var(--uui-checkbox-size) * 0.7);
59
60
  }
60
61
  label:hover input:not([disabled]) + #ticker {
61
62
  border-color: var(
62
63
  --uui-checkbox-border-color-hover,
63
- var(--uui-interface-border-hover,rgb(179, 179, 179))
64
+ var(--uui-color-border-emphasis,#a1a1a1)
64
65
  );
65
66
  background-color: var(
66
67
  --uui-checkbox-background-color-hover,
67
- var(--uui-interface-surface-hover,rgb(250, 250, 250))
68
+ var(--uui-color-surface-emphasis,rgb(250, 250, 250))
68
69
  );
69
70
  }
70
71
  label:focus #ticker {
71
72
  border-color: var(
72
73
  --uui-checkbox-border-color-focus,
73
- var(--uui-interface-border-focus,rgb(179, 179, 179))
74
+ var(--uui-color-border-emphasis,#a1a1a1)
74
75
  );
75
76
  background-color: var(
76
77
  --uui-checkbox-background-color-focus,
77
- var(--uui-interface-surface-alt-focus,#d8d7d9)
78
+ var(--uui-color-surface-emphasis,rgb(250, 250, 250))
78
79
  );
79
80
  }
80
- input:checked + #ticker {
81
- border-color: var(--uui-interface-chosen,#1b264f);
81
+ input:checked:not([disabled]) + #ticker {
82
+ border-color: var(--uui-color-selected,#3544b1);
82
83
  }
83
84
  label:hover input:checked:not([disabled]) + #ticker {
84
- border-color: var(--uui-interface-chosen-hover,rgb(38, 53, 110));
85
+ border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
85
86
  }
86
87
  label:focus input:checked + #ticker {
87
- border-color: var(--uui-interface-chosen-focus,#1b264f);
88
+ border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
88
89
  }
89
90
 
90
91
  #icon-check {
@@ -94,7 +95,7 @@ UUICheckboxElement.styles = [
94
95
  height: 1em;
95
96
  line-height: 0;
96
97
  transition: fill 120ms, opacity 120ms;
97
- fill: var(--uui-interface-chosen-contrast,#fefefe);
98
+ fill: var(--uui-color-selected-contrast,#fff);
98
99
  opacity: 0;
99
100
  }
100
101
 
@@ -108,13 +109,13 @@ UUICheckboxElement.styles = [
108
109
  border-radius: calc(
109
110
  var(--uui-checkbox-border-radius, var(--uui-border-radius,3px)) * 0.5
110
111
  );
111
- background-color: var(--uui-interface-chosen,#1b264f);
112
+ background-color: var(--uui-color-selected,#3544b1);
112
113
  transition: transform 120ms ease, opacity 120ms, background-color 120ms;
113
114
  transform: scale(0);
114
115
  opacity: 0;
115
116
  }
116
117
  label:hover input:checked:not([disabled]) + #ticker::before {
117
- background-color: var(--uui-interface-chosen-hover,rgb(38, 53, 110));
118
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
118
119
  }
119
120
 
120
121
  input:checked + #ticker::before {
@@ -125,12 +126,12 @@ UUICheckboxElement.styles = [
125
126
  opacity: 1;
126
127
  }
127
128
  label:focus input:checked + #ticker {
128
- background-color: var(--uui-interface-chosen-focus,#1b264f);
129
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
129
130
  }
130
131
 
131
132
  input:focus + #ticker {
132
133
  outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
133
- var(--uui-interface-outline,#3879ff);
134
+ var(--uui-color-focus,#3879ff);
134
135
  }
135
136
 
136
137
  :host(:not([disabled])) label:active input:checked + #ticker::before {
@@ -147,26 +148,26 @@ UUICheckboxElement.styles = [
147
148
  :host(:not([pristine])[internals-invalid]) label:hover #ticker,
148
149
  :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
149
150
  :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker {
150
- border: 1px solid var(--uui-look-danger-border,#d42054);
151
+ border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
151
152
  }
152
153
 
153
154
  :host([disabled]) #ticker {
154
- background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
155
+ background-color: var(--uui-color-disabled,#f3f3f5);
155
156
  }
156
157
  :host([disabled]) input:checked + #ticker {
157
- background-color: var(--uui-interface-chosen-disabled,rgb(106, 117, 154));
158
+ background-color: var(--uui-color-disabled,#f3f3f5);
158
159
  }
159
- :host([disabled]) #ticker:after {
160
- background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
160
+ :host([disabled]) #ticker::before {
161
+ background-color: var(--uui-color-disabled,#f3f3f5);
161
162
  }
162
163
  :host([disabled]) #ticker #icon-check {
163
- fill: var(--uui-interface-contrast-disabled,rgb(115, 113, 110));
164
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
164
165
  }
165
166
  :host([disabled]) label:active #ticker {
166
167
  animation: ${UUIHorizontalShakeAnimationValue};
167
168
  }
168
169
  :host([disabled]) input:checked + #ticker #icon-check {
169
- fill: var(--uui-interface-chosen-contrast-disabled,rgb(228, 228, 228));
170
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
170
171
  }
171
172
  `
172
173
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-checkbox",
3
- "version": "0.1.1",
3
+ "version": "1.0.0-alpha.0",
4
4
  "license": "MIT",
5
5
  "keywords": [
6
6
  "Umbraco",
@@ -33,9 +33,9 @@
33
33
  "custom-elements.json"
34
34
  ],
35
35
  "dependencies": {
36
- "@umbraco-ui/uui-base": "0.1.1",
37
- "@umbraco-ui/uui-boolean-input": "0.1.1",
38
- "@umbraco-ui/uui-icon-registry-essential": "0.1.1"
36
+ "@umbraco-ui/uui-base": "1.0.0-alpha.0",
37
+ "@umbraco-ui/uui-boolean-input": "1.0.0-alpha.0",
38
+ "@umbraco-ui/uui-icon-registry-essential": "1.0.0-alpha.0"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "homepage": "https://uui.umbraco.com/?path=/story/uui-checkbox",
49
- "gitHead": "d91d346a0659f52de2a3c4746065c554f95e6328"
49
+ "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
50
50
  }