Skip to content

Commit 05f88c8

Browse files
AlexKlimenkovAlexKlimenkov
authored
Merge pull request #55 from AlexKlimenkov/master
[dev] add css variables list
2 parents 5e95208 + 5ebdc7b commit 05f88c8

5 files changed

Lines changed: 215 additions & 2 deletions

File tree

‎docs/guides/appearance-and-styling.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ sidebar_label: "Appearance and Styling"
88
- [Skins](guides/skins.md)
99
- [Formatting Labels, Dates, Styles](guides/templates.md)
1010
- [Skins Customization](guides/custom-skins.md)
11+
- [Theme CSS Variables](guides/theme-css-variables.md).
1112
- [Popup Messages and Modal Boxes](guides/popups-and-modals.md)

‎docs/guides/custom-skins.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ Key CSS Variables:
7979

8080
~~~
8181

82-
All variables can be found in the **codebase/sources/less/src/themes/variables.less** file of the package.
82+
All variables can be found in the **codebase/sources/less/src/themes/variables.less** file of the package. You can also view that in Github repo of the Standard edition of the Scheduler at [https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/less/src/themes/variables.less](https://github.com/DHTMLX/scheduler/blob/master/codebase/sources/less/src/themes/variables.less).
83+
84+
For a concise reference of the main theme variables and their default inheritance, see [Theme CSS Variables](guides/theme-css-variables.md).
8385

8486
## How to customize skins
8587

‎docs/guides/theme-css-variables.md‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
title: "Theme CSS Variables"
3+
sidebar_label: "Theme CSS Variables"
4+
---
5+
6+
# Theme CSS Variables
7+
8+
This page lists the main Scheduler theme CSS variables that can be useful when customizing skins.
9+
The defaults are defined in `scheduler/sources/css/src/themes/variables.less`; other theme files override part of this list.
10+
For examples of overriding these variables in an application or a custom skin, see [Skins Customization](guides/custom-skins.md).
11+
12+
:::tip
13+
Start with the base typography, color, container, popup, border, radius, spacing, and event variables. Variables described as "Defaults to" or "Derived from" inherit from another CSS variable by default; override them directly only when that part of Scheduler should intentionally differ from the rest of the theme.
14+
:::
15+
16+
## Theme identity
17+
18+
| Variable | Description |
19+
| --- | --- |
20+
| `--dhx-scheduler-theme` | Stores the active Scheduler theme name used by Scheduler to detect CSS-variable based skins. |
21+
22+
## Typography
23+
24+
| Variable | Description |
25+
| --- | --- |
26+
| `--dhx-scheduler-font-family` | Sets the main font family for the Scheduler container and inherited UI elements. |
27+
| `--dhx-scheduler-font-size` | Sets the base font size used by Scheduler text and derived typography tokens. |
28+
| `--dhx-scheduler-heading-font-size` | Sets the font size for prominent headings such as the current date label and popup titles; derived from `--dhx-scheduler-font-size` by default. |
29+
| `--dhx-scheduler-heading-font-weight` | Sets the font weight for Scheduler headings and section labels. |
30+
| `--dhx-scheduler-important-font-size` | Sets the font size for emphasized text such as toolbar and quick-info date labels; defaults to `--dhx-scheduler-font-size`. |
31+
| `--dhx-scheduler-important-line-height` | Sets the line height for emphasized text blocks. |
32+
| `--dhx-scheduler-important-font-weight` | Sets the font weight for emphasized text and navigation labels. |
33+
| `--dhx-scheduler-regular-font-size` | Sets the regular body text size for popups, tooltips, and general content; defaults to `--dhx-scheduler-font-size`. |
34+
| `--dhx-scheduler-regular-font-weight` | Sets the regular body text weight for Scheduler content. |
35+
| `--dhx-scheduler-regular-line-height` | Sets the regular body text line height. |
36+
| `--dhx-scheduler-caption-font-size` | Sets the compact caption text size used by scales, month events, and event titles; derived from `--dhx-scheduler-font-size` by default. |
37+
| `--dhx-scheduler-caption-font-weight` | Sets the compact caption text weight used by scales and month events. |
38+
| `--dhx-scheduler-caption-line-height` | Sets the compact caption text line height. |
39+
40+
## Base colors
41+
42+
| Variable | Description |
43+
| --- | --- |
44+
| `--dhx-scheduler-base-colors-primary` | Sets the main accent color for active controls, datepicker highlights, and default action styling. |
45+
| `--dhx-scheduler-base-colors-primary-hover` | Sets the hover color for primary controls and datepicker hover states. |
46+
| `--dhx-scheduler-base-colors-primary-active` | Sets the active or pressed color for primary controls. |
47+
| `--dhx-scheduler-base-colors-primary-lighter` | Sets the light accent fill used by outline button hover states and subtle highlights. |
48+
| `--dhx-scheduler-base-colors-warning` | Sets the warning color used by warning messages. |
49+
| `--dhx-scheduler-base-colors-error` | Sets the danger color used by delete buttons, error messages, and related states. |
50+
| `--dhx-scheduler-base-colors-error-hover` | Sets the hover color for danger controls. |
51+
| `--dhx-scheduler-base-colors-error-active` | Sets the active or pressed color for danger controls. |
52+
| `--dhx-scheduler-base-colors-error-lighter` | Sets the light danger fill used by danger-outline hover states. |
53+
| `--dhx-scheduler-base-colors-error-text` | Sets the text color for controls with an error-colored background. |
54+
| `--dhx-scheduler-base-colors-success` | Defines the semantic success color token in the theme palette. |
55+
| `--dhx-scheduler-base-colors-white` | Sets the white color token used by controls and selected datepicker cells. |
56+
| `--dhx-scheduler-base-colors-select` | Sets the selected or highlighted background color for current dates, selected rows, and alternating grid rows. |
57+
| `--dhx-scheduler-base-colors-hover-color` | Defines a shared hover background token in the theme palette. |
58+
| `--dhx-scheduler-base-colors-border` | Sets the base border color for grid lines, scales, and form controls. |
59+
| `--dhx-scheduler-base-colors-icons` | Sets the default icon color. |
60+
| `--dhx-scheduler-base-colors-icons-hover` | Sets the icon color for hovered icon buttons. |
61+
| `--dhx-scheduler-base-colors-icons-active` | Sets the icon color for active icon buttons. |
62+
| `--dhx-scheduler-base-colors-disabled` | Sets the disabled background color for controls and blocked time areas. |
63+
| `--dhx-scheduler-base-colors-readonly` | Sets the text color for read-only values in the lightbox; defaults to `--dhx-scheduler-base-colors-icons`. |
64+
| `--dhx-scheduler-base-colors-text-light` | Sets the secondary text color used by navigation, scales, and sort indicators. |
65+
| `--dhx-scheduler-base-colors-text-base` | Sets the main text color token used by the Scheduler container and derived elements. |
66+
| `--dhx-scheduler-base-colors-background` | Sets the main background color token used by the Scheduler container. |
67+
68+
## Container and popup surfaces
69+
70+
| Variable | Description |
71+
| --- | --- |
72+
| `--dhx-scheduler-container-background` | Sets the Scheduler container background; defaults to `--dhx-scheduler-base-colors-background`. |
73+
| `--dhx-scheduler-container-color` | Sets the Scheduler container text color; defaults to `--dhx-scheduler-base-colors-text-base`. |
74+
| `--dhx-scheduler-popup-background` | Sets the background for popups, tooltips, quick info, datepickers, and lightbox-derived surfaces; defaults to `--dhx-scheduler-container-background`. |
75+
| `--dhx-scheduler-popup-color` | Sets the text color for popups, tooltips, quick info, datepickers, and lightbox-derived surfaces; defaults to `--dhx-scheduler-container-color`. |
76+
| `--dhx-scheduler-popup-border` | Sets the border for popup-style surfaces. |
77+
| `--dhx-scheduler-popup-border-radius` | Sets the border radius for popup-style surfaces; defaults to `--dhx-scheduler-border-radius`. |
78+
79+
## Layout, borders, and shadows
80+
81+
| Variable | Description |
82+
| --- | --- |
83+
| `--dhx-scheduler-base-module` | Sets the base sizing unit used for compact dimensions such as event padding and resize handles. |
84+
| `--dhx-scheduler-base-padding` | Sets the base spacing unit used across Scheduler controls, scales, month cells, and forms. |
85+
| `--dhx-scheduler-border-radius` | Sets the common border radius for Scheduler controls, events, tabs, and framed UI elements; defaults to `--dhx-scheduler-base-module`. |
86+
| `--dhx-scheduler-box-shadow-s` | Sets the small shadow used by quick info, datepickers, and selected event menus. |
87+
| `--dhx-scheduler-box-shadow-m` | Sets the medium shadow used by tooltips, minicalendars, global tips, and info messages. |
88+
| `--dhx-scheduler-box-shadow-l` | Sets the large shadow used by modal boxes. |
89+
| `--dhx-scheduler-toolbar-height` | Sets the minimum height of the Scheduler navigation line. |
90+
| `--dhx-scheduler-navline-font-color` | Sets the text color of the navigation line; defaults to `--dhx-scheduler-base-colors-text-light`. |
91+
| `--dhx-scheduler-default-border` | Sets the default border used for data areas, scale cells, month cells, and list rows; derived from `--dhx-scheduler-base-colors-border` by default. |
92+
| `--dhx-scheduler-header-border` | Sets the border used by header and scale areas; defaults to `--dhx-scheduler-default-border`. |
93+
| `--dhx-scheduler-halfhour-border` | Sets the border style for inner time slots between full-hour rows; derived from `--dhx-scheduler-base-colors-border` by default. |
94+
95+
## Events
96+
97+
| Variable | Description |
98+
| --- | --- |
99+
| `--dhx-scheduler-event-text-primary` | Sets the default text color token for event text placed over the default event background. |
100+
| `--dhx-scheduler-event-blue` | Sets the predefined blue event background gradient. |
101+
| `--dhx-scheduler-event-green` | Sets the predefined green event background gradient. |
102+
| `--dhx-scheduler-event-violet` | Sets the predefined violet event background gradient. |
103+
| `--dhx-scheduler-event-yellow` | Sets the predefined yellow event background gradient. |
104+
| `--dhx-scheduler-event-background` | Sets the default background for rendered events in day, week, timeline, agenda, year, and map views; defaults to `--dhx-scheduler-event-blue`. |
105+
| `--dhx-scheduler-event-border` | Sets the border for rendered event boxes and bars. |
106+
| `--dhx-scheduler-event-color` | Sets the default text color for rendered event boxes and bars; defaults to `--dhx-scheduler-event-text-primary`. |
107+
| `--dhx-scheduler-event-marker-color` | Sets the color of small event markers used in compact calendar cells; defaults to `--dhx-scheduler-event-background`. |
108+
| `--dhx-scheduler-event-title-font-size` | Sets the font size for the event title/header line; defaults to `--dhx-scheduler-caption-font-size`. |
109+
| `--dhx-scheduler-event-title-line-height` | Sets the line height for the event title/header line; defaults to `--dhx-scheduler-caption-line-height`. |
110+
| `--dhx-scheduler-event-text-font-size` | Sets the font size for event body text; defaults to `--dhx-scheduler-regular-font-size`. |
111+
| `--dhx-scheduler-event-text-line-height` | Sets the line height for event body text; defaults to `--dhx-scheduler-regular-line-height`. |
112+
| `--dhx-scheduler-event-text-font-weight` | Sets the font weight for event body text; defaults to `--dhx-scheduler-regular-font-weight`. |
113+
| `--dhx-scheduler-event-bar-font-size` | Sets the compact font size used by event bars and small events; defaults to `--dhx-scheduler-caption-font-size`. |
114+
| `--dhx-scheduler-event-bar-line-height` | Sets the compact line height used by event bars and small events; defaults to `--dhx-scheduler-caption-line-height`. |
115+
| `--dhx-scheduler-event-menu-background` | Sets the background for the selected event action menu; defaults to `--dhx-scheduler-popup-background`. |
116+
| `--dhx-scheduler-event-menu-color` | Sets the text and icon color for the selected event action menu; defaults to `--dhx-scheduler-base-colors-primary`. |
117+
118+
:::note
119+
Per-event `color` and `textColor` values override `--dhx-scheduler-event-background` and `--dhx-scheduler-event-color` through inline CSS variables.
120+
:::
121+
122+
## Lightbox and form controls
123+
124+
| Variable | Description |
125+
| --- | --- |
126+
| `--dhx-scheduler-control-height` | Sets the default height of buttons, inputs, and select controls. |
127+
| `--dhx-scheduler-checkbox-height` | Sets the height of checkbox-style inputs in the lightbox. |
128+
| `--dhx-scheduler-lightbox_font-family` | Sets the font family used inside the lightbox; defaults to `--dhx-scheduler-font-family`. |
129+
| `--dhx-scheduler-lightbox-font-size` | Sets the default font size used inside the lightbox; defaults to `--dhx-scheduler-important-font-size`. |
130+
| `--dhx-scheduler-lightbox-font-weight` | Sets the default font weight used inside the lightbox; defaults to `--dhx-scheduler-important-font-weight`. |
131+
| `--dhx-scheduler-lightbox-background` | Sets the lightbox background color; defaults to `--dhx-scheduler-popup-background`. |
132+
| `--dhx-scheduler-lightbox-border` | Sets the outer lightbox border; defaults to `--dhx-scheduler-popup-border`. |
133+
| `--dhx-scheduler-lightbox-control-border` | Sets the border for lightbox inputs, selects, and textareas; defaults to `--dhx-scheduler-default-border`. |
134+
| `--dhx-scheduler-lightbox-color` | Sets the lightbox text color; defaults to `--dhx-scheduler-popup-color`. |
135+
| `--dhx-scheduler-lightbox-title-background` | Sets the lightbox title bar background; defaults to `--dhx-scheduler-base-colors-select`. |
136+
| `--dhx-scheduler-lightbox-title-color` | Sets the lightbox title bar text color; defaults to `--dhx-scheduler-lightbox-color`. |
137+
| `--dhx-scheduler-lightbox-title-font-size` | Sets the lightbox title font size; defaults to `--dhx-scheduler-heading-font-size`. |
138+
| `--dhx-scheduler-lightbox-max-width` | Sets the default maximum width of the lightbox. |
139+
| `--dhx-scheduler-lightbox-wide-max-width` | Sets the maximum width of the wide lightbox layout. |
140+
| `--dhx-scheduler-lightbox-width` | Sets the active lightbox width token used by the default and wide lightbox layouts; defaults to `--dhx-scheduler-lightbox-max-width`. |
141+
142+
## Scales and calendar views
143+
144+
| Variable | Description |
145+
| --- | --- |
146+
| `--dhx-scheduler-scale-color` | Sets the text color for day, week, month, and timeline scale labels; defaults to `--dhx-scheduler-container-color`. |
147+
| `--dhx-scheduler-timescale-background` | Sets the background for time scale holders and month cells; defaults to `--dhx-scheduler-container-background`. |
148+
| `--dhx-scheduler-timescale-today-background` | Sets the background used for the current day in time scales, month cells, and datepicker cells; defaults to `--dhx-scheduler-base-colors-select`. |
149+
| `--dhx-scheduler-hours-font-size` | Sets the font size for hour labels in day and week views; defaults to `--dhx-scheduler-caption-font-size`. |
150+
| `--dhx-scheduler-hours-font-weight` | Sets the font weight for hour labels in day and week views; defaults to `--dhx-scheduler-caption-font-weight`. |
151+
| `--dhx-scheduler-inactive-month-color` | Sets the color for dates outside the active month; defaults to `--dhx-scheduler-base-colors-icons`. |
152+
| `--dhx-scheduler-month-header-color` | Sets the text color for month-cell headers; defaults to `--dhx-scheduler-container-color`. |
153+
| `--dhx-scheduler-month-day-header-padding` | Sets the padding of month-cell day headers; derived from `--dhx-scheduler-base-padding` by default. |
154+
| `--dhx-scheduler-month-event-marker-size` | Sets the size of compact event markers in month, quick-info, and datepicker UI; derived from `--dhx-scheduler-base-module` by default. |
155+
| `--dhx-scheduler-list-line-height` | Sets the row height and line height for agenda legacy and grid rows. |
156+
157+
## Timeline, grid, and agenda
158+
159+
| Variable | Description |
160+
| --- | --- |
161+
| `--dhx-scheduler-agenda-date-column-width` | Sets the date column width in the legacy agenda view. |
162+
| `--dhx-scheduler-agenda-date-width` | Sets the date header column width in the newer agenda view. |
163+
| `--dhx-scheduler-agenda-event-date-width` | Sets the minimum width of the event time column in the newer agenda view. |
164+
| `--dhx-scheduler-grid-event-background` | Sets the background for grid view event rows. |
165+
| `--dhx-scheduler-grid-event-text` | Sets the text color for grid view event rows. |
166+
| `--dhx-scheduler-timeline-folder-background` | Sets the background for folder rows and folder cells in timeline and tree timeline views; defaults to `--dhx-scheduler-base-colors-disabled`. |
167+
| `--dhx-scheduler-timeline-folder-color` | Sets the text color for timeline folder labels; defaults to `--dhx-scheduler-base-colors-primary`. |
168+
| `--dhx-scheduler-treetimeline-level-padding` | Sets the indentation step for each nested level in tree timeline labels. |
169+
| `--dhx-scheduler-week-agenda-scale-height` | Sets the height of day headers in week agenda view. |
170+
| `--dhx-scheduler-week-agenda-scale-font-size` | Sets the font size of day headers in week agenda view; defaults to `--dhx-scheduler-important-font-size`. |
171+
| `--dhx-scheduler-week-agenda-scale-font-weight` | Sets the font weight of day headers in week agenda view; defaults to `--dhx-scheduler-heading-font-weight`. |
172+
173+
## Markers and blocked time
174+
175+
| Variable | Description |
176+
| --- | --- |
177+
| `--dhx-scheduler-blocked-time-background` | Sets the background for blocked or marked time spans; defaults to `--dhx-scheduler-base-colors-disabled`. |
178+
| `--dhx-scheduler-today-marker-color` | Sets the color of the current-time marker line; defaults to `--dhx-scheduler-base-colors-error`. |
179+
180+
## Modal boxes and messages
181+
182+
| Variable | Description |
183+
| --- | --- |
184+
| `--dhx-scheduler-info-background` | Sets the background for Scheduler info messages; defaults to `--dhx-scheduler-popup-background`. |
185+
| `--dhx-scheduler-info-color` | Sets the text color for Scheduler info messages; defaults to `--dhx-scheduler-popup-color`. |
186+
| `--dhx-scheduler-info-border` | Sets the border for Scheduler info messages; defaults to `--dhx-scheduler-popup-border`. |
187+
| `--dhx-scheduler-info-shadow` | Sets the shadow for Scheduler info messages; defaults to `--dhx-scheduler-box-shadow-m`. |
188+
| `--dhx-scheduler-modal-background` | Sets the background for Scheduler modal boxes; defaults to `--dhx-scheduler-popup-background`. |
189+
| `--dhx-scheduler-modal-border` | Sets the border for Scheduler modal boxes; defaults to `--dhx-scheduler-popup-border`. |
190+
| `--dhx-scheduler-modal-padding` | Sets the internal padding for Scheduler modal content and controls. |
191+
| `--dhx-scheduler-modal-width` | Sets the width of Scheduler modal boxes. |
192+
| `--dhx-scheduler-modal-border-radius` | Sets the border radius for Scheduler modal boxes; defaults to `--dhx-scheduler-popup-border-radius`. |
193+
| `--dhx-scheduler-undo-delete-background` | Sets the background for the undo-delete info message; defaults to `--dhx-scheduler-base-colors-text-base`. |
194+
| `--dhx-scheduler-undo-delete-color` | Sets the text color for the undo-delete info message; defaults to `--dhx-scheduler-event-color`. |
195+
196+
## Scheduler geometry bridge
197+
198+
| Variable | Description |
199+
| --- | --- |
200+
| `--dhx-scheduler-xy-scale_width` | Sets the CSS-driven value for `scheduler.xy.scale_width`. |
201+
| `--dhx-scheduler-xy-bar_height` | Sets the CSS-driven value for `scheduler.xy.bar_height`. |
202+
| `--dhx-scheduler-xy-month_head_height` | Sets the CSS-driven value for `scheduler.xy.month_head_height`. |
203+
| `--dhx-scheduler-xy-scale_height` | Sets the CSS-driven value for `scheduler.xy.scale_height`. |
204+
| `--dhx-scheduler-xy-scroll_width` | Sets the CSS-driven value for `scheduler.xy.scroll_width`. |
205+
| `--dhx-scheduler-config-form_wide` | Lets a theme enable the wide lightbox form setting through CSS. |
206+
207+
:::note
208+
Scheduler reads the geometry bridge variables from computed styles and applies numeric values to the matching `scheduler.xy` settings.
209+
:::

‎docs/integrations/react/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const plugins: SchedulerPlugins = {
122122
Common keys include features (`recurring`, `collision`, `limit`, `readonly`, `tooltip`, `quick_info`, `multiselect`, `drag_between`, `all_timed`, `active_links`, `container_autoresize`, `key_nav`, `editors`) and views (`agenda_view`, `daytimeline`, `grid_view`, `map_view`, `minical`, `timeline`, `treetimeline`, `units`, `week_agenda`, `year_view`).
123123

124124
:::note
125-
In the React wrapper, plugins are configured through the `plugins` **prop**. Do not call `scheduler.plugins({...})` on the instance — that is the legacy JS API.
125+
In the React wrapper, configure plugins through the `plugins` **prop**. The core `scheduler.plugins({...})` instance method is still available through the ref and is fully supported, but the prop form is tidier and requires less code.
126126
:::
127127

128128
### Switching the skin

0 commit comments

Comments
 (0)