Skip to content

Commit f53dc9e

Browse files
simeonoffsimeonoff
committed
docs(themes): document the dock-manager schemas
1 parent 8cfa9f3 commit f53dc9e

File tree

2 files changed

+200
-150
lines changed

2 files changed

+200
-150
lines changed

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dock-manager.scss

Lines changed: 84 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,215 +8,237 @@
88
/// Generates a dark dock-manager schema.
99
/// @type {Map}
1010
/// @requires {function} extend
11-
/// @prop {Color} accent-color [#424242] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
12-
/// @prop {Color} border-color [#212121] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
13-
/// @prop {Color} button-text [#fff] - Sets the button text color.
14-
/// @prop {Color} context-menu-color-active [#fff] - Sets the text color for active context menus.
15-
/// @prop {Color} floating-pane-border-color [rgba(0, 0, 0, .26)] - Sets the border color for floating panes.
11+
/// @prop {Color} accent-color [igx-color: ('grays', 400), hexrgba: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
12+
/// @prop {Color} background-color [igx-color: ('grays', 200), hexrgba: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors.
13+
/// @prop {Color} border-color [igx-color: 'surface'] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
14+
/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color.
15+
/// @prop {Color} floating-pane-border-color [igx-color: ('grays', 100), hexrgba: #000] - Sets the border color for floating panes.
1616
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .38)] - Sets the border color for floating panes.
17-
/// @prop {Color} joystick-border-color [#424242] - Sets the border color of the joystick.
18-
/// @prop {Color} joystick-icon-color-active [#fff] - Sets the color of the active joystick icons.
19-
/// @prop {Color} pane-content-background [#212121] - Sets the background color of the content panes.
20-
/// @prop {Color} background-color [#111] - Sets the base dock manager color as well as the pane headers and tabs background colors.
21-
/// @prop {Color} splitter-background [#000] - Sets the background color for the splitters.
22-
/// @prop {Color} tab-background-active [#212121] - Sets the background color for active tabs.
23-
/// @prop {Color} text-color [rgba(255, 255, 255, .7)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
17+
/// @prop {Color} joystick-background-active [igx-color: 'surface'] - Sets the background color of the joysticks.
18+
/// @prop {Color} joystick-border-color [igx-color: ('grays', 400), hexrgba: #000] - Sets the border color of the joystick.
19+
/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons.
20+
/// @prop {Color} pane-content-background [igx-color: 'surface'] - Sets the background color of the content panes.
21+
/// @prop {Color} splitter-background [igx-clor: ('grays', 100), hexrgba: #000] - Sets the background color for the splitters.
22+
/// @prop {Color} tab-background-active [igx-color: 'surface'] - Sets the background color for active tabs.
2423
/// @requires $_light-dock-manager
2524
$_dark-dock-manager: extend(
2625
$_light-dock-manager, (
2726
accent-color: (
28-
igx-color: (grays, 400),
27+
igx-color: ('grays', 400),
2928
hexrgba: #000,
3029
),
3130
background-color: (
32-
igx-color: (grays, 200),
31+
igx-color: ('grays', 200),
3332
hexrgba: #000,
3433
),
3534
border-color: (
36-
igx-color: surface,
35+
igx-color: 'surface',
3736
),
3837
button-text: (
39-
igx-contrast-color: surface,
40-
),
41-
context-menu-color-active: (
42-
igx-contrast-color: surface,
38+
igx-contrast-color: 'surface',
4339
),
4440
floating-pane-border-color: (
45-
igx-color: (grays, 100),
41+
igx-color: ('grays', 100),
4642
hexrgba: #000,
4743
),
4844
flyout-shadow-color: rgba(0, 0, 0, .38),
4945
joystick-background-active: (
50-
igx-color: surface,
46+
igx-color: 'surface',
5147
),
5248
joystick-border-color: (
53-
igx-color: (grays, 400),
49+
igx-color: ('grays', 400),
5450
hexrgba: #000,
5551
),
5652
joystick-icon-color: (
57-
igx-contrast-color: surface,
58-
),
59-
joystick-icon-color-active: (
60-
igx-contrast-color: surface,
53+
igx-contrast-color: 'surface',
6154
),
6255
pane-content-background: (
63-
igx-color: surface,
56+
igx-color: 'surface',
6457
),
6558
splitter-background: (
66-
igx-color: (grays, 100),
59+
igx-color: ('grays', 100),
6760
hexrgba: #000,
6861
),
6962
tab-background-active: (
70-
igx-color: surface,
71-
),
72-
text-color: (
73-
igx-color: (grays, 800),
63+
igx-color: 'surface',
7464
),
7565
)
7666
);
7767

