Fix random issues (#190)

src/dev/global.ts

@@ -54,102 +54,111 @@ export const Global = styled(WolyGlobalStyles)`
 
   [data-priority='default'] {
     --woly-shape-default: hsla(var(--bw-500), 1);
-    --woly-shape-disabled: hsla(var(--bw-200), 1);
+    --woly-shape-disabled: hsla(var(--bw-500), 0.5);
     --woly-shape-hover: hsla(var(--bw-600), 1);
     --woly-shape-active: hsla(var(--bw-700), 1);
 
     --woly-shape-text-default: hsla(var(--bw-1000), 1);
-    --woly-shape-text-disabled: hsla(var(--bw-300), 1);
+    --woly-shape-text-disabled: hsla(var(--bw-300), 0.5);
     --woly-shape-text-hover: hsla(var(--bw-1000), 1);
     --woly-shape-text-active: hsla(var(--bw-1000), 1);
+    --woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);
 
     --woly-canvas-default: transparent;
-    --woly-canvas-disabled: hsla(var(--bw-200), 1);
+    --woly-canvas-disabled: hsla(var(--bw-100), 1);
     --woly-canvas-hover: hsla(var(--bw-600), 1);
     --woly-canvas-active: hsla(var(--bw-700), 1);
 
     --woly-canvas-text-default: hsla(var(--bw-0), 1);
     --woly-canvas-text-disabled: hsla(var(--bw-300), 1);
     --woly-canvas-text-hover: hsla(var(--bw-0), 1);
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
+    --woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
   }
 
   [data-priority='primary'] {
     --woly-shape-default: hsla(var(--primary-500), 1);
-    --woly-shape-disabled: hsla(var(--primary-200), 1);
+    --woly-shape-disabled: hsla(var(--primary-500), 0.5);
     --woly-shape-hover: hsla(var(--primary-600), 1);
     --woly-shape-active: hsla(var(--primary-700), 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-1000), 1);
     --woly-shape-text-active: hsla(var(--bw-1000), 1);
+    --woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);
 
     --woly-canvas-default: transparent;
-    --woly-canvas-disabled: hsla(var(--bw-200), 1);
+    --woly-canvas-disabled: hsla(var(--bw-100), 1);
     --woly-canvas-hover: hsla(var(--primary-600), 1);
     --woly-canvas-active: hsla(var(--primary-700), 1);
 
     --woly-canvas-text-default: hsla(var(--bw-0), 1);
     --woly-canvas-text-disabled: hsla(var(--bw-300), 1);
     --woly-canvas-text-hover: hsla(var(--bw-0), 1);
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
+    --woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
   }
 
   [data-priority='secondary'] {
     --woly-shape-default: hsla(var(--secondary-500), 1);
-    --woly-shape-disabled: hsla(var(--secondary-200), 1);
+    --woly-shape-disabled: hsla(var(--secondary-500), 0.5);
     --woly-shape-hover: hsla(var(--secondary-600), 1);
     --woly-shape-active: hsla(var(--secondary-700), 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-1000), 1);
     --woly-shape-text-active: hsla(var(--bw-1000), 1);
+    --woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);
 
     --woly-canvas-default: transparent;
-    --woly-canvas-disabled: hsla(var(--bw-200), 1);
+    --woly-canvas-disabled: hsla(var(--bw-100), 1);
     --woly-canvas-hover: hsla(var(--secondary-600), 1);
     --woly-canvas-active: hsla(var(--secondary-700), 1);
 
     --woly-canvas-text-default: hsla(var(--bw-0), 1);
     --woly-canvas-text-disabled: hsla(var(--bw-300), 1);
     --woly-canvas-text-hover: hsla(var(--bw-0), 1);
     --woly-canvas-text-active: hsla(var(--bw-0), 1);
+    --woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
   }
 
   [data-priority='white'] {
     --woly-shape-default: hsla(var(--bw-1000), 1);
-    --woly-shape-disabled: hsla(var(--bw-200), 1);
+    --woly-shape-disabled: hsla(var(--bw-1000), 0.5);
     --woly-shape-hover: hsla(var(--bw-400), 1);
     --woly-shape-active: hsla(var(--bw-600), 1);
 
     --woly-shape-text-default: hsla(var(--bw-0), 1);
     --woly-shape-text-disabled: hsla(var(--bw-300), 1);
     --woly-shape-text-hover: hsla(var(--bw-0), 1);
     --woly-shape-text-active: hsla(var(--bw-0), 1);
+    --woly-shape-text-transparent: hsla(var(--bw-0), 0.5);
 
     --woly-canvas-default: transparent;
-    --woly-canvas-disabled: hsla(var(--bw-200), 1);
+    --woly-canvas-disabled: hsla(var(--bw-100), 1);
     --woly-canvas-hover: transparent;
     --woly-canvas-active: transparent;
 
     --woly-canvas-text-default: hsla(var(--bw-0), 1);
     --woly-canvas-text-disabled: hsla(var(--bw-300), 1);
     --woly-canvas-text-hover: hsla(var(--bw-600), 1);
     --woly-canvas-text-active: hsla(var(--bw-700), 1);
+    --woly-canvas-text-transparent: hsla(var(--bw-0), 0.5);
   }
 
   [data-priority='danger'] {
     --woly-shape-default: hsla(var(--danger-500), 1);
-    --woly-shape-disabled: hsla(var(--danger-200), 1);
+    --woly-shape-disabled: hsla(var(--danger-500), 0.5);
     --woly-shape-hover: hsla(var(--danger-600), 1);
     --woly-shape-active: hsla(var(--danger-700), 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-1000), 1);
     --woly-shape-text-active: hsla(var(--bw-1000), 1);
+    --woly-shape-text-transparent: hsla(var(--bw-1000), 0.5);
 
     --woly-canvas-default: transparent;
     --woly-canvas-disabled: hsla(var(--danger-200), 1);
@@ -160,5 +169,6 @@ export const Global = styled(WolyGlobalStyles)`
     --woly-canvas-text-disabled: hsla(var(--danger-300), 1);
     --woly-canvas-text-hover: hsla(var(--danger-600), 1);
     --woly-canvas-text-active: hsla(var(--danger-700), 1);
+    --woly-canvas-text-transparent: hsla(var(--danger-700), 0.5);
   }
 `;

src/dev/playground.tsx

@@ -12,12 +12,14 @@ export { block };
 interface Props {
   size: keyof typeof block;
   direction: 'vertical' | 'horizontal';
+  filled: boolean;
   configurators: ConfiguratorName[];
 }
 
 export const Playground: React.FC<Props> = ({
   size = 'M',
   direction = 'horizontal',
+  filled = true,
   configurators = ['color'],
   children,
 }) => {
@@ -27,13 +29,13 @@ export const Playground: React.FC<Props> = ({
 
   return (
     <PlaygroundWrapper>
-      <Frame>
-        <Global data-scope={scopeId}>
+      <Global data-scope={scopeId}>
+        <Frame data-priority="primary">
           <Wrapper>
             <Container data-dir={direction}>{children}</Container>
           </Wrapper>
-        </Global>
-      </Frame>
+        </Frame>
+      </Global>
       <Configurators id={scopeId} for={configurators} />
     </PlaygroundWrapper>
   );

src/woly/atoms/avatar/index.tsx

@@ -28,12 +28,19 @@ const AvatarBase: React.FC<AvatarProps> = ({
     children = childrenProp;
   } else {
     // render fallback if image loading failed or no src attributes / children provided
-    children = <IconProfile />;
+    children = <Fallback />;
   }
 
   return <div {...props}>{children}</div>;
 };
 
+const Fallback = styled(IconProfile)`
+  > circle:first-of-type {
+    fill: var(--woly-canvas-text-default);
+    fill-opacity: 0.1;
+  }
+`;
+
 export const Avatar = styled(AvatarBase)`
   --local-size: calc((var(--woly-component-level) + 2) * 2 * var(--woly-const-m));
 

