fix: update token for radio button

Refinitiv · Nov 19, 2024 · a2217d5 · a2217d5
1 parent 3de4a91
commit a2217d5
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/packages/ds-theme/src/custom-elements/ef-radio-button.less b/packages/ds-theme/src/custom-elements/ef-radio-button.less
@@ -1 +1,64 @@
 @import '@refinitiv-ui/halo-theme/src/custom-elements/ef-radio-button';
+
+:host {
+  &:not([checked]):not([readonly]) [part='container']:hover {
+    border-color: @comp-radio-control-container-color-border-hover;
+    background-color: @comp-radio-control-container-color-bg-hover;
+  }
+
+  [part='container'],
+  &:hover:not([checked]):not([indeterminate]):not([readonly]) [part='container'] {
+    border-color: @comp-radio-control-container-color-border-enabled;
+  }
+
+  &[checked] [part='container'] {
+    border-color: @comp-radio-control-container-color-border-checked-enabled;
+    background-color: @comp-radio-control-container-color-bg-checked-enabled;
+  }
+
+  &[checked] [part='check'] {
+    background-color: @comp-radio-indicator-container-color-bg-enabled;
+  }
+
+  [part='label'] {
+    color: @comp-radio-label-color-fg-enabled;
+  }
+
+  [part='label']:hover {
+    color: @comp-radio-label-color-fg-hover;
+  }
+
+  &[disabled],
+  &[disabled] [part='label'],
+  &[disabled][checked] [part='check'] {
+    opacity: @cont-opacity-common-full;
+  }
+
+  &[disabled] [part='container'] {
+    border-color: @comp-radio-control-container-color-border-disabled;
+    background-color: @comp-radio-control-container-color-bg-disabled;
+  }
+
+  &[disabled] [part='label'] {
+    color: @comp-radio-label-color-fg-disabled;
+  }
+
+  &:focus[readonly]:not([checked]) [part='container'],
+  &[readonly] [part='container'] {
+    border-color: @comp-radio-control-container-color-border-read-only;
+    background-color: @comp-radio-control-container-color-bg-read-only;
+  }
+
+  &[readonly][checked] [part='container'] {
+    border-color: @comp-radio-control-container-color-border-checked-read-only;
+    background-color: @comp-radio-control-container-color-bg-checked-read-only;
+  }
+
+  &[readonly][checked] [part='check'] {
+    background-color: @comp-radio-indicator-container-color-bg-read-only;
+  }
+
+  &[readonly] [part='label'] {
+    color: @comp-radio-label-color-fg-read-only;
+  }
+}
diff --git a/packages/ds-theme/src/variables.less b/packages/ds-theme/src/variables.less
@@ -14,6 +14,7 @@
 @import '@lseg-workspace/web-design-tokens/dist/less/component/icon.less';
 @import '@lseg-workspace/web-design-tokens/dist/less/component/menu.less';
 @import '@lseg-workspace/web-design-tokens/dist/less/component/popover.less';
+@import '@lseg-workspace/web-design-tokens/dist/less/component/radio.less';
 @import '@lseg-workspace/web-design-tokens/dist/less/component/remove-button.less';
 @import '@lseg-workspace/web-design-tokens/dist/less/component/toggle-button.less';
 @import '@lseg-workspace/web-design-tokens/dist/less/component/toggle-tag.less';