7868
/// Generates a dark fluent dock-manager schema.
7969
/// @type {Map}
70+
/// @prop {Color} accent-color [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
71+
/// @prop {Color} background-color [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the base dock manager color as well as the pane headers and tabs background colors.
72+
/// @prop {Color} button-text [igx-contrast-color: 'surface'] - Sets the button text color.
73+
/// @prop {Color} context-menu-background-active [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the background color for active context menus.
74+
/// @prop {Color} context-menu-color-active [igx-contrast-color: 'surface'] - Sets the text color for active context menus.
75+
/// @prop {Color} context-menu-background [igx-color: ('grays', 400), hexrgba: #000] - Sets the background color for context menus.
76+
/// @prop {Color} context-menu-color [igx-contrast-color: 'surface'] - Sets the text color for context menus.
77+
/// @prop {Color} dock-background [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the background color of the dock manager.
78+
/// @prop {Color} floating-pane-border-color [transparent] - Sets the border color for floating panes.
79+
/// @prop {Color} joystick-background-active [igx-color: 'surface', rgba: .5, hexrgba: #000] - Sets the background color of the joysticks.
80+
/// @prop {Color} joystick-background [igx-color: ('grays', 400), hexrgba: #000] - Sets the background color of the joystick.
81+
/// @prop {Color} joystick-border-color [transparent] - Sets the border color of the joystick.
82+
/// @prop {Color} joystick-icon-color [igx-contrast-color: 'surface'] - Sets the color for the joystick icons.
83+
/// @prop {Color} joystick-icon-color-active [igx-contrast-color: 'surface'] - Sets the color of the active joystick icons.
84+
/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, hexrgba: #000] - Sets the background color for pane headers.
85+
/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .85, hexrgba: #000] - Sets the background colors of pinned headers.
86+
/// @prop {Color} splitter-background [igx-color: 'surface', rgba: .7, hexrgba: #000] - Sets the background color for the splitters.
87+
/// @prop {Color} splitter-handle [igx-color: 'surface', rgba: .2, hexrgba: #000] - Sets the background color for the splitter handles.
88+
/// @prop {Color} tab-text [igx-contrast-color: 'surface'] - Sets the text color for tabs.
89+
/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
8090
/// @requires {function} extend
8191
/// @requires $_fluent-dock-manager
8292
$_dark-fluent-dock-manager: extend(
8393
$_fluent-dock-manager, (
8494
accent-color: (
85-
igx-color: surface,
95+
igx-color: 'surface',
8696
rgba: .5,
8797
hexrgba: #000,
8898
),
8999
background-color: (
90-
igx-color: surface,
100+
igx-color: 'surface',
91101
rgba: .85,
92102
hexrgba: #000,
93103
),
94104
button-text: (
95-
igx-contrast-color: surface,
105+
igx-contrast-color: 'surface',
96106
),
97107
context-menu-background-active: (
98-
igx-color: surface,
108+
igx-color: 'surface',
99109
rgba: .5,
100110
hexrgba: #000,
101111
),
102112
context-menu-color-active: (
103-
igx-contrast-color: surface,
113+
igx-contrast-color: 'surface',
104114
),
105115
context-menu-background: (
106-
igx-color: (grays, 400),
116+
igx-color: ('grays', 400),
107117
hexrgba: #000,
108118
),
109119
context-menu-color: (
110-
igx-contrast-color: surface,
120+
igx-contrast-color: 'surface',
111121
),
112122
dock-background: (
113-
igx-color: surface,
123+
igx-color: 'surface',
114124
rgba: .85,
115125
hexrgba: #000,
116126
),
117127
floating-pane-border-color: transparent,
118128
joystick-background-active: (
119-
igx-color: surface,
129+
igx-color: 'surface',
120130
rgba: .5,
121131
hexrgba: #000,
122132
),
123133
joystick-background: (
124-
igx-color: (grays, 400),
134+
igx-color: ('grays', 400),
125135
hexrgba: #000,
126136
),
127137
joystick-border-color: transparent,
128138
joystick-icon-color: (
129-
igx-contrast-color: surface,
139+
igx-contrast-color: 'surface',
130140
),
131141
joystick-icon-color-active: (
132-
igx-contrast-color: surface,
142+
igx-contrast-color: 'surface',
133143
),
134144
pane-header-backround: (
135-
igx-color: surface,
145+
igx-color: 'surface',
136146
rgba: .85,
137147
hexrgba: #000,
138148
),
139149
pinned-header-background: (
140-
igx-color: surface,
150+
igx-color: 'surface',
141151
rgba: .85,
142152
hexrgba: #000,
143153
),
144154
splitter-background: (
145-
igx-color: surface,
155+
igx-color: 'surface',
146156
rgba: .7,
147157
hexrgba: #000,
148158
),
149159
splitter-handle: (
150-
igx-color: surface,
160+
igx-color: 'surface',
151161
rgba: .2,
152162
hexrgba: #000,
153163
),
154164
tab-text: (
155-
igx-contrast-color: surface,
165+
igx-contrast-color: 'surface',
156166
),
157167
text-color: (
158-
igx-contrast-color: surface,
168+
igx-contrast-color: 'surface',
159169
),
160170
)
161171
);
162172

