Skip to content

Commit ab28d10

Browse files
viniciusoyamaviniciusoyama
authored
chore(themes): changes input style for dark themes (#5)
* Themes sharing input styles in base.css * Input background color adjustments for dark themes * Formatting markdown input
1 parent 427daee commit ab28d10

File tree

7 files changed

+72
-218
lines changed

7 files changed

+72
-218
lines changed

‎app/assets/tailwind/themes/amethyst-moon/application.css‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -90,54 +90,4 @@
9090
@apply hover:text-cancel-700 hover:bg-cancel-200 hover:border-cancel-400;
9191
@apply before:bg-cancel-400/20;
9292
}
93-
94-
.input-primary,
95-
.flatpickr-input.input-primary {
96-
@apply w-full text-readable-content-500 rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-primary-500;
97-
}
98-
99-
.input-with-icon-wrapper .icon-wrapper {
100-
@apply text-readable-content-500;
101-
}
102-
103-
.input-secondary {
104-
@apply w-full text-readable-content-500 rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-secondary-500;
105-
}
106-
107-
.input-sm {
108-
@apply py-1;
109-
}
110-
111-
.label-primary {
112-
@apply block text-readable-content-500 text-sm;
113-
}
114-
115-
}
116-
117-
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
118-
@apply bg-primary-500 !important;
119-
}
120-
121-
.select2-container--default .select2-search--inline .select2-search__field {
122-
@apply placeholder-readable-content-400;
123-
}
124-
125-
.select2-container--default .select2-selection--single .select2-selection__rendered {
126-
@apply text-readable-content-700 text-base;
127-
line-height: 20px;
128-
}
129-
130-
.select2-container--default .select2-selection--multiple .select2-selection__choice {
131-
@apply text-primary-800 border-primary-600;
132-
background-color: theme(colors.primary.300) !important;
133-
}
134-
135-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
136-
@apply text-primary-800 border-primary-600;
137-
background-color: theme(colors.primary.300) !important;
138-
}
139-
140-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
141-
background-color: theme(colors.primary.500) !important;
142-
@apply text-primary-800;
14393
}

‎app/assets/tailwind/themes/base.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,24 @@
115115
@apply py-1 px-1 text-xs;
116116
}
117117

118+
.input-primary,
119+
input.input-primary,
120+
.flatpickr-input.input-primary {
121+
@apply w-full rounded-lg border border-background-300 px-3 bg-background-50 text-readable-content-500 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-primary-500;
122+
}
123+
124+
.input-with-icon-wrapper .icon-wrapper {
125+
@apply text-readable-content-500;
126+
}
127+
128+
.input-sm {
129+
@apply py-1;
130+
}
131+
132+
.label-primary {
133+
@apply block text-readable-content-500 text-sm;
134+
}
135+
118136
.input-with-icon-wrapper {
119137
@apply relative flex items-stretch;
120138
}

‎app/assets/tailwind/themes/frost-crystal/application.css‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -97,54 +97,4 @@
9797
@apply hover:text-tertiary-700 hover:bg-tertiary-200 hover:border-tertiary-400;
9898
@apply shadow-cancel-100/40 active:shadow-cancel-300/40;
9999
}
100-
101-
.input-primary,
102-
.flatpickr-input.input-primary {
103-
@apply w-full text-readable-content-500 rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-primary-500;
104-
}
105-
106-
.input-with-icon-wrapper .icon-wrapper {
107-
@apply text-readable-content-500;
108-
}
109-
110-
.input-secondary {
111-
@apply w-full text-readable-content-500 rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-secondary-500;
112-
}
113-
114-
.input-sm {
115-
@apply py-1;
116-
}
117-
118-
.label-primary {
119-
@apply block text-readable-content-500 text-sm;
120-
}
121-
122-
}
123-
124-
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
125-
@apply bg-primary-500 !important;
126-
}
127-
128-
.select2-container--default .select2-search--inline .select2-search__field {
129-
@apply placeholder-readable-content-400;
130-
}
131-
132-
.select2-container--default .select2-selection--single .select2-selection__rendered {
133-
@apply text-readable-content-700 text-base;
134-
line-height: 20px;
135-
}
136-
137-
.select2-container--default .select2-selection--multiple .select2-selection__choice {
138-
@apply text-primary-800 border-primary-600;
139-
background-color: theme(colors.primary.300) !important;
140-
}
141-
142-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
143-
@apply text-primary-800 border-primary-600;
144-
background-color: theme(colors.primary.300) !important;
145-
}
146-
147-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
148-
background-color: theme(colors.primary.500) !important;
149-
@apply text-primary-800;
150100
}

‎app/assets/tailwind/themes/kernel-mindset/application.css‎

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -68,60 +68,4 @@
6868
@apply focus:border-cancel-100 focus:bg-cancel-200;
6969
@apply active:border-cancel-100 active:bg-cancel-200;
7070
}
71-
72-
.input-primary,
73-
.flatpickr-input.input-primary {
74-
@apply w-full rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-primary-500;
75-
color: black;
76-
}
77-
78-
.input-with-icon-wrapper .icon-wrapper {
79-
color: black;
80-
}
81-
82-
.input-secondary {
83-
@apply w-full rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-secondary-500;
84-
color: black;
85-
}
86-
87-
.input-sm {
88-
@apply py-1;
89-
}
90-
91-
.label-primary {
92-
@apply block text-readable-content-500 text-sm;
93-
}
94-
95-
}
96-
97-
.select2-container--default .select2-results__option--selectable {
98-
color: black;
99-
}
100-
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
101-
@apply bg-primary-200 text-readable-content-400 !important;
102-
}
103-
104-
.select2-container--default .select2-search--inline .select2-search__field {
105-
@apply placeholder-readable-content-400;
106-
}
107-
108-
.select2-container--default .select2-selection--single .select2-selection__rendered {
109-
@apply text-base;
110-
color: black !important;
111-
line-height: 20px;
112-
}
113-
114-
.select2-container--default .select2-selection--multiple .select2-selection__choice {
115-
@apply text-readable-content-400;
116-
background-color: theme(colors.primary.500) !important;
117-
}
118-
119-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
120-
@apply text-readable-content-400;
121-
background-color: theme(colors.primary.500) !important;
122-
}
123-
124-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
125-
background-color: theme(colors.primary.300) !important;
126-
@apply text-readable-content-400;
127-
}
71+
}

