Getting Started

Installation

npm i @guvam/components

import styles

@import url("@guvam/components/base/index.css");
@import url("@guvam/components/themes/website.css");
@import url("@guvam/components/colors/blue.css");

import components

import { Rating } from "@guvam/components";

CSS naming convention

block: Globally unique prefix for grouping similar CSS functionality together. (Pascal case)

element: separate item in block (Camel case)

modifier: element variation (Camel case)

value: modifier value (Camel case)

Example

/* File naming */ Block1/Block2/Block3.css /* CSS class naming */ .Block1-Block2-element--modifier-value /* CSS variable naming */ --Block1-Block2-element /* CSS keyframe naming */ Block1-Block2-element

Global CSS variables

 /* global variables */
  --colorScheme: dark;
  --colorTheme: blue;
  --borderRadius: 0.5rem;
  --textScale: 1.25;
  --textSize: 16px;
  --textDirection: unset;

  font-size: var(--textSize);
  color: var(--surfaceText);
  color-scheme: var(--colorScheme);
  background-color: var(--surface);
  direction: var(--textDirection);
  anchor-name: --root-container;

  /* font */
  --textMultiplier:

  /* primary */
  --primary:
  --primaryText:
  --primaryBlock:
  --primaryBlockText:
  --primaryBorder:

  /* secondary */
  --secondary:
  --secondaryText:
  --secondaryBlock:
  --secondaryBlockText:
  --secondaryBorder:

  /* accent */
  --accent:
  --accentText:
  --accentBlock:
  --accentBlockText:
  --accentBorder:

  /* info */
  --info:
  --infoText:
  --infoBlock:
  --infoBlockText:
  --infoBorder:

  /* success */
  --success:
  --successText:
  --successBlock:
  --successBlockText:
  --successBorder:

  /* warning */
  --warning:
  --warningText:
  --warningBlock:
  --warningBlockText:
  --warningBorder:

  /* error */
  --error:
  --errorText:
  --errorBlock:
  --errorBlockText:
  --errorBorder:

  /* surface */
  --surface:
  --surfaceText:
  --surfaceBlock:
  --surfaceBlockText:
  --surfaceBorder:
  --surfacePanel:
  --surfaceShadow:
  --surfaceBackdrop:
  --surfaceHover:

  /* ui */
  --ui:
  --uiText:
  --uiBorder:
  --uiHover:
  --uiFocus:
  --uiDisabled:
  --uiActive:
  --uiSelected:

Color modes

import one of the color modes

@import url("@guvam/components/colors/blue.css");
@import url("@guvam/components/colors/green.css");
@import url("@guvam/components/colors/lime.css");
@import url("@guvam/components/colors/pink.css");
@import url("@guvam/components/colors/red.css");
@import url("@guvam/components/colors/yellow.css");

Add matching class name to root element Theme--color-blue

Theming

import one of the color modes

@import url("@guvam/components/themes/calm.css");
@import url("@guvam/components/themes/focus.css");
@import url("@guvam/components/themes/fashion.css");

Add matching class name to root element Theme--theme-calm