Refactor variables and use rgb

2026-01-02 13:33:09 +00:00 · 2024-11-26 17:37:03 +01:00 · 2024-11-26 17:37:03 +01:00 · b3d47ca71e
commit b3d47ca71e
parent 27e93d99e8
41 changed files with 472 additions and 335 deletions
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -5,33 +5,10 @@
 />
 <style>
  :root {
-    --codex-background: rgb(23 23 23);
-    --codex-color: #e1e4d9;
-    --codex-color-contrast: #f8f8f8;
-    --codex-color-error: 239, 68, 68;
-    --codex-color-warning: 234, 179, 8;
-    --codex-color-success: 20, 184, 166;
-    --codex-color-blue: 30, 64, 175;
-    --codex-color-primary: #c1f0a4;
-    --codex-color-grey: 170, 170, 170;
-    --codex-color-primary-variant: #c1f0a4cc;
-    --codex-color-on-primary: #333;
-    --codex-color-disabled: #717171;
-    --codex-color-light: #aba9ad;
-    --codex-border-color: rgb(82 82 82);
-    --codex-background-secondary: rgb(38 38 38);
-    --codex-background-light: rgb(64 64 64);
-    --codex-background-backdrop: rgba(70, 70, 70, 0.75);
-    --codex-border-radius: 0.5rem;
-    --codex-font-size: 0.875rem;
    --codex-font-family: Inter, ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
      sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
      Noto Color Emoji;
-    --codex-input-label-color: #7b7b7b;
-    --codex-input-border-color: #494949;
-    --codex-input-background: #232323;
-    --codex-input-color-error: rgb(--codex-color-error);

    font-family: var(--codex-font-family);
    font-feature-settings: normal;
@ -40,7 +17,6 @@
    font-size: 0.875rem;
    line-height: 1.5rem;

-    font-size: var(--codex-font-size);
    color-scheme: dark;
  }
 </style>
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "@codex-storage/marketplace-ui-components",
-  "version": "0.0.47",
+  "version": "0.0.48",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@codex-storage/marketplace-ui-components",
-      "version": "0.0.47",
+      "version": "0.0.48",
      "license": "MIT",
      "devDependencies": {
        "@codex-storage/sdk-js": "^0.0.15",
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
    "type": "git",
    "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
  },
-  "version": "0.0.47",
+  "version": "0.0.48",
  "type": "module",
  "scripts": {
    "prepack": "npm run build",
--- a/src/assets/icons/asc.svg
+++ b/src/assets/icons/asc.svg
@ -8,7 +8,7 @@
  <g clipPath="url(#clip0_326_785)">
    <path
      d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
-      fill="#969696"
+      fill="rgb(150, 150, 150)"
    />
  </g>
  <defs>
--- a/src/assets/icons/close.svg
+++ b/src/assets/icons/close.svg
@ -1,10 +1,4 @@
-<svg
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10.0001 8.93955L13.7126 5.22705L14.7731 6.28755L11.0606 10.0001L14.7731 13.7126L13.7126 14.7731L10.0001 11.0606L6.28755 14.7731L5.22705 13.7126L8.93955 10.0001L5.22705 6.28755L6.28755 5.22705L10.0001 8.93955Z"
    fill="currentColor"
--- a/src/assets/icons/copy.svg
+++ b/src/assets/icons/copy.svg
@ -1,6 +1,6 @@
 <svg viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7 5.5V3.25C7 3.05109 7.07902 2.86032 7.21967 2.71967C7.36032 2.57902 7.55109 2.5 7.75 2.5H16.75C16.9489 2.5 17.1397 2.57902 17.2803 2.71967C17.421 2.86032 17.5 3.05109 17.5 3.25V13.75C17.5 13.9489 17.421 14.1397 17.2803 14.2803C17.1397 14.421 16.9489 14.5 16.75 14.5H14.5V16.75C14.5 17.164 14.1625 17.5 13.7448 17.5H4.75525C4.65635 17.5006 4.5583 17.4816 4.46674 17.4442C4.37519 17.4068 4.29192 17.3517 4.22174 17.282C4.15156 17.2123 4.09584 17.1294 4.05779 17.0381C4.01974 16.9468 4.0001 16.8489 4 16.75L4.00225 6.25C4.00225 5.836 4.33975 5.5 4.7575 5.5H7ZM5.50225 7L5.5 16H13V7H5.50225ZM8.5 5.5H14.5V13H16V4H8.5V5.5Z"
-    fill="#969696"
+    fill="rgb(150, 150, 150)"
  />
 </svg>
--- a/src/assets/icons/desc.svg
+++ b/src/assets/icons/desc.svg
@ -8,7 +8,7 @@
  <g clipPath="url(#clip0_326_787)">
    <path
      d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
-      fill="#969696"
+      fill="rgb(150, 150, 150)"
    />
  </g>
  <defs>
--- a/src/assets/icons/download-file.svg
+++ b/src/assets/icons/download-file.svg
@ -1,6 +1,6 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M4 15.25H16V10H17.5V16C17.5 16.1989 17.421 16.3897 17.2803 16.5303C17.1397 16.671 16.9489 16.75 16.75 16.75H3.25C3.05109 16.75 2.86032 16.671 2.71967 16.5303C2.57902 16.3897 2.5 16.1989 2.5 16V10H4V15.25ZM11.5 7.75H15.25L10 13L4.75 7.75H8.5V3.25H11.5V7.75Z"
-    fill="#969696"
+    fill="rgb(150, 150, 150)"
  />
 </svg>
--- a/src/assets/icons/favorite.svg
+++ b/src/assets/icons/favorite.svg
@ -7,6 +7,6 @@
 >
  <path
    d="M9.99999 13.75L5.59149 16.4425L6.78999 11.4175L2.86749 8.0575L8.01624 7.645L9.99999 2.875L11.9837 7.645L17.1332 8.0575L13.21 11.4175L14.4085 16.4425L9.99999 13.75Z"
-    fill="#969696"
+    fill="rgb(150, 150, 150)"
  />
 </svg>
--- a/src/assets/icons/previous.svg
+++ b/src/assets/icons/previous.svg
@ -7,6 +7,6 @@
 >
  <path
    d="M9.70425 9.99907L13.4168 13.7116L12.3563 14.7721L7.58325 9.99907L12.3563 5.22607L13.4168 6.28657L9.70425 9.99907Z"
-    fill="#969696"
+    fill="rgb(150, 150, 150)"
  />
 </svg>
--- a/src/components/Alert/alert.css
+++ b/src/components/Alert/alert.css
@ -1,10 +1,21 @@
+@property --codex-alert-color {
+  syntax: "<length>#";
+  inherits: false;
+  initial-value: 111, 203, 148;
+}
+
+@property --codex-alert-border-radius {
+  syntax: "<length>#";
+  inherits: false;
+  initial-value: 6px;
+}
+
 .alert {
  border-bottom: 2px solid rgb(var(--codex-alert-color));
-  background-color: rgba(var(--codex-alert-color), 0.1);
+  background-color: rgba(var(--codex-alert-color), 0.2);
  color: 1px solid var(--codex-alert-color);
-  border-radius: var(--codex-border-radius);
-  padding: 0.75rem 1.5rem;
-  font-family: var(--codex-font-family);
+  border-radius: var(--codex-alert-border-radius);
+  padding: 12px;
  word-break: break-word;
  display: flex;
  gap: 1rem;
@ -30,17 +41,15 @@
  }

  svg {
-    color: rgba(var(--codex-alert-color));
+    color: rgb(var(--codex-alert-color));
    min-width: 20px;
  }

  &.alert--success {
-    --codex-alert-color: var(--codex-color-success);
+    --codex-alert-color: 111, 203, 148;
  }

  &.alert--warning {
-    --codex-alert-color: var(--codex-color-warning);
-    background-color: #fbc64b33;
-    border-color: #ffc800;
+    --codex-alert-color: 251, 198, 75;
  }
 }
