@ptsecurity/mosaic 13.3.1 → 13.4.0

package/_visual.scss

@@ -17,6 +17,8 @@ $light-color-scheme-foreground-border: #bdc7d1;
 $light-color-scheme-foreground-icon: #8c99a5;
 $light-color-scheme-background-background: white;
 $light-color-scheme-background-background-disabled: #f2f5f9;
+$light-color-scheme-background-background-less-contrast: #f2f5f9;
+$light-color-scheme-background-background-under: #f2f5f9;
 $light-color-scheme-background-overlay-hover: rgba(black, 0.05);
 $light-color-scheme-background-overlay-active: rgba(black, 0.1);
 $light-color-scheme-background-overlay-disabled: rgba(white, 0.3);
@@ -41,6 +43,8 @@ $dark-color-scheme-foreground-border: #515e69;
 $dark-color-scheme-foreground-icon: #8c99a5;
 $dark-color-scheme-background-background: #19252f;
 $dark-color-scheme-background-background-disabled: #333f4a;
+$dark-color-scheme-background-background-less-contrast: #27333e;
+$dark-color-scheme-background-background-under: #151e25;
 $dark-color-scheme-background-overlay-hover: rgba(black, 0.05);
 $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
 $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
@@ -77,6 +81,7 @@ $palette-blue-600: #014b9d;
 $palette-blue-700: #023c7f;
 $palette-blue-800: #193060;
 $palette-blue-900: #00224f;
+$palette-blue-1000: #001a40;
 $palette-blue-a100: rgba(3, 116, 235, 0.15);
 $palette-blue-a200: rgba(3, 116, 235, 0.3);
 $palette-blue-contrast-40: #4D4D4D;
@@ -104,6 +109,7 @@ $palette-green-600: #015a2d;
 $palette-green-700: #004823;
 $palette-green-800: #103920;
 $palette-green-900: #002a12;
+$palette-green-1000: #00210c;
 $palette-green-a100: rgba(2, 139, 73, 0.15);
 $palette-green-contrast-40: #4D4D4D;
 $palette-green-contrast-60: #4D4D4D;
@@ -129,6 +135,7 @@ $palette-red-600: #9e0130;
 $palette-red-700: #800025;
 $palette-red-800: #621420;
 $palette-red-900: #500013;
+$palette-red-1000: #41000b;
 $palette-red-a100: rgba(219, 60, 85, 0.15);
 $palette-red-contrast-40: #4D4D4D;
 $palette-red-contrast-60: #4D4D4D;
@@ -154,6 +161,7 @@ $palette-grey-600: #434f5a;
 $palette-grey-700: #333f4a;
 $palette-grey-800: #27333e;
 $palette-grey-900: #19252f;
+$palette-grey-1000: #151e25;
 $palette-grey-a40: rgba(25, 37, 47, 0.04);
 $palette-grey-a60: rgba(25, 37, 47, 0.06);
 $palette-grey-a100: rgba(25, 37, 47, 0.1);
@@ -183,6 +191,7 @@ $palette-yellow-600: #6b4804;
 $palette-yellow-700: #543803;
 $palette-yellow-800: #3e3015;
 $palette-yellow-900: #312001;
+$palette-yellow-1000: #1f1500;
 $palette-yellow-a100: rgba(255, 159, 18, 0.15);
 $palette-yellow-contrast-40: #4D4D4D;
 $palette-yellow-contrast-60: #4D4D4D;
@@ -208,6 +217,7 @@ $palette-teal-600: #0c5567;
 $palette-teal-700: #084453;
 $palette-teal-800: #143641;
 $palette-teal-900: #022731;
+$palette-teal-1000: #001f28;
 $palette-teal-contrast-40: #4D4D4D;
 $palette-teal-contrast-60: #4D4D4D;
 $palette-teal-contrast-100: #4D4D4D;
@@ -233,6 +243,7 @@ $palette-purple-600: #753865;
 $palette-purple-700: #612853;
 $palette-purple-800: #48273f;
 $palette-purple-900: #36172e;
+$palette-purple-1000: #23001b;
 $palette-purple-contrast-40: #4D4D4D;
 $palette-purple-contrast-60: #4D4D4D;
 $palette-purple-contrast-100: #4D4D4D;
