Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plurid/plurid-themes
Plurid Application Themes
https://github.com/plurid/plurid-themes
themes user-interface
Last synced: about 7 hours ago
JSON representation
Plurid Application Themes
- Host: GitHub
- URL: https://github.com/plurid/plurid-themes
- Owner: plurid
- License: other
- Created: 2019-09-27T08:06:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-25T20:37:58.000Z (over 1 year ago)
- Last Synced: 2024-09-27T06:21:18.386Z (about 1 month ago)
- Topics: themes, user-interface
- Language: TypeScript
- Homepage: https://meta.plurid.com/themes
- Size: 979 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
plurid' themes
Themes for Plurid Applications
### Contents
+ [About](#about)
+ [Demo](#demo)
+ [Usage](#usage)
+ [Codeophon](#codeophon)
## About
There are four shade-oriented base themes, three color-oriented base themes, and multiple `plurid`-oriented product themes.
The four shade-oriented base themes consist of:
+ `night`
+ `dusk`
+ `dawn`
+ `light`
where the lightness increases from the `night` to `light`,
and the three color-oriented base themes are:
+ `ponton` - blue-based
+ `jaune` - yellow-based
+ `furor` - red-based.
The four shade-oriented base themes are inspired by [radical-style-interfaces](https://github.com/plurid/radical-style-interfaces).
A theme can be further more classified based on the theme `type` (`dark` or `bright`). A `dark` theme will have the primary color darker than the secondary color, whereas a `bright` theme will have the primary color brighter than the secondary color.
## [Demo](https://meta.plurid.com/themes)
## Usage
The themes are intended to be used for `CSS-in-JS` styling along with `react`, `styled-components`, or other packages.
``` typescript
interface Theme {
type: "dark" | "bright";
name: "generated"
| "night" | "dusk" | "dawn" | "light"
| "ponton" | "jaune" | "furor"
| "plurid"
| "deback" | "decode" | "defile" | "deleaf"
| "delook" | "deloss" | "demail" | "denote"
| "depack" | "depict" | "deself" | "desite"
| "detime" | "detour" | "detune" | "deturn"
| "deveil" | "devert" | "deview" | "dewiki";
baseColor: string;
baseColorInverted: string;
backgroundColorDark: string;
backgroundColorBright: string;
backgroundColorPrimary: string;
backgroundColorPrimaryAlpha: string;
backgroundColorPrimaryInverted: string;
backgroundColorSecondary: string;
backgroundColorSecondaryAlpha: string;
backgroundColorSecondaryInverted: string;
backgroundColorTertiary: string;
backgroundColorTertiaryAlpha: string;
backgroundColorTertiaryInverted: string;
backgroundColorQuaternary: string;
backgroundColorQuaternaryAlpha: string;
backgroundColorQuaternaryInverted: string;
colorPrimary: string;
colorPrimaryInverted: string;
colorSecondary: string;
colorSecondaryInverted: string;
colorTertiary: string;
colorTertiaryInverted: string;
boxShadowUmbra: string;
boxShadowUmbraColor: string;
boxShadowUmbraInset: string;
boxShadowPenumbra: string;
boxShadowPenumbraColor: string;
boxShadowPenumbraInset: string;
boxShadowAntumbra: string;
boxShadowAntumbraColor: string;
boxShadowAntumbraInset: string;
fontFamilySansSerif: string;
fontFamilySerif: string;
fontFamilyMonospace: string;
}
```
A color can be decomposed into it's constituents (`hue`, `saturation`, `lightness`, `alpha`) using the `decomposeColor` utility function.
## [Codeophon](https://github.com/ly3xqhl8g9/codeophon)
+ licensing: [delicense](https://github.com/ly3xqhl8g9/delicense)
+ versioning: [αver](https://github.com/ly3xqhl8g9/alpha-versioning)