--- a/src/components/Backdrop/Backdrop.tsx
+++ b/src/components/Backdrop/Backdrop.tsx
@ -1,52 +1,18 @@
-import { CSSProperties, useEffect } from "react";
 import "./backdrop.css";
 import { attributes } from "../utils/attributes";

-interface CustomStyleCSS extends CSSProperties {
-  "--codex-background-backdrop"?: string;
-}
-
 type Props = {
  open: boolean;

  onClose: () => void;

-  /**
-   * Apply custom css variables.
-   * --codex-background-backdrop
-   */
-  style?: CustomStyleCSS;
-
-  /**
-   * If true, it will remove the overflow scroll from the page when open.
-   * Default: false
-   */
-  removeScroll?: boolean;
-
  className?: string;
 };

-export function Backdrop({
-  open,
-  onClose,
-  style,
-  className = "",
-  removeScroll = false,
-}: Props) {
+export function Backdrop({ open, onClose, className = "" }: Props) {
  const attr = attributes({ "aria-expanded": open });

-  useEffect(() => {
-    if (removeScroll) {
-      document.documentElement.classList.toggle("document-noOverflow");
-    }
-  }, [open, removeScroll]);
-
  return (
-    <div
-      {...attr}
-      className={"backdrop " + className}
-      onClick={onClose}
-      style={style}
-    ></div>
+    <div {...attr} className={"backdrop " + className} onClick={onClose}></div>
  );
 }
--- a/src/components/Backdrop/backdrop.css
+++ b/src/components/Backdrop/backdrop.css
@ -1,4 +1,12 @@
+@property --codex-backdrop-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(70, 70, 70, 0.75);
+}
+
 .backdrop {
+  background: var(--codex-backdrop-background-color, rgba(70, 70, 70, 0.75));
+
  opacity: 0;
  transition: opacity 0.25s;
  height: 100%;
@ -6,7 +14,6 @@
  position: fixed;
  top: 0;
  left: 0;
-  background: var(--codex-background-backdrop);
  backdrop-filter: blur(2px);
  display: block;
  z-index: -1;
@ -16,7 +23,3 @@
    opacity: 1;
  }
 }
