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;
}
}