[FRNT-559] add toast weight (#165)

* add toast weight

* fix chip and button usage

* fix toast styles

src/lib/global.ts

@@ -159,16 +159,16 @@ export const Global = styled.div`
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
   }
 
-  [data-priority='tertiary'] {
+  [data-priority='goast'] {
     --woly-shape-default: transparent;
     --woly-shape-disabled: hsla(var(--bw-200), 1);
     --woly-shape-hover: transparent;
     --woly-shape-active: transparent;
 
-    --woly-shape-text-default: hsla(var(--bw-0), 1);
+    --woly-shape-text-default: hsla(var(--bw-1000), 1);
     --woly-shape-text-disabled: hsla(var(--bw-300), 1);
-    --woly-shape-text-hover: hsla(var(--bw-600), 1);
-    --woly-shape-text-active: hsla(var(--bw-700), 1);
+    --woly-shape-text-hover: hsla(var(--bw-400), 1);
+    --woly-shape-text-active: hsla(var(--bw-500), 1);
 
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: hsla(var(--bw-200), 1);

src/woly/atoms/button-icon/usage.mdx

@@ -62,8 +62,8 @@ Button-icon's size can controlled by block-container and it`s width is equal to
 
 ### Weight and priority
 
-Button-icon can be represented in primary, secondary, default or tertiary priorities and can be styled with fill or outline.
-In case of choosing button-icon in tertiary priority with outline styles use the opposite background color to the text color of button-icon.
+Button-icon can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
+In case of choosing button-icon in goast priority with outline styles use the opposite background color to the text color of button-icon.
 
 <Playground>
   <ButtonIcon
@@ -102,7 +102,7 @@ In case of choosing button-icon in tertiary priority with outline styles use the
   <ButtonIcon
     icon={<IconSearch />}
     onClick={() => console.info('ButtonIcon clicked')}
-    priority="tertiary"
+    priority="goast"
   />
 </Playground>
 

src/woly/atoms/button/usage.mdx

@@ -61,10 +61,12 @@ Secondary priority should be used as a default priority.
   <Button text="Alternative action" priority="secondary" outlined />
 </Playground>
 
-Tertiary priority should be used as an alternative priority to secondary and can`t be used with outline.
+Goast priority should be used as an alternative priority to secondary and can`t be used with outline.
 
 <Playground>
-  <Button text="Alternative action" priority="tertiary" />
+  <block style={{ width: '400px', padding: '30px 50px', background: 'grey' }}>
+    <Button text="Alternative action" priority="goast" />
+  </block>
 </Playground>
 
 ### Icons
@@ -78,7 +80,7 @@ Button can be used with icon on the left side.
 
 ### Sizes
 
-Size controlled by the `component-level` block property not from the props.
+Size is controlled by the `component-level` block property not from the props.
 
 <Playground>
   <block.N>

src/woly/atoms/chip/index.tsx

@@ -89,7 +89,7 @@ export const Chip = styled(ChipBase)`
     outline: none;
   }
 
-  [data-icon] {
+  [data-icon='chip-visual-block'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;
@@ -104,7 +104,7 @@ export const Chip = styled(ChipBase)`
     --woly-component-level: 0;
   }
 
