[FRNT-531] rewrite chip with new palette (#137)

src/ui/atoms/chip/index.tsx

@@ -4,20 +4,22 @@ import { Variant } from 'lib/types';
 import { box } from 'ui/elements';
 
 interface ChipProps {
-  children?: string;
+  text?: string;
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
   onClick?: React.EventHandler<React.SyntheticEvent>;
+  outlined?: boolean;
   rightIcon?: React.ReactNode;
 }
 
 const ChipBase: React.FC<ChipProps & Variant> = ({
-  children,
+  text,
   className,
   disabled,
   leftIcon,
   onClick,
+  outlined,
   rightIcon,
   variant = 'secondary',
 }) => {
@@ -33,67 +35,126 @@ const ChipBase: React.FC<ChipProps & Variant> = ({
     [onClick],
   );
   return (
-    <div className={className} data-disabled={disabled} data-variant={variant} role={chipRole}>
+    <div
+      className={className}
+      data-disabled={disabled}
+      data-outlined={outlined}
+      data-variant={variant}
+    >
       {leftIcon && (
-        <div data-icon onClick={onClick} onKeyDown={onKeyDown}>
+        <div data-icon="chip-visual-block" onClick={onClick} onKeyDown={onKeyDown}>
           {leftIcon}
         </div>
       )}
-      <div data-text tabIndex={chipTabIndex} onClick={onClick} onKeyDown={onKeyDown}>
-        {children}
+      <div
+        data-text="chip-text-content"
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        role={chipRole}
+        tabIndex={chipTabIndex}
+      >
+        {text}
       </div>
-      {rightIcon && <div data-icon>{rightIcon}</div>}
+      {rightIcon && <div data-icon="chip-action-block">{rightIcon}</div>}
     </div>
   );
 };
 
 export const Chip = styled(ChipBase)`
   ${box}
-  --local-background: var(--woly-shape-default);
+  --local-shape-color: var(--woly-shape-default);
   --local-icon-size: var(--woly-line-height);
-  --local-color: var(--woly-shape-text-default);
+  --local-text-color: var(--woly-shape-text-default);
   --local-border-color: var(--woly-shape-default);
 
   display: flex;
   align-items: center;
 
   box-sizing: border-box;
 
-  color: var(--local-color);
+  color: var(--local-text-color);
   font-size: var(--woly-font-size);
 
-  background-color: var(--local-background);
+  background-color: var(--local-shape-color);
   border: var(--woly-border-width) solid var(--local-border-color);
   border-radius: var(--woly-rounding);
   outline: none;
 
   [data-text] {
+    display: flex;
+    flex: 1;
+
     line-height: var(--woly-line-height);
 
     outline: none;
   }
 
+  [data-icon] {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    svg > path {
+      fill: var(--local-text-color);
+    }
+  }
+
+  [data-icon='chip-action-block'] {
+    --woly-component-level: 0;
+  }
+
+  [data-icon='chip-visual-block'] {
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &[data-outlined='true'] {
+    --local-shape-color: transparent;
+    --local-text-color: var(--woly-shape-default);
+
+    svg > path {
+      fill: var(--woly-shape-default);
+    }
+    &:hover {
+      --local-shape-color: transparent;
+      --local-text-color: var(--woly-shape-hover);
+    }
+
+    &:active,
+    &:focus-within {
+      --local-shape-color: transparent;
+      --local-text-color: var(--woly-shape-active);
+    }
+  }
+
   &[role='button']:focus-within {
-    --local-background: var(--woly-focus);
+    --local-shape-color: var(--woly-shape-active);
     --local-border-color: var(--woly-shape-active);
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-shape-default);
+    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
   &[role='button']:hover {
-    --local-background: var(--woly-shape-hover);
+    --local-text-color: var(--woly-shape-text-hover);
+    --local-shape-color: var(--woly-shape-hover);
     --local-border-color: var(--woly-shape-hover);
   }
 
+  &[role='button']:active {
+    --local-text-color: var(--woly-shape-text-active);
+    --local-shape-color: var(--woly-shape-active);
+    --local-border-color: var(--woly-shape-active);
+  }
+
   &[data-disabled='true'] {
-    --local-background: var(--woly-shape-disabled);
-    --local-text: var(--woly-shape-text-disabled);
+    --local-shape-color: var(--woly-shape-disabled);
+    --local-text-color: var(--woly-shape-text-disabled);
     --local-border-color: var(--woly-shape-disabled);
 
     pointer-events: none;
   }
-
-  [data-icon] {
-    --woly-component-level: 0;
-    display: flex;
-  }
 ` as StyledComponent<'div', Record<string, unknown>, ChipProps & Variant>;