Skip to content

Commit b3eab5e

Browse files
author
Stefan Ivanov
committed
Initial update to themes to use palettes
1 parent 050239d commit b3eab5e

File tree

2 files changed

+114
-35
lines changed

2 files changed

+114
-35
lines changed

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,29 +46,35 @@ $_dark-dock-manager: extend(
4646
/// @requires $_fluent-dock-manager
4747
$_dark-fluent-dock-manager: extend(
4848
$_fluent-dock-manager, (
49+
active-color: (
50+
igx-color: primary,
51+
),
52+
background-color: #2a2a2a,
4953
border-color: #222,
5054
button-text: #fff,
5155
context-menu-background-active: #111,
5256
context-menu-color-active: #fff,
5357
context-menu-background: #333,
5458
context-menu-color: #fff,
5559
dock-background: #2a2a2a,
56-
floating-pane-border-color: rgba(0, 0, 0, 0),
60+
floating-pane-border-color: transparent,
5761
joystick-background-active: #111,
5862
joystick-background: #333,
59-
joystick-border-color: rgba(0, 0, 0, 0),
63+
joystick-border-color: transparent,
6064
joystick-icon-color: #fff,
6165
joystick-icon-color-active: #fff,
6266
pane-content-background: #222,
67+
pane-header-backround: #2a2a2a,
6368
pinned-header-background: #2a2a2a,
64-
primary-color: #2a2a2a,
6569
splitter-background: #151515,
6670
splitter-handle: #000,
6771
tab-background-active: #222,
6872
tab-background: #222,
6973
tab-border-color-active: #222,
7074
tab-border-color: #222,
71-
tab-text-active: #217346,
75+
tab-text-active: (
76+
igx-color: primary,
77+
),
7278
tab-text: #fff,
7379
text-color: #fff,
7480
)
@@ -94,6 +100,7 @@ $_dark-bootstrap-dock-manager: extend(
94100
joystick-icon-color: #007bff,
95101
joystick-icon-color-active: #fff,
96102
pane-content-background: #242939,
103+
pane-header-background: #111,
97104
pinned-header-background: #111,
98105
primary-color: #111,
99106
splitter-background: #1a1e29,
@@ -107,4 +114,3 @@ $_dark-bootstrap-dock-manager: extend(
107114
text-color: #fff,
108115
)
109116
);
110-

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

Lines changed: 103 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,14 @@
4040
/// @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.
4141
$_light-dock-manager: (
4242
accent-color: #fff,
43+
active-color: (
44+
igx-color: primary,
45+
),
46+
background-color: #e5e7e9,
4347
border-color: #f3f5f7,
44-
button-text: rgba(0, 0, 0, .72),
48+
button-text: (
49+
igx-color: (grays, 800),
50+
),
4551
context-menu-background-active: null,
4652
context-menu-background: null,
4753
context-menu-color-active: #000,
@@ -61,7 +67,6 @@ $_light-dock-manager: (
6167
pane-header-text: null,
6268
pinned-header-background: null,
6369
pinned-header-text: null,
64-
primary-color: #e5e7e9,
6570
splitter-background: #d3d6d9,
6671
splitter-handle: null,
6772
tab-background-active: #f3f5f7,
@@ -70,7 +75,9 @@ $_light-dock-manager: (
7075
tab-border-color: null,
7176
tab-text-active: null,
7277
tab-text: null,
73-
text-color: rgba(0, 0, 0, .72),
78+
text-color: (
79+
igx-color: (grays, 800),
80+
),
7481
);
7582

7683
/// Generates a fluent dock-manager schema.
@@ -79,28 +86,81 @@ $_light-dock-manager: (
7986
/// @requires $_light-dock-manager
8087
$_fluent-dock-manager: extend(
8188
$_light-dock-manager, (
82-
border-color: #fff,
83-
button-text: rgba(0, 0, 0, .74),
84-
context-menu-background-active: #EBEBEB,
85-
context-menu-color-active: rgba(0, 0, 0, .74),
86-
context-menu-color: rgba(0, 0, 0, .74),
87-
dock-background: #fff,
88-
floating-pane-border-color: #BDBDBD,
89-
joystick-background-active: #EBEBEB,
90-
joystick-border-color: #BDBDBD,
91-
joystick-icon-color: rgba(0, 0, 0, .74),
92-
joystick-icon-color-active: rgba(0, 0, 0, .74),
93-
pane-content-background: #fff,
94-
primary-color: #fff,
95-
splitter-background: #f2f2f2,
89+
active-color: (
90+
igx-color: primary,
91+
),
92+
background-color: (
93+
igx-color: surface,
94+
),
95+
border-color: (
96+
igx-color: surface,
97+
),
98+
button-text: (
99+
igx-color: (grays, 800),
100+
),
101+
context-menu-background-active: (
102+
igx-color: (grays, 200),
103+
hexrgba: (),
104+
),
105+
context-menu-color-active: (
106+
igx-color: (grays, 800),
107+
),
108+
context-menu-color: (
109+
igx-color: (grays, 800),
110+
),
111+
dock-background: (
112+
igx-color: surface,
113+
),
114+
floating-pane-border-color: (
115+
igx-color: (grays, 400),
116+
hexrgba: (),
117+
),
118+
joystick-background-active: (
119+
igx-color: (grays, 200),
120+
hexrgba: (),
121+
),
122+
joystick-border-color: (
123+
igx-color: (grays, 400),
124+
hexrgba: (),
125+
),
126+
joystick-icon-color: (
127+
igx-color: (grays, 800),
128+
),
129+
joystick-icon-color-active: (
130+
igx-color: (grays, 800),
131+
),
132+
pane-content-background: (
133+
igx-color: surface,
134+
),
135+
pane-header-background: (
136+
igx-color: surface,
137+
),
138+
splitter-background: (
139+
igx-color: (grays, 100),
140+
hexrgba: (),
141+
),
96142
splitter-handle: #ccc,
97-
tab-background-active: #fff,
98-
tab-background: #fff,
99-
tab-border-color-active: #fff,
100-
tab-border-color: #fff,
101-
tab-text-active: #2b579a,
102-
tab-text: rgba(0, 0, 0, .62),
103-
text-color: rgba(0, 0, 0, .74),
143+
tab-background-active: (
144+
igx-color: surface,
145+
),
146+
tab-background: (
147+
igx-color: surface,
148+
),
149+
tab-border-color-active: (
150+
igx-color: surface,
151+
),
152+
tab-border-color: (
153+
igx-color: surface,
154+
),
155+
tab-text-active: (
156+
igx-color: primary,
157+
),
158+
tab-text: (
159+
igx-color: (grays, 700)
160+
),
161+
text-color: (
162+
igx-color: (grays, 800)
163+
),
104164
)
105165
);
106166

@@ -112,18 +172,29 @@ $_fluent-dock-manager: extend(
112172
$_bootstrap-dock-manager: extend(
113173
$_light-dock-manager, (
114174
border-color: #fff,
115-
button-text: #007bff,
116-
context-menu-background-active: #007bff,
175+
button-text: (
176+
igx-color: primary,
177+
),
178+
context-menu-background-active: (
179+
igx-color: primary,
180+
),
117181
context-menu-color-active: #fff,
118-
context-menu-color: #007bff,
182+
context-menu-color: (
183+
igx-color: primary,
184+
),
119185
dock-background: #f8f9fa,
120186
floating-pane-border-color: #E0E0E0,
121-
joystick-background-active: #007bff,
187+
joystick-background-active: (
188+
igx-color: primary,
189+
),
122190
joystick-border-color: #E0E0E0,
123-
joystick-icon-color: #007bff,
191+
joystick-icon-color: (
192+
igx-color: primary,
193+
),
124194
joystick-icon-color-active: #fff,
125195
pane-content-background: #fff,
126196
pinned-header-background: #f8f9fa,
197+
pane-header-background: #f8f9fa,
127198
primary-color: #f8f9fa,
128199
splitter-background: #e9ecef,
129200
splitter-handle: #bdc6d0,
@@ -132,7 +203,9 @@ $_bootstrap-dock-manager: extend(
132203
tab-border-color-active: rgba(0, 0, 0, .12),
133204
tab-border-color: #fff,
134205
tab-text-active: rgba(0, 0, 0, .74),
135-
tab-text: #007bff,
206+
tab-text: (
207+
igx-color: primary,
208+
),
136209
text-color: rgba(0, 0, 0, .74),
137210
)
138211
);

0 commit comments

Comments
 (0)