@ptsecurity/mosaic 13.1.1 → 13.2.0

package/_visual.scss

@@ -10,6 +10,8 @@ $light-color-scheme-warning-default: #a26e0c;
 $light-color-scheme-foreground-text: #19252f;
 $light-color-scheme-foreground-text-less-contrast: #6d7a86;
 $light-color-scheme-foreground-text-disabled: #8c99a5;
+$light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-success: #016b37;
 $light-color-scheme-foreground-divider: #d7dee4;
 $light-color-scheme-foreground-border: #bdc7d1;
 $light-color-scheme-foreground-icon: #8c99a5;
@@ -32,6 +34,8 @@ $dark-color-scheme-warning-default: #7e5406;
 $dark-color-scheme-foreground-text: #f2f5f9;
 $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
 $dark-color-scheme-foreground-text-disabled: #6d7a86;
+$dark-color-scheme-foreground-text-error: #ea5868;
+$dark-color-scheme-foreground-text-success: #319d5c;
 $dark-color-scheme-foreground-divider: #333f4a;
 $dark-color-scheme-foreground-border: #515e69;
 $dark-color-scheme-foreground-icon: #8c99a5;
@@ -273,28 +277,6 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-default-min-width: 10px;
-$badge-size-default-padding: 0 8px;
-$badge-size-default-border-width: 1px;
-$badge-size-default-border-radius: 4px;
-$badge-size-default-height: 24px;
-$badge-size-default-font-default: caption;
-$badge-size-default-font-caps: caption-caps;
-$badge-size-default-font-mono: caption-mono;
-$badge-size-mini-height: 16px;
-$badge-size-mini-min-width: 10px;
-$badge-size-mini-border-width: 1px;
-$badge-size-mini-border-radius: 2px;
-$badge-size-mini-padding: 0 4px;
-$badge-size-mini-font-default: extra-small-text;
-$badge-size-mini-font-caps: extra-small-text-caps;
-$badge-size-mini-font-mono: extra-small-text-mono;
-$badge-font-default-default: caption;
-$badge-font-default-caps: caption-caps;
-$badge-font-default-mono: caption-mono;
-$badge-font-mini-default: extra-small-text;
-$badge-font-mini-caps: extra-small-text-caps;
-$badge-font-mini-mono: extra-small-text-mono;
 $badge-light-color-scheme-solid-primary-background: #4187ff;
 $badge-light-color-scheme-solid-primary-border: #4187ff;
 $badge-light-color-scheme-solid-primary-color: white;
@@ -373,6 +355,22 @@ $badge-dark-color-scheme-solid-light-color: white;
 $badge-dark-color-scheme-solid-second-background: #515e69;
 $badge-dark-color-scheme-solid-second-border: #515e69;
 $badge-dark-color-scheme-solid-second-color: white;
+$badge-size-default-height: 24px;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$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-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
@@ -501,6 +499,22 @@ $datepicker-calendar-font-header: caption;
 $datepicker-input-size-width: 130px;
 $divider-size-width: 1px;
 $divider-size-inset-margin: 80px;
+$description-list-light-color-scheme-dt: #6d7a86;
+$description-list-light-color-scheme-dd: #19252f;
+$description-list-dark-color-scheme-dt: #8c99a5;
+$description-list-dark-color-scheme-dd: #f2f5f9;
+$description-list-size-grid-template-columns: repeat(4, 1fr);
+$description-list-size-dt-grid-column: 1;
+$description-list-size-dd-grid-column: 2 / span 3;
+$description-list-size-horizontal-column-gap: 16px;
+$description-list-size-horizontal-row-gap: 12px;
+$description-list-size-vertical-column-gap: 0;
+$description-list-size-vertical-row-gap: 2px;
+$description-list-size-vertical-dd-margin-bottom: 16px;
+$description-list-font-horizontal-dt: body;
+$description-list-font-horizontal-dd: body;
+$description-list-font-vertical-dt: caption;
+$description-list-font-vertical-dd: body;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -532,6 +546,21 @@ $form-field-size-button-width: 32px;
 $form-field-font-default: body;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
