Skip to content

Commit

Permalink
feat: normalize colors (gray -> zinc) (#545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RicoPleasure
RicoPleasure authored Nov 25, 2024
1 parent fd5d515 commit 4fedc1f
Show file tree
Hide file tree
Showing 40 changed files with 205 additions and 208 deletions.
16 changes: 8 additions & 8 deletions assets/css/components/avatar.css
View file
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
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
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

0 comments on commit 4fedc1f

Please sign in to comment.