forked from ostreifel/Board-Group
-
Notifications
You must be signed in to change notification settings - Fork 0
/
colors.scss
46 lines (45 loc) · 1.75 KB
/
colors.scss
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
@function createColor($name, $defaultR, $defaultG, $defaultB, $defaultA: 1) {
@return (
variable: rgba(var($name, $defaultR, $defaultG, $defaultB), $defaultA),
literal: rgba($defaultR, $defaultG, $defaultB, $defaultA),
);
}
$colors: (
/* Alias theme variables with defaults */
/* Names assume light theme */
black: createColor(--palette-neutral-100, 0, 0, 0),
white: createColor(--palette-neutral-0, 255, 255, 255),
blue: createColor(--palette-primary-shade-10, 16, 110, 190),
aliceblue: createColor(--palette-primary-tint-40, 239, 246, 252),
darkaliceblue: createColor(--palette-primary-tint-30, 222, 236, 249),
red: createColor(--palette-accent1, 218, 10, 0),
lightgray: createColor(--palette-neutral-10, 218, 218, 218),
darkgray: createColor(--palette-neutral-80, 51, 51, 51),
gray: createColor(--palette-neutral-60, 102, 102, 102),
);
@function getColorLiteral($name) {
@return map-get(map-get($colors, $name), literal);
}
@function getColorVariable($name) {
@return map-get(map-get($colors, $name), variable);
}
@mixin color($colorName) {
color: getColorLiteral($colorName);
color: getColorVariable($colorName);
}
@mixin border($style, $width, $colorName) {
border: $style $width getColorLiteral($colorName);
border: $style $width getColorVariable($colorName);
}
@mixin outline($style, $width, $colorName) {
outline: $style $width getColorLiteral($colorName);
outline: $style $width getColorVariable($colorName);
}
@mixin background-color($colorName) {
background-color: getColorLiteral($colorName);
background-color: getColorVariable($colorName);
}
@mixin border-color($colorName) {
border-color: getColorLiteral($colorName);
border-color: getColorVariable($colorName);
}