@mozaic-ds/angular 0.24.0-beta.3 → 0.24.0-beta.5

package/assets/tokens/adeo/scss/_tokens.scss

@@ -1,3 +1,4 @@
+
 $border-s: 1 !default;
 $border-m: 2 !default;
 $border-l: 3 !default;
@@ -333,6 +334,9 @@ $color-listbox-tile-border: #b3b3b3 !default;
 $color-listbox-tile-shadow: #191919 !default;
 $color-listbox-tile-hover-background: #e6e6e6 !default;
 $color-listbox-disabled-background: #cccccc !default;
+$color-loader-dark: #191919 !default;
+$color-loader-light: #ffffff !default;
+$color-loader-primary: #007f8c !default;
 $color-menu-is-active: #007f8c !default;
 $color-menu-hover: #eeedea !default;
 $color-menu-active: #dddcd5 !default;
@@ -370,7 +374,7 @@ $color-phone-number-item-focus-background: #e6e6e6 !default;
 $color-progress-background: #cdd4d8 !default;
 $color-progress-indicator: #007f8c !default;
 $color-progress-percentage-default: #191919 !default;
-$color-progress-percentage-half: #ffffff !default;
+$color-progress-percentage-background: #ffffff !default;
 $color-segmented-control-is-active: #007f8c !default;
 $color-segmented-control-hover: #eeedea !default;
 $color-segmented-control-active: #dddcd5 !default;
