Skip to content

feat: normalize colors (gray -> zinc) #545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enricoprazeres merged 4 commits into from
Nov 25, 2024
Merged

feat: normalize colors (gray -> zinc) #545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3646b91
feat: update some files
enricoprazeres Nov 20, 2024
4fb324a
feat: change gray-variant colors to zinc-variant colors
enricoprazeres Nov 20, 2024
e29210e
feat: change all gray variations for zinc
enricoprazeres Nov 21, 2024
fa3cf37
feat: run mix format
enricoprazeres Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions assets/css/components/avatar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@
}

.atomic-avatar--white {
@apply bg-white text-gray-700 border-gray-300 border;
@apply bg-white text-zinc-700 border-zinc-300 border;
}

.atomic-avatar--full_white {
@apply bg-white text-gray-700;
@apply bg-white text-zinc-700;
}

.atomic-avatar--info {
Expand All @@ -74,20 +74,20 @@
@apply bg-danger-600 text-white;
}

.atomic-avatar--gray {
@apply bg-gray-600 text-white;
.atomic-avatar--zinc {
@apply bg-zinc-600 text-white;
}

.atomic-avatar--light_gray {
@apply bg-gray-400 text-white;
.atomic-avatar--light_zinc {
@apply bg-zinc-400 text-white;
}

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

.atomic-avatar--dark {
@apply bg-gray-950 text-white border-transparent dark:text-gray-950 dark:bg-white;
@apply bg-zinc-950 text-white border-transparent dark:text-zinc-950 dark:bg-white;
}

/* Avatar - With image */
Expand Down
12 changes: 6 additions & 6 deletions assets/css/components/badge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,12 @@
.atomic-badge--danger-outline {
@apply border text-danger-600 border-danger-600 dark:text-danger-400 dark:border-danger-400;
}
.atomic-badge--gray-light {
@apply text-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-200 dark:border-gray-200;
.atomic-badge--zinc-light {
@apply text-zinc-800 bg-zinc-100 border-zinc-100 dark:bg-zinc-200 dark:border-zinc-200;
}
.atomic-badge--gray-dark {
@apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700;
.atomic-badge--zinc-dark {
@apply text-white bg-zinc-600 border-zinc-600 dark:bg-zinc-700 dark:border-zinc-700;
}
.atomic-badge--gray-outline {
@apply text-gray-600 border border-gray-600 dark:text-gray-400 dark:border-gray-400;
.atomic-badge--zinc-outline {
@apply text-zinc-600 border border-zinc-600 dark:text-zinc-400 dark:border-zinc-400;
}
42 changes: 21 additions & 21 deletions assets/css/components/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,19 @@
@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;
}
.atomic-button--white {
@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;
@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;
}
.atomic-button--white-outline {
@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;
@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;
}
.atomic-button--white-inverted {
@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;
@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;
}
.atomic-button--white-shadow {
@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;
@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;
}
.atomic-button--pure_white {
@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;
@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;
}
.atomic-button--info {
@apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;
Expand Down Expand Up @@ -111,41 +111,41 @@
.atomic-button--danger-shadow {
@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;
}
.atomic-button--gray {
@apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700;
.atomic-button--zinc {
@apply text-white bg-zinc-600 border-transparent active:bg-zinc-800 hover:bg-zinc-700 focus:bg-zinc-700;
}
.atomic-button--gray-outline {
@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;
.atomic-button--zinc-outline {
@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;
}
.atomic-button--gray-inverted {
@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;
.atomic-button--zinc-inverted {
@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;
}
.atomic-button--gray-shadow {
@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;
.atomic-button--zinc-shadow {
@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;
}
.atomic-button--light {
@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;
@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;
}
.atomic-button--light-outline {
@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;
@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;
}
.atomic-button--light-inverted {
@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;
@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;
}
.atomic-button--light-shadow {
@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;
@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;
}
.atomic-button--dark {
@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;
@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;
}
.atomic-button--dark-outline {
@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;
@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;
}
.atomic-button--dark-inverted {
@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;
@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;
}
.atomic-button--dark-shadow {
@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;
@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;
}

/* Buttons - loading */
Expand Down
Loading