Refactor variables and use rgb

.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>

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",

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",

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>

src/assets/icons/close.svg

@@ -1,10 +1,4 @@
-<svg
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  width="20"
-  height="20"
-  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"

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>

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>

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>

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>

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>

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);
+  border-radius: var(--codex-alert-border-radius);
-  padding: 0.75rem 1.5rem;
+  padding: 12px;
-  font-family: var(--codex-font-family);
   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);
+    --codex-alert-color: 251, 198, 75;
-    background-color: #fbc64b33;
-    border-color: #ffc800;
   }
 }

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({
+export function Backdrop({ open, onClose, className = "" }: Props) {
-  open,
-  onClose,
-  style,
-  className = "",
-  removeScroll = false,
-}: Props) {
   const attr = attributes({ "aria-expanded": open });
 
-  useEffect(() => {
-    if (removeScroll) {
-      document.documentElement.classList.toggle("document-noOverflow");
-    }
-  }, [open, removeScroll]);
-
   return (
-    <div
+    <div {...attr} className={"backdrop " + className} onClick={onClose}></div>
-      {...attr}
-      className={"backdrop " + className}
-      onClick={onClose}
-      style={style}
-    ></div>
   );
 }

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

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(
+    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>');
-      --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>')
-    );
     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;
+    --codex-button-color: rgba(0, 0, 0);
-    color: var(--codex-color-on-primary);
+    --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));
+    --codex-button-color: rgb(150, 150, 150);
-    border-color: var(--codex-border-color);
+    --codex-button-border-color: rgba(150, 150, 150, 0.2);
-    background-color: #2f2f2f;
+    --codex-button-background-color: rgb(47, 47, 47);
-    color: #969696;
   }
 
   span {

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(
+  background-color: var(--codex-button-icon-background-color, rgb(47, 47, 47));
-    --codex-button-icon-background,
-    var(--codex-background-light)
-  );
   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;
+    --codex-button-icon-size: 60px;
-    height: 4rem;
   }
 
   &.button-icon--small {
-    width: 2rem;
+    --codex-button-icon-size: 40px;
-    height: 2rem;
   }
 
   &: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;
   }
 

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}>

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,
+      --codex-dropdown-background-color,
-      var(--codex-background-secondary)
+      rgba(20, 20, 20, 0.6)
     );