@@ -279,17 +290,17 @@ $alert-dark-color-scheme-default-icon: #8c99a5;
 $alert-size-border-width: 1px;
 $alert-size-border-radius: 4px;
 $alert-size-horizontal-padding: 16px;
-$alert-size-vertical-padding: 13px;
+$alert-size-vertical-padding: 12px;
 $alert-size-icon-margin: 8px;
 $alert-size-close-button-width: 16px;
-$alert-size-small-vertical-padding: 11px;
+$alert-size-small-vertical-padding: 12px;
 $alert-font-default-header: subheading;
 $alert-font-default-body: body;
 $alert-font-small-header: caption;
 $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
-$autocomplete-size-panel-border-radius: 3px;
+$autocomplete-size-panel-border-radius: 4px;
 $badge-light-color-scheme-solid-primary-background: #4187ff;
 $badge-light-color-scheme-solid-primary-border: #4187ff;
 $badge-light-color-scheme-solid-primary-color: white;
@@ -385,7 +396,7 @@ $badge-font-mini-default: extra-small-text;
 $badge-font-mini-caps: extra-small-text-caps;
 $badge-font-mini-mono: extra-small-text-mono;
 $button-toggle-size-border-size: 1px;
-$button-toggle-size-border-radius: 3px;
+$button-toggle-size-border-radius: 4px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $button-light-color-scheme-primary-color: white;
 $button-light-color-scheme-primary-border: #0374eb;
@@ -438,7 +449,7 @@ $button-dark-color-scheme-error-states-active-border: #333f4a;
 $button-dark-color-scheme-error-states-active-background: #333f4a;
 $button-size-height: 32px;
 $button-size-border-width: 1px;
-$button-size-border-radius: 3px;
+$button-size-border-radius: 4px;
 $button-size-horizontal-padding: 12px;
 $button-font-default: body;
 $button-font-primary: body-strong;
@@ -542,7 +553,7 @@ $dropdown-trigger-size-right-icon-padding: 2px;
 $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
-$dropdown-panel-size-border-radius: 3px;
+$dropdown-panel-size-border-radius: 4px;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
 $form-field-light-color-scheme-states-hover-border: #bdc7d1;
@@ -555,7 +566,7 @@ $form-field-dark-color-scheme-states-invalid-border: #b9023a;
 $form-field-dark-color-scheme-states-invalid-background: transparent;
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
-$form-field-size-border-radius: 3px;
+$form-field-size-border-radius: 4px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
 $form-field-hint-size-margin-top: 4px;
@@ -593,7 +604,55 @@ $forms-size-vertical-legend-margin-top: 32px;
 $forms-size-vertical-legend-margin-bottom: 12px;
 $forms-font-default-label: body;
 $forms-font-default-legend: subheading;