@@ -586,35 +590,35 @@ $tokens: (
   'border': (
     's': $border-s,
     'm': $border-m,
-    'l': $border-l,
+    'l': $border-l
   ),
   'color': (
     'badge': (
       'info': (
         'background': $color-badge-info-background,
         'border': $color-badge-info-border,
-        'text': $color-badge-info-text,
+        'text': $color-badge-info-text
       ),
       'success': (
         'background': $color-badge-success-background,
         'border': $color-badge-success-border,
-        'text': $color-badge-success-text,
+        'text': $color-badge-success-text
       ),
       'warning': (
         'background': $color-badge-warning-background,
         'border': $color-badge-warning-border,
-        'text': $color-badge-warning-text,
+        'text': $color-badge-warning-text
       ),
       'danger': (
         'background': $color-badge-danger-background,
         'border': $color-badge-danger-border,
-        'text': $color-badge-danger-text,
+        'text': $color-badge-danger-text
       ),
       'neutral': (
         'background': $color-badge-neutral-background,
         'border': $color-badge-neutral-border,
-        'text': $color-badge-neutral-text,
-      ),
+        'text': $color-badge-neutral-text
+      )
     ),
     'primary-01': (
       '100': $color-primary-01-100,
@@ -625,7 +629,7 @@ $tokens: (
       '600': $color-primary-01-600,
       '700': $color-primary-01-700,
       '800': $color-primary-01-800,
-      '900': $color-primary-01-900,
+      '900': $color-primary-01-900
     ),
     'primary-02': (
       '100': $color-primary-02-100,
@@ -636,7 +640,7 @@ $tokens: (
       '600': $color-primary-02-600,
       '700': $color-primary-02-700,
       '800': $color-primary-02-800,
-      '900': $color-primary-02-900,
+      '900': $color-primary-02-900
     ),
     'grey': (
       '100': $color-grey-100,
@@ -649,7 +653,7 @@ $tokens: (
       '800': $color-grey-800,
       '900': $color-grey-900,
       '999': $color-grey-999,
-      '000': $color-grey-000,
+      '000': $color-grey-000
     ),
     'secondary-blue': (
       '100': $color-secondary-blue-100,
@@ -660,7 +664,7 @@ $tokens: (
       '600': $color-secondary-blue-600,
       '700': $color-secondary-blue-700,
       '800': $color-secondary-blue-800,
-      '900': $color-secondary-blue-900,
+      '900': $color-secondary-blue-900
     ),
     'secondary-green': (
       '100': $color-secondary-green-100,
@@ -671,7 +675,7 @@ $tokens: (
       '600': $color-secondary-green-600,
       '700': $color-secondary-green-700,
       '800': $color-secondary-green-800,
-      '900': $color-secondary-green-900,
+      '900': $color-secondary-green-900
     ),
     'secondary-purple': (
       '100': $color-secondary-purple-100,
@@ -682,7 +686,7 @@ $tokens: (
       '600': $color-secondary-purple-600,
       '700': $color-secondary-purple-700,
       '800': $color-secondary-purple-800,
-      '900': $color-secondary-purple-900,
+      '900': $color-secondary-purple-900
     ),
     'secondary-red': (
       '100': $color-secondary-red-100,
@@ -693,7 +697,7 @@ $tokens: (
       '600': $color-secondary-red-600,
       '700': $color-secondary-red-700,
       '800': $color-secondary-red-800,
-      '900': $color-secondary-red-900,
+      '900': $color-secondary-red-900
     ),
     'secondary-orange': (
       '100': $color-secondary-orange-100,
@@ -704,7 +708,7 @@ $tokens: (
       '600': $color-secondary-orange-600,
       '700': $color-secondary-orange-700,
       '800': $color-secondary-orange-800,
-      '900': $color-secondary-orange-900,
+      '900': $color-secondary-orange-900
     ),
     'secondary-yellow': (
       '100': $color-secondary-yellow-100,
@@ -715,7 +719,7 @@ $tokens: (
       '600': $color-secondary-yellow-600,
       '700': $color-secondary-yellow-700,
       '800': $color-secondary-yellow-800,
-      '900': $color-secondary-yellow-900,
+      '900': $color-secondary-yellow-900
     ),
     'danger': (
       '100': $color-danger-100,
@@ -726,7 +730,7 @@ $tokens: (
       '600': $color-danger-600,
       '700': $color-danger-700,
       '800': $color-danger-800,
-      '900': $color-danger-900,
+      '900': $color-danger-900
     ),
     'info': (
       '100': $color-info-100,
@@ -737,7 +741,7 @@ $tokens: (
       '600': $color-info-600,
       '700': $color-info-700,
       '800': $color-info-800,
-      '900': $color-info-900,
+      '900': $color-info-900
     ),
     'warning': (
       '100': $color-warning-100,
@@ -748,7 +752,7 @@ $tokens: (
       '600': $color-warning-600,
       '700': $color-warning-700,
       '800': $color-warning-800,
-      '900': $color-warning-900,
+      '900': $color-warning-900
     ),
     'success': (
       '100': $color-success-100,
@@ -759,284 +763,284 @@ $tokens: (
       '600': $color-success-600,
       '700': $color-success-700,
       '800': $color-success-800,
-      '900': $color-success-900,
+      '900': $color-success-900
     ),
     'breadcrumb': (
       'arrow': $color-breadcrumb-arrow,
-      'arrow-invert': $color-breadcrumb-arrow-invert,
+      'arrow-invert': $color-breadcrumb-arrow-invert
     ),
     'button': (
       'solid': (
         'background': $color-button-solid-background,
         'font': $color-button-solid-font,
         'focus': (
-          'border': $color-button-solid-focus-border,
+          'border': $color-button-solid-focus-border
         ),
         'disabled': (
           'background': $color-button-solid-disabled-background,
-          'font': $color-button-solid-disabled-font,
+          'font': $color-button-solid-disabled-font
         ),
         'active': (
-          'background': $color-button-solid-active-background,
+          'background': $color-button-solid-active-background
         ),
         'hover': (
           'background': $color-button-solid-hover-background,
-          'font': $color-button-solid-hover-font,
-        ),
+          'font': $color-button-solid-hover-font
+        )
       ),
       'solid-primary-02': (
         'background': $color-button-solid-primary-02-background,
         'font': $color-button-solid-primary-02-font,
         'focus': (
-          'border': $color-button-solid-primary-02-focus-border,
+          'border': $color-button-solid-primary-02-focus-border
         ),
         'disabled': (
           'background': $color-button-solid-primary-02-disabled-background,
-          'font': $color-button-solid-primary-02-disabled-font,
+          'font': $color-button-solid-primary-02-disabled-font
         ),
         'active': (
-          'background': $color-button-solid-primary-02-active-background,
+          'background': $color-button-solid-primary-02-active-background
         ),
         'hover': (
           'background': $color-button-solid-primary-02-hover-background,
-          'font': $color-button-solid-primary-02-hover-font,
-        ),
+          'font': $color-button-solid-primary-02-hover-font
+        )
       ),
       'solid-neutral': (
         'background': $color-button-solid-neutral-background,
         'font': $color-button-solid-neutral-font,
         'focus': (
-          'border': $color-button-solid-neutral-focus-border,
+          'border': $color-button-solid-neutral-focus-border
         ),
         'disabled': (
           'background': $color-button-solid-neutral-disabled-background,
-          'font': $color-button-solid-neutral-disabled-font,
+          'font': $color-button-solid-neutral-disabled-font
         ),
         'active': (
-          'background': $color-button-solid-neutral-active-background,
+          'background': $color-button-solid-neutral-active-background
         ),
         'hover': (
           'background': $color-button-solid-neutral-hover-background,
-          'font': $color-button-solid-neutral-hover-font,
-        ),
+          'font': $color-button-solid-neutral-hover-font
+        )
       ),
       'solid-danger': (
         'background': $color-button-solid-danger-background,
         'font': $color-button-solid-danger-font,
         'focus': (
-          'border': $color-button-solid-danger-focus-border,
+          'border': $color-button-solid-danger-focus-border
         ),
         'disabled': (
           'background': $color-button-solid-danger-disabled-background,
-          'font': $color-button-solid-danger-disabled-font,
+          'font': $color-button-solid-danger-disabled-font
         ),
         'active': (
-          'background': $color-button-solid-danger-active-background,
+          'background': $color-button-solid-danger-active-background
         ),
         'hover': (
           'background': $color-button-solid-danger-hover-background,
-          'font': $color-button-solid-danger-hover-font,
-        ),
+          'font': $color-button-solid-danger-hover-font
+        )
       ),
       'bordered': (
         'background': $color-button-bordered-background,
         'border': $color-button-bordered-border,
         'font': $color-button-bordered-font,
         'focus': (
-          'border': $color-button-bordered-focus-border,
+          'border': $color-button-bordered-focus-border
         ),
         'disabled': (
           'background': $color-button-bordered-disabled-background,
-          'font': $color-button-bordered-disabled-font,
+          'font': $color-button-bordered-disabled-font
         ),
         'active': (
           'background': $color-button-bordered-active-background,
-          'font': $color-button-bordered-active-font,
+          'font': $color-button-bordered-active-font
         ),
         'hover': (
           'background': $color-button-bordered-hover-background,
-          'font': $color-button-bordered-hover-font,
-        ),
+          'font': $color-button-bordered-hover-font
+        )
       ),
       'bordered-primary-02': (
         'background': $color-button-bordered-primary-02-background,
         'border': $color-button-bordered-primary-02-border,
         'font': $color-button-bordered-primary-02-font,
         'focus': (
-          'border': $color-button-bordered-primary-02-focus-border,
+          'border': $color-button-bordered-primary-02-focus-border
         ),
         'disabled': (
           'background': $color-button-bordered-primary-02-disabled-background,
-          'font': $color-button-bordered-primary-02-disabled-font,
+          'font': $color-button-bordered-primary-02-disabled-font
         ),
         'active': (
-          'background': $color-button-bordered-primary-02-active-background,
+          'background': $color-button-bordered-primary-02-active-background
         ),
         'hover': (
-          'background': $color-button-bordered-primary-02-hover-background,
-        ),
+          'background': $color-button-bordered-primary-02-hover-background
+        )
       ),
       'bordered-neutral': (
         'background': $color-button-bordered-neutral-background,
         'border': $color-button-bordered-neutral-border,
         'font': $color-button-bordered-neutral-font,
         'focus': (
-          'border': $color-button-bordered-neutral-focus-border,
+          'border': $color-button-bordered-neutral-focus-border
         ),
         'disabled': (
           'background': $color-button-bordered-neutral-disabled-background,
-          'font': $color-button-bordered-neutral-disabled-font,
+          'font': $color-button-bordered-neutral-disabled-font
         ),
         'active': (
-          'background': $color-button-bordered-neutral-active-background,
+          'background': $color-button-bordered-neutral-active-background
         ),
         'hover': (
-          'background': $color-button-bordered-neutral-hover-background,
-        ),
+          'background': $color-button-bordered-neutral-hover-background
+        )
       ),
       'bordered-danger': (
         'background': $color-button-bordered-danger-background,
         'border': $color-button-bordered-danger-border,
         'font': $color-button-bordered-danger-font,
         'focus': (
-          'border': $color-button-bordered-danger-focus-border,
+          'border': $color-button-bordered-danger-focus-border
         ),
         'disabled': (
           'background': $color-button-bordered-danger-disabled-background,
-          'font': $color-button-bordered-danger-disabled-font,
+          'font': $color-button-bordered-danger-disabled-font
         ),
         'active': (
           'background': $color-button-bordered-danger-active-background,
-          'font': $color-button-bordered-danger-active-font,
+          'font': $color-button-bordered-danger-active-font
         ),
         'hover': (
           'background': $color-button-bordered-danger-hover-background,
-          'font': $color-button-bordered-danger-hover-font,
-        ),
-      ),
+          'font': $color-button-bordered-danger-hover-font
+        )
+      )
     ),
     'card': (
       'bordered': (
         'background': $color-card-bordered-background,
-        'border': $color-card-bordered-border,
-      ),
+        'border': $color-card-bordered-border
+      )
     ),
     'datatable': (
       'filters': (
-        'border': $color-datatable-filters-border,
+        'border': $color-datatable-filters-border
       ),
       'container': (
-        'background': $color-datatable-container-background,
+        'background': $color-datatable-container-background
       ),
       'thead': (
-        'font': $color-datatable-thead-font,
+        'font': $color-datatable-thead-font
       ),
       'sort-arrow': (
         'default': $color-datatable-sort-arrow-default,
-        'active': $color-datatable-sort-arrow-active,
+        'active': $color-datatable-sort-arrow-active
       ),
       'cell': (
         'font': $color-datatable-cell-font,
         'background': (
           'hover': $color-datatable-cell-background-hover,
-          'selected': $color-datatable-cell-background-selected,
-        ),
+          'selected': $color-datatable-cell-background-selected
+        )
       ),
       'subtable': (
         'background': $color-datatable-subtable-background,
         'border': $color-datatable-subtable-border,
-        'font': $color-datatable-subtable-font,
+        'font': $color-datatable-subtable-font
       ),
       'icon': $color-datatable-icon,
       'empty': (
         'background': $color-datatable-empty-background,
-        'color': $color-datatable-empty-color,
-      ),
+        'color': $color-datatable-empty-color
+      )
     ),
     'dialog': (
       'background': $color-dialog-background,
       'icon': $color-dialog-icon,
       'close': $color-dialog-close,
       'footer': (
-        'shadow': $color-dialog-footer-shadow,
-      ),
+        'shadow': $color-dialog-footer-shadow
+      )
     ),
     'divider': (
       'lightest': $color-divider-lightest,
       'light': $color-divider-light,
       'default': $color-divider-default,
-      'dark': $color-divider-dark,
+      'dark': $color-divider-dark
     ),
     'fields': (
       'error': $color-fields-error,
       'label': $color-fields-label,
       'requirement': $color-fields-requirement,
-      'help': $color-fields-help,
+      'help': $color-fields-help
     ),
     'fileuploader': (
       'font': $color-fileuploader-font,
       'files': (
         'list': $color-fileuploader-files-list,
-        'delete': $color-fileuploader-files-delete,
+        'delete': $color-fileuploader-files-delete
       ),
       'valid': $color-fileuploader-valid,
-      'alert': $color-fileuploader-alert,
+      'alert': $color-fileuploader-alert
     ),
     'flag': (
       'solid': (
         'background': $color-flag-solid-background,
         'border': $color-flag-solid-border,
-        'text': $color-flag-solid-text,
+        'text': $color-flag-solid-text
       ),
       'solid-primary-02': (
         'background': $color-flag-solid-primary-02-background,
         'border': $color-flag-solid-primary-02-border,
-        'text': $color-flag-solid-primary-02-text,
+        'text': $color-flag-solid-primary-02-text
       ),
       'solid-dark': (
         'background': $color-flag-solid-dark-background,
         'border': $color-flag-solid-dark-border,
-        'text': $color-flag-solid-dark-text,
+        'text': $color-flag-solid-dark-text
       ),
       'solid-light': (
         'background': $color-flag-solid-light-background,
         'border': $color-flag-solid-light-border,
-        'text': $color-flag-solid-light-text,
+        'text': $color-flag-solid-light-text
       ),
       'solid-danger': (
         'background': $color-flag-solid-danger-background,
         'border': $color-flag-solid-danger-border,
-        'text': $color-flag-solid-danger-text,
+        'text': $color-flag-solid-danger-text
       ),
       'bordered': (
         'background': $color-flag-bordered-background,
         'border': $color-flag-bordered-border,
-        'text': $color-flag-bordered-text,
+        'text': $color-flag-bordered-text
       ),
       'bordered-primary-02': (
         'background': $color-flag-bordered-primary-02-background,
         'border': $color-flag-bordered-primary-02-border,
-        'text': $color-flag-bordered-primary-02-text,
+        'text': $color-flag-bordered-primary-02-text
       ),
       'bordered-dark': (
         'background': $color-flag-bordered-dark-background,
         'border': $color-flag-bordered-dark-border,
-        'text': $color-flag-bordered-dark-text,
+        'text': $color-flag-bordered-dark-text
       ),
       'bordered-light': (
         'background': $color-flag-bordered-light-background,
         'border': $color-flag-bordered-light-border,
-        'text': $color-flag-bordered-light-text,
+        'text': $color-flag-bordered-light-text
       ),
       'bordered-danger': (
         'background': $color-flag-bordered-danger-background,
         'border': $color-flag-bordered-danger-border,
-        'text': $color-flag-bordered-danger-text,
-      ),
+        'text': $color-flag-bordered-danger-text
+      )
     ),
     'focus': (
       'gap': $color-focus-gap,
-      'border': $color-focus-border,
+      'border': $color-focus-border
     ),
     'font': (
       'primary-01': $color-font-primary-01,
@@ -1049,18 +1053,18 @@ $tokens: (
       'info': $color-font-info,
       'success': $color-font-success,
       'warning': $color-font-warning,
-      'danger': $color-font-danger,
+      'danger': $color-font-danger
     ),
     'heading': (
       'underline': (
         'default': $color-heading-underline-default,
-        'lightest': $color-heading-underline-lightest,
-      ),
+        'lightest': $color-heading-underline-lightest
+      )
     ),
     'hero': (
       'cover': (
-        'background': $color-hero-cover-background,
-      ),
+        'background': $color-hero-cover-background
+      )
     ),
     'input': (
       'text': $color-input-text,
@@ -1071,34 +1075,34 @@ $tokens: (
         'background': $color-input-disabled-background,
         'border': $color-input-disabled-border,
         'icon': $color-input-disabled-icon,
-        'label': $color-input-disabled-label,
+        'label': $color-input-disabled-label
       ),
       'hover': (
-        'border': $color-input-hover-border,
+        'border': $color-input-hover-border
       ),
       'focus': (
-        'border': $color-input-focus-border,
+        'border': $color-input-focus-border
       ),
       'valid': (
         'border': $color-input-valid-border,
         'hover': (
-          'border': $color-input-valid-hover-border,
-        ),
+          'border': $color-input-valid-hover-border
+        )
       ),
       'invalid': (
         'border': $color-input-invalid-border,
         'hover': (
-          'border': $color-input-invalid-hover-border,
-        ),
+          'border': $color-input-invalid-hover-border
+        )
       ),
       'checked': (
         'border': $color-input-checked-border,
         'background': $color-input-checked-background,
         'icon': $color-input-checked-icon,
         'hover': (
-          'border': $color-input-checked-hover-border,
-        ),
-      ),
+          'border': $color-input-checked-hover-border
+        )
+      )
     ),
     'link': (
       'dark': (
@@ -1106,36 +1110,36 @@ $tokens: (
         'visited': $color-link-dark-visited,
         'active': $color-link-dark-active,
         'disabled': $color-link-dark-disabled,
-        'hover': $color-link-dark-hover,
+        'hover': $color-link-dark-hover
       ),
       'light': (
         'base': $color-link-light-base,
         'visited': $color-link-light-visited,
         'active': $color-link-light-active,
         'disabled': $color-link-light-disabled,
-        'hover': $color-link-light-hover,
+        'hover': $color-link-light-hover
       ),
       'primary': (
         'base': $color-link-primary-base,
         'visited': $color-link-primary-visited,
         'active': $color-link-primary-active,
         'disabled': $color-link-primary-disabled,
-        'hover': $color-link-primary-hover,
+        'hover': $color-link-primary-hover
       ),
       'primary-02': (
         'base': $color-link-primary-02-base,
         'visited': $color-link-primary-02-visited,
         'active': $color-link-primary-02-active,
         'disabled': $color-link-primary-02-disabled,
-        'hover': $color-link-primary-02-hover,
+        'hover': $color-link-primary-02-hover
       ),
       'danger': (
         'base': $color-link-danger-base,
         'visited': $color-link-danger-visited,
         'active': $color-link-danger-active,
         'disabled': $color-link-danger-disabled,
-        'hover': $color-link-danger-hover,
-      ),
+        'hover': $color-link-danger-hover
+      )
     ),
     'listbox': (
       'background': $color-listbox-background,
@@ -1144,223 +1148,228 @@ $tokens: (
         'border': $color-listbox-tile-border,
         'shadow': $color-listbox-tile-shadow,
         'hover': (
-          'background': $color-listbox-tile-hover-background,
-        ),
+          'background': $color-listbox-tile-hover-background
+        )
       ),
       'disabled': (
-        'background': $color-listbox-disabled-background,
-      ),
+        'background': $color-listbox-disabled-background
+      )
+    ),
+    'loader': (
+      'dark': $color-loader-dark,
+      'light': $color-loader-light,
+      'primary': $color-loader-primary
     ),
     'menu': (
       'is-active': $color-menu-is-active,
       'hover': $color-menu-hover,
-      'active': $color-menu-active,
+      'active': $color-menu-active
     ),
     'notification': (
       'font': $color-notification-font,
       'information': (
         'background': $color-notification-information-background,
         'border': $color-notification-information-border,
-        'icon': $color-notification-information-icon,
+        'icon': $color-notification-information-icon
       ),
       'success': (
         'background': $color-notification-success-background,
         'border': $color-notification-success-border,
-        'icon': $color-notification-success-icon,
+        'icon': $color-notification-success-icon
       ),
       'warning': (
         'background': $color-notification-warning-background,
         'border': $color-notification-warning-border,
-        'icon': $color-notification-warning-icon,
+        'icon': $color-notification-warning-icon
       ),
       'danger': (
         'background': $color-notification-danger-background,
         'border': $color-notification-danger-border,
-        'icon': $color-notification-danger-icon,
-      ),
+        'icon': $color-notification-danger-icon
+      )
     ),
     'option-button': (
       'label': (
-        'shadow': $color-option-button-label-shadow,
+        'shadow': $color-option-button-label-shadow
       ),
       'hover': (
         'label': (
-          'shadow': $color-option-button-hover-label-shadow,
-        ),
+          'shadow': $color-option-button-hover-label-shadow
+        )
       ),
       'checked': (
         'label': (
           'border': $color-option-button-checked-label-border,
-          'shadow': $color-option-button-checked-label-shadow,
-        ),
+          'shadow': $color-option-button-checked-label-shadow
+        )
       ),
       'disabled': (
         'label': (
-          'background': $color-option-button-disabled-label-background,
-        ),
-      ),
+          'background': $color-option-button-disabled-label-background
+        )
+      )
     ),
     'option-card': (
       'label': (
-        'shadow': $color-option-card-label-shadow,
+        'shadow': $color-option-card-label-shadow
       ),
       'hover': (
         'label': (
-          'shadow': $color-option-card-hover-label-shadow,
-        ),
+          'shadow': $color-option-card-hover-label-shadow
+        )
       ),
       'checked': (
         'label': (
           'border': $color-option-card-checked-label-border,
-          'shadow': $color-option-card-checked-label-shadow,
-        ),
+          'shadow': $color-option-card-checked-label-shadow
+        )
       ),
       'disabled': (
         'content': $color-option-card-disabled-content,
-        'label': $color-option-card-disabled-label,
-      ),
+        'label': $color-option-card-disabled-label
+      )
     ),
     'overlay': (
       'background': $color-overlay-background,
       'loader': (
-        'background': $color-overlay-loader-background,
-      ),
+        'background': $color-overlay-loader-background
+      )
     ),
     'password-input': (
       'button': (
         'hover': (
-          'background': $color-password-input-button-hover-background,
-        ),
-      ),
+          'background': $color-password-input-button-hover-background
+        )
+      )
     ),
     'phone-number': (
       'button': (
-        'border': $color-phone-number-button-border,
+        'border': $color-phone-number-button-border
       ),
       'list': (
-        'background': $color-phone-number-list-background,
+        'background': $color-phone-number-list-background
       ),
       'item': (
         'border': $color-phone-number-item-border,
         'focus': (
-          'background': $color-phone-number-item-focus-background,
-        ),
-      ),
+          'background': $color-phone-number-item-focus-background
+        )
+      )
     ),
     'progress': (
       'background': $color-progress-background,
       'indicator': $color-progress-indicator,
       'percentage': (
         'default': $color-progress-percentage-default,
-        'half': $color-progress-percentage-half,
-      ),
+        'background': $color-progress-percentage-background
+      )
     ),
     'segmented-control': (
       'is-active': $color-segmented-control-is-active,
       'hover': $color-segmented-control-hover,
       'active': $color-segmented-control-active,
-      'background': $color-segmented-control-background,
+      'background': $color-segmented-control-background
     ),
     'sidebar': (
       'background': $color-sidebar-background,
       'feature': (
         'background': $color-sidebar-feature-background,
         'hover': (
-          'background': $color-sidebar-feature-hover-background,
+          'background': $color-sidebar-feature-hover-background
         ),
         'selected': (
-          'background': $color-sidebar-feature-selected-background,
+          'background': $color-sidebar-feature-selected-background
         ),
         'disabled': (
-          'background': $color-sidebar-feature-disabled-background,
-        ),
+          'background': $color-sidebar-feature-disabled-background
+        )
       ),
       'user': (
-        'background': $color-sidebar-user-background,
+        'background': $color-sidebar-user-background
       ),
       'divider': (
-        'background': $color-sidebar-divider-background,
+        'background': $color-sidebar-divider-background
       ),
       'icon': $color-sidebar-icon,
       'text': (
         'background': $color-sidebar-text-background,
-        'color': $color-sidebar-text-color,
+        'color': $color-sidebar-text-color
       ),
       'scroll': (
         'background': $color-sidebar-scroll-background,
-        'color': $color-sidebar-scroll-color,
-      ),
+        'color': $color-sidebar-scroll-color
+      )
     ),
     'star': (
       'empty': $color-star-empty,
       'focus': $color-star-focus,
       'full': $color-star-full,
-      'hover': $color-star-hover,
+      'hover': $color-star-hover
     ),
     'stepper': (
       'item': (
         'background': $color-stepper-item-background,
         'current': (
-          'background': $color-stepper-item-current-background,
-        ),
+          'background': $color-stepper-item-current-background
+        )
       ),
       'link': (
         'hover': (
-          'text': $color-stepper-link-hover-text,
-        ),
+          'text': $color-stepper-link-hover-text
+        )
       ),
       'indicator': (
         'background': $color-stepper-indicator-background,
         'border': $color-stepper-indicator-border,
         'current': (
           'background': $color-stepper-indicator-current-background,
-          'border': $color-stepper-indicator-current-border,
-        ),
+          'border': $color-stepper-indicator-current-border
+        )
       ),
       'icon': $color-stepper-icon,
