aboutsummaryrefslogtreecommitdiff
path: root/sass/colors.scss
blob: 6411a837232a90d475db8ad21a7118b2b779b867 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$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;