Design System Tokens - Miscellaneous

You can adjust any of the defaults in the src/_config/values folder of your design system. This covers a number of tokens and options.

• prefix: Web Component name prefix
• direction: the primary document direction (LTR or RTL)
• disabledOpacity: the opacity of disabled controls
• strokeWidth: controls the width of the stroke of a component that has a stroke
• focusStrokeWidth: controls with width of the stroke of a component that has a stroke when it has document focus

prefix

export const prefix = 'alpha';

Custom Web components (as opposed to standard HTML components like <h1> or <div>) require a hyphen character (-) included in the name e.g. <alpha-button>. The part of the name before the hyphen is called the prefix and can be customised e.g.:

export const prefix = 'custom';

You will then be able to use your component in HTML as <custom-button>.

direction

The primary document direction (LTR or RTL). Many CSS layout properties like flexbox and CSS grid automatically handle reflow depending on the document's primary direction. There are also CSS logical properties that can be used as well to apply localized margins, paddings, borders and positioning. Unfortunately, browser support for these properties is limited and there are still styling cases not covered by these properties (directional glyphs, transforms, etc). That is why teh Genesis web framework provides several mechanisms to apply direction-based styles.

Usage

CSS

direction: var(--direction);

JavaScript

import {direction} from '@genesislcap/alpha-design-system';

const styles = css`
  :host {
    direction: ${direction};
}`;

disabledOpacity

This controls the opacity of disabled controls.

Usage

CSS

opacity: --disabled-opacity;

JavaScript

import {disabledOpacity} from '@genesislcap/alpha-design-system';

const styles = css`
  :host([disabled]) {
    opacity: ${disabledOpacity};
}`;

strokeWidth

Controls the width of the stroke of a component that has a stroke.

Usage

CSS

border: calc(var(--stroke-width)} * 1px) solid #000;

JavaScript

import {strokeWidth} from '@genesislcap/alpha-design-system';

const styles = css`
  :host {
    border: calc(${strokeWidth} * 1px) solid #000;
}`;

focusStrokeWidth

This controls the width of the stroke of a component that has a stroke when it has document focus.

Usage

CSS

box-shadow: 0 0 0 calc(var(--focus-stroke-width) * 1px) #333;

JavaScript

import {focusStrokeWidth} from '@genesislcap/alpha-design-system';

const styles = css`
  :host {
    box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) #333;
}`;