-      'title': $color-stepper-title,
+      'title': $color-stepper-title
     ),
     'tabs': (
       'background': $color-tabs-background,
       'shadow': $color-tabs-shadow,
       'default': $color-tabs-default,
       'element': (
-        'background': $color-tabs-element-background,
+        'background': $color-tabs-element-background
       ),
       'hover': (
-        'background': $color-tabs-hover-background,
+        'background': $color-tabs-hover-background
       ),
       'disabled': (
-        'background': $color-tabs-disabled-background,
+        'background': $color-tabs-disabled-background
       ),
       'active': (
         'background': $color-tabs-active-background,
-        'text': $color-tabs-active-text,
+        'text': $color-tabs-active-text
       ),
       'selected': (
         'border': $color-tabs-selected-border,
         'text': $color-tabs-selected-text,
         'active': (
-          'text': $color-tabs-selected-active-text,
+          'text': $color-tabs-selected-active-text
         ),
         'hover': (
-          'text': $color-tabs-selected-hover-text,
-        ),
+          'text': $color-tabs-selected-hover-text
+        )
       ),
-      'active-disabled': $color-tabs-active-disabled,
+      'active-disabled': $color-tabs-active-disabled
     ),
     'tag': (
       'text': (
         'light': (
           'background': $color-tag-text-light-background,
           'border': $color-tag-text-light-border,
-          'text': $color-tag-text-light-text,
+          'text': $color-tag-text-light-text
         ),
         'dark': (
           'background': $color-tag-text-dark-background,
           'border': $color-tag-text-dark-border,
-          'text': $color-tag-text-dark-text,
-        ),
+          'text': $color-tag-text-dark-text
+        )
       ),
       'link': (
         'light': (
@@ -1368,23 +1377,23 @@ $tokens: (
           'border': $color-tag-link-light-border,
           'text': $color-tag-link-light-text,
           'hover': (
-            'background': $color-tag-link-light-hover-background,
+            'background': $color-tag-link-light-hover-background
           ),
           'active': (
-            'background': $color-tag-link-light-active-background,
-          ),
+            'background': $color-tag-link-light-active-background
+          )
         ),
         'dark': (
           'background': $color-tag-link-dark-background,
           'border': $color-tag-link-dark-border,
           'text': $color-tag-link-dark-text,
           'hover': (
-            'background': $color-tag-link-dark-hover-background,
+            'background': $color-tag-link-dark-hover-background
           ),
           'active': (
-            'background': $color-tag-link-dark-active-background,
-          ),
-        ),
+            'background': $color-tag-link-dark-active-background
+          )
+        )
       ),
       'selectable': (
         'light': (
@@ -1392,50 +1401,50 @@ $tokens: (
           'border': $color-tag-selectable-light-border,
           'text': $color-tag-selectable-light-text,
           'hover': (
-            'background': $color-tag-selectable-light-hover-background,
+            'background': $color-tag-selectable-light-hover-background
           ),
           'active': (
             'background': $color-tag-selectable-light-active-background,
             'border': $color-tag-selectable-light-active-border,
-            'text': $color-tag-selectable-light-active-text,
+            'text': $color-tag-selectable-light-active-text
           ),
           'disabled': (
             'background': $color-tag-selectable-light-disabled-background,
-            'text': $color-tag-selectable-light-disabled-text,
+            'text': $color-tag-selectable-light-disabled-text
           ),
           'selected': (
             'background': $color-tag-selectable-light-selected-background,
             'text': $color-tag-selectable-light-selected-text,
             'hover': (
-              'background': $color-tag-selectable-light-selected-hover-background,
-            ),
-          ),
+              'background': $color-tag-selectable-light-selected-hover-background
+            )
+          )
         ),
         'dark': (
           'background': $color-tag-selectable-dark-background,
           'border': $color-tag-selectable-dark-border,
           'text': $color-tag-selectable-dark-text,
           'hover': (
-            'background': $color-tag-selectable-dark-hover-background,
+            'background': $color-tag-selectable-dark-hover-background
           ),
           'active': (
             'background': $color-tag-selectable-dark-active-background,
             'border': $color-tag-selectable-dark-active-border,
-            'text': $color-tag-selectable-dark-active-text,
+            'text': $color-tag-selectable-dark-active-text
           ),
           'selected': (
             'background': $color-tag-selectable-dark-selected-background,
             'border': $color-tag-selectable-dark-selected-border,
             'text': $color-tag-selectable-dark-selected-text,
             'hover': (
-              'background': $color-tag-selectable-dark-selected-hover-background,
-            ),
+              'background': $color-tag-selectable-dark-selected-hover-background
+            )
           ),
           'disabled': (
             'background': $color-tag-selectable-dark-disabled-background,
-            'text': $color-tag-selectable-dark-disabled-text,
-          ),
-        ),
+            'text': $color-tag-selectable-dark-disabled-text
+          )
+        )
       ),
       'removable': (
         'light': (
@@ -1443,51 +1452,51 @@ $tokens: (
           'text': $color-tag-removable-light-text,
           'icon': $color-tag-removable-light-icon,
           'hover': (
-            'background': $color-tag-removable-light-hover-background,
+            'background': $color-tag-removable-light-hover-background
           ),
           'active': (
-            'background': $color-tag-removable-light-active-background,
-          ),
+            'background': $color-tag-removable-light-active-background
+          )
         ),
         'dark': (
           'background': $color-tag-removable-dark-background,
           'text': $color-tag-removable-dark-text,
           'icon': $color-tag-removable-dark-icon,
           'hover': (
-            'background': $color-tag-removable-dark-hover-background,
+            'background': $color-tag-removable-dark-hover-background
           ),
           'active': (
-            'background': $color-tag-removable-dark-active-background,
-          ),
-        ),
-      ),
+            'background': $color-tag-removable-dark-active-background
+          )
+        )
+      )
     ),
     'toggle': (
       'label': $color-toggle-label,
       'off': (
         'background': $color-toggle-off-background,
-        'circle': $color-toggle-off-circle,
+        'circle': $color-toggle-off-circle
       ),
       'on': (
         'background': $color-toggle-on-background,
-        'circle': $color-toggle-on-circle,
+        'circle': $color-toggle-on-circle
       ),
       'hover': (
-        'circle': $color-toggle-hover-circle,
+        'circle': $color-toggle-hover-circle
       ),
       'disabled': (
         'background': $color-toggle-disabled-background,
         'circle': $color-toggle-disabled-circle,
-        'label': $color-toggle-disabled-label,
+        'label': $color-toggle-disabled-label
       ),
       'disabled-checked': (
         'background': $color-toggle-disabled-checked-background,
-        'circle': $color-toggle-disabled-checked-circle,
-      ),
+        'circle': $color-toggle-disabled-checked-circle
+      )
     ),
     'tooltip': (
       'background': $color-tooltip-background,
-      'border': $color-tooltip-border,
+      'border': $color-tooltip-border
     ),
     'secondary-sandgrey': (
       '100': $color-secondary-sandgrey-100,
@@ -1498,14 +1507,14 @@ $tokens: (
       '600': $color-secondary-sandgrey-600,
       '700': $color-secondary-sandgrey-700,
       '800': $color-secondary-sandgrey-800,
-      '900': $color-secondary-sandgrey-900,
-    ),
+      '900': $color-secondary-sandgrey-900
+    )
   ),
   'preset': $preset,
   'radius': (
     's': $radius-s,
     'm': $radius-m,
-    'l': $radius-l,
+    'l': $radius-l
   ),
   'shadow': (
     's': (
@@ -1513,22 +1522,22 @@ $tokens: (
       'y': $shadow-s-y,
       'blur': $shadow-s-blur,
       'spread': $shadow-s-spread,
-      'opacity': $shadow-s-opacity,
+      'opacity': $shadow-s-opacity
     ),
     'm': (
       'x': $shadow-m-x,
       'y': $shadow-m-y,
       'blur': $shadow-m-blur,
       'spread': $shadow-m-spread,
-      'opacity': $shadow-m-opacity,
+      'opacity': $shadow-m-opacity
     ),
     'l': (
       'x': $shadow-l-x,
       'y': $shadow-l-y,
       'blur': $shadow-l-blur,
       'spread': $shadow-l-spread,
-      'opacity': $shadow-l-opacity,
-    ),
+      'opacity': $shadow-l-opacity
+    )
   ),
   'magic-unit': $magic-unit,
   'local-rem-value': $local-rem-value,
