@orderly.network/ui 2.8.10 → 2.8.11-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +15 -77
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +90 -132
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +90 -132
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +7 -5
- package/src/tailwind/base.ts +19 -0
- package/src/tailwind/chart.ts +28 -0
- package/src/tailwind/components.ts +16 -0
- package/src/tailwind/gradient.ts +38 -0
- package/src/tailwind/index.ts +8 -0
- package/src/tailwind/position.ts +13 -0
- package/src/tailwind/scrollBar.ts +48 -0
- package/src/tailwind/size.ts +13 -0
- package/src/tailwind/theme.ts +102 -0
- package/tailwind.config.js +252 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orderly.network/ui",
|
|
3
|
-
"version": "2.8.
|
|
3
|
+
"version": "2.8.11-alpha.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
"keywords": [],
|
|
9
9
|
"author": "orderly.network",
|
|
10
10
|
"files": [
|
|
11
|
-
"dist"
|
|
11
|
+
"dist",
|
|
12
|
+
"tailwind.config.js",
|
|
13
|
+
"src/tailwind"
|
|
12
14
|
],
|
|
13
15
|
"publishConfig": {
|
|
14
16
|
"access": "public"
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
"react-error-boundary": "^4.0.13",
|
|
41
43
|
"react-hot-toast": "^2.4.1",
|
|
42
44
|
"tailwind-variants": "^0.2.1",
|
|
43
|
-
"@orderly.network/utils": "2.8.
|
|
45
|
+
"@orderly.network/utils": "2.8.11-alpha.0"
|
|
44
46
|
},
|
|
45
47
|
"devDependencies": {
|
|
46
48
|
"@types/node": "^22.15.21",
|
|
@@ -51,9 +53,9 @@
|
|
|
51
53
|
"postcss": "^8.4.38",
|
|
52
54
|
"tailwindcss": "^3.4.3",
|
|
53
55
|
"tailwindcss-animate": "^1.0.6",
|
|
54
|
-
"tsup": "^
|
|
56
|
+
"tsup": "^8.5.1",
|
|
55
57
|
"typescript": "^5.1.6",
|
|
56
|
-
"tsconfig": "0.11.
|
|
58
|
+
"tsconfig": "0.11.11-alpha.0"
|
|
57
59
|
},
|
|
58
60
|
"peerDependencies": {
|
|
59
61
|
"react": ">=18",
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const basePlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents, addBase }) {
|
|
5
|
+
addBase({
|
|
6
|
+
html: {
|
|
7
|
+
// fontSize: "var(--orderly-font-size-base)",
|
|
8
|
+
backgroundColor: "rgb(var(--oui-color-base-10))",
|
|
9
|
+
color: "rgb(var(--oui-color-base-foreground) / 0.98)",
|
|
10
|
+
fontFamily: "var(--oui-font-family)",
|
|
11
|
+
},
|
|
12
|
+
body: {
|
|
13
|
+
// fontSize: "var(--oui-font-size-base)",
|
|
14
|
+
backgroundColor: "rgb(var(--oui-color-base-10))",
|
|
15
|
+
color: "rgb(var(--oui-color-base-foreground) / 0.98)",
|
|
16
|
+
fontFamily: "var(--oui-font-family)",
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const chartPlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents, addBase }) {
|
|
5
|
+
addComponents(
|
|
6
|
+
{
|
|
7
|
+
".xAxis": {
|
|
8
|
+
".recharts-cartesian-axis-tick:first-child text": {
|
|
9
|
+
"text-anchor": "start",
|
|
10
|
+
},
|
|
11
|
+
".recharts-cartesian-axis-tick:last-child text": {
|
|
12
|
+
"text-anchor": "end",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
// ".chart-invisible": {
|
|
16
|
+
// ".yAxis .recharts-cartesian-axis-tick": {
|
|
17
|
+
// visibility: "hidden",
|
|
18
|
+
// },
|
|
19
|
+
// ".yAxis .recharts-cartesian-axis-tick:first-child": {
|
|
20
|
+
// visibility: "visible",
|
|
21
|
+
// },
|
|
22
|
+
// },
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
respectPrefix: false,
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const componentsPlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents, addBase }) {
|
|
5
|
+
const components = {
|
|
6
|
+
".card": {
|
|
7
|
+
color: "red",
|
|
8
|
+
},
|
|
9
|
+
".card:has(.header-list)": {
|
|
10
|
+
paddingTop: "0px",
|
|
11
|
+
paddingBottom: "0px",
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
addComponents(components);
|
|
16
|
+
});
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const gradientPlugin = () =>
|
|
4
|
+
plugin(function ({ addUtilities }) {
|
|
5
|
+
addUtilities({
|
|
6
|
+
".gradient-primary": {
|
|
7
|
+
backgroundImage:
|
|
8
|
+
"linear-gradient(var(--oui-gradient-primary-angle, 28.29deg), rgb(var(--oui-gradient-primary-start)) var(--oui-gradient-primary-stop-start,0%), rgb(var(--oui-gradient-primary-end)) var(--oui-gradient-primary-stop-end,100%))",
|
|
9
|
+
},
|
|
10
|
+
".gradient-secondary": {
|
|
11
|
+
backgroundImage:
|
|
12
|
+
"linear-gradient(var(--oui-gradient-secondary-angle, 0deg), rgb(var(--oui-gradient-secondary-start)) var(--oui-gradient-secondary-stop-start,0%), rgb(var(--oui-gradient-secondary-end)) var(--oui-gradient-secondary-stop-end,100%))",
|
|
13
|
+
},
|
|
14
|
+
".gradient-success": {
|
|
15
|
+
backgroundImage:
|
|
16
|
+
"linear-gradient(var(--oui-gradient-success-angle, 28.29deg), rgb(var(--oui-gradient-success-start)) var(--oui-gradient-success-stop-start,0%), rgba(var(--oui-gradient-success-end)) var(--oui-gradient-success-stop-end,100%))",
|
|
17
|
+
},
|
|
18
|
+
".gradient-warning": {
|
|
19
|
+
backgroundImage:
|
|
20
|
+
"linear-gradient(var(--oui-gradient-warning-angle, 28.29deg),rgb(var(--oui-gradient-warning-start)) var(--oui-gradient-warning-stop-start,0%), rgb(var(--oui-gradient-warning-end)) var(--oui-gradient-warning-stop-end,100%))",
|
|
21
|
+
},
|
|
22
|
+
".gradient-danger": {
|
|
23
|
+
backgroundImage:
|
|
24
|
+
"linear-gradient(var(--oui-gradient-danger-angle, 28.29deg), rgb(var(--oui-gradient-danger-start)) var(--oui-gradient-danger-stop-start,0%), rgb(var(--oui-gradient-danger-end)) var(--oui-gradient-danger-stop-end,100%))",
|
|
25
|
+
},
|
|
26
|
+
".gradient-neutral": {
|
|
27
|
+
backgroundImage:
|
|
28
|
+
"linear-gradient(var(--oui-gradient-neutral-angle, 28.29deg), rgb(var(--oui-gradient-neutral-start)) var(--oui-gradient-neutral-stop-start,0%), rgb(var(--oui-gradient-neutral-end)) var(--oui-gradient-neutral-stop-end,100%))",
|
|
29
|
+
},
|
|
30
|
+
".gradient-brand": {
|
|
31
|
+
// color: "white",
|
|
32
|
+
backgroundImage:
|
|
33
|
+
"linear-gradient(var(--oui-gradient-brand-angle, 17.44deg), rgb(var(--oui-gradient-brand-start)) var(--oui-gradient-brand-stop-start,0%), rgb(var(--oui-gradient-brand-end)) var(--oui-gradient-brand-stop-end,100%))",
|
|
34
|
+
// "linear-gradient(var(--oui-gradient-angle, 270deg), rgb(var(--oui-gradient-brand-start)) var(--oui-gradient-primary-stop-start,0%), rgb(var(--oui-gradient-brand-end)) var(--oui-gradient-primary-stop-end,100%))",
|
|
35
|
+
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { basePlugin } from "./base";
|
|
2
|
+
export { chartPlugin } from "./chart";
|
|
3
|
+
export { componentsPlugin } from "./components";
|
|
4
|
+
export { gradientPlugin } from "./gradient";
|
|
5
|
+
export { positionPlugin } from "./position";
|
|
6
|
+
export { scrollBarPlugin } from "./scrollBar";
|
|
7
|
+
export { sizePlugin } from "./size";
|
|
8
|
+
export { themePlugin } from "./theme";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const positionPlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents }) {
|
|
5
|
+
addComponents({
|
|
6
|
+
".position": {
|
|
7
|
+
left: "var(--oui-left, unset)",
|
|
8
|
+
top: "var(--oui-top, unset)",
|
|
9
|
+
right: "var(--oui-right, unset)",
|
|
10
|
+
bottom: "var(--oui-bottom, unset)",
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
});
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const scrollBarPlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents }) {
|
|
5
|
+
const customVerticalScrollbar = {
|
|
6
|
+
".custom-scrollbar::-webkit-scrollbar": {
|
|
7
|
+
width: "6px",
|
|
8
|
+
height: "6px",
|
|
9
|
+
},
|
|
10
|
+
|
|
11
|
+
".custom-scrollbar::-webkit-scrollbar-track": {
|
|
12
|
+
backgroundColor: "transparent",
|
|
13
|
+
borderRadius: "4px",
|
|
14
|
+
paddingTop: "20px",
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
".custom-scrollbar::-webkit-scrollbar-thumb": {
|
|
18
|
+
borderRadius: "3px",
|
|
19
|
+
borderStyle: "dashed",
|
|
20
|
+
borderColor: "transparent",
|
|
21
|
+
borderWidth: "1px",
|
|
22
|
+
backgroundColor: "rgb(var(--oui-color-base-7))",
|
|
23
|
+
backgroundClip: "padding-box",
|
|
24
|
+
},
|
|
25
|
+
|
|
26
|
+
".custom-scrollbar::-webkit-scrollbar-thumb:hover": {
|
|
27
|
+
background: "rgb(var(--oui-color-base-5))",
|
|
28
|
+
borderRadius: "3px",
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
".custom-scrollbar::-webkit-scrollbar-corner": {
|
|
32
|
+
backgroundColor: "transparent",
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
addComponents(customVerticalScrollbar);
|
|
37
|
+
|
|
38
|
+
const hideScrollBar = {
|
|
39
|
+
".hide-scrollbar::-webkit-scrollbar": {
|
|
40
|
+
display: "none",
|
|
41
|
+
},
|
|
42
|
+
".hide-scrollbar::-webkit-scrollbar-thumb": {
|
|
43
|
+
display: "none",
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
addComponents(hideScrollBar);
|
|
48
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const sizePlugin = () =>
|
|
4
|
+
plugin(function ({ addComponents }) {
|
|
5
|
+
addComponents({
|
|
6
|
+
".size-height": {
|
|
7
|
+
height: "var(--oui-height, unset)",
|
|
8
|
+
},
|
|
9
|
+
".size-width": {
|
|
10
|
+
width: "var(--oui-width, unset)",
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
});
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
|
|
3
|
+
export const themePlugin = () =>
|
|
4
|
+
plugin(function ({ addBase }) {
|
|
5
|
+
addBase({
|
|
6
|
+
":root": {
|
|
7
|
+
"--oui-font-family":
|
|
8
|
+
'"Manrope","PingFang SC", "Noto Sans CJK SC", "Noto Sans", sans-serif',
|
|
9
|
+
|
|
10
|
+
/* colors */
|
|
11
|
+
"--oui-color-primary": "176 132 233",
|
|
12
|
+
"--oui-color-primary-light": "213 190 244",
|
|
13
|
+
"--oui-color-primary-darken": "137 76 209",
|
|
14
|
+
"--oui-color-primary-contrast": "255 255 255",
|
|
15
|
+
|
|
16
|
+
"--oui-color-link": "189 107 237",
|
|
17
|
+
"--oui-color-link-light": "217 152 250",
|
|
18
|
+
|
|
19
|
+
"--oui-color-secondary": "255 255 255",
|
|
20
|
+
"--oui-color-tertiary": "218 218 218",
|
|
21
|
+
"--oui-color-quaternary": "218 218 218",
|
|
22
|
+
|
|
23
|
+
"--oui-color-danger": "245 97 139",
|
|
24
|
+
"--oui-color-danger-light": "250 167 188",
|
|
25
|
+
"--oui-color-danger-darken": "237 72 122",
|
|
26
|
+
"--oui-color-danger-contrast": "255 255 255",
|
|
27
|
+
|
|
28
|
+
"--oui-color-success": "41 233 169",
|
|
29
|
+
"--oui-color-success-light": "101 240 194",
|
|
30
|
+
"--oui-color-success-darken": "0 161 120",
|
|
31
|
+
"--oui-color-success-contrast": "255 255 255",
|
|
32
|
+
|
|
33
|
+
"--oui-color-warning": "255 209 70",
|
|
34
|
+
"--oui-color-warning-light": "255 229 133",
|
|
35
|
+
"--oui-color-warning-darken": "255 152 0",
|
|
36
|
+
"--oui-color-warning-contrast": "255 255 255",
|
|
37
|
+
|
|
38
|
+
"--oui-color-fill": "36 32 47",
|
|
39
|
+
"--oui-color-fill-active": "40 46 58",
|
|
40
|
+
|
|
41
|
+
"--oui-color-base-1": "93 83 123",
|
|
42
|
+
"--oui-color-base-2": "81 72 107",
|
|
43
|
+
"--oui-color-base-3": "68 61 69",
|
|
44
|
+
"--oui-color-base-4": "57 52 74",
|
|
45
|
+
"--oui-color-base-5": "51 46 66",
|
|
46
|
+
"--oui-color-base-6": "43 38 56",
|
|
47
|
+
"--oui-color-base-7": "36 32 47",
|
|
48
|
+
"--oui-color-base-8": "29 26 38",
|
|
49
|
+
"--oui-color-base-9": "22 20 28",
|
|
50
|
+
"--oui-color-base-10": "14 13 18",
|
|
51
|
+
|
|
52
|
+
"--oui-color-base-foreground": "255 255 255",
|
|
53
|
+
"--oui-color-line": "255 255 255",
|
|
54
|
+
|
|
55
|
+
"--oui-color-trading-loss": "245 97 139",
|
|
56
|
+
"--oui-color-trading-loss-contrast": "255 255 255",
|
|
57
|
+
"--oui-color-trading-profit": "41 233 169",
|
|
58
|
+
"--oui-color-trading-profit-contrast": "255 255 255",
|
|
59
|
+
|
|
60
|
+
/* gradients */
|
|
61
|
+
"--oui-gradient-primary-start": "40 0 97",
|
|
62
|
+
"--oui-gradient-primary-end": "189 107 237",
|
|
63
|
+
|
|
64
|
+
"--oui-gradient-secondary-start": "81 42 121",
|
|
65
|
+
"--oui-gradient-secondary-end": "176 132 233",
|
|
66
|
+
|
|
67
|
+
"--oui-gradient-success-start": "1 83 68",
|
|
68
|
+
"--oui-gradient-success-end": "41 223 169",
|
|
69
|
+
|
|
70
|
+
"--oui-gradient-danger-start": "153 24 76",
|
|
71
|
+
"--oui-gradient-danger-end": "245 97 139",
|
|
72
|
+
|
|
73
|
+
"--oui-gradient-brand-start": "231 219 249",
|
|
74
|
+
"--oui-gradient-brand-end": "159 107 225",
|
|
75
|
+
"--oui-gradient-brand-stop-start": "6.62%",
|
|
76
|
+
"--oui-gradient-brand-stop-end": "86.5%",
|
|
77
|
+
"--oui-gradient-brand-angle": "17.44deg",
|
|
78
|
+
|
|
79
|
+
"--oui-gradient-warning-start": "152 58 8",
|
|
80
|
+
"--oui-gradient-warning-end": "255 209 70",
|
|
81
|
+
|
|
82
|
+
"--oui-gradient-neutral-start": "27 29 24",
|
|
83
|
+
"--oui-gradient-neutral-end": "38 41 46",
|
|
84
|
+
|
|
85
|
+
/* rounded */
|
|
86
|
+
"--oui-rounded-sm": "2px",
|
|
87
|
+
"--oui-rounded": "4px",
|
|
88
|
+
"--oui-rounded-md": "6px",
|
|
89
|
+
"--oui-rounded-lg": "8px",
|
|
90
|
+
"--oui-rounded-xl": " 12px",
|
|
91
|
+
"--oui-rounded-2xl": "16px",
|
|
92
|
+
"--oui-rounded-full": "9999px",
|
|
93
|
+
|
|
94
|
+
/* spacing */
|
|
95
|
+
"--oui-spacing-xs": "20rem",
|
|
96
|
+
"--oui-spacing-sm": "22.5rem",
|
|
97
|
+
"--oui-spacing-md": "26.25rem",
|
|
98
|
+
"--oui-spacing-lg": "30rem",
|
|
99
|
+
"--oui-spacing-xl": "33.75rem",
|
|
100
|
+
},
|
|
101
|
+
});
|
|
102
|
+
});
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
const { withTV } = require("tailwind-variants/transformer");
|
|
2
|
+
|
|
3
|
+
const { sizePlugin } = require("./src/tailwind/size");
|
|
4
|
+
const { gradientPlugin } = require("./src/tailwind/gradient");
|
|
5
|
+
const { positionPlugin } = require("./src/tailwind/position");
|
|
6
|
+
const { basePlugin } = require("./src/tailwind/base");
|
|
7
|
+
const { componentsPlugin } = require("./src/tailwind/components");
|
|
8
|
+
const { themePlugin } = require("./src/tailwind/theme");
|
|
9
|
+
const { scrollBarPlugin } = require("./src/tailwind/scrollBar");
|
|
10
|
+
const { chartPlugin } = require("./src/tailwind/chart");
|
|
11
|
+
|
|
12
|
+
/** @type {import('tailwindcss').Config} */
|
|
13
|
+
module.exports = withTV({
|
|
14
|
+
mode: "jit",
|
|
15
|
+
darkMode: ["class"],
|
|
16
|
+
content: [
|
|
17
|
+
"./src/**/*.{ts,js,tsx,jsx}",
|
|
18
|
+
"../ui-connector/src/**/*.{ts,js,tsx,jsx}",
|
|
19
|
+
"../ui-orders/src/**/*.{ts,js,tsx,jsx}",
|
|
20
|
+
"../ui-order-entry/src/**/*.{ts,js,tsx,jsx}",
|
|
21
|
+
"../ui-positions/src/**/*.{ts,js,tsx,jsx}",
|
|
22
|
+
"../ui-leverage/src/**/*.{ts,js,tsx,jsx}",
|
|
23
|
+
"../ui-share/src/**/*.{ts,js,tsx,jsx}",
|
|
24
|
+
"../trading-rewards/src/**/*.{ts,js,tsx,jsx}",
|
|
25
|
+
"../portfolio/src/**/*.{ts,js,tsx,jsx}",
|
|
26
|
+
"../ui-scaffold/src/**/*.{ts,js,tsx,jsx}",
|
|
27
|
+
"../affiliate/src/**/*.{ts,js,tsx,jsx}",
|
|
28
|
+
"../markets/src/**/*.{ts,js,tsx,jsx}",
|
|
29
|
+
"../vaults/src/**/*.{ts,js,tsx,jsx}",
|
|
30
|
+
"../chart/src/**/*.{ts,js,tsx,jsx}",
|
|
31
|
+
"../ui-transfer/src/**/*.{ts,js,tsx,jsx}",
|
|
32
|
+
"../trading/src/**/*.{ts,js,tsx,jsx}",
|
|
33
|
+
"../ui-order-entry/src/**/*.{ts,js,tsx,jsx}",
|
|
34
|
+
"../ui-tpsl/src/**/*.{ts,js,tsx,jsx}",
|
|
35
|
+
"../ui-tradingview/src/**/*.{ts,js,tsx,jsx}",
|
|
36
|
+
"../ui-chain-selector/src/**/*.{ts,js,tsx,jsx}",
|
|
37
|
+
"../wallet-connector/src/**/*.{ts,js,tsx,jsx}",
|
|
38
|
+
"../wallet-connector-privy/src/**/*.{ts,js,tsx,jsx}",
|
|
39
|
+
"../trading-leaderboard/src/**/*.{ts,js,tsx,jsx}",
|
|
40
|
+
"../app/src/**/*.{ts,js,tsx,jsx}",
|
|
41
|
+
"../ui-notification/src/**/*.{ts,js,tsx,jsx}",
|
|
42
|
+
],
|
|
43
|
+
prefix: "oui-",
|
|
44
|
+
theme: {
|
|
45
|
+
screens: {
|
|
46
|
+
sm: "375px",
|
|
47
|
+
md: "480px",
|
|
48
|
+
lg: "768px",
|
|
49
|
+
xl: "1024px",
|
|
50
|
+
"2xl": "1280px",
|
|
51
|
+
"3xl": "1440px",
|
|
52
|
+
"4xl": "1680px",
|
|
53
|
+
"5xl": "1920px",
|
|
54
|
+
},
|
|
55
|
+
fontSize: {
|
|
56
|
+
"3xs": ["var(--oui-font-size-3xs, 0.625rem)", "0.625rem"], // 10px
|
|
57
|
+
"2xs": ["var(--oui-font-size-2xs, 0.75rem)", "1.125rem"], // 12px
|
|
58
|
+
xs: ["var(--oui-font-size-xs, calc(0.875rem - 1px))", "1.25rem"], // 13px
|
|
59
|
+
sm: ["var(--oui-font-size-sm,0.875rem)", "1.25rem"], // 14px
|
|
60
|
+
base: ["var(--oui-font-size-base, 1rem)", "1.5rem"], // 16px
|
|
61
|
+
lg: ["var(--oui-font-size-lg, 1.125rem)", "1.625rem"], // 18px
|
|
62
|
+
xl: ["var(--oui-font-size-xl, 1.25rem)", "1.75rem"], // 20px
|
|
63
|
+
"2xl": ["var(--oui-font-size-2xl, 1.5rem)", "2rem"], // 24px
|
|
64
|
+
"3xl": ["var(--oui-font-size-3xl, 1.75rem)", "2.25rem"], // 28px
|
|
65
|
+
"4xl": ["var(--oui-font-size-4xl, 1.875rem)", "2.375rem"], // 30px
|
|
66
|
+
"5xl": ["var(--oui-font-size-5xl, 2.25rem)", "2.75rem"], // 36px
|
|
67
|
+
"6xl": ["var(--oui-font-size-6xl, 3rem)", "3rem"], // 48px
|
|
68
|
+
},
|
|
69
|
+
borderRadius: {
|
|
70
|
+
none: "0",
|
|
71
|
+
sm: "var(--oui-rounded-sm, 0.125rem)", // 2px
|
|
72
|
+
DEFAULT: "var(--oui-rounded, 0.25rem)", // 4px
|
|
73
|
+
md: "var(--oui-rounded-md, 0.375rem)", // 6px
|
|
74
|
+
lg: "var(--oui-rounded-lg, 0.5rem)", // 8px
|
|
75
|
+
xl: "var(--oui-rounded-xl, 0.75rem)", // 12px
|
|
76
|
+
"2xl": "var(--oui-rounded-2xl, 1rem)", // 16px
|
|
77
|
+
full: "var(--oui-rounded-full, 9999px)",
|
|
78
|
+
},
|
|
79
|
+
// boxShadow: {
|
|
80
|
+
// sm: "var(--oui-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05))",
|
|
81
|
+
// DEFAULT:
|
|
82
|
+
// "var(--oui-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))",
|
|
83
|
+
// md: "var(--oui-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
|
|
84
|
+
// lg: "var(--oui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))",
|
|
85
|
+
// xl: "var(--oui-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))",
|
|
86
|
+
// "2xl": "var(--oui-shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25))",
|
|
87
|
+
// },
|
|
88
|
+
extend: {
|
|
89
|
+
spacing: {
|
|
90
|
+
13: "3.25rem",
|
|
91
|
+
},
|
|
92
|
+
cursor: {
|
|
93
|
+
"svg-edit":
|
|
94
|
+
'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_22040_41827%29%22%3E%3Cpath%20d%3D%22M11.4548%200.693201C11.1139%200.352266%2010.5611%200.352266%2010.2202%200.693201L8.98558%201.92784L12.0722%205.01442L13.3068%203.77979C13.6477%203.43885%2013.6477%202.88609%2013.3068%202.54515L11.4548%200.693201Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.98%22%2F%3E%3Cpath%20d%3D%22M11.1462%205.9404L8.0596%202.85381L0.960453%209.95296L0.443602%2013.0541C0.394363%2013.3495%200.650496%2013.6056%200.945935%2013.5564L4.04704%2013.0395L11.1462%205.9404Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.98%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_22040_41827%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") 2 12, auto',
|
|
95
|
+
},
|
|
96
|
+
maxWidth: {
|
|
97
|
+
xs: "var(--oui-spacing-xs, 20rem)", // 320px
|
|
98
|
+
sm: "var(--oui-spacing-sm, 22.5rem)", // 360px
|
|
99
|
+
md: "var(--oui-spacing-md, 26.25rem)", // 420px
|
|
100
|
+
lg: "var(--oui-spacing-lg, 30rem)", // 480px
|
|
101
|
+
xl: "var(--oui-spacing-xl, 33.75rem)", // 540px
|
|
102
|
+
},
|
|
103
|
+
colors: {
|
|
104
|
+
primary: {
|
|
105
|
+
DEFAULT: "rgb(var(--oui-color-primary) / <alpha-value>)",
|
|
106
|
+
light: "rgb(var(--oui-color-primary-light) / <alpha-value>)",
|
|
107
|
+
darken: "rgb(var(--oui-color-primary-darken) / <alpha-value>)",
|
|
108
|
+
contrast: "rgb(var(--oui-color-primary-contrast) / <alpha-value>)",
|
|
109
|
+
},
|
|
110
|
+
secondary: {
|
|
111
|
+
DEFAULT: "rgb(var(--oui-color-secondary) / <alpha-value>)",
|
|
112
|
+
},
|
|
113
|
+
tertiary: {
|
|
114
|
+
DEFAULT: "rgb(var(--oui-color-tertiary) / <alpha-value>)",
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
quaternary: {
|
|
118
|
+
DEFAULT: "rgb(var(--oui-color-quaternary) / <alpha-value>)",
|
|
119
|
+
},
|
|
120
|
+
link: {
|
|
121
|
+
DEFAULT: "rgb(var(--oui-color-link) / <alpha-value>)",
|
|
122
|
+
light: "rgb(var(--oui-color-link-light) / <alpha-value>)",
|
|
123
|
+
},
|
|
124
|
+
danger: {
|
|
125
|
+
DEFAULT: "rgb(var(--oui-color-danger) / <alpha-value>)",
|
|
126
|
+
light: "rgb(var(--oui-color-danger-light) / <alpha-value>)",
|
|
127
|
+
darken: "rgb(var(--oui-color-danger-darken) / <alpha-value>)",
|
|
128
|
+
contrast: "rgb(var(--oui-color-danger-contrast) / <alpha-value>)",
|
|
129
|
+
},
|
|
130
|
+
warning: {
|
|
131
|
+
DEFAULT: "rgb(var(--oui-color-warning) / <alpha-value>)",
|
|
132
|
+
light: "rgb(var(--oui-color-warning-light) / <alpha-value>)",
|
|
133
|
+
darken: "rgb(var(--oui-color-warning-darken) / <alpha-value>)",
|
|
134
|
+
contrast: "rgb(var(--oui-color-warning-contrast) / <alpha-value>)",
|
|
135
|
+
},
|
|
136
|
+
success: {
|
|
137
|
+
DEFAULT: "rgb(var(--oui-color-success) / <alpha-value>)",
|
|
138
|
+
light: "rgb(var(--oui-color-success-light) / <alpha-value>)",
|
|
139
|
+
darken: "rgb(var(--oui-color-success-darken) / <alpha-value>)",
|
|
140
|
+
contrast: "rgb(var(--oui-color-success-contrast) / <alpha-value>)",
|
|
141
|
+
},
|
|
142
|
+
base: {
|
|
143
|
+
1: "rgb(var(--oui-color-base-1) / <alpha-value>)",
|
|
144
|
+
2: "rgb(var(--oui-color-base-2) / <alpha-value>)",
|
|
145
|
+
3: "rgb(var(--oui-color-base-3) / <alpha-value>)",
|
|
146
|
+
4: "rgb(var(--oui-color-base-4) / <alpha-value>)",
|
|
147
|
+
5: "rgb(var(--oui-color-base-5) / <alpha-value>)",
|
|
148
|
+
6: "rgb(var(--oui-color-base-6) / <alpha-value>)",
|
|
149
|
+
7: "rgb(var(--oui-color-base-7) / <alpha-value>)",
|
|
150
|
+
8: "rgb(var(--oui-color-base-8) / <alpha-value>)",
|
|
151
|
+
9: "rgb(var(--oui-color-base-9) / <alpha-value>)",
|
|
152
|
+
10: "rgb(var(--oui-color-base-10) / <alpha-value>)",
|
|
153
|
+
contrast: {
|
|
154
|
+
// DEFAULT:"rgb(var(--oui-color-base-foreground) / <alpha-value>)",
|
|
155
|
+
DEFAULT: "rgb(var(--oui-color-base-foreground) / 0.98)",
|
|
156
|
+
80: "rgb(var(--oui-color-base-foreground) / 0.80)",
|
|
157
|
+
54: "rgb(var(--oui-color-base-foreground) / 0.54)",
|
|
158
|
+
36: "rgb(var(--oui-color-base-foreground) / 0.36)",
|
|
159
|
+
20: "rgb(var(--oui-color-base-foreground) / 0.2)",
|
|
160
|
+
12: "rgb(var(--oui-color-base-foreground) / 0.12)",
|
|
161
|
+
16: "rgb(var(--oui-color-base-foreground) / 0.16)",
|
|
162
|
+
},
|
|
163
|
+
},
|
|
164
|
+
line: {
|
|
165
|
+
4: "rgb(var(--oui-color-line, 255 255 255) / 0.04)",
|
|
166
|
+
6: "rgb(var(--oui-color-line, 255 255 255) / 0.06)",
|
|
167
|
+
DEFAULT: "rgb(var(--oui-color-line, 255 255 255) / 0.08)",
|
|
168
|
+
12: "rgb(var(--oui-color-line, 255 255 255) / 0.12)",
|
|
169
|
+
16: "rgb(var(--oui-color-line, 255 255 255) / 0.16)",
|
|
170
|
+
},
|
|
171
|
+
trade: {
|
|
172
|
+
loss: {
|
|
173
|
+
DEFAULT: "rgb(var(--oui-color-trading-loss) / <alpha-value>)",
|
|
174
|
+
contrast:
|
|
175
|
+
"rgb(var(--oui-color-trading-loss-contrast) / <alpha-value>)",
|
|
176
|
+
},
|
|
177
|
+
|
|
178
|
+
profit: {
|
|
179
|
+
DEFAULT: "rgb(var(--oui-color-trading-profit) / <alpha-value>)",
|
|
180
|
+
contrast:
|
|
181
|
+
"rgb(var(--oui-color-trading-profit-contrast) / <alpha-value>)",
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
// gradient: {
|
|
185
|
+
// success: 'linear-gradient(var(--oui-linear-degree, 90deg), var(--oui-color-success) 0%, var(--oui-color-success-darken) 100%)',
|
|
186
|
+
// }
|
|
187
|
+
},
|
|
188
|
+
animation: {
|
|
189
|
+
"rotate-360": "rotate 1s linear infinite",
|
|
190
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
191
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
192
|
+
"collapsible-down": "collapsible-down 0.2s ease-out",
|
|
193
|
+
"collapsible-up": "collapsible-up 0.2s ease-out",
|
|
194
|
+
"scan-qr-code": "scan-qr-code 6s infinite linear",
|
|
195
|
+
pop: "pop 0.2s ease-out",
|
|
196
|
+
},
|
|
197
|
+
keyframes: {
|
|
198
|
+
rotate: {
|
|
199
|
+
"0%": { transform: "rotate(0deg)" },
|
|
200
|
+
"50%": { transform: "rotate(240deg)" },
|
|
201
|
+
"100%": { transform: "rotate(360deg)" },
|
|
202
|
+
},
|
|
203
|
+
"accordion-down": {
|
|
204
|
+
from: { height: 0 },
|
|
205
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
206
|
+
},
|
|
207
|
+
"accordion-up": {
|
|
208
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
209
|
+
to: { height: 0 },
|
|
210
|
+
},
|
|
211
|
+
"collapsible-down": {
|
|
212
|
+
from: { height: 0 },
|
|
213
|
+
to: { height: "var(--radix-collapsible-content-height)" },
|
|
214
|
+
},
|
|
215
|
+
"collapsible-up": {
|
|
216
|
+
from: { height: "var(--radix-collapsible-content-height)" },
|
|
217
|
+
to: { height: 0 },
|
|
218
|
+
},
|
|
219
|
+
"scan-qr-code": {
|
|
220
|
+
"0%": {
|
|
221
|
+
transform: "translateY(0)",
|
|
222
|
+
},
|
|
223
|
+
"50%": {
|
|
224
|
+
transform: "translateY(320px)",
|
|
225
|
+
},
|
|
226
|
+
"100%": {
|
|
227
|
+
transform: "translateY(0)",
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
pop: {
|
|
231
|
+
"0%": {
|
|
232
|
+
transform: "scale(1)",
|
|
233
|
+
},
|
|
234
|
+
"100%": {
|
|
235
|
+
transform: "scale(1.05)",
|
|
236
|
+
},
|
|
237
|
+
},
|
|
238
|
+
},
|
|
239
|
+
},
|
|
240
|
+
},
|
|
241
|
+
plugins: [
|
|
242
|
+
themePlugin(),
|
|
243
|
+
basePlugin(),
|
|
244
|
+
sizePlugin(),
|
|
245
|
+
chartPlugin(),
|
|
246
|
+
gradientPlugin(),
|
|
247
|
+
positionPlugin(),
|
|
248
|
+
componentsPlugin(),
|
|
249
|
+
scrollBarPlugin(),
|
|
250
|
+
require("tailwindcss-animate"),
|
|
251
|
+
],
|
|
252
|
+
});
|