TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-14 13:12:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix overridden styles, tailwind color map

Browse Source
This commit is contained in:
Max Peintner
2023-04-25 11:14:35 +02:00
parent 473d81a337
commit aaeccc437b
6 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
apps/login/styles/globals.scss
View File

@@ -1,3 +1,5 @@
// include styles from the ui package
@import "@zitadel/react/styles.css";
@import "./vars.scss";
@tailwind base;
@@ -20,54 +22,56 @@ html {
--dark-background-color: #000000;
}
$types: "background", "primary", "warn";
$shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
// $types: "background", "primary", "warn";
// $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
@each $type in $types {
@each $shade in $shades {
.bg-#{$type}-light-#{$shade} {
background-color: var(--theme-light-#{$type}-#{$shade}) !important;
}
.dark .dark\:bg-#{$type}-dark-#{$shade} {
background-color: var(--theme-dark-#{$type}-#{$shade}) !important;
}
// @each $type in $types {
// @each $shade in $shades {
// .bg-#{$type}-light-#{$shade} {
// background-color: var(--theme-light-#{$type}-#{$shade}) !important;
// }
// .dark .dark\:bg-#{$type}-dark-#{$shade} {
// background-color: var(--theme-dark-#{$type}-#{$shade}) !important;
// }
.text-#{$type}-light-#{$shade} {
color: var(--theme-light-#{$type}-#{$shade}) !important;
}
.dark .dark\:text-#{$type}-dark-#{$shade} {
color: var(--theme-dark-#{$type}-#{$shade}) !important;
}
// .text-#{$type}-light-#{$shade} {
// color: var(--theme-light-#{$type}-#{$shade}) !important;
// }
// .dark .dark\:text-#{$type}-dark-#{$shade} {
// color: var(--theme-dark-#{$type}-#{$shade}) !important;
// }
.text-#{$type}-light-contrast-#{$shade} {
color: var(--theme-light-#{$type}-contrast-#{$shade}) !important;
}
.dark .dark\:text-#{$type}-dark-contrast-#{$shade} {
color: var(--theme-dark-#{$type}-contrast-#{$shade}) !important;
}
}
}
// .text-#{$type}-light-contrast-#{$shade} {
// color: var(--theme-light-#{$type}-contrast-#{$shade}) !important;
// }
// .dark .dark\:text-#{$type}-dark-contrast-#{$shade} {
// color: var(--theme-dark-#{$type}-contrast-#{$shade}) !important;
// }
// }
// }
$alphatypes: "text", "link";
// $alphatypes: "text", "link";
@each $alphatype in $alphatypes {
.text-#{$alphatype}-light {
color: var(--theme-light-#{$alphatype}) !important;
}
.text-#{$alphatype}-light-contrast {
color: var(--theme-light-#{$alphatype}-contrast) !important;
}
.text-#{$alphatype}-light-secondary {
color: var(--theme-light-#{$alphatype}-secondary) !important;
}
// @each $alphatype in $alphatypes {
// .text-#{$alphatype}-light,
// .hover\:text-#{$alphatype}-light {
// color: var(--theme-light-#{$alphatype}) !important;
// }
// .text-#{$alphatype}-light-contrast {
// color: var(--theme-light-#{$alphatype}-contrast) !important;
// }
// .text-#{$alphatype}-light-secondary {
// color: var(--theme-light-#{$alphatype}-secondary) !important;
// }
.dark .dark\:text-#{$alphatype}-dark {
color: var(--theme-dark-#{$alphatype}) !important;
}
.dark .dark\:text-#{$alphatype}-dark-contrast {
color: var(--theme-dark-#{$alphatype}-contrast) !important;
}
.dark .dark\:text-#{$alphatype}-dark-secondary {
color: var(--theme-dark-#{$alphatype}-secondary) !important;
}
}
// .dark .dark\:text-#{$alphatype}-dark,
// .dark .hover\:text-#{$alphatype}-dark {
// color: var(--theme-dark-#{$alphatype}) !important;
// }
// .dark .dark\:text-#{$alphatype}-dark-contrast {
// color: var(--theme-dark-#{$alphatype}-contrast) !important;
// }
// .dark .dark\:text-#{$alphatype}-dark-secondary {
// color: var(--theme-dark-#{$alphatype}-secondary) !important;
// }
// }