@umbraco-ui/uui-toggle 1.2.1 → 1.3.0-rc.0

package/lib/index.js

@@ -28,6 +28,10 @@ let UUIToggleElement = class extends UUIBooleanInputElement {
     `;
   }
 };
+/**
+ * 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/
+ * @type {boolean}
+ */
 UUIToggleElement.formAssociated = true;
 UUIToggleElement.styles = [
   ...UUIBooleanInputElement.styles,
@@ -69,21 +73,21 @@ UUIToggleElement.styles = [
       label:focus #slider {
         border-color: var(
           --uui-toggle-border-color-focus,
-          var(--uui-color-focus,#3879ff)
+          var(--uui-color-focus,var(--uui-palette-malibu))
         );
         background-color: var(
           --uui-toggle-background-color-focus,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,var(--uui-palette-white-dark))
         );
       }
       input:checked ~ #slider {
-        background-color: var(--uui-color-selected,#3544b1);
+        background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
       }
       label:hover input:checked:not([disabled]) ~ #slider {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
       }
       label:focus input:checked ~ #slider {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
       }
 
       #icon-check,
@@ -99,13 +103,13 @@ UUIToggleElement.styles = [
       #icon-check {
         margin-left: -0.5em;
         left: calc(var(--uui-toggle-size) * 0.5);
-        fill: var(--uui-color-interactive,#1b264f);
+        fill: var(--uui-color-interactive,var(--uui-palette-space-cadet));
       }
 
       #icon-wrong {
         margin-right: -0.5em;
         right: calc(var(--uui-toggle-size) * 0.5);
-        fill: var(--uui-color-interactive,#1b264f);
+        fill: var(--uui-color-interactive,var(--uui-palette-space-cadet));
       }
       input:checked ~ #slider #icon-check {
         fill: var(--uui-color-selected-contrast,#fff);
@@ -131,7 +135,7 @@ UUIToggleElement.styles = [
 
       input:focus ~ #slider {
         outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus,#3879ff);
+          var(--uui-color-focus,var(--uui-palette-malibu));
       }
 
       :host(:not([disabled])) label:active #slider::after {
@@ -140,22 +144,22 @@ UUIToggleElement.styles = [
       }
 
       :host([disabled]) #slider {
-        background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        background-color: var(--uui-color-disabled-standalone,var(--uui-palette-sand-dark));
       }
       :host([disabled]) input:checked ~ #slider {
-        background-color: var(--uui-color-disabled-contrast,#c4c4c4);
+        background-color: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
       }
       :host([disabled]) #slider::after {
-        background-color: var(--uui-color-disabled,#f3f3f5);
+        background-color: var(--uui-color-disabled,var(--uui-palette-sand));
       }
       :host([disabled]) #slider #icon-wrong {
-        fill: var(--uui-color-disabled-contrast,#c4c4c4);
+        fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
       }
       :host([disabled]) label:active #slider {
         animation: ${UUIHorizontalShakeAnimationValue};
       }
       :host([disabled]) input:checked #slider #icon-check {
-        fill: var(--uui-color-disabled-contrast,#c4c4c4);
+        fill: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
       }
 
       :host(:not([pristine]):invalid) #slider,
@@ -163,7 +167,7 @@ UUIToggleElement.styles = [
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) #slider,
       :host(:not([pristine])[internals-invalid]) label:hover #slider {
-        border: 1px solid var(--uui-color-danger-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-danger-standalone,var(--uui-palette-maroon-flush-dark));
       }
     `
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-toggle",
-  "version": "1.2.1",
+  "version": "1.3.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,17 +30,17 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.1",
-    "@umbraco-ui/uui-boolean-input": "1.2.1"
+    "@umbraco-ui/uui-base": "1.3.0-rc.0",
+    "@umbraco-ui/uui-boolean-input": "1.3.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-toggle",
-  "gitHead": "94eb22bee5ff21bac6fadbd78653671279bebe36"
+  "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
 }