mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-12 13:52:20 +00:00
78 lines
2.1 KiB
SCSS
Executable File
78 lines
2.1 KiB
SCSS
Executable File
// include styles from the ui package
|
|
@import "@zitadel/react/styles.css";
|
|
@import "./vars.scss";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
h1,
|
|
.ztdl-h1 {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
.ztdl-p {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
|
|
html {
|
|
--background-color: #ffffff;
|
|
--dark-background-color: #000000;
|
|
}
|
|
|
|
// $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;
|
|
// }
|
|
|
|
// .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;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// $alphatypes: "text", "link";
|
|
|
|
// @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,
|
|
// .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;
|
|
// }
|
|
// }
|