variables.css

/* variables */

/* should match --hiq-unitless-upper-font-range with px unit */
@custom-media --hiq-lower-font-range (min-width: 460px);
@custom-media --hiq-upper-font-range (min-width: 900px);

:root {
  /* theme variables */

  /* gray palette */
  --hiq-color-gray-1: hsl(220, 10%, 5%);
  --hiq-color-gray-2: hsl(220, 10%, 10%);
  --hiq-color-gray-3: hsl(220, 10%, 20%);
  --hiq-color-gray-4: hsl(220, 10%, 40%);
  --hiq-color-gray-5: hsl(220, 10%, 60%);
  --hiq-color-gray-6: hsl(220, 10%, 90%);
  --hiq-color-gray-7: hsl(220, 10%, 95%);
  --hiq-color-gray-8: hsl(220, 10%, 98%);

  /* semantic palette */
  --hiq-color-primary: hsl(210, 100%, 50%);
  --hiq-color-success: hsl(158, 73%, 48%);
  --hiq-color-warning: hsl(46, 97%, 64%);
  --hiq-color-danger: hsl(352, 95%, 61%);

  /* global applied colors */
  --hiq-html-background-color: white;
  --hiq-body-background-color: white;
  --hiq-disabled-border-color: var(--hiq-color-gray-7);
  --hiq-disabled-background-color: var(--hiq-color-gray-7);
  --hiq-disabled-text-color: var(--hiq-color-gray-5);

  /* layout variables */

  /* containers */
  --hiq-max-container-width: 50rem;
  --hiq-container-horizontal-gap: 2rem;

  /* spacing */
  --hiq-block-element-margin-bottom: 1rem;

  /* border & outline */
  --hiq-border-radius: 0.2rem;
  --hiq-outline-width: 0.2rem;
  --hiq-outline-color: hsl(210, 100%, 85%);

  /* transitions */
  --hiq-speed: 0.1s;
  --hiq-easing: ease-out;

  /* typography variables */

  /* global typography variables */
  --hiq-text-rendering: optimizeLegibility;
  --hiq-letter-spacing-base: 0;

  /* font families */
  /* stylelint-disable value-keyword-case */
  --hiq-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --hiq-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
  /* stylelint-enable value-keyword-case */

  /* responsive sizing */

  /* unitless base font size variables in px */
  --hiq-unitless-min-font-size: 15;
  --hiq-unitless-max-font-size: 18;

  /* unitless viewport widths in px when min/max font sizes will apply */
  --hiq-unitless-lower-font-range: 460;
  --hiq-unitless-upper-font-range: 900;

  /* font sizes */
  --hiq-font-size-1: 2.5rem;
  --hiq-font-size-2: 2rem;
  --hiq-font-size-3: 1.75rem;
  --hiq-font-size-4: 1.5rem;
  --hiq-font-size-5: 1rem;
  --hiq-font-size-6: 0.875rem;
  --hiq-font-size-base: var(--hiq-font-size-5);
  --hiq-font-size-large: var(--hiq-font-size-4);
  --hiq-font-size-small: var(--hiq-font-size-6);

  /* heading min/max font sizes */
  --hiq-min-font-size-1: var(--hiq-font-size-1);
  --hiq-max-font-size-1: var(--hiq-font-size-1);
  --hiq-min-font-size-2: var(--hiq-font-size-2);
  --hiq-max-font-size-2: var(--hiq-font-size-2);
  --hiq-min-font-size-3: var(--hiq-font-size-3);
  --hiq-max-font-size-3: var(--hiq-font-size-3);
  --hiq-min-font-size-4: var(--hiq-font-size-4);
  --hiq-max-font-size-4: var(--hiq-font-size-4);
  --hiq-min-font-size-5: var(--hiq-font-size-5);
  --hiq-max-font-size-5: var(--hiq-font-size-5);
  --hiq-min-font-size-6: var(--hiq-font-size-6);
  --hiq-max-font-size-6: var(--hiq-font-size-6);

  /* base unitless line heights */
  --hiq-line-height-base: 1.5;
  --hiq-heading-line-height: 1.2;

  /* font weights */
  --hiq-font-weight-light: 300;
  --hiq-font-weight-normal: 400;
  --hiq-font-weight-medium: 500;
  --hiq-font-weight-semibold: 600;
  --hiq-font-weight-bold: 700;

  /* applied font weights */
  --hiq-font-weight-base: var(--hiq-font-weight-normal);
  --hiq-heading-font-weight: var(--hiq-font-weight-medium);
  --hiq-description-list-title-font-weight: var(--hiq-font-weight-semibold);

  /* global text color */
  --hiq-text-color: var(--hiq-color-gray-2);

  /* inline text elements */
  --hiq-mark-color: hsl(50, 81%, 94%);
  --hiq-deleted-color: hsl(331, 93%, 67%);
  --hiq-inserted-color: hsl(210, 100%, 95%);

  /* user selection */
  --hiq-selection-color: hsl(210, 100%, 90%);

  /* lists */
  --hiq-list-margin-left: 1rem;
  --hiq-unordered-list-style: disc;

  /* blockquotes */
  --hiq-blockquote-font-size: var(--hiq-font-size-4);
  --hiq-blockquote-line-height: var(--hiq-heading-line-height);
  --hiq-blockquote-citation-color: var(--hiq-color-gray-5);

  /* horizontal rules */
  --hiq-horizontal-rule-height: 1px;
  --hiq-horizontal-rule-color: var(--hiq-color-primary);

  /* links */
  --hiq-link-color: var(--hiq-color-primary);
  --hiq-link-hover-color: hsl(210, 100%, 40%);
  --hiq-link-active-color: hsl(210, 100%, 40%);
  --hiq-link-text-decoration: none;

  /* visited colors */
  --hiq-link-visited-color: var(--hiq-link-color);
  --hiq-link-visited-hover-color: var(--hiq-link-hover-color);
  --hiq-link-visited-active-color: var(--hiq-link-active-color);

  /* button variables */

  --hiq-button-height: 2.25rem;
  --hiq-button-vertical-padding: 0;
  --hiq-button-horizontal-padding: 0.75rem;
  --hiq-button-border-width: 1px;
  --hiq-button-border-radius: var(--hiq-border-radius);
  --hiq-button-font-weight: var(--hiq-font-weight-medium);

  /* static colors */
  --hiq-button-border-color: var(--hiq-color-primary);
  --hiq-button-background-color: var(--hiq-color-primary);
  --hiq-button-text-color: white;

  /* hover colors */
  --hiq-button-hover-border-color: hsl(210, 100%, 40%);
  --hiq-button-hover-background-color: hsl(210, 100%, 40%);
  --hiq-button-hover-text-color: white;

  /* hover colors */
  --hiq-button-focus-border-color: var(--hiq-button-hover-border-color);
  --hiq-button-focus-background-color: var(--hiq-button-hover-background-color);
  --hiq-button-focus-text-color: var(--hiq-button-hover-text-color);

  /* active colors */
  --hiq-button-active-border-color: hsl(210, 100%, 30%);
  --hiq-button-active-background-color: hsl(210, 100%, 30%);
  --hiq-button-active-text-color: white;

  /* code element variables */

  /* code */
  --hiq-code-padding-vertical: 0.25rem;
  --hiq-code-padding-horizontal: 0.5rem;
  --hiq-code-border-color: var(--hiq-color-gray-6);
  --hiq-code-font-size: var(--hiq-font-size-small);
  --hiq-code-background-color: var(--hiq-color-gray-7);
  --hiq-code-text-color: var(--hiq-text-color);

  /* pre */
  --hiq-pre-padding-vertical: 1.25rem;
  --hiq-pre-padding-horizontal: 1.5rem;
  --hiq-pre-border-color: var(--hiq-color-gray-6);
  --hiq-pre-background-color: transparent;
  --hiq-pre-text-color: var(--hiq-color-gray-4);

  /* kbd */
  --hiq-kbd-padding-vertical: 0.2rem;
  --hiq-kbd-padding-horizontal: 0.4rem;
  --hiq-kbd-border-color: var(--hiq-color-gray-6);
  --hiq-nested-kbd-font-weight: var(--hiq-font-weight-medium);
  --hiq-kbd-background-color: transparent;
  --hiq-kbd-text-color: var(--hiq-text-color);

  /* media/embed variables */

  --hiq-figcaption-margin-top: 0.5rem;
  --hiq-figcaption-font-weight: var(--hiq-font-weight-normal);
  --hiq-figcaption-text-color: var(--hiq-color-gray-5);
  --hiq-image-border-radius: var(--hiq-border-radius);

  /* table variables */

  --hiq-table-head-border-width: var(--hiq-table-cell-border-width);
  --hiq-table-foot-border-width: var(--hiq-table-cell-border-width);
  --hiq-table-caption-padding-vertical: 0.5rem;
  --hiq-table-caption-text-color: var(--hiq-color-gray-5);
  --hiq-table-caption-font-weight: var(--hiq-font-weight-semibold);
  --hiq-table-cell-padding-vertical: 0.5rem;
  --hiq-table-cell-padding-horizontal: 0.75rem;
  --hiq-table-cell-border-width: 1px;
  --hiq-table-cell-border-color: var(--hiq-color-gray-6);
  --hiq-table-heading-background-color: var(--hiq-color-gray-7);
  --hiq-table-heading-text-color: var(--hiq-color-gray-4);
  --hiq-table-heading-font-weight: var(--hiq-font-weight-medium);

  /* forms/inputs variables */

  /* fieldsets */
  --hiq-fieldset-padding-vertical: 0;
  --hiq-fieldset-padding-horizontal: 0;
  --hiq-fieldset-border-width: 0;
  --hiq-fieldset-border-color: transparent;

  /* legends */
  --hiq-legend-margin-bottom: var(--hiq-block-element-margin-bottom);
  --hiq-legend-font-weight: var(--hiq-font-weight-semibold);

  /* labels */
  --hiq-label-margin-bottom: 0.5rem;
  --hiq-label-font-weight: var(--hiq-font-weight-semibold);

  /* input validation */
  --hiq-input-invalid-border-color: var(--hiq-color-danger);
  --hiq-input-valid-border-color: var(--hiq-input-border-color);

  /* text inputs */
  --hiq-input-height: 2.5rem;
  --hiq-input-padding-vertical: 0;
  --hiq-input-padding-horizontal: 0.75rem;
  --hiq-input-border-width: 1px;
  --hiq-input-border-radius: var(--hiq-border-radius);

  /* static input colors */
  --hiq-input-border-color: var(--hiq-color-gray-6);
  --hiq-input-background-color: white;
  --hiq-input-text-color: var(--hiq-text-color);
  --hiq-input-placeholder-color: var(--hiq-color-gray-4);

  /* hover input colors */
  --hiq-input-hover-border-color: var(--hiq-input-border-color);
  --hiq-input-hover-background-color: var(--hiq-input-background-color);
  --hiq-input-hover-text-color: var(--hiq-input-text-color);

  /* focus input colors */
  --hiq-input-focus-border-color: var(--hiq-input-border-color);
  --hiq-input-focus-background-color: var(--hiq-input-background-color);
  --hiq-input-focus-text-color: var(--hiq-input-text-color);

  /* textareas */
  --hiq-textarea-padding-vertical: 0.5rem;
  --hiq-textarea-padding-horizontal: 0.75rem;

  /* selects */
  --hiq-select-background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2230px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2030%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cg%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%28-137.000000%2C%20-145.000000%29%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%22152%20161%20137%20145%20167%20145%22%3E%3C/polygon%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E');
  --hiq-select-background-position: right 1rem center;
  --hiq-select-background-size: 0.75rem;
  --hiq-select-multiple-checked-background-color: var(--hiq-color-primary);
  --hiq-select-multiple-padding-vertical: 0.75rem;

  /* checkboxes */
  --hiq-checkbox-margin-bottom: 0.5rem;
  --hiq-checkbox-label-padding-horizontal: 2rem;
  --hiq-checkbox-label-font-weight: var(--hiq-font-weight-normal);
  --hiq-checkbox-width: 1rem;
  --hiq-checkbox-height: 1rem;
  --hiq-checkbox-border-width: 1px;
  --hiq-checkbox-border-color: transparent;
  --hiq-checkbox-border-radius: var(--hiq-border-radius);
  --hiq-checkbox-background-color: var(--hiq-color-gray-6);
  --hiq-checkbox-hover-background-color: var(--hiq-color-gray-5);
  --hiq-checkbox-focus-background-color: var(--hiq-color-gray-5);
  --hiq-checkbox-checked-border-color: var(--hiq-color-primary);
  --hiq-checkbox-checked-background-color: var(--hiq-color-primary);
  --hiq-checkbox-check-width: 0.25rem;
  --hiq-checkbox-check-height: 0.5rem;
  --hiq-checkbox-check-border-width: 2px;
  --hiq-checkbox-check-color: white;
  --hiq-checkbox-indeterminate-width: 0.5rem;

  /* radio buttons */
  --hiq-radio-margin-bottom: 0.5rem;
  --hiq-radio-label-padding-horizontal: 2rem;
  --hiq-radio-label-font-weight: var(--hiq-font-weight-normal);
  --hiq-radio-width: 1rem;
  --hiq-radio-height: 1rem;
  --hiq-radio-border-width: 1px;
  --hiq-radio-border-color: transparent;
  --hiq-radio-border-radius: 50%;
  --hiq-radio-background-color: var(--hiq-color-gray-6);
  --hiq-radio-hover-background-color: var(--hiq-color-gray-5);
  --hiq-radio-focus-background-color: var(--hiq-color-gray-5);
  --hiq-radio-checked-border-color: var(--hiq-color-primary);
  --hiq-radio-checked-background-color: var(--hiq-color-primary);
  --hiq-radio-check-width: 0.5rem;
  --hiq-radio-check-height: 0.5rem;
  --hiq-radio-check-border-radius: 50%;
  --hiq-radio-check-background-color: white;

  /* range inputs */
  --hiq-range-input-thumb-width: 1.5rem;
  --hiq-range-input-thumb-height: 1.5rem;
  --hiq-range-input-thumb-border-radius: 50%;
  --hiq-range-input-thumb-background-color: var(--hiq-color-primary);
  --hiq-range-input-thumb-disabled-background-color: var(--hiq-color-gray-6);
  --hiq-range-input-track-height: 0.5rem;
  --hiq-range-input-track-border-radius: var(--hiq-border-radius);
  --hiq-range-input-track-background-color: var(--hiq-color-gray-6);

  /* color inputs */
  --hiq-color-input-background-color: var(--hiq-color-gray-6);

  /* progress/meter variables */

  /* meters */
  --hiq-meter-background-color: var(--hiq-color-gray-6);
  --hiq-meter-strong-color: var(--hiq-color-success);
  --hiq-meter-good-color: var(--hiq-color-warning);
  --hiq-meter-weak-color: var(--hiq-color-danger);

  /* progress */
  --hiq-progress-height: 1rem;
  --hiq-progress-background-color: var(--hiq-color-gray-6);
  --hiq-progress-filled-color: var(--hiq-color-primary);

  /* dialogs */
  --hiq-dialog-border-radius: var(--hiq-border-radius);
}