material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-05 17:48:16 +03:00
Code Issues Projects Releases Wiki Activity

chore: update components to use custom properties from tokens

Browse Source 
PiperOrigin-RevId: 601597083
This commit is contained in:
Elizabeth Mitchell 2024-01-25 16:13:13 -08:00 committed by Copybara-Service
parent feff7214a7
commit 84536d7416
43 changed files with 208 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
button/internal/_elevated-button.scss
View File

@ -34,11 +34,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-elevated-button-values();
$tokens: tokens.md-comp-elevated-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-elevated-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
button/internal/_filled-button.scss
View File

@ -34,11 +34,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-button-values();
$tokens: tokens.md-comp-filled-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filled-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
button/internal/_filled-tonal-button.scss
View File

@ -34,11 +34,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-tonal-button-values();
$tokens: tokens.md-comp-filled-tonal-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filled-tonal-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
button/internal/_outlined-button.scss
View File

@ -34,11 +34,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-button-values();
$tokens: tokens.md-comp-outlined-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
--_container-color: none;

6
button/internal/_text-button.scss
View File

@ -34,11 +34,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-text-button-values();
$tokens: tokens.md-comp-text-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-text-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
--_container-color: none;

37
checkbox/internal/_checkbox.scss
View File

@ -47,34 +47,25 @@ $_checkmark-bottom-left: 7px, -14px;
}
@mixin styles() {
$tokens: tokens.md-comp-checkbox-values();
$tokens: tokens.md-comp-checkbox-values(
$exclude-custom-properties: false,
);
// Support logical shape properties
$container-shape: map.get($tokens, 'container-shape');
$tokens: map.set(
$tokens: map.merge(
$tokens,
'container-shape-start-start',
var(--md-checkbox-container-shape, #{$container-shape})
(
'container-shape-start-start':
var(--md-checkbox-container-shape-start-start, #{$container-shape}),
'container-shape-start-end':
var(--md-checkbox-container-shape-start-end, #{$container-shape}),
'container-shape-end-end':
var(--md-checkbox-container-shape-end-end, #{$container-shape}),
'container-shape-end-start':
var(--md-checkbox-container-shape-end-start, #{$container-shape}),
)
);
$tokens: map.set(
$tokens,
'container-shape-start-end',
var(--md-checkbox-container-shape, #{$container-shape})
);
$tokens: map.set(
$tokens,
'container-shape-end-end',
var(--md-checkbox-container-shape, #{$container-shape})
);
$tokens: map.set(
$tokens,
'container-shape-end-start',
var(--md-checkbox-container-shape, #{$container-shape})
);
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-checkbox-#{$token}, #{$value}));
}
:host {
border-start-start-radius: map.get($tokens, 'container-shape-start-start');

6
chips/internal/_assist-chip.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-assist-chip-values();
$tokens: tokens.md-comp-assist-chip-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-assist-chip-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
chips/internal/_filter-chip.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filter-chip-values();
$tokens: tokens.md-comp-filter-chip-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filter-chip-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
chips/internal/_input-chip.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-input-chip-values();
$tokens: tokens.md-comp-input-chip-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-input-chip-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
chips/internal/_suggestion-chip.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-suggestion-chip-values();
$tokens: tokens.md-comp-suggestion-chip-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-suggestion-chip-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

7
dialog/internal/_dialog.scss
View File

@ -36,10 +36,9 @@
@mixin styles() {
$md-sys-color: tokens.md-sys-color-values-light();
$md-sys-motion: tokens.md-sys-motion-values();
$tokens: tokens.md-comp-dialog-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-dialog-values(
$exclude-custom-properties: false,
);
// Support logical shape properties
$tokens: map.merge(

7
divider/internal/_divider.scss
View File

@ -26,10 +26,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-divider-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-divider-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-divider-values(
$exclude-custom-properties: false,
);
:host {
box-sizing: border-box;

7
elevation/internal/_elevation.scss
View File

@ -26,10 +26,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-elevation-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-elevation-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-elevation-values(
$exclude-custom-properties: false,
);
:host {
display: flex;

6
fab/internal/_fab-branded.scss
View File

@ -37,11 +37,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-fab-branded-values();
$tokens: tokens.md-comp-fab-branded-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-fab-branded-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
fab/internal/_fab.scss
View File

@ -44,11 +44,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-fab-values();
$tokens: tokens.md-comp-fab-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-fab-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

15
field/internal/_filled-field.scss
View File

@ -41,7 +41,9 @@ $_md-sys-motion: tokens.md-sys-motion-values();
}
@mixin styles() {
$tokens: tokens.md-comp-filled-field-values();
$tokens: tokens.md-comp-filled-field-values(
$exclude-custom-properties: false,
);
@layer styles {
:host {
@ -49,6 +51,15 @@ $_md-sys-motion: tokens.md-sys-motion-values();
@if $token == 'container-shape' {
// Support logical shape properties. Filled field has a default oblong
// shape, which is why the fallback value is unique per corner.
// Get the raw value without the container-shape custom property.
$value: map.get(
tokens.md-comp-filled-field-values(
$exclude-custom-properties: true,
),
'container-shape'
);
--_container-shape-start-start: var(
--md-filled-field-container-shape-start-start,
var(--md-filled-field-container-shape, #{list.nth($value, 1)})
@ -66,7 +77,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
var(--md-filled-field-container-shape, #{list.nth($value, 4)})
);
} @else {
--_#{$token}: var(--md-filled-field-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}
}

6
field/internal/_outlined-field.scss
View File

@ -36,12 +36,14 @@ $_md-sys-motion: tokens.md-sys-motion-values();
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-field-values();
$tokens: tokens.md-comp-outlined-field-values(
$exclude-custom-properties: false,
);
@layer styles {
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-field-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

36
focus/internal/_focus-ring.scss
View File

@ -31,39 +31,29 @@ $_md-sys-motion: tokens.md-sys-motion-values();
}
@mixin styles() {
$tokens: tokens.md-comp-focus-ring-values();
$tokens: tokens.md-comp-focus-ring-values(
$exclude-custom-properties: false,
);
$active-width: var(
--md-focus-ring-active-width,
#{map.get($tokens, 'active-width')}
);
$color: var(--md-focus-ring-color, #{map.get($tokens, 'color')});
$duration: var(--md-focus-ring-duration, #{map.get($tokens, 'duration')});
$width: var(--md-focus-ring-width, #{map.get($tokens, 'width')});
$inward-offset: var(
--md-focus-ring-inward-offset,
#{map.get($tokens, 'inward-offset')}
);
$outward-offset: var(
--md-focus-ring-outward-offset,
#{map.get($tokens, 'outward-offset')}
);
$active-width: map.get($tokens, 'active-width');
$color: map.get($tokens, 'color');
$duration: map.get($tokens, 'duration');
$width: map.get($tokens, 'width');
$inward-offset: map.get($tokens, 'inward-offset');
$outward-offset: map.get($tokens, 'outward-offset');
// Support logical shape properties
$start-start: var(
--md-focus-ring-shape-start-start,
var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
#{map.get($tokens, 'shape')}
);
$start-end: var(
--md-focus-ring-shape-start-end,
var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
);
$end-end: var(
--md-focus-ring-shape-end-end,
var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
#{map.get($tokens, 'shape')}
);
$end-end: var(--md-focus-ring-shape-end-end, #{map.get($tokens, 'shape')});
$end-start: var(
--md-focus-ring-shape-end-start,
var(--md-focus-ring-shape, #{map.get($tokens, 'shape')})
#{map.get($tokens, 'shape')}
);
:host {

7
icon/internal/_icon.scss
View File

@ -26,10 +26,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-icon-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-icon-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-icon-values(
$exclude-custom-properties: false,
);
:host {
font-size: map.get($tokens, 'size');

6
iconbutton/internal/_filled-icon-button.scss
View File

@ -35,11 +35,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-icon-button-values();
$tokens: tokens.md-comp-filled-icon-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filled-icon-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
iconbutton/internal/_filled-tonal-icon-button.scss
View File

@ -37,11 +37,13 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
}
@mixin styles() {
$tokens: tokens.md-comp-filled-tonal-icon-button-values();
$tokens: tokens.md-comp-filled-tonal-icon-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filled-tonal-icon-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
iconbutton/internal/_icon-button.scss
View File

@ -28,11 +28,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-icon-button-values();
$tokens: tokens.md-comp-icon-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-icon-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// These custom properties are not used, so set defaults so token tests pass

6
iconbutton/internal/_outlined-icon-button.scss
View File

@ -36,11 +36,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-icon-button-values();
$tokens: tokens.md-comp-outlined-icon-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-icon-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
labs/card/internal/_elevated-card.scss
View File

@ -25,11 +25,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-elevated-card-values();
$tokens: tokens.md-comp-elevated-card-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-elevated-card-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}
}

6
labs/card/internal/_filled-card.scss
View File

@ -25,11 +25,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-card-values();
$tokens: tokens.md-comp-filled-card-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-filled-card-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}
}

6
labs/card/internal/_outlined-card.scss
View File

@ -25,11 +25,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-card-values();
$tokens: tokens.md-comp-outlined-card-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-card-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}

6
labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss
View File

@ -25,11 +25,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-segmented-button-values();
$tokens: tokens.md-comp-outlined-segmented-button-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-segmented-button-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

7
list/internal/_list.scss
View File

@ -27,10 +27,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-list-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-list-values(
$exclude-custom-properties: false,
);
:host {
background: map.get($tokens, 'container-color');

7
list/internal/listitem/_list-item.scss
View File

@ -29,10 +29,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-list-item-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-list-item-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-list-item-values(
$exclude-custom-properties: false,
);
:host {
border-radius: map.get($tokens, 'container-shape');

7
menu/internal/_menu.scss
View File

@ -31,10 +31,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-menu-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-menu-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-menu-values(
$exclude-custom-properties: false,
);
:host {
@include elevation.theme(

7
menu/internal/menuitem/_menu-item.scss
View File

@ -31,10 +31,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-menu-item-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-menu-item-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-menu-item-values(
$exclude-custom-properties: false,
);
:host {
border-radius: map.get($tokens, 'container-shape');

6
progress/internal/_circular-progress.scss
View File

@ -24,7 +24,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-circular-progress-values();
$tokens: tokens.md-comp-circular-progress-values(
$exclude-custom-properties: false,
);
// If changing this value, make sure to change $size-without-padding in the
// circular-progress tokens.
@ -50,7 +52,7 @@
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-circular-progress-#{$token}, #{$value});
--_#{$token}: #{$value};
}
display: inline-flex;

6
progress/internal/_linear-progress.scss
View File

@ -31,11 +31,13 @@ $_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
$_indeterminate-duration: 2s;
@mixin styles() {
$tokens: tokens.md-comp-linear-progress-values();
$tokens: tokens.md-comp-linear-progress-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-linear-progress-#{$token}, #{$value});
--_#{$token}: #{$value};
}
border-radius: var(--_track-shape);

7
radio/internal/_radio.scss
View File

@ -31,10 +31,9 @@ $_md-sys-motion: tokens.md-sys-motion-values();
}
@mixin styles() {
$tokens: tokens.md-comp-radio-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-radio-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-radio-values(
$exclude-custom-properties: false,
);
@layer {
:host {

7
ripple/internal/_ripple.scss
View File

@ -25,10 +25,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-ripple-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-ripple-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-ripple-values(
$exclude-custom-properties: false,
);
:host {
display: flex;

16
select/internal/_filled-select.scss
View File

@ -44,13 +44,25 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-select-values();
$tokens: tokens.md-comp-filled-select-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
@if $token == 'text-field-container-shape' {
// Support logical shape properties. Filled text field has a default
// oblong shape, which is why the fallback value is unique per corner.
// Get the raw value without the text-field-container-shape custom
// property.
$value: map.get(
tokens.md-comp-filled-select-values(
$exclude-custom-properties: true,
),
'text-field-container-shape'
);
--_text-field-container-shape-start-start: var(
--md-filled-select-text-field-container-shape-start-start,
var(
@ -80,7 +92,7 @@
)
);
} @else {
--_#{$token}: var(--md-filled-select-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}

6
select/internal/_outlined-select.scss
View File

@ -36,11 +36,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-select-values();
$tokens: tokens.md-comp-outlined-select-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-select-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
slider/internal/_slider.scss
View File

@ -31,7 +31,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
}
@mixin styles() {
$tokens: tokens.md-comp-slider-values();
$tokens: tokens.md-comp-slider-values(
$exclude-custom-properties: false,
);
// The max clip is reduced by 1 full tick display which is 2x the container
// size to account for always showing the active track on the outside
@ -61,7 +63,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-slider-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Set these to avoid token test failures

7
switch/internal/_switch.scss
View File

@ -42,10 +42,9 @@
}
@mixin styles() {
$tokens: tokens.md-comp-switch-values();
@each $token, $value in $tokens {
$tokens: map.set($tokens, $token, var(--md-switch-#{$token}, #{$value}));
}
$tokens: tokens.md-comp-switch-values(
$exclude-custom-properties: false,
);
// Support logical shape properties
$tokens: map.merge(

6
tabs/internal/_primary-tab.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-primary-tab-values();
$tokens: tokens.md-comp-primary-tab-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-primary-tab-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

6
tabs/internal/_secondary-tab.scss
View File

@ -33,11 +33,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-secondary-tab-values();
$tokens: tokens.md-comp-secondary-tab-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-secondary-tab-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties

15
textfield/internal/_filled-text-field.scss
View File

@ -40,13 +40,24 @@
}
@mixin styles() {
$tokens: tokens.md-comp-filled-text-field-values();
$tokens: tokens.md-comp-filled-text-field-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
@if $token == 'container-shape' {
// Support logical shape properties. Filled text field has a default
// oblong shape, which is why the fallback value is unique per corner.
// Get the raw value without the container-shape custom property.
$value: map.get(
tokens.md-comp-filled-text-field-values(
$exclude-custom-properties: true,
),
'container-shape'
);
--_container-shape-start-start: var(
--md-filled-text-field-container-shape-start-start,
var(--md-filled-text-field-container-shape, #{list.nth($value, 1)})
@ -64,7 +75,7 @@
var(--md-filled-text-field-container-shape, #{list.nth($value, 4)})
);
} @else {
--_#{$token}: var(--md-filled-text-field-#{$token}, #{$value});
--_#{$token}: #{$value};
}
}

6
textfield/internal/_outlined-text-field.scss
View File

@ -35,11 +35,13 @@
}
@mixin styles() {
$tokens: tokens.md-comp-outlined-text-field-values();
$tokens: tokens.md-comp-outlined-text-field-values(
$exclude-custom-properties: false,
);
:host {
@each $token, $value in $tokens {
--_#{$token}: var(--md-outlined-text-field-#{$token}, #{$value});
--_#{$token}: #{$value};
}
// Support logical shape properties