@umbraco-ui/uui-toggle 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 +20 -20
  3. package/package.json +4 -4
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
@@ -50,40 +50,40 @@ UUIToggleElement.styles = [
50
50
 
51
51
  background-color: var(
52
52
  --uui-toggle-background-color,
53
- var(--uui-interface-surface-alt,#d8d7d9)
53
+ var(--uui-color-border,#d8d7d9)
54
54
  );
55
55
  border: 1px solid
56
- var(--uui-toggle-border-color, var(--uui-interface-border,#c4c4c4));
56
+ var(--uui-toggle-border-color, var(--uui-color-border-standalone,#c2c2c2));
57
57
  font-size: calc(var(--uui-toggle-size) * 0.6);
58
58
  }
59
59
  label:hover input:not([disabled]) ~ #slider {
60
60
  border-color: var(
61
61
  --uui-toggle-border-color-hover,
62
- var(--uui-interface-border-hover,rgb(179, 179, 179))
62
+ var(--uui-color-border-emphasis,#a1a1a1)
63
63
  );
64
64
  background-color: var(
65
65
  --uui-toggle-background-color-hover,
66
- var(--uui-interface-surface-alt-hover,rgb(200, 200, 200))
66
+ var(--uui-color-border,#d8d7d9)
67
67
  );
68
68
  }
69
69
  label:focus #slider {
70
70
  border-color: var(
71
71
  --uui-toggle-border-color-focus,
72
- var(--uui-interface-border-focus,rgb(179, 179, 179))
72
+ var(--uui-color-focus,#3879ff)
73
73
  );
74
74
  background-color: var(
75
75
  --uui-toggle-background-color-focus,
76
- var(--uui-interface-surface-alt-focus,#d8d7d9)
76
+ var(--uui-color-surface-emphasis,rgb(250, 250, 250))
77
77
  );
78
78
  }
79
79
  input:checked ~ #slider {
80
- background-color: var(--uui-interface-select,#3544b1);
80
+ background-color: var(--uui-color-selected,#3544b1);
81
81
  }
82
82
  label:hover input:checked:not([disabled]) ~ #slider {
83
- background-color: var(--uui-interface-select-hover,rgb(70, 86, 200));
83
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
84
84
  }
85
85
  label:focus input:checked ~ #slider {
86
- background-color: var(--uui-interface-select-focus,#3544b1);
86
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
87
87
  }
88
88
 
89
89
  #icon-check,
@@ -99,16 +99,16 @@ UUIToggleElement.styles = [
99
99
  #icon-check {
100
100
  margin-left: -0.5em;
101
101
  left: calc(var(--uui-toggle-size) * 0.5);
102
- fill: var(--uui-interface-contrast,#060606);
102
+ fill: var(--uui-color-interactive,#1b264f);
103
103
  }
104
104
 
105
105
  #icon-wrong {
106
106
  margin-right: -0.5em;
107
107
  right: calc(var(--uui-toggle-size) * 0.5);
108
- fill: var(--uui-interface-contrast,#060606);
108
+ fill: var(--uui-color-interactive,#1b264f);
109
109
  }
110
110
  input:checked ~ #slider #icon-check {
111
- fill: var(--uui-interface-select-contrast,#fefefe);
111
+ fill: var(--uui-color-selected-contrast,#fff);
112
112
  }
113
113
 
114
114
  #slider::after {
@@ -119,7 +119,7 @@ UUIToggleElement.styles = [
119
119
  width: calc(var(--uui-toggle-size) - 4px);
120
120
  height: calc(var(--uui-toggle-size) - 4px);
121
121
  border-radius: 100px;
122
- background-color: var(--uui-interface-select-contrast,#fefefe);
122
+ background-color: var(--uui-color-selected-contrast,#fff);
123
123
  transition: width 120ms ease, left 120ms ease, transform 120ms ease,
124
124
  background-color 120ms;
125
125
  }
@@ -131,7 +131,7 @@ UUIToggleElement.styles = [
131
131
 
132
132
  input:focus ~ #slider {
133
133
  outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
134
- var(--uui-interface-outline,#3879ff);
134
+ var(--uui-color-focus,#3879ff);
135
135
  }
136
136
 
137
137
  :host(:not([disabled])) label:active #slider::after {
@@ -140,22 +140,22 @@ UUIToggleElement.styles = [
140
140
  }
141
141
 
142
142
  :host([disabled]) #slider {
143
- background-color: var(--uui-interface-surface-alt-disabled,rgb(204, 204, 204));
143
+ background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
144
144
  }
145
145
  :host([disabled]) input:checked ~ #slider {
146
- background-color: var(--uui-interface-select-disabled,rgb(87, 87, 87));
146
+ background-color: var(--uui-color-disabled-contrast,#c4c4c4);
147
147
  }
148
148
  :host([disabled]) #slider::after {
149
- background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
149
+ background-color: var(--uui-color-disabled,#f3f3f5);
150
150
  }
151
151
  :host([disabled]) #slider #icon-wrong {
152
- fill: var(--uui-interface-contrast-disabled,rgb(115, 113, 110));
152
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
153
153
  }
154
154
  :host([disabled]) label:active #slider {
155
155
  animation: ${UUIHorizontalShakeAnimationValue};
156
156
  }
157
157
  :host([disabled]) input:checked #slider #icon-check {
158
- fill: var(--uui-interface-select-contrast-disabled,rgb(228, 228, 228));
158
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
159
159
  }
160
160
 
161
161
  :host(:not([pristine]):invalid) #slider,
@@ -163,7 +163,7 @@ UUIToggleElement.styles = [
163
163
  /* polyfill support */
164
164
  :host(:not([pristine])[internals-invalid]) #slider,
165
165
  :host(:not([pristine])[internals-invalid]) label:hover #slider {
166
- border: 1px solid var(--uui-look-danger-border,#d42054);
166
+ border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
167
167
  }
168
168
  `
169
169
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-toggle",
3
- "version": "0.1.1",
3
+ "version": "1.0.0-alpha.0",
4
4
  "license": "MIT",
5
5
  "keywords": [
6
6
  "Umbraco",
@@ -30,8 +30,8 @@
30
30
  "custom-elements.json"
31
31
  ],
32
32
  "dependencies": {
33
- "@umbraco-ui/uui-base": "0.1.1",
34
- "@umbraco-ui/uui-boolean-input": "0.1.1"
33
+ "@umbraco-ui/uui-base": "1.0.0-alpha.0",
34
+ "@umbraco-ui/uui-boolean-input": "1.0.0-alpha.0"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
42
42
  "access": "public"
43
43
  },
44
44
  "homepage": "https://uui.umbraco.com/?path=/story/uui-toggle",
45
- "gitHead": "d91d346a0659f52de2a3c4746065c554f95e6328"
45
+ "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
46
46
  }