pentatrion-design 0.2.0 → 0.2.2
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/package.json +30 -30
- package/tailwind/base.d.ts +3 -0
- package/tailwind/base.js +105 -0
- package/tailwind/components.d.ts +5 -0
- package/tailwind/components.js +258 -0
- package/tailwind/index.d.ts +2 -0
- package/tailwind/index.js +2 -0
- package/tailwind/keyframes.d.ts +2 -0
- package/tailwind/keyframes.js +67 -0
- package/tailwind/pentatrionTw.d.ts +50 -0
- package/tailwind/pentatrionTw.js +187 -0
- package/tailwind/utilities.d.ts +3 -0
- package/tailwind/utilities.js +61 -0
- package/tailwind/vars.d.ts +2 -0
- package/tailwind/vars.js +104 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pentatrion-design",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Hugues Tavernier",
|
|
@@ -8,35 +8,35 @@
|
|
|
8
8
|
"exports": {
|
|
9
9
|
".": "./index.js",
|
|
10
10
|
"./types": "./types.js",
|
|
11
|
-
"./components/autocomplete": "./components/autocomplete.js",
|
|
12
|
-
"./components/badge": "./components/badge.js",
|
|
13
|
-
"./components/button": "./components/button.js",
|
|
14
|
-
"./components/card": "./components/card.js",
|
|
15
|
-
"./components/code": "./components/code.js",
|
|
16
|
-
"./components/context-menu": "./components/context.js",
|
|
17
|
-
"./components/dialog": "./components/dialog.js",
|
|
18
|
-
"./components/dropdown-menu": "./components/dropdown.js",
|
|
19
|
-
"./components/dropdown-menu-nested": "./components/dropdown.js",
|
|
20
|
-
"./components/flash": "./components/flash.js",
|
|
21
|
-
"./components/highlight": "./components/highlight.js",
|
|
22
|
-
"./components/href": "./components/href.js",
|
|
23
|
-
"./components/input": "./components/input.js",
|
|
24
|
-
"./components/input-field": "./components/input.js",
|
|
25
|
-
"./components/loader": "./components/loader.js",
|
|
26
|
-
"./components/modal": "./components/modal.js",
|
|
27
|
-
"./components/notification": "./components/notification.js",
|
|
28
|
-
"./components/popover": "./components/popover.js",
|
|
29
|
-
"./components/portal": "./components/portal.js",
|
|
30
|
-
"./components/resize-area": "./components/resize.js",
|
|
31
|
-
"./components/scroll": "./components/scroll.js",
|
|
32
|
-
"./components/select": "./components/select.js",
|
|
33
|
-
"./components/snack": "./components/snack.js",
|
|
34
|
-
"./components/sortable": "./components/sortable.js",
|
|
35
|
-
"./components/steps": "./components/steps.js",
|
|
36
|
-
"./components/table": "./components/table.js",
|
|
37
|
-
"./components/tabs": "./components/tabs.js",
|
|
38
|
-
"./components/textarea": "./components/textarea.js",
|
|
39
|
-
"./components/tooltip": "./components/tooltip.js",
|
|
11
|
+
"./components/autocomplete": "./components/autocomplete/index.js",
|
|
12
|
+
"./components/badge": "./components/badge/index.js",
|
|
13
|
+
"./components/button": "./components/button/index.js",
|
|
14
|
+
"./components/card": "./components/card/index.js",
|
|
15
|
+
"./components/code": "./components/code/index.js",
|
|
16
|
+
"./components/context-menu": "./components/context/index.js",
|
|
17
|
+
"./components/dialog": "./components/dialog/index.js",
|
|
18
|
+
"./components/dropdown-menu": "./components/dropdown/index.js",
|
|
19
|
+
"./components/dropdown-menu-nested": "./components/dropdown/index.js",
|
|
20
|
+
"./components/flash": "./components/flash/index.js",
|
|
21
|
+
"./components/highlight": "./components/highlight/index.js",
|
|
22
|
+
"./components/href": "./components/href/index.js",
|
|
23
|
+
"./components/input": "./components/input/index.js",
|
|
24
|
+
"./components/input-field": "./components/input/index.js",
|
|
25
|
+
"./components/loader": "./components/loader/index.js",
|
|
26
|
+
"./components/modal": "./components/modal/index.js",
|
|
27
|
+
"./components/notification": "./components/notification/index.js",
|
|
28
|
+
"./components/popover": "./components/popover/index.js",
|
|
29
|
+
"./components/portal": "./components/portal/index.js",
|
|
30
|
+
"./components/resize-area": "./components/resize/index.js",
|
|
31
|
+
"./components/scroll": "./components/scroll/index.js",
|
|
32
|
+
"./components/select": "./components/select/index.js",
|
|
33
|
+
"./components/snack": "./components/snack/index.js",
|
|
34
|
+
"./components/sortable": "./components/sortable/index.js",
|
|
35
|
+
"./components/steps": "./components/steps/index.js",
|
|
36
|
+
"./components/table": "./components/table/index.js",
|
|
37
|
+
"./components/tabs": "./components/tabs/index.js",
|
|
38
|
+
"./components/textarea": "./components/textarea/index.js",
|
|
39
|
+
"./components/tooltip": "./components/tooltip/index.js",
|
|
40
40
|
"./hooks": "./hooks/index.js",
|
|
41
41
|
"./lib": "./lib/index.js",
|
|
42
42
|
"./redux/notification": "./redux/notification/index.js",
|
package/tailwind/base.js
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
export const layout = {
|
|
2
|
+
html: {
|
|
3
|
+
"font-size": "16px",
|
|
4
|
+
"line-height": "24px",
|
|
5
|
+
"color-scheme": "normal",
|
|
6
|
+
},
|
|
7
|
+
body: {
|
|
8
|
+
"@apply bg-gray-0 font-sans text-gray-7": {},
|
|
9
|
+
},
|
|
10
|
+
".light": {
|
|
11
|
+
colorScheme: "light",
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export const base = {
|
|
15
|
+
":focus-visible": {
|
|
16
|
+
"@apply rounded outline outline-2 outline-offset-2 outline-yellow-5": {},
|
|
17
|
+
},
|
|
18
|
+
"textarea[readonly],.readonly": {
|
|
19
|
+
"@apply bg-gray-1": {},
|
|
20
|
+
},
|
|
21
|
+
":is(input,textarea)[readonly]": {
|
|
22
|
+
color: "rgb(var(--color-gray-6))",
|
|
23
|
+
},
|
|
24
|
+
'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration': {
|
|
25
|
+
display: "none",
|
|
26
|
+
},
|
|
27
|
+
'input[type="range"]': {
|
|
28
|
+
backgroundColor: "transparent",
|
|
29
|
+
"-webkit-appearance": "none",
|
|
30
|
+
appearance: "none",
|
|
31
|
+
},
|
|
32
|
+
'input[type="range"]::-webkit-slider-thumb': {
|
|
33
|
+
"-webkit-appearance": "none",
|
|
34
|
+
appearance: "none",
|
|
35
|
+
border: "0",
|
|
36
|
+
boxSizing: "border-box",
|
|
37
|
+
borderRadius: "50%",
|
|
38
|
+
cursor: "pointer",
|
|
39
|
+
position: "relative",
|
|
40
|
+
},
|
|
41
|
+
'input[type="range"]::-moz-range-thumb': {
|
|
42
|
+
appearance: "none",
|
|
43
|
+
border: "0",
|
|
44
|
+
boxSizing: "border-box",
|
|
45
|
+
borderRadius: "50%",
|
|
46
|
+
cursor: "pointer",
|
|
47
|
+
position: "relative",
|
|
48
|
+
},
|
|
49
|
+
'input[type="range"]::-ms-thumb': {
|
|
50
|
+
appearance: "none",
|
|
51
|
+
border: "0",
|
|
52
|
+
boxSizing: "border-box",
|
|
53
|
+
borderRadius: "50%",
|
|
54
|
+
cursor: "pointer",
|
|
55
|
+
position: "relative",
|
|
56
|
+
},
|
|
57
|
+
mark: {
|
|
58
|
+
"@apply bg-yellow-1 text-gray-8": {},
|
|
59
|
+
},
|
|
60
|
+
abbr: {
|
|
61
|
+
"@apply cursor-help underline decoration-dashed": {},
|
|
62
|
+
},
|
|
63
|
+
'[data-color="yellow"]': {
|
|
64
|
+
"--color-custom-1": "var(--color-yellow-1);",
|
|
65
|
+
"--color-custom-2": "var(--color-yellow-2);",
|
|
66
|
+
"--color-custom-3": "var(--color-yellow-3);",
|
|
67
|
+
"--color-custom-4": "var(--color-yellow-4);",
|
|
68
|
+
"--color-custom-5": "var(--color-yellow-5);",
|
|
69
|
+
},
|
|
70
|
+
'[data-color="gray"]': {
|
|
71
|
+
"--color-custom-1": "var(--color-gray-1);",
|
|
72
|
+
"--color-custom-2": "var(--color-gray-2);",
|
|
73
|
+
"--color-custom-3": "var(--color-gray-3);",
|
|
74
|
+
"--color-custom-4": "var(--color-gray-4);",
|
|
75
|
+
"--color-custom-5": "var(--color-gray-5);",
|
|
76
|
+
},
|
|
77
|
+
'[data-color="red"]': {
|
|
78
|
+
"--color-custom-1": "var(--color-red-1);",
|
|
79
|
+
"--color-custom-2": "var(--color-red-2);",
|
|
80
|
+
"--color-custom-3": "var(--color-red-3);",
|
|
81
|
+
"--color-custom-4": "var(--color-red-4);",
|
|
82
|
+
"--color-custom-5": "var(--color-red-5);",
|
|
83
|
+
},
|
|
84
|
+
'[data-color="orange"]': {
|
|
85
|
+
"--color-custom-1": "var(--color-orange-1);",
|
|
86
|
+
"--color-custom-2": "var(--color-orange-2);",
|
|
87
|
+
"--color-custom-3": "var(--color-orange-3);",
|
|
88
|
+
"--color-custom-4": "var(--color-orange-4);",
|
|
89
|
+
"--color-custom-5": "var(--color-orange-5);",
|
|
90
|
+
},
|
|
91
|
+
'[data-color="green"]': {
|
|
92
|
+
"--color-custom-1": "var(--color-green-1);",
|
|
93
|
+
"--color-custom-2": "var(--color-green-2);",
|
|
94
|
+
"--color-custom-3": "var(--color-green-3);",
|
|
95
|
+
"--color-custom-4": "var(--color-green-4);",
|
|
96
|
+
"--color-custom-5": "var(--color-green-5);",
|
|
97
|
+
},
|
|
98
|
+
'[data-color="blue"]': {
|
|
99
|
+
"--color-custom-1": "var(--color-blue-1);",
|
|
100
|
+
"--color-custom-2": "var(--color-blue-2);",
|
|
101
|
+
"--color-custom-3": "var(--color-blue-3);",
|
|
102
|
+
"--color-custom-4": "var(--color-blue-4);",
|
|
103
|
+
"--color-custom-5": "var(--color-blue-5);",
|
|
104
|
+
},
|
|
105
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CSSRuleObject } from "tailwindcss/types/config";
|
|
2
|
+
export declare const componentsStep: CSSRuleObject;
|
|
3
|
+
export declare const componentsResizeArea: CSSRuleObject;
|
|
4
|
+
export declare const componentsInputOutline: CSSRuleObject;
|
|
5
|
+
export declare const components: CSSRuleObject;
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
export const componentsStep = {
|
|
2
|
+
".ll-steps-extra": {
|
|
3
|
+
"@apply flex justify-between": {},
|
|
4
|
+
"& button:first-child": {
|
|
5
|
+
padding: "calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) / 2)\n calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) * 1.5 + 1rem)",
|
|
6
|
+
},
|
|
7
|
+
"& .ll-marker": {
|
|
8
|
+
transform: "translate(calc(var(--step-circle-radius) / 3))",
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
".ll-steps": {
|
|
12
|
+
"@apply relative": {},
|
|
13
|
+
'&[data-marker="circle"]': {
|
|
14
|
+
".marker": {
|
|
15
|
+
"@apply shadow bg-gray-1": {},
|
|
16
|
+
width: "calc(var(--step-circle-radius) * 2)",
|
|
17
|
+
height: "calc(var(--step-circle-radius) * 2)",
|
|
18
|
+
"&.active": { "@apply bg-gray-2": {} },
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
'&[data-marker="bullet"]': {
|
|
22
|
+
".marker": {
|
|
23
|
+
"@apply text-2xs bg-gray-0 outline outline-2 outline-gray-2": {},
|
|
24
|
+
margin: "calc(var(--step-circle-radius) / 2)",
|
|
25
|
+
width: "calc(var(--step-circle-radius))",
|
|
26
|
+
height: "calc(var(--step-circle-radius))",
|
|
27
|
+
"&.active": { "@apply outline-gray-4": {} },
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
'&[data-direction="horizontal"]': {
|
|
31
|
+
"@apply flex flex-wrap": {},
|
|
32
|
+
'&[data-marker="circle"]': {
|
|
33
|
+
"--line-width": "calc(100% - var(--step-circle-radius) * 2 - var(--line-space) * 2)",
|
|
34
|
+
"--line-left": "calc(50% + var(--step-circle-radius) + var(--line-space))",
|
|
35
|
+
},
|
|
36
|
+
'&[data-marker="bullet"]': {
|
|
37
|
+
"--line-width": "calc(100% - var(--step-circle-radius) - var(--line-space) * 2)",
|
|
38
|
+
"--line-left": "calc(50% + var(--step-circle-radius) / 2 + var(--line-space))",
|
|
39
|
+
},
|
|
40
|
+
"& .ll-step": {
|
|
41
|
+
"@apply flex flex-col flex-1 text-center": {},
|
|
42
|
+
".content": { "@apply mt-2": {} },
|
|
43
|
+
},
|
|
44
|
+
'&[data-global-line="false"] .ll-step:not(:last-child)::after': {
|
|
45
|
+
content: '""',
|
|
46
|
+
borderStyle: "none none var(--line-style) none",
|
|
47
|
+
width: "var(--line-width)",
|
|
48
|
+
marginTop: "-2px",
|
|
49
|
+
order: "-1",
|
|
50
|
+
position: "relative",
|
|
51
|
+
top: "calc(var(--step-circle-radius) + 1px)",
|
|
52
|
+
left: "var(--line-left)",
|
|
53
|
+
},
|
|
54
|
+
".marker-container": { "@apply flex items-center justify-center": {} },
|
|
55
|
+
},
|
|
56
|
+
'&[data-direction="vertical"]': {
|
|
57
|
+
'&[data-marker="circle"]': {
|
|
58
|
+
"--line-top": "calc(var(--step-circle-radius) * 2 + var(--line-space))",
|
|
59
|
+
"--line-bottom": "var(--line-space)",
|
|
60
|
+
},
|
|
61
|
+
'&[data-marker="bullet"]': {
|
|
62
|
+
"--line-top": "calc(var(--step-circle-radius) * 1.5 + var(--line-space))",
|
|
63
|
+
"--line-bottom": "calc(-0.5 * var(--step-circle-radius) + var(--line-space))",
|
|
64
|
+
},
|
|
65
|
+
".ll-step": {
|
|
66
|
+
"@apply relative gap-1 items-start flex": {},
|
|
67
|
+
"&:not(:last-child)": { paddingBottom: "0.5rem" },
|
|
68
|
+
},
|
|
69
|
+
'&[data-global-line="false"] .ll-step:not(:last-child)::after': {
|
|
70
|
+
"@apply absolute left-0 w-0": {},
|
|
71
|
+
content: '""',
|
|
72
|
+
top: "var(--line-top)",
|
|
73
|
+
bottom: "var(--line-bottom)",
|
|
74
|
+
transform: "translateX(calc(var(--step-circle-radius) - 1px))",
|
|
75
|
+
borderStyle: "none none none var(--line-style)",
|
|
76
|
+
},
|
|
77
|
+
'&[data-global-line="{}"]::after': {
|
|
78
|
+
"@apply absolute left-0 w-0 z-0": {},
|
|
79
|
+
content: '""',
|
|
80
|
+
top: "var(--line-top)",
|
|
81
|
+
bottom: "var(--line-top)",
|
|
82
|
+
transform: "translateX(calc(var(--step-circle-radius) - 1px))",
|
|
83
|
+
borderStyle: "none none none var(--line-style)",
|
|
84
|
+
},
|
|
85
|
+
".content": { "@apply flex-1": {} },
|
|
86
|
+
".title": { lineHeight: "1rem" },
|
|
87
|
+
},
|
|
88
|
+
'&[data-global-line="{}"]': {
|
|
89
|
+
"&::after": { "@apply border-gray-2 border-2": {} },
|
|
90
|
+
"&.status-done::after": { "@apply border-gray-3": {} },
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
".ll-step": {
|
|
94
|
+
'[data-global-line="false"] &:not(:last-child)': {
|
|
95
|
+
"&::after": { "@apply border-gray-2 border-2": {} },
|
|
96
|
+
"&.status-done::after": { "@apply border-gray-3": {} },
|
|
97
|
+
},
|
|
98
|
+
".handle": {
|
|
99
|
+
"@apply cursor-row-resize text-gray-6 motion-safe:transition-all": {},
|
|
100
|
+
"&.active": { "&:hover": { "@apply bg-gray-2 text-transparent": {} } },
|
|
101
|
+
},
|
|
102
|
+
".ll-autocomplete": { "@apply flex-1": {} },
|
|
103
|
+
".ll-button": { "@apply my-[2px] ml-2": {} },
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
export const componentsResizeArea = {
|
|
107
|
+
".p8n-resize-area": {
|
|
108
|
+
position: "absolute",
|
|
109
|
+
left: "0",
|
|
110
|
+
right: "0",
|
|
111
|
+
top: "0",
|
|
112
|
+
bottom: "0",
|
|
113
|
+
zIndex: "10",
|
|
114
|
+
overflow: "visible",
|
|
115
|
+
".area-button": {
|
|
116
|
+
position: "absolute",
|
|
117
|
+
"&::before": {
|
|
118
|
+
content: '""',
|
|
119
|
+
position: "absolute",
|
|
120
|
+
transitionDelay: "0.25s",
|
|
121
|
+
transition: "background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1)",
|
|
122
|
+
},
|
|
123
|
+
"&:hover::before": { backgroundColor: "rgb(var(--color-gray-5))" },
|
|
124
|
+
},
|
|
125
|
+
"&:where(.top, .bottom)": {
|
|
126
|
+
height: "0",
|
|
127
|
+
width: "100%",
|
|
128
|
+
".area-button": {
|
|
129
|
+
left: "0",
|
|
130
|
+
right: "0",
|
|
131
|
+
width: "100%",
|
|
132
|
+
height: "var(--resize-grip)",
|
|
133
|
+
cursor: "row-resize",
|
|
134
|
+
"&::before": {
|
|
135
|
+
left: "0",
|
|
136
|
+
right: "0",
|
|
137
|
+
height: "var(--resize-indicator)",
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
},
|
|
141
|
+
"&:where(.left, .right)": {
|
|
142
|
+
width: "0",
|
|
143
|
+
height: "100%",
|
|
144
|
+
".area-button": {
|
|
145
|
+
top: "0",
|
|
146
|
+
bottom: "0",
|
|
147
|
+
height: "100%",
|
|
148
|
+
width: "var(--resize-grip)",
|
|
149
|
+
cursor: "col-resize",
|
|
150
|
+
"&::before": {
|
|
151
|
+
top: "0",
|
|
152
|
+
bottom: "0",
|
|
153
|
+
width: "var(--resize-indicator)",
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
"&.top": {
|
|
158
|
+
bottom: "auto",
|
|
159
|
+
".area-button": {
|
|
160
|
+
top: "calc(-1 * var(--resize-grip) / 2)",
|
|
161
|
+
"&::before": { top: "calc(50% - var(--resize-indicator) / 2)" },
|
|
162
|
+
},
|
|
163
|
+
},
|
|
164
|
+
"&.bottom": {
|
|
165
|
+
top: "auto",
|
|
166
|
+
".area-button": {
|
|
167
|
+
bottom: "calc(-1 * var(--resize-grip) / 2)",
|
|
168
|
+
"&::before": { bottom: "calc(50% - var(--resize-indicator) / 2)" },
|
|
169
|
+
},
|
|
170
|
+
},
|
|
171
|
+
"&.right": {
|
|
172
|
+
left: "auto",
|
|
173
|
+
".area-button": {
|
|
174
|
+
right: "calc(-1 * var(--resize-grip) / 2)",
|
|
175
|
+
"&::before": { right: "calc(50% - var(--resize-indicator) / 2)" },
|
|
176
|
+
},
|
|
177
|
+
},
|
|
178
|
+
"&.left": {
|
|
179
|
+
right: "auto",
|
|
180
|
+
".area-button": {
|
|
181
|
+
left: "calc(-1 * var(--resize-grip) / 2)",
|
|
182
|
+
"&::before": { left: "calc(50% - var(--resize-indicator) / 2)" },
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
export const componentsInputOutline = {
|
|
188
|
+
":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea)": {
|
|
189
|
+
"@apply outline outline-1 outline-[rgb(var(--color-custom-2))] hover:outline-[rgb(var(--color-custom-3))] focus-full:outline-[rgb(var(--color-custom-4))]": {},
|
|
190
|
+
},
|
|
191
|
+
':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-color="yellow"])': {
|
|
192
|
+
"@apply outline-gray-2 hover:outline-gray-3": {},
|
|
193
|
+
},
|
|
194
|
+
":is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):not([readonly], .readonly)": {
|
|
195
|
+
"@apply focus-full:outline-2": {},
|
|
196
|
+
},
|
|
197
|
+
':is(.p8n-input-checkbox, .p8n-input-radio, .p8n-input-text, .p8n-textarea):where([data-variant="ghost"])': {
|
|
198
|
+
"@apply outline-transparent": {},
|
|
199
|
+
},
|
|
200
|
+
":is(.p8n-input-checkbox, .p8n-input-radio)": {
|
|
201
|
+
"@apply text-[rgb(var(--color-custom-3))]": {},
|
|
202
|
+
},
|
|
203
|
+
":is(.p8n-input-checkbox, .p8n-input-radio):is(:checked, .checked, .indeterminate)": {
|
|
204
|
+
"@apply bg-full bg-center bg-no-repeat outline-gray-1 bg-current": {},
|
|
205
|
+
},
|
|
206
|
+
".p8n-input-checkbox:not(.p8n-input-toggle):where(:checked, .checked)": {
|
|
207
|
+
backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")",
|
|
208
|
+
},
|
|
209
|
+
".p8n-input-radio:where(:checked, .checked)": {
|
|
210
|
+
backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")",
|
|
211
|
+
},
|
|
212
|
+
":is(.p8n-input-checkbox, .p8n-input-radio):is(.indeterminate, :checked.indeterminate)": {
|
|
213
|
+
backgroundImage: "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 7.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1Z' /%3e%3c/svg%3e\")",
|
|
214
|
+
},
|
|
215
|
+
};
|
|
216
|
+
export const components = {
|
|
217
|
+
".can-copy": {
|
|
218
|
+
textDecorationLine: "underline",
|
|
219
|
+
textDecorationStyle: "dashed",
|
|
220
|
+
textDecorationColor: "rgb(var(--color-gray-3) / 1)",
|
|
221
|
+
cursor: "copy",
|
|
222
|
+
"&:hover": {
|
|
223
|
+
textDecorationColor: "rgb(var(--color-gray-7) / 1)",
|
|
224
|
+
},
|
|
225
|
+
},
|
|
226
|
+
".disabled": {
|
|
227
|
+
pointerEvents: "none",
|
|
228
|
+
color: "rgb(var(--color-gray-6) / 1)",
|
|
229
|
+
"&[disabled]": {
|
|
230
|
+
opacity: "0.5",
|
|
231
|
+
},
|
|
232
|
+
},
|
|
233
|
+
".option": {
|
|
234
|
+
"@apply flex w-full px-2 h-8 items-center text-left relative cursor-pointer first:rounded-t-2xl last:rounded-b-2xl hover:bg-gray-1 focus-full:text-gray-8 outline-none": {},
|
|
235
|
+
"&[disabled]": { color: "rgb(var(--color-gray-6))", pointerEvents: "none" },
|
|
236
|
+
".bullet": {
|
|
237
|
+
width: "1rem",
|
|
238
|
+
height: "1rem",
|
|
239
|
+
display: "inline-flex",
|
|
240
|
+
alignItems: "center",
|
|
241
|
+
justifyContent: "center",
|
|
242
|
+
outline: "2px solid rgb(var(--color-gray-2))",
|
|
243
|
+
fontSize: "var(--font-size-xs)",
|
|
244
|
+
borderRadius: "50%",
|
|
245
|
+
margin: "0 0.75rem 0 3px",
|
|
246
|
+
},
|
|
247
|
+
},
|
|
248
|
+
".p8n-separator": {
|
|
249
|
+
"@apply bg-gray-1 w-full h-0.5 rounded-sm mx-auto relative": {},
|
|
250
|
+
},
|
|
251
|
+
".p8n-setting": {
|
|
252
|
+
"@apply flex items-center justify-between": {},
|
|
253
|
+
"& > :first-child": { "@apply text-gray-6 text-sm": {} },
|
|
254
|
+
"& > :nth-child(2)": { textAlign: "right" },
|
|
255
|
+
"& > :nth-child(2) input": { textAlign: "right" },
|
|
256
|
+
"&.multiple": { alignItems: "flex-start" },
|
|
257
|
+
},
|
|
258
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
export const keyframes = {
|
|
2
|
+
ripple: {
|
|
3
|
+
to: {
|
|
4
|
+
transform: "scale(4)",
|
|
5
|
+
opacity: "0",
|
|
6
|
+
},
|
|
7
|
+
},
|
|
8
|
+
"fade-in": {
|
|
9
|
+
from: {
|
|
10
|
+
transform: "scale(.8)",
|
|
11
|
+
opacity: "0",
|
|
12
|
+
},
|
|
13
|
+
to: {
|
|
14
|
+
transform: "scale(1)",
|
|
15
|
+
opacity: "1",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
"fade-in-list": {
|
|
19
|
+
from: {
|
|
20
|
+
transform: "scaleY(.8)",
|
|
21
|
+
opacity: "0",
|
|
22
|
+
},
|
|
23
|
+
to: {
|
|
24
|
+
transform: "scaleY(1)",
|
|
25
|
+
opacity: "1",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
"fade-out": {
|
|
29
|
+
from: {
|
|
30
|
+
transform: "scale(1)",
|
|
31
|
+
opacity: "1",
|
|
32
|
+
},
|
|
33
|
+
to: {
|
|
34
|
+
transform: "scale(.8)",
|
|
35
|
+
opacity: "0",
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
"fade-in-opacity": {
|
|
39
|
+
from: {
|
|
40
|
+
opacity: "0",
|
|
41
|
+
},
|
|
42
|
+
to: {
|
|
43
|
+
opacity: "1",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
flash: {
|
|
47
|
+
"0%": {
|
|
48
|
+
opacity: "0",
|
|
49
|
+
},
|
|
50
|
+
"50%": {
|
|
51
|
+
opacity: "1",
|
|
52
|
+
},
|
|
53
|
+
"100%": {
|
|
54
|
+
opacity: "0",
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
"loader-stroke": {
|
|
58
|
+
from: {
|
|
59
|
+
// check : packages/pentatrion-design/components/loader/Loader.tsx
|
|
60
|
+
// for dashoffset value
|
|
61
|
+
"stroke-dashoffset": "43.699",
|
|
62
|
+
},
|
|
63
|
+
to: {
|
|
64
|
+
"stroke-dashoffset": "0",
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export declare const pentatrionTypographyExtend: {
|
|
2
|
+
DEFAULT: {
|
|
3
|
+
css: {
|
|
4
|
+
maxWidth: string;
|
|
5
|
+
a: {
|
|
6
|
+
color: string;
|
|
7
|
+
textDecoration: string;
|
|
8
|
+
textDecorationColor: string;
|
|
9
|
+
};
|
|
10
|
+
"a:visited": {
|
|
11
|
+
color: string;
|
|
12
|
+
};
|
|
13
|
+
"a:hover": {
|
|
14
|
+
color: string;
|
|
15
|
+
textDecorationColor: string;
|
|
16
|
+
textDecorationThickness: number;
|
|
17
|
+
};
|
|
18
|
+
"a:active": {
|
|
19
|
+
color: string;
|
|
20
|
+
};
|
|
21
|
+
mark: {
|
|
22
|
+
color: string;
|
|
23
|
+
backgroundColor: string;
|
|
24
|
+
};
|
|
25
|
+
abbr: {
|
|
26
|
+
textDecoration: string;
|
|
27
|
+
textDecorationStyle: string;
|
|
28
|
+
cursor: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
interface PentatrionTwOptions {
|
|
34
|
+
vars?: boolean;
|
|
35
|
+
base?: boolean;
|
|
36
|
+
components?: boolean;
|
|
37
|
+
componentsInputOutline?: boolean;
|
|
38
|
+
componentsResizeArea?: boolean;
|
|
39
|
+
componentsStep?: boolean;
|
|
40
|
+
utilities?: boolean;
|
|
41
|
+
utilitiesDialog?: boolean;
|
|
42
|
+
}
|
|
43
|
+
export declare const pentatrionTw: {
|
|
44
|
+
(options: PentatrionTwOptions): {
|
|
45
|
+
handler: import("tailwindcss/types/config").PluginCreator;
|
|
46
|
+
config?: Partial<import("tailwindcss/types/config").Config>;
|
|
47
|
+
};
|
|
48
|
+
__isOptionsFunction: true;
|
|
49
|
+
};
|
|
50
|
+
export {};
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import plugin from "tailwindcss/plugin";
|
|
2
|
+
import { keyframes } from "./keyframes.js";
|
|
3
|
+
import defaultTheme from "tailwindcss/defaultTheme";
|
|
4
|
+
import { vars } from "./vars.js";
|
|
5
|
+
import { base } from "./base.js";
|
|
6
|
+
import { components, componentsInputOutline, componentsResizeArea, componentsStep, } from "./components.js";
|
|
7
|
+
import { utilities, utilitiesDialog } from "./utilities.js";
|
|
8
|
+
export const pentatrionTypographyExtend = {
|
|
9
|
+
DEFAULT: {
|
|
10
|
+
css: {
|
|
11
|
+
maxWidth: "none",
|
|
12
|
+
a: {
|
|
13
|
+
color: "rgb(var(--color-gray-8))",
|
|
14
|
+
textDecoration: "underline",
|
|
15
|
+
textDecorationColor: "rgb(var(--color-gray-8))",
|
|
16
|
+
},
|
|
17
|
+
"a:visited": {
|
|
18
|
+
color: "rgb(var(--color-gray-8))",
|
|
19
|
+
},
|
|
20
|
+
"a:hover": {
|
|
21
|
+
color: "rgb(var(--color-gray-8))",
|
|
22
|
+
textDecorationColor: "rgb(var(--color-yellow-5))",
|
|
23
|
+
textDecorationThickness: 2,
|
|
24
|
+
},
|
|
25
|
+
"a:active": {
|
|
26
|
+
color: "rgb(var(--color-yellow-5))",
|
|
27
|
+
},
|
|
28
|
+
mark: {
|
|
29
|
+
color: "rgb(var(--color-gray-8))",
|
|
30
|
+
backgroundColor: "rgb(var(--color-yellow-1))",
|
|
31
|
+
},
|
|
32
|
+
abbr: {
|
|
33
|
+
textDecoration: "underline",
|
|
34
|
+
textDecorationStyle: "dashed",
|
|
35
|
+
cursor: "help",
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
export const pentatrionTw = plugin.withOptions(function (options = {}) {
|
|
41
|
+
return ({ addBase, addUtilities, addComponents, addVariant }) => {
|
|
42
|
+
options.vars !== false && addBase(vars);
|
|
43
|
+
options.base !== false && addBase(base);
|
|
44
|
+
options.components !== false && addComponents(components);
|
|
45
|
+
options.componentsInputOutline !== false && addComponents(componentsInputOutline);
|
|
46
|
+
options.componentsResizeArea !== false && addComponents(componentsResizeArea);
|
|
47
|
+
options.componentsStep !== false && addComponents(componentsStep);
|
|
48
|
+
options.utilities !== false && addUtilities(utilities);
|
|
49
|
+
options.utilitiesDialog !== false && addUtilities(utilitiesDialog);
|
|
50
|
+
addVariant("active-full", ["&:active", "&.active"]);
|
|
51
|
+
// dbl :focus:focus else :hover will have priority to focus-full variant.
|
|
52
|
+
addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus:focus"]);
|
|
53
|
+
};
|
|
54
|
+
}, function () {
|
|
55
|
+
return {
|
|
56
|
+
theme: {
|
|
57
|
+
zIndex: {
|
|
58
|
+
auto: "auto",
|
|
59
|
+
0: "0",
|
|
60
|
+
10: "10",
|
|
61
|
+
20: "20",
|
|
62
|
+
30: "30",
|
|
63
|
+
40: "40",
|
|
64
|
+
50: "50",
|
|
65
|
+
dialog: "100",
|
|
66
|
+
overlay: "100",
|
|
67
|
+
tooltip: "100",
|
|
68
|
+
"context-menu": "90",
|
|
69
|
+
notification: "80",
|
|
70
|
+
},
|
|
71
|
+
transitionDuration: {
|
|
72
|
+
...defaultTheme.transitionDuration,
|
|
73
|
+
DEFAULT: "300ms",
|
|
74
|
+
},
|
|
75
|
+
colors: {
|
|
76
|
+
transparent: "transparent",
|
|
77
|
+
current: "currentColor",
|
|
78
|
+
black: "rgb(var(--color-black) / <alpha-value>)",
|
|
79
|
+
white: "rgb(var(--color-white) / <alpha-value>)",
|
|
80
|
+
yellow: {
|
|
81
|
+
1: "rgb(var(--color-yellow-1) / <alpha-value>)",
|
|
82
|
+
2: "rgb(var(--color-yellow-2) / <alpha-value>)",
|
|
83
|
+
3: "rgb(var(--color-yellow-3) / <alpha-value>)",
|
|
84
|
+
4: "rgb(var(--color-yellow-4) / <alpha-value>)",
|
|
85
|
+
5: "rgb(var(--color-yellow-5) / <alpha-value>)",
|
|
86
|
+
// color of the text when bg is yellow 3
|
|
87
|
+
text: "rgb(var(--color-yellow-text) / <alpha-value>)",
|
|
88
|
+
},
|
|
89
|
+
green: {
|
|
90
|
+
1: "rgb(var(--color-green-1) / <alpha-value>)",
|
|
91
|
+
2: "rgb(var(--color-green-2) / <alpha-value>)",
|
|
92
|
+
3: "rgb(var(--color-green-3) / <alpha-value>)",
|
|
93
|
+
4: "rgb(var(--color-green-4) / <alpha-value>)",
|
|
94
|
+
5: "rgb(var(--color-green-5) / <alpha-value>)",
|
|
95
|
+
// color of the text when bg is green
|
|
96
|
+
text: "rgb(var(--color-green-text) / <alpha-value>)",
|
|
97
|
+
},
|
|
98
|
+
blue: {
|
|
99
|
+
1: "rgb(var(--color-blue-1) / <alpha-value>)",
|
|
100
|
+
2: "rgb(var(--color-blue-2) / <alpha-value>)",
|
|
101
|
+
3: "rgb(var(--color-blue-3) / <alpha-value>)",
|
|
102
|
+
4: "rgb(var(--color-blue-4) / <alpha-value>)",
|
|
103
|
+
5: "rgb(var(--color-blue-5) / <alpha-value>)",
|
|
104
|
+
// color of the text when bg is blue
|
|
105
|
+
text: "rgb(var(--color-blue-text) / <alpha-value>)",
|
|
106
|
+
},
|
|
107
|
+
orange: {
|
|
108
|
+
1: "rgb(var(--color-orange-1) / <alpha-value>)",
|
|
109
|
+
2: "rgb(var(--color-orange-2) / <alpha-value>)",
|
|
110
|
+
3: "rgb(var(--color-orange-3) / <alpha-value>)",
|
|
111
|
+
4: "rgb(var(--color-orange-4) / <alpha-value>)",
|
|
112
|
+
5: "rgb(var(--color-orange-5) / <alpha-value>)",
|
|
113
|
+
// color of the text when bg is orange
|
|
114
|
+
text: "rgb(var(--color-orange-text) / <alpha-value>)",
|
|
115
|
+
},
|
|
116
|
+
red: {
|
|
117
|
+
1: "rgb(var(--color-red-1) / <alpha-value>)",
|
|
118
|
+
2: "rgb(var(--color-red-2) / <alpha-value>)",
|
|
119
|
+
3: "rgb(var(--color-red-3) / <alpha-value>)",
|
|
120
|
+
4: "rgb(var(--color-red-4) / <alpha-value>)",
|
|
121
|
+
5: "rgb(var(--color-red-5) / <alpha-value>)",
|
|
122
|
+
// color of the text when bg is red
|
|
123
|
+
text: "rgb(var(--color-red-text) / <alpha-value>)",
|
|
124
|
+
},
|
|
125
|
+
gray: {
|
|
126
|
+
0: "rgb(var(--color-gray-0) / <alpha-value>)",
|
|
127
|
+
1: "rgb(var(--color-gray-1) / <alpha-value>)",
|
|
128
|
+
2: "rgb(var(--color-gray-2) / <alpha-value>)",
|
|
129
|
+
3: "rgb(var(--color-gray-3) / <alpha-value>)",
|
|
130
|
+
4: "rgb(var(--color-gray-4) / <alpha-value>)",
|
|
131
|
+
5: "rgb(var(--color-gray-5) / <alpha-value>)",
|
|
132
|
+
6: "rgb(var(--color-gray-6) / <alpha-value>)",
|
|
133
|
+
7: "rgb(var(--color-gray-7) / <alpha-value>)",
|
|
134
|
+
8: "rgb(var(--color-gray-8) / <alpha-value>)",
|
|
135
|
+
// color of the text when bg is gray
|
|
136
|
+
text: "rgb(var(--color-gray-text) / <alpha-value>)",
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
boxShadow: {
|
|
140
|
+
sm: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
|
|
141
|
+
DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15)",
|
|
142
|
+
md: "0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15)",
|
|
143
|
+
lg: "0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
|
|
144
|
+
xl: "0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15)",
|
|
145
|
+
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.35)",
|
|
146
|
+
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.1)",
|
|
147
|
+
dark: "0 0 0 1px rgb(var(--color-gray-2))",
|
|
148
|
+
none: "none",
|
|
149
|
+
},
|
|
150
|
+
fontFamily: {
|
|
151
|
+
sans: ["ui-sans-serif", "system-ui", "sans-serif"],
|
|
152
|
+
fontello: ["fontello"],
|
|
153
|
+
serif: defaultTheme.fontFamily.serif,
|
|
154
|
+
mono: defaultTheme.fontFamily.mono,
|
|
155
|
+
},
|
|
156
|
+
extend: {
|
|
157
|
+
// https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
|
|
158
|
+
backgroundSize: {
|
|
159
|
+
full: "100%",
|
|
160
|
+
},
|
|
161
|
+
dropShadow: {
|
|
162
|
+
arrow: "0 1px 3px rgb(var(--color-gray-3))",
|
|
163
|
+
},
|
|
164
|
+
transitionProperty: {
|
|
165
|
+
"color-shadow": "color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow",
|
|
166
|
+
},
|
|
167
|
+
gridTemplateColumns: {
|
|
168
|
+
"repeat-fill-300": "repeat(auto-fill, minmax(300px, 1fr))",
|
|
169
|
+
"repeat-fill-160": "repeat(auto-fill, minmax(160px, 1fr))",
|
|
170
|
+
},
|
|
171
|
+
animation: {
|
|
172
|
+
ripple: "ripple .9s linear",
|
|
173
|
+
"fade-in": "fade-in 250ms ease both",
|
|
174
|
+
"fade-in-list": "fade-in-list 150ms ease both",
|
|
175
|
+
"fade-out": "fade-out 250ms ease both",
|
|
176
|
+
"fade-in-opacity": "fade-in-opacity 250ms ease both",
|
|
177
|
+
flash: "flash 1000ms ease both infinite",
|
|
178
|
+
"loader-stroke": "loader-stroke 1s linear infinite",
|
|
179
|
+
},
|
|
180
|
+
fontSize: {
|
|
181
|
+
"2xs": ["0.688rem", { lineHeight: "1rem" }],
|
|
182
|
+
},
|
|
183
|
+
keyframes,
|
|
184
|
+
},
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
});
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
export const utilities = {
|
|
2
|
+
".flex-center": {
|
|
3
|
+
display: "flex",
|
|
4
|
+
"align-items": "center",
|
|
5
|
+
"justify-content": "center",
|
|
6
|
+
},
|
|
7
|
+
"a.link": {
|
|
8
|
+
"@apply decoration-gray-8 underline text-gray-8 visited:text-gray-8 active:text-yellow-4 hover:decoration-2 hover:decoration-yellow-4": {},
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
export const utilitiesDialog = {
|
|
12
|
+
'[data-placement^="top"]': {
|
|
13
|
+
transformOrigin: "bottom",
|
|
14
|
+
"& .p8n-arrow": {
|
|
15
|
+
"@apply w-0 h-0 absolute border-x-8 border-t-8 border-x-transparent border-t-current top-full drop-shadow-arrow dark:drop-shadow-[0_1px_0_rgb(var(--color-gray-2))]": {},
|
|
16
|
+
clip: "rect(0px, 16px, 12px, 0px)",
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
'[data-placement="top-start"]': { transformOrigin: "bottom left" },
|
|
20
|
+
'[data-placement="top-end"]': { transformOrigin: "bottom right" },
|
|
21
|
+
'[data-placement^="bottom"]': {
|
|
22
|
+
transformOrigin: "top",
|
|
23
|
+
"& .p8n-arrow": {
|
|
24
|
+
"@apply w-0 h-0 absolute border-x-8 border-b-8 border-x-transparent border-b-current bottom-full drop-shadow-arrow dark:drop-shadow-[0_-1px_0_rgb(var(--color-gray-2))]": {},
|
|
25
|
+
clip: "rect(-4px, 16px, 8px, 0px)",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
'[data-placement="bottom-start"]': { transformOrigin: "top left" },
|
|
29
|
+
'[data-placement="bottom-end"]': { transformOrigin: "top right" },
|
|
30
|
+
'[data-placement^="left"]': {
|
|
31
|
+
transformOrigin: "right",
|
|
32
|
+
"& .p8n-arrow": {
|
|
33
|
+
"@apply w-0 h-0 absolute border-y-8 border-l-8 border-y-transparent border-l-current left-full drop-shadow-arrow dark:drop-shadow-[1px_0_0_rgb(var(--color-gray-2))]": {},
|
|
34
|
+
clip: "rect(0px, 12px, 16px, 0px)",
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
'[data-placement="left-start"]': { transformOrigin: "top right" },
|
|
38
|
+
'[data-placement="left-end"]': { transformOrigin: "bottom right" },
|
|
39
|
+
'[data-placement^="right"]': {
|
|
40
|
+
transformOrigin: "left",
|
|
41
|
+
"& .p8n-arrow": {
|
|
42
|
+
"@apply w-0 h-0 absolute border-y-8 border-r-8 border-y-transparent border-r-current right-full drop-shadow-arrow dark:drop-shadow-[-1px_0_0_rgb(var(--color-gray-2))]": {},
|
|
43
|
+
clip: "rect(0px, 8px, 16px, -4px)",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
'[data-placement="right-start"]': { transformOrigin: "top left" },
|
|
47
|
+
'[data-placement="right-end"]': { transformOrigin: "bottom left" },
|
|
48
|
+
".p8n-arrow": {
|
|
49
|
+
"@apply text-[rgb(var(--color-custom-1))]": {},
|
|
50
|
+
},
|
|
51
|
+
'[data-color="yellow"] .p8n-arrow': {
|
|
52
|
+
"@apply text-gray-0": {},
|
|
53
|
+
},
|
|
54
|
+
'[data-color="gray"] .p8n-arrow': {
|
|
55
|
+
"@apply text-gray-0": {},
|
|
56
|
+
},
|
|
57
|
+
".option[data-nested][data-open]:not([data-focus-inside])": {
|
|
58
|
+
"@apply bg-gray-2": {},
|
|
59
|
+
},
|
|
60
|
+
".option[data-focus-inside][data-open]": { "@apply bg-gray-1": {} },
|
|
61
|
+
};
|
package/tailwind/vars.js
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
export const vars = {
|
|
2
|
+
":root": {
|
|
3
|
+
"--color-white": "255 255 255",
|
|
4
|
+
"--color-black": "0 0 0",
|
|
5
|
+
/* bg outlined color */
|
|
6
|
+
"--color-yellow-1": "255 250 199" /* rgb(255, 250, 199); */,
|
|
7
|
+
/* bg outlined hovered color */
|
|
8
|
+
"--color-yellow-2": "255 245 142" /* rgb(255, 245, 142); */,
|
|
9
|
+
// /* button default bgcolor */
|
|
10
|
+
"--color-yellow-3": "255 232 34" /* rgb(255, 232, 34); */,
|
|
11
|
+
// /* text color, button hover bgcolor */
|
|
12
|
+
"--color-yellow-4": "251 191 36" /* rgb(251, 191, 36); */,
|
|
13
|
+
// /* text hover color, button active bgcolor */
|
|
14
|
+
"--color-yellow-5": "245 158 11" /* rgb(245, 158, 11); */,
|
|
15
|
+
"--color-yellow-text": "var(--color-gray-7)",
|
|
16
|
+
"--color-green-1": "232 245 212" /* rgb(232, 245, 212); */,
|
|
17
|
+
"--color-green-2": "209 235 170" /* rgb(209, 235, 170); */,
|
|
18
|
+
"--color-green-3": "162 215 87" /* rgb(162, 215, 87); */,
|
|
19
|
+
"--color-green-4": "138 200 66" /* rgb(138, 200, 66); */,
|
|
20
|
+
"--color-green-5": "79 158 35" /* rgb(79, 158, 35); */,
|
|
21
|
+
"--color-green-text": "var(--color-gray-7)",
|
|
22
|
+
"--color-blue-1": "237 247 255" /* rgb(237, 247, 255); */,
|
|
23
|
+
"--color-blue-2": "203 232 255" /* rgb(203, 232, 255); */,
|
|
24
|
+
"--color-blue-3": "131 203 255" /* rgb(131, 203, 255);*/,
|
|
25
|
+
"--color-blue-4": "75 167 230" /* rgb(75, 167, 230);*/,
|
|
26
|
+
"--color-blue-5": "37 126 158" /* rgb(37, 126, 158);*/,
|
|
27
|
+
"--color-blue-text": "var(--color-gray-7)",
|
|
28
|
+
"--color-orange-1": "255 244 219" /* rgb(255, 244, 219); */,
|
|
29
|
+
"--color-orange-2": "255 221 179" /* rgb(255, 221, 179); */,
|
|
30
|
+
"--color-orange-3": "255 176 100" /* rgb(255, 176, 100); */,
|
|
31
|
+
"--color-orange-4": "230 140 53" /* rgb(230, 140, 53); */,
|
|
32
|
+
"--color-orange-5": "179 91 38" /* rgb(179, 91, 38); */,
|
|
33
|
+
"--color-orange-text": "var(--color-gray-7)",
|
|
34
|
+
"--color-red-1": "255 219 219" /* rgb(255, 219, 219); */,
|
|
35
|
+
"--color-red-2": "255 183 183" /* rgb(255, 183, 183); */,
|
|
36
|
+
"--color-red-3": "255 111 111" /* rgb(255, 111, 111); */,
|
|
37
|
+
"--color-red-4": "230 62 62" /* rgb(230, 62, 62); */,
|
|
38
|
+
"--color-red-5": "179 38 38" /* rgb(179, 38, 38); */,
|
|
39
|
+
"--color-red-text": "var(--color-gray-7)",
|
|
40
|
+
"--color-gray-0": "255 255 255" /* rgb(255, 255, 255); */,
|
|
41
|
+
"--color-gray-1": "242 242 242" /* rgb(242, 242, 242); */,
|
|
42
|
+
"--color-gray-2": "228 228 228" /* rgb(228, 228, 228); */,
|
|
43
|
+
"--color-gray-3": "204 204 204" /* rgb(204, 204, 204); */,
|
|
44
|
+
"--color-gray-4": "180 180 180" /* rgb(180, 180, 180); */,
|
|
45
|
+
"--color-gray-5": "140 140 140" /* rgb(140, 140, 140); */,
|
|
46
|
+
/* text-hint text-disabled */
|
|
47
|
+
"--color-gray-6": "90 90 90" /* rgb(90, 90, 90); */,
|
|
48
|
+
"--color-gray-7": "50 50 50" /* rgb(50, 50, 50); */,
|
|
49
|
+
"--color-gray-8": "0 0 0" /* rgb(0, 0, 0); */,
|
|
50
|
+
"--color-gray-text": "var(--color-gray-7)",
|
|
51
|
+
"--resize-grip": "10px",
|
|
52
|
+
"--resize-indicator": "2px",
|
|
53
|
+
"--step-circle-radius": "16px",
|
|
54
|
+
},
|
|
55
|
+
".dark": {
|
|
56
|
+
colorScheme: "dark",
|
|
57
|
+
/* text hover color, button active bgcolor */
|
|
58
|
+
"--color-yellow-5": "255 250 199" /* rgb(255, 250, 199); */,
|
|
59
|
+
/* text color, button hover bgcolor */
|
|
60
|
+
"--color-yellow-4": "255 245 142" /* rgb(255, 245, 142); */,
|
|
61
|
+
/* button default bgcolor */
|
|
62
|
+
"--color-yellow-3": "255 232 34" /* rgb(255, 232, 34); */,
|
|
63
|
+
/* bg outlined hovered color (with generally 50% transparency) */
|
|
64
|
+
"--color-yellow-2": "251 191 36" /* rgb(251, 191, 36); */,
|
|
65
|
+
/* bg outlined color (with generally 50% transparency) */
|
|
66
|
+
"--color-yellow-1": "245 158 11" /* rgb(245, 158, 11); */,
|
|
67
|
+
"--color-yellow-text": "var(--color-gray-0)",
|
|
68
|
+
"--color-green-5": "232 245 212" /* rgb(232, 245, 212); */,
|
|
69
|
+
"--color-green-4": "209 235 170" /* rgb(209, 235, 170); */,
|
|
70
|
+
"--color-green-3": "162 215 87" /* rgb(162, 215, 87); */,
|
|
71
|
+
"--color-green-2": "138 200 66" /* rgb(138, 200, 66); */,
|
|
72
|
+
"--color-green-1": "79 158 35" /* rgb(79, 158, 35); */,
|
|
73
|
+
"--color-green-text": "var(--color-gray-0)",
|
|
74
|
+
"--color-blue-5": "237 247 255" /* rgb(237, 247, 255); */,
|
|
75
|
+
"--color-blue-4": "203 232 255" /* rgb(203, 232, 255); */,
|
|
76
|
+
"--color-blue-3": "131 203 255" /* rgb(131, 203, 255);*/,
|
|
77
|
+
"--color-blue-2": "75 167 230" /* rgb(75, 167, 230);*/,
|
|
78
|
+
"--color-blue-1": "37 126 158" /* rgb(37, 126, 158);*/,
|
|
79
|
+
"--color-blue-text": "var(--color-gray-0)",
|
|
80
|
+
"--color-orange-5": "255 244 219" /* rgb(255, 244, 219); */,
|
|
81
|
+
"--color-orange-4": "255 221 179" /* rgb(255, 221, 179); */,
|
|
82
|
+
"--color-orange-3": "255 176 100" /* rgb(255, 176, 100); */,
|
|
83
|
+
"--color-orange-2": "230 140 53" /* rgb(230, 140, 53); */,
|
|
84
|
+
"--color-orange-1": "179 91 38" /* rgb(179, 91, 38); */,
|
|
85
|
+
"--color-orange-text": "var(--color-gray-0)",
|
|
86
|
+
"--color-red-5": "255 219 219" /* rgb(255, 219, 219); */,
|
|
87
|
+
"--color-red-4": "255 183 183" /* rgb(255, 183, 183); */,
|
|
88
|
+
"--color-red-3": "255 111 111" /* rgb(255, 111, 111); */,
|
|
89
|
+
"--color-red-2": "230 62 62" /* rgb(230, 62, 62); */,
|
|
90
|
+
"--color-red-1": "179 38 38" /* rgb(179, 38, 38); */,
|
|
91
|
+
"--color-red-text": "var(--color-gray-0)",
|
|
92
|
+
"--color-gray-8": "255 255 255" /* rgb(255, 255, 255); */,
|
|
93
|
+
"--color-gray-7": "220 220 220" /* rgb(220, 220, 220); */,
|
|
94
|
+
/* text-hint text-disabled */
|
|
95
|
+
"--color-gray-6": "180 180 180" /* rgb(180, 180, 180); */,
|
|
96
|
+
"--color-gray-5": "140 140 140" /* rgb(140, 140, 140); */,
|
|
97
|
+
"--color-gray-4": "100 100 100" /* rgb(100, 100, 100); */,
|
|
98
|
+
"--color-gray-3": "75 75 75" /* rgb(75, 75, 75); */,
|
|
99
|
+
"--color-gray-2": "50 50 50" /* rgb(50, 50, 50); */,
|
|
100
|
+
"--color-gray-1": "35 35 35" /* rgb(35, 35, 35); */,
|
|
101
|
+
"--color-gray-0": "21 29 29" /* rgb(21, 29, 29); */,
|
|
102
|
+
"--color-gray-text": "var(--color-gray-8)",
|
|
103
|
+
},
|
|
104
|
+
};
|