-
-.document-noOverflow {
-  overflow: hidden;
-}
--- a/src/components/Button/button.css
+++ b/src/components/Button/button.css
@ -1,3 +1,33 @@
+@property --codex-button-padding {
+  syntax: "*";
+  inherits: false;
+  initial-value: 9px 10px;
+}
+
+@property --codex-button-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(150, 150, 150);
+}
+
+@property --codex-button-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --codex-button-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(47, 47, 47, 1);
+}
+
+@property --codex-button-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 8px;
+}
+
 .button {
  &.button--medium {
    --codex-button-padding: 9px 10px;
@ -8,70 +38,60 @@
    height: 40px;
  }

-  border-radius: 8px;
  outline: none;
  padding: var(--codex-button-padding);
  display: flex;
-  place-items: center;
  gap: 2px;
  font-weight: 500;
  position: relative;
-  border: none;
  transition:
    box-shadow 0.35s,
    opacity 0.35s;
-  font-family: Inter;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.006em;
-  border: 1px solid transparent;
+  place-items: center;
  place-content: center;
+  background-color: var(--codex-button-background-color, transparent);
+  color: var(--codex-button-color, rgb(150, 150, 150));
+  border: 1px solid var(--codex-button-border-color);
+  border-radius: var(--codex-button-border-radius);

  &[aria-busy] {
    cursor: wait;
  }

  &[aria-busy]::after {
+    --codex-button-background-color: rgba(70, 70, 70, 0.75);
+
    content: " ";
    display: block;
-    background-image: var(
-      --codex-button-loader,
-      url('data:image/svg+xml,<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50" xml:space="preserve"><path fill="%23FFF" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>')
-    );
+    background-image: url('data:image/svg+xml,<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background: new 0 0 50 50" xml:space="preserve"><path fill="%23FFF" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>');
    position: absolute;
-    background-color: var(
-      --codex-button-background-busy,
-      var(--codex-background-backdrop)
-    );
-
-    /**
-     * Set full size and add border.
-     */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
-
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    left: -1px;
    right: 0;
-    border-radius: var(--codex-border-radius);
  }

  &.button--primary:not(:disabled):hover {
    cursor: pointer;
-    box-shadow: 0 0 0 3px var(--codex-button-color-box-shadow, #6fcb94cc);
+    box-shadow: 0 0 0 3px rgba(111, 203, 148, 0.8);
  }

  &.button--outline:not(:disabled):hover {
    cursor: pointer;
-    box-shadow: 0 0 0 2px var(--codex-border-color);
+    box-shadow: 0 0 0 2px var(--codex-button-border-color);
  }

  &.button--primary {
-    background-color: #6fcb94;
-    color: var(--codex-color-on-primary);
+    --codex-button-color: rgba(0, 0, 0);
+    --codex-button-background-color: rgb(111, 203, 148);
+    --codex-button-border-color: rgb(151, 234, 184);
  }

  &:disabled {
@ -79,18 +99,18 @@
  }

  &.button--primary:disabled {
-    background-color: var(--codex-color-disabled);
+    --codex-button-border-color: rgba(111, 203, 148, 0.47);
+    --codex-button-background-color: rgba(111, 203, 148, 0.47);
  }

  &.button--outline:disabled {
-    color: var(--codex-color-disabled);
+    --codex-button-background-color: rgba(70, 70, 70, 0.75);
  }

  &.button--outline {
-    color: var(--codex-color-outline, var(--codex-color-contrast));
-    border-color: var(--codex-border-color);
-    background-color: #2f2f2f;
-    color: #969696;
+    --codex-button-color: rgb(150, 150, 150);
+    --codex-button-border-color: rgba(150, 150, 150, 0.2);
+    --codex-button-background-color: rgb(47, 47, 47);
  }

  span {
--- a/src/components/ButtonIcon/buttonIcon.css
+++ b/src/components/ButtonIcon/buttonIcon.css
@ -1,34 +1,58 @@
+@property --codex-button-icon-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(47, 47, 47);
+}
+
+@property --codex-button-icon-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
+@property --codex-button-icon-color-disabled {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(47, 47, 47) 33;
+}
+
+@property --codex-button-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 60px;
+}
+
 .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: var(
-    --codex-button-icon-background,
-    var(--codex-background-light)
-  );
+  background-color: var(--codex-button-icon-background-color, rgb(47, 47, 47));
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.35s;
  border: none;
  gap: 6px;
+  border: 1px solid var(--codex-button-icon-border-color);
+  height: var(--codex-button-icon-size, 60px);
+  width: var(--codex-button-icon-size, 60px);
+  padding: 0;

  &.button-icon--big {
-    width: 4rem;
-    height: 4rem;
+    --codex-button-icon-size: 60px;
  }

  &.button-icon--small {
-    width: 2rem;
-    height: 2rem;
+    --codex-button-icon-size: 40px;
  }

  &:not(:disabled):hover {
    cursor: pointer;
-    box-shadow: 0 0 0 2px var(--codex-border-color);
+    box-shadow: 0 0 0 2px
+      var(--codex-button-icon-border-color, rgba(150, 150, 150, 0.2));
  }

  &:disabled {
-    color: var(--codex-color-disabled);
+    color: var(--codex-button-icon-color-disabled, rgb(113, 113, 113));
    cursor: not-allowed;
  }

--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@ -67,7 +67,7 @@ type Props = {

  id: string;

-  size?: "big" | "medium";
+  variant?: "big" | "medium";
 };

 export function Dropdown({
@ -83,7 +83,7 @@ export function Dropdown({
  onSelected,
  value = "",
  className = "",
-  size = "big",
+  variant = "medium",
 }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const lower = value.toLocaleLowerCase();
@ -140,7 +140,7 @@ export function Dropdown({
          value={value}
          label={""}
          id={id}
-          size={size as any}
+          variant={variant}
        />

        <ul {...attr}>
--- a/src/components/Dropdown/dropdown.css
+++ b/src/components/Dropdown/dropdown.css
@ -1,9 +1,33 @@
+@property --codex-dropdown-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(150, 150, 150);
+}
+
+@property --codex-dropdown-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(20, 20, 20, 0.6);
+}
+
+@property --codex-dropdown-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
+@property --codex-dropdown-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
 .dropdown {
  label {
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
    font-weight: 500;
    display: block;
-    color: var(--codex-color);
+    color: var(--codex-dropdown-color);
  }

  > div {
@ -14,11 +38,12 @@
    position: absolute;
    padding: 0.5rem;
    background-color: var(
-      --codex-dropdown-panel-background,
-      var(--codex-background-secondary)
+      --codex-dropdown-background-color,
+      rgba(20, 20, 20, 0.6)
    );
-    border: var(--codex-dropdown-border, 1px solid var(--codex-border-color));
-    border-radius: var(--codex-border-radius);
+    border: 1px solid
+      var(--codex-dropdown-border-color, rgba(150, 150, 150, 0.2));
+    border-radius: var(--codex-dropdown-border-radius, 10px);
    left: 0;
    right: 0;
    opacity: 0;
@ -39,7 +64,7 @@

    li {
      padding: 0.5rem;
-      border-radius: var(--codex-border-radius);
+      border-radius: 10px;
      transition: background-color 0.35s;
      cursor: pointer;
      display: flex;
@ -47,10 +72,7 @@
      gap: 0.75rem;

      &:hover {
-        background-color: var(
-          --codex-dropdown-option-background-hover,
-          var(--codex-background-light)
-        );
+        --codex-dropdown-background-color: rgba(20, 20, 20, 0.2);
      }

      div {
--- a/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx
+++ b/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx
@ -9,7 +9,7 @@ export function EmptyPlaceholderIcon({ width, className }: Props) {
  return (
    <svg
      width={width}
-      className={`${className} emptyPlaceholderIcon`}
+      className={`${className} empty-placeholder-icon`}
      viewBox="0 0 178 90"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
--- a/src/components/EmptyPlaceholder/emptyPlaceholderIcon.css
+++ b/src/components/EmptyPlaceholder/emptyPlaceholderIcon.css
@ -1,20 +1,20 @@
-.dark\:fill-neutral-800 {
-  fill: #262626;
-}
-
-.dark\:fill-neutral-700 {
-  fill: #404040;
-}
-
-.dark\:fill-neutral-700\/30 {
-  fill: rgb(64 64 64 / 0.3);
-}
-
-.dark\:fill-neutral-700\/70 {
-  fill: rgb(64 64 64 / 0.7);
-}
-
-.emptyPlaceholderIcon {
+.empty-placeholder-icon {
  border: none;
-  color: var(--codex-background-secondary);
+  color: rgb(38 38 38);
+
+  .dark\:fill-neutral-800 {
+    fill: rgb(38, 38, 38);
+  }
+
+  .dark\:fill-neutral-700 {
+    fill: rgb(64, 64, 64);
+  }
+
+  .dark\:fill-neutral-700\/30 {
+    fill: rgb(64 64 64 / 0.3);
+  }
+
+  .dark\:fill-neutral-700\/70 {
+    fill: rgb(64 64 64 / 0.7);
+  }
 }
--- a/src/components/Failure/failure.css
+++ b/src/components/Failure/failure.css
@ -9,7 +9,6 @@
    font-size: var(--codex-code-font-size, 6rem);
    line-height: 1;
    color: var(--codex-text-contrast);
-    font-family: var(--codex-font-family);
    margin: 0;
  }

--- a/src/components/Input/input.css
+++ b/src/components/Input/input.css
@ -1,18 +1,65 @@
+@property --codex-input-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 64px;
+}
+
+@property --codex-input-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(20, 20, 20, 0.6);
+}
+
+@property --codex-input-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --codex-input-label-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgb(123, 123, 123);
+}
+
+@property --codex-input-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
+@property --codex-input-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
+@property --codex-input-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
 .input {
  &.input--big {
    --codex-input-height: 64px;
+    --codex-input-padding: 16px;
  }

  &.input--medium {
    --codex-input-height: 40px;
+    --codex-input-padding: 10px;
  }

  input {
-    background-color: #14141499;
-    color: white;
-    border-radius: var(--codex-border-radius);
-    border: 1px solid var(--codex-input-border-color);
-    padding: 16px;
+    background-color: var(
+      --codex-input-background-color,
+      rgba(20, 20, 20, 0.6)
+    );
+    color: var(--codex-input-color, white);
+    border-radius: var(--codex-input-border-radius, 10px);
+    border: 1px solid var(--codex-input-border-color, rgba(150, 150, 150, 0.2));
+    padding: var(--codex-input-padding, 16px);
    outline: none;
    display: inline-block;
    box-sizing: border-box;
@ -20,14 +67,14 @@
    font-size: 20px;
    height: var(--codex-input-height);
    position: relative;
-    font-family: Inter;
+    font-family: var(--codex-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.006em;

    &::placeholder {
-      font-family: Inter;
+      font-family: var(--codex-font-family);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
@ -36,14 +83,13 @@
  }

  &.input--invalid input {
-    color: var(--codex-input-color-error);
-    border-color: var(--codex-input-color-error);
+    --codex-input-color: rgb(251, 55, 72);
+    --codex-input-border-color: rgb(251, 55, 72);
  }

  label {
    margin-bottom: 0.75rem;
    display: block;
-    font-family: var(--codex-input-font-family, var(--codex-font-family));
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
@ -54,11 +100,11 @@

  & input:not(.input[disabled]):active,
  & input:not(.input[disabled]):focus {
-    box-shadow: 0 0 0 1px var(--codex-border-color);
+    box-shadow: 0 0 0 1px var(--codex-input-border-color);
  }

  & input[disabled] {
-    background-color: var(--codex-input-background-disabled);
+    --codex-input-background-color: rgba(70, 70, 70, 0.75);
    cursor: not-allowed;
  }

@ -86,7 +132,7 @@
    color: var(--codex-input-label-color);
  }

-  &.input--invalid small {
-    color: var(--codex-color-error-hexa);
+  &.input--invalid {
+    --codex-input-label-color: rgb(251, 55, 72);
  }
 }
--- a/src/components/InputGroup/inputGroup.css
+++ b/src/components/InputGroup/inputGroup.css
@ -1,3 +1,15 @@
+@property --codex-input-group-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
+@property --codex-input-group-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
 .input-group {
  box-sizing: border-box;

@ -21,9 +33,9 @@
      > div:nth-child(2) {
        display: flex;
        align-items: center;
-        border: 1px solid var(--codex-border-color);
-        border-top-right-radius: var(--codex-border-radius);
-        border-bottom-right-radius: var(--codex-border-radius);
+        border: 1px solid var(--codex-input-group-border-color);
+        border-top-right-radius: var(--codex-input-group-border-radius);
+        border-bottom-right-radius: var(--codex-input-group-border-radius);
        height: 64px;
        box-sizing: border-box;

--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@ -124,7 +124,7 @@ export function Modal({
            </div>
            <ButtonIcon
              onClick={internalClose}
-              Icon={CloseIcon}
+              Icon={() => <CloseIcon width={20}></CloseIcon>}
              variant="small"
            ></ButtonIcon>
          </header>
--- a/src/components/Modal/modal.css
+++ b/src/components/Modal/modal.css
@ -15,7 +15,7 @@
    position: fixed;
    display: flex;
    flex-direction: column;
-    background: #232323;
+    background: rgb (35, 35, 35);
    border-radius: 16px;
    border: none;
    margin: 0;
@ -40,7 +40,7 @@

      .button-icon {
        background-color: transparent;
-        border: 1px solid #96969633;
+        border: 1px solid rgba(150, 150, 150, 0.2);
      }

      svg {
@ -49,7 +49,6 @@

      h6 {
        margin: 0;
-        font-family: Inter;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
--- a/src/components/Placeholder/placeholder.css
+++ b/src/components/Placeholder/placeholder.css
@ -16,7 +16,7 @@
    margin-bottom: 0.25rem;
    max-width: 600px;
    margin: auto;
-    color: var(--codex-input-label-color);
+    color: rgb(150, 150, 150);
  }

  .button {
--- a/src/components/Select/select.css
+++ b/src/components/Select/select.css
@ -1,24 +1,50 @@
+@property --codex-select-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(20, 20, 20, 0.6);
+}
+
+@property --codex-select-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --codex-select-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
+@property --codex-select-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(150, 150, 150);
+}
+
+@property --codex-select-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 10px;
+}
+
 .select {
  select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: var(
-      --codex-select-background,
-      var(--codex-background-secondary)
+      --codex-select-background-color,
+      rgba(20, 20, 20, 0.6)
    );
    outline: 2px solid transparent;
    outline-offset: 2px;
-    color: var(--codex-color);
-    border-radius: var(--codex-border-radius);
-    padding: 0.75rem 1rem;
-    padding-inline-end: 2.25rem;
+    color: var(--codex-select-color, white);
+    border-radius: var(--codex-select-border-radius, 10px);
+    padding: var(--codex-select-padding, 10px);
    transition: box-shadow 0.35s;
-    border: var(--codex-select-border, 1px solid var(--codex-border-color));
-    background-image: var(
-      --codex-select-icon-url,
-      url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 4.06066C8.15829 3.8654 7.84171 3.8654 7.64645 4.06066L5.35355 6.35355C5.15829 6.54882 4.84171 6.54882 4.64645 6.35355C4.45118 6.15829 4.45118 5.84171 4.64645 5.64645L6.93934 3.35356C7.52513 2.76777 8.47487 2.76777 9.06066 3.35355L11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355C11.1583 6.54882 10.8417 6.54882 10.6464 6.35355L8.35355 4.06066Z' fill='%236b7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 11.9393C8.15829 12.1346 7.84171 12.1346 7.64645 11.9393L5.35355 9.64645C5.15829 9.45119 4.84171 9.45119 4.64645 9.64645C4.45118 9.84171 4.45118 10.1583 4.64645 10.3536L6.93934 12.6464C7.52513 13.2322 8.47487 13.2322 9.06066 12.6464L11.3536 10.3536C11.5488 10.1583 11.5488 9.84171 11.3536 9.64645C11.1583 9.45119 10.8417 9.45119 10.6464 9.64645L8.35355 11.9393Z' fill='%236b7280'/%3E%3C/svg%3E%0A")
-    );
+    border: 1px solid var(--codex-select-border-color, rgb(150, 150, 150));
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 4.06066C8.15829 3.8654 7.84171 3.8654 7.64645 4.06066L5.35355 6.35355C5.15829 6.54882 4.84171 6.54882 4.64645 6.35355C4.45118 6.15829 4.45118 5.84171 4.64645 5.64645L6.93934 3.35356C7.52513 2.76777 8.47487 2.76777 9.06066 3.35355L11.3536 5.64645C11.5488 5.84171 11.5488 6.15829 11.3536 6.35355C11.1583 6.54882 10.8417 6.54882 10.6464 6.35355L8.35355 4.06066Z' fill='%236b7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 11.9393C8.15829 12.1346 7.84171 12.1346 7.64645 11.9393L5.35355 9.64645C5.15829 9.45119 4.84171 9.45119 4.64645 9.64645C4.45118 9.84171 4.45118 10.1583 4.64645 10.3536L6.93934 12.6464C7.52513 13.2322 8.47487 13.2322 9.06066 12.6464L11.3536 10.3536C11.5488 10.1583 11.5488 9.84171 11.3536 9.64645C11.1583 9.45119 10.8417 9.45119 10.6464 9.64645L8.35355 11.9393Z' fill='%236b7280'/%3E%3C/svg%3E%0A");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
@ -34,7 +60,7 @@
    &:hover,
    &:focus-visible,
    &:active {
-      box-shadow: 0 0 0 1px var(--codex-border-color);
+      box-shadow: 0 0 0 1px var(--codex-select-border-color);
    }
  }

@ -42,6 +68,6 @@
    margin-bottom: 0.5rem;
    font-weight: 500;
    display: block;
-    color: var(--codex-color);
+    color: var(--codex-select-color);
  }
 }
--- a/src/components/SpaceAllocation/spaceAllocation.css
+++ b/src/components/SpaceAllocation/spaceAllocation.css
@ -10,7 +10,6 @@
      height: 100%;
      border-radius: 4px;
      height: 26px;
-      font-family: Inter;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
@ -34,20 +33,8 @@
        width: 9px;
        height: 9px;
        border-radius: 50%;
-        border: 2px solid #0e121b;
+        border: 2px solid rgb(14, 18, 27);
      }
-
-      /* p {
-        display: flex;
-        flex-direction: column;
-        line-height: 1rem;
-        margin: 0;
-        font-size: 12px;
-
-        small {
-          color: var(--codex-input-label-color);
-        }
-      } */
    }
  }
 }
--- a/src/components/Stepper/Step.css
+++ b/src/components/Stepper/Step.css
@ -1,21 +1,29 @@
+@property --codex-step-background-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+
+@property --codex-step-color {
+  syntax: "<length>#";
+  inherits: true;
+  initial-value: 150, 150, 150;
+}
+
 .step {
  &:not(:last-child) {
    flex: 1;
  }

  --codex-step-background-color: white;
-  --codex-step-border-color: #e1e4ea;
-  --codex-step-label-color: #969696;
-  --codex-step-small-color: #96969699;
-  --codex-step-hr-color: #96969699;
+  --codex-step-border-color: rgb(225, 228, 234);
+  --codex-step-color: 150, 150, 150;
  --codex-step-animation: step-back;

  &.step--done {
    --codex-step-background-color: transparent;
    --codex-step-border-color: transparent;
-    --codex-step-small-color: #1fc16b99;
-    --codex-step-label-color: #1fc16b;
-    --codex-step-hr-color: #1fc16b;
+    --codex-step-color: 31, 193, 107;
    --codex-step-animation: step;
  }

@ -40,8 +48,7 @@
      border-radius: 50%;
      width: 20px;
      height: 20px;
-      color: #525866;
-      font-family: Inter;
+      color: rgb(82, 88, 102);
      font-size: 12px;
      font-weight: 500;
      line-height: 16px;
@ -50,7 +57,7 @@
      transition: box-shadow 0.35s;

      &:hover {
-        box-shadow: 0 0 0 2px var(--codex-border-color);
+        box-shadow: 0 0 0 2pxrgba (150, 150, 150, 0.2);
      }
    }

@ -58,13 +65,13 @@
      border: 0;
      height: 4px;
      flex: 1;
-      background-color: #969696;
+      background-color: rgb(150, 150, 150);
      border-radius: 40px;
      position: relative;
      margin-bottom: 8px;

      &::before {
-        background-color: var(--codex-step-hr-color);
+        background-color: rgba(var(--codex-step-color), 1);
        height: 4px;
        content: " ";
        position: absolute;
@ -82,23 +89,21 @@
    padding-left: 38px;

    small {
-      font-family: Inter;
      font-size: 8px;
      font-weight: 700;
      line-height: 8px;
      text-align: left;
-      color: var(--codex-step-small-color);
+      color: rgba(var(--codex-step-color), 0.6);
      display: block;
    }

    span {
-      font-family: Inter;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.006em;
      text-align: left;
-      color: var(--codex-step-label-color);
+      color: rgba(var(--codex-step-color), 1);
    }
  }
 }
--- a/src/components/Stepper/stepper.css
+++ b/src/components/Stepper/stepper.css
@ -7,7 +7,7 @@
    display: flex;
    align-items: flex-start;
    gap: 16px;
-    border-bottom: 1px solid #96969633;
+    border-bottom: 1px solid rgba(150, 150, 150, 0.2);
    padding-bottom: 16px;
  }

--- a/src/components/Table/table.css
+++ b/src/components/Table/table.css
@ -1,5 +1,17 @@
+@property --codex-table-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 16px;
+}
+
+@property --codex-table-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(150, 150, 150);
+}
+
 .table {
-  border-radius: var(--codex-border-radius);
+  border-radius: var(--codex-table-border-radius);
  overflow-x: auto;

  table {
@ -8,11 +20,10 @@

    thead {
      tr {
-        border-bottom: 1px solid var(--codex-border-color);
        border-radius: 8px;

        th {
-          color: var(--codex-color-light);
+          color: var(--codex-table-color);
          font-weight: normal;
          text-transform: capitalize;
          font-size: 0.9rem;
@ -20,7 +31,7 @@
          height: 36px;
          padding: 0 16px;
          box-sizing: border-box;
-          background-color: #232323;
+          background-color: rgba(20, 20, 20, 0.6);

          .sort-icon {
            display: flex;
@ -71,21 +82,14 @@

    tbody {
      tr {
-        border-bottom: 1px solid var(--codex-border-color);
        transition: background-color 0.35s;
        border-radius: 8px;

-        &:hover {
-          background-color: var(--codex-background-light);
-        }
-
        td {
          text-align: left;
          height: 64px;
          box-sizing: border-box;
-          background-color: #232323;
          padding: 0 12px;
-          font-family: Inter;
          font-size: 14px;
          font-weight: 400;
          line-height: 16px;
@ -101,17 +105,6 @@
            border-bottom-right-radius: 8px;
          }
        }
-
-        /* &::after {
-          content: " ";
-          width: 100%;
-          height: 1px;
-          display: inline-block;
-          background: #96969633;
-          position: absolute;
-          bottom: -7px;
-          left: 0;
-        } */
      }
    }
  }
--- a/src/components/Tabs/tabs.css
+++ b/src/components/Tabs/tabs.css
@ -1,8 +1,21 @@
+@property --codex-tabs-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
+@property --codex-tabs-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(150, 150, 150);
+}
+
 .tabs {
  display: flex;
  margin-top: 1rem;
  position: relative;
-  border-bottom: 2px solid #96969633;
+  border-bottom: 2px solid
+    var(--codex-tabs-border-color, rgba(150, 150, 150, 0.2));
  border-radius: 6px;
  padding: 0px 8px 0px 4px;
  gap: 16px;
@ -18,21 +31,20 @@
    top: 2px;
    border-bottom: 2px solid transparent;
    padding: 8px;
-    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.006em;
    text-align: center;
-    color: #969696;
+    color: var(--codex-tabs-color);

    &:hover {
      opacity: 0.85;
    }

    &[aria-selected] {
-      color: var(--codex-color-primary);
-      border-bottom: 2px solid var(--codex-color-primary);
+      color: rgb(111, 203, 148);
+      border-bottom: 2px solid rgb(111, 203, 148);
    }

    &[aria-selected]:first-child {
--- a/src/components/Toast/toast.css
+++ b/src/components/Toast/toast.css
@ -1,19 +1,29 @@
+@property --codex-toast-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(111, 203, 148, 0.2);
+}
+
+@property --codex-toast-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(111, 203, 148);
+}
+
 .toast {
  position: fixed;
-  background: var(--codex-toast-background, var(--codex-background-light));
  min-width: 150px;
  transition: top 0.35s;
  top: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
-  border: 1px solid var(--codex-toast-border-color, var(--codex-border-color));
-  border-radius: 6px;
  padding: 16px;
  color: white;
  word-break: break-word;
-  border: 1px solid rgb(var(--codex-toast-color));
-  background: var(--codex-toast-color);
+  border-radius: 6px;
+  border-bottom: 2px solid var(--codex-toast-color);
+  background: var(--codex-toast-background-color);
  z-index: 20;
  backdrop-filter: blur(32px);
  left: 0;
@ -26,16 +36,17 @@
  }

  &.toast--success {
-    --codex-toast-color: #6fcb9433;
-    border-bottom: 2px solid #6fcb94;
+    --codex-toast-background-color: rgba(111, 203, 148, 0.2);
+    --codex-toast-color: rgb(111, 203, 148);

    svg {
-      color: #6fcb94;
+      color: rgb(111, 203, 148);
    }
  }

  &.toast--error {
-    --codex-toast-color: rgba(var(--codex-color-error));
+    --codex-toast-background-color: rgba(251, 55, 72, 0.2);
+    --codex-toast-color: rgb(251, 55, 72);
  }

  .button {
@ -45,7 +56,6 @@
  b {
    text-transform: capitalize;
    display: block;
-    font-family: Inter;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
@ -58,15 +68,15 @@
  }

  span {
-    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
-    color: #ffffffcc;
+    color: rgba(255, 255, 255, 0.8);
  }

  svg {
    cursor: pointer;
+    color: var(--codex-toast-color);
  }
 }
--- a/src/components/Tooltip/Tooltip.css
+++ b/src/components/Tooltip/Tooltip.css
@ -1,3 +1,15 @@
+@property --codex-tooltip-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(64 64 64);
+}
+
+@property --codex-toast-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 6px;
+}
+
 .tooltip {
  cursor: help;
  position: relative;
@ -9,9 +21,9 @@
  opacity: 0;
  content: attr(data-tooltip);
  animation: tooltip 0.35s cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
-  color: var(--codex-color);
-  background: var(--codex-background-light);
-  border-radius: var(--codex-border-radius);
+  color: white;
+  background: var(--codex-tooltip-background-color, rgb(64 64 64));
+  border-radius: var(--codex-toast-border-radius, 6px);
  min-width: 150px;
  max-width: 100%;
  font-weight: 600;
--- a/src/components/Upload/UploadFile.css
+++ b/src/components/Upload/UploadFile.css
@ -1,19 +1,51 @@
+@property --codex-upload-background-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgba(20, 20, 20, 0.6);
+}
+
+@property --codex-upload-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
+@property --codex-upload-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 0.2);
+}
+
+@property --codex-upload-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: white;
+}
+
+@property --codex-upload-progress-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: rgb(38 38 38);
+}
+
 .upload-file {
  &[aria-invalid] {
-    --codex-upload-color: rgb(var(--codex-color-error));
+    --codex-upload-color: rgb(251, 55, 72);
+    --codex-upload-progress-color: rgb(251, 55, 72);
  }

  &[data-done] {
-    --codex-upload-color: var(--codex-color-primary);
+    --codex-upload-color: rgb(111, 203, 148);
+    --codex-upload-progress-color: rgb(111, 203, 148);
  }

  > div {
    background-color: var(
-      --codex-upload-background,
-      var(--codex-background-secondary)
+      --codex-upload-background-color,
+      rgba(20, 20, 20, 0.6)
    );
-    border-radius: var(--codex-border-radius);
-    border: 1px solid var(--codex-border-color);
+    border-radius: var(--codex-upload-border-radius, 10px);
+    border: 1px solid var(--codex-upload-border-color, rgba(150, 150, 150, 0.2));
    padding: 1em 2rem;
    margin-top: 0.5rem;

@ -30,7 +62,7 @@
        flex-grow: 1;

        img {
-          border-radius: var(--codex-border-radius);
+          border-radius: var(--codex-upload-border-radius);
        }

        .preview {
@ -48,6 +80,7 @@
              white-space: nowrap;
              max-width: 150px;
              display: inline-block;
+              color: var(--codex-upload-color);
            }
          }
        }
