documentation/markdown/res/_variables.css
2024-06-19 16:20:50 -07:00

59 lines
2.2 KiB
CSS

/* ##### Variables ########## */
:root {
/* Typography */
--typography-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--typography-font-family-code: 'Lucida Console', Monaco, monospace;
--typography-font-size-x07500: calc(var(--typography-font-size-x10000) * 0.75);
--typography-font-size-x08750: calc(var(--typography-font-size-x10000) * 0.875);
--typography-font-size-x10000: 16px;
--typography-font-size-x12500: calc(var(--typography-font-size-x10000) * 1.25);
--typography-font-size-x15000: calc(var(--typography-font-size-x10000) * 1.5);
--typography-font-size-x20000: calc(var(--typography-font-size-x10000) * 2);
--typography-font-weight-regular: 400;
--typography-font-weight-bold: 700;
--typography-line-height-reset: 1;
--typography-line-height-tight: 1.2;
--typography-line-height-normal: 1.5;
/* Colors */
--color-gray-20: hsl(0, 0%, 20%);
--color-gray-40: hsl(0, 0%, 40%);
--color-gray-60: hsl(0, 0%, 60%);
--color-gray-80: hsl(0, 0%, 80%);
--color-gray-97: hsl(0, 0%, 97%);
--color-gray-100: hsl(0, 0%, 100%);
--color-azureradiance: hsl(210, 100%, 50%);
/* Borders */
--border: var(--sizing-x00625) solid var(--color-gray-80);
--border-radius-25: var(--sizing-x02500);
/* Sizing */
--sizing-x00625: calc(var(--sizing-x10000) * 0.0625);
--sizing-x02500: calc(var(--sizing-x10000) * 0.25);
--sizing-x05000: calc(var(--sizing-x10000) * 0.5);
--sizing-x10000: 16px;
--sizing-x12500: calc(var(--sizing-x10000) * 1.25);
--sizing-x15000: calc(var(--sizing-x10000) * 1.5);
--sizing-x20000: calc(var(--sizing-x10000) * 2);
--sizing-x30000: calc(var(--sizing-x10000) * 3);
/* Spacing */
--spacing-x00625: calc(var(--spacing-x10000) * 0.0625);
--spacing-x02500: calc(var(--spacing-x10000) * 0.25);
--spacing-x05000: calc(var(--spacing-x10000) * 0.5);
--spacing-x10000: 16px;
--spacing-x15000: calc(var(--spacing-x10000) * 1.5);
--spacing-x20000: calc(var(--spacing-x10000) * 2);
/* Custom sizes */
--toc-width: 340px;
--content-max-width: 1024px;
}