ketekny-ui-kit 1.0.23 → 1.0.25
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 +1 -1
- package/src/ui/kChip.vue +1 -1
- package/src/ui/kDateSelector.vue +8 -8
- package/src/ui/kSpinner.vue +7 -7
- package/src/ui/kTable.vue +10 -10
- package/src/ui/kToggle.vue +119 -13
- package/src/ui/themes/intentColors.js +20 -20
- package/src/ui/themes/kButton.theme.js +1 -1
package/package.json
CHANGED
package/src/ui/kChip.vue
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<slot></slot>
|
|
15
15
|
</template>
|
|
16
16
|
|
|
17
|
-
<div v-if="value !== null" :class="['flex items-center justify-center ml-2 text-gray-800 rounded-sm bg-white/90', valueClass]">
|
|
17
|
+
<div v-if="value !== null" :class="['flex items-center justify-center ml-2 text-gray-800 rounded-sm bg-white/90 dark:bg-white/15 dark:text-gray-100', valueClass]">
|
|
18
18
|
{{ value }}
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
package/src/ui/kDateSelector.vue
CHANGED
|
@@ -67,14 +67,14 @@
|
|
|
67
67
|
|
|
68
68
|
<!-- Month Grid Popover (Teleported) -->
|
|
69
69
|
<teleport to="body">
|
|
70
|
-
<div v-if="showPopup" class="p-4 bg-white border rounded-lg shadow-lg
|
|
70
|
+
<div v-if="showPopup" class="p-4 bg-white dark:bg-slate-800 border border-primary/20 dark:border-slate-600 rounded-lg shadow-lg" :style="popupStyles">
|
|
71
71
|
<!-- Year Nav -->
|
|
72
|
-
<div class="flex items-center justify-between pb-3 mb-4 border-b">
|
|
73
|
-
<button @click.stop="currentYear--" class="text-primary/80 hover:text-primary" aria-label="Previous year">
|
|
72
|
+
<div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-200 dark:border-slate-600">
|
|
73
|
+
<button @click.stop="currentYear--" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Previous year">
|
|
74
74
|
<ChevronLeft />
|
|
75
75
|
</button>
|
|
76
|
-
<span class="font-medium text-primary">{{ currentYear }}</span>
|
|
77
|
-
<button @click.stop="currentYear++" class="text-primary/80 hover:text-primary" aria-label="Next year">
|
|
76
|
+
<span class="font-medium text-primary dark:text-sky-300">{{ currentYear }}</span>
|
|
77
|
+
<button @click.stop="currentYear++" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Next year">
|
|
78
78
|
<ChevronRight />
|
|
79
79
|
</button>
|
|
80
80
|
</div>
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
:key="index"
|
|
87
87
|
@click="selectMonth(index + 1)"
|
|
88
88
|
class="px-3 py-2 text-center transition rounded-lg cursor-pointer"
|
|
89
|
-
:class="[isSelected(index + 1) ? 'bg-primary text-white' : 'hover:bg-primary/
|
|
89
|
+
:class="[isSelected(index + 1) ? 'bg-primary text-white' : 'text-gray-700 dark:text-slate-200 hover:bg-primary/15 dark:hover:bg-sky-500/30 dark:hover:text-sky-100']"
|
|
90
90
|
>
|
|
91
91
|
{{ month }}
|
|
92
92
|
</div>
|
|
@@ -148,9 +148,9 @@ export default {
|
|
|
148
148
|
})();
|
|
149
149
|
|
|
150
150
|
return {
|
|
151
|
-
defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
|
|
151
|
+
defaultStyle: "w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg transition shadow-sm focus:outline-none text-gray-700 dark:text-slate-200 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white dark:bg-slate-800 placeholder-gray-400 dark:placeholder-slate-500",
|
|
152
152
|
errorStyle: "border-red-500 focus:ring focus:ring-red-300",
|
|
153
|
-
disabledStyle: "!bg-gray-100 !text-gray-400 !cursor-not-allowed",
|
|
153
|
+
disabledStyle: "!bg-gray-100 dark:!bg-slate-700 !text-gray-400 dark:!text-slate-500 !cursor-not-allowed",
|
|
154
154
|
|
|
155
155
|
// Year-Month UI state
|
|
156
156
|
showPopup: false,
|
package/src/ui/kSpinner.vue
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
|
|
3
|
-
<i class="ml-1 text-primary pi pi-wave-pulse" />
|
|
4
|
-
<div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0s' }"></div>
|
|
5
|
-
<div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.15s' }"></div>
|
|
6
|
-
<div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.3s' }"></div>
|
|
7
|
-
<div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.45s' }"></div>
|
|
3
|
+
<i class="ml-1 text-primary dark:text-sky-200 pi pi-wave-pulse" />
|
|
4
|
+
<div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0s' }"></div>
|
|
5
|
+
<div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.15s' }"></div>
|
|
6
|
+
<div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.3s' }"></div>
|
|
7
|
+
<div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.45s' }"></div>
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
|
-
<Loader class="w-6 h-6 mr-2 animate-spin" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
|
|
10
|
+
<Loader class="w-6 h-6 mr-2 animate-spin text-primary dark:text-sky-200" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script setup>
|
|
@@ -25,7 +25,7 @@ export default {
|
|
|
25
25
|
@keyframes fade {
|
|
26
26
|
0%,
|
|
27
27
|
100% {
|
|
28
|
-
opacity: 0.
|
|
28
|
+
opacity: 0.35;
|
|
29
29
|
}
|
|
30
30
|
50% {
|
|
31
31
|
opacity: 1;
|
package/src/ui/kTable.vue
CHANGED
|
@@ -103,7 +103,7 @@ export default {
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.table-custom--card {
|
|
106
|
-
@apply overflow-hidden bg-white border border-slate-200 rounded-xl shadow-md;
|
|
106
|
+
@apply overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-md;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
.table-custom--plain {
|
|
@@ -111,7 +111,7 @@ export default {
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.table-custom--flat {
|
|
114
|
-
@apply bg-white border border-slate-200 rounded-xl shadow-none;
|
|
114
|
+
@apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-none;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.table-custom--card th {
|
|
@@ -119,31 +119,31 @@ export default {
|
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.table-custom--plain th {
|
|
122
|
-
@apply px-4 py-2 text-sm font-semibold tracking-wide text-left text-slate-700 uppercase bg-transparent border-b border-slate-300;
|
|
122
|
+
@apply px-4 py-2 text-sm font-semibold tracking-wide text-left text-slate-700 dark:text-slate-300 uppercase bg-transparent border-b border-slate-300 dark:border-slate-600;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.table-custom--flat th {
|
|
126
|
-
@apply px-4 py-2 text-sm font-semibold tracking-wide text-left uppercase text-slate-600 bg-slate-100 border-b border-slate-200 align-middle;
|
|
126
|
+
@apply px-4 py-2 text-sm font-semibold tracking-wide text-left uppercase text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-600 align-middle;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.table-custom--card td {
|
|
130
|
-
@apply h-[3.2rem] px-6 py-4 text-base text-slate-800;
|
|
130
|
+
@apply h-[3.2rem] px-6 py-4 text-base text-slate-800 dark:text-slate-200;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
.table-custom--plain td {
|
|
134
|
-
@apply h-[3.2rem] px-2 py-2 text-base text-slate-800;
|
|
134
|
+
@apply h-[3.2rem] px-2 py-2 text-base text-slate-800 dark:text-slate-200;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
.table-custom--flat td {
|
|
138
|
-
@apply h-[3.2rem] px-4 py-2 text-base text-slate-900 align-middle;
|
|
138
|
+
@apply h-[3.2rem] px-4 py-2 text-base text-slate-900 dark:text-slate-200 align-middle;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.table-custom tr {
|
|
142
|
-
@apply transition duration-200 ease-in-out hover:bg-slate-50;
|
|
142
|
+
@apply transition duration-200 ease-in-out hover:bg-slate-50 dark:hover:bg-slate-700/40;
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
.table-custom tr:not(:last-child) {
|
|
146
|
-
@apply border-b border-slate-200;
|
|
146
|
+
@apply border-b border-slate-200 dark:border-slate-700;
|
|
147
147
|
}
|
|
148
148
|
|
|
149
149
|
.table-custom td::before {
|
|
@@ -164,7 +164,7 @@ export default {
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
.k-table-mobile .table-custom tbody tr {
|
|
167
|
-
@apply mb-3 border border-slate-200 rounded-lg bg-white;
|
|
167
|
+
@apply mb-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800;
|
|
168
168
|
}
|
|
169
169
|
|
|
170
170
|
.k-table-mobile .table-custom tbody tr:last-child {
|
package/src/ui/kToggle.vue
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="labelStyle === 'inline' ? 'flex items-center' : ''">
|
|
3
3
|
<!-- Block-style label -->
|
|
4
|
-
<div
|
|
4
|
+
<div
|
|
5
|
+
v-if="showLabel && labelStyle !== 'inline'"
|
|
6
|
+
:class="[
|
|
7
|
+
'block mb-1 text-sm font-bold',
|
|
8
|
+
disabled ? 'text-slate-500' : 'text-primary/90',
|
|
9
|
+
]"
|
|
10
|
+
for="toggle"
|
|
11
|
+
>
|
|
5
12
|
{{ label }}
|
|
6
13
|
</div>
|
|
7
14
|
|
|
@@ -13,27 +20,38 @@
|
|
|
13
20
|
:aria-disabled="disabled.toString()"
|
|
14
21
|
:disabled="disabled"
|
|
15
22
|
:class="[
|
|
16
|
-
'
|
|
23
|
+
'k-toggle-track',
|
|
17
24
|
disabled
|
|
18
|
-
? '
|
|
25
|
+
? 'k-toggle-track--disabled cursor-not-allowed'
|
|
19
26
|
: modelValue
|
|
20
|
-
? '
|
|
21
|
-
: '
|
|
22
|
-
]"
|
|
27
|
+
? 'k-toggle-track--on'
|
|
28
|
+
: 'k-toggle-track--off',
|
|
29
|
+
]"
|
|
30
|
+
>
|
|
23
31
|
<div
|
|
24
32
|
:class="[
|
|
25
|
-
'
|
|
26
|
-
disabled
|
|
27
|
-
|
|
28
|
-
|
|
33
|
+
'k-toggle-thumb',
|
|
34
|
+
disabled
|
|
35
|
+
? 'k-toggle-thumb--disabled'
|
|
36
|
+
: modelValue
|
|
37
|
+
? 'k-toggle-thumb--on'
|
|
38
|
+
: 'k-toggle-thumb--off',
|
|
39
|
+
]"
|
|
40
|
+
></div>
|
|
29
41
|
</button>
|
|
30
42
|
|
|
31
43
|
<!-- Inline-style label -->
|
|
32
44
|
<div
|
|
33
45
|
v-if="showLabel && labelStyle === 'inline'"
|
|
34
|
-
:class="[
|
|
46
|
+
:class="[
|
|
47
|
+
'ml-2 text-sm font-bold',
|
|
48
|
+
disabled
|
|
49
|
+
? 'text-slate-500 cursor-not-allowed'
|
|
50
|
+
: 'text-primary/90 cursor-pointer',
|
|
51
|
+
]"
|
|
35
52
|
:for="computedId"
|
|
36
|
-
@click="toggle"
|
|
53
|
+
@click="toggle"
|
|
54
|
+
>
|
|
37
55
|
{{ label }}
|
|
38
56
|
</div>
|
|
39
57
|
</div>
|
|
@@ -66,5 +84,93 @@ export default {
|
|
|
66
84
|
</script>
|
|
67
85
|
|
|
68
86
|
<style scoped>
|
|
69
|
-
|
|
87
|
+
.k-toggle-track {
|
|
88
|
+
width: 4rem;
|
|
89
|
+
height: 2rem;
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
padding: 0.25rem;
|
|
93
|
+
border-radius: 9999px;
|
|
94
|
+
border: 1px solid transparent;
|
|
95
|
+
transition:
|
|
96
|
+
background-color 0.2s ease,
|
|
97
|
+
box-shadow 0.2s ease,
|
|
98
|
+
border-color 0.2s ease;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.k-toggle-track:focus-visible {
|
|
102
|
+
outline: none;
|
|
103
|
+
box-shadow: 0 0 0 2px rgb(37 99 235 / 0.35);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.k-toggle-track--on {
|
|
107
|
+
background: #1d4ed8;
|
|
108
|
+
border-color: #1d4ed8;
|
|
109
|
+
box-shadow: 0 2px 8px rgb(2 6 23 / 0.25);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.k-toggle-track--off {
|
|
113
|
+
background: #64748b;
|
|
114
|
+
border-color: #64748b;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.k-toggle-track--disabled {
|
|
118
|
+
background: #cbd5e1;
|
|
119
|
+
border-color: #cbd5e1;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.k-toggle-thumb {
|
|
123
|
+
width: 1.5rem;
|
|
124
|
+
height: 1.5rem;
|
|
125
|
+
border-radius: 9999px;
|
|
126
|
+
transition:
|
|
127
|
+
transform 0.22s ease,
|
|
128
|
+
background-color 0.2s ease,
|
|
129
|
+
border-color 0.2s ease;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.k-toggle-thumb--on {
|
|
133
|
+
transform: translateX(2rem);
|
|
134
|
+
background: #f8fafc;
|
|
135
|
+
border: 1px solid rgb(203 213 225 / 0.7);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.k-toggle-thumb--off {
|
|
139
|
+
transform: translateX(0);
|
|
140
|
+
background: #f8fafc;
|
|
141
|
+
border: 1px solid rgb(203 213 225 / 0.7);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.k-toggle-thumb--disabled {
|
|
145
|
+
transform: translateX(0);
|
|
146
|
+
background: #e2e8f0;
|
|
147
|
+
border: 1px solid #cbd5e1;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:global(html.dark) .k-toggle-track--on {
|
|
151
|
+
background: #1d4ed8;
|
|
152
|
+
border-color: #1d4ed8;
|
|
153
|
+
box-shadow: 0 2px 8px rgb(2 6 23 / 0.45);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
:global(html.dark) .k-toggle-track--off {
|
|
157
|
+
background: #475569;
|
|
158
|
+
border-color: #475569;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
:global(html.dark) .k-toggle-track--disabled {
|
|
162
|
+
background: #334155;
|
|
163
|
+
border-color: #334155;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
:global(html.dark) .k-toggle-thumb--on,
|
|
167
|
+
:global(html.dark) .k-toggle-thumb--off {
|
|
168
|
+
background: #f8fafc;
|
|
169
|
+
border-color: #cbd5e1;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:global(html.dark) .k-toggle-thumb--disabled {
|
|
173
|
+
background: #94a3b8;
|
|
174
|
+
border-color: #64748b;
|
|
175
|
+
}
|
|
70
176
|
</style>
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
export const INTENT_VARIANT_STYLES = {
|
|
2
2
|
primary: {
|
|
3
|
-
solid: { enabled: "bg-sky-700 hover:bg-sky-600 text-white", disabled: "bg-sky-200 text-sky-900" },
|
|
4
|
-
soft: { enabled: "bg-sky-100 hover:bg-sky-200 text-sky-900", disabled: "bg-sky-100 text-sky-500" },
|
|
5
|
-
outlined: { enabled: "bg-transparent border border-sky-400 text-sky-800 hover:bg-sky-50", disabled: "bg-sky-50 border border-sky-200 text-sky-400" },
|
|
6
|
-
plain: { enabled: "bg-transparent text-sky-800 hover:bg-sky-50", disabled: "bg-transparent text-sky-400" },
|
|
3
|
+
solid: { enabled: "bg-sky-700 hover:bg-sky-600 text-white dark:bg-sky-500 dark:hover:bg-sky-400", disabled: "bg-sky-200 text-sky-900 dark:bg-sky-900/40 dark:text-sky-500" },
|
|
4
|
+
soft: { enabled: "bg-sky-100 hover:bg-sky-200 text-sky-900 dark:bg-sky-500/25 dark:hover:bg-sky-500/35 dark:text-sky-200 dark:border-sky-400/60", disabled: "bg-sky-100 text-sky-500 dark:bg-sky-900/20 dark:text-sky-600" },
|
|
5
|
+
outlined: { enabled: "bg-transparent border border-sky-400 text-sky-800 hover:bg-sky-50 dark:border-sky-400 dark:text-sky-300 dark:hover:bg-sky-500/20", disabled: "bg-sky-50 border border-sky-200 text-sky-400 dark:bg-transparent dark:border-sky-800 dark:text-sky-700" },
|
|
6
|
+
plain: { enabled: "bg-transparent text-sky-800 hover:bg-sky-50 dark:text-sky-300 dark:hover:bg-sky-500/20", disabled: "bg-transparent text-sky-400 dark:text-sky-700" },
|
|
7
7
|
},
|
|
8
8
|
secondary: {
|
|
9
|
-
solid: { enabled: "bg-slate-700 hover:bg-slate-600 text-white", disabled: "bg-slate-200 text-slate-700" },
|
|
10
|
-
soft: { enabled: "bg-slate-100 hover:bg-slate-200 text-slate-900", disabled: "bg-slate-100 text-slate-500" },
|
|
11
|
-
outlined: { enabled: "bg-transparent border border-slate-300 text-slate-900 hover:bg-slate-50", disabled: "bg-slate-50 border border-slate-200 text-slate-500" },
|
|
12
|
-
plain: { enabled: "bg-transparent text-slate-800 hover:bg-slate-100", disabled: "bg-transparent text-slate-400" },
|
|
9
|
+
solid: { enabled: "bg-slate-700 hover:bg-slate-600 text-white dark:bg-slate-500 dark:hover:bg-slate-400", disabled: "bg-slate-200 text-slate-700 dark:bg-slate-700/40 dark:text-slate-500" },
|
|
10
|
+
soft: { enabled: "bg-slate-100 hover:bg-slate-200 text-slate-900 dark:bg-slate-500/45 dark:hover:bg-slate-500/60 dark:text-slate-100 dark:border-slate-400/60", disabled: "bg-slate-100 text-slate-500 dark:bg-slate-700/20 dark:text-slate-600" },
|
|
11
|
+
outlined: { enabled: "bg-transparent border border-slate-300 text-slate-900 hover:bg-slate-50 dark:border-slate-500 dark:text-slate-300 dark:hover:bg-slate-600/30", disabled: "bg-slate-50 border border-slate-200 text-slate-500 dark:bg-transparent dark:border-slate-700 dark:text-slate-600" },
|
|
12
|
+
plain: { enabled: "bg-transparent text-slate-800 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-600/30", disabled: "bg-transparent text-slate-400 dark:text-slate-600" },
|
|
13
13
|
},
|
|
14
14
|
success: {
|
|
15
|
-
solid: { enabled: "bg-emerald-700 hover:bg-emerald-600 text-white", disabled: "bg-emerald-200 text-emerald-900" },
|
|
16
|
-
soft: { enabled: "bg-emerald-100 hover:bg-emerald-200 text-emerald-900", disabled: "bg-emerald-100 text-emerald-500" },
|
|
17
|
-
outlined: { enabled: "bg-transparent border border-emerald-400 text-emerald-800 hover:bg-emerald-50", disabled: "bg-emerald-50 border border-emerald-200 text-emerald-400" },
|
|
18
|
-
plain: { enabled: "bg-transparent text-emerald-800 hover:bg-emerald-50", disabled: "bg-transparent text-emerald-400" },
|
|
15
|
+
solid: { enabled: "bg-emerald-700 hover:bg-emerald-600 text-white dark:bg-emerald-500 dark:hover:bg-emerald-400", disabled: "bg-emerald-200 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-500" },
|
|
16
|
+
soft: { enabled: "bg-emerald-100 hover:bg-emerald-200 text-emerald-900 dark:bg-emerald-500/25 dark:hover:bg-emerald-500/35 dark:text-emerald-200 dark:border-emerald-400/60", disabled: "bg-emerald-100 text-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-600" },
|
|
17
|
+
outlined: { enabled: "bg-transparent border border-emerald-400 text-emerald-800 hover:bg-emerald-50 dark:border-emerald-400 dark:text-emerald-300 dark:hover:bg-emerald-500/20", disabled: "bg-emerald-50 border border-emerald-200 text-emerald-400 dark:bg-transparent dark:border-emerald-800 dark:text-emerald-700" },
|
|
18
|
+
plain: { enabled: "bg-transparent text-emerald-800 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-500/20", disabled: "bg-transparent text-emerald-400 dark:text-emerald-700" },
|
|
19
19
|
},
|
|
20
20
|
warning: {
|
|
21
|
-
solid: { enabled: "bg-amber-700 hover:bg-amber-600 text-white", disabled: "bg-amber-200 text-amber-900" },
|
|
22
|
-
soft: { enabled: "bg-amber-100 hover:bg-amber-200 text-amber-900", disabled: "bg-amber-100 text-amber-500" },
|
|
23
|
-
outlined: { enabled: "bg-transparent border border-amber-400 text-amber-800 hover:bg-amber-50", disabled: "bg-amber-50 border border-amber-200 text-amber-400" },
|
|
24
|
-
plain: { enabled: "bg-transparent text-amber-800 hover:bg-amber-50", disabled: "bg-transparent text-amber-400" },
|
|
21
|
+
solid: { enabled: "bg-amber-700 hover:bg-amber-600 text-white dark:bg-amber-500 dark:hover:bg-amber-400", disabled: "bg-amber-200 text-amber-900 dark:bg-amber-900/40 dark:text-amber-500" },
|
|
22
|
+
soft: { enabled: "bg-amber-100 hover:bg-amber-200 text-amber-900 dark:bg-amber-500/25 dark:hover:bg-amber-500/35 dark:text-amber-200 dark:border-amber-400/60", disabled: "bg-amber-100 text-amber-500 dark:bg-amber-900/20 dark:text-amber-600" },
|
|
23
|
+
outlined: { enabled: "bg-transparent border border-amber-400 text-amber-800 hover:bg-amber-50 dark:border-amber-400 dark:text-amber-300 dark:hover:bg-amber-500/20", disabled: "bg-amber-50 border border-amber-200 text-amber-400 dark:bg-transparent dark:border-amber-800 dark:text-amber-700" },
|
|
24
|
+
plain: { enabled: "bg-transparent text-amber-800 hover:bg-amber-50 dark:text-amber-300 dark:hover:bg-amber-500/20", disabled: "bg-transparent text-amber-400 dark:text-amber-700" },
|
|
25
25
|
},
|
|
26
26
|
danger: {
|
|
27
|
-
solid: { enabled: "bg-rose-700 hover:bg-rose-600 text-white", disabled: "bg-rose-200 text-rose-900" },
|
|
28
|
-
soft: { enabled: "bg-rose-100 hover:bg-rose-200 text-rose-900", disabled: "bg-rose-100 text-rose-500" },
|
|
29
|
-
outlined: { enabled: "bg-transparent border border-rose-400 text-rose-800 hover:bg-rose-50", disabled: "bg-rose-50 border border-rose-200 text-rose-400" },
|
|
30
|
-
plain: { enabled: "bg-transparent text-rose-800 hover:bg-rose-50", disabled: "bg-transparent text-rose-400" },
|
|
27
|
+
solid: { enabled: "bg-rose-700 hover:bg-rose-600 text-white dark:bg-rose-500 dark:hover:bg-rose-400", disabled: "bg-rose-200 text-rose-900 dark:bg-rose-900/40 dark:text-rose-500" },
|
|
28
|
+
soft: { enabled: "bg-rose-100 hover:bg-rose-200 text-rose-900 dark:bg-rose-500/25 dark:hover:bg-rose-500/35 dark:text-rose-200 dark:border-rose-400/60", disabled: "bg-rose-100 text-rose-500 dark:bg-rose-900/20 dark:text-rose-600" },
|
|
29
|
+
outlined: { enabled: "bg-transparent border border-rose-400 text-rose-800 hover:bg-rose-50 dark:border-rose-400 dark:text-rose-300 dark:hover:bg-rose-500/20", disabled: "bg-rose-50 border border-rose-200 text-rose-400 dark:bg-transparent dark:border-rose-800 dark:text-rose-700" },
|
|
30
|
+
plain: { enabled: "bg-transparent text-rose-800 hover:bg-rose-50 dark:text-rose-300 dark:hover:bg-rose-500/20", disabled: "bg-transparent text-rose-400 dark:text-rose-700" },
|
|
31
31
|
},
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { INTENT_VARIANT_STYLES } from "./intentColors";
|
|
2
2
|
|
|
3
3
|
export const K_BUTTON_FOCUS_RING = "focus-visible:ring-slate-900";
|
|
4
|
-
export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center font-medium transition-all rounded-lg";
|
|
4
|
+
export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center font-medium transition-all rounded-lg border border-transparent";
|
|
5
5
|
|
|
6
6
|
export const K_BUTTON_SIZE_STYLES = {
|
|
7
7
|
normal: {
|