aboutsummaryrefslogtreecommitdiff
path: root/sass/colors.scss
blob: dc4eff9c6c68c50dd5bf54773de0974cd13cbe02 (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:    #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;