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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
//
// Docs color palette classes
//
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};
&::after {
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
$against-white: "#{contrast-ratio($value, $white)}";
$against-black: "#{contrast-ratio($value, $black)}";
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content:
str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4);
background-color: $value;
background-image:
linear-gradient(
to bottom,
transparent .25rem,
color-contrast($value) .25rem .75rem,
transparent .75rem 1.25rem,
$white 1.25rem 1.75rem,
transparent 1.75rem 2.25rem,
$black 2.25rem 2.75rem,
transparent 2.75rem
);
background-repeat: no-repeat;
background-size: .5rem 100%;
}
}
}
// stylelint-disable declaration-block-single-line-max-declarations
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
.bd-white { color: color-contrast($white); background-color: $white; }
.bd-black { color: color-contrast($black); background-color: $black; }
|
