https://github.com/zainadeel/phx-colors
Phoenix color tokens as CSS custom properties and TypeScript constants — a drop-in compatibility package for the Motive webapp's Phoenix color system
https://github.com/zainadeel/phx-colors
colors css-custom-properties css-variables design-system design-tokens phoenix typescript
Last synced: about 1 month ago
JSON representation
Phoenix color tokens as CSS custom properties and TypeScript constants — a drop-in compatibility package for the Motive webapp's Phoenix color system
- Host: GitHub
- URL: https://github.com/zainadeel/phx-colors
- Owner: zainadeel
- License: mit
- Created: 2026-04-22T20:55:49.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-04-23T18:58:30.000Z (about 1 month ago)
- Last Synced: 2026-04-23T19:27:59.477Z (about 1 month ago)
- Topics: colors, css-custom-properties, css-variables, design-system, design-tokens, phoenix, typescript
- Language: CSS
- Homepage: https://zainadeel.github.io/phx-colors/
- Size: 51.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# @ds-phx/colors
Phoenix color tokens as CSS custom properties and TypeScript constants.
This package ports the Motive webapp's Phoenix color system into a standalone, drop-in package. Token names are preserved verbatim (`--phx-ref-color-*`, `--phx-web-color-*`) so the webapp can migrate component-by-component without a find-and-replace.
> Related: `@ds-mo/tokens` ships the forward-looking full token set (colors, dimensions, typography, effects). `@ds-phx/colors` scopes to Phoenix colors only, light-only, and is intended as a compatibility shim.
## Install
```bash
npm install @ds-phx/colors
```
## Usage
### CSS
```css
/* All color tokens */
@import '@ds-phx/colors';
/* or explicitly */
@import '@ds-phx/colors/colors';
/* Optional: base styles (font loading, reduced-motion) */
@import '@ds-phx/colors/globals';
/* Optional: CSS reset */
@import '@ds-phx/colors/reset';
/* Optional: utility classes */
@import '@ds-phx/colors/utilities';
```
### JS / TypeScript (via bundler)
```ts
import '@ds-phx/colors';
// Type-safe token name constants
import { phxWebColorBackgroundPrimary } from '@ds-phx/colors/ts';
// value is the CSS variable name string: '--phx-web-color-background-primary'
element.style.setProperty(phxWebColorBackgroundPrimary, 'red');
```
## Token groups
| Group | Prefix | Purpose |
|---|---|---|
| Reference | `--phx-ref-color-*` | Raw palette — hue + step (1–90) and alpha scales. Source of truth. |
| Semantic | `--phx-web-color-background-*`, `--phx-web-color-content-*`, `--phx-web-color-stroke-*` | Intent-driven aliases for UI surfaces, text, and borders. |
| Data | `--phx-web-color-data-*` | Data-visualization palettes — categorical, sequential, diverging, score scales. |
## Dev
```bash
npm run build # full build (colors.css → dist/ + TS constants)
npm run dev # watch mode
npm run build:docs # regenerate the GitHub Pages token browser
```
## License
MIT