@descope/web-components-ui 1.0.133 → 1.0.134

package/dist/umd/803.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{constructor(){super()}init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f} \n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n}\n\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n    position: absolute;\n    top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n    background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n    align-self: flex-start;\n    opacity: 0;\n    padding: 0;\n}\n[required] vaadin-checkbox [slot="label"] {\n\tpadding-right: 1em;\n}\nvaadin-checkbox::part(checkbox) {\n\tmargin: 0;\n}\nvaadin-checkbox[focus-ring]::part(checkbox) {\n\tbox-shadow: none;\n}\n\ndescope-boolean-field-internal {\n\t-webkit-mask-image: none;\n\tmin-height: 0;\n\tpadding: 0;\n}\n\n[slot="label"],\nvaadin-checkbox,\nvaadin-checkbox::part(checkbox) {\n\theight: 100%;\n\tcursor: pointer;\n}\n`}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{constructor(){super()}init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f} \n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\n\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n    position: absolute;\n    top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n    background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n    align-self: flex-start;\n    opacity: 0;\n    padding: 0;\n}\n[required] vaadin-checkbox [slot="label"] {\n\tpadding-right: 1em;\n}\nvaadin-checkbox::part(checkbox) {\n\tmargin: 0;\n}\nvaadin-checkbox[focus-ring]::part(checkbox) {\n\tbox-shadow: none;\n}\n\ndescope-boolean-field-internal {\n\t-webkit-mask-image: none;\n\tmin-height: 0;\n\tpadding: 0;\n}\n\n[slot="label"],\nvaadin-checkbox,\nvaadin-checkbox::part(checkbox) {\n\theight: 100%;\n\tcursor: pointer;\n}\n`}}]);

package/dist/umd/boolean-fields-descope-checkbox-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(9241),c=r(818),i=r(6882),n=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:h,checkboxElement:d,checkboxSurface:u,checkboxHiddenLabel:b,label:y,requiredIndicator:x,helperText:f,errorMessage:k}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,l.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,d,y,b],fontFamily:[y,b,f,k],labelTextColor:[{...y,property:"color"},{...x,property:"color"}],labelRequiredIndicator:{...x,property:"content"},labelFontWeight:[{...y,property:"font-weight"},{...b,property:"font-weight"}],labelSpacing:[{...y,property:"left"},{...b,property:"padding-left"}],inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...d,property:"background-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputSize:[{...d,property:"width"},{...y,property:"margin-left"},{...d,property:"height"},{...u,property:"font-size"},{...h,property:"font-size"},{...y,property:"line-height"},{...b,property:"line-height"}]}}),l.e4,l.dj,l.Ae,c.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${i.Z}\n\t\t\t${(0,n.bi)(g.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,g)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(9241),i=r(818),c=r(6882),n=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:u,checkboxHiddenLabel:b,label:y,requiredIndicator:f,helperText:x,errorMessage:k}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,l.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,y,b],fontFamily:[y,b,x,k],labelTextColor:[{...y,property:"color"},{...f,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...f,property:"content"},labelFontWeight:[{...y,property:"font-weight"},{...b,property:"font-weight"}],labelSpacing:[{...y,property:"left"},{...b,property:"padding-left"}],inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...d,property:"font-size"},{...b,property:"line-height"},{...y,property:"margin-left"},{...y,property:"line-height"}]}}),l.e4,l.dj,l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${c.Z}\n\t\t\t${(0,n.bi)(g.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,g)}}]);

