fix(tokens): 🐛 fix LESS parsing error for box shadow in MW 1.43

This commit is contained in:
alistair3149 2024-10-17 03:11:56 -04:00
parent 17c8caace9
commit ecdf9f2a2a
No known key found for this signature in database

View file

@ -42,9 +42,35 @@
--box-shadow-border: var( --border-color-base ) 0 0 0 1px;
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
// TODO: Refactor this to support filter drop-shadow
--box-shadow-drop-small: 0 ~'calc( var( --shadow-vertical-small ) * 0.028 )' 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'calc( var( --shadow-vertical-small ) * 0.067 )' 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 ~'calc( var( --shadow-vertical-small ) * 0.125 )' 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-small ) * 0.223 )' 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-small ) * 0.418 )' 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'var( --shadow-vertical-small )' 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
--box-shadow-drop-medium: 0 ~'calc( var( --shadow-vertical-medium ) * 0.028 )' 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'calc( var( --shadow-vertical-medium ) * 0.067 )' 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 ~'calc( var( --shadow-vertical-medium ) * 0.125 )' 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-medium ) * 0.223 )' 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-medium ) * 0.418 )' 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'var( --shadow-vertical-medium )' 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
--box-shadow-drop-xx-large: 0 ~'calc( var( --shadow-vertical-xx-large ) * 0.028 )' 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'calc( var( --shadow-vertical-xx-large ) * 0.067 )' 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 ~'calc( var( --shadow-vertical-xx-large ) * 0.125 )' 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-xx-large ) * 0.223 )' 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 ~'calc( var( --shadow-vertical-xx-large ) * 0.418 )' 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 ~'var( --shadow-vertical-xx-large )' 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
/* stylelint-disable */
--box-shadow-drop-small:
~'
0 calc( var( --shadow-vertical-small ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 calc( var( --shadow-vertical-small ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var(--shadow-strength ) + .01 ) ),
0 calc( var( --shadow-vertical-small ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-small ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-small ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 var( --shadow-vertical-small ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )
';
--box-shadow-drop-medium:
~'
0 calc( var( --shadow-vertical-medium ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 calc( var( --shadow-vertical-medium ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .01 ) ),
0 calc( var( --shadow-vertical-medium ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-medium ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-medium ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 var( --shadow-vertical-medium ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )
';
--box-shadow-drop-xx-large:
~'
0 calc( var( --shadow-vertical-xx-large ) * 0.028 ) 2.2px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 calc( var( --shadow-vertical-xx-large ) * 0.067 ) 5.3px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .01 ) ),
0 calc( var( --shadow-vertical-xx-large ) * 0.125 ) 10px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-xx-large ) * 0.223 ) 17.9px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .02 ) ),
0 calc( var( --shadow-vertical-xx-large ) * 0.418 ) 33.4px hsla( var( --surface-shadow ), calc( var( --shadow-strength ) + .03 ) ),
0 var( --shadow-vertical-xx-large ) 80px hsla( var( --surface-shadow ), var( --shadow-strength ) )
';
/* stylelint-enable */
/* Font */
// Used as base unit to caluclate font-size
--font-size-base: 1rem;