Design System Tokens - Miscellaneous

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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>. Part of the name before the hyphen is called 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 FAST provides several mechanisms to apply direction-based styles.

Usage

<Tabs defaultValue="css" values={[ { label: 'CSS', value: 'css', }, { label: 'JavaScript', value: 'token', } ] }>

direction: var(--direction);

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

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

disabledOpacity

This controls the opacity of disabled controls.

Usage

<Tabs defaultValue="css" values={[ { label: 'CSS', value: 'css', }, { label: 'JavaScript', value: 'token', } ] }>

opacity: --disabled-opacity;

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

<Tabs defaultValue="css" values={[ { label: 'CSS', value: 'css', }, { label: 'JavaScript', value: 'token', } ] }>

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

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

<Tabs defaultValue="css" values={[ { label: 'CSS', value: 'css', }, { label: 'JavaScript', value: 'token', } ] }>

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

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

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