@soul-refiner/design-system 0.0.18 → 0.0.20

package/dist/src/iconography/ColoredIcon/ColoredIcon.module.scss

@@ -1,40 +0,0 @@
-.ColoredIcon {
-  height: 48px;
-  width: 48px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius-small);
-  &.purple {
-    background-color: var(--colorify-purple-2);
-    svg {
-      fill: var(--colorify-purple-3);
-    }
-  }
-  &.orange {
-    background-color: var(--colorify-orange-2);
-    svg {
-      fill: var(--colorify-orange-3);
-    }
-  }
-  &.pink {
-    background-color: var(--colorify-pink-2);
-    svg {
-      fill: var(--colorify-pink-3);
-    }
-  }
-  &.mint {
-    background-color: var(--colorify-mint-2);
-    svg {
-      fill: var(--colorify-mint-3);
-    }
-  }
-  &.blue {
-    background-color: var(--colorify-blue-2);
-    svg {
-      fill: var(--colorify-blue-3);
-    }
-  }
-}

package/dist/src/iconography/ColoredIcon/ColoredIcon.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import styles from "./ColoredIcon.module.scss";
-
-export enum Colors {
-  orange,
-  purple,
-  pink,
-  mint,
-  blue,
-  ocean,
-}
-
-export interface ColoredIconProps extends React.PropsWithChildren {
-  onClick: () => void;
-  color: Colors;
-}
-
-export const ColoredIcon = ({
-  color = Colors.orange,
-  onClick,
-  children,
-}: ColoredIconProps) => {
-  return (
-    <button onClick={onClick} className={styles.ColoredIcon + ` ${color}`}>
-      {children}
-    </button>
-  );
-};
-
-export default ColoredIcon;

package/dist/src/iconography/ColoredIcon/index.ts

@@ -1,5 +0,0 @@
-export {
-  ColoredIcon,
-  type ColoredIconProps,
-  Colors as ColoredIconColors,
-} from "./ColoredIcon";

package/dist/src/iconography/DevicePreview/DevicePreview.module.scss

@@ -1,143 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.frame {
-  object-fit: cover;
-  overflow: hidden;
-  width: calc(100% + 17px);
-}
-
-.wrapper {
-  max-width: 100vw;
-}
-
-.statusbar {
-  @include mixins.flex($align: center, $justify: space-between);
-  height: 47px;
-  padding: 0px 17px 0px 35px;
-
-  &[class~="dark"] {
-    background-color: var(--color-grey-2);
-    p {
-      color: #ffffff;
-    }
-  }
-
-  &[class~="light"] {
-    background-color: #ffffff;
-  }
-
-  p {
-    @include mixins.font(400, 16px, 19px);
-  }
-
-  div {
-    @include mixins.flex($gap: 7px);
-  }
-}
-
-.urlbar {
-  height: 53px;
-  padding: 7px 10px 10px;
-  position: relative;
-  top: -1px;
-
-  &[class~="dark"] {
-    background-color: var(--color-grey-2);
-    p {
-      color: #ffffff;
-    }
-  }
-
-  &[class~="light"] {
-    background-color: #ffffff;
-    & > div {
-      background-color: var(--color-grey-9);
-    }
-  }
-
-  & > div {
-    @include mixins.flex($align: center, $justify: space-between);
-    background-color: rgba(255, 255, 255, 0.2);
-    padding: 9px 10px;
-    border-radius: 10px;
-
-    p {
-      @include mixins.font(400, 16px, 19px);
-    }
-
-    div {
-      @include mixins.flex($gap: 4px);
-    }
-  }
-}
-
-.laptop {
-  @include mixins.flex($align: center, $justify: space-between);
-  height: 56px;
-  padding: 18px 24px;
-
-  div {
-    @include mixins.flex($align: center);
-  }
-
-  &[class~="dark"] {
-    [class~="url"] {
-      border: 1px solid #5d5d5d;
-      p {
-        color: #ffffff;
-      }
-    }
-  }
-
-  &[class~="light"] {
-    background-color: #ffffff;
-    [class~="url"] {
-      background-color: var(--color-grey-9);
-      p {
-        color: #000000;
-      }
-    }
-  }
-
-  [class~="left"] {
-    gap: 8px;
-    div {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-    }
-    div:first-child {
-      background-color: #ed685d;
-    }
-    div:nth-child(2) {
-      background-color: #f4be50;
-    }
-    div:nth-child(3) {
-      background-color: #61c554;
-    }
-    div:nth-child(4) {
-      margin-left: 24px;
-      margin-right: 16px;
-    }
-  }
-
-  [class~="url"] {
-    width: 640px;
-    gap: 4px;
-    padding: 6px 10px;
-    border-radius: 10px;
-
-    div:first-child {
-      margin-left: auto;
-    }
-    p {
-      @include mixins.font(400, 14px, 16px);
-      margin-right: auto;
-      margin-left: 4px;
-    }
-  }
-
-  [class~="right"] {
-    gap: 36px;
-  }
-}