From 9f9585c13bbf12325fa417c6b99829b36e4624cb Mon Sep 17 00:00:00 2001 From: ashk1996 <125904756+ashk1996@users.noreply.github.com> Date: Mon, 7 Oct 2024 17:35:50 +0200 Subject: [PATCH] fix(ui-library): removed readonly state for checkbox radio radiogroup and toggle switch (#1167) * fix(ui-library): removed readonly state for checkbox radio radiogroup and toggle switch * rmv readonly tokens from checkbox, radio, radiogroup and toggleswitch * fixes radio css --------- Co-authored-by: Lars Erbach --- .../input/tokens/$themes.json | 79 ---------- .../input/tokens/cmp/borders.json | 48 ------ .../input/tokens/cmp/color.json | 110 -------------- .../input/tokens/cmp/sizes.json | 138 ------------------ .../src/components/checkbox/index.css.ts | 98 ++----------- .../src/components/checkbox/index.stories.ts | 35 +---- .../src/components/checkbox/index.test.ts | 1 - .../src/components/checkbox/index.ts | 14 +- .../components/radio-group/index.stories.ts | 25 +--- .../src/components/radio-group/index.test.ts | 1 - .../src/components/radio-group/index.ts | 3 - .../src/components/radio/index.css.ts | 51 +------ .../src/components/radio/index.stories.ts | 25 +--- .../src/components/radio/index.test.ts | 1 - .../ui-library/src/components/radio/index.ts | 4 - .../src/components/toggle-switch/index.css.ts | 103 +------------ .../components/toggle-switch/index.stories.ts | 42 +----- .../components/toggle-switch/index.test.ts | 1 - .../src/components/toggle-switch/index.ts | 16 +- 19 files changed, 36 insertions(+), 759 deletions(-) diff --git a/packages/figma-design-tokens/input/tokens/$themes.json b/packages/figma-design-tokens/input/tokens/$themes.json index 4c49cff4e..f7eb3a8b6 100644 --- a/packages/figma-design-tokens/input/tokens/$themes.json +++ b/packages/figma-design-tokens/input/tokens/$themes.json @@ -189,42 +189,36 @@ "cmp.checkbox.control.container.bgcolor.active.pressed": "7a3585f9701fd571f19d4cd94fc3be1bafd03c41", "cmp.checkbox.control.container.bgcolor.active.focus": "19e45f56ed05c96788b5c3dcfec858e482b874ea", "cmp.checkbox.control.container.bgcolor.active.disabled": "e8bbe98e95bdf29892f34541c77e44a77b3750b4", - "cmp.checkbox.control.container.bgcolor.active.readonly": "32b9f9cf43c0fcb881184b7e7e82c2b7cbddb4cd", "cmp.checkbox.control.container.bgcolor.active.error": "1f68e766dce3df84d2e912600f960f1dcf6ac889", "cmp.checkbox.control.container.bgcolor.inactive.rest": "b1d1c1bc2cf927c6b01090711e5885c81c216a9e", "cmp.checkbox.control.container.bgcolor.inactive.hover": "76a2be5cb610730965f9c2c33f3a619ace4068af", "cmp.checkbox.control.container.bgcolor.inactive.pressed": "2dbc64b42f3be7a77fdff7d11e81b7218956a5fa", "cmp.checkbox.control.container.bgcolor.inactive.focus": "5a2800b98c24cb57e3b62466e6b46d8c3f01c8f1", "cmp.checkbox.control.container.bgcolor.inactive.disabled": "b9aafbdbb9f2063b93b9198f081f628ca939a9b6", - "cmp.checkbox.control.container.bgcolor.inactive.readonly": "93b23f5023ff0b7eec1ae08360bd3e1969cfdbf7", "cmp.checkbox.control.container.bgcolor.inactive.error": "3a8ab453c0a15b4a66c340b0046bc110e2e35ba5", "cmp.checkbox.control.container.bordercolor.active.rest": "606570913e342c53eb9eee9d21e6e517672d1b67", "cmp.checkbox.control.container.bordercolor.active.hover": "e98d8bfc705718b52cd69c96d10c56552d2e1c3e", "cmp.checkbox.control.container.bordercolor.active.pressed": "a8c226ea4beae5f7c0769faf1a713512a45525a7", "cmp.checkbox.control.container.bordercolor.active.focus": "51b6c882bae3e81851927a7726bb012961234bd7", "cmp.checkbox.control.container.bordercolor.active.disabled": "b448906885abcc4a5c49e65d37c8cd50559c690c", - "cmp.checkbox.control.container.bordercolor.active.readonly": "8ddfc96dfa1e60bba639137df98e4d9a2975a6d2", "cmp.checkbox.control.container.bordercolor.active.error": "574cadb6cab91a9f3acd5ec6a0a5744d248ffeea", "cmp.checkbox.control.container.bordercolor.inactive.rest": "fb52fd92da0205638d9f985d9528b042edada2e6", "cmp.checkbox.control.container.bordercolor.inactive.hover": "00c5d71748489affb1c7540bdd4be47e1cdde265", "cmp.checkbox.control.container.bordercolor.inactive.pressed": "2db10b610f342b63ef96d50cf1e2aae4773097cb", "cmp.checkbox.control.container.bordercolor.inactive.focus": "5b80cafb98abb41c370dd1176fdd742f9d65d851", "cmp.checkbox.control.container.bordercolor.inactive.disabled": "7ae35a92456aaf944342d68c35e2ce1a95ab609d", - "cmp.checkbox.control.container.bordercolor.inactive.readonly": "2a5c5c8b7623585aa3a9186602dc992dc310d26a", "cmp.checkbox.control.container.bordercolor.inactive.error": "d40be97a82afed1e392540907d90890e4d05ab2d", "cmp.checkbox.control.icon.iconcolor.active.rest": "a824988aa9c56b3ebbb41874f3da89f193cf0d2d", "cmp.checkbox.control.icon.iconcolor.active.hover": "4bb58beda2d11d8f258ca44895d7a4ebad6aea89", "cmp.checkbox.control.icon.iconcolor.active.pressed": "e9698b3daf51a6e5186333c04c0d2313e0d7a1c3", "cmp.checkbox.control.icon.iconcolor.active.focus": "eb350aa18bd705a45f338aaedec994ae47266b1a", "cmp.checkbox.control.icon.iconcolor.active.disabled": "80fbac5e4df720a77e0256c9badc0812a7feb27e", - "cmp.checkbox.control.icon.iconcolor.active.readonly": "c9372be8677ac963f8f5ebaf404e8dd7b638613e", "cmp.checkbox.control.icon.iconcolor.active.error": "3a209de072ee7e84435fcecaf0af81bc7b62a078", "cmp.checkbox.control.icon.iconcolor.inactive.rest": "b785b58a45a6eec59fe2aae6070794d5404d2606", "cmp.checkbox.control.icon.iconcolor.inactive.hover": "07d8bd1bf5a402dc88eaa99348533d5f4b2ca255", "cmp.checkbox.control.icon.iconcolor.inactive.pressed": "6b8cd922c7a462134945fa09362e75e20adb0e7d", "cmp.checkbox.control.icon.iconcolor.inactive.focus": "f03f96420d5e5d861bdaca12dfd2598aa8f08590", "cmp.checkbox.control.icon.iconcolor.inactive.disabled": "6430521c83f96e7f2aa976e5c8c96145a556377b", - "cmp.checkbox.control.icon.iconcolor.inactive.readonly": "efd79399338d577a61d5083f4880de13f2a9eaf1", "cmp.checkbox.control.icon.iconcolor.inactive.error": "76d901b6f4ede39a0edcb8ed8207e2a049237317", "cmp.counter.container.bordercolor.neutral": "b409ba024bdebd19f0b6817919ab46f5d490c331", "cmp.counter.container.bordercolor.warning": "0aa8268ef5555e5cf8dbfb8d4dc45d839d256756", @@ -320,46 +314,39 @@ "cmp.radio.control.container.bgcolor.inactive.pressed": "3f31b079645c1911b6cb10bec66e4d051e18a9dd", "cmp.radio.control.container.bgcolor.inactive.focus": "681f6aea73ffb0a64d5a27a400e78af10f867693", "cmp.radio.control.container.bgcolor.inactive.disabled": "27699aa29201314e03fcef39c1041b027efc9f67", - "cmp.radio.control.container.bgcolor.inactive.readonly": "8559e6508993b4a54ee7de2ee757f48339a2c6f3", "cmp.radio.control.container.bgcolor.inactive.error": "2d62e426e189b472a73cb32c4fa57142656af150", "cmp.radio.control.container.bgcolor.active.rest": "b9094c549c2988389bcf422d2991b339193f052d", "cmp.radio.control.container.bgcolor.active.hover": "1216b8081f03b110d14b29bf59737fec2ab45595", "cmp.radio.control.container.bgcolor.active.pressed": "938e611719c333bcae7c406c253abed45d888480", "cmp.radio.control.container.bgcolor.active.focus": "79c269cf242dd59e6ea86ea57d655b052e5b708b", "cmp.radio.control.container.bgcolor.active.disabled": "5990061c1bd51bd374a8f1c48884757fa3ac4dcf", - "cmp.radio.control.container.bgcolor.active.readonly": "ed093d0a87223658079caaa192f25d855249a246", "cmp.radio.control.container.bgcolor.active.error": "232d18137807a7f0125a3539d80ee4ba3fc354bc", "cmp.radio.control.container.bordercolor.inactive.rest": "a11e5a2beecd0d65a873f1a7cb3496360034fd7d", "cmp.radio.control.container.bordercolor.inactive.hover": "34edbbc613e28b61fe60d0d63772bf6a491dba88", "cmp.radio.control.container.bordercolor.inactive.pressed": "d1d43f95fd1b2929151b90beca3ce32947713903", "cmp.radio.control.container.bordercolor.inactive.focus": "813c97e0c9c24ad53c08d8443315df8009d88da3", "cmp.radio.control.container.bordercolor.inactive.disabled": "03d8643997cb4a831b308d3dbdc0ac6b49f8aeac", - "cmp.radio.control.container.bordercolor.inactive.readonly": "e73b7c239b846b5c1593dc57640f5e15f7d58fe1", "cmp.radio.control.container.bordercolor.inactive.error": "509087e5302cdd896744a3e644cb81fedbb851e4", "cmp.radio.control.container.bordercolor.active.rest": "bca00270503a80433ab9cd665d8d0e7cb1e7b43e", "cmp.radio.control.container.bordercolor.active.hover": "a4fbdc1d729b42ef2c42149cc1724bd9ae7b4730", "cmp.radio.control.container.bordercolor.active.pressed": "f5e78507f7735c105dc5f61dd1a94d8dbc0fc011", "cmp.radio.control.container.bordercolor.active.focus": "5c850a62ae01dd8e354632a01048700978d15c4b", "cmp.radio.control.container.bordercolor.active.disabled": "ce062852599cbbf1654dfa32d6f124be9b32d2a8", - "cmp.radio.control.container.bordercolor.active.readonly": "9ed44e8ad00363cd1de1113f79709e0d4e759711", "cmp.radio.control.container.bordercolor.active.error": "54c9a99aaf948e2ea0ec4bc404878f7f27305aab", "cmp.radio.control.icon.iconcolor.inactive.rest": "c816208cb4b5349afa75f3fd952b74bc07d9788f", "cmp.radio.control.icon.iconcolor.inactive.hover": "f71311deac58418d6b1ddc6578190f79ce0dd0d8", "cmp.radio.control.icon.iconcolor.inactive.pressed": "e335602f640439d5f69e72eb5cd2ae5283b77fa1", "cmp.radio.control.icon.iconcolor.inactive.focus": "ae6d65bb201e95f1ad650626f2fabc2d0fea9555", "cmp.radio.control.icon.iconcolor.inactive.disabled": "1170f067be57089a3baa729682e9a6ac896d9d99", - "cmp.radio.control.icon.iconcolor.inactive.readonly": "85567016371f987733ecc682459ac8c57db6ace5", "cmp.radio.control.icon.iconcolor.inactive.error": "ac42cb1dbef127282cfd603e9bc494241c5586e3", "cmp.radio.control.icon.iconcolor.active.rest": "70160e6c6b15b23773d913e0987e7f24fcff55c9", "cmp.radio.control.icon.iconcolor.active.hover": "5dd6a6d06bab84a9b21e7947a1590b25e273f276", "cmp.radio.control.icon.iconcolor.active.pressed": "b806cdf31875c7306914a3e234c0e0daae89f6d1", "cmp.radio.control.icon.iconcolor.active.focus": "e556259b821f1acef4a550477ac6138a236beeee", "cmp.radio.control.icon.iconcolor.active.disabled": "75fe02365dd324125f46c00d7ff503798f3d0554", - "cmp.radio.control.icon.iconcolor.active.readonly": "c802da6352ec17f824bfb012b647f8cfc368f5db", "cmp.radio.control.icon.iconcolor.active.error": "998eef1d94cc5a6da825901ee91ba7532c0f95cf", "cmp.radiogroup.legend.textcolor.default": "21b1262bd8f95689e2af4769277546eac028a084", "cmp.radiogroup.legend.textcolor.disabled": "58758fa3762adf324773432eeaad9adc79b66878", - "cmp.radiogroup.legend.textcolor.readonly": "8695692900d90df16422dbe74264bb95ad6f0ebd", "cmp.radiogroup.legend.textcolor.error": "5dac9fc6a205193aad9fbe354561b15274c17289", "cmp.slider.thumb.shape.bgcolor.rest": "15b7a9e0dba1870ba1baf40552d69a347e07cf03", "cmp.slider.thumb.shape.bgcolor.hover": "a5a1435c8311db3fc83ca8025bfeff7f3cf06390", @@ -447,61 +434,51 @@ "cmp.toggleswitch.control.container.bgcolor.inactive.pressed": "97e0078811617deef8f54fa406510da51fc8b61e", "cmp.toggleswitch.control.container.bgcolor.inactive.focus": "f73e3caa32fb6fa4d77eaa54d62db1d314bbd2c1", "cmp.toggleswitch.control.container.bgcolor.inactive.disabled": "ea360115f581771b0efa33ba5451c1d50e75a831", - "cmp.toggleswitch.control.container.bgcolor.inactive.readonly": "3b49f6079bd23da26123a4d036bc55da27956533", "cmp.toggleswitch.control.container.bgcolor.active.rest": "d5b896f4f0a8833d12d5a094af4e31f0aa6352a5", "cmp.toggleswitch.control.container.bgcolor.active.hover": "7cb25cd82534c545194ff4ca9e88f88f267e7862", "cmp.toggleswitch.control.container.bgcolor.active.pressed": "13941521ee64a437d8ad91c7832c878aeb17ec6e", "cmp.toggleswitch.control.container.bgcolor.active.focus": "604d901f861cd135e1d16959e4f940c1ee5276bc", "cmp.toggleswitch.control.container.bgcolor.active.disabled": "49c60bc581582277c2ae54fcf640de722fe61e3a", - "cmp.toggleswitch.control.container.bgcolor.active.readonly": "bbdf7c3d5bbb576b894edbec0d4cf0c1c5c8ca61", "cmp.toggleswitch.control.container.bordercolor.inactive.rest": "10f529f8bcec3d422319a3290fb789496b81b79f", "cmp.toggleswitch.control.container.bordercolor.inactive.hover": "976b89eb821f529495e543c371921c802e341b97", "cmp.toggleswitch.control.container.bordercolor.inactive.pressed": "3b2f8d5cfaa645f3d1b68c11913747e6193a7ba4", "cmp.toggleswitch.control.container.bordercolor.inactive.focus": "697595344af0e16c5ee2f8f8f71013c3ef55737d", "cmp.toggleswitch.control.container.bordercolor.inactive.disabled": "0b1567050298917cce39d5228d95bee27a20c130", - "cmp.toggleswitch.control.container.bordercolor.inactive.readonly": "02242b3487ff40edf6f243d0642a5b7053805719", "cmp.toggleswitch.control.container.bordercolor.active.rest": "5d0f015707349a8f8f8bd473568f5bac841faa0d", "cmp.toggleswitch.control.container.bordercolor.active.hover": "29b08b729fc7ad520e34be2338981bcc916da38b", "cmp.toggleswitch.control.container.bordercolor.active.pressed": "6fe87093dbffded2cf5789483ba093d0861dd744", "cmp.toggleswitch.control.container.bordercolor.active.focus": "304df7c862a8727af1671a20437a87225b2983b0", "cmp.toggleswitch.control.container.bordercolor.active.disabled": "ccdf257bb167bc6a76ada213ae6747d12eee6b44", - "cmp.toggleswitch.control.container.bordercolor.active.readonly": "cd6cc9789e3c55ada13d5396dd89b3d14e000f25", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.rest": "7cc414e0f8aba835771d0c8845f8f69d1de28006", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.hover": "34f0a942290252d8e545a8be0e520908998ff5e6", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.pressed": "f9dd66f4962a167bae82da9871c7a381425f4b3d", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.focus": "ba4ad810f1d7e1a779ac63c4ce266dadebff289e", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.disabled": "5e87a81461520caabdb096764ffc45cf09a65cb1", - "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.readonly": "96fae7a5e9bb18a9681cef9085cf4e410c686ed7", "cmp.toggleswitch.control.ay11icon.iconcolor.active.rest": "b4163c3b03a0a4b259ee0a3b55fbaad2ef47db3c", "cmp.toggleswitch.control.ay11icon.iconcolor.active.hover": "eb51490706a2da490e7f09c4239d09355c1ad621", "cmp.toggleswitch.control.ay11icon.iconcolor.active.pressed": "c8fe1f22a3f6ddc956b6a3520757749bb79cb58e", "cmp.toggleswitch.control.ay11icon.iconcolor.active.focus": "1db2e9ce1b62d2f7e23d943ab1fbd564d6447513", "cmp.toggleswitch.control.ay11icon.iconcolor.active.disabled": "828a0618e64d7641d4266c538f5c9bf97e113983", - "cmp.toggleswitch.control.ay11icon.iconcolor.active.readonly": "758f8212a11c381374ff8ffcff9d2a9d8f75a8e6", "cmp.toggleswitch.control.knob.bgcolor.inactive.rest": "c01b777eed1f5f16d69ae9fb745fc589a8cfe25a", "cmp.toggleswitch.control.knob.bgcolor.inactive.hover": "44b04897025dd8bf2993945e835b78f347f9079d", "cmp.toggleswitch.control.knob.bgcolor.inactive.pressed": "666a2d0fcdf822bd13cee1fa94686a29bf07bd99", "cmp.toggleswitch.control.knob.bgcolor.inactive.focus": "04f0f657b04575058ae9cae96b5217b8f433fd76", "cmp.toggleswitch.control.knob.bgcolor.inactive.disabled": "fbe1825d9752161b9ba3ea82c74c89aaafcbf83a", - "cmp.toggleswitch.control.knob.bgcolor.inactive.readonly": "a34d93792897690817fff00ca7f9ca01797756a1", "cmp.toggleswitch.control.knob.bgcolor.active.rest": "8bf5c6ea5789a315ac0e64d4517629e52e33fe49", "cmp.toggleswitch.control.knob.bgcolor.active.hover": "e5bd41ad6d2f5a4c81a184cdf22888ac739352ce", "cmp.toggleswitch.control.knob.bgcolor.active.pressed": "f797948ffb03f067b83a7fdc4927d4882bed3c3d", "cmp.toggleswitch.control.knob.bgcolor.active.focus": "7e4ac0ec51f592e909337494ab698324c55bbf99", "cmp.toggleswitch.control.knob.bgcolor.active.disabled": "c67783e8a8d9c5aa76e67051e14abd1cc1c58f50", - "cmp.toggleswitch.control.knob.bgcolor.active.readonly": "d388bf7a591fcd1a3e6dea963bbbeb4e57867d0a", "cmp.toggleswitch.control.knob.bordercolor.inactive.rest": "053c52fe1c7dfb28565ca810fba2dd9e3eb97331", "cmp.toggleswitch.control.knob.bordercolor.inactive.hover": "ea7bdbde9a650f1fd33b7ebbeb155262c265bbba", "cmp.toggleswitch.control.knob.bordercolor.inactive.pressed": "53f803081ff4aaef6585bb64ee3aa249c7c7ab86", "cmp.toggleswitch.control.knob.bordercolor.inactive.focus": "21a72fe416da4e71f19b185c88a536818a890589", "cmp.toggleswitch.control.knob.bordercolor.inactive.disabled": "dc69ad83d615ac9613f44bf03f95bd199f58ec0a", - "cmp.toggleswitch.control.knob.bordercolor.inactive.readonly": "8db2ce8ad52104faf020cb984f3ddd672552b79b", "cmp.toggleswitch.control.knob.bordercolor.active.rest": "8ba4b8756c0ec9a41999f59b2a8e8927b842b08a", "cmp.toggleswitch.control.knob.bordercolor.active.hover": "4d11cf2b0364104e85dc79f83df89f3600659ed0", "cmp.toggleswitch.control.knob.bordercolor.active.pressed": "0f329568e12e11c278f4e835745b0706bf537864", "cmp.toggleswitch.control.knob.bordercolor.active.focus": "25504006a23ed6bc211749f6e27a850e26d55dc6", "cmp.toggleswitch.control.knob.bordercolor.active.disabled": "88c48873b5119fe291bed52675ec67d35199da23", - "cmp.toggleswitch.control.knob.bordercolor.active.readonly": "3cad88aef941e1ba84c4189bce98b921bc437450", "sem.buttons.container.bgcolor.cta.rest": "5b5a5b2bdfe49d6c9ec8bf28b0713ad2f5e8fa85", "sem.buttons.container.bgcolor.cta.hover": "916656eff1dfc6ec391cc11c464a7a73608c2b7f", "sem.buttons.container.bgcolor.cta.pressed": "976bec3c7f47a0d42ab69b160679b6ee622ef3f2", @@ -963,42 +940,36 @@ "cmp.checkbox.control.container.bgcolor.active.pressed": "7a3585f9701fd571f19d4cd94fc3be1bafd03c41", "cmp.checkbox.control.container.bgcolor.active.focus": "19e45f56ed05c96788b5c3dcfec858e482b874ea", "cmp.checkbox.control.container.bgcolor.active.disabled": "e8bbe98e95bdf29892f34541c77e44a77b3750b4", - "cmp.checkbox.control.container.bgcolor.active.readonly": "32b9f9cf43c0fcb881184b7e7e82c2b7cbddb4cd", "cmp.checkbox.control.container.bgcolor.active.error": "1f68e766dce3df84d2e912600f960f1dcf6ac889", "cmp.checkbox.control.container.bgcolor.inactive.rest": "b1d1c1bc2cf927c6b01090711e5885c81c216a9e", "cmp.checkbox.control.container.bgcolor.inactive.hover": "76a2be5cb610730965f9c2c33f3a619ace4068af", "cmp.checkbox.control.container.bgcolor.inactive.pressed": "2dbc64b42f3be7a77fdff7d11e81b7218956a5fa", "cmp.checkbox.control.container.bgcolor.inactive.focus": "5a2800b98c24cb57e3b62466e6b46d8c3f01c8f1", "cmp.checkbox.control.container.bgcolor.inactive.disabled": "b9aafbdbb9f2063b93b9198f081f628ca939a9b6", - "cmp.checkbox.control.container.bgcolor.inactive.readonly": "93b23f5023ff0b7eec1ae08360bd3e1969cfdbf7", "cmp.checkbox.control.container.bgcolor.inactive.error": "3a8ab453c0a15b4a66c340b0046bc110e2e35ba5", "cmp.checkbox.control.container.bordercolor.active.rest": "606570913e342c53eb9eee9d21e6e517672d1b67", "cmp.checkbox.control.container.bordercolor.active.hover": "e98d8bfc705718b52cd69c96d10c56552d2e1c3e", "cmp.checkbox.control.container.bordercolor.active.pressed": "a8c226ea4beae5f7c0769faf1a713512a45525a7", "cmp.checkbox.control.container.bordercolor.active.focus": "51b6c882bae3e81851927a7726bb012961234bd7", "cmp.checkbox.control.container.bordercolor.active.disabled": "b448906885abcc4a5c49e65d37c8cd50559c690c", - "cmp.checkbox.control.container.bordercolor.active.readonly": "8ddfc96dfa1e60bba639137df98e4d9a2975a6d2", "cmp.checkbox.control.container.bordercolor.active.error": "574cadb6cab91a9f3acd5ec6a0a5744d248ffeea", "cmp.checkbox.control.container.bordercolor.inactive.rest": "fb52fd92da0205638d9f985d9528b042edada2e6", "cmp.checkbox.control.container.bordercolor.inactive.hover": "00c5d71748489affb1c7540bdd4be47e1cdde265", "cmp.checkbox.control.container.bordercolor.inactive.pressed": "2db10b610f342b63ef96d50cf1e2aae4773097cb", "cmp.checkbox.control.container.bordercolor.inactive.focus": "5b80cafb98abb41c370dd1176fdd742f9d65d851", "cmp.checkbox.control.container.bordercolor.inactive.disabled": "7ae35a92456aaf944342d68c35e2ce1a95ab609d", - "cmp.checkbox.control.container.bordercolor.inactive.readonly": "2a5c5c8b7623585aa3a9186602dc992dc310d26a", "cmp.checkbox.control.container.bordercolor.inactive.error": "d40be97a82afed1e392540907d90890e4d05ab2d", "cmp.checkbox.control.icon.iconcolor.active.rest": "a824988aa9c56b3ebbb41874f3da89f193cf0d2d", "cmp.checkbox.control.icon.iconcolor.active.hover": "4bb58beda2d11d8f258ca44895d7a4ebad6aea89", "cmp.checkbox.control.icon.iconcolor.active.pressed": "e9698b3daf51a6e5186333c04c0d2313e0d7a1c3", "cmp.checkbox.control.icon.iconcolor.active.focus": "eb350aa18bd705a45f338aaedec994ae47266b1a", "cmp.checkbox.control.icon.iconcolor.active.disabled": "80fbac5e4df720a77e0256c9badc0812a7feb27e", - "cmp.checkbox.control.icon.iconcolor.active.readonly": "c9372be8677ac963f8f5ebaf404e8dd7b638613e", "cmp.checkbox.control.icon.iconcolor.active.error": "3a209de072ee7e84435fcecaf0af81bc7b62a078", "cmp.checkbox.control.icon.iconcolor.inactive.rest": "b785b58a45a6eec59fe2aae6070794d5404d2606", "cmp.checkbox.control.icon.iconcolor.inactive.hover": "07d8bd1bf5a402dc88eaa99348533d5f4b2ca255", "cmp.checkbox.control.icon.iconcolor.inactive.pressed": "6b8cd922c7a462134945fa09362e75e20adb0e7d", "cmp.checkbox.control.icon.iconcolor.inactive.focus": "f03f96420d5e5d861bdaca12dfd2598aa8f08590", "cmp.checkbox.control.icon.iconcolor.inactive.disabled": "6430521c83f96e7f2aa976e5c8c96145a556377b", - "cmp.checkbox.control.icon.iconcolor.inactive.readonly": "efd79399338d577a61d5083f4880de13f2a9eaf1", "cmp.checkbox.control.icon.iconcolor.inactive.error": "76d901b6f4ede39a0edcb8ed8207e2a049237317", "cmp.counter.container.bordercolor.neutral": "b409ba024bdebd19f0b6817919ab46f5d490c331", "cmp.counter.container.bordercolor.warning": "0aa8268ef5555e5cf8dbfb8d4dc45d839d256756", @@ -1094,46 +1065,39 @@ "cmp.radio.control.container.bgcolor.inactive.pressed": "3f31b079645c1911b6cb10bec66e4d051e18a9dd", "cmp.radio.control.container.bgcolor.inactive.focus": "681f6aea73ffb0a64d5a27a400e78af10f867693", "cmp.radio.control.container.bgcolor.inactive.disabled": "27699aa29201314e03fcef39c1041b027efc9f67", - "cmp.radio.control.container.bgcolor.inactive.readonly": "8559e6508993b4a54ee7de2ee757f48339a2c6f3", "cmp.radio.control.container.bgcolor.inactive.error": "2d62e426e189b472a73cb32c4fa57142656af150", "cmp.radio.control.container.bgcolor.active.rest": "b9094c549c2988389bcf422d2991b339193f052d", "cmp.radio.control.container.bgcolor.active.hover": "1216b8081f03b110d14b29bf59737fec2ab45595", "cmp.radio.control.container.bgcolor.active.pressed": "938e611719c333bcae7c406c253abed45d888480", "cmp.radio.control.container.bgcolor.active.focus": "79c269cf242dd59e6ea86ea57d655b052e5b708b", "cmp.radio.control.container.bgcolor.active.disabled": "5990061c1bd51bd374a8f1c48884757fa3ac4dcf", - "cmp.radio.control.container.bgcolor.active.readonly": "ed093d0a87223658079caaa192f25d855249a246", "cmp.radio.control.container.bgcolor.active.error": "232d18137807a7f0125a3539d80ee4ba3fc354bc", "cmp.radio.control.container.bordercolor.inactive.rest": "a11e5a2beecd0d65a873f1a7cb3496360034fd7d", "cmp.radio.control.container.bordercolor.inactive.hover": "34edbbc613e28b61fe60d0d63772bf6a491dba88", "cmp.radio.control.container.bordercolor.inactive.pressed": "d1d43f95fd1b2929151b90beca3ce32947713903", "cmp.radio.control.container.bordercolor.inactive.focus": "813c97e0c9c24ad53c08d8443315df8009d88da3", "cmp.radio.control.container.bordercolor.inactive.disabled": "03d8643997cb4a831b308d3dbdc0ac6b49f8aeac", - "cmp.radio.control.container.bordercolor.inactive.readonly": "e73b7c239b846b5c1593dc57640f5e15f7d58fe1", "cmp.radio.control.container.bordercolor.inactive.error": "509087e5302cdd896744a3e644cb81fedbb851e4", "cmp.radio.control.container.bordercolor.active.rest": "bca00270503a80433ab9cd665d8d0e7cb1e7b43e", "cmp.radio.control.container.bordercolor.active.hover": "a4fbdc1d729b42ef2c42149cc1724bd9ae7b4730", "cmp.radio.control.container.bordercolor.active.pressed": "f5e78507f7735c105dc5f61dd1a94d8dbc0fc011", "cmp.radio.control.container.bordercolor.active.focus": "5c850a62ae01dd8e354632a01048700978d15c4b", "cmp.radio.control.container.bordercolor.active.disabled": "ce062852599cbbf1654dfa32d6f124be9b32d2a8", - "cmp.radio.control.container.bordercolor.active.readonly": "9ed44e8ad00363cd1de1113f79709e0d4e759711", "cmp.radio.control.container.bordercolor.active.error": "54c9a99aaf948e2ea0ec4bc404878f7f27305aab", "cmp.radio.control.icon.iconcolor.inactive.rest": "c816208cb4b5349afa75f3fd952b74bc07d9788f", "cmp.radio.control.icon.iconcolor.inactive.hover": "f71311deac58418d6b1ddc6578190f79ce0dd0d8", "cmp.radio.control.icon.iconcolor.inactive.pressed": "e335602f640439d5f69e72eb5cd2ae5283b77fa1", "cmp.radio.control.icon.iconcolor.inactive.focus": "ae6d65bb201e95f1ad650626f2fabc2d0fea9555", "cmp.radio.control.icon.iconcolor.inactive.disabled": "1170f067be57089a3baa729682e9a6ac896d9d99", - "cmp.radio.control.icon.iconcolor.inactive.readonly": "85567016371f987733ecc682459ac8c57db6ace5", "cmp.radio.control.icon.iconcolor.inactive.error": "ac42cb1dbef127282cfd603e9bc494241c5586e3", "cmp.radio.control.icon.iconcolor.active.rest": "70160e6c6b15b23773d913e0987e7f24fcff55c9", "cmp.radio.control.icon.iconcolor.active.hover": "5dd6a6d06bab84a9b21e7947a1590b25e273f276", "cmp.radio.control.icon.iconcolor.active.pressed": "b806cdf31875c7306914a3e234c0e0daae89f6d1", "cmp.radio.control.icon.iconcolor.active.focus": "e556259b821f1acef4a550477ac6138a236beeee", "cmp.radio.control.icon.iconcolor.active.disabled": "75fe02365dd324125f46c00d7ff503798f3d0554", - "cmp.radio.control.icon.iconcolor.active.readonly": "c802da6352ec17f824bfb012b647f8cfc368f5db", "cmp.radio.control.icon.iconcolor.active.error": "998eef1d94cc5a6da825901ee91ba7532c0f95cf", "cmp.radiogroup.legend.textcolor.default": "21b1262bd8f95689e2af4769277546eac028a084", "cmp.radiogroup.legend.textcolor.disabled": "58758fa3762adf324773432eeaad9adc79b66878", - "cmp.radiogroup.legend.textcolor.readonly": "8695692900d90df16422dbe74264bb95ad6f0ebd", "cmp.radiogroup.legend.textcolor.error": "5dac9fc6a205193aad9fbe354561b15274c17289", "cmp.slider.thumb.shape.bgcolor.rest": "15b7a9e0dba1870ba1baf40552d69a347e07cf03", "cmp.slider.thumb.shape.bgcolor.hover": "a5a1435c8311db3fc83ca8025bfeff7f3cf06390", @@ -1221,61 +1185,51 @@ "cmp.toggleswitch.control.container.bgcolor.inactive.pressed": "97e0078811617deef8f54fa406510da51fc8b61e", "cmp.toggleswitch.control.container.bgcolor.inactive.focus": "f73e3caa32fb6fa4d77eaa54d62db1d314bbd2c1", "cmp.toggleswitch.control.container.bgcolor.inactive.disabled": "ea360115f581771b0efa33ba5451c1d50e75a831", - "cmp.toggleswitch.control.container.bgcolor.inactive.readonly": "3b49f6079bd23da26123a4d036bc55da27956533", "cmp.toggleswitch.control.container.bgcolor.active.rest": "d5b896f4f0a8833d12d5a094af4e31f0aa6352a5", "cmp.toggleswitch.control.container.bgcolor.active.hover": "7cb25cd82534c545194ff4ca9e88f88f267e7862", "cmp.toggleswitch.control.container.bgcolor.active.pressed": "13941521ee64a437d8ad91c7832c878aeb17ec6e", "cmp.toggleswitch.control.container.bgcolor.active.focus": "604d901f861cd135e1d16959e4f940c1ee5276bc", "cmp.toggleswitch.control.container.bgcolor.active.disabled": "49c60bc581582277c2ae54fcf640de722fe61e3a", - "cmp.toggleswitch.control.container.bgcolor.active.readonly": "bbdf7c3d5bbb576b894edbec0d4cf0c1c5c8ca61", "cmp.toggleswitch.control.container.bordercolor.inactive.rest": "10f529f8bcec3d422319a3290fb789496b81b79f", "cmp.toggleswitch.control.container.bordercolor.inactive.hover": "976b89eb821f529495e543c371921c802e341b97", "cmp.toggleswitch.control.container.bordercolor.inactive.pressed": "3b2f8d5cfaa645f3d1b68c11913747e6193a7ba4", "cmp.toggleswitch.control.container.bordercolor.inactive.focus": "697595344af0e16c5ee2f8f8f71013c3ef55737d", "cmp.toggleswitch.control.container.bordercolor.inactive.disabled": "0b1567050298917cce39d5228d95bee27a20c130", - "cmp.toggleswitch.control.container.bordercolor.inactive.readonly": "02242b3487ff40edf6f243d0642a5b7053805719", "cmp.toggleswitch.control.container.bordercolor.active.rest": "5d0f015707349a8f8f8bd473568f5bac841faa0d", "cmp.toggleswitch.control.container.bordercolor.active.hover": "29b08b729fc7ad520e34be2338981bcc916da38b", "cmp.toggleswitch.control.container.bordercolor.active.pressed": "6fe87093dbffded2cf5789483ba093d0861dd744", "cmp.toggleswitch.control.container.bordercolor.active.focus": "304df7c862a8727af1671a20437a87225b2983b0", "cmp.toggleswitch.control.container.bordercolor.active.disabled": "ccdf257bb167bc6a76ada213ae6747d12eee6b44", - "cmp.toggleswitch.control.container.bordercolor.active.readonly": "cd6cc9789e3c55ada13d5396dd89b3d14e000f25", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.rest": "7cc414e0f8aba835771d0c8845f8f69d1de28006", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.hover": "34f0a942290252d8e545a8be0e520908998ff5e6", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.pressed": "f9dd66f4962a167bae82da9871c7a381425f4b3d", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.focus": "ba4ad810f1d7e1a779ac63c4ce266dadebff289e", "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.disabled": "5e87a81461520caabdb096764ffc45cf09a65cb1", - "cmp.toggleswitch.control.ay11icon.iconcolor.inactive.readonly": "96fae7a5e9bb18a9681cef9085cf4e410c686ed7", "cmp.toggleswitch.control.ay11icon.iconcolor.active.rest": "b4163c3b03a0a4b259ee0a3b55fbaad2ef47db3c", "cmp.toggleswitch.control.ay11icon.iconcolor.active.hover": "eb51490706a2da490e7f09c4239d09355c1ad621", "cmp.toggleswitch.control.ay11icon.iconcolor.active.pressed": "c8fe1f22a3f6ddc956b6a3520757749bb79cb58e", "cmp.toggleswitch.control.ay11icon.iconcolor.active.focus": "1db2e9ce1b62d2f7e23d943ab1fbd564d6447513", "cmp.toggleswitch.control.ay11icon.iconcolor.active.disabled": "828a0618e64d7641d4266c538f5c9bf97e113983", - "cmp.toggleswitch.control.ay11icon.iconcolor.active.readonly": "758f8212a11c381374ff8ffcff9d2a9d8f75a8e6", "cmp.toggleswitch.control.knob.bgcolor.inactive.rest": "c01b777eed1f5f16d69ae9fb745fc589a8cfe25a", "cmp.toggleswitch.control.knob.bgcolor.inactive.hover": "44b04897025dd8bf2993945e835b78f347f9079d", "cmp.toggleswitch.control.knob.bgcolor.inactive.pressed": "666a2d0fcdf822bd13cee1fa94686a29bf07bd99", "cmp.toggleswitch.control.knob.bgcolor.inactive.focus": "04f0f657b04575058ae9cae96b5217b8f433fd76", "cmp.toggleswitch.control.knob.bgcolor.inactive.disabled": "fbe1825d9752161b9ba3ea82c74c89aaafcbf83a", - "cmp.toggleswitch.control.knob.bgcolor.inactive.readonly": "a34d93792897690817fff00ca7f9ca01797756a1", "cmp.toggleswitch.control.knob.bgcolor.active.rest": "8bf5c6ea5789a315ac0e64d4517629e52e33fe49", "cmp.toggleswitch.control.knob.bgcolor.active.hover": "e5bd41ad6d2f5a4c81a184cdf22888ac739352ce", "cmp.toggleswitch.control.knob.bgcolor.active.pressed": "f797948ffb03f067b83a7fdc4927d4882bed3c3d", "cmp.toggleswitch.control.knob.bgcolor.active.focus": "7e4ac0ec51f592e909337494ab698324c55bbf99", "cmp.toggleswitch.control.knob.bgcolor.active.disabled": "c67783e8a8d9c5aa76e67051e14abd1cc1c58f50", - "cmp.toggleswitch.control.knob.bgcolor.active.readonly": "d388bf7a591fcd1a3e6dea963bbbeb4e57867d0a", "cmp.toggleswitch.control.knob.bordercolor.inactive.rest": "053c52fe1c7dfb28565ca810fba2dd9e3eb97331", "cmp.toggleswitch.control.knob.bordercolor.inactive.hover": "ea7bdbde9a650f1fd33b7ebbeb155262c265bbba", "cmp.toggleswitch.control.knob.bordercolor.inactive.pressed": "53f803081ff4aaef6585bb64ee3aa249c7c7ab86", "cmp.toggleswitch.control.knob.bordercolor.inactive.focus": "21a72fe416da4e71f19b185c88a536818a890589", "cmp.toggleswitch.control.knob.bordercolor.inactive.disabled": "dc69ad83d615ac9613f44bf03f95bd199f58ec0a", - "cmp.toggleswitch.control.knob.bordercolor.inactive.readonly": "8db2ce8ad52104faf020cb984f3ddd672552b79b", "cmp.toggleswitch.control.knob.bordercolor.active.rest": "8ba4b8756c0ec9a41999f59b2a8e8927b842b08a", "cmp.toggleswitch.control.knob.bordercolor.active.hover": "4d11cf2b0364104e85dc79f83df89f3600659ed0", "cmp.toggleswitch.control.knob.bordercolor.active.pressed": "0f329568e12e11c278f4e835745b0706bf537864", "cmp.toggleswitch.control.knob.bordercolor.active.focus": "25504006a23ed6bc211749f6e27a850e26d55dc6", "cmp.toggleswitch.control.knob.bordercolor.active.disabled": "88c48873b5119fe291bed52675ec67d35199da23", - "cmp.toggleswitch.control.knob.bordercolor.active.readonly": "3cad88aef941e1ba84c4189bce98b921bc437450", "sem.buttons.container.bgcolor.cta.rest": "5b5a5b2bdfe49d6c9ec8bf28b0713ad2f5e8fa85", "sem.buttons.container.bgcolor.cta.hover": "916656eff1dfc6ec391cc11c464a7a73608c2b7f", "sem.buttons.container.bgcolor.cta.pressed": "976bec3c7f47a0d42ab69b160679b6ee622ef3f2", @@ -1688,42 +1642,36 @@ "cmp.checkbox.control.container.borderwidth.sm.active.pressed": "c2470104125ca46238248b0d955aa987e8709a19", "cmp.checkbox.control.container.borderwidth.sm.active.focus": "38f26ef0d7e0c7d8d0da138fa7b865121a8f33ed", "cmp.checkbox.control.container.borderwidth.sm.active.disabled": "55f883882f97104468be86792cadc172c51b9572", - "cmp.checkbox.control.container.borderwidth.sm.active.readonly": "3c2e3c9bf113192f20c653748cadcfb39e189bb3", "cmp.checkbox.control.container.borderwidth.sm.active.error": "9c108b650b148feb068f76702a6cf17920682e88", "cmp.checkbox.control.container.borderwidth.sm.inactive.rest": "4ad60c5d15f6ea201c54b803b5fd5ba3d8744ae2", "cmp.checkbox.control.container.borderwidth.sm.inactive.hover": "f80cc9fabb04ccccaf53962a1fcce9aed024da55", "cmp.checkbox.control.container.borderwidth.sm.inactive.pressed": "b703455e6866886f60ca620f7db6514cc6a24a78", "cmp.checkbox.control.container.borderwidth.sm.inactive.focus": "2924cb436a4f440814894212e7661e238e73ffff", "cmp.checkbox.control.container.borderwidth.sm.inactive.disabled": "bac693b632dba1a8e50f51b3dcc8ab27d3de5c33", - "cmp.checkbox.control.container.borderwidth.sm.inactive.readonly": "a288b35dc8fd6b9ec3deae9b58f6e254c52936ae", "cmp.checkbox.control.container.borderwidth.sm.inactive.error": "6f28542517c3d3356cd0500ceba8d337799f8f28", "cmp.checkbox.control.container.borderwidth.md.active.rest": "7079818c3c74965775742ee9919b6a9a60d58f31", "cmp.checkbox.control.container.borderwidth.md.active.hover": "af28aeb9574615029b6149f737a902ca5156e462", "cmp.checkbox.control.container.borderwidth.md.active.pressed": "f2f970225c1fbc85e17e5f8d5b1552dbee5c5c13", "cmp.checkbox.control.container.borderwidth.md.active.focus": "e338446f9bf6b6e625f39a60a6b66246f645a75e", "cmp.checkbox.control.container.borderwidth.md.active.disabled": "a897467b3481052b88cff74d8590c4bfb9eb5121", - "cmp.checkbox.control.container.borderwidth.md.active.readonly": "ab1c3345dcf7fec189ad23aec74905535e98df61", "cmp.checkbox.control.container.borderwidth.md.active.error": "72e1de28f8df8debbd4a83dace29ed668d3cb470", "cmp.checkbox.control.container.borderwidth.md.inactive.rest": "580e9cfba8e66b7a12b74bdd129af76e807bf0d5", "cmp.checkbox.control.container.borderwidth.md.inactive.hover": "517d09595f6a95c767e5aab8bbc3ffdfdabaf61c", "cmp.checkbox.control.container.borderwidth.md.inactive.pressed": "7d623059ba7c86e364dd3adb76d1bf9db6093199", "cmp.checkbox.control.container.borderwidth.md.inactive.focus": "6bf03e21193be2d58c18f834fa093f4a4b28d91b", "cmp.checkbox.control.container.borderwidth.md.inactive.disabled": "9ab39aad66121d9eb3f06e84e4660fd811c06123", - "cmp.checkbox.control.container.borderwidth.md.inactive.readonly": "f50c9884c063e8d2e321b612728e3cb0c288499e", "cmp.checkbox.control.container.borderwidth.md.inactive.error": "cbfdb599cae6fec72890a1f4be04979e3867da3e", "cmp.checkbox.control.container.borderwidth.lg.active.rest": "4650e4740a8524fd4139156fa230f1dda511379b", "cmp.checkbox.control.container.borderwidth.lg.active.hover": "0697568f0ff127326300876b489821977f6cf9b4", "cmp.checkbox.control.container.borderwidth.lg.active.pressed": "ffdcd31dc76cdf3acdeb2398ec4f4e87bb262f90", "cmp.checkbox.control.container.borderwidth.lg.active.focus": "de8ca0f9a631dfa3a9acbe2ea284be867b7a7ddd", "cmp.checkbox.control.container.borderwidth.lg.active.disabled": "ddcc47bc129441cc079ec1b93139a277f08041c8", - "cmp.checkbox.control.container.borderwidth.lg.active.readonly": "e58e40b9f87a5c5810b695d47fed19a2afd534ec", "cmp.checkbox.control.container.borderwidth.lg.active.error": "4c9fd8f76f295a0439aa641d7ea380d490a1dc62", "cmp.checkbox.control.container.borderwidth.lg.inactive.rest": "7071ab63991839b544b390780def3fe8dd933ecf", "cmp.checkbox.control.container.borderwidth.lg.inactive.hover": "4575c752fc8d5226f30cd41dd913971e7d8b100a", "cmp.checkbox.control.container.borderwidth.lg.inactive.pressed": "1d65f65e79a8c811798f13532dff56f3c4516a8f", "cmp.checkbox.control.container.borderwidth.lg.inactive.focus": "ee082fb816d1c6fffd21720a9ec24e271fb39e10", "cmp.checkbox.control.container.borderwidth.lg.inactive.disabled": "b10da1af51589507b6932c39cbf5ac902f7fa2e5", - "cmp.checkbox.control.container.borderwidth.lg.inactive.readonly": "d255d6409c1dfa1cf837649e42d3ad8810327b3a", "cmp.checkbox.control.container.borderwidth.lg.inactive.error": "6611c9def7c160afa117d285a7f098a0698404da", "cmp.checkbox.control.container.borderradius.sm": "256273a8e6846ab54d6f0f02994c994a9339c137", "cmp.checkbox.control.container.borderradius.md": "ea3a1d6af2ac4b762997d145f6299e61cb663640", @@ -1736,21 +1684,18 @@ "cmp.checkbox.control.icon.iconsize.sm.pressed": "e85df39658f0d1d4929bd83b93efb74194752560", "cmp.checkbox.control.icon.iconsize.sm.focus": "0535f6cef49b4b2abb3a3bdf063fe14e293ec9f6", "cmp.checkbox.control.icon.iconsize.sm.disabled": "cd53ad19bc2c3b6c7307232429db93d03907a1c1", - "cmp.checkbox.control.icon.iconsize.sm.readonly": "f36a6734a1c783dd16998577163f5cb99d07a04b", "cmp.checkbox.control.icon.iconsize.sm.error": "0b74fa9e98ff893e968e7877c119755a065e4668", "cmp.checkbox.control.icon.iconsize.md.rest": "99b556ffcf19d16585832834d87c171566ea0079", "cmp.checkbox.control.icon.iconsize.md.hover": "03867b80cd69b724a117c2f37206de08d85c5dde", "cmp.checkbox.control.icon.iconsize.md.pressed": "ad34109403a62598fa60807affc88ab5dfd02abd", "cmp.checkbox.control.icon.iconsize.md.focus": "d818f6b90c46f4e51ce66503bc2654afa105de08", "cmp.checkbox.control.icon.iconsize.md.disabled": "601a85693a83daca327adf837907e12695e5d197", - "cmp.checkbox.control.icon.iconsize.md.readonly": "4b60842f590e8a3b9aba4a0e552f0fd0fe988a45", "cmp.checkbox.control.icon.iconsize.md.error": "39331c091f724c68d2f7a26e5082270e9eba35a9", "cmp.checkbox.control.icon.iconsize.lg.rest": "1cfbd5a746aaf4cdde8258766b63bf1e904ddece", "cmp.checkbox.control.icon.iconsize.lg.hover": "38fae3e31745e40af1171eecccde32b65a717c26", "cmp.checkbox.control.icon.iconsize.lg.pressed": "b28bcb30096cd55a01e6a78524cf6586e66963eb", "cmp.checkbox.control.icon.iconsize.lg.focus": "6fe14cbc7b5a7240449b72291d1a88a1c2469259", "cmp.checkbox.control.icon.iconsize.lg.disabled": "17ab34866eb49fdeb4a8a76ad64519950f322303", - "cmp.checkbox.control.icon.iconsize.lg.readonly": "52cdf879e382c60c62af9269eb6095367b01e1f0", "cmp.checkbox.control.icon.iconsize.lg.error": "c50cd93187cfe7cb675718af8e134639dfca3c84", "cmp.counter.container.padding_v.sm": "023f83cf3373d30101036a327f19675112592700", "cmp.counter.container.padding_v.md": "47f43615af21c458495875d0647e6589e22eb96f", @@ -1880,84 +1825,72 @@ "cmp.radio.control.container.borderwidth.sm.active.pressed": "302ad8e1659229e412d2dc8cc7966ea58e551f61", "cmp.radio.control.container.borderwidth.sm.active.focus": "59468e6a8dd7b7f1bc233b7e12db25cfee0b66a9", "cmp.radio.control.container.borderwidth.sm.active.disabled": "efe58c377433a0459d7f677701cd4078ec11a25b", - "cmp.radio.control.container.borderwidth.sm.active.readonly": "4074b4c86dce56f832d2eaa1c2d730f29f4636f0", "cmp.radio.control.container.borderwidth.sm.active.error": "fe0f7073abe5c3807352241df066bf84ae891100", "cmp.radio.control.container.borderwidth.sm.inactive.rest": "25dbb75b5f7d23d2ef0ba26db473041cfe398017", "cmp.radio.control.container.borderwidth.sm.inactive.hover": "fc6250f690dce00e3378c40eda132dbf3515845b", "cmp.radio.control.container.borderwidth.sm.inactive.pressed": "8ee6ee3dfbe3d860b910ab09afb3d458d73f3296", "cmp.radio.control.container.borderwidth.sm.inactive.focus": "11ceef6cb2649f6a345fb3b32812bdc47004434d", "cmp.radio.control.container.borderwidth.sm.inactive.disabled": "e56448bceeaef43d02405f9499de5b272a39acdd", - "cmp.radio.control.container.borderwidth.sm.inactive.readonly": "8448fb89ced3b573b03a4ecbbaaf8c678d71b7d4", "cmp.radio.control.container.borderwidth.sm.inactive.error": "262e646bb90192ca5ff5ed293fa2f0a91f47e468", "cmp.radio.control.container.borderwidth.md.active.rest": "2e514934cb40e4b6f0ca8d3e923c912d3f5f0846", "cmp.radio.control.container.borderwidth.md.active.hover": "4b98a57b32c3781812ab50394652506a61208025", "cmp.radio.control.container.borderwidth.md.active.pressed": "17f5c4092afb80f4db522714871a7cac803afffe", "cmp.radio.control.container.borderwidth.md.active.focus": "8fe4e599a91e3249a61e249a0002226135fc5b7b", "cmp.radio.control.container.borderwidth.md.active.disabled": "723a083fcd24fabfbc20b49cd355147d6e3bbb1c", - "cmp.radio.control.container.borderwidth.md.active.readonly": "7cd405b46ebb9170a9a284bde86d2d000dcfc43d", "cmp.radio.control.container.borderwidth.md.active.error": "cade589fbdaf07056a6fc30e31390c5d88763e2e", "cmp.radio.control.container.borderwidth.md.inactive.rest": "75e6b74055a241ff57b055b813f2a5d958c32dcc", "cmp.radio.control.container.borderwidth.md.inactive.hover": "0db38206a428313086ceb0d95fb65442712cc1b6", "cmp.radio.control.container.borderwidth.md.inactive.pressed": "6b6e93bae7c3705268d2443c4eb6030518c5eb4c", "cmp.radio.control.container.borderwidth.md.inactive.focus": "7872d927c6cc3a5025807f8f69f2e2aae7ca3fd1", "cmp.radio.control.container.borderwidth.md.inactive.disabled": "e85dec95fcaf1d3eb5b32547c6e686e8b3628afa", - "cmp.radio.control.container.borderwidth.md.inactive.readonly": "ace7611a0ca19fe2c6c512895f9d21cea2b1731a", "cmp.radio.control.container.borderwidth.md.inactive.error": "0ee0e77ec0f382ac19c6ad4edc9f84744b9959b8", "cmp.radio.control.container.borderwidth.lg.active.rest": "bd687fba29c6010dd55a93f212c826a536fce718", "cmp.radio.control.container.borderwidth.lg.active.hover": "f2d7ba066dc3ea2ba480411d420c6d0d7d3b98bf", "cmp.radio.control.container.borderwidth.lg.active.pressed": "a59a4a5039cab8c282a6700d5b6a5f2d9eb4454a", "cmp.radio.control.container.borderwidth.lg.active.focus": "a18981cf85ac80f26d193394ab7555ee3f690f95", "cmp.radio.control.container.borderwidth.lg.active.disabled": "5466cde857097b4df39b8fb3d17de84197a696f7", - "cmp.radio.control.container.borderwidth.lg.active.readonly": "98c0a7c84d01d9c3b68f75a43ca2be4d82f8687c", "cmp.radio.control.container.borderwidth.lg.active.error": "7fe8476691b0f7b23da99a2ed477b7ea4127b919", "cmp.radio.control.container.borderwidth.lg.inactive.rest": "010a4c9877b41bb9fbc432300b74e014057e367a", "cmp.radio.control.container.borderwidth.lg.inactive.hover": "b290a07bac331f65f544fcc11789ac84d8e383e7", "cmp.radio.control.container.borderwidth.lg.inactive.pressed": "2a4cb433242963acb1bd82bef3c46767a31259a1", "cmp.radio.control.container.borderwidth.lg.inactive.focus": "fc90337c04eef1d3db73fa97ff52362d9458c963", "cmp.radio.control.container.borderwidth.lg.inactive.disabled": "bf6aee2bb6dd2e84284cf84869de4a5fcc633469", - "cmp.radio.control.container.borderwidth.lg.inactive.readonly": "ab28a2fc6f86d16998255c728a691c510cba27f5", "cmp.radio.control.container.borderwidth.lg.inactive.error": "db38077ed6d206c921a4d0382f1d0d21df7637c4", "cmp.radio.control.icon.iconsize.sm.inactive.rest": "8385cc3aa36db318f8ed9df4e2a5ce574e414242", "cmp.radio.control.icon.iconsize.sm.inactive.hover": "d23570ccded50c851713070783d57a79acff38e2", "cmp.radio.control.icon.iconsize.sm.inactive.pressed": "1c0a90db88b9076f18e1334b5785563a805ed8e6", "cmp.radio.control.icon.iconsize.sm.inactive.focus": "4452dc0567305a9362e78fd97b714ec040d734a3", "cmp.radio.control.icon.iconsize.sm.inactive.disabled": "297e092bb1673f2889ab267c937bc6fe7b2ee008", - "cmp.radio.control.icon.iconsize.sm.inactive.readonly": "e0158c8e42635d73836da6386486604434456c8f", "cmp.radio.control.icon.iconsize.sm.inactive.error": "4c105b1c01a64b3d13628fcf5c60818dc7c4c140", "cmp.radio.control.icon.iconsize.sm.active.rest": "b08f84d0a0eae5a7dab41653bb1b2387a100011d", "cmp.radio.control.icon.iconsize.sm.active.hover": "4a4b72fe2059c44691f0030850cc86bfdbc618e1", "cmp.radio.control.icon.iconsize.sm.active.pressed": "4b72c4f9b35c1963e79807b075329bcaf8bcbffb", "cmp.radio.control.icon.iconsize.sm.active.focus": "a2e7c6ffa04a326b1b4e93b005d93186e557d61d", "cmp.radio.control.icon.iconsize.sm.active.disabled": "3e2f665d319a852d3b0e21a9987817b534c43c2e", - "cmp.radio.control.icon.iconsize.sm.active.readonly": "2074ade341f0ba8a58c0744e2f326780ffe7f453", "cmp.radio.control.icon.iconsize.sm.active.error": "1c0dd7ab006175d278238c9bc139870a0feae1ac", "cmp.radio.control.icon.iconsize.md.inactive.rest": "39dbd158272f2403c6dd75f082a430137f743e9e", "cmp.radio.control.icon.iconsize.md.inactive.hover": "3f36c2521de50ecf247ac71431aeaadb35bad589", "cmp.radio.control.icon.iconsize.md.inactive.pressed": "e86db12caca1d95ee405299df2a3abbc0eef051b", "cmp.radio.control.icon.iconsize.md.inactive.focus": "a7e1d2e3bbe3f38d5b624bbe03825d6dddc58add", "cmp.radio.control.icon.iconsize.md.inactive.disabled": "d8c3a8d26d81daf82cf49edbb38374c41e53a200", - "cmp.radio.control.icon.iconsize.md.inactive.readonly": "a4dbb8b1d102cf3803bd23d37c4960a625d411bb", "cmp.radio.control.icon.iconsize.md.inactive.error": "9ebcf48d4e080a4c5ab84f3f29b5f30736d1c5ef", "cmp.radio.control.icon.iconsize.md.active.rest": "990234ff1308f7f8f62f536ccab57f3f4104e624", "cmp.radio.control.icon.iconsize.md.active.hover": "ee7f6f578961a8df4f19d85a7d6bcfe22e9e6f0c", "cmp.radio.control.icon.iconsize.md.active.pressed": "bd7f0805c38097b7a30ca2a6a014e74d6d5786b1", "cmp.radio.control.icon.iconsize.md.active.focus": "3e1877ce67c89d56b9e650187bf6e34835668bf2", "cmp.radio.control.icon.iconsize.md.active.disabled": "25d5b3a5919ba49f8413ca117c1d608079662fa0", - "cmp.radio.control.icon.iconsize.md.active.readonly": "53aa42aa6a932d6017d6d16a48684e7d2350735e", "cmp.radio.control.icon.iconsize.md.active.error": "bea60484cdb69599386a3471b9cdee267c5171a4", "cmp.radio.control.icon.iconsize.lg.inactive.rest": "246fdf3131baeb3c2890941e39a4b5b71a98e09b", "cmp.radio.control.icon.iconsize.lg.inactive.hover": "362fbcf6e1d1aa74786145abffeef010dd9509a2", "cmp.radio.control.icon.iconsize.lg.inactive.pressed": "ce88acfd5e0689b51ad0d22ab492eab2c87c8dc5", "cmp.radio.control.icon.iconsize.lg.inactive.focus": "37682f605d31922e05cd28c0aab73fada67fd8f4", "cmp.radio.control.icon.iconsize.lg.inactive.disabled": "6e007e5c9d32484e6f51ff503d3d33b7af1bf004", - "cmp.radio.control.icon.iconsize.lg.inactive.readonly": "58cecf2d047f342156deadacd0d645146b887e6f", "cmp.radio.control.icon.iconsize.lg.inactive.error": "eb5fddd9ed51a1514002e2378fcc87fa76dace00", "cmp.radio.control.icon.iconsize.lg.active.rest": "9ae846b4bcb727dd82acff96803507a3b1859b69", "cmp.radio.control.icon.iconsize.lg.active.hover": "0e935823cf41ebea7c54737a4ce789582e2bfd9a", "cmp.radio.control.icon.iconsize.lg.active.pressed": "c44bbd19e9bc53f1ce4d646b527a4d7959d6d7a9", "cmp.radio.control.icon.iconsize.lg.active.focus": "f782178cbb24f381665c9aed81ca93317abbc64e", "cmp.radio.control.icon.iconsize.lg.active.disabled": "862e8759c73c0860a7dae140d47f3e8b131c8212", - "cmp.radio.control.icon.iconsize.lg.active.readonly": "7fceb399dd97db79887408ea649b9dbbce72b6a7", "cmp.radio.control.icon.iconsize.lg.active.error": "370832166029942e7907370ee6d39780f4ed4291", "cmp.radio.contentcol.itemspacing.sm": "09a847742769f806a8d6329f6efb1ae68490ed7a", "cmp.radio.contentcol.itemspacing.md": "0864db80cf3fadc4e5cd2a4845d2fb4d0655d92e", @@ -2112,37 +2045,31 @@ "cmp.toggleswitch.control.container.borderwidth.sm.active.pressed": "b9d063c48918fc2820d72981d7ca90f3dd27568b", "cmp.toggleswitch.control.container.borderwidth.sm.active.focus": "31f5c830c79aca6706571faf528536dd80cd50d4", "cmp.toggleswitch.control.container.borderwidth.sm.active.disabled": "c759664091c134ab05a52cb2ce356190ae5950a9", - "cmp.toggleswitch.control.container.borderwidth.sm.active.readonly": "4faca3db783308cf6da96405f058e0949d0814ee", "cmp.toggleswitch.control.container.borderwidth.sm.inactive.rest": "f0b9362120c896ec32033b447dfa63d6fbe284b2", "cmp.toggleswitch.control.container.borderwidth.sm.inactive.hover": "19d730d3e8e343d17fffbc47996f988868f5b1cf", "cmp.toggleswitch.control.container.borderwidth.sm.inactive.pressed": "3fdfe5fee3be233b6570f7f678742c3db2eae956", "cmp.toggleswitch.control.container.borderwidth.sm.inactive.focus": "1c345ecc0b8ad626a1cb34bee9cabd8a448ba0cc", "cmp.toggleswitch.control.container.borderwidth.sm.inactive.disabled": "20c04ee35ea37465d0b3a8ac0acbc438106375d9", - "cmp.toggleswitch.control.container.borderwidth.sm.inactive.readonly": "a7df9a2fa56ddb44870ec33e252e71212ac81f7c", "cmp.toggleswitch.control.container.borderwidth.md.active.rest": "c167624c0060669736b07032f7d3488dac5e26c5", "cmp.toggleswitch.control.container.borderwidth.md.active.hover": "6e92a98b613077b88a236e26116858b7076fe9c3", "cmp.toggleswitch.control.container.borderwidth.md.active.pressed": "a1cce9280a911715cb62ef7e5984f81bdf80ec5b", "cmp.toggleswitch.control.container.borderwidth.md.active.focus": "166d3fd4bdc3c961f6465fb92ffae180fd35da73", "cmp.toggleswitch.control.container.borderwidth.md.active.disabled": "57a9e9fe2b203bdae0b1ac8584f81f7a6e3fcdf8", - "cmp.toggleswitch.control.container.borderwidth.md.active.readonly": "7b172f536b3c358fa10f57bbbb8a417a4a4f45a2", "cmp.toggleswitch.control.container.borderwidth.md.inactive.rest": "1224c3e862e9017055812526c94722a13857cd75", "cmp.toggleswitch.control.container.borderwidth.md.inactive.hover": "560e40507a97515bc00a0dd834ef4a4743530d29", "cmp.toggleswitch.control.container.borderwidth.md.inactive.pressed": "8bbada09ae911572af1baed4141a6212ed2b13ef", "cmp.toggleswitch.control.container.borderwidth.md.inactive.focus": "6dc83e31253fb03c8efb706aea4f0b519919ab77", "cmp.toggleswitch.control.container.borderwidth.md.inactive.disabled": "1bf9f1dd4541a78cacf671e2653990b6324e4c0a", - "cmp.toggleswitch.control.container.borderwidth.md.inactive.readonly": "d770c1bfc0ac9707214fd875dd40947856c86b13", "cmp.toggleswitch.control.container.borderwidth.lg.active.rest": "69acd8bd697ab792ca438de34e4215165bd90464", "cmp.toggleswitch.control.container.borderwidth.lg.active.hover": "3ec37df3befd539d72415c571e7cad0cb04457ee", "cmp.toggleswitch.control.container.borderwidth.lg.active.pressed": "eac6af6a48908aa7796c15b274509f88a7192791", "cmp.toggleswitch.control.container.borderwidth.lg.active.focus": "2dfcb5101adfc20c9add04e67afc001753e6ba4d", "cmp.toggleswitch.control.container.borderwidth.lg.active.disabled": "7419f2f6be400bb5d9ad59cf132b0bad6bdb3fee", - "cmp.toggleswitch.control.container.borderwidth.lg.active.readonly": "f6badc243db337e329cab045f64f66cacd1f5c84", "cmp.toggleswitch.control.container.borderwidth.lg.inactive.rest": "d2cfdb8a93d3fbfe1fc6511330e64e5cc9ed916d", "cmp.toggleswitch.control.container.borderwidth.lg.inactive.hover": "cac9edd4ecbc508e94736d675b82341116377106", "cmp.toggleswitch.control.container.borderwidth.lg.inactive.pressed": "6578e976d4f15bf2f2ccdd963dba43b18a79fe0e", "cmp.toggleswitch.control.container.borderwidth.lg.inactive.focus": "9bc08b3852b11ecff4a28f51a331b59ee3170194", "cmp.toggleswitch.control.container.borderwidth.lg.inactive.disabled": "c0a327bd20280efc79e82f3855b674386e14415b", - "cmp.toggleswitch.control.container.borderwidth.lg.inactive.readonly": "abacb290b60c3cc19988415fae79b76c4301ee8d", "cmp.toggleswitch.control.container.width.sm": "6edb121ab76ce4703e782ac8870f25bf69171a2b", "cmp.toggleswitch.control.container.width.md": "bb6557669f1d87b110c66ae64638896c26bf3048", "cmp.toggleswitch.control.container.width.lg": "bd1908a57bf309600f56c2d64ca5b7cbaa581121", @@ -2166,37 +2093,31 @@ "cmp.toggleswitch.control.knob.borderwidth.sm.active.pressed": "86e1c966bbffdd43910dc3a01830c5cb83bd8ade", "cmp.toggleswitch.control.knob.borderwidth.sm.active.focus": "3217eeb9766ef13615b5d962c4a085e7dade7ec3", "cmp.toggleswitch.control.knob.borderwidth.sm.active.disabled": "a2845c62ef0529aa07561e911192909ed451058b", - "cmp.toggleswitch.control.knob.borderwidth.sm.active.readonly": "91062eda72f755b8a80da8fa43b3be7d87b3db4a", "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.rest": "c965d03c180d2cc3ba77a3b421f4299c072fd5ec", "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.hover": "4d712358bc03fdd69ee334ce99b2254a7f31b2fa", "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.pressed": "51641cd12013e97f2c69ee009deb160b55d1e26b", "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.focus": "a3eda24af643bde10cffb770082942bc92d36550", "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.disabled": "01451ab6c719362ed2d516e1ca0958b08b4a1f5f", - "cmp.toggleswitch.control.knob.borderwidth.sm.inactive.readonly": "365a6286caecd1c3751d78611fee791d8a57bb04", "cmp.toggleswitch.control.knob.borderwidth.md.active.rest": "aa36835ecaa6d91750bbd10b3143890b06f7b9af", "cmp.toggleswitch.control.knob.borderwidth.md.active.hover": "f85f98e0850807d5b8cebfe7242103df62049d94", "cmp.toggleswitch.control.knob.borderwidth.md.active.pressed": "45312cf5d7964057c077a5d55b5eb04d43f3f87a", "cmp.toggleswitch.control.knob.borderwidth.md.active.focus": "5ae29a35313fe52a9ee18de63aafd8e83c64a07c", "cmp.toggleswitch.control.knob.borderwidth.md.active.disabled": "47caef8bcb894b5f53acef5f0982a7c14087321d", - "cmp.toggleswitch.control.knob.borderwidth.md.active.readonly": "74a5cfce750bc81901ccd3a9290e4987d133b8ff", "cmp.toggleswitch.control.knob.borderwidth.md.inactive.rest": "f4ebfd45252d41a0ce88ac412b872fb2fc9fa69a", "cmp.toggleswitch.control.knob.borderwidth.md.inactive.hover": "6729f6e0f19473f4103311a7939dd8b0a59361f9", "cmp.toggleswitch.control.knob.borderwidth.md.inactive.pressed": "e20d6fa604e2950ec8d20f5c258df0effc017bb5", "cmp.toggleswitch.control.knob.borderwidth.md.inactive.focus": "ebbf1d0a76419039369608ff64cf47502e77ebd3", "cmp.toggleswitch.control.knob.borderwidth.md.inactive.disabled": "eb5c42d4fc99ef37b1b8342ff591d23451d01439", - "cmp.toggleswitch.control.knob.borderwidth.md.inactive.readonly": "4f8812b94137c03a7a0e83f35fd4ae2786829b91", "cmp.toggleswitch.control.knob.borderwidth.lg.active.rest": "6c919d261c3444bc3016e37ccd95d15d24f65197", "cmp.toggleswitch.control.knob.borderwidth.lg.active.hover": "35feb6783892e19c999b7a9ee1575727febea62d", "cmp.toggleswitch.control.knob.borderwidth.lg.active.pressed": "f9674602e1dc6db544eb737fce5a93740312b118", "cmp.toggleswitch.control.knob.borderwidth.lg.active.focus": "a0b779d8079f1a1e2b1c86c540fb829685189beb", "cmp.toggleswitch.control.knob.borderwidth.lg.active.disabled": "cc0630b0cab81c9a9f13dc94bd137fbc57a99c85", - "cmp.toggleswitch.control.knob.borderwidth.lg.active.readonly": "834c59d10825e834c78cf8deb252d5104cae6c6a", "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.rest": "143586dcddc119cf4721db07035b09043e2692b0", "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.hover": "5df5d6ace0ddb9ee61ad5997526710248b9f37a0", "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.pressed": "e661c8784fdb6fe7f18a6f484d8159c0afa9dedb", "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.focus": "e92ae2709e13498336b7bcb05695a30e91289cfa", "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.disabled": "471b1020e1aab57b7d3501bf62345a8444b294b0", - "cmp.toggleswitch.control.knob.borderwidth.lg.inactive.readonly": "4e8ef1f65039ff5960099c85a05bf2bd7a1dc8fd", "cmp.toggleswitch.controlwithstatelabel.container.itemspacing.sm": "4a3f6b955db262bcf2480742fda6dcd583267693", "cmp.toggleswitch.controlwithstatelabel.container.itemspacing.md": "1997f4003ef1762c54633706be8549a6adf14528", "cmp.toggleswitch.controlwithstatelabel.container.itemspacing.lg": "3a03e6f605c92382f6f420a6c74aef57ce3d12a3", diff --git a/packages/figma-design-tokens/input/tokens/cmp/borders.json b/packages/figma-design-tokens/input/tokens/cmp/borders.json index 80ebf5cdb..641df36cf 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/borders.json +++ b/packages/figma-design-tokens/input/tokens/cmp/borders.json @@ -46,14 +46,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.active.readonly}", - "width": "{cmp.radio.control.container.borderwidth.sm.active.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { @@ -104,14 +96,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.inactive.readonly}", - "width": "{cmp.radio.control.container.borderwidth.sm.inactive.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { @@ -164,14 +148,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.active.readonly}", - "width": "{cmp.radio.control.container.borderwidth.md.active.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { @@ -222,14 +198,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.inactive.readonly}", - "width": "{cmp.radio.control.container.borderwidth.md.inactive.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { @@ -282,14 +250,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.active.readonly}", - "width": "{cmp.radio.control.container.borderwidth.lg.active.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { @@ -340,14 +300,6 @@ "style": "solid" } }, - "readonly": { - "$type": "border", - "$value": { - "color": "{cmp.radio.control.container.bordercolor.inactive.readonly}", - "width": "{cmp.radio.control.container.borderwidth.lg.inactive.readonly}", - "style": "solid" - } - }, "error": { "$type": "border", "$value": { diff --git a/packages/figma-design-tokens/input/tokens/cmp/color.json b/packages/figma-design-tokens/input/tokens/cmp/color.json index e7271125f..cdd2f3505 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/color.json +++ b/packages/figma-design-tokens/input/tokens/cmp/color.json @@ -37,11 +37,6 @@ "$value": "{sys.bgcolor.bold.disabled}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -74,11 +69,6 @@ "$value": "{sys.bgcolor.inverse.disabled}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.inverse.disabled}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.inverse.rest}", @@ -113,11 +103,6 @@ "$value": "{sys.bordercolor.bold.disabled}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.bordercolor.bold.disabled}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.bordercolor.bold.danger.rest}", @@ -150,11 +135,6 @@ "$value": "{sys.bordercolor.inverse.disabled}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.bordercolor.inverse.disabled}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -191,11 +171,6 @@ "$value": "{sys.content.bold.disabled.regular}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.content.bold.disabled.regular}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.content.bold.danger.regular}", @@ -228,11 +203,6 @@ "$value": "{sys.content.inverse.transparent}", "$description": "also applies to indeterminate" }, - "readonly": { - "$type": "color", - "$value": "{sys.content.inverse.transparent}", - "$description": "also applies to indeterminate" - }, "error": { "$type": "color", "$value": "{sys.content.inverse.transparent}", @@ -739,11 +709,6 @@ "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.radio.control.background.unselected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.radio.control.background.unselected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -776,11 +741,6 @@ "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.radio.control.background.selected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.radio.control.background.selected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -815,11 +775,6 @@ "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.radio.control.background.unselected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.radio.control.background.unselected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -852,11 +807,6 @@ "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.radio.control.background.selected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.radio.control.background.selected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.bgcolor.bold.danger.rest}", @@ -893,11 +843,6 @@ "$value": "{sys.content.bold.disabled.regular}", "$description": "forms.radio.control.foreground.unselected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.content.bold.disabled.regular}", - "$description": "forms.radio.control.foreground.unselected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.content.bold.primary.regular}", @@ -930,11 +875,6 @@ "$value": "{sys.content.bold.disabled.regular}", "$description": "forms.radio.control.foreground.selected.fill.disabled" }, - "readonly": { - "$type": "color", - "$value": "{sys.content.bold.disabled.regular}", - "$description": "forms.radio.control.foreground.selected.fill.readonly" - }, "error": { "$type": "color", "$value": "{sys.content.bold.primary.regular}", @@ -956,10 +896,6 @@ "$type": "color", "$value": "{sem.forms.fieldset.legend.textcolor.disabled}" }, - "readonly": { - "$type": "color", - "$value": "{sem.forms.fieldset.legend.textcolor.readonly}" - }, "error": { "$type": "color", "$value": "{sem.forms.fieldset.legend.textcolor.error}" @@ -1441,11 +1377,6 @@ "$type": "color", "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.toggleswitch.control.background.unselected.fill.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.toggleswitch.control.background.unselected.fill.readonly" } }, "active": { @@ -1473,11 +1404,6 @@ "$type": "color", "$value": "{sys.bgcolor.bold.disabled}", "$description": "forms.toggleswitch.control.background.selected.fill.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.bgcolor.bold.disabled}", - "$description": "forms.toggleswitch.control.background.selected.fill.readonly" } } }, @@ -1507,11 +1433,6 @@ "$type": "color", "$value": "{sys.bordercolor.transparent}", "$description": "forms.toggleswitch.control.background.unselected.stroke.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.bordercolor.transparent}", - "$description": "forms.toggleswitch.control.background.unselected.stroke.readonly" } }, "active": { @@ -1539,11 +1460,6 @@ "$type": "color", "$value": "{sys.bordercolor.transparent}", "$description": "forms.toggleswitch.control.background.unselected.stroke.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.bordercolor.transparent}", - "$description": "forms.toggleswitch.control.background.unselected.stroke.readonly" } } } @@ -1575,11 +1491,6 @@ "$type": "color", "$value": "{sys.content.bold.disabled.subtle}", "$description": "forms.toggleswitch.control.foreground.selected.fill.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.content.bold.disabled.subtle}", - "$description": "forms.toggleswitch.control.foreground.selected.fill.readonly" } }, "active": { @@ -1607,11 +1518,6 @@ "$type": "color", "$value": "{sys.content.bold.disabled.subtle}", "$description": "forms.toggleswitch.control.foreground.selected.fill.disabled" - }, - "readonly": { - "$type": "color", - "$value": "{sys.content.bold.disabled.subtle}", - "$description": "forms.toggleswitch.control.foreground.selected.fill.readonly" } } } @@ -1638,10 +1544,6 @@ "disabled": { "$type": "color", "$value": "{sys.static.subtle.disabled}" - }, - "readonly": { - "$type": "color", - "$value": "{sys.static.subtle.disabled}" } }, "active": { @@ -1664,10 +1566,6 @@ "disabled": { "$type": "color", "$value": "{sys.static.subtle.disabled}" - }, - "readonly": { - "$type": "color", - "$value": "{sys.static.subtle.disabled}" } } }, @@ -1692,10 +1590,6 @@ "disabled": { "$type": "color", "$value": "{cmp.toggleswitch.control.knob.bordercolor.inactive.rest}" - }, - "readonly": { - "$type": "color", - "$value": "{cmp.toggleswitch.control.knob.bordercolor.inactive.rest}" } }, "active": { @@ -1718,10 +1612,6 @@ "disabled": { "$type": "color", "$value": "{cmp.toggleswitch.control.knob.bordercolor.active.rest}" - }, - "readonly": { - "$type": "color", - "$value": "{cmp.toggleswitch.control.knob.bordercolor.active.rest}" } } } diff --git a/packages/figma-design-tokens/input/tokens/cmp/sizes.json b/packages/figma-design-tokens/input/tokens/cmp/sizes.json index e08eeede7..0ceac2629 100644 --- a/packages/figma-design-tokens/input/tokens/cmp/sizes.json +++ b/packages/figma-design-tokens/input/tokens/cmp/sizes.json @@ -289,11 +289,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.sm.active.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.sm.active.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.sm.active.rest}", @@ -326,11 +321,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.sm.inactive.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.sm.inactive.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.sm.inactive.rest}", @@ -365,11 +355,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.md.active.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.md.active.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.md.active.rest}", @@ -402,11 +387,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.md.inactive.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.md.inactive.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.md.inactive.rest}", @@ -441,11 +421,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.lg.active.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.lg.active.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.lg.active.rest}", @@ -478,11 +453,6 @@ "$value": "{cmp.checkbox.control.container.borderwidth.lg.inactive.rest}", "$description": "figma only! do not apply on codes comps" }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.checkbox.control.container.borderwidth.lg.inactive.rest}", - "$description": "figma only! do not apply on codes comps" - }, "error": { "$type": "borderWidth", "$value": "{cmp.checkbox.control.container.borderwidth.lg.inactive.rest}", @@ -543,10 +513,6 @@ "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.sm.rest}" }, - "readonly": { - "$type": "sizing", - "$value": "{cmp.checkbox.control.icon.iconsize.sm.rest}" - }, "error": { "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.sm.rest}" @@ -573,10 +539,6 @@ "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.md.rest}" }, - "readonly": { - "$type": "sizing", - "$value": "{cmp.checkbox.control.icon.iconsize.md.rest}" - }, "error": { "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.md.rest}" @@ -603,10 +565,6 @@ "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.lg.rest}" }, - "readonly": { - "$type": "sizing", - "$value": "{cmp.checkbox.control.icon.iconsize.lg.rest}" - }, "error": { "$type": "sizing", "$value": "{cmp.checkbox.control.icon.iconsize.lg.rest}" @@ -1384,10 +1342,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1414,10 +1368,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1446,10 +1396,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1476,10 +1422,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1508,10 +1450,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1538,10 +1476,6 @@ "$type": "borderWidth", "$value": "{core.dimensionpx.0}" }, - "readonly": { - "$type": "borderWidth", - "$value": "{core.dimensionpx.0}" - }, "error": { "$type": "borderWidth", "$value": "{core.dimensionpx.0}" @@ -1574,10 +1508,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.14}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.14}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.14}" @@ -1604,10 +1534,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.6}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.6}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.6}" @@ -1636,10 +1562,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.14}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.14}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.14}" @@ -1666,10 +1588,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.6}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.6}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.6}" @@ -1698,10 +1616,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.14}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.14}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.14}" @@ -1728,10 +1642,6 @@ "$type": "sizing", "$value": "{core.dimensionpx.6}" }, - "readonly": { - "$type": "sizing", - "$value": "{core.dimensionpx.6}" - }, "error": { "$type": "sizing", "$value": "{core.dimensionpx.6}" @@ -2729,10 +2639,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.sm.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.sm.active.rest}" } }, "inactive": { @@ -2755,10 +2661,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.sm.inactive.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.sm.inactive.rest}" } } }, @@ -2783,10 +2685,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.md.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.md.active.rest}" } }, "inactive": { @@ -2809,10 +2707,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.md.inactive.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.md.inactive.rest}" } } }, @@ -2837,10 +2731,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.lg.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.lg.active.rest}" } }, "inactive": { @@ -2863,10 +2753,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.container.borderwidth.lg.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.container.borderwidth.lg.active.rest}" } } } @@ -2983,10 +2869,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.sm.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.sm.active.rest}" } }, "inactive": { @@ -3009,10 +2891,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.sm.inactive.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.sm.inactive.rest}" } } }, @@ -3037,10 +2915,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.md.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.md.active.rest}" } }, "inactive": { @@ -3063,10 +2937,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.md.inactive.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.md.inactive.rest}" } } }, @@ -3091,10 +2961,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.lg.active.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.lg.active.rest}" } }, "inactive": { @@ -3117,10 +2983,6 @@ "disabled": { "$type": "borderWidth", "$value": "{cmp.toggleswitch.control.knob.borderwidth.lg.inactive.rest}" - }, - "readonly": { - "$type": "borderWidth", - "$value": "{cmp.toggleswitch.control.knob.borderwidth.lg.inactive.rest}" } } } diff --git a/packages/ui-library/src/components/checkbox/index.css.ts b/packages/ui-library/src/components/checkbox/index.css.ts index 8f0b6864a..8783e5992 100644 --- a/packages/ui-library/src/components/checkbox/index.css.ts +++ b/packages/ui-library/src/components/checkbox/index.css.ts @@ -145,15 +145,6 @@ export const staticStyles = css` color: ${formlabel.inlinelabel.textcolor.pressed}; } } - - &.readonly { - color: ${formlabel.inlinelabel.textcolor.readonly}; - - .blr-form-label-inline { - cursor: not-allowed !important; - pointer-events: none; - } - } } } @@ -182,10 +173,6 @@ export const staticStyles = css` cursor: not-allowed; } - &.readonly { - pointer-events: none; - } - &:not(.error) { &.checked, &.indeterminate { @@ -197,7 +184,7 @@ export const staticStyles = css` } &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.active.hover}; outline-color: ${checkbox.control.container.bordercolor.active.hover}; @@ -217,7 +204,7 @@ export const staticStyles = css` } &.active { - &:not(:disabled, [readonly]) { + &:not(:disabled) { background-color: ${checkbox.control.container.bgcolor.active.pressed}; outline-color: ${checkbox.control.container.bordercolor.active.pressed}; @@ -235,15 +222,6 @@ export const staticStyles = css` color: ${checkbox.control.icon.iconcolor.active.disabled}; } } - - &.readonly { - background-color: ${checkbox.control.container.bgcolor.active.readonly}; - outline-color: ${checkbox.control.container.bordercolor.active.readonly}; - - & .checker-icon { - color: ${checkbox.control.icon.iconcolor.active.readonly}; - } - } } &:not(.checked, .indeterminate) { @@ -255,7 +233,7 @@ export const staticStyles = css` } &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.inactive.hover}; outline-color: ${checkbox.control.container.bordercolor.inactive.hover}; @@ -275,7 +253,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.inactive.pressed}; outline-color: ${checkbox.control.container.bordercolor.inactive.pressed}; @@ -293,15 +271,6 @@ export const staticStyles = css` color: ${checkbox.control.icon.iconcolor.inactive.disabled}; } } - - &.readonly { - background-color: ${checkbox.control.container.bgcolor.inactive.readonly}; - outline-color: ${checkbox.control.container.bordercolor.inactive.readonly}; - - & .checker-icon { - color: ${checkbox.control.icon.iconcolor.inactive.readonly}; - } - } } } @@ -338,7 +307,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { & .checker-icon { width: ${checkbox.control.icon.iconsize.sm.hover}; height: ${checkbox.control.icon.iconsize.sm.hover}; @@ -360,7 +329,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { & .checker-icon { width: ${checkbox.control.icon.iconsize.sm.pressed}; height: ${checkbox.control.icon.iconsize.sm.pressed}; @@ -381,22 +350,12 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.disabled} * -1); } - &.readonly { - & .checker-icon { - width: ${checkbox.control.icon.iconsize.sm.readonly}; - height: ${checkbox.control.icon.iconsize.sm.readonly}; - } - - outline-width: ${checkbox.control.container.borderwidth.sm.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.readonly} * -1); - } - &.checked { outline-width: ${checkbox.control.container.borderwidth.sm.active.rest}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.sm.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.hover} * -1); } @@ -408,7 +367,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.sm.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.pressed} * -1); } @@ -418,11 +377,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.sm.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.sm.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.readonly} * -1); - } } } } @@ -455,7 +409,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.rest} * -1); &.hover { - &.not(.disabled):not(.readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.inactive.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.hover} * -1); } @@ -467,7 +421,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.inactive.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.pressed} * -1); } @@ -477,11 +431,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.md.inactive.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.md.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.readonly} * -1); - } } &.checked { @@ -489,7 +438,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.md.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.hover} * -1); } @@ -501,7 +450,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.pressed} * -1); } @@ -511,11 +460,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.md.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.md.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.md.active.readonly} * -1); - } } } } @@ -543,7 +487,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.inactive.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.hover} * -1); } @@ -555,7 +499,7 @@ export const staticStyles = css` } &.active { - &:not(:disabled, .readonly) { + &:not(:disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.inactive.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.pressed} * -1); } @@ -565,11 +509,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.lg.inactive.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.lg.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.readonly} * -1); - } } &.checked { @@ -577,7 +516,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.hover} * -1); } @@ -589,7 +528,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.pressed} * -1); } @@ -599,11 +538,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.lg.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.lg.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.readonly} * -1); - } } } } diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts index f423b2708..48b0d30f6 100644 --- a/packages/ui-library/src/components/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/checkbox/index.stories.ts @@ -130,13 +130,6 @@ export default { category: 'States', }, }, - readonly: { - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - defaultValue: false, - table: { - category: 'States', - }, - }, //Validation required: { @@ -238,8 +231,7 @@ export default { - [**Checked / Unchecked **](#checked--unchecked) - [**Indeterminate**](#indeterminate) - [**States**](#states) - - [**Disabled**](#disabled) - - [**Readonly**](#readonly) + - [**Disabled**](#disabled) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -266,7 +258,6 @@ const defaultParams: BlrCheckboxType = { hintMessage: 'This is a small hint message', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, errorMessage: ' ', @@ -294,7 +285,6 @@ const argTypesToDisable = [ 'hintMessage', 'hintMessageIcon', 'disabled', - 'readonly', 'required', 'hasError', 'errorMessage', @@ -405,7 +395,7 @@ Indeterminate.story = { /** * ## States - * Apart from states like rest, hover, pressed and focus, the Checkbox component can also be disabled or readonly. The error state is documented under [validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Checkbox component can also be disabled. The error state is documented under [validation](#validation). * * ### Disabled * The Checkbox component in the disabled state can not be interacted with. This means it can not receive focus or be selected. @@ -429,27 +419,6 @@ Disabled.story = { name: ' ', }; -/** - * ### Readonly - * The Checkbox component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} -
-
- ${BlrCheckboxRenderFunction({ - ...defaultParams, - label: 'Readonly', - readonly: true, - })} -
-
- `; -}; -Readonly.story = { - name: ' ', -}; /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts index 61637661d..1440a6b37 100644 --- a/packages/ui-library/src/components/checkbox/index.test.ts +++ b/packages/ui-library/src/components/checkbox/index.test.ts @@ -12,7 +12,6 @@ const sampleParams: BlrCheckboxType = { disabled: false, checked: false, indeterminate: false, - readonly: false, hasError: false, sizeVariant: 'md', errorMessage: 'This is a sample error message', diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 817bc2427..094fb1d8b 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -47,7 +47,6 @@ export class BlrCheckbox extends LitElementCustom { @property() accessor disabled: boolean | undefined; @property() accessor checked: boolean | undefined = false; @property() accessor indeterminate: boolean | undefined = false; - @property() accessor readonly: boolean | undefined; @property() accessor hasError: boolean | undefined; @property() accessor errorMessage: string | undefined; @property() accessor errorMessageIcon: SizelessIconType | undefined; @@ -81,7 +80,7 @@ export class BlrCheckbox extends LitElementCustom { } protected handleChange(event: Event) { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.currentIndeterminateState = false; this.dispatchEvent( @@ -114,13 +113,13 @@ export class BlrCheckbox extends LitElementCustom { @state() protected accessor hovered = false; protected handleEnter = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = true; } }; protected handleLeave = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = false; } }; @@ -128,14 +127,14 @@ export class BlrCheckbox extends LitElementCustom { @state() protected accessor active = false; protected handlePress = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.active = true; this.currentCheckedState = !this.currentCheckedState; } }; protected handleRelease = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.active = false; } }; @@ -159,7 +158,6 @@ export class BlrCheckbox extends LitElementCustom { 'active': this.active || false, 'checked': this.currentCheckedState || false, 'required': this.required || false, - 'readonly': this.readonly || false, 'indeterminate': this.currentIndeterminateState || false, }); @@ -171,7 +169,6 @@ export class BlrCheckbox extends LitElementCustom { 'active': this.active || false, 'checked': this.currentCheckedState || false, 'required': this.required || false, - 'readonly': this.readonly || false, 'indeterminate': this.currentIndeterminateState || false, 'focus': this.focused || false, }); @@ -264,7 +261,6 @@ export class BlrCheckbox extends LitElementCustom { ?disabled=${this.disabled} ?checked=${this.currentCheckedState} ?indeterminate=${this.currentIndeterminateState} - ?readonly=${this.readonly} ?required="${this.required}" ?hasError=${this.hasError} @change=${this.handleChange} diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts index 13fbc9eff..a529d032e 100644 --- a/packages/ui-library/src/components/radio-group/index.stories.ts +++ b/packages/ui-library/src/components/radio-group/index.stories.ts @@ -98,13 +98,6 @@ export default { category: 'States', }, }, - readonly: { - name: 'readonly', - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, required: { name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', @@ -210,7 +203,6 @@ export default { - [**Has Group Label**](#has-group-label) - [**States**](#states) - [**Disabled**](#disabled) - - [**Readonly**](#readonly) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -245,7 +237,6 @@ const defaultParams: BlrRadioGroupType & { groupHintMessage: 'This is a small hint', groupHintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, groupErrorMessage: '', @@ -342,7 +333,7 @@ HasGroupLabel.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Radio Group component can also be disabled or readonly. The error state is documented under [Validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Radio Group component can also be disabled. The error state is documented under [Validation](#validation). * ### Disabled * The Radio Group component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -360,20 +351,6 @@ export const Disabled = () => { Disabled.story = { name: ' ' }; -/** - * The Radio Group component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} - ${BlrRadioGroup({ - ...defaultParams, - legend: 'Readonly', - readonly: true, - })} - `; -}; - /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts index 526e010bd..b2ca01e61 100644 --- a/packages/ui-library/src/components/radio-group/index.test.ts +++ b/packages/ui-library/src/components/radio-group/index.test.ts @@ -13,7 +13,6 @@ const sampleParams: BlrRadioGroupType = { disabled: false, name: 'Default Name', required: false, - readonly: false, hasHint: true, groupHintMessage: 'This is a sample hint message', groupHintMessageIcon: 'blrInfo', diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts index a722ac1ca..584c54c13 100644 --- a/packages/ui-library/src/components/radio-group/index.ts +++ b/packages/ui-library/src/components/radio-group/index.ts @@ -36,7 +36,6 @@ export class BlrRadioGroup extends LitElementCustom { static styles = [staticFormStyles, staticRadioStyles, componentSpecificStaticStyles]; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property() accessor name: string | undefined; @property() accessor sizeVariant: InputSizesType = 'md'; @property() accessor hasLegend: boolean | undefined; @@ -96,7 +95,6 @@ export class BlrRadioGroup extends LitElementCustom { item.hasError = this.hasError; item.disabled = this.disabled; - item.readonly = this.readonly; item.theme = this.theme; item.sizeVariant = this.sizeVariant; @@ -127,7 +125,6 @@ export class BlrRadioGroup extends LitElementCustom { [this.theme]: this.theme, [this.sizeVariant]: this.sizeVariant, disabled: this.disabled || false, - readonly: this.readonly || false, error: this.hasError || false, [this.direction]: this.direction, }); diff --git a/packages/ui-library/src/components/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts index 0457087fe..df925f152 100644 --- a/packages/ui-library/src/components/radio/index.css.ts +++ b/packages/ui-library/src/components/radio/index.css.ts @@ -2,21 +2,6 @@ import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js"; import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated.js"; -/* ToDos: - - - [ ] seperate radio/radio group css and move them to their component folders - - [ ] Fix margin of caption-group - - [ ] Prevent click in readOnly - - [ ] Would be nice to have an *optional* max-width for .blr-radio - - [ ] Implement different sizing tokens (MD & LG) for .input-control and the icon (:before) - - [ ] Check whats going on with vertical stacking, this layout variant is not available in SB (already implemented appropriate gap tokens) - - [ ] Allow active opion in error state - - [ ] It should be possible to predefine a selected option - setting to disabled or readonly allways resets - - [ ] In disabled state, the legend should consume "Forms.Legend.Disabled" - - [ ] In readOnly state, the legend should consume "Forms.Legend.ReadOnly" - - */ - export const staticStyles = css` ${ComponentThemeIterator((theme, cmp, css) => { const { radio, formlabel, formcaption } = cmp; @@ -156,7 +141,7 @@ export const staticStyles = css` height: ${radio.control.icon.iconsize.sm.inactive.rest}; } - &:not(.disabled, .readonly) { + &:not(.disabled) { &:hover { background-color: ${radio.control.container.bgcolor.inactive.hover}; @@ -222,7 +207,7 @@ export const staticStyles = css` height: ${radio.control.icon.iconsize.sm.active.rest}; } - &:not(.disabled, .readonly) { + &:not(.disabled) { &:hover { background-color: ${radio.control.container.bgcolor.active.hover}; @@ -267,17 +252,6 @@ export const staticStyles = css` height: ${radio.control.icon.iconsize.sm.active.disabled}; } } - - &[readonly] { - background-color: ${radio.control.container.bgcolor.active.readonly}; - - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.active.readonly}; - width: ${radio.control.icon.iconsize.sm.active.readonly}; - height: ${radio.control.icon.iconsize.sm.active.readonly}; - } - } } &:disabled { @@ -357,27 +331,6 @@ export const staticStyles = css` } } - &.readonly { - .input-control { - background-color: ${radio.control.container.bgcolor.inactive.readonly}; - width: ${radio.control.icon.iconsize.sm.inactive.readonly}; - height: ${radio.control.icon.iconsize.sm.inactive.readonly}; - - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.inactive.readonly}; - width: ${radio.control.icon.iconsize.sm.inactive.readonly}; - height: ${radio.control.icon.iconsize.sm.inactive.readonly}; - } - - & + .label-wrapper { - .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.readonly}; - } - } - } - } - .blr-form-caption { margin-top: 0; diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts index 9f1cc0e77..7e690234c 100644 --- a/packages/ui-library/src/components/radio/index.stories.ts +++ b/packages/ui-library/src/components/radio/index.stories.ts @@ -99,13 +99,6 @@ export default { category: 'States', }, }, - readonly: { - name: 'readonly', - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, required: { name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', @@ -205,7 +198,6 @@ export default { - [**Checked**](#checked) - [**States**](#states) - [**Disabled**](#disabled) - - [**Readonly**](#readonly) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -235,7 +227,6 @@ const args: BlrRadioType & { hintMessage: 'This is a small hint', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, errorMessage: '', @@ -309,7 +300,7 @@ export const Checked = () => html` Checked.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Radio component can also be disabled or readonly. The error state is documented under [Validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Radio component can also be disabled. The error state is documented under [Validation](#validation). * ### Disabled * The Radio component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -327,20 +318,6 @@ export const Disabled = () => { Disabled.story = { name: ' ' }; -/** - * The Radio component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} - ${BlrRadio({ - ...args, - readonly: true, - label: 'Readonly', - })} - `; -}; - /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/radio/index.test.ts b/packages/ui-library/src/components/radio/index.test.ts index 63875af7e..710c8516b 100644 --- a/packages/ui-library/src/components/radio/index.test.ts +++ b/packages/ui-library/src/components/radio/index.test.ts @@ -13,7 +13,6 @@ const sampleParams: BlrRadioType = { radioId: 'testId', label: 'harald', required: false, - readonly: false, hasHint: true, hasError: false, theme: 'Light_value', diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 3a4004523..d914fb7ec 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -39,7 +39,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti @property() accessor optionId!: string; @property() accessor label!: string; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property({ type: Boolean }) accessor checked: boolean | undefined; @property() accessor name: string | undefined; @property() accessor sizeVariant: InputSizesType | undefined = 'md'; @@ -88,7 +87,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti [this.sizeVariant]: this.sizeVariant, [this.theme]: this.theme, disabled: this.disabled || false, - readonly: this.readonly || false, checked: this.checked || false, error: this.hasError || false, }); @@ -134,7 +132,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti type="radio" name=${this.name} ?disabled=${this.disabled} - ?readonly=${this.readonly} ?invalid=${this.hasError} ?checked=${this.checked} .checked=${this.checked || nothing} @@ -171,7 +168,6 @@ export type PublicReactiveProperties = { optionId: string; label: string; disabled?: boolean; - readonly?: boolean; name?: string; sizeVariant?: InputSizesType; required?: boolean; diff --git a/packages/ui-library/src/components/toggle-switch/index.css.ts b/packages/ui-library/src/components/toggle-switch/index.css.ts index 05a05afc3..18b31aaa0 100644 --- a/packages/ui-library/src/components/toggle-switch/index.css.ts +++ b/packages/ui-library/src/components/toggle-switch/index.css.ts @@ -47,7 +47,7 @@ export const staticStyles = css` outline-style: solid; } - .blr-label-switch-wrapper:not(.disabled, .readonly) { + .blr-label-switch-wrapper:not(.disabled) { cursor: pointer; } @@ -211,20 +211,6 @@ export const staticStyles = css` color: ${toggleswitch.control.ay11icon.iconcolor.inactive.disabled}; } } - - &.readonly { - background-color: ${toggleswitch.control.container.bgcolor.inactive.readonly}; - outline-color: ${toggleswitch.control.container.bordercolor.inactive.readonly}; - - .knob { - outline-color: ${toggleswitch.control.knob.bordercolor.inactive.readonly}; - background-color: ${toggleswitch.control.knob.bgcolor.inactive.readonly}; - } - - .toggle-icon > .toggle-icon-class { - color: ${toggleswitch.control.ay11icon.iconcolor.inactive.readonly}; - } - } } &.checked { @@ -290,19 +276,6 @@ export const staticStyles = css` color: ${toggleswitch.control.ay11icon.iconcolor.active.disabled}; } } - - &.readonly { - background-color: ${toggleswitch.control.container.bgcolor.active.readonly}; - outline-color: ${toggleswitch.control.container.bordercolor.active.readonly}; - - .knob { - outline-color: ${toggleswitch.control.knob.bordercolor.active.readonly}; - } - - .toggle-icon > .toggle-icon-class { - color: ${toggleswitch.control.ay11icon.iconcolor.active.readonly}; - } - } } } @@ -317,14 +290,6 @@ export const staticStyles = css` } } - &.readonly { - > .toggle-content-col { - > .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.readonly}; - } - } - } - &.sm { gap: ${toggleswitch.container.itemspacing.sm}; @@ -379,17 +344,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.sm.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.sm.inactive.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.sm.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.sm.inactive.readonly}); - background-color: ${toggleswitch.control.knob.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -432,17 +386,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.sm.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.sm.active.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.sm.active.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.sm.active.readonly}); - background-color: ${toggleswitch.control.knob.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { @@ -527,17 +470,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.md.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.md.inactive.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.md.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.md.inactive.readonly} * -1); - background-color: ${toggleswitch.control.knob.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -580,17 +512,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.md.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.md.active.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.md.active.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.md.active.readonly} * -1); - background-color: ${toggleswitch.control.knob.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { @@ -672,17 +593,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.lg.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.lg.inactive.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.lg.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.lg.inactive.readonly} * -1); - background-color: ${toggleswitch.control.knob.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -725,17 +635,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.lg.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.lg.active.readonly} * -1); - - .knob { - outline-width: ${toggleswitch.control.knob.borderwidth.lg.active.readonly}; - outline-offset: calc(${toggleswitch.control.knob.borderwidth.lg.active.readonly} * -1); - background-color: ${toggleswitch.control.knob.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { diff --git a/packages/ui-library/src/components/toggle-switch/index.stories.ts b/packages/ui-library/src/components/toggle-switch/index.stories.ts index 3d420b0ae..42461d53e 100644 --- a/packages/ui-library/src/components/toggle-switch/index.stories.ts +++ b/packages/ui-library/src/components/toggle-switch/index.stories.ts @@ -32,7 +32,6 @@ const defaultParams: BlrToggleSwitchType = { hintMessage: 'This is a small hint', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, arialabel: 'Toggle Switch', toogleSwitchId: 'toggle-switchId', name: 'toggle-switch-name', @@ -166,12 +165,6 @@ export default { category: 'Events', }, }, - readonly: { - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, }, parameters: { badges: ['Draft'], @@ -193,8 +186,7 @@ They can also be used to control more complex features, such as the state of a s - [**On Label**](#on-label) - [**Off Label**](#off-label) - [**States**](#states) - - [**Disabled**](#disabled) - - [**Readonly**](#readonly) + - [**Disabled**](#disabled) - [**Dependencies**](#dependencies) - [**Form Caption**](#form-caption) @@ -350,7 +342,7 @@ OffLabel.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Toggle Switch component can also be disabled or readonly. + * Apart from states like rest, hover, pressed and focus, the Toggle Switch component can also be disabled. * ### Disabled * The Toggle Switch component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -380,36 +372,6 @@ export const Disabled = () => { }; Disabled.story = { name: ' ' }; -/** - * ### Readonly - * The Toggle Switch component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} -
- ${BlrToggleSwitchRenderFunction({ - ...defaultParams, - hasStateLabel: false, - readonly: true, - hasHint: false, - label: 'Readonly', - })} - ${BlrToggleSwitchRenderFunction({ - ...defaultParams, - hasStateLabel: true, - readonly: true, - hasHint: false, - label: 'Readonly with state label', - - onLabel: 'On Readonly', - offLabel: 'Off Readonly', - })} -
- `; -}; -Readonly.story = { name: ' ' }; - /** * ## Dependencies * ### Form Caption diff --git a/packages/ui-library/src/components/toggle-switch/index.test.ts b/packages/ui-library/src/components/toggle-switch/index.test.ts index c97d18423..66bfafd04 100644 --- a/packages/ui-library/src/components/toggle-switch/index.test.ts +++ b/packages/ui-library/src/components/toggle-switch/index.test.ts @@ -10,7 +10,6 @@ const sampleParams: BlrToggleSwitchType = { toogleSwitchId: 'switch', label: 'Toggle Switch Option', disabled: false, - readonly: false, active: false, onLabel: 'On', offLabel: 'Off', diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts index 9f337bd0d..0f9637983 100644 --- a/packages/ui-library/src/components/toggle-switch/index.ts +++ b/packages/ui-library/src/components/toggle-switch/index.ts @@ -50,7 +50,6 @@ export class BlrToggleSwitch extends LitElementCustom { @property() accessor name!: string; @property() accessor hasLabel: boolean | undefined; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property() accessor active: boolean | undefined = undefined; @property() accessor hasHint: boolean | undefined; @@ -74,7 +73,7 @@ export class BlrToggleSwitch extends LitElementCustom { } protected handleChange(event: Event) { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.currentCheckedState = !this.currentCheckedState; this.dispatchEvent( createBlrCheckedChangeEvent({ @@ -104,13 +103,13 @@ export class BlrToggleSwitch extends LitElementCustom { @state() protected accessor hovered = false; protected handleEnter = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = true; } }; protected handleLeave = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = false; } }; @@ -118,14 +117,14 @@ export class BlrToggleSwitch extends LitElementCustom { @state() protected accessor pressed = false; protected handlePress = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.pressed = true; this.currentCheckedState = !this.currentCheckedState; } }; protected handleRelease = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.pressed = false; } }; @@ -136,7 +135,6 @@ export class BlrToggleSwitch extends LitElementCustom { 'blr-semantic-action': true, 'blr-label-toggleswitch': true, 'disabled': this.disabled || false, - 'readonly': this.readonly || false, [this.theme]: this.theme, [this.sizeVariant]: this.sizeVariant, [this.hasStateLabel ? 'has-state-label' : '']: this.hasStateLabel, @@ -146,7 +144,6 @@ export class BlrToggleSwitch extends LitElementCustom { 'blr-label-switch-wrapper': true, 'checked': this.currentCheckedState || false, 'disabled': this.disabled || false, - 'readonly': this.readonly || false, 'hover': this.hovered || false, 'active': this.pressed || false, 'focus': this.focused || false, @@ -230,8 +227,7 @@ export class BlrToggleSwitch extends LitElementCustom { class="input-control" id=${this.toogleSwitchId || nothing} name=${this.toogleSwitchId || nothing} - ?disabled=${this.disabled || this.readonly} - ?readonly=${this.readonly} + ?disabled=${this.disabled} .checked=${this.currentCheckedState || nothing} @change=${this.handleChange} tabindex="-1"