-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfont-tester-theme.css
More file actions
157 lines (139 loc) · 5.1 KB
/
font-tester-theme.css
File metadata and controls
157 lines (139 loc) · 5.1 KB
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
157
/**
* font-tester theme template
* Copy and customise these overrides in your own stylesheet.
*
* CUSTOM PROPERTIES
* All custom properties must be set on font-tester itself — sub-components
* (font-display, style-controls, etc.) live inside font-tester's shadow DOM
* and cannot be targeted by descendant CSS selectors. Custom properties
* cascade through shadow boundaries automatically from the host element.
*
* ::part() SELECTORS
* Only parts that are declared or forwarded through font-tester's shadow root
* are reachable. font-display, style-controls, opentype-features, and
* var-axes-controls do not export their inner parts — style those via
* custom properties instead.
*/
font-tester {
/* Layout */
--container-max-width: 1200px;
--container-padding: 20px;
--section-gap: 30px;
/* Display area (font-display) */
--display-bg: #ffffff;
--display-border-color: #e0e0e0;
--display-border-width: 1px;
--display-border-radius: 8px;
--display-padding: 40px;
--display-min-height: 200px;
/* Preview text (font-display) */
--text-color: #000000;
--text-font-size: 48px;
--text-font-weight: 400;
--text-line-height: 1.4;
--text-letter-spacing: 0em;
/* --display-font-family is managed internally — do not override */
/* Status indicators (font-display) */
--loading-color: #999;
--error-color: #f00;
/* Toggle buttons (text-controls) */
--control-bg: white;
--control-bg-hover: #f5f5f5;
--control-bg-active: #333;
--control-border: #e0e0e0;
--control-border-width: 1px;
--control-border-radius: 4px;
--control-text: #000;
--control-text-active: #fff;
--control-gap: 10px;
/* Sliders (style-controls) */
--slider-bg: #e0e0e0;
--slider-thumb-bg: #333;
--label-color: #333;
--value-color: #666;
/* Dropdowns (sample-text-selector, font-style-selector) */
--select-bg: white;
--select-border: #e0e0e0;
--select-border-width: 1px;
--select-border-hover: #333;
--select-border-radius: 4px;
--select-padding: 8px 12px;
--select-font-family: inherit;
--select-font-size: 13px;
--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
--select-arrow-position: right 12px center;
/* OpenType feature toggles (opentype-features) */
--feature-bg: white;
--feature-bg-hover: #f5f5f5;
--feature-bg-active: #333;
--feature-border: #e0e0e0;
--feature-border-width: 1px;
--feature-border-radius: 4px;
--feature-text: #000;
--feature-text-active: #fff;
--feature-gap: 12px;
--feature-code-font-size: 11px;
--feature-code-opacity: 0.6;
/* OpenType features trigger button */
--btn-bg: white;
--btn-bg-hover: #f5f5f5;
--btn-border-color: #e0e0e0;
--btn-border-radius: 4px;
--btn-color: #000;
--btn-font-size: 13px;
/* OpenType features dialog */
--dialog-border-color: #e0e0e0;
--dialog-border-radius: 8px;
--dialog-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--dialog-backdrop-color: rgba(0, 0, 0, 0.3);
--dialog-header-border-color: #e0e0e0;
--dialog-close-color: #666;
}
/* Layout sections — container is a flex column, use order to reposition */
font-tester::part(controls-section) { }
font-tester::part(style-controls-section) { }
font-tester::part(display-section) { }
font-tester::part(var-axes-section) { }
/* OpenType dialog */
font-tester::part(features-button) { }
font-tester::part(dialog) { }
font-tester::part(dialog-header) { }
font-tester::part(dialog-title) { }
font-tester::part(close-button) { }
/* text-controls — exported via exportparts */
font-tester::part(button) { } /* all buttons */
font-tester::part(uppercase-button) { }
font-tester::part(direction-group) { }
font-tester::part(ltr-button) { }
font-tester::part(rtl-button) { }
font-tester::part(alignment-group) { }
font-tester::part(align-left-button) { }
font-tester::part(align-center-button) { }
font-tester::part(align-right-button) { }
/* style-controls — exported via exportparts */
font-tester::part(controls) { }
font-tester::part(control-item) { } /* all items — flex row by default */
font-tester::part(font-size-item) { }
font-tester::part(line-height-item) { }
font-tester::part(letter-spacing-item) { }
font-tester::part(label) { } /* all labels */
font-tester::part(font-size-label) { }
font-tester::part(line-height-label) { }
font-tester::part(letter-spacing-label) { }
font-tester::part(slider) { } /* all sliders */
font-tester::part(font-size-slider) { }
font-tester::part(line-height-slider) { }
font-tester::part(letter-spacing-slider) { }
font-tester::part(value-display) { } /* all value readouts */
font-tester::part(font-size-value) { }
font-tester::part(line-height-value) { }
font-tester::part(letter-spacing-value) { }
/* var-axes-controls — exported via exportparts (generic parts only) */
font-tester::part(axes) { }
font-tester::part(axis-control) { }
/* sample-text-selector — exported via exportparts */
font-tester::part(sample-select) { }
/* font-style-selector — exported via exportparts */
font-tester::part(style-wrapper) { }
font-tester::part(style-label) { }
font-tester::part(style-select) { }