Skip to content
This repository has been archived by the owner on Apr 15, 2022. It is now read-only.

yearn/yearn-web-themes-deprecated

Repository files navigation

yearn-web-themes

JavaScript Style Guide

Theming system for Yearn Finance and associated projects.
A theme is a set of colors (could expand). A theme object looks like this

{
	name: 'light',
	colors: {
		background: '#F4F7FB',
		backgroundVariant: '#E0EAFF',
		surface: '#FFFFFF',
		surfaceVariant: '#F9FBFD',
		primary: '#0657F9',
		primaryVariant: '#004ADF',
		secondary: '#E0EAFF',
		titles: '#001746',
		titlesVariant: '#0657F9',
		texts: '#7F8DA9',
		disabled: '#CED5E3',
		icons: {
			primary: '#CED5E3',
			variant: '#475570'
		},
		button: {
			filled: {
				primary: '#0657F9',
				variant: '#004ADF',
				text: '#FFFFFF',
			},
			outlined: {
				primary: '#FFFFFF',
				variant: '#E0EAFF',
				text: '#0657F9',
			},
			disabled: {
				primary: '#F4F7FB',
				text: '#CED5E3',
			}
		}
	}
}

Support themes are light, dark and blue.

Install

This package is handled by Github's system. In order to be able to install it, first add the following to your .npmrc or .yarnrc file:

# For .npmrc
@yearn:registry=https://npm.pkg.github.com
# For .yarnrc
registry=https://npm.pkg.github.com/yearn

Then you can install is as usual:

yarn add @yearn/yearn-web-assets

Usage

import React, { Component, useState } from 'react'
import themes from 'yearn-web-themes'

class Example extends Component {
  const [theme, set_theme] = React.useState(themes.light)
  render() {
    return (
      <div className={'my-box-className'} style={{background: theme.colors.background}}>
        <h1 style={{color: theme.colors.title}}>Hello World</h1>
      </div>
    )
  }
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages