@use 'sass:math'; @use 'sass:map'; @use 'sass:meta'; @use '../tools/functions' as *; $color-pack: true !default; $reset: true !default; $misc: () !default; $misc: map-deep-merge( ( elevation: true, hidden: true, 'sr-only': true, 'pointer-events': true, ), $misc ); $body-font-family: var(--v-font-body, 'Roboto', sans-serif) !default; $font-size-root: 1rem !default; $line-height-root: 1.5 !default; $border-color-root: rgba(var(--v-border-color), var(--v-border-opacity)) !default; $border-radius-root: 4px !default; $border-style-root: solid !default; $border-width-root: thin !default; $transition-duration-root: 0.3s !default; $transition-move-duration-root: 0.5s !default; $borders: () !default; $borders: map-deep-merge( ( 0: 0, null: $border-width-root, thin: $border-width-root, sm: 1px, md: 2px, lg: 4px, xl: 8px ), $borders ); @each $key, $border in $borders { $borders: map-deep-merge( $borders, ( $key: $border $border-style-root $border-color-root ) ) } $border-opacities: () !default; $border-opacities: map-deep-merge( ( 0: 0, null: .12, 25: .25, 50: .50, 75: .75, 100: 1 ), $border-opacities ); $opacities: () !default; $opacities: map-deep-merge( ( hover: var(--v-hover-opacity), focus: var(--v-focus-opacity), selected: var(--v-selected-opacity), activated: var(--v-activated-opacity), pressed: var(--v-pressed-opacity), dragged: var(--v-dragged-opacity), 0: 0, 10: .1, 20: .2, 30: .3, 40: .4, 50: .5, 60: .6, 70: .7, 80: .8, 90: .9, 100: 1 ), $opacities ); $states: () !default; $states: map-deep-merge( ( 'hover': var(--v-hover-opacity), 'focus': var(--v-focus-opacity), 'selected': var(--v-selected-opacity), 'activated': var(--v-activated-opacity), 'pressed': var(--v-pressed-opacity), 'dragged': var(--v-dragged-opacity) ), $states ); $rounded: () !default; $rounded: map-deep-merge( ( 0: 0, 'sm': $border-radius-root * .5, null: $border-radius-root, 'md': $border-radius-root, 'lg': $border-radius-root * 2, 'xl': $border-radius-root * 6, 'pill': 9999px, 'circle': 50%, 'shaped': $border-radius-root * 6 0 ), $rounded ); $spacer: 4px !default; $spacers-steps: 16 !default; $spacers: () !default; @if (meta.type-of($spacers) == list) { @for $i from 0 through $spacers-steps { $spacers: map.merge($spacers, ($i: $spacer * $i)) } } $negative-spacers: () !default; @if (meta.type-of($negative-spacers) == list) { @for $i from 1 through $spacers-steps { $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i)) } } $grid-breakpoints: () !default; $grid-breakpoints: map-deep-merge( ( 'xs': 0, 'sm': 600px, 'md': 840px, 'lg': 1145px, 'xl': 1545px, 'xxl': 2138px, ), $grid-breakpoints ); $grid-gutter: $spacer * 6 !default; $grid-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; $grid-columns: 12 !default; $container-padding-x: $spacer * 4 !default; $container-max-widths: () !default; $container-max-widths: map-deep-merge( ( 'xs': null, 'sm': null, 'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375), 'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375), 'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375), 'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375), ), $container-max-widths ); // Avoid using *-and-down where possible $display-breakpoints: () !default; $display-breakpoints: map-deep-merge( ( 'print-only': 'only print', 'screen-only': 'only screen', 'xs': '(max-width: #{map.get($grid-breakpoints, 'sm') - 0.02})', 'sm': '(min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 0.02})', 'md': '(min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})', 'lg': '(min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})', 'xl': '(min-width: #{map.get($grid-breakpoints, 'xl')}) and (max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})', 'xxl': '(min-width: #{map.get($grid-breakpoints, 'xxl')})', 'sm-and-up': '(min-width: #{map.get($grid-breakpoints, 'sm')})', 'md-and-up': '(min-width: #{map.get($grid-breakpoints, 'md')})', 'lg-and-up': '(min-width: #{map.get($grid-breakpoints, 'lg')})', 'xl-and-up': '(min-width: #{map.get($grid-breakpoints, 'xl')})', 'sm-and-down': '(max-width: #{map.get($grid-breakpoints, 'md') - 0.02})', 'md-and-down': '(max-width: #{map.get($grid-breakpoints, 'lg') - 0.02})', 'lg-and-down': '(max-width: #{map.get($grid-breakpoints, 'xl') - 0.02})', 'xl-and-down': '(max-width: #{map.get($grid-breakpoints, 'xxl') - 0.02})', ), $display-breakpoints ); $font-weights: () !default; $font-weights: map-deep-merge( ( 'thin': 100, 'light': 300, 'regular': 400, 'medium': 500, 'semibold': 600, 'bold': 700, 'black': 900 ), $font-weights ); $heading-font-family: var(--v-font-heading, #{$body-font-family}) !default; $typography: () !default; $typography: map-deep-merge( ( 'display-large': ( 'size': 3.5625rem, 'weight': 400, 'line-height': 1.1228070175, 'letter-spacing': -.0043859649em, 'font-family': $heading-font-family ), 'display-medium': ( 'size': 2.8125rem, 'weight': 400, 'line-height': 1.1555555556, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'display-small': ( 'size': 2.25rem, 'weight': 400, 'line-height': 1.2222222222, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'headline-large': ( 'size': 2rem, 'weight': 400, 'line-height': 1.25, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'headline-medium': ( 'size': 1.75rem, 'weight': 400, 'line-height': 1.2857142857, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'headline-small': ( 'size': 1.5rem, 'weight': 400, 'line-height': 1.3333333333, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'title-large': ( 'size': 1.375rem, 'weight': 400, 'line-height': 1.2727272727, 'letter-spacing': normal, 'font-family': $heading-font-family ), 'title-medium': ( 'size': 1rem, 'weight': 500, 'line-height': 1.5, 'letter-spacing': .009375em, 'font-family': $body-font-family ), 'title-small': ( 'size': .875rem, 'weight': 500, 'line-height': 1.4285714286, 'letter-spacing': .0071428571em, 'font-family': $body-font-family ), 'body-large': ( 'size': 1rem, 'weight': 400, 'line-height': 1.5, 'letter-spacing': .03125em, 'font-family': $body-font-family ), 'body-medium': ( 'size': .875rem, 'weight': 400, 'line-height': 1.4285714286, 'letter-spacing': .0178571429em, 'font-family': $body-font-family ), 'body-small': ( 'size': .75rem, 'weight': 400, 'line-height': 1.3333333333, 'letter-spacing': .0333333333em, 'font-family': $body-font-family ), 'label-large': ( 'size': .875rem, 'weight': 500, 'line-height': 1.4285714286, 'letter-spacing': .0071428571em, 'font-family': $body-font-family ), 'label-medium': ( 'size': .75rem, 'weight': 500, 'line-height': 1.3333333333, 'letter-spacing': .0416666667em, 'font-family': $body-font-family ), 'label-small': ( 'size': .6875rem, 'weight': 500, 'line-height': 1.4545454545, 'letter-spacing': .0454545455em, 'font-family': $body-font-family ) ), $typography ); $flat-typography: () !default; @each $type, $values in $typography { $flat-typography: map-deep-merge( $flat-typography, (#{$type}: ( map.get($values, 'size'), map.get($values, 'weight'), map.get($values, 'line-height'), map.get($values, 'letter-spacing'), map.get($values, 'font-family') )) ); } // Mapping from transition to easings: // fast-out-slow-in -> standard // linear-out-slow-in -> decelerated // fast-out-linear-in -> accelerated // ease-in-out -> standard or accelerated depending on usage // fast-in-fast-out -> accelerated // swing -> standard $standard-easing: cubic-bezier(0.4, 0, 0.2, 1) !default; $decelerated-easing: cubic-bezier(0.0, 0, 0.2, 1) !default; // Entering $accelerated-easing: cubic-bezier(0.4, 0, 1, 1) !default; // Leaving // Elements $blockquote-font-size: 18px !default; $blockquote-font-weight: 300 !default; $sizes: ( 'x-small', 'small', 'default', 'large', 'x-large' ) !default; $size-scale: $spacer * 2 !default; $size-scales: ( 'x-small': -2, 'small': -1, 'default': 0, 'large': 1, 'x-large': 2 ) !default;