forked from
tangled.org/core
Monorepo for Tangled
appview: replace native checkbox with design system styles
Native accent-color approach didn't match the Figma design system.
Custom appearance-none implementation covers all six states: default,
hover, checked, disabled, disabled-checked, and indeterminate.
Uses Lucide check/minus paths as readable SVG data URIs.
Signed-off-by: eti <eti@eti.tf>
+44
-4
+44
-4
input.css
+44
-4
input.css
···
92
92
label {
93
93
@apply block text-gray-900 text-sm py-2 dark:text-gray-100;
94
94
}
95
-
input,
95
+
input:not([type="checkbox"]),
96
96
textarea {
97
97
@apply block rounded p-3
98
98
bg-gray-50 dark:bg-gray-800 dark:text-white
99
99
border border-gray-300 dark:border-gray-600
100
100
focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
101
+
}
102
+
input[type="checkbox"] {
103
+
@apply appearance-none size-4 rounded
104
+
bg-transparent border border-gray-200
105
+
hover:bg-gray-100
106
+
checked:bg-gray-900 checked:border-transparent
107
+
checked:hover:bg-gray-800
108
+
indeterminate:bg-gray-900 indeterminate:border-transparent
109
+
disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200
110
+
disabled:checked:bg-gray-300 disabled:checked:border-transparent
111
+
disabled:indeterminate:bg-gray-100 disabled:indeterminate:border-gray-200
112
+
dark:border-gray-600
113
+
dark:hover:bg-gray-700
114
+
dark:checked:bg-gray-100 dark:checked:border-transparent
115
+
dark:checked:hover:bg-gray-200
116
+
dark:indeterminate:bg-gray-100 dark:indeterminate:border-transparent
117
+
dark:disabled:bg-gray-700 dark:disabled:border-gray-600
118
+
dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
119
+
dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600
120
+
focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
121
+
background-position: center;
122
+
background-repeat: no-repeat;
123
+
background-size: 12px;
124
+
}
125
+
input[type="checkbox"]:checked {
126
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
127
+
}
128
+
input[type="checkbox"]:indeterminate {
129
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
130
+
}
131
+
input[type="checkbox"]:disabled:indeterminate {
132
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
133
+
}
134
+
@media (prefers-color-scheme: dark) {
135
+
input[type="checkbox"]:checked {
136
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
137
+
}
138
+
input[type="checkbox"]:indeterminate {
139
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
140
+
}
141
+
input[type="checkbox"]:disabled:indeterminate {
142
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
143
+
}
101
144
}
102
145
details summary::-webkit-details-marker {
103
146
display: none;
···
225
268
@apply inline-block my-0 mb-1 mx-1;
226
269
}
227
270
228
-
.prose input[type="checkbox"] {
229
-
@apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500;
230
-
}
231
271
232
272
/* Mermaid diagrams */
233
273
.prose pre.mermaid {