Skip to content

Commit b7f3a78

Browse files
simeonoffsimeonoff
committed
refactor(themes): add sassdoc descriptions and all props for the dockmgr
1 parent 9dce31c commit b7f3a78

File tree

3 files changed

+112
-83
lines changed

3 files changed

+112
-83
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,38 @@
99
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
1010
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
1111
///
12-
/// @param {Color} primary-color [null] -
13-
/// @param {Color} accent-color [null] -
14-
/// @param {Color} text-color [null] -
15-
/// @param {Color} border-color [null] -
16-
/// @param {Color} button-text [null] -
17-
/// @param {Color} splitter-background [null] -
18-
/// @param {Color} flyout-shadow-color [null] -
19-
/// @param {Color} joystick-icon-color-active [null] -
20-
/// @param {Color} joystick-border-color [null] -
21-
/// @param {Color} tab-background-active [null] -
22-
/// @param {Color} pane-content-background [null] -
23-
/// @param {Color} floating-pane-border-color [null] -
24-
/// @param {Color} context-menu-color-active [null] -
12+
/// @param {Color} $accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
13+
/// @param {Color} $border-color [null] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
14+
/// @param {Color} $button-text [null] - Sets the button text color.
15+
/// @param {Color} $context-menu-background [null] - Sets the background color for context menus.
16+
/// @param {Color} $context-menu-background-active [null] - Sets the background color for active context menus.
17+
/// @param {Color} $context-menu-color [null] - Sets the text color for context menus.
18+
/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.
19+
/// @param {Color} $dock-background [null] - Sets the background color of the dock manager.
20+
/// @param {Color} $dock-text [null] - Sets the text color of the dock manager.
21+
/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.
22+
/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.
23+
/// @param {Color} $joystick-background [null] - Sets the background color of the joystick.
24+
/// @param {Color} $joystick-background-active [null] - Sets the background color of the joysticks.
25+
/// @param {Color} $joystick-border-color [null] - Sets the border color of the joystick.
26+
/// @param {Color} $joystick-icon-color [null] - Sets the color for the joystick icons.
27+
/// @param {Color} $joystick-icon-color-active [null] - Sets the color of the active joystick icons.
28+
/// @param {Color} $pane-content-background [null] - Sets the background color of the content panes.
29+
/// @param {Color} $pane-content-text [null] - Sets the text color of the content panes.
30+
/// @param {Color} $pane-header-background [null] - Sets the background color for pane headers.
31+
/// @param {Color} $pane-header-text [null] - Sets the text color for pane headers.
32+
/// @param {Color} $pinned-header-background [null] - Sets the background colors of pinned headers.
33+
/// @param {Color} $pinned-header-text [null] - Sets the text colors of pinned headers.
34+
/// @param {Color} $primary-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
35+
/// @param {Color} $splitter-background [null] - Sets the background color for the splitters.
36+
/// @param {Color} $splitter-handle [null] - Sets the background color for the splitter handles.
37+
/// @param {Color} $tab-background [null] - Sets the background color for tabs.
38+
/// @param {Color} $tab-background-active [null] - Sets the background color for active tabs.
39+
/// @param {Color} $tab-border-color [null] - Sets the border color for tabs.
40+
/// @param {Color} $tab-border-color-active [null] - Sets the border color for active tabs.
41+
/// @param {Color} $tab-text [null] - Sets the text color for tabs.
42+
/// @param {Color} $tab-text-active [null] - Sets the text color for active tabs.
43+
/// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
2544
/// @requires $default-palette
2645
/// @requires $light-schema
2746
/// @requires apply-palette
@@ -35,20 +54,7 @@
3554
@function igc-dock-manager-theme(
3655
$palette: $default-palette,
3756
$schema: $light-schema,
38-
39-
$primary-color: null,
40-
$accent-color: null,
41-
$text-color: null,
42-
$border-color: null,
43-
$button-text: null,
44-
$splitter-background: null,
45-
$flyout-shadow-color: null,
46-
$joystick-icon-color-active: null,
47-
$joystick-border-color: null,
48-
$tab-background-active: null,
49-
$pane-content-background: null,
50-
$floating-pane-border-color: null,
51-
$context-menu-color-active: null,
57+
$rest...
5258
) {
5359
$name: 'igc-dock-manager';
5460
$dock-manager-schema: ();
@@ -61,20 +67,5 @@
6167

6268
$theme: apply-palette($dock-manager-schema, $palette);
6369

64-
@return extend($theme, (
65-
name: 'igc',
66-
primary-color: $primary-color,
67-
accent-color: $accent-color,
68-
text-color: $text-color,
69-
border-color: $border-color,
70-
button-text: $button-text,
71-
splitter-background: $splitter-background,
72-
flyout-shadow-color: $flyout-shadow-color,
73-
joystick-icon-color-active: $joystick-icon-color-active,
74-
joystick-border-color: $joystick-border-color,
75-
tab-background-active: $tab-background-active,
76-
pane-content-background: $pane-content-background,
77-
floating-pane-border-color: $floating-pane-border-color,
78-
context-menu-color-active: $context-menu-color-active,
79-
));
70+
@return extend($theme, (name: 'igc'), keywords($rest));
8071
}

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,35 @@
88
/// Generates a dark dock-manager schema.
99
/// @type {Map}
1010
/// @requires {function} extend
11-
/// @prop {Color} primary-color [#111] -
12-
/// @prop {Color} accent-color [#424242] -
13-
/// @prop {Color} text-color [rgba(255, 255, 255, .7)] -
14-
/// @prop {Color} border-color [#212121] -
15-
/// @prop {Color} button-text [#fff] -
16-
/// @prop {Color} splitter-background [#000] -
17-
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .38)] -
18-
/// @prop {Color} joystick-icon-color-active [#fff] -
19-
/// @prop {Color} joystick-border-color [#424242] -
20-
/// @prop {Color} tab-background-active [#212121] -
21-
/// @prop {Color} pane-content-background [#212121] -
22-
/// @prop {Color} floating-pane-border-color [rgba(0, 0, 0, .26)] -
23-
/// @prop {Color} context-menu-color-active [#fff] -
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.
16+
/// @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} primary-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.
2424
/// @requires $_light-dock-manager
2525
$_dark-dock-manager: extend(
2626
$_light-dock-manager, (
27-
primary-color: #111,
2827
accent-color: #424242,
29-
text-color: rgba(255, 255, 255, .7),
3028
border-color: #212121,
3129
button-text: #fff,
32-
splitter-background: #000,
30+
context-menu-color-active: #fff,
31+
floating-pane-border-color: rgba(0, 0, 0, .26),
3332
flyout-shadow-color: rgba(0, 0, 0, .38),
34-
joystick-icon-color-active: #fff,
3533
joystick-border-color: #424242,
36-
tab-background-active: #212121,
34+
joystick-icon-color-active: #fff,
3735
pane-content-background: #212121,
38-
floating-pane-border-color: rgba(0, 0, 0, .26),
39-
context-menu-color-active: #fff,
36+
primary-color: #111,
37+
splitter-background: #000,
38+
tab-background-active: #212121,
39+
text-color: rgba(255, 255, 255, .7),
4040
)
4141
);
4242

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

