Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / mdl-ext / src / _variables.scss
blob: 908b337bd4bad9a6f13e2134cf266ac2c54b6c8b [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1/**
2 * Copyright 2016 Leif Olsen. All Rights Reserved.
3 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
16
17@import "functions";
18
19// ----------------------------------------------------------------
20// Sample colors
21// ----------------------------------------------------------------
22$mdlext-palette-amber-50: #FFF8E1;
23$mdlext-palette-amber-100: #FFECB3;
24$mdlext-palette-amber-500: #FFC107;
25$mdlext-palette-amber-700: #FFA000;
26$mdlext-palette-blue-grey-500: #607D8B;
27$mdlext-palette-deep-orange-500: #FF5722;
28$mdlext-palette-deep-purple-100: #D1C4E9;
29$mdlext-palette-deep-purple-500: #512DA8;
30$mdlext-palette-deep-purple-700: #673AB7;
31$mdlext-palette-green-50: #E8F5E9;
32$mdlext-palette-green-100: #C8E6C9;
33$mdlext-palette-green-500: #4CAF50;
34$mdlext-palette-green-700: #388E3C;
35$mdlext-palette-grey-50: #FAFAFA;
36$mdlext-palette-grey-100: #F5F5F5;
37$mdlext-palette-grey-200: #EEEEEE;
38$mdlext-palette-grey-300: #E0E0E0;
39$mdlext-palette-grey-400: #BDBDBD;
40$mdlext-palette-grey-500: #9E9E9E;
41$mdlext-palette-grey-600: #757575;
42$mdlext-palette-grey-700: #616161;
43$mdlext-palette-grey-800: #424242;
44$mdlext-palette-grey-900: #212121;
45$mdlext-palette-indigo-A200: #536DFE;
46$mdlext-palette-light-blue-500: #03A9F4;
47$mdlext-palette-light-green-500: #8BC34A;
48$mdlext-palette-pink-500: #E91E63;
49$mdlext-palette-pink-700: #C2185B;
50$mdlext-palette-pink-A400: #F50057;
51$mdlext-palette-purple-A200: #E040FB;
52$mdlext-palette-red-700: #D32F2F;
53$mdlext-palette-red-A200: #FF5252;
54$mdlext-palette-red-A400: #FF1744;
55$mdlext-palette-yellow-500: #FFEB3B;
56$mdlext-color-black: #000000;
57$mdlext-color-white: #FFFFFF;
58
59
60/* ========== Sticky Header ========== */
61$mdlext-sticky-header-background-color : transparent !default;
62$mdlext-sticky-header-background-color-scroll : transparent !default;
63$mdlext-sticky-header-gradient-color : rgb-string-to-hex($color-primary) !default;
64$mdlext-sticky-header-gradient-color-start : $mdlext-sticky-header-gradient-color !default;
65$mdlext-sticky-header-gradient-color-end : $mdlext-sticky-header-gradient-color-start !default;
66$mdlext-sticky-header-gradient-color-scroll-start: rgba($mdlext-sticky-header-gradient-color, 0.98) !default;
67$mdlext-sticky-header-gradient-color-scroll-end : rgba($mdlext-sticky-header-gradient-color, 0.95) !default;
68
69// Background shorthand
70/* stylelint-disable */
71$mdlext-sticky-header-background : $mdlext-sticky-header-background-color
72 linear-gradient(to bottom,
73 $mdlext-sticky-header-gradient-color-start 0,
74 $mdlext-sticky-header-gradient-color-end 100%) !default;
75
76// Background shorthand when content is scrolling
77$mdlext-sticky-header-background-scroll : $mdlext-sticky-header-background-color-scroll
78 linear-gradient(to bottom,
79 $mdlext-sticky-header-gradient-color-scroll-start 100%,
80 $mdlext-sticky-header-gradient-color-scroll-end 100%) !default;
81/* stylelint-enable */
82
83/* ========== Accordion ========== */
84$mdlext-accordion-header-background-color-base : $mdlext-palette-grey-500 !default;
85$mdlext-accordion-header-background-color : rgba($mdlext-accordion-header-background-color-base, 0.20) !default;
86$mdlext-accordion-header-background-open-color : rgba($mdlext-accordion-header-background-color-base, 0.30) !default;
87$mdlext-accordion-header-background-active-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
88$mdlext-accordion-header-border-color : rgba($mdlext-accordion-header-background-color-base, 0.50) !default;
89$mdlext-accordion-header-background-hover-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default;
90$mdlext-accordion-header-focus-outline-color : invert !default;
91$mdlext-accordion-header-disabled-color : rgba($mdlext-accordion-header-background-color-base, 0.12) !default;
92$mdlext-accordion-header-secondary-color : $mdlext-color-black !default;
93$mdlext-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
94$mdlext-accordion-header-highlight-color : darken($mdlext-accordion-header-border-color, 3%) !default;
95$mdlext-accordion-ripple-color : rgba(rgb-string-to-hex($color-accent-contrast), 0.5) !default;
96$mdlext-accordion-header-padding : 8px !default;
97$mdlext-accordion-header-height : 56px !default;
98$mdlext-accordion-content-padding : $mdlext-accordion-header-padding !default;
99$mdlext-accordion-content-color : inherit !default;
100$mdlext-accordion-content-background-color : transparent !default;
101
102
103/* ========== Dialog ========== */
104$mdlext-dialog-padding : 0;
105$mdlext-dialog-background-color : transparent !default;
106$mdlext-dialog-backdrop-color : rgba(0, 0, 0, 0.86) !default;
107$mdlext-dialog-open-animation : 0.5s 0.2s forwards !default;
108$mdlext-dialog-backdrop-animation: 0.2s forwards !default;
109
110
111/* ========== Lightbox ========== */
112$mdlext-lightbox-background-color : $card-background-color !default;
113$mdlext-lightbox-border : 0 !default;
114$mdlext-lightbox-border-radius : 0 !default;
115$mdlext-lightbox-figure-margin : 0 !default;
116$mdlext-lightbox-figure-padding : 0 !default;
117$mdlext-lightbox-figcaption-background-color: rgba(255, 255, 255, 0.76) !default;
118$mdlext-lightbox-footer-background-color : rgba(255, 255, 255, 0.86) !default;
119
120
121/* ========== Lightboard ========== */
122$mdlext-lightboard-medium-small-breakpoint : $grid-tablet-breakpoint !default; // 480
123$mdlext-lightboard-medium-breakpoint : $grid-tablet-breakpoint + 180px !default; // 480 + 180
124$mdlext-lightboard-medium-large-breakpoint : $grid-desktop-breakpoint !default; // 840
125$mdlext-lightboard-large-breakpoint : $grid-desktop-breakpoint + 360px !default; // 840+360
126
127$mdlext-lightboard-small-gutter : 2px !default;
128$mdlext-lightboard-small-margin : 0 !default;
129$mdlext-lightboard-small-columns : 2 !default;
130$mdlext-lightboard-small-frame-width : 8px !default;
131
132$mdlext-lightboard-medium-small-gutter : 4px !default;
133$mdlext-lightboard-medium-small-margin : 0 !default;
134$mdlext-lightboard-medium-small-columns : 4 !default;
135$mdlext-lightboard-medium-small-frame-width : 8px !default;
136
137$mdlext-lightboard-medium-gutter : 4px !default;
138$mdlext-lightboard-medium-margin : 0 !default;
139$mdlext-lightboard-medium-columns : 5 !default;
140$mdlext-lightboard-medium-frame-width : 8px !default;
141
142$mdlext-lightboard-medium-large-gutter : 8px !default;
143$mdlext-lightboard-medium-large-margin : 0 !default;
144$mdlext-lightboard-medium-large-columns : 6 !default;
145$mdlext-lightboard-medium-large-frame-width : 12px !default;
146
147$mdlext-lightboard-large-gutter : 8px !default;
148$mdlext-lightboard-large-margin : 0 !default;
149$mdlext-lightboard-large-columns : 7 !default;
150$mdlext-lightboard-large-frame-width : 12px !default;
151
152$mdlext-lightboard-slide-max-size : 250px !default;
153$mdlext-lightboard-slide-border-color : #D8D8D8 !default;
154$mdlext-lightboard-slide-background-color : #F8F8F8 !default;
155$mdlext-lightboard-slide-border-radius : 5px !default;
156$mdlext-lightboard-slide-inner-border-radius : 3px !default;
157$mdlext-lightboard-slide-box-shadow : 2px 2px 6px -1px rgba(219, 215, 219, 0.5) !default;
158$mdlext-lightboard-slide-border-color-hover : #B8B8B8 !default;
159$mdlext-lightboard-slide-background-color-hover: #E8E8E8 !default;
160$mdlext-lightboard-slide-active-bacground-color: #E8E8E8 !default;
161$mdlext-lightboard-slide-box-shadow-hover : 2px 2px 12px -1px rgba(219, 215, 219, 1) !default;
162$mdlext-lightboard-ripple-color : $tab-highlight-color !default;
163$mdlext-lightboard-focus-outline-color : inherit !default;
164$mdlext-lightboard-figcaption-text-color : rgb-string-to-hex($palette-grey-400) !default;
165
166
167/* ========== Carousel ========== */
168$mdlext-carousel-slide-border-top-width : 2px !default;
169$mdlext-carousel-slide-border-top-color : rgb-string-to-hex($color-accent) !default;
170$mdlext-carousel-slide-margin-horizontal : 0;
171$mdlext-carousel-slide-figcaption-color : $mdlext-lightboard-figcaption-text-color !default;
172$mdlext-carousel-slide-ripple-color : $mdlext-lightboard-ripple-color !default;
173
174
175/* ========== Bordered fields ========== */
176$mdlext-bordered-field-vertical-spacing-top : 0 !default;
177$mdlext-bordered-field-vertical-spacing-bottom : $input-text-vertical-spacing !default;
178
179$mdlext-bordered-field-input-text-font-size : $input-text-font-size !default;
180$mdlext-bordered-field-font-weight : normal !default;
181$mdlext-bordered-field-border-width : 1px !default;
182$mdlext-bordered-field-border-radius : 3px !default;
183$mdlext-bordered-field-padding : $input-text-padding + 4px !default;
184$mdlext-bordered-field-padding-top : $input-text-vertical-spacing !default;
185$mdlext-bordered-field-padding-bottom : $input-text-padding !default;
186
187$mdlext-bordered-field-input-text-color : inherit !default;
188$mdlext-bordered-field-border-color : rgba($mdlext-color-black, 0.26) !default;
189$mdlext-bordered-field-background-color : rgba(#FFFFFF, 0.2) !default;
190$mdlext-bordered-field-focus-border-color : rgb-string-to-hex($color-primary) !default;
191$mdlext-bordered-field-focus-background-color : rgba(#EEEEEE, 0.2) !default;
192
193$mdlext-bordered-field-input-text-disabled-text-color : rgba($mdlext-color-black, 0.12) !default;
194$mdlext-bordered-field-disabled-border-color : rgba($mdlext-color-black, 0.12) !default;
195$mdlext-bordered-field-disabled-background-color : $mdlext-bordered-field-background-color !default;
196
197$mdlext-bordered-field-input-text-error-color : $mdlext-bordered-field-input-text-color !default;
198$mdlext-bordered-field-error-border-color : rgb-string-to-hex($input-text-error-color) !default;
199$mdlext-bordered-field-error-background-color : rgba(lighten($mdlext-bordered-field-error-border-color, 50%), 0.5) !default;
200$mdlext-bordered-field-error-focus-border-color : darken($mdlext-bordered-field-error-border-color, 10%) !default;
201$mdlext-bordered-field-error-focus-background-color : $mdlext-bordered-field-error-background-color !default;
202
203$mdlext-bordered-field-input-text-label-color : rgba($mdlext-color-black, 0.26) !default;
204$mdlext-bordered-field-input-text-label-focus-color : $mdlext-bordered-field-focus-border-color !default;
205$mdlext-bordered-field-input-text-label-error-color : $mdlext-bordered-field-error-border-color !default;
206$mdlext-bordered-field-input-text-label-disabled-color: rgba($mdlext-color-black, 0.12) !default;
207
208$mdlext-bordered-field-label-font-size : $mdlext-bordered-field-input-text-font-size !default;
209$mdlext-bordered-field-floating-label-font-size : $input-text-floating-label-fontsize !default;
210$mdlext-bordered-field-floating-label-font-weight : normal !default;
211
212$mdlext-bordered-field-height : $mdlext-bordered-field-padding-top + $mdlext-bordered-field-padding-bottom + $mdlext-bordered-field-input-text-font-size + 6px !default;
213$mdlext-bordered-field-floating-label-focus-bottom : $mdlext-bordered-field-height - $mdlext-bordered-field-floating-label-font-size - $mdlext-bordered-field-padding-top/2 !default;
214
215
216// MDL can not handle required attribute properly. Planned for MDL-v2
217//$mdlext-bordered-field-required-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
218//$mdlext-bordered-field-required-background-color : $mdlext-bordered-field-background-color !default;
219//$mdlext-bordered-field-required-focus-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default;
220//$mdlext-bordered-field-required-focus-background-color: $mdlext-bordered-field-background-color !default;
221//$mdlext-bordered-field-label-required-color : $mdlext-bordered-field-required-border-color !default;
222
223
224
225/* ========== Color Themes ========== */
226
227// ----------------------------------------------------------------
228// Light Color Theme.
229// ----------------------------------------------------------------
230$mdlext-light-color-primary: #4CAF50 !default;
231$mdlext-light-color-primary-dark: #388E3C !default;
232$mdlext-light-color-primary-light: #4CAF50 !default; // Fallback color. Set to color-primary if fallback is not needed
233$mdlext-light-color-primary-contrast: #C8E6C9 !default; // text color on primary/primary dark background
234$mdlext-light-color-accent: #E040FB !default;
235$mdlext-light-color-accent-light: #E040FB !default; // Fallback color. Set to color-accent if fallback is not needed
236$mdlext-light-color-accent-contrast: #FAFAFA !default;
237
238$mdlext-light-content-background-color: #FAFAFA !default; // background color on content (paper/card) background
239$mdlext-light-text-color-primary: rgba($mdlext-color-black, 0.87) !default; // text color on content (paper/card) background
240$mdlext-light-text-color-secondary: rgba($mdlext-color-black, 0.54) !default; // text color on content (paper/card) background
241$mdlext-light-text-color-disabled: rgba($mdlext-color-black, 0.38) !default; // disabled text, hint text, and icons
242$mdlext-light-divider-color: rgba($mdlext-color-black, 0.12) !default; // -> $card-border-color
243$mdlext-light-error-color: #D32F2F !default;
244
245// Anchor
246$mdlext-light-text-link-color: $mdlext-light-color-accent !default;
247
248// Card
249$mdlext-light-card-background-color: $mdlext-light-content-background-color !default;
250$mdlext-light-card-text-color: $mdlext-light-text-color-primary !default;
251$mdlext-light-card-image-placeholder-color: $mdlext-light-color-accent !default;
252$mdlext-light-card-supporting-text-text-color: rgba($mdlext-color-black, 0.54) !default;
253$mdlext-light-card-border-color: rgba(0, 0, 0, 0.1) !default;
254$mdlext-light-card-subtitle-color: rgba($mdlext-color-black, 0.54) !default;
255
256// Item
257
258// Default Item Colors
259$mdlext-light-default-item-text-color: rgba($mdlext-color-black, 0.87) !default;
260$mdlext-light-default-item-outline-color: $mdlext-palette-grey-400 !default;
261$mdlext-light-default-item-hover-bg-color: $mdlext-palette-grey-200 !default;
262$mdlext-light-default-item-focus-bg-color: $mdlext-palette-grey-200 !default;
263$mdlext-light-default-item-active-bg-color: $mdlext-palette-grey-300 !default;
264$mdlext-light-default-item-divider-color: rgba($mdlext-color-black, 0.12) !default;
265
266// Disabled Button Colors
267$mdlext-light-disabled-item-text-color: $mdlext-palette-grey-400 !default;
268
269// Dropdown menu / menu-button
270$mdlext-light-default-dropdown-bg-color: $mdlext-color-white !default;
271
272// Badge
273$mdlext-light-badge-color: $mdlext-light-color-accent-contrast !default;
274$mdlext-light-badge-color-inverse: $mdlext-light-color-accent !default;
275$mdlext-light-badge-background: $mdlext-light-color-accent !default;
276$mdlext-light-badge-background-inverse: $mdlext-light-color-accent-contrast !default;
277
278// Default button colors.
279$mdlext-light-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default;
280$mdlext-light-button-secondary-color: $mdlext-color-black !default;
281$mdlext-light-button-hover-color: $mdlext-light-button-primary-color !default;
282$mdlext-light-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default;
283$mdlext-light-button-focus-color: rgba($mdlext-color-black, 0.12) !default;
284
285// Colored button colors.
286$mdlext-light-button-primary-color-alt: $mdlext-light-color-primary-light !default;
287$mdlext-light-button-secondary-color-alt: $mdlext-light-color-primary-contrast !default;
288$mdlext-light-button-hover-color-alt: darken($mdlext-light-color-primary-light, 10%) !default;
289$mdlext-light-button-active-color-alt: darken($mdlext-light-color-primary-light, 10%) !default;
290$mdlext-light-button-focus-color-alt: $mdlext-light-button-focus-color !default;
291
292// Ripple color for colored raised buttons.
293$mdlext-light-button-ripple-color-alt: $mdlext-light-color-primary-contrast !default;
294
295// Disabled button colors.
296$mdlext-light-button-primary-color-disabled: rgba($mdlext-color-black, 0.12) !default;
297$mdlext-light-button-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
298
299// FAB colors and sizes.
300$mdlext-light-button-fab-color-alt: $mdlext-light-color-accent !default;
301$mdlext-light-button-fab-hover-color-alt: $mdlext-light-color-accent !default;
302$mdlext-light-button-fab-active-color-alt: $mdlext-light-color-accent !default;
303$mdlext-light-button-fab-text-color-alt: $mdlext-light-color-accent-contrast !default;
304$mdlext-light-button-fab-ripple-color-alt: $mdlext-light-color-accent-contrast !default;
305
306// Slider
307$mdlext-light-range-bg-color: rgba($mdlext-color-black, 0.26) !default;
308$mdlext-light-range-color: $mdlext-light-color-accent-light !default;
309$mdlext-light-range-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
310$mdlext-light-range-bg-focus-color: rgba($mdlext-color-black, 0.12) !default;
311
312// Textfields
313$mdlext-light-input-text-background-color: transparent !default;
314$mdlext-light-input-text-label-color: rgba($mdlext-color-black, 0.54) !default;
315$mdlext-light-input-text-bottom-border-color: rgba($mdlext-color-black, 0.26) !default;
316$mdlext-light-input-text-highlight-color: $mdlext-light-color-accent-light !default;
317$mdlext-light-input-text-disabled-color: rgba($mdlext-color-black, 0.12) !default;
318$mdlext-light-input-text-disabled-text-color: rgba($mdlext-color-black, 0.26) !default;
319$mdlext-light-input-text-error-color: $mdlext-light-error-color !default;
320
321// Checkboxes
322$mdlext-light-checkbox-color: $mdlext-light-color-accent-light !default;
323$mdlext-light-checkbox-off-color: rgba($mdlext-color-black, 0.54) !default;
324$mdlext-light-checkbox-disabled-color: rgba($mdlext-color-black, 0.26) !default;
325$mdlext-light-checkbox-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
326
327// Icon Toggles
328$mdlext-light-icon-toggle-color: $mdlext-palette-grey-700 !default;
329$mdlext-light-icon-toggle-focus-color: $mdlext-light-button-focus-color !default;
330$mdlext-light-icon-toggle-checked-color: $mdlext-light-color-accent-light !default;
331$mdlext-light-icon-toggle-checked-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
332$mdlext-light-icon-toggle-disabled-color: rgba($mdlext-color-black, 0.26) !default;
333
334// Radio Buttons
335$mdlext-light-radio-color: $mdlext-light-color-accent-light !default;
336$mdlext-light-radio-off-color: rgba($mdlext-color-black, 0.54) !default;
337$mdlext-light-radio-disabled-color: rgba($mdlext-color-black, 0.26) !default;
338
339// Switches
340$mdlext-light-switch-color: $mdlext-light-color-accent-light !default;
341$mdlext-light-switch-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default;
342$mdlext-light-switch-thumb-color: $mdlext-light-switch-color !default;
343$mdlext-light-switch-track-color: rgba($mdlext-light-color-accent-light, 0.54) !default;
344$mdlext-light-switch-off-thumb-color: $mdlext-palette-grey-50 !default;
345$mdlext-light-switch-off-track-color: rgba($mdlext-color-black, 0.26) !default;
346$mdlext-light-switch-disabled-thumb-color: $mdlext-palette-grey-400 !default;
347$mdlext-light-switch-disabled-track-color: rgba($mdlext-color-black, 0.12) !default;
348
349// Data table
350$mdlext-light-data-table-background-color: $mdlext-light-content-background-color !default;
351$mdlext-light-data-table-header-color: rgba($mdlext-color-black, 0.54) !default;
352$mdlext-light-data-table-header-sorted-color: rgba($mdlext-color-black, 0.87) !default;
353$mdlext-light-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-black, 0.26) !default;
354$mdlext-light-data-table-hover-color: $mdlext-palette-grey-200 !default;
355$mdlext-light-data-table-selection-color: $mdlext-palette-grey-200 !default;
356$mdlext-light-data-table-divider-color: rgba($mdlext-color-black, 0.12) !default;
357$mdlext-light-data-table-dividers: 1px solid $mdlext-light-data-table-divider-color !default;
358
359
360// Selectfield
361// Uses variables from textfield
362$mdlext-selectfield-arrow-width: 0.7em;
363$mdlext-selectfield-arrow-length: 0.5em;
364
365
366// Accordion
367$mdlext-light-accordion-header-background-color-base : $mdlext-palette-grey-600 !default;
368$mdlext-light-accordion-header-background-color : rgba($mdlext-light-accordion-header-background-color-base, 0.20) !default;
369$mdlext-light-accordion-header-background-open-color : rgba($mdlext-light-accordion-header-background-color-base, 0.30) !default;
370$mdlext-light-accordion-header-background-active-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
371$mdlext-light-accordion-header-border-color : rgba($mdlext-light-accordion-header-background-color-base, 0.50) !default;
372$mdlext-light-accordion-header-background-hover-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default;
373$mdlext-light-accordion-header-focus-outline-color : darken($mdlext-light-accordion-header-border-color, 3%) !default;
374$mdlext-light-accordion-header-disabled-color : rgba($mdlext-light-accordion-header-background-color-base, 0.12) !default;
375$mdlext-light-accordion-header-secondary-color : $mdlext-color-black !default;
376$mdlext-light-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default;
377$mdlext-light-accordion-header-highlight-color : darken($mdlext-light-accordion-header-border-color, 6%) !default;
378$mdlext-light-accordion-ripple-color : rgba($mdlext-light-accordion-header-background-color-base, 0.4) !default;
379$mdlext-light-accordion-content-color : inherit !default;
380$mdlext-light-accordion-content-background-color : transparent !default;
381
382
383// Bordered fields
384$mdlext-light-bordered-field-input-text-color : inherit !default;
385$mdlext-light-bordered-field-border-color : $mdlext-light-input-text-bottom-border-color !default;
386$mdlext-light-bordered-field-background-color : rgba($mdlext-light-content-background-color, 0.1) !default;
387$mdlext-light-bordered-field-focus-border-color : $mdlext-light-color-accent-light !default;
388$mdlext-light-bordered-field-focus-background-color : rgba(darken($mdlext-light-bordered-field-background-color, 10%), 0.1) !default;
389
390$mdlext-light-bordered-field-input-text-disabled-text-color : $mdlext-light-input-text-disabled-text-color;
391$mdlext-light-bordered-field-disabled-border-color : $mdlext-light-input-text-disabled-color !default;
392$mdlext-light-bordered-field-disabled-background-color : $mdlext-light-bordered-field-background-color !default;
393
394$mdlext-light-bordered-field-input-text-error-color : $mdlext-light-bordered-field-input-text-color !default;
395$mdlext-light-bordered-field-error-border-color : $mdlext-light-input-text-error-color !default;
396$mdlext-light-bordered-field-error-background-color : rgba(lighten($mdlext-light-bordered-field-error-border-color, 50%), 0.5) !default;
397$mdlext-light-bordered-field-error-focus-border-color : darken($mdlext-light-bordered-field-error-border-color, 10%) !default;
398$mdlext-light-bordered-field-error-focus-background-color : $mdlext-light-bordered-field-error-background-color !default;
399
400$mdlext-light-bordered-field-input-text-label-color : $mdlext-light-input-text-label-color !default;
401$mdlext-light-bordered-field-input-text-label-focus-color : $mdlext-light-bordered-field-focus-border-color !default;
402$mdlext-light-bordered-field-input-text-label-error-color : $mdlext-light-bordered-field-error-border-color !default;
403$mdlext-light-bordered-field-input-text-label-disabled-color: $mdlext-light-input-text-disabled-text-color !default;
404
405
406
407// ----------------------------------------------------------------
408// Dark Color Theme.
409// ----------------------------------------------------------------
410$mdlext-dark-color-primary: #FFC107 !default;
411$mdlext-dark-color-primary-dark: #FFA000 !default;
412$mdlext-dark-color-primary-light: #FFC107 !default; // Fallback color. Set to color-primary if fallback is not needed
413$mdlext-dark-color-primary-contrast: #FFF8E1 !default; // text color on primary/primary dark background
414$mdlext-dark-color-accent: #536DFE !default;
415$mdlext-dark-color-accent-light: #536DFE !default; // Fallback color. Set to color-accent if fallback is not needed
416$mdlext-dark-color-accent-contrast: #FFFFFF !default;
417
418$mdlext-dark-content-background-color: #303030 !default; // #424242 or #303030, background color on content (paper/card) background
419$mdlext-dark-text-color-primary: rgba(#FFFFFF, 1.00) !default; // text color on content (paper/card) background
420$mdlext-dark-text-color-secondary: rgba(#FFFFFF, 0.70) !default; // text color on content (paper/card) background
421$mdlext-dark-text-color-disabled: rgba(#FFFFFF, 0.50) !default; // disabled text, hint text, and icons
422$mdlext-dark-divider-color: rgba(#FFFFFF, 0.12) !default; // -> $card-border-color
423$mdlext-dark-error-color: #FF1744 !default;
424
425// Anchor
426$mdlext-dark-text-link-color: $mdlext-dark-color-accent !default;
427
428// Card
429$mdlext-dark-card-background-color: $mdlext-dark-content-background-color !default;
430$mdlext-dark-card-text-color: $mdlext-dark-text-color-primary !default;
431$mdlext-dark-card-image-placeholder-color: $mdlext-dark-color-accent !default;
432$mdlext-dark-card-supporting-text-text-color: rgba($mdlext-color-white, 0.70) !default;
433$mdlext-dark-card-border-color: rgba(0, 0, 0, 0.1) !default;
434$mdlext-dark-card-subtitle-color: rgba($mdlext-color-black, 0.70) !default;
435
436// Item
437
438// Default Item Colors
439$mdlext-dark-default-item-text-color: rgba($mdlext-color-white, 0.87) !default;
440$mdlext-dark-default-item-outline-color: $mdlext-palette-grey-700 !default;
441$mdlext-dark-default-item-hover-bg-color: $mdlext-palette-grey-900 !default;
442$mdlext-dark-default-item-focus-bg-color: $mdlext-palette-grey-900 !default;
443$mdlext-dark-default-item-active-bg-color: $mdlext-palette-grey-800 !default;
444$mdlext-dark-default-item-divider-color: rgba($mdlext-color-white, 0.20) !default;
445
446// Disabled Button Colors
447$mdlext-dark-disabled-item-text-color: $mdlext-palette-grey-500 !default;
448
449// Dropdown menu / menu-button
450$mdlext-dark-default-dropdown-bg-color: $mdlext-color-black !default;
451
452// Badge
453$mdlext-dark-badge-color: $mdlext-dark-color-accent-contrast !default;
454$mdlext-dark-badge-color-inverse: $mdlext-dark-color-accent !default;
455$mdlext-dark-badge-background: $mdlext-dark-color-accent !default;
456$mdlext-dark-badge-background-inverse: $mdlext-dark-color-accent-contrast !default;
457
458// Default button colors.
459$mdlext-dark-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default;
460$mdlext-dark-button-secondary-color: $mdlext-color-white !default;
461$mdlext-dark-button-hover-color: $mdlext-dark-button-primary-color !default;
462$mdlext-dark-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default;
463$mdlext-dark-button-focus-color: rgba($mdlext-color-black, 0.12) !default;
464
465// Colored button colors.
466$mdlext-dark-button-primary-color-alt: $mdlext-dark-color-primary-light !default;
467$mdlext-dark-button-secondary-color-alt: $mdlext-dark-color-primary-contrast !default;
468$mdlext-dark-button-hover-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default;
469$mdlext-dark-button-active-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default;
470$mdlext-dark-button-focus-color-alt: $mdlext-dark-button-focus-color !default;
471
472// Ripple color for colored raised buttons.
473$mdlext-dark-button-ripple-color-alt: $mdlext-dark-color-primary-contrast !default;
474
475// Disabled button colors.
476$mdlext-dark-button-primary-color-disabled: rgba($mdlext-color-white, 0.12) !default;
477$mdlext-dark-button-secondary-color-disabled: rgba($mdlext-color-white, 0.26) !default;
478
479// FAB colors and sizes.
480$mdlext-dark-button-fab-color-alt: $mdlext-dark-color-accent !default;
481$mdlext-dark-button-fab-hover-color-alt: $mdlext-dark-color-accent !default;
482$mdlext-dark-button-fab-active-color-alt: $mdlext-dark-color-accent !default;
483$mdlext-dark-button-fab-text-color-alt: $mdlext-dark-color-accent-contrast !default;
484$mdlext-dark-button-fab-ripple-color-alt: $mdlext-dark-color-accent-contrast !default;
485
486// Slider
487$mdlext-dark-range-bg-color: rgba($mdlext-color-white, 0.87) !default;
488$mdlext-dark-range-color: $mdlext-dark-color-accent-light !default;
489$mdlext-dark-range-faded-color: rgba($mdlext-dark-color-accent-light, 0.50) !default;
490$mdlext-dark-range-bg-focus-color: rgba($mdlext-color-white, 0.50) !default;
491
492// Textfields
493$mdlext-dark-input-text-background-color: transparent !default;
494$mdlext-dark-input-text-label-color: rgba($mdlext-color-white, 0.50) !default;
495$mdlext-dark-input-text-bottom-border-color: rgba($mdlext-color-white, 0.26) !default;
496$mdlext-dark-input-text-highlight-color: $mdlext-dark-color-accent-light !default;
497$mdlext-dark-input-text-disabled-color: rgba($mdlext-color-white, 0.12) !default;
498$mdlext-dark-input-text-disabled-text-color: rgba($mdlext-color-white, 0.26) !default;
499$mdlext-dark-input-text-error-color: $mdlext-dark-error-color !default;
500
501// Checkboxes
502$mdlext-dark-checkbox-color: $mdlext-dark-color-accent-light !default;
503$mdlext-dark-checkbox-off-color: rgba($mdlext-color-white, 0.50) !default;
504$mdlext-dark-checkbox-disabled-color: rgba($mdlext-color-white, 0.26) !default;
505$mdlext-dark-checkbox-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
506
507// Icon Toggles
508$mdlext-dark-icon-toggle-color: $mdlext-palette-grey-700 !default;
509$mdlext-dark-icon-toggle-focus-color: $mdlext-dark-button-focus-color !default;
510$mdlext-dark-icon-toggle-checked-color: $mdlext-dark-color-accent-light !default;
511$mdlext-dark-icon-toggle-checked-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
512$mdlext-dark-icon-toggle-disabled-color: rgba($mdlext-color-white, 0.50) !default;
513
514// Radio Buttons
515$mdlext-dark-radio-color: $mdlext-dark-color-accent-light !default;
516$mdlext-dark-radio-off-color: rgba($mdlext-color-white, 0.50) !default;
517$mdlext-dark-radio-disabled-color: rgba($mdlext-color-white, 0.26) !default;
518
519// Switches
520$mdlext-dark-switch-color: $mdlext-dark-color-accent-light !default;
521$mdlext-dark-switch-faded-color: rgba($mdlext-dark-color-accent-light, 0.26) !default;
522$mdlext-dark-switch-thumb-color: $mdlext-dark-switch-color !default;
523$mdlext-dark-switch-track-color: rgba($mdlext-dark-color-accent-light, 0.5) !default;
524$mdlext-dark-switch-off-thumb-color: $mdlext-palette-grey-50 !default;
525$mdlext-dark-switch-off-track-color: rgba($mdlext-color-white, 0.26) !default;
526$mdlext-dark-switch-disabled-thumb-color: $mdlext-palette-grey-50 !default;
527$mdlext-dark-switch-disabled-track-color: rgba($mdlext-color-white, 0.12) !default;
528
529// Data table
530$mdlext-dark-data-table-background-color: $mdlext-dark-content-background-color !default;
531$mdlext-dark-data-table-header-color: rgba($mdlext-color-white, 0.87) !default;
532$mdlext-dark-data-table-header-sorted-color: rgba($mdlext-color-white, 0.87) !default;
533$mdlext-dark-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-white, 0.26) !default;
534$mdlext-dark-data-table-hover-color: $mdlext-dark-default-item-hover-bg-color !default;
535$mdlext-dark-data-table-selection-color: $mdlext-dark-default-item-active-bg-color !default;
536$mdlext-dark-data-table-divider-color: rgba($mdlext-color-white, 0.12) !default;
537$mdlext-dark-data-table-dividers: 1px solid $mdlext-dark-data-table-divider-color !default;
538
539
540// Selectfield
541// Uses variables from textfield
542
543
544// Accordion
545$mdlext-dark-accordion-header-background-color-base : $mdlext-color-black !default;
546$mdlext-dark-accordion-header-background-color : rgba($mdlext-dark-accordion-header-background-color-base, 1.0) !default;
547$mdlext-dark-accordion-header-background-open-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.9) !default;
548$mdlext-dark-accordion-header-border-color : $mdlext-palette-grey-800 !default;
549$mdlext-dark-accordion-header-background-hover-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.5) !default;
550$mdlext-dark-accordion-header-background-active-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.6) !default;
551$mdlext-dark-accordion-header-focus-outline-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
552$mdlext-dark-accordion-header-disabled-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.4) !default;
553$mdlext-dark-accordion-header-secondary-color : $mdlext-dark-text-color-primary !default;
554$mdlext-dark-accordion-header-secondary-color-disabled: $mdlext-dark-text-color-disabled !default;
555$mdlext-dark-accordion-header-highlight-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default;
556$mdlext-dark-accordion-ripple-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.3) !default;
557$mdlext-dark-accordion-content-color : inherit !default;
558$mdlext-dark-accordion-content-background-color : transparent !default;
559
560
561// Bordered fields
562$mdlext-dark-bordered-field-input-text-color : inherit !default;
563$mdlext-dark-bordered-field-border-color : $mdlext-dark-input-text-bottom-border-color !default;
564$mdlext-dark-bordered-field-background-color : rgba($mdlext-dark-content-background-color, 0.1) !default;
565$mdlext-dark-bordered-field-focus-border-color : $mdlext-dark-color-accent-light !default;
566$mdlext-dark-bordered-field-focus-background-color : rgba(darken($mdlext-dark-bordered-field-background-color, 10%), 0.1) !default;
567
568$mdlext-dark-bordered-field-input-text-disabled-text-color : $mdlext-dark-input-text-disabled-text-color;
569$mdlext-dark-bordered-field-disabled-border-color : $mdlext-dark-input-text-disabled-color !default;
570$mdlext-dark-bordered-field-disabled-background-color : $mdlext-dark-bordered-field-background-color !default;
571
572$mdlext-dark-bordered-field-input-text-error-color : $mdlext-dark-bordered-field-input-text-color !default;
573$mdlext-dark-bordered-field-error-border-color : $mdlext-dark-input-text-error-color !default;
574$mdlext-dark-bordered-field-error-background-color : rgba($mdlext-dark-bordered-field-error-border-color, 0.1) !default;
575$mdlext-dark-bordered-field-error-focus-border-color : darken($mdlext-dark-bordered-field-error-border-color, 10%) !default;
576$mdlext-dark-bordered-field-error-focus-background-color : $mdlext-dark-bordered-field-error-background-color !default;
577
578$mdlext-dark-bordered-field-input-text-label-color : $mdlext-dark-input-text-label-color !default;
579$mdlext-dark-bordered-field-input-text-label-focus-color : $mdlext-dark-bordered-field-focus-border-color !default;
580$mdlext-dark-bordered-field-input-text-label-error-color : $mdlext-dark-bordered-field-error-border-color !default;
581$mdlext-dark-bordered-field-input-text-label-disabled-color: $mdlext-dark-input-text-disabled-text-color !default;