-  [data-icon='chip-visual-block'] {
+  [data-icon] {
     width: var(--local-icon-size);
     height: var(--local-icon-size);
     svg {
@@ -117,7 +117,7 @@ export const Chip = styled(ChipBase)`
     --local-shape-color: transparent;
     --local-text-color: var(--woly-shape-default);
 
-    svg > path {
+    [data-icon='chip-visual-block'] > svg > path {
       fill: var(--woly-shape-default);
     }
     &:hover {

src/woly/atoms/chip/usage.mdx

@@ -23,14 +23,22 @@ As a standalone component, the most common use will be in some form of input.
 
 ### Weight and priority
 
-Chip can be represented in primary, secondary, default or tertiary prioritys and can be styled with fill or outline.
-In case of choosing chip in tertiary priority with outline styles use the opposite background color to the text color of chip.
+Chip can be represented in primary, secondary, default or goast priorities and can be styled with fill or outline.
 
-<Playground direction="horizontal" size="XS">
-  <Chip text="Simple Chip" priority="primary" />
-  <Chip text="Simple Chip" priority="secondary" />
-  <Chip text="Simple Chip" priority="default" />
-  <Chip text="Simple Chip" priority="tertiary" />
+<Playground direction="horizontal" size="S">
+  <div
+    style={{
+      background: 'grey',
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '100px 10px',
+    }}
+  >
+    <Chip text="Simple Chip" priority="primary" />
+    <Chip text="Simple Chip" priority="secondary" />
+    <Chip text="Simple Chip" priority="default" />
+    <Chip text="Simple Chip" priority="goast" />
+  </div>
 </Playground>
 
 <Playground direction="horizontal" size="XS">
@@ -66,7 +74,6 @@ eg button-icon.
     onClick={() => console.info('click')}
     rightIcon={
       <ButtonIcon
-        filled
         icon={<IconClose />}
         onClick={() => console.info('IconClose clicked')}
         priority="primary"
@@ -130,7 +137,6 @@ pass the disable state only to it, make the entire component disable.
     rightIcon={
       <ButtonIcon
         disabled
-        filled
         icon={<IconClose />}
         onClick={() => console.info('IconClose clicked')}
         priority="primary"

src/woly/molecules/toast/index.tsx

@@ -7,18 +7,18 @@ interface ToastProps {
   action?: React.ReactNode;
   className?: string;
   icon?: React.ReactNode;
-  outlined?: boolean;
+  weight?: string;
 }
 
 const ToastBase: React.FC<ToastProps & Priority> = ({
   action,
   children,
   className,
   icon,
-  outlined = false,
+  weight = 'fill',
   priority = 'secondary',
 }) => (
-  <div className={className} data-outlined={outlined} data-priority={priority}>
+  <div className={className} data-weight={weight} data-priority={priority}>
     {icon && <span data-icon="toast">{icon}</span>}
     <div data-content>{children}</div>
     {action && <span data-action>{action}</span>}
@@ -27,10 +27,8 @@ const ToastBase: React.FC<ToastProps & Priority> = ({
 
 export const Toast = styled(ToastBase)`
   ${box}
-  --local-text-color: var(--woly-shape-text-default);
-  --local-shape-color: var(--woly-shape-default);
-  --local-border-color: var(--woly-shape-default);
-  --local-toast-gap: max(9px, calc(1px * var(--woly-component-level) * var(--woly-main-level)));
+  --local-toast-gap: max(var(--woly-const-m), calc(1px * var(--woly-component-level) * var(--woly-main-level)));
+  --local-icon-size: var(--woly-line-height);
 
   display: flex;
   flex-wrap: nowrap;
@@ -39,26 +37,15 @@ export const Toast = styled(ToastBase)`
   min-width: fit-content;
   max-width: 75%;
 
-  color: var(--local-text-color);
   font-size: var(--woly-font-size);
   line-height: var(--woly-line-height);
 
-  background-color: var(--local-shape-color);
-  border: var(--woly-border-width) solid var(--local-border-color);
-  border-radius: var(--woly-rounding);
-  outline: none;
+  border-style: solid;
 
-  &[data-outlined='true'] {
-    color: var(--local-shape-color);
+  border-width: var(--woly-border-width);
 
-    background-color: transparent;
-
-    [data-icon='toast'] {
-      svg > path {
-        fill: var(--local-shape-color);
-      }
-    }
-  }
+  border-radius: var(--woly-rounding);
+  outline: none;
 
   [data-content] {
     display: flex;
@@ -68,7 +55,6 @@ export const Toast = styled(ToastBase)`
 
   [data-icon='toast'] {
     --woly-component-level: 0;
-    --local-icon-size: var(--woly-line-height);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,13 +72,83 @@ export const Toast = styled(ToastBase)`
     }
   }
 
-  &:hover {
-    --local-text-color: var(--woly-shape-text-hover);
-    --local-border-color: var(--woly-shape-hover);
-    --local-shape-color: var(--woly-shape-hover);
+  &[data-weight='fill'] {
+    --local-text-color: var(--woly-shape-text-default);
+    --local-shape-color: var(--woly-shape-default);
+    --local-border-color: var(--woly-shape-default);
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
+  }
+
+  &[data-weight='outline'] {
+    --local-text-color: var(--woly-shape-default);
+    --local-shape-color: transparent;
+    --local-border-color: var(--woly-shape-default);
+
+    color: var(--local-text-color);
+
+    background-color: transparent;
+    border-color: var(--local-text-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
+  }
+
+  &[data-weight='goast'] {
+    --local-text-color: var(--woly-shape-text-default);
+    --local-shape-color: transparent;
+    --local-border-color: var(--woly-shape-text-default);
+    --local-shadow: var(--woly-border-width) var(--woly-border-width)
+      calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
+
+    box-shadow: var(--local-shadow);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
   }
 
-  &:focus {
-    box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
+  &[data-weight='transparent'] {
+    --local-text-color: var(--woly-shape-default);
+    --local-shape-color: transparent;
+    --local-border-color: transparent;
+
+    color: var(--local-text-color);
+
+    background-color: var(--local-shape-color);
+    border-color: var(--local-shape-color);
+
+    [data-icon='toast'] > svg > path {
+      fill: var(--local-text-color);
+    }
+
+    [data-icon='toast'] > svg > g {
+      stroke: var(--local-text-color);
+    }
   }
 ` as StyledComponent<'div', Record<string, unknown>, ToastProps & Priority>;