Anyvision Design System

This library design to make the user much more easier to work with the design system of Anyvision.

What is the goal of this project?

Now days to change the current application theme takes long time and because of that this repo became live.
All you have to do now is just copy your new colors to you'r project and BOOM this works.

Installation
Usage
Functions & Mixins
Fonts
Override
Extensions
Utils

Installation

Use the package manager npm.

npm i @anyvision/style-guide --save

Usage

Access from scss

@import '~@anyvision/style-guide';

.header { 
    background-color: av-color(trueblack);
}

Access from js

import colors from '@anyvision/style-guide'

Functions & Mixins

This section will contain the available functions and the way to use them
and their default value.

av-color
av-opacity
av-size
av-space
av-z-index
av-font-size
av-font-weight
av-elevation

av-color

This function will return the color HEX of the given parameter as CSS variable.
The function can get 2 parameters, the key of the requested color and the opacity.
In case of using the opacity parameter the color value will be as RGBA.

Values

Primary

Used to display the main colors of thee application

primary - #3e7afc rgb(62, 122, 252)
secondary - #02234b rgb(2, 35, 75)
accent - #19e7fc rgb(25, 231, 252)
decorative - #f43aac rgb(244, 58, 172)

Native

Used for native styles like shadow and etc...

purewhite - #ffffff rgb(255, 255, 255)
trueblack - #010a14 rgb(1, 10, 20)

Content

Used in surfaces, Icons, Typography and any other UI elements

surface - #fcfcff rgb(255, 254, 254)
content - #021d3d rgb(2, 29, 61)

Status

Used for showing the user the current status of a situation

success - #00d0a0 rgb(0, 208, 160)
success-dark - #13723d rgb(19, 114, 61),
alert - #ffc400 rgb(255, 196, 0)
error - #d50000 rgb(213, 0, 0)

Additional

Used for content differentiate (charts, watch lists, avatars...)

ac-sirius - #55efc4 rgb(85, 239, 196)
ac-earth - #00b894 rgb(0, 184, 148)
ac-procyon - #ffeaa7 rgb(255, 234, 167)
ac-sun - #fdcb6e rgb(253, 203, 110)
ac-canopus - #81ecec rgb(129, 236, 236)
ac-achernar - #00cec9 rgb(0, 206, 201)
ac-altair - #fab1a0 rgb(250, 177, 160)
ac-antares - #e17055 rgb(225, 112, 85)
ac-vega - #74b9ff rgb(116, 185, 255)
ac-betelgeuse - #0984e3 rgb(9, 132, 227)
ac-aldebaran - #ff7675 rgb(255, 118, 117)
ac-pollux - #d63031 rgb(214, 48, 49)
ac-rigel - #a29bfe rgb(162, 155, 254)
ac-agena - #6c5ce7 rgb(108, 92, 231)
ac-spica - #fd79a8 rgb(253, 121, 168)
ac-mimosa - #e84393 rgb(232, 67, 147)

Do:

.my-class {
  color: av-color(primary);// will return var(--primary, #3e7afc)
  background-color: av-color(secondary, opacity(ghost));// will return var(--secondary, rgba(2, 35, 75, var(--ghost, 0.05)))
  border-color: av-color(primary, .5);// will return var(--secondary, rgba(2, 35, 75, 0.5))
}

Dont:

.my-class {
  color: rgba(av-color(primary), .5);
}

.my-other-class {
  color: av-color(no-such-variable);// will throw compile error
}

Use Color Classes:

<div className="text-primary ..."></div>
<div className="bg-primary ..."></div>
<div className="bg-secondary ..."></div>
<div className="bg-accent ..."></div>
<div className="bg-decorative ..."></div>
<div className="bg-purewhite ..."></div>
<div className="bg-trueblack ..."></div>
<div className="bg-surface ..."></div>
<div className="bg-content ..."></div>
<div className="bg-success ..."></div>
<div className="bg-alert ..."></div>
<div className="bg-error ..."></div>
<div className="bg-sirius ..."></div>
<div className="bg-earth ..."></div>
<div className="bg-procyon ..."></div>
<div className="bg-sun ..."></div>
<div className="bg-canopus ..."></div>
<div className="bg-achernar ..."></div>
<div className="bg-altair ..."></div>
<div className="bg-antares ..."></div>
<div className="bg-vega ..."></div>
<div className="bg-betelgeuse ..."></div>
<div className="bg-aldebaran ..."></div>
<div className="bg-pollux ..."></div>
<div className="bg-rigel ..."></div>
<div className="bg-agena ..."></div>
<div className="bg-spica ..."></div>