@@ -1545,88 +1554,88 @@ $tokens: (
       '06': $size-font-06,
       '07': $size-font-07,
       '08': $size-font-08,
-      '09': $size-font-09,
+      '09': $size-font-09
     ),
     'line': (
       '10': (
         'xs': $size-line-10-xs,
         's': $size-line-10-s,
         'm': $size-line-10-m,
-        'l': $size-line-10-l,
+        'l': $size-line-10-l
       ),
       '11': (
         'xs': $size-line-11-xs,
         's': $size-line-11-s,
         'm': $size-line-11-m,
-        'l': $size-line-11-l,
+        'l': $size-line-11-l
       ),
       '12': (
         'xs': $size-line-12-xs,
         's': $size-line-12-s,
         'm': $size-line-12-m,
-        'l': $size-line-12-l,
+        'l': $size-line-12-l
       ),
       '01': (
         'xs': $size-line-01-xs,
         's': $size-line-01-s,
         'm': $size-line-01-m,
-        'l': $size-line-01-l,
+        'l': $size-line-01-l
       ),
       '02': (
         'xs': $size-line-02-xs,
         's': $size-line-02-s,
         'm': $size-line-02-m,
-        'l': $size-line-02-l,
+        'l': $size-line-02-l
       ),
       '03': (
         'xs': $size-line-03-xs,
         's': $size-line-03-s,
         'm': $size-line-03-m,
-        'l': $size-line-03-l,
+        'l': $size-line-03-l
       ),
       '04': (
         'xs': $size-line-04-xs,
         's': $size-line-04-s,
         'm': $size-line-04-m,
-        'l': $size-line-04-l,
+        'l': $size-line-04-l
       ),
       '05': (
         'xs': $size-line-05-xs,
         's': $size-line-05-s,
         'm': $size-line-05-m,
-        'l': $size-line-05-l,
+        'l': $size-line-05-l
       ),
       '06': (
         'xs': $size-line-06-xs,
         's': $size-line-06-s,
         'm': $size-line-06-m,
-        'l': $size-line-06-l,
+        'l': $size-line-06-l
       ),
       '07': (
         'xs': $size-line-07-xs,
         's': $size-line-07-s,
         'm': $size-line-07-m,
-        'l': $size-line-07-l,
+        'l': $size-line-07-l
       ),
       '08': (
         'xs': $size-line-08-xs,
         's': $size-line-08-s,
         'm': $size-line-08-m,
-        'l': $size-line-08-l,
+        'l': $size-line-08-l
       ),
       '09': (
         'xs': $size-line-09-xs,
         's': $size-line-09-s,
         'm': $size-line-09-m,
-        'l': $size-line-09-l,
-      ),
+        'l': $size-line-09-l
+      )
     ),
     'gutter': (
       'screen': (
         's': $size-gutter-screen-s,
-        'm': $size-gutter-screen-m,
-      ),
-    ),
+        'm': $size-gutter-screen-m
+      )
+    )
   ),
   'screen': (
     's': $screen-s,
@@ -1640,6 +1649,6 @@ $tokens: (
     'xl': $screen-xl,
     'xl-medium': $screen-xl-medium,
     'xl-large': $screen-xl-large,
-    'xxl': $screen-xxl,
-  ),
+    'xxl': $screen-xxl
+  )
 );