@byteclaw/visage-themes

@byteclaw/visage-themes

Collection of themes for Visage Design System and utilities to create custom themes.

• @byteclaw/visage-themes
  • Themes
  • Usage
    • Docs theme
    • N-point and modular scale theme
      • Settings
    • N-point and font scale theme
      • Settings

Themes

• @byteclaw/visage-themes
  • Themes
  • Usage
    • Docs theme
    • N-point and modular scale theme
      • Settings
    • N-point and font scale theme
      • Settings

Usage

First decide what theme you want to use and then import it.

Docs theme

Default theme used in Visage docs

N-point and modular scale theme

Base theme that uses N-point grid and Modular scale for typography. This theme creator should be used to create completely custom theme.

import { createNPointModularScaleTheme, modularScaleFontRatios } from '@byteclaw/visage-themes';

const theme = createNPointModularScaleTheme({
  baseFontSize: 16,
  baseLineHeightRatio: 1.5,
  baseGridSize: 8,
  borderRadius: {
    // optional border radius for controls
    controlBorderRadius: 8,
    // any other name of border radius
  },
  fontScaleRatio: modularScaleFontRatios.perfectFourth,
  colors: {
    /** Accent color to bring attention to design elements */
    accent: '#ccc';
    accentText: 'black';
    /** Used as background color for dark on light design or text color of inverted design */
    shades: 'white';
    shadesText: 'black';
    primary: 'black';
    primaryText: 'white';
    /** Uses as background for danger elements or as invalid color */
    danger: 'red';
    dangerText: 'white';
    /** Uses as background for info elements or as info text color */
    info: 'blue';
    infoText: 'white';
    neutral: '#ccc';
    neutralText: 'black';
    /** Uses as background for success elements or as success text color */
    success: 'green';
    successText: 'white';
    /** Uses as background for warning elements or as warning text color */
    warning: 'orange';
    warningText: 'white';
    // ... extra colors you want to use
  },
  fontFamily: {
    // you are responsible to actually include these fonts to your HTML
    body: 'Rubik',
    heading: 'Luna',
  },
});

Settings

• baseFontSize
  • number - e.g. 16
  • number[] - e.g. [14,15,16] - this is suitable if you're using responsive design system and want to change base font size based on the device
• baseLineHeightRatio
  • number - e.g. 1.5
    • ratio used to calculate line height
    • ratio is calculated based on modular scale and grid size. The point is to align it with grid size so you always have a multiplies of grid size used as line height.
• baseGridSize
  • number - e.g. 8 - all spacings are caculated as multiplies of baseGridSize for example m: 1 will result to margin: 8, m: 0.5 is margin: 4 and m: -1 is margin: -8. - borderRadius
  • number - e.g. 8
  • string - e.g. 8px
  • { [name: string]: string | number } - named border radiuses so you can address them e.g. borderRadius: 'controlBorderRadius'.
• fontScaleRatio
  • number - e.g. 1.4. This property is used by modular scale to compute font size.
• colors
  • ColorPalette - each color can be a string or ScaleValue. Scale value supports dot (e.g. primary.-1 or primary.1) notation so you can have more than one shade of the color in your palette. ``fontFamily`
  • FontPalette
    • fonts used by visage, body and heading are required.

N-point and font scale theme

Base theme that uses N-point grid and font scale for typography. This theme creator should be used to create completely custom theme.

import { createNPointFontScaleTheme } from '@byteclaw/visage-themes';

const theme = createNPointFontScaleTheme({
  fontSize: { values: [10, 12, 16, 20, 28, 38], offset: 1 },
  lineHeights: { values: [14, 16, 20, 24, 32, 44], offset: 1 },
  baseGridSize: 8,
  borderRadius: {
    // optional border radius for controls
    controlBorderRadius: 8,
    // any other name of border radius
  },
  colors: {
    /** Accent color to bring attention to design elements */
    accent: '#ccc';
    accentText: 'black';
    /** Used as background color for dark on light design or text color of inverted design */
    shades: 'white';
    shadesText: 'black';
    primary: 'black';
    primaryText: 'white';
    /** Uses as background for danger elements or as invalid color */
    danger: 'red';
    dangerText: 'white';
    /** Uses as background for info elements or as info text color */
    info: 'blue';
    infoText: 'white';
    neutral: '#ccc';
    neutralText: 'black';
    /** Uses as background for success elements or as success text color */
    success: 'green';
    successText: 'white';
    /** Uses as background for warning elements or as warning text color */
    warning: 'orange';
    warningText: 'white';
    // ... extra colors you want to use
  },
  fontFamily: {
    // you are responsible to actually include these fonts to your HTML
    body: 'Rubik',
    heading: 'Luna',
  },
});

Settings

• fontSize
  • ScaleValue<number | number[]> - scale value
• lineHeights
  • ScaleValue<number | number[]> - scale value
• baseGridSize
  • number - e.g. 8 - all spacings are caculated as multiplies of baseGridSize for example m: 1 will result to margin: 8, m: 0.5 is margin: 4 and m: -1 is margin: -8. - borderRadius
  • number - e.g. 8
  • string - e.g. 8px
  • { [name: string]: string | number } - named border radiuses so you can address them e.g. borderRadius: 'controlBorderRadius'.
• colors
  • ColorPalette - each color can be a string or ScaleValue. Scale value supports dot (e.g. primary.-1 or primary.1) notation so you can have more than one shade of the color in your palette. ``fontFamily`
  • FontPalette
    • fonts used by visage, body and heading are required.