pentatrion-design 0.2.1 → 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.
Files changed (15) hide show
  1. package/package.json +1 -1
  2. package/tailwind/base.d.ts +3 -0
  3. package/tailwind/base.js +105 -0
  4. package/tailwind/components.d.ts +5 -0
  5. package/tailwind/components.js +258 -0
  6. package/tailwind/index.d.ts +2 -0
  7. package/tailwind/index.js +2 -0
  8. package/tailwind/keyframes.d.ts +2 -0
  9. package/tailwind/keyframes.js +67 -0
  10. package/tailwind/pentatrionTw.d.ts +50 -0
  11. package/tailwind/pentatrionTw.js +187 -0
  12. package/tailwind/utilities.d.ts +3 -0
  13. package/tailwind/utilities.js +61 -0
  14. package/tailwind/vars.d.ts +2 -0
  15. 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.1",
3
+ "version": "0.2.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "Hugues Tavernier",
package/tailwind/base.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { CSSRuleObject } from "tailwindcss/types/config";
2
+ export declare const layout: CSSRuleObject;
3
+ export declare const base: CSSRuleObject;
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
+ };
package/tailwind/components.d.ts ADDED
@@ -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;
package/tailwind/components.js ADDED
@@ -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
+ };
package/tailwind/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { keyframes } from "./keyframes.js";
2
+ export { pentatrionTw, pentatrionTypographyExtend } from "./pentatrionTw.js";
package/tailwind/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { keyframes } from "./keyframes.js";
2
+ export { pentatrionTw, pentatrionTypographyExtend } from "./pentatrionTw.js";
package/tailwind/keyframes.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { ThemeConfig } from "tailwindcss/types/config";
2
+ export declare const keyframes: ThemeConfig["keyframes"];
package/tailwind/keyframes.js ADDED
@@ -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
+ };
package/tailwind/pentatrionTw.d.ts ADDED
@@ -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 {};
package/tailwind/pentatrionTw.js ADDED
@@ -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
+ });
package/tailwind/utilities.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { CSSRuleObject } from "tailwindcss/types/config";
2
+ export declare const utilities: CSSRuleObject;
3
+ export declare const utilitiesDialog: CSSRuleObject;
package/tailwind/utilities.js ADDED
@@ -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.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { CSSRuleObject } from "tailwindcss/types/config";
2
+ export declare const vars: CSSRuleObject;
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
+ };