Use Color with Styled Components

import tw from "tailwind-styled-components"

const StyledText = tw.div`
  text-primary
  bg-purewhite
`

av-radius

This variables are manage to display the relevant border-radius as needed.
The default value is in px to change the measure unit change the parameter $border-radius-measure-unit.

Default value - base.

Values

tidy: 4,
base: 8,
round: 16,
curvy: 24,

Do:

.my-class {
  border-radius: av-radius(tidy);// will return var(--tidy, 4px)
}

.my-other-class {
  border-radius: av-radius();
}

Dont:

.my-class {
  width: av-radius(tidy);
}

.my-other-class {
  border-radius: av-radius(no-such-variable);
}

Use Radius Classes:

<!-- tidy 4px 0.25rem -->
<div className="rounded ..."></div>

<!-- base 8px 0.5rem -->
<div className="rounded-lg ..."></div> 

<!-- round 16px 1rem -->
<div className="rounded-2xl ..."></div> 

<!-- curvy 24px 1.5rem -->
<div className="rounded-3xl ..."></div>

Use Radius with Styled Components

import tw from "tailwind-styled-components"

const StyledText = tw.div`
  rounded
`

av-opacity

This function will return the opacity number value of the given parameter as CSS variable.

Values

high: 1,
medium: 0.6,
disabled: 0.34,
divider: 0.12,
ghost: 0.05

Do:

.my-class {
  opacity: av-opacity(ghost);// will return var(--ghost, 0.05)
  color: av-color(primary, av-opacity(ghost));// will return rgba(2, 35, 75, var(--ghost, 0.05))
}

Dont:

.my-class {
  opacity: av-opacity(no-such-variable);// will throw compile error
}

Use Opacity Classes:

<div className="opacity-high ..."></div>
<div className="opacity-medium ..."></div>
<div className="opacity-disabled ..."></div>
<div className="opacity-divider ..."></div>
<div className="opacity-ghost ..."></div>

Use Opacity with Styled Components

import tw from "tailwind-styled-components"

const StyledText = tw.div`
  opacity-disabled
`

av-size

This variables are manage to display the relevant width as needed.

Values

sz-8: 8,
sz-16: 16,
sz-24: 24,
sz-32: 32,
sz-40: 40,
sz-48: 48,
sz-56: 56,
sz-64: 64,
sz-80: 80,
sz-96: 96,
sz-144: 144,
sz-240: 240,
sz-320: 320,
sz-480: 480,
sz-640: 640,
sz-960: 960

Do:

.my-class {
  width: av-size(sz-16);// will return var(--sz-16, 16px)
}

Dont:

.my-class {
  height: av-size(sz-16);
  margin: av-size(sz-16);
  padding: av-size(sz-16);
}

.my-other-class {
  width: av-size(no-such-variable);// will throw compile error
}

Use Size Classes:

<!-- width -->
<div className="w-4 ..."></div>
<div className="w-8 ..."></div>
<div className="w-16 ..."></div>
<div className="w-24 ..."></div>
<div className="w-32 ..."></div>
<div className="w-40 ..."></div>
<div className="w-48 ..."></div>
<div className="w-56 ..."></div>
<div className="w-64 ..."></div>
<div className="w-80 ..."></div>
<div className="w-96 ..."></div>
<div className="w-144 ..."></div>
<div className="w-240 ..."></div>
<div className="w-320 ..."></div>
<div className="w-480 ..."></div>
<div className="w-640 ..."></div>
<div className="w-960 ..."></div>


<!-- min-width -->
<div className="min-w-16 ..."></div>
<!-- max-width -->
<div className="max-w-16 ..."></div>
<!-- height -->
<div className="h-16 ..."></div>

<!-- padding -->
<div className="p-16 ..."></div>
<!-- padding x axis (left, right) -->
<div className="px-16 ..."></div>
<!-- padding y axis (top, bottom) -->
<div className="py-16 ..."></div>