163173
/// Generates a dark bootstrap dock-manager schema.
164174
/// @type {Map}
175+
/// @prop {Color} accent-color [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
176+
/// @prop {Color} background-color [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the base dock manager color as well as the pane headers and tabs background colors.
177+
/// @prop {Color} context-menu-background [igx-color: 'surface', rgba: .66, hexrgba: ()] - Sets the background color for context menus.
178+
/// @prop {Color} context-menu-color-active [igx-context-color: 'surface'] - Sets the text color for active context menus.
179+
/// @prop {Color} dock-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background color of the dock manager.
180+
/// @prop {Color} joystick-background [igx-color: 'surface', rgba: .66, hexrgba: ()] - Sets the background color of the joystick.
181+
/// @prop {Color} joystick-icon-color-active [igx-context-color: 'surface'] - Sets the color of the active joystick icons.
182+
/// @prop {Color} pane-header-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background color for pane headers.
183+
/// @prop {Color} pinned-header-background [igx-color: 'surface', rgba: .33, hexrgba: ()] - Sets the background colors of pinned headers.
184+
/// @prop {Color} splitter-background [igx-color: ('grays', 300), hexrgba: ()] - Sets the background color for the splitters.
185+
/// @prop {Color} splitter-handle [igx-color: ('grays', 50), hexrgba: ()] - Sets the background color for the splitter handles.
186+
/// @prop {Color} text-color [igx-contrast-color: 'surface'] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
165187
/// @requires {function} extend
166188
/// @requires $_bootstrap-dock-manager
167189
$_dark-bootstrap-dock-manager: extend(
168190
$_bootstrap-dock-manager, (
169191
accent-color: (
170-
igx-color: surface,
192+
igx-color: 'surface',
171193
rgba: .33,
172194
hexrgba: #000,
173195
),
174196
background-color: (
175-
igx-color: surface,
197+
igx-color: 'surface',
176198
rgba: .33,
177199
hexrgba: #000,
178200
),
179201
context-menu-background: (
180-
igx-color: surface,
202+
igx-color: 'surface',
181203
rgba: .66,
182204
hexrgba: #000,
183205
),
184206
context-menu-color-active: (
185-
igx-contrast-color: surface,
207+
igx-contrast-color: 'surface',
186208
),
187209
dock-background: (
188-
igx-color: surface,
210+
igx-color: 'surface',
189211
rgba: .33,
190212
hexrgba: #000,
191213
),
192214
joystick-background: (
193-
igx-color: surface,
215+
igx-color: 'surface',
194216
rgba: .66,
195217
hexrgba: #000,
196218
),
197219
joystick-icon-color-active: (
198-
igx-contrast-color: surface,
220+
igx-contrast-color: 'surface',
199221
),
200222
pane-header-background: (
201-
igx-color: surface,
223+
igx-color: 'surface',
202224
rgba: .33,
203225
hexrgba: #000,
204226
),
205227
pinned-header-background: (
206-
igx-color: surface,
228+
igx-color: 'surface',
207229
rgba: .33,
208230
hexrgba: #000,
209231
),
210232
splitter-background: (
211-
igx-color: (grays,300),
233+
igx-color: ('grays', 300),
212234
hexrgba: #000,
213235
),
214236
splitter-handle: (
215-
igx-color: (grays,50),
237+
igx-color: ('grays', 50),
216238
hexrgba: #000,
217239
),
218240
text-color: (
219-
igx-contrast-color: surface,
241+
igx-contrast-color: 'surface',
220242
),
221243
)
222244
);

0 commit comments

Comments
 (0)