Skip to content

Commit 62ce325

Browse files
XonXon
authored
Merge pull request #1335 from zoglo/chore/custom-property-migration
Add CSS `custom properties` support (+ dark mode for the intro page)
2 parents d6b4d50 + 4a03fe8 commit 62ce325

File tree

18 files changed

+339
-593
lines changed

18 files changed

+339
-593
lines changed

‎README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ A vanilla, lightweight (~20kb gzipped 🎉), configurable select box/text input
4545
- [Callbacks](#callbacks)
4646
- [Events](#events)
4747
- [Methods](#methods)
48+
- [CSS custom properties](#css-custom-properties)
4849
- [Development](#development)
4950
- [License](#license)
5051

@@ -1291,6 +1292,80 @@ Element.prototype.dataset
12911292
Element.prototype.replaceChildren
12921293
```
12931294
1295+
## CSS custom properties
1296+
1297+
Since version `11.2`, you are able to customize the behavior and CSS of Choices.js using the following
1298+
[custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties).
1299+
1300+
| Property | Default | Description |
1301+
|-----------------------------------|-------------------------------------------|-----------------------------------------------------------------------------|
1302+
| `--choices-darken` | `black` | Darken color used within the color-mix |
1303+
| `--choices-lighten` | `white` | Ligten color used within the color-mix |
1304+
| `--choices-bg-color` | `#f9f9f9` | Background color of the choices element |
1305+
| `--choices-bg-color-disabled` | `#eaeaea` | Background color of a disabled choices element |
1306+
| `--choices-bg-color-dropdown` | `#fff` | Background color of the dropdown |
1307+
| `--choices-text-color` | `#333` | Text color of choices |
1308+
| `--choices-keyline-color` | `#ddd` | Border-colors within choices |
1309+
| `--choices-primary-color` | `#005F75` | Primary color |
1310+
| `--choices-disabled-color` | `#eaeaea` | Background color of disabled items |
1311+
| `--choices-item-disabled-color` | `#fff` | Text color of disabled items |
1312+
| `--choices-invalid-color` | `#d33141` | Border color of the invalid state |
1313+
| `--choices-highlighted-color` | `#f2f2f2` | Highlight background of the choices items |
1314+
| `--choices-highlight-color` | `#005F75` | Focus color of the choices button |
1315+
| `--choices-font-size-lg` | `16px` | Basic font size for choices |
1316+
| `--choices-font-size-md` | `14px` | Font size for medium choices items, e.g. the input field |
1317+
| `--choices-font-size-sm` | `12px` | Font size for the small choices items, e.g. select multiple or explanations |
1318+
| `--choices-guttering` | `24px` | Margin-Bottom of the choices wrapper |
1319+
| `--choices-border-radius` | `2.5px` | Border-radius of the choices element |
1320+
| `--choices-border-radius-item` | `20px` | Border-radius of the choices items |
1321+
| `--choices-z-index` | `1` | z-index of the active choices dropdown |
1322+
| `--choices-input-height` | `44px` | Height of the choices inner element |
1323+
| `--choices-width` | `100%` | Width of the choices inner element |
1324+
| `--choices-base-border` | `1px solid var( --choices-keyline-color)` | Bottom-border of the choices inner element |
1325+
| `--choices-multiple-item-margin` | `3.75px` | Margin of the dropdown items (multiple mode) |
1326+
| `--choices-multiple-item-padding` | `4px 10px` | Padding of the dropdown items (multiple mode) |
1327+
| `--choices-dropdown-item-padding` | `10px` | Padding of the choices dropdown items |
1328+
| `--choices-list-single-padding` | `4px 16px 4px 4px` | Padding of the listbox description |
1329+
| `--choices-input-margin-bottom` | `5px` | Margin-bottom of the choices input (text inputs) |
1330+
| `--choices-input-padding` | `4px 0 4px 2px` | Padding of the choices input |
1331+
| `--choices-inner-padding` | `7.5px 7.5px 3.75px` | Padding of the choices inner element |
1332+
| `--choices-inner-one-padding` | `7.5px` | Padding of the choices inner element (Single select input) |
1333+
| `--choices-arrow-size` | `5px` | Size of the choices dropdown symbol |
1334+
| `--choices-arrow-margin-top` | `-2.5px` | Top offset of the dropdown symbol |
1335+
| `--choices-arrow-margin-top-open` | `-7.5px` | Top offset of the active dropdown symbol |
1336+
| `--choices-arrow-right` | `11.5px` | Right offset of the dropdown symbol |
1337+
| `--choices-icon-cross` | `url("...")` | Button image |
1338+
| `--choices-icon-cross-inverse` | `url("...")` | Button image (inversed color) |
1339+
| `--choices-button-offset` | `8px` | Button offset |
1340+
| `--choices-button-dimension` | `8px` | Button background size |
1341+
| `--choices-button-line-height` | `1` | Button line height |
1342+
| `--choices-button-border-radius` | `0` | Button border-radius |
1343+
| `--choices-button-opacity` | `0.75` | Button opacity |
1344+
| `--choices-button-opacity-hover` | `1` | Button opacity on hover |
1345+
| `--choices-placeholder-opacity` | `0.5` | Placeholder opacity |
1346+
1347+
### Dark mode example
1348+
1349+
The current demo page uses the following variables for its dark mode
1350+
1351+
```css
1352+
@media (prefers-color-scheme: dark) {
1353+
:root {
1354+
--choices-primary-color: #38daff;
1355+
--choices-item-color: black;
1356+
--choices-bg-color: #101010;
1357+
--choices-bg-color-dropdown: #101010;
1358+
--choices-keyline-color: #3b3e40;
1359+
--choices-bg-color-disabled: #181a1b;
1360+
--choices-item-disabled-color: #eee;
1361+
--choices-disabled-color: #2d2d2d;
1362+
--choices-highlighted-color: #16292d;
1363+
--choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
1364+
--choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
1365+
}
1366+
}
1367+
```
1368+
12941369
## Development
12951370
12961371
To setup a local environment: clone this repo, navigate into its directory in a terminal window and run the following command:

0 commit comments

Comments
 (0)