blob: c87445ba73499b1dda483cbfa11424f4b4be3aff (
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
// stylelint-disable primer/no-unused-vars
// Immutable (static) color system
// Note: These color variables were perviously used in Primer CSS.
// They are immutable and won't change when switching color modes.
// Only use for rare edge cases like when needing SASS color functions (`lighten/darken`).
// Eventually we'd like to replace them with functional variables.
// Black based on same hue as $static-color-gray-900
$static-color-black: #1b1f23 !default;
$static-color-white: #fff !default;
//
//
// -------- Grays --------
$static-color-gray-000: #fafbfc !default;
$static-color-gray-100: #f6f8fa !default;
$static-color-gray-200: #e1e4e8 !default;
$static-color-gray-300: #d1d5da !default;
$static-color-gray-400: #959da5 !default;
$static-color-gray-500: #6a737d !default;
$static-color-gray-600: #586069 !default;
$static-color-gray-700: #444d56 !default;
$static-color-gray-800: #2f363d !default;
$static-color-gray-900: #24292e !default; // body font color
// -------- Blue --------
$static-color-blue-000: #f1f8ff !default;
$static-color-blue-100: #dbedff !default;
$static-color-blue-200: #c8e1ff !default;
$static-color-blue-300: #79b8ff !default;
$static-color-blue-400: #2188ff !default;
$static-color-blue-500: #0366d6 !default; // Default: Passes AA with #fff
$static-color-blue-600: #005cc5 !default;
$static-color-blue-700: #044289 !default;
$static-color-blue-800: #032f62 !default;
$static-color-blue-900: #05264c !default; // Passes with 1/2/300 blues
// -------- Green --------
$static-color-green-000: #f0fff4 !default;
$static-color-green-100: #dcffe4 !default;
$static-color-green-200: #bef5cb !default;
$static-color-green-300: #85e89d !default;
$static-color-green-400: #34d058 !default;
$static-color-green-500: #28a745 !default; // Default. passes AA Large
$static-color-green-600: #22863a !default; // Text green, passes AA on #fff
$static-color-green-700: #176f2c !default;
$static-color-green-800: #165c26 !default;
$static-color-green-900: #144620 !default;
// -------- Yellow --------
$static-color-yellow-000: #fffdef !default;
$static-color-yellow-100: #fffbdd !default;
$static-color-yellow-200: #fff5b1 !default;
$static-color-yellow-300: #ffea7f !default;
$static-color-yellow-400: #ffdf5d !default;
$static-color-yellow-500: #ffd33d !default;
$static-color-yellow-600: #f9c513 !default;
$static-color-yellow-700: #dbab09 !default;
$static-color-yellow-800: #b08800 !default;
$static-color-yellow-900: #735c0f !default;
// -------- Orange --------
$static-color-orange-000: #fff8f2 !default;
$static-color-orange-100: #ffebda !default;
$static-color-orange-200: #ffd1ac !default;
$static-color-orange-300: #ffab70 !default;
$static-color-orange-400: #fb8532 !default;
$static-color-orange-500: #f66a0a !default; // Default. passes AA Large with #fff
$static-color-orange-600: #e36209 !default;
$static-color-orange-700: #d15704 !default;
$static-color-orange-800: #c24e00 !default;
$static-color-orange-900: #a04100 !default;
// -------- Red --------
$static-color-red-000: #ffeef0 !default;
$static-color-red-100: #ffdce0 !default;
$static-color-red-200: #fdaeb7 !default;
$static-color-red-300: #f97583 !default;
$static-color-red-400: #ea4a5a !default;
$static-color-red-500: #d73a49 !default; // Default. passes AA
$static-color-red-600: #cb2431 !default;
$static-color-red-700: #b31d28 !default;
$static-color-red-800: #9e1c23 !default;
$static-color-red-900: #86181d !default;
// -------- Purple --------
$static-color-purple-000: #f5f0ff !default;
$static-color-purple-100: #e6dcfd !default;
$static-color-purple-200: #d1bcf9 !default;
$static-color-purple-300: #b392f0 !default;
$static-color-purple-400: #8a63d2 !default;
$static-color-purple-500: #6f42c1 !default; // passes AA with #fff
$static-color-purple-600: #5a32a3 !default;
$static-color-purple-700: #4c2889 !default;
$static-color-purple-800: #3a1d6e !default;
$static-color-purple-900: #29134e !default;
// -------- Pink --------
$static-color-pink-000: #ffeef8 !default;
$static-color-pink-100: #fedbf0 !default;
$static-color-pink-200: #f9b3dd !default;
$static-color-pink-300: #f692ce !default;
$static-color-pink-400: #ec6cb9 !default;
$static-color-pink-500: #ea4aaa !default;
$static-color-pink-600: #d03592 !default;
$static-color-pink-700: #b93a86 !default;
$static-color-pink-800: #99306f !default;
$static-color-pink-900: #6d224f !default;
// -------- Fades --------
$static-color-black-fade-15: rgba($static-color-black, 0.15) !default;
$static-color-black-fade-30: rgba($static-color-black, 0.3) !default;
$static-color-black-fade-50: rgba($static-color-black, 0.5) !default;
$static-color-black-fade-70: rgba($static-color-black, 0.7) !default;
$static-color-black-fade-85: rgba($static-color-black, 0.85) !default;
$static-color-white-fade-15: rgba($static-color-white, 0.15) !default;
$static-color-white-fade-30: rgba($static-color-white, 0.3) !default;
$static-color-white-fade-50: rgba($static-color-white, 0.5) !default;
$static-color-white-fade-70: rgba($static-color-white, 0.7) !default;
$static-color-white-fade-85: rgba($static-color-white, 0.85) !default;
// -------- Color defaults --------
$static-color-red: $static-color-red-500 !default;
$static-color-purple: $static-color-purple-500 !default;
$static-color-blue: $static-color-blue-500 !default;
$static-color-green: $static-color-green-500 !default;
$static-color-yellow: $static-color-yellow-500 !default;
$static-color-orange: $static-color-orange-500 !default;
$static-color-gray-dark: $static-color-gray-900 !default;
$static-color-gray-light: $static-color-gray-400 !default;
$static-color-gray: $static-color-gray-500 !default;
|