@ -59,10 +92,6 @@
        justify-content: space-around;
        gap: 0.25rem;
      }
-
-      svg {
-        color: var(--codex-upload-color);
-      }
    }
  }

@ -74,32 +103,29 @@

    progress {
      flex-grow: 1;
-      background-color: var(
-        --codex-upload-background,
-        var(--codex-background-secondary)
-      );
+      background-color: var(--codex-upload-progress-color, rgb(38 38 38));
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
-      border-radius: var(--codex-border-radius);
+      border-radius: var(--codex-upload-border-radius);
      height: 0.5rem;
      width: 100%;
      border: none;

      &[value]::-webkit-progress-bar {
-        background-color: var(--codex-background-light);
+        background-color: var(--codex-upload-progress-color, rgb(38 38 38));
        border-radius: 50px;
      }

      &[value]::-webkit-progress-value {
-        background: var(--codex-upload-color);
+        background-color: var(--codex-upload-color);
        border-radius: 50px;
      }

      &[value]::-moz-progress-bar {
        border-radius: 50px;
-        background: var(--codex-upload-color);
+        background-color: var(--codex-upload-color);
      }
    }

@ -114,4 +140,8 @@
    font-size: 0.85rem;
    color: var(--codex-upload-color);
  }
+
+  .button-icon {
+    --codex-button-icon-size: 20px;
+  }
 }
