Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pveyes/theme-in-css
Type-safe CSS custom properties (CSS variables) for theming purpose
https://github.com/pveyes/theme-in-css
css css-properties css-variables oss theme typescript
Last synced: about 2 months ago
JSON representation
Type-safe CSS custom properties (CSS variables) for theming purpose
- Host: GitHub
- URL: https://github.com/pveyes/theme-in-css
- Owner: pveyes
- License: mit
- Created: 2020-05-02T09:21:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:57:30.000Z (over 1 year ago)
- Last Synced: 2024-07-25T03:32:47.284Z (about 2 months ago)
- Topics: css, css-properties, css-variables, oss, theme, typescript
- Language: TypeScript
- Homepage:
- Size: 1.14 MB
- Stars: 65
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-made-by-indonesian - theme-in-css - `Type-safe CSS custom properties (CSS variables) for theming purpose` *by [Fatih Kalifa](https://github.com/pveyes)* (T)
- awesome-list - theme-in-css - safe CSS custom properties (CSS variables) for theming purpose | pveyes | 45 | (TypeScript)
- made-in-indonesia - theme-in-css - `Type-safe CSS custom properties (CSS variables) for theming purpose` *by [Fatih Kalifa](https://github.com/pveyes)* (T)
README
[](.)
[](https://www.npmjs.com/package/theme-in-css)
[](https://www.npmjs.com/package/theme-in-css)
---
- [Why?](#why)
- [Usage](#usage)
- [CSS Integration](#css-integration)
- [.css.string: `string`](#cssstring-string)
- [.css.properties: `Array<[key: string, value: string]>`](#cssproperties-arraykey-string-value-string)
- [License](#license)
---
## Why?
- **Strictly-typed design token, no more typo**. As you might know: CSS is forgiving, but in this case we don't want that. We want it to fail at compile time and this library gives you that
- **Works in CSS and JS**. Using CSS custom properties means you can reference your design token in both CSS and JS. Separation of concern!
- **UI Library agnostic**. The only purpose of this library is to provide type-safe CSS custom properties in your TS modules, nothing less, nothing more.
## Usage
First create your theme object, you can group theme variables by its function (color, spacing, etc). Think of it as design token
```ts
import { createTheme } from 'theme-in-css';
export const Theme = createTheme({
color: {
lightPrimary: '#fff',
darkPrimary: '#000',
},
spacing: {
xs: 2,
s: 4,
m: 8,
l: 16,
xl: 32,
},
typography: {
family: {
serif: 'Times New Roman',
sans: 'Calibri',
mono: 'Menlo',
},
}
});
// If you hate typing you can also use a shorter property name
// const t = createTheme({ c: { l1: '#fff', d1: '#000' } });
```
You can use any any UI libraries/framework that can define style in JS/TS, for example [React](https://reactjs.org) and [Lit](https://lit.dev/).
```tsx
// React
import React from 'react';
import { Theme } from './theme';
export default function Component() {
// use css prop via emotion/styled-components
// of course inline style works as well
return (
It works
);
}
// Lit
// You need to wrap Theme inside `unsafeCSS`
import { LitElement, html, css, unsafeCSS as cv } from 'lit';
import { Theme } from './theme';
export default class Component extends LitElement {
static styles = css`
div {
background-color: ${cv(Theme.color.darkPrimary)};
color: ${cv(Theme.color.lightPrimary)};
margin: ${cv(Theme.spacing.m)};
font-family: ${cv(Theme.typography.family.serif)};
}
`;
render() {
return html`
It works
`;
}
}
```
## CSS Integration
If you only create theme and use them in your app, you'll notice that your app now uses CSS variables to reference a value, but it doesn't work properly yet because you need to add the CSS into your stylesheet.
### .css.string: `string`
`theme-in-css` provides `.css.string` property to dump all theme values as CSS properties. You can create 2 themes light and dark and output them in different style declaration, like this:
```ts
import { Theme, DarkTheme } from './theme';
const html = `
:root {
${Theme.css.string}
}
@media (prefers-color-scheme: dark) {
${DarkTheme.css.string}
}
`;
```
You can open [example](example) to see it in action.
### .css.properties: `Array<[key: string, value: string]>`
You can also use `.css.properties` if you want to update the CSS custom property manually using JS.
```js
const root = document.documentElement;
theme.css.properties.forEach(([key, value]) => {
root.style.setProperty(key, value);
});
```
If you prefer `Record` instead, you can use `Object.fromEntries`
```js
const obj = Object.fromEntries(theme.css.properties);
```
## License
MIT