src/woly/atoms/backdrop/usage.mdx

@@ -11,7 +11,7 @@ Modal based on `Backdrop`.
   <State initial={false} change={(i) => !i}>
     {(value, change) => (
       <>
-        <Button onClick={change} text="Open modal" />
+        <Button onClick={change} text="Open modal" priority="primary" />
         <Modal visible={value} title="Change customer" onClose={change} priority="primary">
           <form autoComplete="off">
             <Field label="Customer name">

src/woly/atoms/button-icon/index.tsx

@@ -69,9 +69,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
   &[data-weight='fill'] {
     --local-shape-color: var(--woly-shape-default);
     --local-icon-color: var(--woly-shape-text-default);
+    --local-border-color: transparent;
 
     background: var(--local-shape-color);
-    border-color: var(--local-shape-color);
+    border-color: var(--local-border-color);
 
     [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
@@ -93,17 +94,18 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
     &:disabled {
       pointer-events: none;
-      --local-shape-color: var(--woly-canvas-disabled);
-      --local-icon-color: var(--woly-shape-text-disabled);
+      --local-shape-color: var(--woly-shape-disabled);
+      --local-icon-color: var(--woly-shape-text-default);
     }
   }
 
   &[data-weight='outline'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
+    --local-border-color: var(--local-icon-color);
 
     background: var(--local-shape-color);
-    border-color: var(--local-icon-color);
+    border-color: var(--local-border-color);
 
     [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
@@ -125,15 +127,15 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
     &:disabled {
       pointer-events: none;
-      --local-shape-color: var(--woly-shape-text-disabled);
-      --local-icon-color: var(--woly-canvas-text-disabled);
+      --local-shape-color: transparent;
+      --local-icon-color: var(--woly-shape-text-disabled);
     }
   }
 
   &[data-weight='goast'] {
     --local-shape-color: transparent;
     --local-icon-color: var(--woly-shape-default);
-    --local-border-color: var(--woly-shape-default);
+    --local-border-color: transparent;
 
     --local-shadow: var(--woly-border-width) var(--woly-border-width)
       calc(var(--woly-border-width) * 4) hsla(0, 0%, 100%, 50%);
@@ -164,8 +166,8 @@ export const ButtonIcon = styled(ButtonIconBase)`
 
     &:disabled {
       pointer-events: none;
-      --local-shape-color: var(--woly-shape-text-disabled);
-      --local-icon-color: var(--woly-shape-disabled);
+      --local-shape-color: var(--woly-shape-disabled);
+      --local-icon-color: var(--woly-shape-text-disabled);
     }
   }
 

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

@@ -81,9 +81,8 @@ In case of choosing button-icon in black-and-white priority with outline styles
     style={{
       display: 'flex',
       justifyContent: 'space-between',
-      padding: '100px',
+      padding: '24px',
       width: '900px',
-      background: 'lightgrey',
     }}
   >
     <ButtonIcon

src/woly/atoms/button/index.tsx

@@ -53,7 +53,7 @@ export const Button = styled(ButtonBase)`
 
   --local-text-color: var(--woly-shape-text-default);
   --local-shape-color: var(--woly-shape-default);
-  --local-border-color: var(--woly-shape-default);
+  --local-border-color: transparent;
 
   display: flex;
   flex-wrap: nowrap;
@@ -72,6 +72,8 @@ export const Button = styled(ButtonBase)`
   outline: none;
 
   &[data-outlined='true'] {
+    --local-border-color: var(--local-shape-color);
+
     color: var(--local-shape-color);
 
     background: transparent;
@@ -100,13 +102,11 @@ export const Button = styled(ButtonBase)`
 
   &:hover {
     --local-text-color: var(--woly-shape-text-hover);
-    --local-border-color: var(--woly-shape-hover);
     --local-shape-color: var(--woly-shape-hover);
   }
 
   &:active {
     --local-text-color: var(--woly-shape-text-active);
-    --local-border-color: var(--woly-shape-active);
     --local-shape-color: var(--woly-shape-active);
   }
 
@@ -115,8 +115,7 @@ export const Button = styled(ButtonBase)`
   }
 
   &:disabled {
-    --local-text-color: var(--woly-shape-text-disabled);
-    --local-border-color: var(--woly-shape-disabled);
+    --local-text-color: var(--woly-shape-text-default);
     --local-shape-color: var(--woly-shape-disabled);
   }
 ` as StyledComponent<'button', Record<string, unknown>, ButtonProps & Priority>;

src/woly/atoms/chip/index.tsx

@@ -69,7 +69,7 @@ export const Chip = styled(ChipBase)`
   --local-shape-color: var(--woly-shape-default);
   --local-icon-size: var(--woly-line-height);
   --local-text-color: var(--woly-shape-text-default);
-  --local-border-color: var(--woly-shape-default);
+  --local-border-color: transparent;
 
   display: flex;
   align-items: center;
@@ -117,10 +117,7 @@ export const Chip = styled(ChipBase)`
   &[data-outlined='true'] {
     --local-shape-color: transparent;
     --local-text-color: var(--woly-shape-default);
-
-    [data-element='icon'] > svg > path {
-      fill: var(--woly-shape-default);
-    }
+    --local-border-color: var(--woly-shape-default);
 
     &:hover {
       --local-shape-color: transparent;
@@ -136,26 +133,22 @@ export const Chip = styled(ChipBase)`
 
   &[role='button']:focus-within {
     --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-focus);
   }
 
   &[role='button']: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-shape-color: var(--woly-shape-disabled);
-    --local-text-color: var(--woly-shape-text-disabled);
-    --local-border-color: var(--woly-shape-disabled);
+    --local-text-color: var(--woly-shape-text-default);
 
     pointer-events: none;
   }

src/woly/atoms/chip/usage.mdx

@@ -28,10 +28,10 @@ Chip can be represented in primary, secondary, default or white priorities and c
 <Playground direction="horizontal" size="S">
   <div
     style={{
-      background: 'grey',
       display: 'flex',
       justifyContent: 'space-between',
-      padding: '100px 10px',
+      width: 496,
+      padding: '24px',
     }}
   >
     <Chip text="Simple Chip" priority="primary" />

src/woly/atoms/surface/index.tsx

@@ -19,14 +19,17 @@ export const Surface = styled.div.attrs(map)`
   border-radius: var(--woly-rounding);
 
   &[data-weight='fill'] {
+    --local-color: var(--woly-shape-text-default);
+    color: var(--local-color);
+
     background-color: var(--woly-shape-default);
     border-color: var(--woly-shape-default);
-    box-shadow: 3px 3px 8px var(--woly-shape-default);
+    box-shadow: var(--woly-shadow);
   }
 
   &[data-weight='goast'] {
     background-color: var(--woly-background);
     border-color: var(--woly-background);
-    box-shadow: 3px 3px 8px var(--woly-shape-text-disabled);
+    box-shadow: var(--woly-shadow);
   }
 ` as StyledComponent<'div', Record<string, unknown>, SurfaceProps & Priority>;

src/woly/atoms/surface/usage.mdx

@@ -58,7 +58,7 @@ Sign in form based on `Surface`.
         <Popover
           isOpen={false}
           content={
-            <Surface priority="primary" weight="goast">
+            <Surface priority="primary">
               <FormBlock>
                 <Label priority="primary">Name</Label>
                 <Input