$colors: ( light: ( carbs-color-bg: #ffffff, carbs-color-fg: #3b4252, carbs-highlight: #eceff4, carbs-pink: #B48EAD, carbs-purple: #97365B, carbs-blue: #5e81ac, carbs-blue-alt: #81a1c1, carbs-red: #bf616a, carbs-grey: #8b94a5, carbs-green: #4F894C, carbs-orange: #d08770, ), dark: ( carbs-color-bg: #2e3440, carbs-color-fg: #eceff4, carbs-highlight: #3b4252, carbs-pink: #b48ead, carbs-purple: #b48ead, carbs-blue: #81a1c1, carbs-blue-alt: #88c0d0, carbs-red: #bf616a, carbs-grey: #6f7787, carbs-green: #a3be8c, carbs-orange: #d08770, ), ); @function compose-color-variable($color-key) { @return '--color-#{$color-key}'; } @function color-get($theme, $color) { $result: #{map-get(map-get($colors, $theme), $color)}; @if $result != "" { @return $result; } @else { @error "Unknown theme/color combination: '#{$theme}' '#{$color}'" } } @mixin theme-adjust-hue($key, $color-name, $light-hue, $dark-hue: $light-hue) { #{$key}: #{adjust-hue(map-get(map-get($colors, 'light'), $color-name), $light-hue)}; @at-root @media (prefers-color-scheme: dark) { & { #{$key}: #{adjust-hue(map-get(map-get($colors, 'dark'), $color-name), $dark-hue)}; } } } $carbs-color-fg: var(--color-carbs-color-fg) !default; $carbs-color-bg: var(--color-carbs-color-bg) !default; $carbs-highlight: var(--color-carbs-highlight) !default; $carbs-pink: var(--color-carbs-pink) !default; $carbs-purple: var(--color-carbs-purple) !default; $carbs-blue: var(--color-carbs-blue) !default; $carbs-blue-alt: var(--color-carbs-blue-alt) !default; $carbs-red: var(--color-carbs-red) !default; $carbs-grey: var(--color-carbs-grey) !default; $carbs-green: var(--color-carbs-green) !default; $carbs-orange: var(--color-carbs-orange) !default; $font-size: 16px; $font-text: 'Noto Sans', 'Open Sans', sans-serif; $primary: $carbs-pink; $link: $carbs-pink; $link-alt: $carbs-blue-alt;