package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9203:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>g});var o=r(4567),n=r(2061),c=r(9241),p=r(818),a=r(6882),i=r(4201);const l=(0,o.iY)("switch-toggle"),{host:d,component:s,checkboxElement:h,checkboxSurface:b,checkboxHiddenLabel:k,label:y,requiredIndicator:u,helperText:f,errorMessage:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,n.qC)((0,c.yk)({mappings:{hostWidth:{...d,property:"width"},fontSize:[s,y,k],fontFamily:[y,f,x],trackBorderWidth:{...h,property:"border-width"},trackBorderStyle:{...h,property:"border-style"},trackBorderColor:{...h,property:"border-color"},trackBackgroundColor:{...h,property:"background-color"},trackBorderRadius:{...h,property:"border-radius"},trackWidth:[{...h,property:"width"}],trackHeight:[{...b,property:"font-size"},{...h,property:"height"}],knobSize:[{...b,property:"width"},{...b,property:"height"}],knobTextColor:{...b,property:"color"},knobRadius:{...b,property:"border-radius"},knobTransitionDuration:{...b,property:"transition"},knobColor:{...b,property:"background-color"},knobTopOffset:{...b,property:"top"},knobLeftOffset:{...b,property:"left"},labelSpacing:[{...y,property:"padding-left"},{...k,property:"padding-left"}],labelLineHeight:[{...y,property:"line-height"},{...k,property:"line-height"}],labelFontWeight:[{...y,property:"font-weight"},{...k,property:"font-weight"}],labelTextColor:[{...y,property:"color"},{...u,property:"color"}],labelRequiredIndicator:{...u,property:"content"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),c.e4,c.dj,c.Ae,p.h)((0,c.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n\t\t\t${(0,i.bi)(g.cssVarList)}\n\t\t\tvaadin-text-field::part(label) {\n\t\t\t\tleft: calc(var(${g.cssVarList.trackWidth}) + var(${g.cssVarList.trackBorderWidth}) * 2);\n\t\t\t}\n\t\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t\tvaadin-checkbox[checked]::part(checkbox) {\n\t\t\t\tbackground: none;\n\t\t\t}\n\t\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\t\tposition: absolute;\n\t\t\t\topacity: 1;\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}));r(9515),r(9789),r(6676),customElements.define(l,g)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9203:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>g});var o=r(4567),p=r(2061),a=r(9241),c=r(818),n=r(6882),i=r(4201);const l=(0,o.iY)("switch-toggle"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxHiddenLabel:k,label:y,requiredIndicator:u,helperText:f,errorMessage:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[d,y,k],fontFamily:[y,f,x],trackBorderWidth:{...h,property:"border-width"},trackBorderStyle:{...h,property:"border-style"},trackBorderColor:{...h,property:"border-color"},trackBackgroundColor:{...h,property:"background-color"},trackBorderRadius:{...h,property:"border-radius"},trackWidth:[{...h,property:"width"}],trackHeight:[{...b,property:"font-size"},{...h,property:"height"}],knobSize:[{...b,property:"width"},{...b,property:"height"}],knobTextColor:{...b,property:"color"},knobRadius:{...b,property:"border-radius"},knobTransitionDuration:{...b,property:"transition"},knobColor:{...b,property:"background-color"},knobTopOffset:{...b,property:"top"},knobLeftOffset:{...b,property:"left"},labelSpacing:[{...y,property:"padding-left"},{...k,property:"padding-left"}],labelLineHeight:[{...y,property:"line-height"},{...k,property:"line-height"}],labelFontWeight:[{...y,property:"font-weight"},{...k,property:"font-weight"}],labelTextColor:[{...y,property:"color"},{...u,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...u,property:"content"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),a.e4,a.dj,a.Ae,c.h)((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${n.Z}\n\t\t\t${(0,i.bi)(g.cssVarList)}\n\t\t\tvaadin-text-field::part(label) {\n\t\t\t\tleft: calc(var(${g.cssVarList.trackWidth}) + var(${g.cssVarList.trackBorderWidth}) * 2);\n\t\t\t}\n\t\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\t\tposition: absolute;\n\t\t\t\topacity: 1;\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}));r(9515),r(9789),r(6676),customElements.define(l,g)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/web-components-ui",
-	"version": "1.0.133",
+	"version": "1.0.134",
 	"description": "",
 	"main": "dist/cjs/index.cjs.js",
 	"module": "dist/index.esm.js",

package/src/components/boolean-fields/booleanFieldMixin.js

@@ -29,6 +29,7 @@ export const booleanFieldMixin = (superclass) =>
                     'size',
                     'label',
                     'invalid',
+                    'disabled'
                 ]
             });
 

package/src/components/boolean-fields/commonStyles.js

