@pantheon-systems/pds-design-tokens
Version:
Design Tokens for the Pantheon Design System
131 lines (129 loc) • 6.22 kB
CSS
/**
*
* Pantheon Systems
*
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
* !! DO NOT EDIT THIS FILE DIRECTLY !!
* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*
* This file has been generated automatically.
*/
:root {
--pds-animation-button-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
--pds-animation-focus-transition: outline var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
--pds-animation-input-transition: background-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay), border-color var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
--pds-animation-link-transition: all var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
--pds-animation-reveal-transition: all var(--pds-animation-transition-reveal-duration) var(--pds-animation-transition-default-timing-function);
--pds-animation-rotation-transition: transform var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay);
--pds-animation-transition-default-delay: 0s;
--pds-animation-transition-default-duration: 200ms;
--pds-animation-transition-default-timing-function: ease-in-out;
--pds-animation-transition-dropdown-duration: 300ms;
--pds-animation-transition-reveal-duration: 300ms;
--pds-border-offset-default: 1px;
--pds-border-offset-double: 2px;
--pds-border-offset-triple: 3px;
--pds-border-radius-bar: 3.5rem;
--pds-border-radius-button: 0.1875rem;
--pds-border-radius-container: 0.375rem;
--pds-border-radius-default: 0.1875rem;
--pds-border-radius-input: 0.25rem;
--pds-border-width-default: 1px;
--pds-border-width-double: 2px;
--pds-border-width-outline: 1px;
--pds-border-width-stepper: 3px;
--pds-border-width-triple: 3px;
--pds-container-max-width-narrow: 1024px;
--pds-container-max-width-standard: 1200px;
--pds-container-max-width-wide: 1440px;
--pds-container-max-width-x-wide: 1600px;
--pds-container-modal-width-large: 44rem;
--pds-container-modal-width-medium: 36rem;
--pds-container-modal-width-small: 25rem;
--pds-container-modal-width-xl: 60rem;
--pds-container-padding-base: var(--pds-spacing-xl);
--pds-container-padding-narrow-bp-lg: 20%;
--pds-container-padding-narrow-bp-md: 12%;
--pds-container-padding-standard-bp-lg: 8%;
--pds-container-padding-standard-bp-md: 6%;
--pds-container-padding-wide-bp-lg: 4%;
--pds-container-padding-wide-bp-md: 5%;
--pds-container-tooltip-max-width: 12.5rem;
--pds-grid-marketing-column-medium-large: 4.36875%;
--pds-grid-marketing-column-small: 21.34375%;
--pds-grid-marketing-gap-medium-large: 4.325%;
--pds-grid-marketing-gap-small: 4.875%;
--pds-spacing-2xl: 1.953rem;
--pds-spacing-2xs: 0.512rem;
--pds-spacing-3xl: 2.441rem;
--pds-spacing-3xs: 0.41rem;
--pds-spacing-4xl: 3.052rem;
--pds-spacing-4xs: 0.328rem;
--pds-spacing-5xl: 3.815rem;
--pds-spacing-5xs: 0.25rem;
--pds-spacing-6xl: 4.678rem;
--pds-spacing-6xs: 0.125rem;
--pds-spacing-7xl: 5.96rem;
--pds-spacing-8xl: 7.451rem;
--pds-spacing-button-lg-height: 3rem;
--pds-spacing-button-lg-padding-block: 0.9375rem;
--pds-spacing-button-lg-padding-inline: 1.25rem;
--pds-spacing-button-md-height: 2.25rem;
--pds-spacing-button-md-padding-block: 0.625rem;
--pds-spacing-button-md-padding-inline: 0.8125rem;
--pds-spacing-button-sm-height: 2rem;
--pds-spacing-button-sm-padding-block: 0.5rem;
--pds-spacing-button-sm-padding-inline: 0.625rem;
--pds-spacing-dashboard-nav-item-height: 2.25rem;
--pds-spacing-dashboard-nav-item-padding: 0.625rem;
--pds-spacing-l: 1.25rem;
--pds-spacing-m: 1rem;
--pds-spacing-s: 0.8rem;
--pds-spacing-xl: 1.563rem;
--pds-spacing-xs: 0.64rem;
--pds-typography-ff-code: 'Source Code Pro', monospace;
--pds-typography-ff-default: 'Poppins', sans-serif;
--pds-typography-ff-mono: 'Source Code Pro', monospace;
--pds-typography-ff-sans: 'Poppins', sans-serif;
--pds-typography-ff-secondary: 'Aleo', serif;
--pds-typography-ff-serif: 'Aleo', serif;
--pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
--pds-typography-fw-bold: 700;
--pds-typography-fw-light: 300;
--pds-typography-fw-medium: 500;
--pds-typography-fw-regular: 400;
--pds-typography-fw-semibold: 600;
--pds-typography-lh-l: 165%;
--pds-typography-lh-m: 140%;
--pds-typography-lh-s: 120%;
--pds-typography-lh-xl: 195%;
--pds-typography-ls-l: 0.04rem;
--pds-typography-ls-m: 0.02rem;
--pds-typography-ls-s: 0.01rem;
--pds-typography-ls-xl: 0.06rem;
--pds-typography-multiplier-medium: 0.88;
--pds-typography-multiplier-small: 0.84;
--pds-typography-size-2xl: 1.728rem;
--pds-typography-size-3xl: 2.074rem;
--pds-typography-size-4xl: 2.488rem;
--pds-typography-size-5xl: 2.986rem;
--pds-typography-size-6xl: 3.583rem;
--pds-typography-size-7xl: 4.3rem;
--pds-typography-size-8xl: 5.160rem;
--pds-typography-size-9xl: 6.192rem;
--pds-typography-size-code-block: 0.9rem;
--pds-typography-size-default: 1rem;
--pds-typography-size-input-label: 1rem;
--pds-typography-size-l: 1.2rem;
--pds-typography-size-m: 1rem;
--pds-typography-size-s: 0.833rem;
--pds-typography-size-xl: 1.44rem;
--pds-typography-size-xs: 0.694rem;
--pds-z-index-dropdown: 300;
--pds-z-index-max: 9999;
--pds-z-index-modal: 900;
--pds-z-index-navigation: 100;
--pds-z-index-notifications: 500;
--pds-z-index-overlay: 700;
--pds-z-index-reset: 0;
}