Skip to content

Commit ac18963

Browse files
simeonoffsimeonoff
authored
Merge pull request #7514 from IgniteUI/SIvanova/improve-category-chart-schemas
style(category-chart): improve light & dark category chart schemas
2 parents 0ee0a0b + 16a1418 commit ac18963

File tree

3 files changed

+94
-26
lines changed

3 files changed

+94
-26
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66

77
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
88
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
9-
/// @param {Map} $width [null] - The width of the chart.
10-
/// @param {Map} $height [null] - The height of the chart.
119
/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
1210
/// @param {List} $brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
1311
/// @param {List} $marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
@@ -74,8 +72,6 @@
7472
$palette: $default-palette,
7573
$schema: $light-schema,
7674
77-
$width: null,
78-
$height: null,
7975
$margin: null,
8076
$brushes: null,
8177
$marker-brushes: null,
@@ -202,8 +198,6 @@
202198
$y-axis-title-margin,
203199
(
204200
name: $name,
205-
width: $width,
206-
height: $height,
207201
brushes: $brushes,
208202
marker-brushes: $marker-brushes,
209203
negative-brushes: $negative-brushes,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,76 @@
66
/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
77
////
88

9-
/// Generates a dark category chart schema.
9+
/// Generates the base dark category-chart schema.
1010
/// @type {Map}
11+
/// @prop {Color} title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart title.
12+
/// @prop {Color} subtitle-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart subtitle.
13+
/// @prop {Color} x-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the X-axis.
14+
/// @prop {Color} x-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the X-axis.
15+
/// @prop {Color} x-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the X-axis.
16+
/// @prop {Color} y-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the Y-axis.
17+
/// @prop {Color} y-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the Y-axis.
18+
/// @prop {Color} y-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the Y-axis.
19+
$_base-dark-category-chart: (
20+
title-text-color: (
21+
igx-color: ('grays', 400),
22+
hexrgba: #fff
23+
),
24+
25+
subtitle-text-color: (
26+
igx-color: ('grays', 400),
27+
hexrgba: #fff
28+
),
29+
30+
x-axis-label-text-color: (
31+
igx-color: ('grays', 400),
32+
hexrgba: #fff
33+
),
34+
35+
x-axis-title-text-color: (
36+
igx-color: ('grays', 400),
37+
hexrgba: #fff
38+
),
39+
40+
x-axis-tick-stroke: (
41+
igx-color: ('grays', 400),
42+
hexrgba: #fff
43+
),
44+
45+
y-axis-label-text-color: (
46+
igx-color: ('grays', 400),
47+
hexrgba: #fff
48+
),
49+
50+
y-axis-title-text-color: (
51+
igx-color: ('grays', 400),
52+
hexrgba: #fff
53+
),
54+
55+
y-axis-tick-stroke: (
56+
igx-color: ('grays', 400),
57+
hexrgba: #fff
58+
)
59+
);
60+
61+
/// Generates a dark category-chart schema based on a mix of $_light-category-chart and $_base-dark-category-chart
62+
/// @type {Map}
63+
/// @requires {function} extend
1164
/// @requires $_light-category-chart
65+
/// @requires $_base-dark-category-chart
1266
/// @see $default-palette
13-
$_dark-category-chart: extend($_light-category-chart);
67+
$_dark-category-chart: extend($_light-category-chart, $_base-dark-category-chart);
1468

15-
/// Generates a dark fluent category-chart schema.
69+
/// Generates a dark fluent category-chart schema based on a mix of $_fluent-category-chart and $_base-dark-category-chart
1670
/// @type {Map}
1771
/// @requires {function} extend
1872
/// @requires $_fluent-category-chart
19-
$_dark-fluent-category-chart: extend($_fluent-category-chart);
73+
/// @requires $_base-dark-category-chart
74+
$_dark-fluent-category-chart: extend($_fluent-category-chart, $_base-dark-category-chart);
2075

21-
/// Generates a bootstrap category-chart schema.
76+
/// Generates a bootstrap category-chart schema based on a mix of $_bootstrap-category-chart and $_base-dark-category-chart
2277
/// @type {Map}
2378
/// @requires {function} extend
2479
/// @requires $_bootstrap-category-chart
25-
$_dark-bootstrap-category-chart: extend($_bootstrap-category-chart);
80+
/// @requires $_base-dark-category-chart
81+
$_dark-bootstrap-category-chart: extend($_bootstrap-category-chart, $_base-dark-category-chart);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88

99
/// Generates a light category chart schema.
1010
/// @type {Map}
11-
/// @property {Map} width [null] - The width of the chart.
12-
/// @property {Map} height [null] - The height of the chart.
1311
/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
1412
/// @property {List} brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
1513
/// @property {List} marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
@@ -66,10 +64,6 @@
6664
/// @see $default-palette
6765
$_light-category-chart: extend(
6866
(
69-
'width': null,
70-
71-
'height': null,
72-
7367
'margin': (
7468
expand-shorthand: (null)
7569
),
@@ -93,7 +87,10 @@ $_light-category-chart: extend(
9387
map-keys-prefix: 'title'
9488
),
9589

96-
'title-text-color': null,
90+
'title-text-color': (
91+
igx-color: ('grays', 700),
92+
hexrgba: #fff
93+
),
9794

9895
'title-text-style': null,
9996

@@ -102,7 +99,10 @@ $_light-category-chart: extend(
10299
map-keys-prefix: 'subtitle'
103100
),
104101

105-
'subtitle-text-color': null,
102+
'subtitle-text-color': (
103+
igx-color: ('grays', 700),
104+
hexrgba: #fff
105+
),
106106

107107
'subtitle-text-style': null,
108108

@@ -117,7 +117,10 @@ $_light-category-chart: extend(
117117
map-keys-prefix: 'x-axis-label'
118118
),
119119

120-
'x-axis-label-text-color': null,
120+
'x-axis-label-text-color': (
121+
igx-color: ('grays', 700),
122+
hexrgba: #fff
123+
),
121124

122125
'x-axis-label-text-style': null,
123126

@@ -139,7 +142,10 @@ $_light-category-chart: extend(
139142

140143
'x-axis-tick-length': null,
141144

142-
'x-axis-tick-stroke': null,
145+
'x-axis-tick-stroke': (
146+
igx-color: ('grays', 700),
147+
hexrgba: #fff
148+
),
143149

144150
'x-axis-tick-stroke-thickness': null,
145151

@@ -150,7 +156,10 @@ $_light-category-chart: extend(
150156
map-keys-prefix: 'x-axis-title'
151157
),
152158

153-
'x-axis-title-text-color': null,
159+
'x-axis-title-text-color': (
160+
igx-color: ('grays', 700),
161+
hexrgba: #fff
162+
),
154163

155164
'x-axis-title-text-style': null,
156165

@@ -159,7 +168,10 @@ $_light-category-chart: extend(
159168
map-keys-prefix: 'y-axis-label'
160169
),
161170

162-
'y-axis-label-text-color': null,
171+
'y-axis-label-text-color': (
172+
igx-color: ('grays', 700),
173+
hexrgba: #fff
174+
),
163175

164176
'y-axis-label-text-style': null,
165177

@@ -186,13 +198,19 @@ $_light-category-chart: extend(
186198
map-keys-prefix: 'y-axis-title'
187199
),
188200

189-
'y-axis-title-text-color': null,
201+
'y-axis-title-text-color': (
202+
igx-color: ('grays', 700),
203+
hexrgba: #fff
204+
),
190205

191206
'y-axis-title-text-style': null,
192207

193208
'y-axis-tick-length': null,
194209

195-
'y-axis-tick-stroke': null,
210+
'y-axis-tick-stroke': (
211+
igx-color: ('grays', 700),
212+
hexrgba: #fff
213+
),
196214

197215
'y-axis-tick-stroke-thickness': null
198216
)

0 commit comments

Comments
 (0)