-$input-size-padding: 0 16px;
+$icon-light-color-scheme-secondary-default: #8c99a5;
+$icon-light-color-scheme-secondary-states-hover: #6d7a86;
+$icon-light-color-scheme-secondary-states-active: #434f5a;
+$icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
+$icon-light-color-scheme-primary-default: #5697ff;
+$icon-light-color-scheme-primary-states-hover: #0374eb;
+$icon-light-color-scheme-primary-states-active: #014b9d;
+$icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-light-color-scheme-info-default: #18a5c5;
+$icon-light-color-scheme-info-states-hover: #218ca8;
+$icon-light-color-scheme-info-states-active: #0c5567;
+$icon-light-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
+$icon-light-color-scheme-success-default: #4ba96c;
+$icon-light-color-scheme-success-states-hover: #028b49;
+$icon-light-color-scheme-success-states-active: #015a2d;
+$icon-light-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
+$icon-light-color-scheme-warning-default: #e19f12;
+$icon-light-color-scheme-warning-states-hover: #a26e0c;
+$icon-light-color-scheme-warning-states-active: #6b4804;
+$icon-light-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
+$icon-light-color-scheme-error-default: #ee6f79;
+$icon-light-color-scheme-error-states-hover: #db3c55;
+$icon-light-color-scheme-error-states-active: #9e0130;
+$icon-light-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
+$icon-dark-color-scheme-secondary-default: #8c99a5;
+$icon-dark-color-scheme-secondary-states-hover: #6d7a86;
+$icon-dark-color-scheme-secondary-states-active: #bdc7d1;
+$icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
+$icon-dark-color-scheme-primary-default: #5697ff;
+$icon-dark-color-scheme-primary-states-hover: #0374eb;
+$icon-dark-color-scheme-primary-states-active: #a2c7fe;
+$icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-dark-color-scheme-info-default: #18a5c5;
+$icon-dark-color-scheme-info-states-hover: #218ca8;
+$icon-dark-color-scheme-info-states-active: #6ed3f2;
+$icon-dark-color-scheme-info-states-disabled: mix(#18a5c5, transparent, 30%);
+$icon-dark-color-scheme-success-default: #4ba96c;
+$icon-dark-color-scheme-success-states-hover: #028b49;
+$icon-dark-color-scheme-success-states-active: #8ed5a1;
+$icon-dark-color-scheme-success-states-disabled: mix(#4ba96c, transparent, 30%);
+$icon-dark-color-scheme-warning-default: #e19f12;
+$icon-dark-color-scheme-warning-states-hover: #a26e0c;
+$icon-dark-color-scheme-warning-states-active: #f5c23c;
+$icon-dark-color-scheme-warning-states-disabled: mix(#e19f12, transparent, 30%);
+$icon-dark-color-scheme-error-default: #ee6f79;
+$icon-dark-color-scheme-error-states-hover: #db3c55;
+$icon-dark-color-scheme-error-states-active: #fcb2b4;
+$icon-dark-color-scheme-error-states-disabled: mix(#ee6f79, transparent, 30%);
+$input-size-padding: 0 12px;
 $input-size-width: 100%;
 $input-font-default: body;
 $input-font-monospace: body-mono;
@@ -683,7 +742,7 @@ $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
 $optgroup-size-padding-left: 17px;
 $optgroup-font-default: subheading;
-$option-size-horizontal-padding: 16px;
+$option-size-horizontal-padding: 12px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
@@ -697,7 +756,7 @@ $popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
 $popover-dark-color-scheme-border: #333f4a;
 $popover-size-max-height: 480px;
 $popover-size-padding: 16px;
-$popover-size-border-radius: 3px;
+$popover-size-border-radius: 4px;
 $popover-size-arrow-size: 12px;
 $popover-size-trigger-margin: 9px;
 $popover-size-small-width: 200px;
@@ -752,15 +811,15 @@ $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
 $radio-size-size: 14px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
-$select-size-left-padding: 16px;
-$select-size-right-padding: 8px;
-$select-size-left-padding-multiple: 8px;
+$select-size-left-padding: 12px;
+$select-size-right-padding: 6px;
+$select-size-left-padding-multiple: 12px;
 $select-font-default: body;
 $select-panel-size-max-height: 232px;
 $select-panel-size-max-width: 640px;
 $select-panel-size-vertical-padding: 4px;
 $select-panel-size-border-width: 1px;
-$select-panel-size-border-radius: 3px;
+$select-panel-size-border-radius: 4px;
 $select-panel-font-default: body;
 $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
@@ -803,7 +862,7 @@ $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
 $tabs-size-padding-horizontal: 16px;
 $tabs-size-border-width: 1px;
-$tabs-size-border-radius: 3px;
+$tabs-size-border-radius: 4px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
 $vertical-tabs-light-color-scheme-state-normal-background: transparent;
@@ -871,12 +930,12 @@ $tags-size-text-margin: 8px;
 $tags-font-default: caption;
 $tags-font-mono: caption-mono;
 $tags-font-caps: caption-caps;
-$tag-list-size-padding: 1px 6px;
+$tag-list-size-padding: 1px 12px;
 $tag-input-size-height: 22px;
 $tag-input-size-margin: 2px 4px;
 $tag-input-font-default: body;
 $textarea-size-min-height: 50px;
-$textarea-size-padding: 5px 16px;
+$textarea-size-padding: 5 12px;
 $textarea-font-default: body;
 $textarea-font-mono: body-mono;
 $timepicker-size-padding-right: 16px;
@@ -923,7 +982,7 @@ $tooltip-dark-color-scheme-warning-text: #f2f5f9;
 $tooltip-dark-color-scheme-warning-border: #7e5406;
 $tooltip-size-max-width: 300px;
 $tooltip-size-border-width: 1px;
-$tooltip-size-border-radius: 3px;
+$tooltip-size-border-radius: 4px;
 $tooltip-size-padding: 8px 16px;
 $tooltip-size-arrow-size: 12px;
 $tooltip-size-trigger-margin: 9px;
@@ -936,7 +995,7 @@ $extended-tooltip-dark-color-scheme-background: #333f4a;
 $extended-tooltip-dark-color-scheme-text: #f2f5f9;
 $extended-tooltip-dark-color-scheme-border: #333f4a;
 $extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
-$extended-tooltip-size-border-radius: 3px;
+$extended-tooltip-size-border-radius: 4px;
 $extended-tooltip-size-arrow-size: 12px;
 $extended-tooltip-size-trigger-margin: 9px;
 $extended-tooltip-size-padding: 8px 16px;
@@ -949,7 +1008,7 @@ $extended-tooltip-header-dark-color-scheme-border: #434f5a;
 $extended-tooltip-header-dark-color-scheme-text: #f2f5f9;
 $extended-tooltip-header-dark-color-scheme-background: #333f4a;
 $extended-tooltip-header-size-height: 40px;
-$extended-tooltip-header-size-padding: 10px 16px;
+$extended-tooltip-header-size-padding: 8px 16px;
 $extended-tooltip-header-font-default: subheading;
 $tree-size-node-height: 32px;
 $tree-size-padding-left: 12px;
@@ -970,6 +1029,7 @@ $light-color-scheme-primary-palette: (
 700: #023c7f,
 800: #193060,
 900: #00224f,
+1000: #001a40,
 A100: rgba(3, 116, 235, 0.15),
 A200: rgba(3, 116, 235, 0.3),
 contrast: (
@@ -1003,6 +1063,7 @@ $light-color-scheme-second-palette: (
 700: #333f4a,
 800: #27333e,
 900: #19252f,
+1000: #151e25,
 A40: rgba(25, 37, 47, 0.04),
 A60: rgba(25, 37, 47, 0.06),
 A100: rgba(25, 37, 47, 0.1),
@@ -1038,6 +1099,7 @@ $light-color-scheme-error-palette: (
 700: #800025,
 800: #621420,
 900: #500013,
+1000: #41000b,
 A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1069,6 +1131,7 @@ $light-color-scheme-info-palette: (
 700: #084453,
 800: #143641,
 900: #022731,
+1000: #001f28,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1100,6 +1163,7 @@ $light-color-scheme-success-palette: (
 700: #004823,
 800: #103920,
 900: #002a12,
+1000: #00210c,
 A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1131,6 +1195,7 @@ $light-color-scheme-warning-palette: (
 700: #543803,
 800: #3e3015,
 900: #312001,
+1000: #1f1500,
 A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1162,6 +1227,7 @@ $dark-color-scheme-primary-palette: (
 700: #023c7f,
 800: #193060,
 900: #00224f,
+1000: #001a40,
 A100: rgba(3, 116, 235, 0.15),
 A200: rgba(3, 116, 235, 0.3),
 contrast: (
@@ -1195,6 +1261,7 @@ $dark-color-scheme-second-palette: (
 700: #333f4a,
 800: #27333e,
 900: #19252f,
+1000: #151e25,
 A40: rgba(25, 37, 47, 0.04),
 A60: rgba(25, 37, 47, 0.06),
 A100: rgba(25, 37, 47, 0.1),
@@ -1230,6 +1297,7 @@ $dark-color-scheme-error-palette: (
 700: #800025,
 800: #621420,
 900: #500013,
+1000: #41000b,
 A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1261,6 +1329,7 @@ $dark-color-scheme-info-palette: (
 700: #084453,
 800: #143641,
 900: #022731,
+1000: #001f28,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1292,6 +1361,7 @@ $dark-color-scheme-success-palette: (
 700: #004823,
 800: #103920,
 900: #002a12,
+1000: #00210c,
 A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1323,6 +1393,7 @@ $dark-color-scheme-warning-palette: (
 700: #543803,
 800: #3e3015,
 900: #312001,
+1000: #1f1500,
 A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1354,6 +1425,7 @@ $color-blue-palette: (
 700: #023c7f,
 800: #193060,
 900: #00224f,
+1000: #001a40,
 A100: rgba(3, 116, 235, 0.15),
 A200: rgba(3, 116, 235, 0.3),
 contrast: (
@@ -1387,6 +1459,7 @@ $color-green-palette: (
 700: #004823,
 800: #103920,
 900: #002a12,
+1000: #00210c,
 A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1418,6 +1491,7 @@ $color-red-palette: (
 700: #800025,
 800: #621420,
 900: #500013,
+1000: #41000b,
 A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1449,6 +1523,7 @@ $color-grey-palette: (
 700: #333f4a,
 800: #27333e,
 900: #19252f,
+1000: #151e25,
 A40: rgba(25, 37, 47, 0.04),
 A60: rgba(25, 37, 47, 0.06),
 A100: rgba(25, 37, 47, 0.1),
@@ -1484,6 +1559,7 @@ $color-yellow-palette: (
 700: #543803,
 800: #3e3015,
 900: #312001,
+1000: #1f1500,
 A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
@@ -1515,6 +1591,7 @@ $color-teal-palette: (
 700: #084453,
 800: #143641,
 900: #022731,
+1000: #001f28,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1546,6 +1623,7 @@ $color-purple-palette: (
 700: #612853,
 800: #48273f,
 900: #36172e,
+1000: #23001b,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,

package/design-tokens/legacy-2017/tokens/components/alert.json5

@@ -55,18 +55,18 @@
             }
         },
         size: {
-            'border-width': { value: '1px' },
-            'border-radius': { value: '4px' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
 
-            'horizontal-padding': { value: '{padding.control-horizontal}' },
-            'vertical-padding': { value: '13px' },
+            'horizontal-padding': { value: '{size.l}' },
+            'vertical-padding': { value: '{size.m}' },
 
-            'icon-margin': { value: '{margin.iconText_M-horizontal}' },
+            'icon-margin': { value: '{size.s}' },
 
-            'close-button-width': { value: '16px' },
+            'close-button-width': { value: '{size.l}' },
 
             small: {
-                'vertical-padding': { value: '11px' }
+                'vertical-padding': { value: '{size.m}' }
             }
         },
         font: {

package/design-tokens/legacy-2017/tokens/components/autocomplete.json5

@@ -2,9 +2,9 @@
     autocomplete: {
         size: {
             panel: {
-                padding: { value: '4px 0' },
+                padding: { value: '{size.xxs} 0' },
                 'max-height': { value: '256px' },
-                'border-radius': { value: '3px' }
+                'border-radius': { value: '{size.border-radius}' }
             }
         }
     }

package/design-tokens/legacy-2017/tokens/components/badge.json5

@@ -146,16 +146,16 @@
             default: {
                 height: { value: '{size.xxl}' },
                 'min-width': { value: '10px' },
-                padding: { value: '0 8px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '4px' }
+                padding: { value: '0 {size.s}' },
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.border-radius}' }
             },
             mini: {
                 height: { value: '{size.l}' },
                 'min-width': { value: '10px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '2px' },
-                padding: { value: '0 4px' }
+                'border-width': { value: '{size.border-width}' },
+                'border-radius': { value: '{size.3xs}' },
+                padding: { value: '0 {size.xxs}' }
             }
         },
         font: {

package/design-tokens/legacy-2017/tokens/components/button-toggle.json5

@@ -2,8 +2,8 @@
     'button-toggle': {
         size: {
             border: {
-                size: { value: '1px' },
-                radius: { value: '3px' }
+                size: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             }
         }
     }

package/design-tokens/legacy-2017/tokens/components/button.json5

@@ -122,8 +122,8 @@
         size: {
             height: { value: '{size.3xl}' },
 
-            'border-width': { value: '1px' },
-            'border-radius': { value: '3px' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
 
             'horizontal-padding': { value: '{size.m}' }
         },

package/design-tokens/legacy-2017/tokens/components/card.json5

@@ -45,7 +45,7 @@
             }
         },
         size: {
-            'vertical-line': { value: '4px' }
+            'vertical-line': { value: '{size.xxs}' }
         }
     }
 }

package/design-tokens/legacy-2017/tokens/components/checkbox.json5

@@ -27,9 +27,9 @@
             }
         },
         size: {
-            width: { value: '16px' },
-            'label-margin': { value: '{margin.iconText_M-horizontal}' },
-            'border-width': { value: '1px' },
+            width: { value: '{size.l}' },
+            'label-margin': { value: '{size.s}' },
+            'border-width': { value: '{size.border-width}' },
             'toggle-box-shadow': { value: 'inset 0 0 1px 0 rgba(0, 0, 0, 0.2)' }
         },
         font: {

package/design-tokens/legacy-2017/tokens/components/datepicker.json5

@@ -24,13 +24,13 @@
         },
         size: {
             label: {
-                'paddings': { value: '8px 28px 12px 12px' }
+                'paddings': { value: '{size.s} 28px {size.m} {size.m}' }
             },
             cell: {
-                'min-size': { value: '32px' },
+                'min-size': { value: '{size.3xl}' },
                 margin: { value: '5%' },
-                padding: { value: '8px' },
-                'border-width': { value: '1px' }
+                padding: { value: '{size.s}' },
+                'border-width': { value: '{size.border-width}' }
             }
         },
         font: {
@@ -40,10 +40,10 @@
     },
     'datepicker-calendar': {
         size: {
-            'padding-top': { value: '16px' },
-            'padding-horizontal': { value: '8px' },
-            'padding-bottom': { value: '8px' },
-            'padding-blocks': { value: '12px' },
+            'padding-top': { value: '{size.l}' },
+            'padding-horizontal': { value: '{size.s}' },
+            'padding-bottom': { value: '{size.s}' },
+            'padding-blocks': { value: '{size.m}' },
 
             'divider-width': { value: '1px' },
 

package/design-tokens/legacy-2017/tokens/components/dropdown.json5

@@ -38,10 +38,10 @@
     'dropdown-panel': {
         size: {
             'max-width': { value: '640px' },
-            padding: { value: '4px 0' },
+            padding: { value: '{size.xxs} 0' },
             border: {
-                width: { value: '1px' },
-                radius: { value: '3px' }
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             }
         }
     }

package/design-tokens/legacy-2017/tokens/components/form-field.json5

@@ -31,11 +31,11 @@
         size: {
             height: { value: '{size.3xl}' },
             border: {
-                width: { value: '1px' },
-                radius: { value: '3px' }
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             },
             button: {
-                width: { value: '32px' }
+                width: { value: '{size.3xl}' }
             }
         },
         font: {
@@ -44,7 +44,7 @@
     },
     'form-field-hint': {
         size: {
-            'margin-top': { value: '4px' }
+            'margin-top': { value: '{size.xxs}' }
         },
         font: {
             default: { value: 'caption' }
@@ -82,8 +82,8 @@
             }
         },
         size: {
-            'margin-top': { value: '8px' },
-            'icon-margin': { value: '4px' }
+            'margin-top': { value: '{size.s}' },
+            'icon-margin': { value: '{size.xxs}' }
         },
         font: {
             default: { value: 'caption' }

package/design-tokens/legacy-2017/tokens/components/forms.json5

@@ -11,34 +11,34 @@
         size: {
             horizontal: {
                 row: {
-                    'margin-bottom': { value: '20px' }
+                    'margin-bottom': { value: '{size.xl}' }
                 },
                 label: {
-                    'padding-top': { value: '6px' },
+                    'padding-top': { value: '{size.xs}' },
                     'padding-bottom': { value: '0' }
                 },
                 control: {
-                    'padding-left': { value: '16px' }
+                    'padding-left': { value: '{size.l}' }
                 },
                 legend: {
-                    'margin-top': { value: '32px' },
-                    'margin-bottom': { value: '16px' }
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.l}' }
                 }
             },
             vertical: {
                 row: {
-                    'margin-bottom': { value: '16px' }
+                    'margin-bottom': { value: '{size.l}' }
                 },
                 label: {
                     'padding-top': { value: '0' },
-                    'padding-bottom': { value: '4px' }
+                    'padding-bottom': { value: '{size.xxs}' }
                 },
                 control: {
-                    'padding-left': { value: '24px' }
+                    'padding-left': { value: '{size.xxl}' }
                 },
                 legend: {
-                    'margin-top': { value: '32px' },
-                    'margin-bottom': { value: '12px' }
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.m}' }
                 }
             },
         },