‎app/assets/tailwind/themes/markdown.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
padding: 4px 0;
66
gap: 4px;
77
}
8+
89
.markdown-editor .editor-toolbar > a {
910
@apply text-readable-content-500 !important;
1011
display: inline-flex;
@@ -13,10 +14,22 @@
1314
justify-content: center;
1415
}
1516

17+
.markdown-editor .editor-toolbar > a.active {
18+
@apply bg-primary-400 text-primary-800 border-primary-800;
19+
}
20+
1621
.markdown-editor .editor-toolbar > a:hover {
1722
@apply bg-background-50 !important;
1823
}
1924

25+
.markdown-editor .CodeMirror {
26+
@apply text-readable-content-500 bg-background-50 !important;
27+
}
28+
29+
.markdown-editor .CodeMirror-cursor {
30+
@apply border-readable-content-500 !important;
31+
}
32+
2033
:is(.markdown-content, .editor-preview) {
2134
@apply bg-background-50 text-readable-content-800 font-sans leading-relaxed;
2235
}

‎app/assets/tailwind/themes/noir-flow/application.css‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -79,61 +79,4 @@
7979
.btn-cancel {
8080
@apply btn border-cancel-200 bg-cancel-400;
8181
}
82-
83-
.input-primary,
84-
.flatpickr-input.input-primary {
85-
@apply w-full rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-primary-500;
86-
color: black;
87-
}
88-
89-
.input-with-icon-wrapper .icon-wrapper {
90-
color: black;
91-
}
92-
93-
.input-secondary {
94-
@apply w-full rounded-lg border border-background-300 px-3 py-2 placeholder:text-readable-content-400/70 hover:border-background-400 focus:border-secondary-500;
95-
color: black;
96-
}
97-
98-
.input-sm {
99-
@apply py-1;
100-
}
101-
102-
.label-primary {
103-
@apply block text-readable-content-500 text-sm;
104-
}
105-
106-
}
107-
108-
.select2-container--default .select2-results__option--selectable {
109-
color: black;
110-
}
111-
112-
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
113-
@apply bg-primary-200 text-readable-content-400 !important;
114-
}
115-
116-
.select2-container--default .select2-search--inline .select2-search__field {
117-
@apply placeholder-readable-content-400;
118-
}
119-
120-
.select2-container--default .select2-selection--single .select2-selection__rendered {
121-
@apply text-base;
122-
color: black !important;
123-
line-height: 20px;
124-
}
125-
126-
.select2-container--default .select2-selection--multiple .select2-selection__choice {
127-
@apply text-readable-content-400;
128-
background-color: theme(colors.primary.500) !important;
129-
}
130-
131-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
132-
@apply text-readable-content-400;
133-
background-color: theme(colors.primary.500) !important;
134-
}
135-
136-
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
137-
background-color: theme(colors.primary.300) !important;
138-
@apply text-readable-content-400;
13982
}

‎app/assets/tailwind/themes/select2.css‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020

2121
.select2-selection.select2-selection--multiple {
22-
@apply w-full rounded-lg border border-background-300 py-1;
22+
@apply w-full rounded-lg border border-background-300 bg-background-50 text-readable-content-500 py-1;
2323
min-height: 43px;
2424
}
2525

@@ -32,6 +32,42 @@
3232
top: 5px;
3333
}
3434

35-
.select2-search__field {
36-
@apply input-primary;
37-
}
35+
.select2-dropdown {
36+
@apply bg-background-50 text-readable-content-500 !important;
37+
}
38+
.select2-container--default .select2-results__option--selectable {
39+
@apply bg-background-50 text-readable-content-500;
40+
}
41+
42+
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
43+
@apply bg-primary-400 text-primary-800 !important;
44+
}
45+
46+
.select2-container--default .select2-search--inline .select2-search__field {
47+
@apply border border-primary-500 px-2 py-1 bg-background-50 text-readable-content-500 min-w-4 !important;
48+
}
49+
50+
.select2-container--default .select2-selection--single {
51+
@apply bg-background-50 text-readable-content-500 !important;
52+
}
53+
54+
.select2-container--default .select2-search--dropdown .select2-search__field {
55+
@apply input-primary border-background-400 !important;
56+
}
57+
58+
.select2-container--default .select2-selection--single .select2-selection__rendered {
59+
@apply text-sm bg-background-50 text-readable-content-500 !important;
60+
line-height: 20px;
61+
}
62+
63+
.select2-container--default .select2-selection--multiple .select2-selection__choice {
64+
@apply text-readable-content-500 bg-background-50 border-background-400 !important;
65+
}
66+
67+
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
68+
@apply text-readable-content-500 bg-background-50 border-background-400 !important;
69+
}
70+
71+
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
72+
@apply text-readable-content-500 bg-background-50 border-background-400 !important;
73+
}

0 commit comments

Comments
 (0)