https://github.com/nathansmith/json-to-css-var
Convert JSON to CSS variables
https://github.com/nathansmith/json-to-css-var
css javascript variables
Last synced: about 1 year ago
JSON representation
Convert JSON to CSS variables
- Host: GitHub
- URL: https://github.com/nathansmith/json-to-css-var
- Owner: nathansmith
- License: mit
- Created: 2024-01-11T05:29:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-13T00:18:59.000Z (over 2 years ago)
- Last Synced: 2025-03-21T13:44:56.711Z (about 1 year ago)
- Topics: css, javascript, variables
- Language: JavaScript
- Homepage: https://host.sonspring.com/json-to-css-var
- Size: 18.6 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JSON to CSS var
This mini project converts JSON objects into namespaced CSS variables.
**BEFORE:**
```json
{
"base": {
"font": {
"family": [
"Segoe UI",
"system-ui",
"sans-serif"
],
"size": "16px"
},
"line-height": 1.5
},
"theme": {
"light": {
"background": "#fff",
"text": "#000"
},
"dark": {
"background": "#333",
"text": "#ccc"
},
"contrast": {
"background": "ButtonFace",
"text": "ButtonText"
}
}
}
```
**AFTER:**
```css
:root {
--base-font-family: 'Segoe UI', system-ui, sans-serif;
--base-font-size: 16px;
--base-line-height: 1.5;
--theme-light-background: #fff;
--theme-light-text: #333;
--theme-dark-background: #333;
--theme-dark-text: #ccc;
--theme-contrast-background: ButtonFace;
--theme-contrast-text: ButtonText;
}
```