Skip to content

Commit 4fedc1f

Browse files
RicoPleasureRicoPleasure
authored
feat: normalize colors (gray -> zinc) (#545)
1 parent fd5d515 commit 4fedc1f

40 files changed

+205
-208
lines changed

‎assets/css/components/avatar.css

+8-8
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@
5151
}
5252

5353
.atomic-avatar--white {
54-
@apply bg-white text-gray-700 border-gray-300 border;
54+
@apply bg-white text-zinc-700 border-zinc-300 border;
5555
}
5656

5757
.atomic-avatar--full_white {
58-
@apply bg-white text-gray-700;
58+
@apply bg-white text-zinc-700;
5959
}
6060

6161
.atomic-avatar--info {
@@ -74,20 +74,20 @@
7474
@apply bg-danger-600 text-white;
7575
}
7676

77-
.atomic-avatar--gray {
78-
@apply bg-gray-600 text-white;
77+
.atomic-avatar--zinc {
78+
@apply bg-zinc-600 text-white;
7979
}
8080

81-
.atomic-avatar--light_gray {
82-
@apply bg-gray-400 text-white;
81+
.atomic-avatar--light_zinc {
82+
@apply bg-zinc-400 text-white;
8383
}
8484

8585
.atomic-avatar--light {
86-
@apply bg-white text-gray-900 border-gray-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 border;
86+
@apply bg-white text-zinc-900 border-zinc-300 dark:bg-zinc-800 dark:text-white dark:border-zinc-600 border;
8787
}
8888

8989
.atomic-avatar--dark {
90-
@apply bg-gray-950 text-white border-transparent dark:text-gray-950 dark:bg-white;
90+
@apply bg-zinc-950 text-white border-transparent dark:text-zinc-950 dark:bg-white;
9191
}
9292

9393
/* Avatar - With image */

‎assets/css/components/badge.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,12 @@
9595
.atomic-badge--danger-outline {
9696
@apply border text-danger-600 border-danger-600 dark:text-danger-400 dark:border-danger-400;
9797
}
98-
.atomic-badge--gray-light {
99-
@apply text-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-200 dark:border-gray-200;
98+
.atomic-badge--zinc-light {
99+
@apply text-zinc-800 bg-zinc-100 border-zinc-100 dark:bg-zinc-200 dark:border-zinc-200;
100100
}
101-
.atomic-badge--gray-dark {
102-
@apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700;
101+
.atomic-badge--zinc-dark {
102+
@apply text-white bg-zinc-600 border-zinc-600 dark:bg-zinc-700 dark:border-zinc-700;
103103
}
104-
.atomic-badge--gray-outline {
105-
@apply text-gray-600 border border-gray-600 dark:text-gray-400 dark:border-gray-400;
104+
.atomic-badge--zinc-outline {
105+
@apply text-zinc-600 border border-zinc-600 dark:text-zinc-400 dark:border-zinc-400;
106106
}

‎assets/css/components/button.css

+21-21
Original file line numberDiff line numberDiff line change
@@ -49,19 +49,19 @@
4949
@apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;
5050
}
5151
.atomic-button--white {
52-
@apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
52+
@apply text-zinc-700 bg-white border-zinc-300 hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 active:text-black dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent;
5353
}
5454
.atomic-button--white-outline {
55-
@apply text-gray-600 border-gray-400 dark:border-gray-300 dark:active:border-gray-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-gray-200 dark:hover:text-gray-200 dark:hover:bg-transparent dark:text-gray-300 hover:border-gray-600 hover:text-gray-700 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600;
55+
@apply text-zinc-600 border-zinc-400 dark:border-zinc-300 dark:active:border-zinc-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-zinc-200 dark:hover:text-zinc-200 dark:hover:bg-transparent dark:text-zinc-300 hover:border-zinc-600 hover:text-zinc-700 active:bg-zinc-100 hover:bg-zinc-50 focus:bg-zinc-50 focus:border-zinc-500 active:border-zinc-600;
5656
}
5757
.atomic-button--white-inverted {
58-
@apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white focus:border-gray-700 focus:shadow-gray-500/50;
58+
@apply text-zinc-600 border-zinc-400 dark:border-white dark:hover:border-zinc-700 dark:hover:text-black dark:hover:bg-white dark:text-zinc-300 hover:border-zinc-600 hover:text-black active:bg-zinc-700 hover:bg-white focus:border-zinc-700 focus:shadow-zinc-500/50;
5959
}
6060
.atomic-button--white-shadow {
61-
@apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;
61+
@apply text-zinc-700 bg-white border-zinc-300 shadow-xl hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-zinc-500/30 dark:shadow-zinc-200/30 dark:hover:shadow-zinc-300/30 dark:focus:shadow-zinc-300/30 dark:active:shadow-zinc-400/30;
6262
}
6363
.atomic-button--pure_white {
64-
@apply text-gray-700 bg-white border-transparent border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 focus:outline-none focus:border-transparent focus:bg-gray-100 focus:text-gray-900 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
64+
@apply text-zinc-700 bg-white border-transparent border-white hover:text-zinc-900 hover:border-transparent hover:bg-zinc-50 focus:outline-none focus:border-transparent focus:bg-zinc-100 focus:text-zinc-900 active:border-transparent active:bg-zinc-200 active:text-black dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent;
6565
}
6666
.atomic-button--info {
6767
@apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;
@@ -111,41 +111,41 @@
111111
.atomic-button--danger-shadow {
112112
@apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30;
113113
}
114-
.atomic-button--gray {
115-
@apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700;
114+
.atomic-button--zinc {
115+
@apply text-white bg-zinc-600 border-transparent active:bg-zinc-800 hover:bg-zinc-700 focus:bg-zinc-700;
116116
}
117-
.atomic-button--gray-outline {
118-
@apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-300 dark:active:border-gray-400 dark:hover:text-gray-300 dark:hover:bg-transparent dark:text-gray-400 hover:border-gray-600 hover:text-gray-700 active:bg-gray-200 active:border-gray-700 hover:bg-gray-50 focus:border-gray-700;
117+
.atomic-button--zinc-outline {
118+
@apply text-zinc-600 border-zinc-400 dark:border-zinc-400 dark:hover:border-zinc-300 dark:active:border-zinc-400 dark:hover:text-zinc-300 dark:hover:bg-transparent dark:text-zinc-400 hover:border-zinc-600 hover:text-zinc-700 active:bg-zinc-200 active:border-zinc-700 hover:bg-zinc-50 focus:border-zinc-700;
119119
}
120-
.atomic-button--gray-inverted {
121-
@apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:text-gray-400 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50;
120+
.atomic-button--zinc-inverted {
121+
@apply text-zinc-600 border-zinc-400 dark:border-zinc-400 dark:hover:border-zinc-700 dark:hover:text-white dark:hover:bg-zinc-700 dark:text-zinc-400 hover:border-zinc-600 hover:text-white active:bg-zinc-700 hover:bg-zinc-600 focus:border-zinc-700 focus:shadow-zinc-500/50;
122122
}
123-
.atomic-button--gray-shadow {
124-
@apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700 focus:shadow-gray-500/50 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:focus:shadow-gray-600/30 dark:active:shadow-gray-700/30;
123+
.atomic-button--zinc-shadow {
124+
@apply text-white bg-zinc-600 border-transparent shadow-xl active:bg-zinc-800 hover:bg-zinc-700 focus:bg-zinc-700 focus:shadow-zinc-500/50 shadow-zinc-500/30 dark:hover:shadow-zinc-600/30 dark:focus:shadow-zinc-600/30 dark:active:shadow-zinc-700/30;
125125
}
126126
.atomic-button--light {
127-
@apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800;
127+
@apply text-zinc-900 bg-white border-zinc-300 hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 active:text-black dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:active:border-zinc-700 dark:active:bg-zinc-800;
128128
}
129129
.atomic-button--light-outline {
130-
@apply text-gray-900 border-gray-300 dark:hover:bg-transparent hover:border-gray-400 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600 dark:text-white dark:border-gray-600 dark:active:border-gray-600 dark:hover:border-gray-500 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent;
130+
@apply text-zinc-900 border-zinc-300 dark:hover:bg-transparent hover:border-zinc-400 active:bg-zinc-100 hover:bg-zinc-50 focus:bg-zinc-50 focus:border-zinc-500 active:border-zinc-600 dark:text-white dark:border-zinc-600 dark:active:border-zinc-600 dark:hover:border-zinc-500 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent;
131131
}
132132
.atomic-button--light-inverted {
133-
@apply text-gray-900 border-gray-300 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50 dark:hover:text-black dark:hover:bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:border-white dark:active:bg-gray-300 dark:active:border-gray-300 dark:focus:shadow-gray-600/50;
133+
@apply text-zinc-900 border-zinc-300 hover:border-zinc-600 hover:text-white active:bg-zinc-700 hover:bg-zinc-600 focus:border-zinc-700 focus:shadow-zinc-500/50 dark:hover:text-black dark:hover:bg-white dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:border-white dark:active:bg-zinc-300 dark:active:border-zinc-300 dark:focus:shadow-zinc-600/50;
134134
}
135135
.atomic-button--light-shadow {
136-
@apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 shadow-gray-500/30 dark:shadow-gray-600/30 dark:hover:shadow-gray-500/30 dark:focus:shadow-gray-500/30 dark:active:shadow-gray-600/30;
136+
@apply text-zinc-700 bg-white border-zinc-300 shadow-xl hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-black dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:active:border-zinc-700 dark:active:bg-zinc-800 shadow-zinc-500/30 dark:shadow-zinc-600/30 dark:hover:shadow-zinc-500/30 dark:focus:shadow-zinc-500/30 dark:active:shadow-zinc-600/30;
137137
}
138138
.atomic-button--dark {
139-
@apply text-white border-transparent bg-gray-950 dark:text-gray-950 dark:bg-white dark:hover:text-gray-900 dark:hover:bg-gray-100 dark:focus:outline-none dark:focus:bg-gray-200 dark:focus:text-gray-900 dark:active:bg-gray-300 dark:active:text-black hover:bg-gray-800 active:bg-gray-900;
139+
@apply text-white border-transparent bg-zinc-950 dark:text-zinc-950 dark:bg-white dark:hover:text-zinc-900 dark:hover:bg-zinc-100 dark:focus:outline-none dark:focus:bg-zinc-200 dark:focus:text-zinc-900 dark:active:bg-zinc-300 dark:active:text-black hover:bg-zinc-800 active:bg-zinc-900;
140140
}
141141
.atomic-button--dark-outline {
142-
@apply bg-white dark:bg-gray-950 dark:border-white text-gray-950 border-gray-950 dark:hover:bg-gray-950 dark:hover:border-gray-300 dark:active:bg-gray-950 hover:bg-gray-50 dark:focus:bg-gray-950 dark:active:border-gray-400 dark:text-white active:border-gray-600 hover:border-gray-500 active:bg-gray-100 focus:bg-transparent;
142+
@apply bg-white dark:bg-zinc-950 dark:border-white text-zinc-950 border-zinc-950 dark:hover:bg-zinc-950 dark:hover:border-zinc-300 dark:active:bg-zinc-950 hover:bg-zinc-50 dark:focus:bg-zinc-950 dark:active:border-zinc-400 dark:text-white active:border-zinc-600 hover:border-zinc-500 active:bg-zinc-100 focus:bg-transparent;
143143
}
144144
.atomic-button--dark-inverted {
145-
@apply border-gray-950 text-gray-950 hover:border-transparent hover:text-white active:bg-gray-800 hover:bg-gray-950 focus:shadow-gray-500/50 dark:hover:bg-white dark:hover:text-black dark:bg-gray-950 dark:text-white dark:active:bg-gray-200 dark:active:border-gray-200 dark:border-white;
145+
@apply border-zinc-950 text-zinc-950 hover:border-transparent hover:text-white active:bg-zinc-800 hover:bg-zinc-950 focus:shadow-zinc-500/50 dark:hover:bg-white dark:hover:text-black dark:bg-zinc-950 dark:text-white dark:active:bg-zinc-200 dark:active:border-zinc-200 dark:border-white;
146146
}
147147
.atomic-button--dark-shadow {
148-
@apply text-white border-transparent shadow-xl dark:text-gray-950 bg-gray-950 active:bg-gray-900 hover:bg-gray-800 focus:bg-gray-800 focus:shadow-gray-500/50 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;
148+
@apply text-white border-transparent shadow-xl dark:text-zinc-950 bg-zinc-950 active:bg-zinc-900 hover:bg-zinc-800 focus:bg-zinc-800 focus:shadow-zinc-500/50 dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-zinc-500/30 dark:shadow-zinc-200/30 dark:hover:shadow-zinc-300/30 dark:focus:shadow-zinc-300/30 dark:active:shadow-zinc-400/30;
149149
}
150150

151151
/* Buttons - loading */

0 commit comments

Comments
 (0)