@umbraco-ui/uui-checkbox 0.2.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 (2) hide show
  1. package/lib/index.js +23 -23
  2. package/package.json +5 -5
package/lib/index.js CHANGED
@@ -49,43 +49,43 @@ UUICheckboxElement.styles = [
49
49
  var(--uui-border-radius,3px)
50
50
  );
51
51
 
52
- color: var(--uui-toggle-color, var(--uui-interface-chosen-contrast,#fefefe));
52
+ color: var(--uui-toggle-color, var(--uui-color-selected-contrast,#fff));
53
53
  background-color: var(
54
54
  --uui-toggle-background-color,
55
- var(--uui-interface-surface,#fefefe)
55
+ var(--uui-color-surface,#fff)
56
56
  );
57
57
  border: 1px solid
58
- var(--uui-checkbox-border-color, var(--uui-interface-border,#c4c4c4));
58
+ var(--uui-checkbox-border-color, var(--uui-color-border-standalone,#c2c2c2));
59
59
  font-size: calc(var(--uui-checkbox-size) * 0.7);
60
60
  }
61
61
  label:hover input:not([disabled]) + #ticker {
62
62
  border-color: var(
63
63
  --uui-checkbox-border-color-hover,
64
- var(--uui-interface-border-hover,rgb(179, 179, 179))
64
+ var(--uui-color-border-emphasis,#a1a1a1)
65
65
  );
66
66
  background-color: var(
67
67
  --uui-checkbox-background-color-hover,
68
- var(--uui-interface-surface-hover,rgb(250, 250, 250))
68
+ var(--uui-color-surface-emphasis,rgb(250, 250, 250))
69
69
  );
70
70
  }
71
71
  label:focus #ticker {
72
72
  border-color: var(
73
73
  --uui-checkbox-border-color-focus,
74
- var(--uui-interface-border-focus,rgb(179, 179, 179))
74
+ var(--uui-color-border-emphasis,#a1a1a1)
75
75
  );
76
76
  background-color: var(
77
77
  --uui-checkbox-background-color-focus,
78
- var(--uui-interface-surface-alt-focus,#d8d7d9)
78
+ var(--uui-color-surface-emphasis,rgb(250, 250, 250))
79
79
  );
80
80
  }
81
- input:checked + #ticker {
82
- border-color: var(--uui-interface-chosen,#1b264f);
81
+ input:checked:not([disabled]) + #ticker {
82
+ border-color: var(--uui-color-selected,#3544b1);
83
83
  }
84
84
  label:hover input:checked:not([disabled]) + #ticker {
85
- border-color: var(--uui-interface-chosen-hover,rgb(38, 53, 110));
85
+ border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
86
86
  }
87
87
  label:focus input:checked + #ticker {
88
- border-color: var(--uui-interface-chosen-focus,#1b264f);
88
+ border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
89
89
  }
90
90
 
91
91
  #icon-check {
@@ -95,7 +95,7 @@ UUICheckboxElement.styles = [
95
95
  height: 1em;
96
96
  line-height: 0;
97
97
  transition: fill 120ms, opacity 120ms;
98
- fill: var(--uui-interface-chosen-contrast,#fefefe);
98
+ fill: var(--uui-color-selected-contrast,#fff);
99
99
  opacity: 0;
100
100
  }
101
101
 
@@ -109,13 +109,13 @@ UUICheckboxElement.styles = [
109
109
  border-radius: calc(
110
110
  var(--uui-checkbox-border-radius, var(--uui-border-radius,3px)) * 0.5
111
111
  );
112
- background-color: var(--uui-interface-chosen,#1b264f);
112
+ background-color: var(--uui-color-selected,#3544b1);
113
113
  transition: transform 120ms ease, opacity 120ms, background-color 120ms;
114
114
  transform: scale(0);
115
115
  opacity: 0;
116
116
  }
117
117
  label:hover input:checked:not([disabled]) + #ticker::before {
118
- background-color: var(--uui-interface-chosen-hover,rgb(38, 53, 110));
118
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
119
119
  }
120
120
 
121
121
  input:checked + #ticker::before {
@@ -126,12 +126,12 @@ UUICheckboxElement.styles = [
126
126
  opacity: 1;
127
127
  }
128
128
  label:focus input:checked + #ticker {
129
- background-color: var(--uui-interface-chosen-focus,#1b264f);
129
+ background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
130
130
  }
131
131
 
132
132
  input:focus + #ticker {
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 input:checked + #ticker::before {
@@ -148,26 +148,26 @@ UUICheckboxElement.styles = [
148
148
  :host(:not([pristine])[internals-invalid]) label:hover #ticker,
149
149
  :host(:not([pristine])[internals-invalid]) label:hover input:checked:not([disabled]) + #ticker,
150
150
  :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker {
151
- border: 1px solid var(--uui-look-danger-border,#d42054);
151
+ border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
152
152
  }
153
153
 
154
154
  :host([disabled]) #ticker {
155
- background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
155
+ background-color: var(--uui-color-disabled,#f3f3f5);
156
156
  }
157
157
  :host([disabled]) input:checked + #ticker {
158
- background-color: var(--uui-interface-chosen-disabled,rgb(106, 117, 154));
158
+ background-color: var(--uui-color-disabled,#f3f3f5);
159
159
  }
160
- :host([disabled]) #ticker:after {
161
- background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
160
+ :host([disabled]) #ticker::before {
161
+ background-color: var(--uui-color-disabled,#f3f3f5);
162
162
  }
163
163
  :host([disabled]) #ticker #icon-check {
164
- fill: var(--uui-interface-contrast-disabled,rgb(115, 113, 110));
164
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
165
165
  }
166
166
  :host([disabled]) label:active #ticker {
167
167
  animation: ${UUIHorizontalShakeAnimationValue};
168
168
  }
169
169
  :host([disabled]) input:checked + #ticker #icon-check {
170
- fill: var(--uui-interface-chosen-contrast-disabled,rgb(228, 228, 228));
170
+ fill: var(--uui-color-disabled-contrast,#c4c4c4);
171
171
  }
172
172
  `
173
173
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umbraco-ui/uui-checkbox",
3
- "version": "0.2.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.2.1",
37
- "@umbraco-ui/uui-boolean-input": "0.2.1",
38
- "@umbraco-ui/uui-icon-registry-essential": "0.2.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": "cb61546f85d6c2f122fa8c130409507e8def4bd5"
49
+ "gitHead": "7d7608bf2fb63a8a077fcd8f0346dea73584b878"
50
50
  }