+$form-field-password-hint-light-color-scheme-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-icon-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-invalid-icon-color: #db3c55;
+$form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
+$form-field-password-hint-light-color-scheme-states-valid-icon-color: #016b37;
+$form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-icon-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ea5868;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
+$form-field-password-hint-dark-color-scheme-states-valid-icon-color: #319d5c;
+$form-field-password-hint-size-margin-top: 8px;
+$form-field-password-hint-size-icon-margin: 4px;
+$form-field-password-hint-font-default: caption;
 $forms-light-color-scheme-label: #6d7a86;
 $forms-light-color-scheme-legend: #19252f;
 $forms-dark-color-scheme-label: #8c99a5;
@@ -735,11 +764,27 @@ $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
 $table-font-body: body;
 $tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-active: #0374eb;
-$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
+$tabs-light-color-scheme-state-active-marker-color: #0374eb;
+$tabs-light-color-scheme-state-empty-icon: #8c99a5;
+$tabs-light-color-scheme-state-empty-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-icon: #8c99a5;
+$tabs-light-color-scheme-state-disabled-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-dark-color-scheme-border: #333f4a;
-$tabs-dark-color-scheme-state-active: #0059b8;
-$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
+$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
 $tabs-size-padding-horizontal: 16px;
@@ -747,6 +792,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #014b9d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: #e7f1ff;
 $tags-light-color-scheme-primary-text: #0374eb;

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