<!-- margin -->
<div className="m-16 ..."></div>

<div className="flex space-x-16 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

av-space

This variables are manage to display the relevant margin or padding as needed.
Default value - base.

Values

micro: 4,
tiny: 8,
base: 16,
medium: 24,
loose: 32,
large: 48,
grand: 64,
giant: 80

Do:

.my-class {
  margin: av-space(tiny);// will return var(--tiny, 8px)
  padding: av-space();
}

Dont:

.my-class {
  width: av-space(tiny);
  height: av-space();
}

.my-other-class {
  width: av-space(no-such-variable);// will throw compile error
}

av-z-index

this function will return relevant z-indexes.

Values

  raised: 1,
  navigation: 10,
  popup: 20,
  notification: 30,
  important: 40

Do:

.my-class {
  z-index: av-z-index(raised);
}

Use Z-Index Classes:

<div className="z-raised ..."></div>
<div className="z-navigation ..."></div>
<div className="z-popup ..."></div>
<div className="z-notification ..."></div>
<div className="z-important ..."></div>

av-font-size

This function will return the font size number value of the given as REM.
Default value - base.

Values

micro: 10,
tiny: 12,
small: 14,
base: 16,
medium: 20,
large: 24,
x-large: 32,
grand: 48,
giant: 60,
header: 96,

Do:

.my-class {
  font-size: av-font-size();// will return 1rem
}

.my-other-class {
  font-size: av-font-size(x-large);// will return 2rem
}

Dont:

.my-class {
 font-size: av-font-size(no-such-variable);// will throw compile error
}

Use Font Size Classes:

<p className="text-micro ...">The quick brown fox ...</p>  <!-- 10px -->
<p className="text-tiny ...">The quick brown fox ...</p> <!-- 12px -->
<p className="text-sm ...">The quick brown fox ...</p> <!-- 14px -->
<p className="text-base ...">The quick brown fox ...</p> <!-- 16px -->
<p className="text-md ...">The quick brown fox ...</p> <!-- 20px -->
<p className="text-lg ...">The quick brown fox ...</p> <!-- 24px -->
<p className="text-xl ...">The quick brown fox ...</p> <!-- 32px -->
<p className="text-2xl ...">The quick brown fox ...</p> <!-- 48px -->
<p className="text-3xl ...">The quick brown fox ...</p> <!-- 60px -->
<p className="text-header ...">The quick brown fox ...</p> <!-- 96px -->

av-font-weight

This function will return the font weight number value of the given parameter.
Default value - normal.

Values

lighter: 300,
normal: 400,
bold: 700

Do:

.my-class {
  font-weight: av-font-weight();// will return 400
}

.my-other-class {
  font-weight: av-font-weight(bold);// will return 700
}

Dont:

.my-class {
 font-weight: av-font-weight(no-such-variable);// will throw compile error
}

Use Font Weight Classes:

<p className="font-light ...">The quick brown fox ...</p> <!-- 300 -->
<p className="font-normal ...">The quick brown fox ...</p> <!-- 400 -->
<p className="font-bold ...">The quick brown fox ...</p> <!-- 700 -->

av-elevation

This mixin will return the relevant properties to the given elevation.
By default this mixin will return background-color: av-color(surface);
even if the given elevation not exist.

Example:

.my-class {
  @include av-elevation(); // this will return `background-color: av-color(surface);`
}

.my-other-class {
  @include av-elevation(pop-out);
  // will return -
  // background-color: var(--surface, rgba(2, 36, 77, 0.16));
  // box-shadow: 0 12px 24px 0 var(--trueblack, rgba(1, 10, 20, 0.1));
}

Fonts

Any text should use one of the fonts placeholders.

Do:

.my-class {
  @extend %av-headline1;
}

Dont:

.my-class {
 font-size: av-font-size(small);
 font-weight: av-font-weight(bold);
}

Values

av-button

 fontSize: 14px;
 fontWeight: 700;
 lineHeight: 0px;
 textTransform: uppercase;
 letterSpacing: 1.34px;

const StyledButton = tw.button`
  text-sm
  font-bold
  leading-[0px]
  uppercase
  tracking-[1.34px]
`

