@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/iconography/Avatar/iconHelpers.tsx

@@ -0,0 +1,186 @@
+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

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

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

@@ -0,0 +1,40 @@
+.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

@@ -0,0 +1,30 @@
+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

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

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

@@ -0,0 +1,143 @@
+@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;
+  }
+}