diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index cd2bfbf..984338f 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -5,33 +5,10 @@ /> diff --git a/package-lock.json b/package-lock.json index 9e0d6f7..0077d33 100644 --- 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", diff --git a/package.json b/package.json index 27383c5..ceea75e 100644 --- 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", diff --git a/src/assets/icons/asc.svg b/src/assets/icons/asc.svg index 98f0aed..d7adcd1 100644 --- a/src/assets/icons/asc.svg +++ b/src/assets/icons/asc.svg @@ -8,7 +8,7 @@ diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg index 68dcf3e..e9d1876 100644 --- a/src/assets/icons/close.svg +++ b/src/assets/icons/close.svg @@ -1,10 +1,4 @@ - + diff --git a/src/assets/icons/desc.svg b/src/assets/icons/desc.svg index 37dd04c..b4220ce 100644 --- a/src/assets/icons/desc.svg +++ b/src/assets/icons/desc.svg @@ -8,7 +8,7 @@ diff --git a/src/assets/icons/download-file.svg b/src/assets/icons/download-file.svg index 01ce6c8..738063c 100644 --- a/src/assets/icons/download-file.svg +++ b/src/assets/icons/download-file.svg @@ -1,6 +1,6 @@ diff --git a/src/assets/icons/favorite.svg b/src/assets/icons/favorite.svg index 472d51f..2bcaa7c 100644 --- a/src/assets/icons/favorite.svg +++ b/src/assets/icons/favorite.svg @@ -7,6 +7,6 @@ > diff --git a/src/assets/icons/previous.svg b/src/assets/icons/previous.svg index 9234e4b..db4ee8d 100644 --- a/src/assets/icons/previous.svg +++ b/src/assets/icons/previous.svg @@ -7,6 +7,6 @@ > diff --git a/src/components/Alert/alert.css b/src/components/Alert/alert.css index 4058fab..d2f4c5f 100644 --- a/src/components/Alert/alert.css +++ b/src/components/Alert/alert.css @@ -1,10 +1,21 @@ +@property --codex-alert-color { + syntax: "#"; + inherits: false; + initial-value: 111, 203, 148; +} + +@property --codex-alert-border-radius { + syntax: "#"; + 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; } } diff --git a/src/components/Backdrop/Backdrop.tsx b/src/components/Backdrop/Backdrop.tsx index 5a51503..38f60e0 100644 --- 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 ( -
+
); } diff --git a/src/components/Backdrop/backdrop.css b/src/components/Backdrop/backdrop.css index ce1a4d7..ed9419b 100644 --- a/src/components/Backdrop/backdrop.css +++ b/src/components/Backdrop/backdrop.css @@ -1,4 +1,12 @@ +@property --codex-backdrop-background-color { + syntax: ""; + 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; -} diff --git a/src/components/Button/button.css b/src/components/Button/button.css index bd470a3..f1e0be1 100644 --- 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: ""; + inherits: false; + initial-value: rgb(150, 150, 150); +} + +@property --codex-button-background-color { + syntax: ""; + inherits: false; + initial-value: transparent; +} + +@property --codex-button-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(47, 47, 47, 1); +} + +@property --codex-button-border-radius { + syntax: ""; + 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,') - ); + background-image: url('data:image/svg+xml,'); 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 { diff --git a/src/components/ButtonIcon/buttonIcon.css b/src/components/ButtonIcon/buttonIcon.css index c357556..9eeb5b8 100644 --- a/src/components/ButtonIcon/buttonIcon.css +++ b/src/components/ButtonIcon/buttonIcon.css @@ -1,34 +1,58 @@ +@property --codex-button-icon-background-color { + syntax: ""; + inherits: false; + initial-value: rgb(47, 47, 47); +} + +@property --codex-button-icon-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(150, 150, 150, 0.2); +} + +@property --codex-button-icon-color-disabled { + syntax: ""; + inherits: false; + initial-value: rgb(47, 47, 47) 33; +} + +@property --codex-button-icon-size { + syntax: ""; + 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; } diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index f17e5cb..9c70e62 100644 --- 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(null); const lower = value.toLocaleLowerCase(); @@ -140,7 +140,7 @@ export function Dropdown({ value={value} label={""} id={id} - size={size as any} + variant={variant} />
    diff --git a/src/components/Dropdown/dropdown.css b/src/components/Dropdown/dropdown.css index 9aad346..5306621 100644 --- a/src/components/Dropdown/dropdown.css +++ b/src/components/Dropdown/dropdown.css @@ -1,9 +1,33 @@ +@property --codex-dropdown-color { + syntax: ""; + inherits: false; + initial-value: rgb(150, 150, 150); +} + +@property --codex-dropdown-background-color { + syntax: ""; + inherits: false; + initial-value: rgba(20, 20, 20, 0.6); +} + +@property --codex-dropdown-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(150, 150, 150, 0.2); +} + +@property --codex-dropdown-border-radius { + syntax: ""; + 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 { diff --git a/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx b/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx index 1eefc22..b2f297b 100644 --- a/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx +++ b/src/components/EmptyPlaceholder/EmptyPlaceholderIcon.tsx @@ -9,7 +9,7 @@ export function EmptyPlaceholderIcon({ width, className }: Props) { return ( "; + inherits: true; + initial-value: 64px; +} + +@property --codex-input-background-color { + syntax: ""; + inherits: false; + initial-value: rgba(20, 20, 20, 0.6); +} + +@property --codex-input-color { + syntax: ""; + inherits: false; + initial-value: white; +} + +@property --codex-input-label-color { + syntax: ""; + inherits: true; + initial-value: rgb(123, 123, 123); +} + +@property --codex-input-border-radius { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +@property --codex-input-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(150, 150, 150, 0.2); +} + +@property --codex-input-padding { + syntax: ""; + 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); } } diff --git a/src/components/InputGroup/inputGroup.css b/src/components/InputGroup/inputGroup.css index c90c0c4..ec6a744 100644 --- a/src/components/InputGroup/inputGroup.css +++ b/src/components/InputGroup/inputGroup.css @@ -1,3 +1,15 @@ +@property --codex-input-group-border-radius { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +@property --codex-input-group-border-color { + syntax: ""; + 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; diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index fbd30f3..d2e31d7 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -124,7 +124,7 @@ export function Modal({ } variant="small" > diff --git a/src/components/Modal/modal.css b/src/components/Modal/modal.css index c080c06..a60176a 100644 --- 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; diff --git a/src/components/Placeholder/placeholder.css b/src/components/Placeholder/placeholder.css index f7af078..1f6e3a8 100644 --- 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 { diff --git a/src/components/Select/select.css b/src/components/Select/select.css index 1d2e2dc..363056f 100644 --- a/src/components/Select/select.css +++ b/src/components/Select/select.css @@ -1,24 +1,50 @@ +@property --codex-select-background-color { + syntax: ""; + inherits: false; + initial-value: rgba(20, 20, 20, 0.6); +} + +@property --codex-select-color { + syntax: ""; + inherits: false; + initial-value: white; +} + +@property --codex-select-border-radius { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +@property --codex-select-border-color { + syntax: ""; + inherits: false; + initial-value: rgb(150, 150, 150); +} + +@property --codex-select-padding { + syntax: ""; + 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); } } diff --git a/src/components/SpaceAllocation/spaceAllocation.css b/src/components/SpaceAllocation/spaceAllocation.css index 6e4152c..b6a9197 100644 --- 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); - } - } */ } } } diff --git a/src/components/Stepper/Step.css b/src/components/Stepper/Step.css index b373553..740f629 100644 --- a/src/components/Stepper/Step.css +++ b/src/components/Stepper/Step.css @@ -1,21 +1,29 @@ +@property --codex-step-background-color { + syntax: ""; + inherits: true; + initial-value: white; +} + +@property --codex-step-color { + syntax: "#"; + 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); } } } diff --git a/src/components/Stepper/stepper.css b/src/components/Stepper/stepper.css index bc5f66e..339bec3 100644 --- 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; } diff --git a/src/components/Table/table.css b/src/components/Table/table.css index 25eeead..d902d2e 100644 --- a/src/components/Table/table.css +++ b/src/components/Table/table.css @@ -1,5 +1,17 @@ +@property --codex-table-border-radius { + syntax: ""; + inherits: false; + initial-value: 16px; +} + +@property --codex-table-color { + syntax: ""; + 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; - } */ } } } diff --git a/src/components/Tabs/tabs.css b/src/components/Tabs/tabs.css index 51aa8ea..56b98e9 100644 --- a/src/components/Tabs/tabs.css +++ b/src/components/Tabs/tabs.css @@ -1,8 +1,21 @@ +@property --codex-tabs-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(150, 150, 150, 0.2); +} + +@property --codex-tabs-color { + syntax: ""; + 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 { diff --git a/src/components/Toast/toast.css b/src/components/Toast/toast.css index d0f73c7..f594842 100644 --- a/src/components/Toast/toast.css +++ b/src/components/Toast/toast.css @@ -1,19 +1,29 @@ +@property --codex-toast-background-color { + syntax: ""; + inherits: false; + initial-value: rgba(111, 203, 148, 0.2); +} + +@property --codex-toast-color { + syntax: ""; + 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); } } diff --git a/src/components/Tooltip/Tooltip.css b/src/components/Tooltip/Tooltip.css index 1c18c17..a1614f1 100644 --- a/src/components/Tooltip/Tooltip.css +++ b/src/components/Tooltip/Tooltip.css @@ -1,3 +1,15 @@ +@property --codex-tooltip-background-color { + syntax: ""; + inherits: false; + initial-value: rgb(64 64 64); +} + +@property --codex-toast-border-radius { + syntax: ""; + 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; diff --git a/src/components/Upload/UploadFile.css b/src/components/Upload/UploadFile.css index 9e1cd55..c8a07c4 100644 --- a/src/components/Upload/UploadFile.css +++ b/src/components/Upload/UploadFile.css @@ -1,19 +1,51 @@ +@property --codex-upload-background-color { + syntax: ""; + inherits: true; + initial-value: rgba(20, 20, 20, 0.6); +} + +@property --codex-upload-border-radius { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +@property --codex-upload-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(150, 150, 150, 0.2); +} + +@property --codex-upload-color { + syntax: ""; + inherits: true; + initial-value: white; +} + +@property --codex-upload-progress-color { + syntax: ""; + 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; + } } diff --git a/src/components/Upload/UploadFile.tsx b/src/components/Upload/UploadFile.tsx index aba4169..ec93c1f 100644 --- a/src/components/Upload/UploadFile.tsx +++ b/src/components/Upload/UploadFile.tsx @@ -342,7 +342,7 @@ export function UploadStatusIcon({ status }: UploadStatusIconProps) { ); @@ -355,7 +355,7 @@ function UploadActionIcon({ status }: UploadStatusIconProps) { switch (status) { case "error": case "done": - return ; + return ; case "progress": return ; } diff --git a/src/components/Upload/upload.css b/src/components/Upload/upload.css index 791c793..f96b621 100644 --- a/src/components/Upload/upload.css +++ b/src/components/Upload/upload.css @@ -1,8 +1,32 @@ +@property --codex-upload-border-radius { + syntax: ""; + inherits: false; + initial-value: 10px; +} + +@property --codex-upload-border-color { + syntax: ""; + inherits: false; + initial-value: rgba(105, 105, 105, 0.2); +} + +@property --codex-upload-background-color { + syntax: ""; + inherits: false; + initial-value: rgba(20, 20, 20, 0.6); +} + +@property --codex-upload-color { + syntax: ""; + 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); } } diff --git a/stories/Button.stories.ts b/stories/Button.stories.ts index 03dbbff..3387394 100644 --- 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", - - }, -}; diff --git a/stories/ButtonIcon.stories.ts b/stories/ButtonIcon.stories.ts index c0a3d5a..1ee0f3d 100644 --- 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", - }, -}; diff --git a/stories/InputIcon.tsx b/stories/InputIcon.tsx index 46de422..46632c8 100644 --- 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 ; + return ; } diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx index 5937f61..e8970a6 100644 --- a/stories/Modal.stories.tsx +++ b/stories/Modal.stories.tsx @@ -46,7 +46,7 @@ const Template = (props: Props) => { diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx index 0dcade0..13f4649 100644 --- a/stories/Table.stories.tsx +++ b/stories/Table.stories.tsx @@ -28,7 +28,7 @@ export const Default: Story = { ]} >, ], - headers: ["id", "title", "other"], + headers: ["id", "title", "other", "other"], }, };