Tokens
CSS custom properties (variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
Set using custom property notation --prs-c-red: red
/* tokens - 🚧 WIP */
:root {
/* black */
--prs-c-black: #000; /* black */
/* white */
--prs-c-white: #FFF; /* white */
/* gray */
--prs-c-gray-900: #080808; /* (900) blackish */
--prs-c-gray-800: #242424; /* (800) ultra-dark */
--prs-c-gray-700: #383838; /* (700) very-dark */
--prs-c-gray-600: #686868; /* (600) dark */
--prs-c-gray-500: #989898; /* (500) medium-dark */
--prs-c-gray: var(--prs-c-gray-500);
--prs-c-gray-400: #C8C8C8; /* (400) medium */
--prs-c-gray-300: #DDDDDD; /* (300) light */
--prs-c-gray-200: #F3F3F3; /* (200) very-light */
--prs-c-gray-100: #F8F8F8; /* (100) off-white */
/* aqua */
--prs-c-aqua-600: #205460; /* (600) dark */
--prs-c-aqua-500: #00758E; /* (500) DEFAULT */
--prs-c-aqua: var(--prs-c-aqua-500);
--prs-c-aqua-400: #45A5B5; /* (400) medium */
--prs-c-aqua-300: #A2D6DD; /* (300) light */
--prs-c-aqua-200: #CFF3F9; /* (200) very-light */
/* red */
--prs-c-red-600: #A51426; /* (600) dark */
--prs-c-red-500: #DA1B2C; /* (500) DEFAULT */
--prs-c-red: var(--prs-c-red-500);
--prs-c-red-400: #EF5656; /* (400) medium */
--prs-c-red-300: #FFAFAF; /* (300) light */
--prs-c-red-200: #FFE7E5; /* (200) very-light */
/* green */
--prs-c-green-600: #2C5E20; /* (600) dark */
--prs-c-green-500: #3B822E; /* (500) DEFAULT */
--prs-c-green: var(--prs-c-green-500);
--prs-c-green-400: #68B75F; /* (400) medium */
--prs-c-green-300: #ACDBA2; /* (300) light */
--prs-c-green-200: #DAF4D4; /* (200) very-light */
/* blue */
--prs-c-blue-600: #004C72; /* (600) dark */
--prs-c-blue-500: #006EB8; /* (500) DEFAULT */
--prs-c-blue: var(--prs-c-blue-500);
--prs-c-blue-400: #3192D3; /* (400) medium */
--prs-c-blue-300: #B0DAFF; /* (300) light */
--prs-c-blue-200: #E0F1FF; /* (200) very-light */
/* orange */
--prs-c-orange-600: #A83D0E; /* (600) dark */
--prs-c-orange-500: #DD5714; /* (500) DEFAULT */
--prs-c-orange: var(--prs-c-orange-500);
--prs-c-orange-400: #FF8A57; /* (400) medium */
--prs-c-orange-300: #FFC196; /* (300) light */
--prs-c-orange-200: #FFE5D3; /* (200) very-light */
/* teal */
--prs-c-teal-600: #16664B; /* (600) dark */
--prs-c-teal-500: #218466; /* (500) DEFAULT */
--prs-c-teal: var(--prs-c-teal-500);
--prs-c-teal-400: #5FB79C; /* (400) medium */
--prs-c-teal-300: #AEE5D3; /* (300) light */
--prs-c-teal-200: #DBFFF3; /* (200) very-light */
/* yellow */
--prs-c-yellow-600: #74600C; /* (600) dark */
--prs-c-yellow-500: #B79E25; /* (500) DEFAULT */
--prs-c-yellow: var(--prs-c-yellow-500);
--prs-c-yellow-400: #E5D676; /* (400) medium */
--prs-c-yellow-300: #FAF2A9; /* (300) light */
--prs-c-yellow-200: #FFFBD7; /* (200) very-light */
/* purple */
--prs-c-purple-600: #543B50; /* (600) dark */
--prs-c-purple-500: #865F7F; /* (500) DEFAULT */
--prs-c-purple: var(--prs-c-purple-500);
--prs-c-purple-400: #B286AF; /* (400) medium */
--prs-c-purple-300: #E5C6E3; /* (300) light */
--prs-c-purple-200: #FFE6FD; /* (200) very-light */
/* magenta */
--prs-c-magenta-600: #562135; /* (600) dark */
--prs-c-magenta-500: #882345; /* (500) DEFAULT */
--prs-c-magenta: var(--prs-c-magenta-500);
--prs-c-magenta-400: #B26487; /* (400) medium */
--prs-c-magenta-300: #EDB0CE; /* (300) light */
--prs-c-magenta-200: #FFE6F3; /* (200) very-light */
/* navy */
--prs-c-navy-600: #142A35; /* (600) dark */
--prs-c-navy-500: #1E3F52; /* (500) DEFAULT */
--prs-c-navy: var(--prs-c-navy-500);
--prs-c-navy-400: #2D5F7B; /* (400) medium */
--prs-c-navy-300: #7AA0B8; /* (300) light */
--prs-c-navy-200: #E0EAF0; /* (200) very-light */
/* typography */
--prs-t-sans: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--prs-t-serif: 'Source Serif Pro', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--prs-t-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--prs-t-websafe: Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--prs-t-base: normal 16px/1.5;
/* typography - heading */
--prs-t-heading-xl: semibold 2rem/1.5;
--prs-t-heading-lg: semibold 1.5rem/1.33;
--prs-t-heading-md: semibold 1.125rem/1.33;
--prs-t-heading-sm: semibold 1rem/1.25;
/* typography - content */
--prs-t-content: normal 1.0625rem/1.59;
--prs-t-content-footnote: normal 0.8125rem/1.54;
/* typography - ui */
--prs-t-ui-lg: normal 1.125rem/1.33;
--prs-t-ui-md: normal 1rem/1.5;
--prs-t-ui-sm: normal 0.875rem/1.375rem;
--prs-t-ui-subtext: normal 0.8125rem/1.38;
/* typography - button */
--prs-t-button-lg: normal 1.125rem/1.11;
--prs-t-button-md: normal 0.9375rem/1.33;
--prs-t-button-sm: normal 0.75rem/1.67;
/* border */
--prs-border-btn: 1px;
/* cal */
--prs-cal-width: 15.875rem;
--prs-cal-radius: 0;
--prs-cal-day-radius: 0.3125rem;
--prs-cal-day-selected: var(--prs-c-aqua);
/* dialog */
--prs-dialog-backdrop: 0 0 0 / 0.5;
/* radius */
--prs-radius-alert: 0.25rem;
--prs-radius-badge: 1.9rem;
--prs-radius-box: 0.75rem;
--prs-radius-btn: 0.1875rem;
--prs-radius-input: 0 /* 0.1875rem */;
/* transition */
--prs-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, outline-color, box-shadow, transform, filter, backdrop-filter;
--prs-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
--prs-transition-duration: 150ms;
}