A scalable styled-component theming system that fully leverages JavaScript as a language for styles authoring and theming. 

jdconner

styled-variants

    "description": "A scalable styled-component theming system that fully leverages JavaScript as a language for styles authoring and theming.",

    "author": "Justin Conner <justindconner2@gmail.com> (https://justinconner.dev/)",

    "homepage": "https://github.com/jdconner/styled-variants",

        "example": "(cd ./example && npm run start)",

        "publish": "npm run build && npm publish --access public"

        "rollup-plugin-commonjs": "^10.0.0",

        "rollup-plugin-node-resolve": "^5.1.0",

        "rollup-plugin-terser": "^5.1.2",

        "rollup-plugin-typescript": "^1.0.1",

        "rollup-plugin-uglify": "^6.0.3",

-   [Why another theming library?](#why-another-theming-library)

    -   [**Passing Props**](#passing-props)

    -   [**Boolean variants**](#boolean-variants)

    -   [**Combining variants**](#combining-variants)

    -   [**Pseudo class support**](#pseudo-class-support)

    -   [**Extending styled-components**](#extending-styled-components)

At [Remine](https://remine.com/info/careers/), we not only have _multiple global themes_ (i.e. separate themes for different apps/stakeholders, with light and dark themes for each), but _we also have multiple variants_: `size` (e.g. small, large, etc), `state` (e.g. error, warning, etc), and `type` (e.g. primary, secondary, tertiary) with more to come. We couldn't find a library in the ecosystem that could support such a large number of variants with minimal code, so we decided to create one.

Most theming systems for `styled-components` available today spit out string values (e.g. [styled-theming](https://github.com/styled-components/styled-theming), [styled-theme](https://github.com/diegohaz/styled-theme)) which can add a code bloat since you still need to assign the theme value to a css property. `styled-variants` takes advantage of the first-class object functionality that `styled-components` has added in [version 3.3.0](https://spectrum.chat/styled-components/general/v3-3-0-is-out-with-first-class-object-support~2b5fd935-fb1d-480d-a524-95ecd540a1ac) to help reduce this bloat and allow for cleaner, scalable theming.

See our Buttons [example code](https://github.com/jdconner/styled-variants/tree/master/example/src/components/Buttons) if you'd rather read code to understand the use cases.

If we expect to write our HTML like this:

<h3 style='color: red;'>DIFFICULT TO READ</h3>

You'd normall use the string-based, extremely difficult to read code to dynamically style your components:

**_Imagine_** what this would look like if we had even more size options or if "size" affected more css attributes!

<h3 style='color: lightgreen;'>EASIER TO READ</h3>

With styled-variants, not only can we see very easily what each variants prop value entails, but we can also read what each css value will interpolate to since we no longer have a bunch of conditionals bloating the code:

import createTheme from "styled-variants";

const ButtonTheme = createTheme("Button");

const typeVariant = ButtonTheme.variant("type", {

If we have a styled-component already created, we can extend the styles by applying variants:

const sizeVariant = ButtonTheme.variant("size", {

export const ThemedButton = styled(Button)(sizeVariant);

Contributions are welcome. Standards have yet to be set but we will set these in the near future.

To see you changes as you make them, an example app has been created. You can run it with:

		{
		"name": "styled-variants",
		"version": "0.2.1",
		"version": "1.0.0",
		"description": "A scalable styled-component theming system that fully leverages JavaScript as a language for styles authoring and theming.",
		@@ -5,0 +5,0 @@ "author": "Justin Conner <justindconner2@gmail.com> (https://justinconner.dev/)",

		@@ -235,2 +235,4 @@ <h1 align="center">

		<br>

		---
		@@ -294,2 +296,4 @@

		<br>

		## Contributing
		@@ -296,0 +300,0 @@

Fixed alerts

Improved metrics

		@@ -7,1 +7,2 @@ 10/10/19:
		- Add tests
		- Fix publish script