Shoelace

The Shoelace implementation of the Abstract Design System (ADS), one of the two shipped with Cristal.

CSS Variables

Shoelace ships a design token system of its own, so most of these properties are aliases of a Shoelace token. The sizes and the base colors are the exception, and hold literal values.

Design System API

The properties every ADS implementation declares, as Shoelace declares them.

:root {
  /* Sizes */
  --cr-sizes-max-page-width: 960px; /*This value controls the width of the main content. It should be 100% for spanning text along the whole width or an arbitraty value*/
  --cr-sizes-main-sidebar-width: 15%; /*The default width of the main sidebar*/
  --cr-sizes-main-sidebar-min-width: 250px; /*The minimum width of the main sidebar*/

  /* Base */
  --cr-base-font-size: 16px;
  --cr-base-text-color: var(--cr-color-gray-950);
  --cr-base-link-color: var(--cr-color-sky-700);
  --cr-base-visited-link-color: var(--cr-color-blue-700);
  --cr-mute-text-color: var(--cr-color-neutral-600);

  /* Fonts */
  --cr-font-mono: var(--sl-font-mono);
  --cr-font-sans: var(--sl-font-sans);
  --cr-font-serif: var(--sl-font-serif);

  /* Font sizes */
  --cr-font-size-2x-small: var(--sl-font-size-2x-small);
  --cr-font-size-x-small: var(--sl-font-size-x-small);
  --cr-font-size-small: var(--sl-font-size-small);
  --cr-font-size-medium: var(--sl-font-size-medium);
  --cr-font-size-large: var(--sl-font-size-large);
  --cr-font-size-x-large: var(--sl-font-size-x-large);
  --cr-font-size-2x-large: var(--sl-font-size-2x-large);
  --cr-font-size-3x-large: var(--sl-font-size-3x-large);
  --cr-font-size-4x-large: var(--sl-font-size-4x-large);

  /* Font weights */
  --cr-font-weight-light: var(--sl-font-weight-light);
  --cr-font-weight-normal: var(--sl-font-weight-normal);
  --cr-font-weight-semibold: var(--sl-font-weight-semibold);
  --cr-font-weight-bold: var(--sl-font-weight-bold);

  /* Letter spacings */
  --cr-letter-spacing-denser: var(--sl-letter-spacing-denser);
  --cr-letter-spacing-dense: var(--sl-letter-spacing-dense);
  --cr-letter-spacing-normal: var(--sl-letter-spacing-normal);
  --cr-letter-spacing-loose: var(--sl-letter-spacing-loose);
  --cr-letter-spacing-looser: var(--sl-letter-spacing-looser);

  /* Line heights */
  --cr-line-height-denser: var(--sl-line-height-denser);
  --cr-line-height-dense: var(--sl-line-height-dense);
  --cr-line-height-normal: var(--sl-line-height-normal);
  --cr-line-height-loose: var(--sl-line-height-loose);
  --cr-line-height-looser: var(--sl-line-height-looser);

  /* Neutral colors */
  --cr-color-neutral-50: var(--sl-color-gray-50);
  --cr-color-neutral-100: var(--sl-color-gray-100);
  --cr-color-neutral-200: var(--sl-color-gray-200);
  --cr-color-neutral-300: var(--sl-color-gray-300);
  --cr-color-neutral-400: var(--sl-color-gray-400);
  --cr-color-neutral-500: var(--sl-color-gray-500);
  --cr-color-neutral-600: var(--sl-color-gray-600);
  --cr-color-neutral-700: var(--sl-color-gray-700);
  --cr-color-neutral-800: var(--sl-color-gray-800);
  --cr-color-neutral-900: var(--sl-color-gray-900);
  --cr-color-neutral-950: var(--sl-color-gray-950);

  /* Border radii */
  --cr-border-radius-small: 0.1875rem; /* 3px */
  --cr-border-radius-medium: 0.25rem; /* 4px */
  --cr-border-radius-large: 0.5rem; /* 8px */
  --cr-border-radius-x-large: 1rem; /* 16px */
  --cr-border-radius-circle: 50%;
  --cr-border-radius-pill: 9999px;

  /* Spacings */
  --cr-spacing-3x-small: var(--sl-spacing-3x-small);
  --cr-spacing-2x-small: var(--sl-spacing-2x-small);
  --cr-spacing-x-small: var(--sl-spacing-x-small);
  --cr-spacing-small: var(--sl-spacing-small);
  --cr-spacing-medium: var(--sl-spacing-medium);
  --cr-spacing-large: var(--sl-spacing-large);
  --cr-spacing-x-large: var(--sl-spacing-x-large);
  --cr-spacing-2x-large: var(--sl-spacing-2x-large);
  --cr-spacing-3x-large: var(--sl-spacing-3x-large);
  --cr-spacing-4x-large: var(--sl-spacing-4x-large);

  /* Input */
  --cr-input-border-color: var(--sl-input-border-color);
  --cr-input-border-width: var(--sl-input-border-width);
}

Additional Properties

335 further properties are declared, which are not part of the ADS.

Color primitives  --cr-color-<hue>-<step>, for the 18 hues gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose, in the 11 steps 50 to 950
Theme tokens      --cr-color-<role>-<step>, for the 4 roles primary, success, warning and danger, in the same 11 steps
Sizes             --cr-sizes-main-sidebar-header-min-height and --cr-sizes-collapsed-main-sidebar-width
Focus rings       --cr-focus-ring, plus its -color, -style, -width and -offset
Elevations        --cr-shadow-x-small, -small, -medium, -large and -x-large
Transitions       --cr-transition-x-slow, -slow, -medium, -fast and -x-fast
Buttons           --cr-button-font-size-small, -medium and -large
Inputs            --cr-input-<aspect>, covering height, background color, border color states and radius, font, letter spacing, text and icon and placeholder colors, spacing, focus ring, filled variants, required content, label and help text
Toggles           --cr-toggle-size-small, -medium and -large
Overlays          --cr-overlay-background-color
Panels            --cr-panel-background-color, --cr-panel-border-color and --cr-panel-border-width
Tooltips          --cr-tooltip-<aspect>, covering border radius, background color, color, font family and weight and size, line height, padding and arrow size
Z-indexes         --cr-z-index-drawer, -dialog, -dropdown, -toast and -tooltip