-    border: var(--codex-dropdown-border, 1px solid var(--codex-border-color));
+    border: 1px solid
-    border-radius: var(--codex-border-radius);
+      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-background-color: rgba(20, 20, 20, 0.2);
-          --codex-dropdown-option-background-hover,
-          var(--codex-background-light)
-        );
       }
 
       div {

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"

src/components/EmptyPlaceholder/emptyPlaceholderIcon.css

@@ -1,9 +1,13 @@
+.empty-placeholder-icon {
+  border: none;
+  color: rgb(38 38 38);
+
   .dark\:fill-neutral-800 {
-  fill: #262626;
+    fill: rgb(38, 38, 38);
   }
 
   .dark\:fill-neutral-700 {
-  fill: #404040;
+    fill: rgb(64, 64, 64);
   }
 
   .dark\:fill-neutral-700\/30 {
@@ -13,8 +17,4 @@
   .dark\:fill-neutral-700\/70 {
     fill: rgb(64 64 64 / 0.7);
   }
-
-.emptyPlaceholderIcon {
-  border: none;
-  color: var(--codex-background-secondary);
 }

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

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;
+    background-color: var(
-    color: white;
+      --codex-input-background-color,
-    border-radius: var(--codex-border-radius);
+      rgba(20, 20, 20, 0.6)
-    border: 1px solid var(--codex-input-border-color);
+    );
-    padding: 16px;
+    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);
+    --codex-input-color: rgb(251, 55, 72);
-    border-color: var(--codex-input-color-error);
+    --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 {
+  &.input--invalid {
-    color: var(--codex-color-error-hexa);
+    --codex-input-label-color: rgb(251, 55, 72);
   }
 }

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: 1px solid var(--codex-input-group-border-color);
-        border-top-right-radius: var(--codex-border-radius);
+        border-top-right-radius: var(--codex-input-group-border-radius);
-        border-bottom-right-radius: var(--codex-border-radius);
+        border-bottom-right-radius: var(--codex-input-group-border-radius);
         height: 64px;
         box-sizing: border-box;
 

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>

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;

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 {

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,
+      --codex-select-background-color,
-      var(--codex-background-secondary)
+      rgba(20, 20, 20, 0.6)
     );
     outline: 2px solid transparent;
     outline-offset: 2px;
-    color: var(--codex-color);
+    color: var(--codex-select-color, white);
-    border-radius: var(--codex-border-radius);
+    border-radius: var(--codex-select-border-radius, 10px);
-    padding: 0.75rem 1rem;
+    padding: var(--codex-select-padding, 10px);
-    padding-inline-end: 2.25rem;
     transition: box-shadow 0.35s;
-    border: var(--codex-select-border, 1px solid var(--codex-border-color));
+    border: 1px solid var(--codex-select-border-color, rgb(150, 150, 150));
-    background-image: var(
+    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");
-      --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")
-    );
     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);
   }
 }

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);
-        }
-      } */
     }
   }
 }

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-border-color: rgb(225, 228, 234);
-  --codex-step-label-color: #969696;
+  --codex-step-color: 150, 150, 150;
-  --codex-step-small-color: #96969699;
-  --codex-step-hr-color: #96969699;
   --codex-step-animation: step-back;
 
   &.step--done {
     --codex-step-background-color: transparent;
     --codex-step-border-color: transparent;
-    --codex-step-small-color: #1fc16b99;
+    --codex-step-color: 31, 193, 107;
-    --codex-step-label-color: #1fc16b;
-    --codex-step-hr-color: #1fc16b;
     --codex-step-animation: step;
   }
 
@@ -40,8 +48,7 @@
       border-radius: 50%;
       width: 20px;
       height: 20px;
-      color: #525866;
+      color: rgb(82, 88, 102);
-      font-family: Inter;
       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);
     }
   }
 }

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

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

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);
+      color: rgb(111, 203, 148);
-      border-bottom: 2px solid var(--codex-color-primary);
+      border-bottom: 2px solid rgb(111, 203, 148);
     }
 
     &[aria-selected]:first-child {

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));
+  border-radius: 6px;
-  background: var(--codex-toast-color);
+  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;
+    --codex-toast-background-color: rgba(111, 203, 148, 0.2);
-    border-bottom: 2px solid #6fcb94;
+    --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);
   }
 }

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);
+  color: white;
-  background: var(--codex-background-light);
+  background: var(--codex-tooltip-background-color, rgb(64 64 64));
-  border-radius: var(--codex-border-radius);
+  border-radius: var(--codex-toast-border-radius, 6px);
   min-width: 150px;
   max-width: 100%;
   font-weight: 600;

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,
+      --codex-upload-background-color,
-      var(--codex-background-secondary)
+      rgba(20, 20, 20, 0.6)
     );
-    border-radius: var(--codex-border-radius);
+    border-radius: var(--codex-upload-border-radius, 10px);
-    border: 1px solid var(--codex-border-color);
+    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(
+      background-color: var(--codex-upload-progress-color, rgb(38 38 38));
-        --codex-upload-background,
-        var(--codex-background-secondary)
-      );
       -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;
+  }
 }

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

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);
+  border: 1px solid var(--codex-upload-border-color, rgba(105, 105, 105, 0.2));
-  background-color: #14141499;
+  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);
+      color: rgb(111, 203, 148);
-      border-bottom: 1px solid var(--codex-color-primary);
+      border-bottom: 1px solid rgb(111, 203, 148);
-      font-family: Inter;
       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);
   }
 }

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",
-
-  },
-};

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",
-  },
-};

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

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>

stories/Table.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story = {
         ]}
       ></Row>,
     ],
-    headers: ["id", "title", "other"],
+    headers: ["id", "title", "other", "other"],
   },
 };