$colors: ( light: ( carbs-color-bg: #F3F6F8, carbs-color-fg: #0A1E2B, carbs-highlight: #E9ECEE, carbs-pink: #BF6790, carbs-purple: #8C45D4, carbs-blue: #3F74A6, carbs-blue-alt: #3F41A6, carbs-red: #D32C2C, carbs-grey: #738B8B, carbs-green: #027A59, carbs-orange: #B45123, ), dark: ( carbs-color-bg: #0A1E2B, carbs-color-fg: #F3F6F8, carbs-highlight: #0A2830, carbs-pink: #BF6790, carbs-purple: #A6A6D2, carbs-blue: #6790BF, carbs-blue-alt: #67BCBF, carbs-red: #C34266, carbs-grey: #686868, carbs-green: #67BF96, carbs-orange: #F47A00, ), ); @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;