Miscellanous tokens

There are a number of useful additional tokens you may want to use in your application.

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/rapid-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/rapid-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/rapid-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/rapid-design-system';

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