@@ -9,6 +9,7 @@ ${resetInputFieldDefaultWidth()}
 
 .wrapper {
 	display: flex;
+	box-sizing: border-box;
 }
 
 vaadin-text-field {

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -56,6 +56,7 @@ export const CheckboxClass = compose(
 			labelTextColor: [
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' },
+				{ ...label, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -69,19 +70,26 @@ export const CheckboxClass = compose(
 			],
 			inputValueTextColor: { ...checkboxSurface, property: 'color' },
 			inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+
 			inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+			inputBorderWidth: { ...checkboxElement, property: 'border-width' },
+			inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
+			inputBorderColor: { ...checkboxElement, property: 'border-color' },
+			inputBorderStyle: { ...checkboxElement, property: 'border-style' },
+
 			inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
 			inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
 			inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
 			inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
 			inputSize: [
 				{ ...checkboxElement, property: 'width' },
-				{ ...label, property: 'margin-left' },
 				{ ...checkboxElement, property: 'height' },
 				{ ...checkboxSurface, property: 'font-size' },
 				{ ...component, property: 'font-size' },
+				{ ...checkboxHiddenLabel, property: 'line-height' },
+				{ ...label, property: 'margin-left' },
 				{ ...label, property: 'line-height' },
-				{ ...checkboxHiddenLabel, property: 'line-height' }
 			],
 		},
 	}),

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -88,6 +88,7 @@ export const SwitchToggleClass = compose(
 			labelTextColor: [
 				{ ...label, property: 'color' },
 				{ ...requiredIndicator, property: 'color' },
+				{ ...label, property: '-webkit-text-fill-color' }
 			],
 			labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 			inputOutlineWidth: { ...track, property: 'outline-width' },
@@ -113,9 +114,6 @@ export const SwitchToggleClass = compose(
 			vaadin-checkbox[active]::part(checkbox) {
 				transform: none;
 			}
-			vaadin-checkbox[checked]::part(checkbox) {
-				background: none;
-			}
 			vaadin-checkbox::part(checkbox)::after {
 				position: absolute;
 				opacity: 1;

package/src/theme/components/checkbox.js

@@ -13,22 +13,25 @@ const checkbox = {
 	[vars.labelTextColor]: refs.labelTextColor,
 	[vars.labelRequiredIndicator]: refs.requiredIndicator,
 	[vars.labelFontWeight]: '400',
-	[vars.labelSpacing]: '0.5em',
+	[vars.labelSpacing]: '0.75em',
 	[vars.inputOutlineWidth]: refs.outlineWidth,
 	[vars.inputOutlineOffset]: refs.outlineOffset,
 	[vars.inputOutlineColor]: refs.outlineColor,
 	[vars.inputOutlineStyle]: refs.outlineStyle,
 	[vars.inputBorderRadius]: refs.borderRadius,
-	[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
+	[vars.inputBorderColor]: refs.borderColor,
+	[vars.inputBorderWidth]: refs.borderWidth,
+	[vars.inputBorderStyle]: refs.borderStyle,
+	[vars.inputBackgroundColor]: refs.inputBackgroundColor,
 	[vars.inputSize]: '2em',
 
 	_checked: {
-		[vars.inputBackgroundColor]: globalRefs.colors.primary.main,
-		[vars.inputValueTextColor]: globalRefs.colors.primary.contrast,
+		[vars.inputBackgroundColor]: refs.backgroundColor,
+		[vars.inputValueTextColor]: refs.valueTextColor,
 	},
 
 	_disabled: {
-		[vars.inputBackgroundColor]: globalRefs.colors.surface.main,
+		[vars.labelTextColor]: refs.labelTextColor,
 	},
 };
 

package/src/theme/components/inputWrapper.js

@@ -60,6 +60,7 @@ const [theme, refs, vars] = createHelperVars({
 
     _disabled: {
         labelTextColor: globalRefs.colors.surface.main,
+        borderColor: globalRefs.colors.surface.main,
         valueTextColor: globalRefs.colors.surface.dark,
         placeholderTextColor: globalRefs.colors.surface.dark,
         backgroundColor: globalRefs.colors.surface.main

package/src/theme/components/switchToggle.js

@@ -20,7 +20,7 @@ const switchToggle = {
 
     [vars.trackBorderStyle]: refs.borderStyle,
     [vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
-    [vars.trackBorderColor]: globalRefs.colors.surface.contrast,
+    [vars.trackBorderColor]: refs.borderColor,
     [vars.trackBackgroundColor]: 'none',
     [vars.trackBorderRadius]: globalRefs.radius.md,
     [vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
@@ -42,16 +42,22 @@ const switchToggle = {
     [vars.hostWidth]: refs.width,
 
     _checked: {
-        [vars.trackBorderColor]: globalRefs.colors.primary.main,
+        [vars.trackBorderColor]: refs.borderColor,
+        [vars.trackBackgroundColor]: refs.backgroundColor,
         [vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
-        [vars.knobColor]: globalRefs.colors.primary.main,
+        [vars.knobColor]: refs.valueTextColor,
         [vars.knobTextColor]: refs.valueTextColor,
     },
 
     _disabled: {
-        [vars.knobColor]: globalRefs.colors.surface.main,
+        [vars.knobColor]: globalRefs.colors.surface.light,
         [vars.trackBorderColor]: globalRefs.colors.surface.main,
-        [vars.trackBackgroundColor]: globalRefs.colors.surface.light,
+        [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
+        [vars.labelTextColor]: refs.labelTextColor,
+        _checked: {
+            [vars.knobColor]: globalRefs.colors.surface.light,
+            [vars.trackBackgroundColor]: globalRefs.colors.surface.main,
+        }
     },
 
     _invalid: {