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;
|
