feat(radio): migrate to semantic colors

Author: nlopin

src/components/RadioButton/components/Checkmark.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Colors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 interface CheckmarkProps {
     error?: boolean;
@@ -17,8 +17,8 @@ const Checkmark = styled.input<CheckmarkProps>`
     padding: 0;
     margin: 0 0.5rem 0 0;
 
-    background-color: ${Colors.WHITE};
-    box-shadow: inset 0 0 0 0.125rem ${props => (props.error ? Colors.NEGATIVE_ORANGE_900 : Colors.AUTHENTIC_BLUE_200)};
+    background-color: ${getSemanticValue('background-primary-default')};
+    box-shadow: inset 0 0 0 0.125rem ${props => getSemanticValue(props.error ? 'border-danger-emphasized' : 'border-primary-default')};
     border-radius: 50%;
     transition: background-color 100ms, box-shadow 100ms;
     cursor: pointer;
@@ -41,7 +41,7 @@ const Checkmark = styled.input<CheckmarkProps>`
 
     &:checked {
         box-shadow: inset 0 0 0 0.3125rem
-            ${props => (props.error ? Colors.NEGATIVE_ORANGE_900 : Colors.ACTION_BLUE_900)};
+            ${props => getSemanticValue(props.error ? 'border-danger-emphasized' : 'border-info-emphasized')};
 
         &::after {
             opacity: 1;
@@ -52,20 +52,20 @@ const Checkmark = styled.input<CheckmarkProps>`
 
     &:disabled {
         cursor: not-allowed;
-        background-color: ${Colors.AUTHENTIC_BLUE_50};
-        box-shadow: inset 0 0 0 0.125rem ${Colors.AUTHENTIC_BLUE_50};
+        background-color: ${getSemanticValue('background-tertiary-disabled')};
+        box-shadow: inset 0 0 0 0.125rem ${getSemanticValue('background-tertiary-disabled')};
 
         &:hover {
-            box-shadow: inset 0 0 0 0.125rem ${Colors.AUTHENTIC_BLUE_50};
+            box-shadow: inset 0 0 0 0.125rem ${getSemanticValue('background-tertiary-disabled')};
         }
 
         &:active {
-            background-color: ${Colors.AUTHENTIC_BLUE_50};
+            background-color: ${getSemanticValue('background-tertiary-disabled')};
         }
 
         &:checked {
-            box-shadow: inset 0 0 0 0.3125rem ${Colors.AUTHENTIC_BLUE_50};
-            background-color: ${Colors.WHITE};
+            box-shadow: inset 0 0 0 0.3125rem ${getSemanticValue('background-tertiary-disabled')};
+            background-color: ${getSemanticValue('background-primary-default')};
         }
     }
 `;

src/components/RadioButton/components/LabelWrapper.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { compose, margin, MarginProps, variant } from 'styled-system';
 
-import { Colors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 import { theme } from '../../../essentials/theme';
 import { get } from '../../../utils/themeGet';
 import { RadioButtonProps } from '../RadioButtonProps';
@@ -39,12 +39,12 @@ const hoverStyle = ({ disabled, error }: LabelWrapperProps) => {
         cursor: pointer;
 
         & ${/* sc-selector */ TapArea}:not(:active) {
-            background-color: ${error ? Colors.NEGATIVE_ORANGE_50 : Colors.ACTION_BLUE_50};
+            background-color: ${getSemanticValue(error ? 'background-danger-default' : 'background-info-default')};
         }
 
         & ${/* sc-selector */ Checkmark}:not(:checked) {
-            box-shadow: inset 0 0 0 0.125rem ${error ? Colors.NEGATIVE_ORANGE_900 : Colors.ACTION_BLUE_900};
-            background-color: ${Colors.WHITE};
+            box-shadow: inset 0 0 0 0.125rem ${getSemanticValue(error ? 'border-danger-emphasized' : 'border-info-emphasized')};
+            background-color: ${getSemanticValue('background-primary-default')};
         }
     `;
 };
@@ -55,7 +55,7 @@ const LabelWrapper = styled.label.attrs({ theme })<LabelWrapperProps>`
     position: relative;
     user-select: none;
 
-    color: ${props => (props.disabled ? Colors.AUTHENTIC_BLUE_350 : Colors.AUTHENTIC_BLUE_900)};
+    color: ${props => getSemanticValue(props.disabled ? 'text-disabled' : 'text-primary')};
 
     font-family: ${get('fonts.normal')};
     line-height: 1;

src/components/RadioButton/components/TapArea.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Colors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 const TapArea = styled.div`
     position: absolute;
@@ -12,7 +12,7 @@ const TapArea = styled.div`
     transition: background-color 125ms;
 
     &:active {
-        background-color: ${Colors.AUTHENTIC_BLUE_50};
+        background-color: ${getSemanticValue('background-secondary-default')};
     }
 `;