av-body1

 fontSize: 16px;
 fontWeight: 400;
 lineHeight: 24px;
 letterSpacing: 0.44px;

const StyledBody1 = tw.span`
  text-base
  font-normal
  leading-[24px]
  tracking-[0.44px]
`

av-body2

 fontSize: 14px;
 fontWeight: 400;
 lineHeight: 22px;
 letterSpacing: 0.24px;

const StyledBody2 = tw.span`
  text-sm
  font-normal
  leading-[22px]
  tracking-[0.24px]
`

av-caption

 fontSize: 12px;
 fontWeight: 400;
 lineHeight: 16px;
 letterSpacing: 0.4px;

const StyledCaption = tw.span`
  text-tiny
  font-normal
  leading-[16px]
  tracking-[0.4px]
`

av-headline1

 fontSize: 96px;
 fontWeight: 300;
 lineHeight: 145px;
 letterSpacing: -1.54px;

const StyledH1 = tw.span`
  text-header
  font-light
  leading-[145px]
  tracking-[-1.54px]
`

av-headline2

 fontSize: 60px;
 fontWeight: 300;
 lineHeight: 90px;
 letterSpacing: -0.48px;

const StyledH2 = tw.span`
  text-3xl
  font-light
  leading-[90px]
  tracking-[-0.48px]
`

av-headline3

 fontSize: 48px;
 fontWeight: 400;
 lineHeight: 0;

const StyledH3 = tw.span`
  text-2xl
  font-normal
  leading-[0]
`

av-headline4

 fontSize: 32px;
 fontWeight: 400;
 lineHeight: 51px;
 letterSpacing: 0.26x;

const StyledH4 = tw.span`
  text-xl
  font-normal
  leading-[51px]
  tracking-[0.26px]
`

av-headline5

 fontSize: 24px;
 fontWeight: 400;
 lineHeight: 0;

const StyledH5 = tw.span`
  text-lg
  font-normal
  leading-[0]
`

av-headline6

 fontSize: 20px;
 fontWeight: 600;
 lineHeight: 0;
 letterSpacing: 0.15x;

const StyledH6 = tw.span`
  text-md
  font-semibold
  leading-[0]
  tracking-[0.15px]
`

av-overline

 fontSize: 10px;
 fontWeight: 400;
 lineHeight: 0;
 letterSpacing: 1.5px;
 textTransform: uppercase;

const StyledOverline = tw.span`
  text-micro
  font-normal
  leading-[0]
  tracking-[1.5px]
  uppercase
`

av-subtitle1

 fontSize: 16px;
 fontWeight: 700;
 lineHeight: 0;
 letterSpacing: 1.14px;

const StyledSubtitle1 = tw.span`
  text-base
  font-bold
  leading-[0]
  tracking-[1.14px]
`

av-subtitle2

 fontSize: 14px
 fontWeight: 600
 lineHeight: 24px
 letterSpacing: 0.1px

const StyledSubtitle2 = tw.span`
  text-sm
  font-semibold
  leading-[24px]
  tracking-[0.1px]
`

Override

On this section you can see how to override the default values and theme CSS variables.

Set the default color system

Import colors and set the css variables to defaults

@import '~@anyvision/style-guide';
// Set default colors on :root element
:root {
  @each $key, $value in $color-palate {
    #{set-as-var($key)}: unquote(hex-to-rgb-string($value));
  }
}

Override Theme

Theme described with Colors, Spaces and Border Radius.
Colors the custom properties (variables) are in default define in :root element.
To override the theme default colors, all need to do is create a CSS selector and
to define new CSS variables.

Do:

:root {
  --primary: #{hex-to-rgb-string(#3e7afc)};
  --secondary: #{hex-to-rgb-string(#02234b)};
  --accent: 255, 255, 255;
  etc...
}

.my-theme {
  --primary: #{hex-to-rgb-string(#3e7afc)};
  --secondary: #{hex-to-rgb-string(#02234b)};
  --accent: 255, 255, 255;
  etc...
}

Dont:

:root {
  --primary: #3e7afc};
  --secondary: #{hexToRGBString(#NOTHEX)};
  --accent: rgb(255, 255, 255);
  etc...
}

Override Default Values