@@ -1,43 +1,5 @@
 {
     badge: {
-        size: {
-            default: {
-                'min-width': { value: '10px' },
-                padding: { value: '0 8px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '4px' },
-                height: { value: '24px' },
-                font: {
-                    default: { value: 'caption' },
-                    caps: { value: 'caption-caps' },
-                    mono: { value: 'caption-mono'}
-                }
-            },
-            mini: {
-                height: { value: '16px' },
-                'min-width': { value: '10px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '2px' },
-                padding: { value: '0 4px' },
-                font: {
-                    default: { value: 'extra-small-text' },
-                    caps: { value: 'extra-small-text-caps' },
-                    mono: { value: 'extra-small-text-mono'}
-                }
-            }
-        },
-        font: {
-            default: {
-                default: { value: 'caption' },
-                caps: { value: 'caption-caps' },
-                mono: { value: 'caption-mono'}
-            },
-            mini: {
-                default: { value: 'extra-small-text' },
-                caps: { value: 'extra-small-text-caps' },
-                mono: { value: 'extra-small-text-mono'}
-            }
-        },
         'light-color-scheme': {
             solid: {
                 primary: {
@@ -180,5 +142,33 @@
                 }
             }
         },
+        size: {
+            default: {
+                height: { value: '{size.xxl}' },
+                'min-width': { value: '10px' },
+                padding: { value: '0 8px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '4px' }
+            },
+            mini: {
+                height: { value: '{size.l}' },
+                'min-width': { value: '10px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '2px' },
+                padding: { value: '0 4px' }
+            }
+        },
+        font: {
+            default: {
+                default: { value: 'caption' },
+                caps: { value: 'caption-caps' },
+                mono: { value: 'caption-mono'}
+            },
+            mini: {
+                default: { value: 'extra-small-text' },
+                caps: { value: 'extra-small-text-caps' },
+                mono: { value: 'extra-small-text-mono'}
+            }
+        }
     }
 }

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

@@ -0,0 +1,38 @@
+{
+    'description-list': {
+        'light-color-scheme': {
+            dt: { value: '{light-color-scheme.foreground.text-less-contrast.value}' },
+            dd: { value: '{light-color-scheme.foreground.text.value}' }
+        },
+        'dark-color-scheme': {
+            dt: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' },
+            dd: { value: '{dark-color-scheme.foreground.text.value}' }
+        },
+        size: {
+            'grid-template-columns': { value: 'repeat(4, 1fr)' },
+
+            'dt-grid-column': { value: '1' },
+            'dd-grid-column': { value: '2 / span 3' },
+
+            horizontal: {
+                'column-gap': { value: '16px' },
+                'row-gap': { value: '12px' }
+            },
+            vertical: {
+                'column-gap': { value: '0' },
+                'row-gap': { value: '2px' },
+                'dd-margin-bottom': { value: '16px' }
+            },
+        },
+        font: {
+            horizontal: {
+                dt: { value: 'body' },
+                dd: { value: 'body' },
+            },
+            vertical: {
+                dt: { value: 'caption' },
+                dd: { value: 'body' }
+            },
+        }
+    }
+}

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

@@ -48,5 +48,44 @@
         font: {
             default: { value: 'caption' }
         }
+    },
+    'form-field-password-hint': {
+        'light-color-scheme': {
+            'text-color': { value: '{light-color-scheme.foreground.text.value}' },
+            'icon-color': { value: '{light-color-scheme.foreground.text.value}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{light-color-scheme.foreground.text-error.value}' },
+                    'text-color': { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                valid: {
+                    'text-color': { value: '{light-color-scheme.foreground.text-success.value}' },
+                    'icon-color': { value: '{light-color-scheme.foreground.text-success.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            'text-color': { value: '{dark-color-scheme.foreground.text.value}' },
+            'icon-color': { value: '{dark-color-scheme.foreground.text.value}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-error.value}' },
+                    'text-color': { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                valid: {
+                    'text-color': { value: '{dark-color-scheme.foreground.text-success.value}' },
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-success.value}' }
+                }
+            }
+        },
+        size: {
+            'margin-top': { value: '8px' },
+            'icon-margin': { value: '4px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
     }
 }

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

@@ -2,13 +2,55 @@
     tabs: {
         'light-color-scheme': {
             border: { value: '{light-color-scheme.second.palette.value.300.value}' },
-            'state-active': { value: '{light-color-scheme.primary.palette.value.500.value}' },
-            'state-disabled-overlay': { value: 'rgba(white, 0.5)' }
+
+            state: {
+                normal: {
+                    icon: { value: '{light-color-scheme.foreground.icon.value}' },
+                    text: { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                hover: {
+                    icon: { value: '{light-color-scheme.foreground.text.value}' },
+                    text: { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                active: {
+                    'marker-color': { value: '{light-color-scheme.primary.default.value}' }
+                },
+                empty: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled.value}' }
+                },
+                disabled: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
         },
         'dark-color-scheme': {
             border: { value: '{dark-color-scheme.second.palette.value.300.value}' },
-            'state-active': { value: '{dark-color-scheme.primary.palette.value.400.value}' },
-            'state-disabled-overlay': { value: 'rgba(white, 0.5)' }
+
+            state: {
+                normal: {
+                    icon: { value: '{dark-color-scheme.foreground.icon.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                hover: {
+                    icon: { value: '{dark-color-scheme.foreground.text.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                active: {
+                    'marker-color': { value: '{dark-color-scheme.primary.default.value}' }
+                },
+                empty: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled.value}' }
+                },
+                disabled: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
         },
         size: {
             height: { value: '40px' },
@@ -21,5 +63,39 @@
         font: {
             default: { value: 'body' }
         }
+    },
+    'vertical-tabs': {
+        'light-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{light-color-scheme.states.selected-color.value}' },
+                },
+                hover: {
+                    background: { value: '{light-color-scheme.background.overlay-hover.value}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({light-color-scheme.states.selected-color.value}, $saturation:-22%, $lightness:-5%)' },
+                }
+            }
+        },
+        'dark-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{dark-color-scheme.states.selected-color.value}' },
+                },
+                hover: {
+                    background: { value: '{dark-color-scheme.background.overlay-hover.value}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({dark-color-scheme.states.selected-color.value}, $lightness:-1%)' },
+                }
+            }
+        }
     }
 }

package/design-tokens/legacy-2017/tokens/properties/colors.json5

@@ -34,6 +34,8 @@
             text: { value: '{palette.grey.700.value}' },
             'text-less-contrast': { value: '{palette.grey.400.value}'},
             'text-disabled': { value: '{palette.grey.300.value}' },
+            'text-error': { value: '{light-color-scheme.error.palette.value.500.value}' },
+            'text-success': { value: '{light-color-scheme.success.palette.value.560.value}' },
             divider: { value: '{palette.grey.100.value}' },
             border: { value: '{palette.grey.300.value}' },
             icon: { value: '{palette.grey.400.value}' }
@@ -88,6 +90,8 @@
             text: { value: '{palette.grey.60.value}' },
             'text-less-contrast': { value: '{palette.grey.400.value}'},
             'text-disabled': { value: '{palette.grey.400.value}' },
+            'text-error': { value: '{dark-color-scheme.error.palette.value.400.value}' },
+            'text-success': { value: '{dark-color-scheme.success.palette.value.400.value}' },
             divider: { value: '{palette.grey.600.value}' },
             border: { value: '{palette.grey.500.value}' },
             icon: { value: '{palette.grey.400.value}' }

package/design-tokens/legacy-2017/tokens/properties/globals.json5

@@ -1,5 +1,23 @@
 {
     size: {
+        '3xs': '2px',
+        'xxs': '4px',
+        'xs': '6px',
+        's': '8px',
+        'm': '12px',
+        'l': '16px',
+        'xl': '20px',
+        'xxl': '24px',
+        '3xl': '32px',
+        '4xl': '40px',
+        '5xl': '48px',
+        '6xl': '56px',
+        '7xl': '64px',
+
+        'border-width': '1px',
+        'border-radius': '3px',
+
+        // this will be deleted
         'option-height': '32px',
         'panel-height': '48px',
         // у radio и checkbox в макетах 20px, у тоггла есть две модификации на 16px и 14px
@@ -12,7 +30,8 @@
         'badge_tag-height': '24px',
         // modal; sidepanel - сейчас в этих компонентах paddings
         'header-height': '56px',
-        'footer-height': '64px'
+        'footer-height': '64px',
+        // this will be deleted
     },
     padding: {
         'control-horizontal': '16px',

package/design-tokens/legacy-2017/tokens.d.ts

@@ -2387,6 +2387,8 @@ export declare const LightColorSchemeWarningPalette: {
 export declare const LightColorSchemeForegroundText = "#4D4D4D";
 export declare const LightColorSchemeForegroundTextLessContrast = "#999999";
 export declare const LightColorSchemeForegroundTextDisabled = "#B3B3B3";
+export declare const LightColorSchemeForegroundTextError = "#E04D36";
+export declare const LightColorSchemeForegroundTextSuccess = "#449327";
 export declare const LightColorSchemeForegroundDivider = "#E6E6E6";
 export declare const LightColorSchemeForegroundBorder = "#B3B3B3";
 export declare const LightColorSchemeForegroundIcon = "#999999";
@@ -4785,6 +4787,8 @@ export declare const DarkColorSchemeWarningPalette: {
 export declare const DarkColorSchemeForegroundText = "#F0F0F0";
 export declare const DarkColorSchemeForegroundTextLessContrast = "#999999";
 export declare const DarkColorSchemeForegroundTextDisabled = "#999999";
+export declare const DarkColorSchemeForegroundTextError = "#E76E5C";
+export declare const DarkColorSchemeForegroundTextSuccess = "#6FBA53";
 export declare const DarkColorSchemeForegroundDivider = "#666666";
 export declare const DarkColorSchemeForegroundBorder = "#808080";
 export declare const DarkColorSchemeForegroundIcon = "#999999";
@@ -7041,28 +7045,6 @@ export declare const AlertFontSmallBody = "caption";
 export declare const AutocompleteSizePanelPadding = "4px 0";
 export declare const AutocompleteSizePanelMaxHeight = "256px";
 export declare const AutocompleteSizePanelBorderRadius = "3px";
-export declare const BadgeSizeDefaultMinWidth = "10px";
-export declare const BadgeSizeDefaultPadding = "0 8px";
-export declare const BadgeSizeDefaultBorderWidth = "1px";
-export declare const BadgeSizeDefaultBorderRadius = "4px";
-export declare const BadgeSizeDefaultHeight = "24px";
-export declare const BadgeSizeDefaultFontDefault = "caption";
-export declare const BadgeSizeDefaultFontCaps = "caption-caps";
-export declare const BadgeSizeDefaultFontMono = "caption-mono";
-export declare const BadgeSizeMiniHeight = "16px";
-export declare const BadgeSizeMiniMinWidth = "10px";
-export declare const BadgeSizeMiniBorderWidth = "1px";
-export declare const BadgeSizeMiniBorderRadius = "2px";
-export declare const BadgeSizeMiniPadding = "0 4px";
-export declare const BadgeSizeMiniFontDefault = "extra-small-text";
-export declare const BadgeSizeMiniFontCaps = "extra-small-text-caps";
-export declare const BadgeSizeMiniFontMono = "extra-small-text-mono";
-export declare const BadgeFontDefaultDefault = "caption";
-export declare const BadgeFontDefaultCaps = "caption-caps";
-export declare const BadgeFontDefaultMono = "caption-mono";
-export declare const BadgeFontMiniDefault = "extra-small-text";
-export declare const BadgeFontMiniCaps = "extra-small-text-caps";
-export declare const BadgeFontMiniMono = "extra-small-text-mono";
 export declare const BadgeLightColorSchemeSolidPrimaryBackground = "#338FCC";
 export declare const BadgeLightColorSchemeSolidPrimaryColor = "white";
 export declare const BadgeLightColorSchemeSolidPrimaryBorder = "#338FCC";
@@ -7141,6 +7123,22 @@ export declare const BadgeDarkColorSchemeSolidLightColor = "white";
 export declare const BadgeDarkColorSchemeSolidSecondBorder = "#4D4D4D";
 export declare const BadgeDarkColorSchemeSolidSecondBackground = "#4D4D4D";
 export declare const BadgeDarkColorSchemeSolidSecondColor = "white";
+export declare const BadgeSizeDefaultHeight = "24px";
+export declare const BadgeSizeDefaultMinWidth = "10px";
+export declare const BadgeSizeDefaultPadding = "0 8px";
+export declare const BadgeSizeDefaultBorderWidth = "1px";
+export declare const BadgeSizeDefaultBorderRadius = "4px";
+export declare const BadgeSizeMiniHeight = "16px";
+export declare const BadgeSizeMiniMinWidth = "10px";
+export declare const BadgeSizeMiniBorderWidth = "1px";
+export declare const BadgeSizeMiniBorderRadius = "2px";
+export declare const BadgeSizeMiniPadding = "0 4px";
+export declare const BadgeFontDefaultDefault = "caption";
+export declare const BadgeFontDefaultCaps = "caption-caps";
+export declare const BadgeFontDefaultMono = "caption-mono";
+export declare const BadgeFontMiniDefault = "extra-small-text";
+export declare const BadgeFontMiniCaps = "extra-small-text-caps";
+export declare const BadgeFontMiniMono = "extra-small-text-mono";
 export declare const ButtonToggleSizeBorderSize = "1px";
 export declare const ButtonToggleSizeBorderRadius = "3px";
 export declare const ButtonLightColorSchemeActiveShadow = "inset 0 1px 2px 0 rgba(black, 0.2)";
@@ -7269,6 +7267,22 @@ export declare const DatepickerCalendarFontHeader = "caption";
 export declare const DatepickerInputSizeWidth = "130px";
 export declare const DividerSizeWidth = "1px";
 export declare const DividerSizeInsetMargin = "80px";
+export declare const DescriptionListLightColorSchemeDt = "#999999";
+export declare const DescriptionListLightColorSchemeDd = "#4D4D4D";
+export declare const DescriptionListDarkColorSchemeDt = "#999999";
+export declare const DescriptionListDarkColorSchemeDd = "#F0F0F0";
+export declare const DescriptionListSizeGridTemplateColumns = "repeat(4, 1fr)";
+export declare const DescriptionListSizeDtGridColumn = "1";
+export declare const DescriptionListSizeDdGridColumn = "2 / span 3";
+export declare const DescriptionListSizeHorizontalColumnGap = "16px";
+export declare const DescriptionListSizeHorizontalRowGap = "12px";
+export declare const DescriptionListSizeVerticalColumnGap = "0";
+export declare const DescriptionListSizeVerticalRowGap = "2px";
+export declare const DescriptionListSizeVerticalDdMarginBottom = "16px";
+export declare const DescriptionListFontHorizontalDt = "body";
+export declare const DescriptionListFontHorizontalDd = "body";
+export declare const DescriptionListFontVerticalDt = "caption";
+export declare const DescriptionListFontVerticalDd = "body";
 export declare const DropdownItemSizePadding = "5px 15px";
 export declare const DropdownItemSizeIconPadding = "0 8px 2px 0";
 export declare const DropdownItemFontDefault = "body";
@@ -7300,6 +7314,21 @@ export declare const FormFieldSizeButtonWidth = "32px";
 export declare const FormFieldFontDefault = "body";
 export declare const FormFieldHintSizeMarginTop = "4px";
 export declare const FormFieldHintFontDefault = "caption";
+export declare const FormFieldPasswordHintLightColorSchemeTextColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeIconColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidIconColor = "#E04D36";
+export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidTextColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeStatesValidTextColor = "#449327";
+export declare const FormFieldPasswordHintLightColorSchemeStatesValidIconColor = "#449327";
+export declare const FormFieldPasswordHintDarkColorSchemeTextColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeIconColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor = "#E76E5C";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesValidTextColor = "#6FBA53";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#6FBA53";
+export declare const FormFieldPasswordHintSizeMarginTop = "8px";
+export declare const FormFieldPasswordHintSizeIconMargin = "4px";
+export declare const FormFieldPasswordHintFontDefault = "caption";
 export declare const FormsLightColorSchemeLabel = "#999999";
 export declare const FormsLightColorSchemeLegend = "#4D4D4D";
 export declare const FormsDarkColorSchemeLabel = "#999999";
@@ -7503,11 +7532,27 @@ export declare const TableSizeRowPaddingHorizontal = "16px";
 export declare const TableFontHeader = "caption";
 export declare const TableFontBody = "body";
 export declare const TabsLightColorSchemeBorder = "#B3B3B3";
-export declare const TabsLightColorSchemeStateActive = "#338FCC";
-export declare const TabsLightColorSchemeStateDisabledOverlay = "rgba(white, 0.5)";
+export declare const TabsLightColorSchemeStateNormalIcon = "#999999";
+export declare const TabsLightColorSchemeStateNormalText = "#4D4D4D";
+export declare const TabsLightColorSchemeStateHoverIcon = "#4D4D4D";
+export declare const TabsLightColorSchemeStateHoverText = "#4D4D4D";
+export declare const TabsLightColorSchemeStateActiveMarkerColor = "#338FCC";
+export declare const TabsLightColorSchemeStateEmptyIcon = "#B3B3B3";
+export declare const TabsLightColorSchemeStateEmptyText = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledIcon = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledText = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
 export declare const TabsDarkColorSchemeBorder = "#B3B3B3";
-export declare const TabsDarkColorSchemeStateActive = "#57A4D7";
-export declare const TabsDarkColorSchemeStateDisabledOverlay = "rgba(white, 0.5)";
+export declare const TabsDarkColorSchemeStateNormalIcon = "#999999";
+export declare const TabsDarkColorSchemeStateNormalText = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateHoverIcon = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateHoverText = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateActiveMarkerColor = "#57A4D7";
+export declare const TabsDarkColorSchemeStateEmptyIcon = "#999999";
+export declare const TabsDarkColorSchemeStateEmptyText = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledIcon = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledText = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
 export declare const TabsSizeHeight = "40px";
 export declare const TabsSizeHighlightHeight = "4px";
 export declare const TabsSizePaddingHorizontal = "16px";
@@ -7515,6 +7560,14 @@ export declare const TabsSizeBorderWidth = "1px";
 export declare const TabsSizeBorderRadius = "3px";
 export declare const TabsSizeLabelIconMargin = "8px";
 export declare const TabsFontDefault = "body";
+export declare const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
+export declare const VerticalTabsLightColorSchemeStateSelectedBackground = "#D8EAF7";
+export declare const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export declare const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#D8EAF7, $saturation:-22%, $lightness:-5%)";
+export declare const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
+export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "#114E77";
+export declare const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#114E77, $lightness:-1%)";
 export declare const TagsLightColorSchemePrimaryBackground = "#D8EAF7";
 export declare const TagsLightColorSchemePrimaryBorder = "#D8EAF7";
 export declare const TagsLightColorSchemePrimaryText = "#338FCC";