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
110 lines (99 loc) · 5.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
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
// @ts-check
/**
* @typedef {import("../index").ListTileVars} ListTileVars
*/
import { rgba } from "polythene-core-css";
import { vars } from "polythene-theme";
// SPECS
//
// heights:
// single line: 48
// single line, dense: 40
// single line, with icon: 48
// single line, with icon, dense: 40
// single line, with avatar: 56
// single line, with avatar, dense: 48
// two-line: 72
// two-line, dense: 60
// three-line: 88
// three-line, dense: 76
const single_height = 48;
const padding = 8;
const single_with_icon_height = 56;
export const themeVars = {
inset: false,
inset_h: false,
inset_v: false,
selected: false,
rounded: false,
};
/**
* @type {ListTileVars} listTileVars
*/
const listTileVars = {
/**
* Generate general styles, not defined by variables
*/
general_styles: true,
compact_front_item_width: 64,
compact_padding: 9,
compact_side_padding: 1 * vars.grid_unit_component,
font_size_list_header: 14,
font_size_navigation_title: 14,
font_size_small: 12,
font_size_subtitle: 14,
font_size_title: 16,
font_weight_list_header: vars.font_weight_medium,
font_weight_navigation_title: vars.font_weight_medium,
font_weight_subtitle: vars.font_weight_normal,
font_weight_title: vars.font_weight_normal,
front_item_width: 72,
has_high_subtitle_padding: 13,
has_subtitle_padding: 15,
high_subtitle_line_count: 2,
inset_h_size: 1 * vars.grid_unit_component, // 8
inset_v_size: 1 * vars.grid_unit_component, // 8
line_height_subtitle: 20,
padding: 13,
rounded_border_radius: vars.unit_item_border_radius,
side_padding: 2 * vars.grid_unit_component, // 16
single_height,
single_line_height: single_height - 2 * padding - (2 * 5 + 1),
single_with_icon_height,
single_with_icon_line_height: single_with_icon_height - 2 * padding - (2 * 5 + 1),
subtitle_line_count: 1,
title_line_count: 1,
color_light_title: rgba(vars.color_light_foreground, vars.blend_light_text_primary),
color_light_subtitle: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_info: rgba(vars.color_light_foreground, vars.blend_light_text_tertiary),
color_light_front: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_text_disabled: rgba(vars.color_light_foreground, vars.blend_light_text_disabled),
color_light_list_header: rgba(vars.color_light_foreground, vars.blend_light_text_tertiary),
color_light_secondary: rgba(vars.color_light_foreground, vars.blend_light_text_secondary),
color_light_hover: rgba(vars.color_light_foreground, vars.blend_light_text_primary),
color_light_hover_front: rgba(vars.color_light_foreground, vars.blend_light_text_primary),
color_light_hover_background: rgba(vars.color_light_foreground, vars.blend_light_background_hover),
color_light_focus_background: rgba(vars.color_light_foreground, vars.blend_light_background_hover),
color_light_selected_text: "inherit",
color_light_selected_background: rgba(vars.color_light_foreground, vars.blend_light_background_hover),
color_light_highlight_background: rgba(vars.color_light_foreground, vars.blend_light_background_hover),
// background color may be set in theme; disabled by default
// color_light_background: "inherit",
color_dark_title: rgba(vars.color_dark_foreground, vars.blend_dark_text_primary),
color_dark_subtitle: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_info: rgba(vars.color_dark_foreground, vars.blend_dark_text_tertiary),
color_dark_front: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_text_disabled: rgba(vars.color_dark_foreground, vars.blend_dark_text_disabled),
color_dark_list_header: rgba(vars.color_dark_foreground, vars.blend_dark_text_tertiary),
color_dark_secondary: rgba(vars.color_dark_foreground, vars.blend_dark_text_secondary),
color_dark_hover: rgba(vars.color_dark_foreground, vars.blend_dark_text_primary),
color_dark_hover_front: rgba(vars.color_dark_foreground, vars.blend_dark_text_primary),
color_dark_hover_background: rgba(vars.color_dark_foreground, vars.blend_dark_background_hover),
color_dark_selected_text: "inherit",
color_dark_selected_background: rgba(vars.color_dark_foreground, vars.blend_dark_background_hover),
color_dark_highlight_background: rgba(vars.color_dark_foreground, vars.blend_dark_background_hover),
// background color may be set in theme; disabled by default
// color_dark_background: "inherit",
...themeVars
};
export default listTileVars;