40 lines
1.6 KiB
SCSS
40 lines
1.6 KiB
SCSS
@use 'catppuccin';
|
|
|
|
@each $flavor, $color in catppuccin.$palette {
|
|
body.#{$flavor} {
|
|
--#{$prefix}-base: #{map-get($color, 'base')};
|
|
--#{$prefix}-crust: #{map-get($color, 'crust')};
|
|
--#{$prefix}-mantle: #{map-get($color, 'mantle')};
|
|
--#{$prefix}-surface0: #{map-get($color, 'surface0')};
|
|
--#{$prefix}-surface1: #{map-get($color, 'surface1')};
|
|
--#{$prefix}-surface2: #{map-get($color, 'surface2')};
|
|
--#{$prefix}-overlay0: #{map-get($color, 'overlay0')};
|
|
--#{$prefix}-overlay1: #{map-get($color, 'overlay1')};
|
|
--#{$prefix}-overlay2: #{map-get($color, 'overlay2')};
|
|
--#{$prefix}-text: #{map-get($color, 'text')};
|
|
--#{$prefix}-green: #{map-get($color, 'green')};
|
|
--#{$prefix}-red: #{map-get($color, 'red')};
|
|
--#{$prefix}-sky: #{map-get($color, 'sky')};
|
|
--#{$prefix}-sapphire: #{map-get($color, 'sapphire')};
|
|
--#{$prefix}-teal: #{map-get($color, 'teal')};
|
|
--#{$prefix}-maroon: #{map-get($color, 'maroon')};
|
|
--#{$prefix}-mauve: #{map-get($color, 'mauve')};
|
|
|
|
--#{$prefix}-nav-bg: #{map-get($color, 'crust')};
|
|
--#{$prefix}-nav-color: #{map-get($color, 'text')};
|
|
--#{$prefix}-nav-logo-bg: #{map-get($color, 'rosewater')};
|
|
--#{$prefix}-nav-hover: #{map-get($color, 'surface2')};
|
|
--#{$prefix}-nav-active-bg: #{map-get($color, 'mauve')};
|
|
--#{$prefix}-nav-active-color: #{map-get($color, 'base')};
|
|
}
|
|
}
|
|
|
|
@each $color, $_ in map-get(catppuccin.$palette, 'latte') {
|
|
.c-#{$color} {
|
|
background-color: var(--#{$prefix}-#{$color}) !important;
|
|
}
|
|
}
|
|
|
|
.tc-text {
|
|
color: var(--#{$prefix}-text);
|
|
}
|