@soul-refiner/design-system 0.0.5 → 0.0.6

package/src/iconography/Avatar/iconHelpers.tsx

@@ -1,186 +0,0 @@
-import React from "react";
-import {
-  Circle,
-  CircleDot,
-  Check,
-  Close,
-  Lock,
-  Slash,
-} from "@soul-refiner/icons/src";
-
-export const iconSize = (size: 24 | 32 | 36 | 40 | 64 | 96 | number) => {
-  switch (size) {
-    case 24:
-      return 12;
-    case 32:
-      return 14;
-    case 36:
-      return 14;
-    case 40:
-      return 15;
-    case 64:
-      return 16;
-    case 96:
-      return 18;
-    case 128:
-      return 22;
-    default:
-      return 18;
-  }
-};
-
-export const iconDisplacement = (
-  size: 24 | 32 | 36 | 40 | 64 | 96 | number
-) => {
-  switch (size) {
-    case 24:
-      return -2;
-    case 32:
-      return -2;
-    case 36:
-      return 0;
-    case 40:
-      return -1;
-    case 64:
-      return 2;
-    case 96:
-      return 5;
-    default:
-      return 10;
-  }
-};
-
-export const presenceIcon = ({
-  presence,
-  size,
-}: {
-  presence?: "online" | "busy" | "focus" | "offline";
-  size: 24 | 32 | 36 | 40 | 64 | 96 | 128;
-}) => {
-  switch (presence) {
-    case "busy":
-      const busySize =
-        size === 24
-          ? 5
-          : size === 32
-          ? 6
-          : size === 36
-          ? 6
-          : size === 40
-          ? 6
-          : size === 64
-          ? 7
-          : size === 96
-          ? 8
-          : 10;
-      return <Slash fill="white" size={busySize} iconSize={busySize * 0.75} />;
-    case "focus":
-      const focusSize =
-        size === 24
-          ? 8
-          : size === 32
-          ? 10
-          : size === 36
-          ? 10
-          : size === 40
-          ? 11
-          : size === 64
-          ? 12
-          : size === 96
-          ? 14
-          : 16;
-      return (
-        <CircleDot
-          fill="var(--color-purple)"
-          size={focusSize}
-          iconSize={focusSize}
-        />
-      );
-    case "offline":
-      const offlineSize =
-        size === 24
-          ? 4
-          : size === 32
-          ? 4.5
-          : size === 36
-          ? 5
-          : size === 40
-          ? 5
-          : size === 64
-          ? 6
-          : size === 96
-          ? 8
-          : 10;
-      return (
-        <Circle
-          fill="var(--color-grey-3)"
-          size={offlineSize * 2}
-          iconSize={offlineSize}
-          style={{ backgroundColor: "#FFFFFF" }}
-        />
-      );
-    case "online":
-      const onlineSize =
-        size === 24
-          ? 4
-          : size === 32
-          ? 4.5
-          : size === 36
-          ? 5
-          : size === 40
-          ? 5
-          : size === 64
-          ? 6
-          : size === 96
-          ? 8
-          : 10;
-      return (
-        <Circle
-          fill="var(--color-green-5)"
-          size={onlineSize * 2}
-          iconSize={onlineSize}
-        />
-      );
-    default:
-      return <></>;
-  }
-};
-
-export const statusIcon = ({
-  status,
-  size,
-}: {
-  status?: "approved" | "declined" | "locked";
-  size: 24 | 32 | 36 | 40 | 64 | 96 | number;
-}) => {
-  const iconSize =
-    size === 24
-      ? 4
-      : size === 32
-      ? 6
-      : size === 36
-      ? 6
-      : size === 40
-      ? 7
-      : size === 64
-      ? 8
-      : size === 96
-      ? 10
-      : 12;
-  switch (status) {
-    case "approved":
-      return <Check fill="white" size={1.25 * iconSize} iconSize={iconSize} />;
-    case "declined":
-      return <Close fill="white" size={1.25 * iconSize} iconSize={iconSize} />;
-    case "locked":
-      return (
-        <Lock
-          fill="var(--color-grey-7)"
-          size={1.25 * iconSize}
-          iconSize={iconSize}
-        />
-      );
-    default:
-      return <></>;
-  }
-};

package/src/iconography/Avatar/index.ts

@@ -1 +0,0 @@
-export { Avatar, type AvatarProps } from "./Avatar";

package/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/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/src/iconography/ColoredIcon/index.ts

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

package/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;
-  }
-}