@redseed/redseed-ui-tailwindcss 5.2.0 → 5.3.1
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/components/button_primary.css +17 -0
- package/components/button_secondary.css +17 -0
- package/components/button_slot.css +102 -0
- package/components/button_tertiary.css +17 -0
- package/index.css +6 -0
- package/index.js +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.rsui-button-primary {
|
|
2
|
+
/* default colors */
|
|
3
|
+
@apply text-text-on-color bg-button-primary border-button-primary;
|
|
4
|
+
|
|
5
|
+
/* default hover state */
|
|
6
|
+
@apply hover:text-text-on-color hover:bg-button-primary-hover hover:border-button-primary-hover;
|
|
7
|
+
|
|
8
|
+
/* default focus state */
|
|
9
|
+
@apply focus-visible:ring-button-primary focus-visible:border-button-primary;
|
|
10
|
+
|
|
11
|
+
/* default active state */
|
|
12
|
+
@apply active:bg-button-primary-active active:border-button-primary-active;
|
|
13
|
+
|
|
14
|
+
/* default disabled state */
|
|
15
|
+
@apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
|
|
16
|
+
@apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
|
|
17
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.rsui-button-secondary {
|
|
2
|
+
/* default colors */
|
|
3
|
+
@apply text-button-secondary bg-background-primary border-button-secondary;
|
|
4
|
+
|
|
5
|
+
/* default hover state */
|
|
6
|
+
@apply hover:text-button-secondary-hover hover:bg-background-primary hover:border-button-secondary-hover;
|
|
7
|
+
|
|
8
|
+
/* default focus state */
|
|
9
|
+
@apply focus-visible:ring-button-secondary focus-visible:border-button-secondary;
|
|
10
|
+
|
|
11
|
+
/* default active state */
|
|
12
|
+
@apply active:bg-background-primary active:border-button-secondary-active;
|
|
13
|
+
|
|
14
|
+
/* default disabled state */
|
|
15
|
+
@apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
|
|
16
|
+
@apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
|
|
17
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
.rsui-button-slot {
|
|
2
|
+
/* default control */
|
|
3
|
+
@apply w-fit h-fit inline-flex shrink-0 items-center select-none outline-none whitespace-nowrap will-change-transform;
|
|
4
|
+
|
|
5
|
+
/* default shape */
|
|
6
|
+
@apply border rounded-lg transition gap-1.5;
|
|
7
|
+
|
|
8
|
+
/* default font */
|
|
9
|
+
@apply font-semibold text-sm;
|
|
10
|
+
|
|
11
|
+
/* default colors */
|
|
12
|
+
@apply bg-background-primary text-text-secondary ring-0 ring-border-primary border-border-primary;
|
|
13
|
+
|
|
14
|
+
/* default hover state */
|
|
15
|
+
@apply hover:bg-background-secondary;
|
|
16
|
+
|
|
17
|
+
/* default focus state */
|
|
18
|
+
@apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:border-border-primary;
|
|
19
|
+
|
|
20
|
+
/* default active state */
|
|
21
|
+
@apply active:ring-0 active:bg-background-primary;
|
|
22
|
+
|
|
23
|
+
/* default disabled state */
|
|
24
|
+
@apply disabled:bg-background-disabled disabled:border-transparent disabled:text-text-disabled;
|
|
25
|
+
@apply disabled:active:ring-0 disabled:active:bg-background-disabled disabled:active:border-transparent;
|
|
26
|
+
@apply disabled:focus-visible:ring-0;
|
|
27
|
+
|
|
28
|
+
/* default icon size */
|
|
29
|
+
& svg {
|
|
30
|
+
@apply size-5;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* modifier full width */
|
|
35
|
+
.rsui-button-slot--full {
|
|
36
|
+
@apply flex-1 w-full;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* modifier left alignment */
|
|
40
|
+
.rsui-button-slot--left {
|
|
41
|
+
@apply justify-start;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* modifier center alignment */
|
|
45
|
+
.rsui-button-slot--center {
|
|
46
|
+
@apply justify-center;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* modifier right alignment */
|
|
50
|
+
.rsui-button-slot--right {
|
|
51
|
+
@apply justify-end;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* modifier sm size */
|
|
55
|
+
.rsui-button-slot--sm {
|
|
56
|
+
@apply text-sm px-spacing-lg py-spacing-md gap-spacing-xs;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* modifier md size */
|
|
60
|
+
.rsui-button-slot--md {
|
|
61
|
+
@apply text-sm leading-5 px-3.5 py-2.5;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* modifier md size with icon */
|
|
65
|
+
.rsui-button-slot--md-icon {
|
|
66
|
+
@apply p-2.5;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* modifier lg size */
|
|
70
|
+
.rsui-button-slot--lg {
|
|
71
|
+
@apply text-base px-4 py-2.5;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* modifier lg size with icon */
|
|
75
|
+
.rsui-button-slot--lg-icon {
|
|
76
|
+
@apply p-3;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* modifier xl size */
|
|
80
|
+
.rsui-button-slot--xl {
|
|
81
|
+
@apply text-base leading-6 px-4.5 py-3;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* modifier xl size with icon */
|
|
85
|
+
.rsui-button-slot--xl-icon {
|
|
86
|
+
@apply p-3.5;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* modifier 2xl size */
|
|
90
|
+
.rsui-button-slot--2xl {
|
|
91
|
+
@apply text-lg leading-7 px-5 py-4;
|
|
92
|
+
|
|
93
|
+
/* 2xl size icon */
|
|
94
|
+
& svg {
|
|
95
|
+
@apply size-6;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* modifier 2xl size with icon */
|
|
100
|
+
.rsui-button-slot--2xl-icon {
|
|
101
|
+
@apply p-4.5;
|
|
102
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.rsui-button-tertiary {
|
|
2
|
+
/* default colors */
|
|
3
|
+
@apply text-button-tertiary bg-transparent border-transparent;
|
|
4
|
+
|
|
5
|
+
/* default hover state */
|
|
6
|
+
@apply hover:text-button-tertiary-hover hover:bg-transparent hover:border-button-tertiary-hover;
|
|
7
|
+
|
|
8
|
+
/* default focus state */
|
|
9
|
+
@apply focus-visible:ring-button-tertiary focus-visible:border-transparent;
|
|
10
|
+
|
|
11
|
+
/* default active state */
|
|
12
|
+
@apply active:bg-transparent active:border-transparent;
|
|
13
|
+
|
|
14
|
+
/* default disabled state */
|
|
15
|
+
@apply disabled:bg-transparent disabled:border-transparent disabled:text-text-disabled;
|
|
16
|
+
@apply disabled:active:bg-transparent disabled:active:border-transparent;
|
|
17
|
+
}
|
package/index.css
ADDED
package/index.js
CHANGED
|
@@ -71,20 +71,20 @@ module.exports = {
|
|
|
71
71
|
'button-primary': rsuiColors.brand['600'],
|
|
72
72
|
'button-primary-hover': rsuiColors.brand['700'],
|
|
73
73
|
'button-primary-active': rsuiColors.brand['800'],
|
|
74
|
-
|
|
74
|
+
|
|
75
75
|
'button-secondary': rsuiColors.grey['800'],
|
|
76
76
|
'button-secondary-hover': rsuiColors.grey['700'],
|
|
77
77
|
'button-secondary-active': rsuiColors.grey['600'],
|
|
78
|
-
|
|
78
|
+
|
|
79
79
|
'button-tertiary': rsuiColors.brand['600'],
|
|
80
80
|
'button-tertiary-hover': rsuiColors.brand['700'],
|
|
81
81
|
'button-tertiary-active': rsuiColors.brand['800'],
|
|
82
|
-
|
|
82
|
+
|
|
83
83
|
'button-danger-primary': rsuiColors.error['600'],
|
|
84
84
|
'button-danger-secondary': rsuiColors.error['600'],
|
|
85
85
|
'button-danger-hover': rsuiColors.error['700'],
|
|
86
86
|
'button-danger-active': rsuiColors.error['800'],
|
|
87
|
-
|
|
87
|
+
|
|
88
88
|
'button-separator': rsuiColors.grey['200'],
|
|
89
89
|
'button-disabled': rsuiColors.grey['300'],
|
|
90
90
|
|