This repository has been archived by the owner on Oct 30, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 43
/
vars.js
69 lines (55 loc) · 3.19 KB
/
vars.js
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
// @ts-check
import { rgba } from "polythene-core-css";
import { vars } from "polythene-theme";
/**
* @typedef {import("../index").SelectionControlVars} SelectionControlVars
*/
/**
* @type {SelectionControlVars} selectionControlVars
*/
const selectionControlVars = {
/**
* Generate general styles, not defined by variables
*/
general_styles: true,
animation_duration: vars.animation_duration,
button_size: 6 * vars.grid_unit_component,
icon_size: 3 * vars.grid_unit_component,
label_font_size: 2 * vars.grid_unit_component, // 16
label_height: 3 * vars.grid_unit_component, // 24
label_padding_after: 0,
label_padding_before: vars.grid_unit * 4, // 16
color_light_on: rgba(vars.color_primary),
color_light_off: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_label: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_disabled: rgba(vars.color_light_foreground, vars.blend_light_text_disabled),
// color_light_thumb_off_focus_opacity: .08,
// color_light_thumb_on_focus_opacity: .11,
// icon colors may be set in theme; set to "inherit" by default
color_light_on_icon: "inherit",
color_light_off_icon: "inherit",
// label on/off colors may be set in theme; set to color_light_label by default
color_light_on_label: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_off_label: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
// color_light_focus_on: rgba(vars.color_primary),
// color_light_focus_on_opacity: .11,
// color_light_focus_off: rgba(vars.color_light_foreground),
// color_light_focus_off_opacity: .07,
color_dark_on: rgba(vars.color_primary),
color_dark_off: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_label: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_disabled: rgba(vars.color_dark_foreground, vars.blend_dark_text_disabled),
// color_dark_thumb_off_focus_opacity: .08,
// color_dark_thumb_on_focus_opacity: .11,
// icon color may be set in theme; set to "inherit" by default
color_dark_on_icon: "inherit",
color_dark_off_icon: "inherit",
// label on/off colors may be set in theme; set to color_dark_label by default
color_dark_on_label: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_off_label: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
// color_dark_focus_on: rgba(vars.color_primary), // or '#80cbc4'
// color_dark_focus_on_opacity: .14,
// color_dark_focus_off: rgba(vars.color_dark_foreground),
// color_dark_focus_off_opacity: .09
};
export default selectionControlVars;