Lines changed: 58 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,71 @@
66

77
/// Generates a light dock-manager schema.
88
/// @type {Map}
9-
/// @prop {Color} primary-color [#E5E7E9] -
10-
/// @prop {Color} accent-color [#fff] -
11-
/// @prop {Color} text-color [rgba(0, 0, 0, .72)] -
12-
/// @prop {Color} border-color [#F3F5F7] -
13-
/// @prop {Color} button-text [rgba(0, 0, 0, .72)] -
14-
/// @prop {Color} splitter-background [#D3D6D9] -
15-
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .08)] -
16-
/// @prop {Color} joystick-icon-color-active [#000] -
17-
/// @prop {Color} joystick-border-color [#D3D6D9] -
18-
/// @prop {Color} tab-background-active [#F3F5F7] -
19-
/// @prop {Color} pane-content-background [#F3F5F7] -
20-
/// @prop {Color} floating-pane-border-color [#fff] -
21-
/// @prop {Color} context-menu-color-active [#000] -
9+
/// @prop {Color} accent-color [#fff] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
10+
/// @prop {Color} border-color [#F3F5F7] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
11+
/// @prop {Color} button-text [rgba(0, 0, 0, .72)] - Sets the button text color.
12+
/// @prop {Color} context-menu-background [null] - Sets the background color for context menus.
13+
/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
14+
/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
15+
/// @prop {Color} context-menu-color-active [#000] - Sets the text color for active context menus.
16+
/// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
17+
/// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
18+
/// @prop {Color} floating-pane-border-color [#fff] - Sets the border color for floating panes.
19+
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .08)] - Sets the flyout shadow color.
20+
/// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
21+
/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
22+
/// @prop {Color} joystick-border-color [#D3D6D9] - Sets the border color of the joystick.
23+
/// @prop {Color} joystick-icon-color [#D3D6D9] - Sets the color for the joystick icons.
24+
/// @prop {Color} joystick-icon-color-active [#000] - Sets the color of the active joystick icons.
25+
/// @prop {Color} pane-content-background [#F3F5F7] - Sets the background color of the content panes.
26+
/// @prop {Color} pane-content-text [null] - Sets the text color of the content panes.
27+
/// @prop {Color} pane-header-background [null] - Sets the background color for pane headers.
28+
/// @prop {Color} pane-header-text [null] - Sets the text color for pane headers.
29+
/// @prop {Color} pinned-header-background [null] - Sets the background colors of pinned headers.
30+
/// @prop {Color} pinned-header-text [null] - Sets the text colors of pinned headers.
31+
/// @prop {Color} primary-color [#E5E7E9] - Sets the base dock manager color as well as the pane headers and tabs background colors.
32+
/// @prop {Color} splitter-background [#d3d6d9] - Sets the background color for the splitters.
33+
/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
34+
/// @prop {Color} tab-background [null] - Sets the background color for tabs.
35+
/// @prop {Color} tab-background-active [#F3F5F7] - Sets the background color for active tabs.
36+
/// @prop {Color} tab-border-color [null] - Sets the border color for tabs.
37+
/// @prop {Color} tab-border-color-active [null] - Sets the border color for active tabs.
38+
/// @prop {Color} tab-text [null] - Sets the text color for tabs.
39+
/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
40+
/// @prop {Color} text-color [rgba(0, 0, 0, .72)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
2241
$_light-dock-manager: (
23-
primary-color: #e5e7e9,
2442
accent-color: #fff,
25-
text-color: rgba(0, 0, 0, .72),
2643
border-color: #f3f5f7,
2744
button-text: rgba(0, 0, 0, .72),
28-
splitter-background: #d3d6d9,
45+
context-menu-background-active: null,
46+
context-menu-background: null,
47+
context-menu-color-active: #000,
48+
context-menu-color: null,
49+
dock-background: null,
50+
dock-text: null,
51+
floating-pane-border-color: #fff,
2952
flyout-shadow-color: rgba(0, 0, 0, .08),
30-
joystick-icon-color-active: #000,
53+
joystick-background-active: null,
54+
joystick-background: null,
3155
joystick-border-color: #d3d6d9,
32-
tab-background-active: #f3f5f7,
56+
joystick-icon-color: #d3d6d9,
57+
joystick-icon-color-active: #000,
3358
pane-content-background: #f3f5f7,
34-
floating-pane-border-color: #fff,
35-
context-menu-color-active: #000,
59+
pane-content-text: null,
60+
pane-header-background: null,
61+
pane-header-text: null,
62+
pinned-header-background: null,
63+
pinned-header-text: null,
64+
primary-color: #e5e7e9,
65+
splitter-background: #d3d6d9,
66+
splitter-handle: null,
67+
tab-background-active: #f3f5f7,
68+
tab-background: null,
69+
tab-border-color-active: null,
70+
tab-border-color: null,
71+
tab-text-active: null,
72+
tab-text: null,
73+
text-color: rgba(0, 0, 0, .72),
3674
);
3775

3876
/// Generates a fluent dock-manager schema.

0 commit comments

Comments
 (0)