| Línea 1... |
Línea 1... |
| 1 |
:root {
|
1 |
:root,
|
| - |
|
2 |
[data-bs-theme="light"] {
|
| 2 |
// Custom variable values only support SassScript inside `#{}`.
|
3 |
// Note: Custom variable values only support SassScript inside `#{}`.
|
| - |
|
4 |
|
| - |
|
5 |
// Colors
|
| - |
|
6 |
//
|
| - |
|
7 |
// Generate palettes for full colors, grays, and theme colors.
|
| - |
|
8 |
|
| 3 |
@each $color, $value in $colors {
|
9 |
@each $color, $value in $colors {
|
| 4 |
--#{$color}: #{$value};
|
10 |
--#{$prefix}#{$color}: #{$value};
|
| - |
|
11 |
}
|
| - |
|
12 |
|
| - |
|
13 |
@each $color, $value in $grays {
|
| - |
|
14 |
--#{$prefix}gray-#{$color}: #{$value};
|
| 5 |
}
|
15 |
}
|
| Línea 6... |
Línea 16... |
| 6 |
|
16 |
|
| 7 |
@each $color, $value in $theme-colors {
|
17 |
@each $color, $value in $theme-colors {
|
| - |
|
18 |
--#{$prefix}#{$color}: #{$value};
|
| - |
|
19 |
}
|
| - |
|
20 |
|
| - |
|
21 |
@each $color, $value in $theme-colors-rgb {
|
| 8 |
--#{$color}: #{$value};
|
22 |
--#{$prefix}#{$color}-rgb: #{$value};
|
| Línea 9... |
Línea 23... |
| 9 |
}
|
23 |
}
|
| 10 |
|
24 |
|
| 11 |
@each $bp, $value in $grid-breakpoints {
|
25 |
@each $color, $value in $theme-colors-text {
|
| Línea -... |
Línea 26... |
| - |
|
26 |
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
| - |
|
27 |
}
|
| - |
|
28 |
|
| - |
|
29 |
@each $color, $value in $theme-colors-bg-subtle {
|
| - |
|
30 |
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
| - |
|
31 |
}
|
| - |
|
32 |
|
| - |
|
33 |
@each $color, $value in $theme-colors-border-subtle {
|
| - |
|
34 |
--#{$prefix}#{$color}-border-subtle: #{$value};
|
| - |
|
35 |
}
|
| - |
|
36 |
|
| - |
|
37 |
--#{$prefix}white-rgb: #{to-rgb($white)};
|
| - |
|
38 |
--#{$prefix}black-rgb: #{to-rgb($black)};
|
| 12 |
--breakpoint-#{$bp}: #{$value};
|
39 |
|
| 13 |
}
|
40 |
// Fonts
|
| 14 |
|
41 |
|
| 15 |
// Use `inspect` for lists so that quoted items keep the quotes.
|
42 |
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
| - |
|
43 |
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
| - |
|
44 |
--#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
|
| - |
|
45 |
--#{$prefix}font-monospace: #{inspect($font-family-monospace)};
|
| - |
|
46 |
--#{$prefix}gradient: #{$gradient};
|
| - |
|
47 |
|
| - |
|
48 |
// Root and body
|
| - |
|
49 |
// scss-docs-start root-body-variables
|
| - |
|
50 |
@if $font-size-root != null {
|
| - |
|
51 |
--#{$prefix}root-font-size: #{$font-size-root};
|
| - |
|
52 |
}
|
| - |
|
53 |
--#{$prefix}body-font-family: #{inspect($font-family-base)};
|
| - |
|
54 |
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
| - |
|
55 |
--#{$prefix}body-font-weight: #{$font-weight-base};
|
| - |
|
56 |
--#{$prefix}body-line-height: #{$line-height-base};
|
| - |
|
57 |
@if $body-text-align != null {
|
| - |
|
58 |
--#{$prefix}body-text-align: #{$body-text-align};
|
| - |
|
59 |
}
|
| - |
|
60 |
|
| - |
|
61 |
--#{$prefix}body-color: #{$body-color};
|
| - |
|
62 |
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
| - |
|
63 |
--#{$prefix}body-bg: #{$body-bg};
|
| - |
|
64 |
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
| - |
|
65 |
|
| - |
|
66 |
--#{$prefix}emphasis-color: #{$body-emphasis-color};
|
| - |
|
67 |
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
| - |
|
68 |
|
| - |
|
69 |
--#{$prefix}secondary-color: #{$body-secondary-color};
|
| - |
|
70 |
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
| - |
|
71 |
--#{$prefix}secondary-bg: #{$body-secondary-bg};
|
| - |
|
72 |
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
| - |
|
73 |
|
| - |
|
74 |
--#{$prefix}tertiary-color: #{$body-tertiary-color};
|
| - |
|
75 |
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
| - |
|
76 |
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
|
| - |
|
77 |
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
| - |
|
78 |
// scss-docs-end root-body-variables
|
| - |
|
79 |
|
| - |
|
80 |
--#{$prefix}heading-color: #{$headings-color};
|
| - |
|
81 |
|
| - |
|
82 |
--#{$prefix}link-color: #{$link-color};
|
| - |
|
83 |
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
| - |
|
84 |
--#{$prefix}link-decoration: #{$link-decoration};
|
| - |
|
85 |
|
| - |
|
86 |
--#{$prefix}link-hover-color: #{$link-hover-color};
|
| - |
|
87 |
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
| - |
|
88 |
|
| - |
|
89 |
@if $link-hover-decoration != null {
|
| - |
|
90 |
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
| - |
|
91 |
}
|
| - |
|
92 |
|
| - |
|
93 |
--#{$prefix}code-color: #{$code-color};
|
| - |
|
94 |
--#{$prefix}highlight-color: #{$mark-color};
|
| - |
|
95 |
--#{$prefix}highlight-bg: #{$mark-bg};
|
| - |
|
96 |
|
| - |
|
97 |
// scss-docs-start root-border-var
|
| - |
|
98 |
--#{$prefix}border-width: #{$border-width};
|
| - |
|
99 |
--#{$prefix}border-style: #{$border-style};
|
| - |
|
100 |
--#{$prefix}border-color: #{$border-color};
|
| - |
|
101 |
--#{$prefix}border-color-translucent: #{$border-color-translucent};
|
| - |
|
102 |
|
| - |
|
103 |
--#{$prefix}border-radius: #{$border-radius};
|
| - |
|
104 |
--#{$prefix}border-radius-sm: #{$border-radius-sm};
|
| - |
|
105 |
--#{$prefix}border-radius-lg: #{$border-radius-lg};
|
| - |
|
106 |
--#{$prefix}border-radius-xl: #{$border-radius-xl};
|
| - |
|
107 |
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
|
| - |
|
108 |
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
|
| - |
|
109 |
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
| - |
|
110 |
// scss-docs-end root-border-var
|
| - |
|
111 |
|
| - |
|
112 |
--#{$prefix}box-shadow: #{$box-shadow};
|
| - |
|
113 |
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
|
| - |
|
114 |
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
|
| - |
|
115 |
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
|
| - |
|
116 |
|
| - |
|
117 |
// Focus styles
|
| - |
|
118 |
// scss-docs-start root-focus-variables
|
| - |
|
119 |
--#{$prefix}focus-ring-width: #{$focus-ring-width};
|
| - |
|
120 |
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
|
| - |
|
121 |
--#{$prefix}focus-ring-color: #{$focus-ring-color};
|
| - |
|
122 |
// scss-docs-end root-focus-variables
|
| - |
|
123 |
|
| - |
|
124 |
// scss-docs-start root-form-validation-variables
|
| - |
|
125 |
--#{$prefix}form-valid-color: #{$form-valid-color};
|
| - |
|
126 |
--#{$prefix}form-valid-border-color: #{$form-valid-border-color};
|
| - |
|
127 |
--#{$prefix}form-invalid-color: #{$form-invalid-color};
|
| - |
|
128 |
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
|
| - |
|
129 |
// scss-docs-end root-form-validation-variables
|
| - |
|
130 |
}
|
| - |
|
131 |
|
| - |
|
132 |
@if $enable-dark-mode {
|
| - |
|
133 |
@include color-mode(dark, true) {
|
| - |
|
134 |
color-scheme: dark;
|
| - |
|
135 |
|
| - |
|
136 |
// scss-docs-start root-dark-mode-vars
|
| - |
|
137 |
--#{$prefix}body-color: #{$body-color-dark};
|
| - |
|
138 |
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
|
| - |
|
139 |
--#{$prefix}body-bg: #{$body-bg-dark};
|
| - |
|
140 |
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
|
| - |
|
141 |
|
| - |
|
142 |
--#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
|
| - |
|
143 |
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
|
| - |
|
144 |
|
| - |
|
145 |
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
|
| - |
|
146 |
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
|
| - |
|
147 |
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
|
| - |
|
148 |
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
|
| - |
|
149 |
|
| - |
|
150 |
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
|
| - |
|
151 |
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
|
| - |
|
152 |
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
|
| - |
|
153 |
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
| - |
|
154 |
|
| - |
|
155 |
@each $color, $value in $theme-colors-text-dark {
|
| - |
|
156 |
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
| - |
|
157 |
}
|
| - |
|
158 |
|
| - |
|
159 |
@each $color, $value in $theme-colors-bg-subtle-dark {
|
| - |
|
160 |
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
| - |
|
161 |
}
|
| - |
|
162 |
|
| - |
|
163 |
@each $color, $value in $theme-colors-border-subtle-dark {
|
| - |
|
164 |
--#{$prefix}#{$color}-border-subtle: #{$value};
|
| - |
|
165 |
}
|
| - |
|
166 |
|
| - |
|
167 |
--#{$prefix}heading-color: #{$headings-color-dark};
|
| - |
|
168 |
|
| - |
|
169 |
--#{$prefix}link-color: #{$link-color-dark};
|
| - |
|
170 |
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
|
| - |
|
171 |
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
|
| - |
|
172 |
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
|
| - |
|
173 |
|
| - |
|
174 |
--#{$prefix}code-color: #{$code-color-dark};
|
| - |
|
175 |
--#{$prefix}highlight-color: #{$mark-color-dark};
|
| - |
|
176 |
--#{$prefix}highlight-bg: #{$mark-bg-dark};
|
| - |
|
177 |
|
| - |
|
178 |
--#{$prefix}border-color: #{$border-color-dark};
|
| - |
|
179 |
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
|
| - |
|
180 |
|
| - |
|
181 |
--#{$prefix}form-valid-color: #{$form-valid-color-dark};
|
| - |
|
182 |
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
|
| - |
|
183 |
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
|
| 16 |
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
184 |
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
|