Vuetify

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

CSS Variables

Vuetify exposes no design token system of its own, so this implementation declares literal values: its own color palette, its own font stacks, and its own elevation, transition and z-index values.

Design System API

The properties every ADS implementation declares, as Vuetify 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: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --cr-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --cr-font-serif: Georgia, 'Times New Roman', serif;

  /* Font sizes */
  --cr-font-size-2x-small: 0.625rem; /* 10px */
  --cr-font-size-x-small: 0.75rem; /* 12px */
  --cr-font-size-small: 0.875rem; /* 14px */
  --cr-font-size-medium: 1rem; /* 16px */
  --cr-font-size-large: 1.25rem; /* 20px */
  --cr-font-size-x-large: 1.5rem; /* 24px */
  --cr-font-size-2x-large: 2.25rem; /* 36px */
  --cr-font-size-3x-large: 3rem; /* 48px */
  --cr-font-size-4x-large: 4.5rem; /* 72px */

  /* Font weights */
  --cr-font-weight-light: 300;
  --cr-font-weight-normal: 400;
  --cr-font-weight-semibold: 500;
  --cr-font-weight-bold: 700;

  /* Letter spacings */
  --cr-letter-spacing-denser: -0.03em;
  --cr-letter-spacing-dense: -0.015em;
  --cr-letter-spacing-normal: normal;
  --cr-letter-spacing-loose: 0.075em;
  --cr-letter-spacing-looser: 0.15em;

  /* Line heights */
  --cr-line-height-denser: 1;
  --cr-line-height-dense: 1.4;
  --cr-line-height-normal: 1.8;
  --cr-line-height-loose: 2.2;
  --cr-line-height-looser: 2.6;

  /* Neutral colors */
  --cr-color-neutral-50: var(--cr-color-gray-50);
  --cr-color-neutral-100: var(--cr-color-gray-100);
  --cr-color-neutral-200: var(--cr-color-gray-200);
  --cr-color-neutral-300: var(--cr-color-gray-300);
  --cr-color-neutral-400: var(--cr-color-gray-400);
  --cr-color-neutral-500: var(--cr-color-gray-500);
  --cr-color-neutral-600: var(--cr-color-gray-600);
  --cr-color-neutral-700: var(--cr-color-gray-700);
  --cr-color-neutral-800: var(--cr-color-gray-800);
  --cr-color-neutral-900: var(--cr-color-gray-900);
  --cr-color-neutral-950: var(--cr-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: 0.125rem; /* 2px */
  --cr-spacing-2x-small: 0.25rem; /* 4px */
  --cr-spacing-x-small: 0.5rem; /* 8px */
  --cr-spacing-small: 0.75rem; /* 12px */
  --cr-spacing-medium: 1rem; /* 16px */
  --cr-spacing-large: 1.25rem; /* 20px */
  --cr-spacing-x-large: 1.75rem; /* 28px */
  --cr-spacing-2x-large: 2.25rem; /* 36px */
  --cr-spacing-3x-large: 3rem; /* 48px */
  --cr-spacing-4x-large: 4.5rem; /* 72px */

  /* Input */
  --cr-input-border-color: var(--cr-color-neutral-300);
  --cr-input-border-width: 1px;
}

Additional Properties

337 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
Neutral extremes  --cr-color-neutral-0 and --cr-color-neutral-1000
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