base
, each color theme contains 3 colors:
default
: The default shade of the colorlight
: A lighter shade than defaultdarken
: A darker shade than defaultcontrastText
: Text color, intended to contrast with defaultbase-contrast
defines color of texts. The library uses transparency to differentiate the importance of texts.
name | size |
---|---|
default | 6px |
sm | 4px |
lg | 8px |
full | 9999px |
theme.css
under the project. Simply add the following into the file, and import it for it to take effect:
button
component, we can achieve this by selecting the element using the class
selector.
For instance, to change the color of the button
component:
disabled
status of the button
component:
id
s are as below:
id | module | description |
---|---|---|
orderly-deposit-confirm-button | deposit | Deposit confirm button |
orderly-withdraw-confirm-button | withdraw | Withdraw confirm button |
orderly-assets-margin-deposit-button | assets | Deposit button |
orderly-assets-margin-withdraw-button | assets | Withdraw button |
orderly-order-entry-confirm-button | order | Order entry - confirm button |
orderly-position-cell-limit-close-button | positions | Position - limit close button |
orderly-position-cell-mark-close-button | positions | Position - market close button |
orderly-pending-cell-edit-button | pending orders | Edit pending order button |
orderly-pending-cell-cancel-button | pending orders | Cancel pending order button |
orderly-bottom-nav-bar-connect-button | bottom-nav-bar | bottom bar connect wallet button |
string
ReactNode
string
string
ReactNode
string