To override the default value, need to create new file for example my-override-file.
On this file need to declare SCSS variables with the same names as the default
values.

Do:

// my-override-file.scss

$border-radius-types: (
  tidy: 14,
  base: 18,
  round: 116,
  curvy: 124,
);

index.scss

@import 'my-override-file';
@import '~@anyvision/style-guide';

Dont:

// my-override-file.scss

$border-radius-types: (
  tidy: 14,
  base: 18,
  round: 116,
  curvy: 124,
);

index.scss

@import '~@anyvision/style-guide';
@import 'my-override-file';

On this way it will override border-radius-sizes.

Extensions

On this section will be the documentation of the available extensions.
ALL THE EXTENSIONS MUST COME BEFORE THE IMPORT OF THE STYLE GUIDE!!

Reset
Normalize
av-normalize

How to @import all the extensions?

@import '@anyvision/style-guide/extensions';

Reset

We use https://gist.github.com/DavidWells/18e73022e723037a50d6 CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like
default line heights, margins and font sizes of headings, and so on.

Do:

@import '@anyvision/style-guide/extensions/_reset.scss;
@import '@anyvision/style-guide';

Dont:

@import '@anyvision/style-guide';
@import '@anyvision/style-guide/extensions/_reset.scss;

Normalize

We use https://necolas.github.io/normalize.css/
Normalize.css makes browsers render all elements more consistently and in line
with modern standards. It precisely targets only the styles that need normalizing.

Do:

@import '@anyvision/style-guide/extensions/_normalize.scss;
@import '@anyvision/style-guide';

Dont:

@import '@anyvision/style-guide';
@import '@anyvision/style-guide/extensions/_normalize.scss;

av-normalize

This is the common usages of the css styles in the Anyvision projects.

Do:

@import '@anyvision/style-guide/extensions/_av-normalize.scss;
@import '@anyvision/style-guide';

Dont:

@import '@anyvision/style-guide';
@import '@anyvision/style-guide/extensions/_av-normalize.scss;

Utils

set-as-var

This function will return the given key as --key.
Use only to generate css variables!

Do:

// lets say $key = my-key
@function my-function($key) {
  $my-css-var: set-as-var($key);// will return --my-key
  //...
  @return var($my-css-var, #fff);
}

Dont:

// lets say $key = my-key
@function my-function($key) {
  $summary: set-as-var($key);
  //...
  @return $summary - 2px; 
}

get-number

This function will return from a given map and a given key a number value
and if the value is not a number the function will throw an error.

Do:

$my-map: (
  key1: 1,
  key2: '2'
);

// lets say $key = key1
@function my-function($key) {
  $my-css-var: get-number($my-map, $key);// will return 1
  //...
}

Dont:

$my-map: (
  key1: 1,
  key2: '2'
);

// lets say $key = key2
@function my-function($key) {
  $my-css-var: get-number($my-map, $key);// will throw an error
  //...
}

rem

This function will return a px value as rem.

Do:

.my-class {
  font-size: rem(16px); //will return 1rem
}

Dont:

.my-class {
  font-size: rem(16cm); //will return 1rem
}

hex-to-rgb-string

This function will return the red, green, blue values of an Hex color.

Do:

.my-class {
  --my-color: hex-to-rgb-string(#ffffff);
  --my-other-color: unquote(hex-to-rgb-string(#ffffff));
}

Dont:

.my-class {
  --my-color: hex-to-rgb-string(#not-hex-color);
}

AnyVisionltd/anv-ui-style-guide

Anyvision Design System

Contents

Installation

Usage

Access from scss

Access from js

Functions & Mixins

av-color

Values

Primary

Native

Content

Status

Additional

av-radius

Values

av-opacity

Values

av-size

Values

av-space

Values

av-z-index

Values

av-font-size

Values

av-font-weight

Values

av-elevation

Fonts

Values

av-button

av-body1

av-body2

av-caption

av-headline1

av-headline2

av-headline3

av-headline4

av-headline5

av-headline6

av-overline

av-subtitle1

av-subtitle2

Override

Set the default color system

Override Theme

Override Default Values

Extensions

Reset

Normalize

av-normalize

Utils

set-as-var

get-number

rem

hex-to-rgb-string