--- a/src/components/Upload/UploadFile.tsx
+++ b/src/components/Upload/UploadFile.tsx
@ -342,7 +342,7 @@ export function UploadStatusIcon({ status }: UploadStatusIconProps) {
        <WarningCircleIcon
          width={17.5}
          fill="currentColor"
-          stroke="var(--codex-background)"
+          stroke="currentColor"
        ></WarningCircleIcon>
      );

@ -355,7 +355,7 @@ function UploadActionIcon({ status }: UploadStatusIconProps) {
  switch (status) {
    case "error":
    case "done":
-      return <CloseIcon width={20} height={20} />;
+      return <CloseIcon width={17.5} height={17.5} />;
    case "progress":
      return <StopIcon />;
  }
--- a/src/components/Upload/upload.css
+++ b/src/components/Upload/upload.css
@ -1,8 +1,32 @@
+@property --codex-upload-border-radius {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 10px;
+}
+
+@property --codex-upload-border-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(105, 105, 105, 0.2);
+}
+
+@property --codex-upload-background-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(20, 20, 20, 0.6);
+}
+
+@property --codex-upload-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgba(150, 150, 150, 1);
+}
+
 .upload {
-  border: 1px dashed var(--codex-border-color);
-  background-color: #14141499;
+  border: 1px solid var(--codex-upload-border-color, rgba(105, 105, 105, 0.2));
+  background-color: var(--codex-upload-background-color, rgba(20, 20, 20, 0.6));
  min-height: 150px;
-  border-radius: var(--codex-border-radius);
+  border-radius: var(--codex-upload-border-radius, 10px);
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
@ -11,7 +35,6 @@
  display: flex;

  b {
-    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
@ -19,9 +42,8 @@
    display: block;

    span {
-      color: var(--codex-color-primary);
-      border-bottom: 1px solid var(--codex-color-primary);
-      font-family: Inter;
+      color: rgb(111, 203, 148);
+      border-bottom: 1px solid rgb(111, 203, 148);
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
@ -30,16 +52,15 @@
  }

  small {
-    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.006em;
    text-align: left;
-    color: #969696;
+    color: var(--codex-upload-color, rgba(150, 150, 150, 1));
  }

  input + span {
-    color: var(--codex-color-warning);
+    color: rgb(251, 198, 75);
  }
 }
--- a/stories/Button.stories.ts
+++ b/stories/Button.stories.ts
@ -48,6 +48,7 @@ export const Icon: Story = {
  args: {
    label: "Button",
    Icon: PlusIcon,
+    variant: "outline"
  },
 };

@ -80,11 +81,3 @@ export const OutlineDisabled: Story = {
    disabled: true,
  },
 };
-
-export const CustomStyle: Story = {
-  args: {
-    label: "Button",
-    variant: "primary",
-
-  },
-};
--- a/stories/ButtonIcon.stories.ts
+++ b/stories/ButtonIcon.stories.ts
@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { ButtonIcon } from "../src/components/ButtonIcon/ButtonIcon";
-import CopyIcon from "../src/assets/icons/copy.svg?react";
-import DownloadFileIcon from "../src/assets/icons/download-file.svg?react";
 import PlusIcon from "../src/assets/icons/plus.svg?react";

 const meta = {
@ -44,23 +42,3 @@ export const Disabled: Story = {
  },
 };

-export const BuzzAnimation: Story = {
-  args: {
-    Icon: CopyIcon,
-    animation: "buzz"
-  },
-};
-
-export const BounceAnimation: Story = {
-  args: {
-    Icon: DownloadFileIcon,
-    animation: "bounce"
-  },
-};
-
-export const CustomStyle: Story = {
-  args: {
-    Icon: PlusIcon,
-    variant: "big",
-  },
-};
--- a/stories/InputIcon.tsx
+++ b/stories/InputIcon.tsx
@ -1,5 +1,5 @@
 import PlusIcon from "../src/assets/icons/plus.svg?react";

 export function InputIcon() {
-  return <PlusIcon width={17.5} />;
+  return <PlusIcon width={17.5} height={17.5} />;
 }
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@ -46,7 +46,7 @@ const Template = (props: Props) => {
      <g clipPath="url(#clip0_326_785)">
        <path
          d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
-          fill="#969696"
+          fill="rgb(150, 150, 150)"
        />
      </g>
      <defs>
--- a/stories/Table.stories.tsx
+++ b/stories/Table.stories.tsx
@ -28,7 +28,7 @@ export const Default: Story = {
        ]}
      ></Row>,
    ],
-    headers: ["id", "title", "other"],
+    headers: ["id", "title", "other", "other"],
  },
 };