media/css/m24/root.scss (107 lines of code) (raw):

// This Source Code Form is subject to the terms of the Mozilla Public // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at https://mozilla.org/MPL/2.0/. @use 'vars/lib' as *; :root { // black and white --m24-white: #{$token-color-white}; --m24-off-white: #{$token-color-off-white}; --m24-black: #{$token-color-black}; --m24-off-black: #{$token-color-off-black}; // gray --m24-light-gray: #{$token-color-light-gray}; --m24-light-mid-gray: #{$token-color-light-mid-gray}; --m24-mid-gray: #{$token-color-mid-gray}; --m24-dark-mid-gray: #{$token-color-dark-mid-gray}; --m24-dark-gray: #{$token-color-dark-gray}; // green --m24-green: #{$token-color-green}; --m24-light-green: #{$token-color-light-green}; --m24-dark-green: #{$token-color-dark-green}; // pink --m24-pink: #{$token-color-pink}; --m24-light-pink: #{$token-color-light-pink}; --m24-dark-pink: #{$token-color-dark-pink}; // orange --m24-orange: #{$token-color-orange}; --m24-light-orange: #{$token-color-light-orange}; --m24-dark-orange: #{$token-color-dark-orange}; // grid --grid-margin: 16px; --grid-gutter: 8px; // spacers --spacer-3xl: 80px; --spacer-2xl: 64px; --spacer-xl: 32px; --spacer-lg: 24px; --spacer-md: 16px; --spacer-sm: 8px; --spacer-xs: 8px; --spacer-2xs: 4px; // container --container-padding: 16px; // titles --text-title-2xl: 48px; --text-title-xl: 32px; --text-title-lg: 24px; --text-title-md: 18px; --text-title-sm: 16px; --text-title-xs: 14px; // body --text-body-xl: 24px; --text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; // buttons --text-button-xl: 24px; --text-button-lg: 18px; --text-button-md: 16px; --text-button-sm: 14px; // labels --text-label: 12px; } @media #{$mq-md} { :root { // grid --grid-margin: 24px; --grid-gutter: 12px; // spacers --spacer-3xl: 128px; --spacer-2xl: 80px; --spacer-xl: 64px; --spacer-lg: 32px; --spacer-md: 24px; --spacer-sm: 16px; --spacer-xs: 8px; --spacer-2xs: 4px; // container --container-padding: 24px; // title --text-title-2xl: 80px; --text-title-xl: 64px; --text-title-lg: 48px; --text-title-md: 32px; --text-title-sm: 24px; --text-title-xs: 18px; // body --text-body-xl: 32px; --text-body-lg: 24px; --text-body-md: 18px; --text-body-sm: 16px; // buttons --text-button-xl: 32px; --text-button-lg: 24px; --text-button-md: 18px; --text-button-sm: 16px; // labels --text-label: 14px; } } @media #{$mq-xl} { :root { // grid --grid-margin: 32px; --grid-gutter: 16px; // spacers --spacer-3xl: 200px; --spacer-2xl: 128px; --spacer-xl: 64px; --spacer-lg: 32px; --spacer-md: 24px; --spacer-sm: 16px; --spacer-xs: 8px; --spacer-2xs: 4px; // container --container-padding: 32px; // titles --text-title-2xl: 128px; --text-title-xl: 80px; --text-title-lg: 64px; --text-title-md: 48px; --text-title-sm: 32px; --text-title-xs: 24px; // body --text-body-xl: 48px; --text-body-lg: 24px; --text-body-md: 18px; --text-body-sm: 16px; // buttons --text-button-xl: 48px; --text-button-lg: 32px; --text-button-md: 24px; --text-button-sm: 18px; // labels --text-label: 16px; } }