Skip to content

Commit 0c49ab8

Browse files
mstijakmstijak
committed
...
1 parent 6c924af commit 0c49ab8

File tree

19 files changed

+598
-447
lines changed

19 files changed

+598
-447
lines changed

‎homedocs/src/examples/charts/OverviewLineChartExample.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@ import { Chart, Gridlines, Legend, LineGraph, NumericAxis } from "cx/charts";
55
export default (
66
<div>
77
<Legend.Scope>
8-
<Svg style="height: 200px; border: 1px solid #ddd">
8+
<Svg style="height: 200px;">
99
<Chart
1010
margin="10 20 30 50"
1111
axes={{
1212
x: { type: NumericAxis },
1313
y: { type: NumericAxis, vertical: true },
1414
}}
1515
>
16-
<Rectangle fill="white" />
1716
<Gridlines />
1817
<LineGraph
1918
name="Line 1"

‎homedocs/src/examples/theme-editor/VariableEditor.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const ColorSwatch = createFunctionalComponent(({ value }: ColorSwatchProps) => {
4343
dismissOnFocusOut
4444
>
4545
<ColorPicker
46+
mod="dropdown"
4647
value={state.value}
4748
onColorClick={(e, { store }) => {
4849
store.set(state.open, false);

‎homedocs/src/examples/theme-editor/data.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1119,6 +1119,32 @@ const variableMetadata: Array<{
11191119
type: "text",
11201120
category: "sliders",
11211121
},
1122+
1123+
// Charts
1124+
{
1125+
key: "chartAxisLineColor",
1126+
label: "Axis line color",
1127+
type: "color",
1128+
category: "charts",
1129+
},
1130+
{
1131+
key: "chartAxisTickColor",
1132+
label: "Axis tick color",
1133+
type: "color",
1134+
category: "charts",
1135+
},
1136+
{
1137+
key: "chartAxisLabelColor",
1138+
label: "Axis label color",
1139+
type: "color",
1140+
category: "charts",
1141+
},
1142+
{
1143+
key: "chartGridlineColor",
1144+
label: "Gridline color",
1145+
type: "color",
1146+
category: "charts",
1147+
},
11221148
];
11231149

11241150
const categoryMetadata = [
@@ -1138,6 +1164,7 @@ const categoryMetadata = [
11381164
{ id: "tooltips", name: "Tooltips", icon: "message-circle", group: "Components" },
11391165
{ id: "menu", name: "Menu", icon: "menu", group: "Components" },
11401166
{ id: "dropdowns", name: "Dropdowns", icon: "drop-down", group: "Components" },
1167+
{ id: "charts", name: "Charts", icon: "bar-chart", group: "Charts" },
11411168
];
11421169

11431170
export const categoryGroups = [
@@ -1149,6 +1176,10 @@ export const categoryGroups = [
11491176
name: "Components",
11501177
categories: categoryMetadata.filter((c) => c.group === "Components"),
11511178
},
1179+
{
1180+
name: "Charts",
1181+
categories: categoryMetadata.filter((c) => c.group === "Charts"),
1182+
},
11521183
];
11531184

11541185
/**

‎homedocs/src/examples/theme-editor/examples.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,13 +309,13 @@ export const examples: ExampleDef[] = [
309309
{
310310
id: "line-chart",
311311
name: "Line Chart",
312-
categories: ["colors"],
312+
categories: ["colors", "charts"],
313313
component: () => import("../charts/OverviewLineChartExample"),
314314
},
315315
{
316316
id: "pie-chart",
317317
name: "Pie Chart",
318-
categories: ["colors"],
318+
categories: ["colors", "charts"],
319319
component: () => import("../charts/OverviewPieChartExample"),
320320
},
321321

‎packages/cx-theme-variables/src/ThemeVariables.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,13 @@ export interface ThemeVariables {
191191
monthPickerYearFontWeight: string;
192192
monthPickerYearColor: string;
193193

194+
chartAxisLineColor: string;
195+
chartAxisTickColor: string;
196+
chartAxisLabelColor: string;
197+
chartGridlineColor: string;
198+
199+
colorPickerBorderWidth: string;
200+
194201
calendarBorderWidth: string;
195202
calendarBackgroundColor: string;
196203
calendarPadding: string;
@@ -395,6 +402,13 @@ export const variableMap: Record<keyof ThemeVariables, string> = {
395402
monthPickerYearFontWeight: "--cx-monthpicker-year-font-weight",
396403
monthPickerYearColor: "--cx-monthpicker-year-color",
397404

405+
chartAxisLineColor: "--cx-chart-axis-line-color",
406+
chartAxisTickColor: "--cx-chart-axis-tick-color",
407+
chartAxisLabelColor: "--cx-chart-axis-label-color",
408+
chartGridlineColor: "--cx-chart-gridline-color",
409+
410+
colorPickerBorderWidth: "--cx-colorpicker-border-width",
411+
398412
calendarBorderWidth: "--cx-calendar-border-width",
399413
calendarBackgroundColor: "--cx-calendar-background-color",
400414
calendarPadding: "--cx-calendar-padding",

‎packages/cx-theme-variables/src/index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,12 @@ $mod: map.get($cx-besm, mod);
4444
}
4545
}
4646

47+
@if (cx-included("cx/widgets/ColorPicker")) {
48+
.#{$block}colorpicker.#{$mod}dropdown {
49+
--cx-colorpicker-border-width: 0;
50+
}
51+
}
52+
4753
@if (cx-included("cx/widgets/List")) {
4854
.#{$block}list.#{$mod}bordered,
4955
.#{$block}list.#{$mod}dropdown {

‎packages/cx-theme-variables/src/index.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,20 @@ export function applyThemeOverrides() {
3030
},
3131
});
3232

33+
Localization.override("cx/widgets/MonthField", {
34+
dropdownOptions: {
35+
arrow: true,
36+
offset: 5,
37+
},
38+
});
39+
40+
Localization.override("cx/widgets/ColorField", {
41+
dropdownOptions: {
42+
arrow: true,
43+
offset: 5,
44+
},
45+
});
46+
3347
// Set all MsgBox buttons to flat-primary
3448
Localization.override("cx/widgets/MsgBox", {
3549
buttonMod: "flat-primary",

‎packages/cx-theme-variables/src/presets/default.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,13 @@ export const defaultPreset: ThemeVariables = {
205205
monthPickerYearFontWeight: "500",
206206
monthPickerYearColor: "var(--cx-theme-primary-color)",
207207

208+
chartAxisLineColor: "rgba(128, 128, 128, 0.2)",
209+
chartAxisTickColor: "rgba(128, 128, 128, 0.3)",
210+
chartAxisLabelColor: "currentColor",
211+
chartGridlineColor: "rgba(128, 128, 128, 0.15)",
212+
213+
colorPickerBorderWidth: "var(--cx-input-border-width)",
214+
208215
calendarBorderWidth: "var(--cx-input-border-width)",
209216
calendarBackgroundColor: "white",
210217
calendarPadding: "var(--cx-input-padding-y)",

‎packages/cx-theme-variables/src/variables.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ $cx-theme-box-padding: var(--cx-input-padding-y) var(--cx-input-padding-x);
6363
$cx-default-dropdown-arrow-shadow-color: var(--cx-dropdown-arrow-shadow-color) !default,
6464
$cx-default-dropdown-arrow-shadow-size: var(--cx-dropdown-arrow-shadow-size) !default,
6565
$cx-default-dropdown-arrow-shadow-offset: var(--cx-dropdown-arrow-shadow-offset) !default,
66+
$cx-default-dropdown-background-color: var(--cx-theme-surface-color) !default,
6667

6768
// -------------------------------------------------------------------------
6869
// Tooltip
@@ -155,6 +156,7 @@ $cx-theme-box-padding: var(--cx-input-padding-y) var(--cx-input-padding-x);
155156
//$cx-default-input-right-tool-right: 6px !default,
156157
$cx-default-input-tool-size: var(--cx-input-line-height) !default,
157158
$cx-default-input-left-tool-size: var(--cx-input-line-height) !default,
159+
$cx-default-input-left-tool-border-radius: calc(var(--cx-theme-border-radius) * 0.5) !default,
158160
$cx-default-clear-size: var(--cx-input-line-height) !default,
159161
$cx-use-box-line-height-fix: false !default,
160162

@@ -238,7 +240,7 @@ $cx-theme-box-padding: var(--cx-input-padding-y) var(--cx-input-padding-x);
238240
// -------------------------------------------------------------------------
239241
// ColorPicker
240242
// -------------------------------------------------------------------------
241-
$cx-default-colorpicker-border-width: 1px !default,
243+
$cx-default-colorpicker-border-width: var(--cx-colorpicker-border-width) !default,
242244
$cx-default-colorpicker-box-shadow: none !default,
243245
$cx-default-colorpicker-font-family: var(--cx-theme-font-family) !default,
244246
$cx-default-colorpicker-background-color: var(--cx-theme-background-color)
@@ -331,8 +333,14 @@ $cx-theme-box-padding: var(--cx-input-padding-y) var(--cx-input-padding-x);
331333
$cx-default-list-item-padding: var(--cx-list-item-padding-y) var(--cx-list-item-padding-x) !default,
332334

333335
// -------------------------------------------------------------------------
334-
// Chart palette
336+
// Chart
335337
// -------------------------------------------------------------------------
338+
$cx-default-chart-axis-line-color: var(--cx-chart-axis-line-color) !default,
339+
$cx-default-chart-axis-tick-color: var(--cx-chart-axis-tick-color) !default,
340+
$cx-default-chart-axis-label-color: var(--cx-chart-axis-label-color) !default,
341+
$cx-default-chart-gridline-color: var(--cx-chart-gridline-color) !default,
342+
343+
// Chart palette
336344
$cx-default-palette-fill-whiten: 30% !default,
337345
$cx-default-palette-fill-hover-whiten: 50% !default,
338346
$cx-default-palette-fill-selected-whiten: 0% !default,

‎packages/cx-theme-variables/src/widgets/form/Calendar.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,9 @@ $cx-calendar-day-state-style-map: cx-deep-map-merge(
5656
// box-shadow: inset 0 0 0 1px var(--cx-theme-primary-color),
5757
// position: relative,
5858
),
59+
outside: (
60+
color: inherit,
61+
opacity: 0.4,
62+
),
5963
)
6064
);

0 commit comments

Comments
 (0)