@mozaic-ds/vue 0.9.0 → 0.11.2-beta.0

package/src/tokens/adeo/scss/_tokens.scss

@@ -1,3 +1,4 @@
+
 $border-s: 1 !default;
 $border-m: 2 !default;
 $border-l: 3 !default;
@@ -210,7 +211,7 @@ $color-fields-help: #71706b !default;
 $color-fileuploader-font: #000000 !default;
 $color-fileuploader-files-list: #eeedea !default;
 $color-fileuploader-files-delete: #dddcd5 !default;
-$color-fileuploader-valid: #46a610 !default;
+$color-fileuploader-valid: #00919f !default;
 $color-fileuploader-alert: #c61112 !default;
 $color-flag-solid-background: #00919f !default;
 $color-flag-solid-border: #00919f !default;
@@ -298,14 +299,14 @@ $color-link-danger-active: #8b2226 !default;
 $color-link-danger-disabled: #eeedea !default;
 $color-link-danger-hover: #3e1219 !default;
 $color-notification-font: #000000 !default;
-$color-notification-information-background: #eaedef !default;
-$color-notification-information-border: #758992 !default;
-$color-notification-success-background: #d9f0f3 !default;
-$color-notification-success-border: #00919f !default;
-$color-notification-warning-background: #fff5eb !default;
-$color-notification-warning-border: #fc961e !default;
-$color-notification-danger-background: #feedee !default;
-$color-notification-danger-border: #df382b !default;
+$color-notification-information-background: #daeff7 !default;
+$color-notification-information-border: #0b96cc !default;
+$color-notification-success-background: #ebf5de !default;
+$color-notification-success-border: #46a610 !default;
+$color-notification-warning-background: #fdf1e8 !default;
+$color-notification-warning-border: #ea7315 !default;
+$color-notification-danger-background: #fdeaea !default;
+$color-notification-danger-border: #ea302d !default;
 $color-progress-background: #dddcd5 !default;
 $color-progress-indicator: #007bb4 !default;
 $color-progress-percentage-default: #1e1e1c !default;
@@ -471,35 +472,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,
@@ -510,7 +511,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,
@@ -521,7 +522,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,
@@ -534,7 +535,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,
@@ -545,7 +546,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,
@@ -556,7 +557,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,
@@ -567,7 +568,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,
@@ -578,7 +579,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,
@@ -589,7 +590,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,
@@ -600,7 +601,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,
@@ -611,7 +612,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,
@@ -622,7 +623,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,
@@ -633,7 +634,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,
@@ -644,230 +645,230 @@ $tokens: (
       '600': $color-success-600,
       '700': $color-success-700,
       '800': $color-success-800,
-      '900': $color-success-900,
+      '900': $color-success-900
     ),
     '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,
+          'background': $color-button-bordered-active-background
         ),
         'hover': (
-          'background': $color-button-bordered-hover-background,
-        ),
+          'background': $color-button-bordered-hover-background
+        )
       ),
       '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,
+          'background': $color-button-bordered-danger-active-background
         ),
         'hover': (
-          'background': $color-button-bordered-danger-hover-background,
-        ),
-      ),
+          'background': $color-button-bordered-danger-hover-background
+        )
+      )
     ),
     '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,
@@ -880,7 +881,7 @@ $tokens: (
       'info': $color-font-info,
       'success': $color-font-success,
       'warning': $color-font-warning,
-      'danger': $color-font-danger,
+      'danger': $color-font-danger
     ),
     'input': (
       'text': $color-input-text,
@@ -890,34 +891,34 @@ $tokens: (
       'disabled': (
         'border': $color-input-disabled-border,
         'background': $color-input-disabled-background,
-        'icon': $color-input-disabled-icon,
+        'icon': $color-input-disabled-icon
       ),
       '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': (
@@ -925,72 +926,72 @@ $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
+      )
     ),
     'notification': (
       'font': $color-notification-font,
       'information': (
         'background': $color-notification-information-background,
-        'border': $color-notification-information-border,
+        'border': $color-notification-information-border
       ),
       'success': (
         'background': $color-notification-success-background,
-        'border': $color-notification-success-border,
+        'border': $color-notification-success-border
       ),
       'warning': (
         'background': $color-notification-warning-background,
-        'border': $color-notification-warning-border,
+        'border': $color-notification-warning-border
       ),
       'danger': (
         'background': $color-notification-danger-background,
-        'border': $color-notification-danger-border,
-      ),
+        'border': $color-notification-danger-border
+      )
     ),
     'progress': (
       'background': $color-progress-background,
       'indicator': $color-progress-indicator,
       'percentage': (
         'default': $color-progress-percentage-default,
-        'half': $color-progress-percentage-half,
+        'half': $color-progress-percentage-half
       ),
       'branded': (
-        'indicator': $color-progress-branded-indicator,
-      ),
+        'indicator': $color-progress-branded-indicator
+      )
     ),
     'star': (
       'empty': $color-star-empty,
       'focus': $color-star-focus,
       'full': $color-star-full,
-      'hover': $color-star-hover,
+      'hover': $color-star-hover
     ),
     'tabs': (
       'background': $color-tabs-background,
@@ -999,20 +1000,20 @@ $tokens: (
       'hover': $color-tabs-hover,
       'disabled': $color-tabs-disabled,
       'active': $color-tabs-active,
-      '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': (
@@ -1020,59 +1021,59 @@ $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': (
           'background': $color-tag-selectable-light-background,
           '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,
+            'background': $color-tag-selectable-light-active-background
           ),
           '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,
-          ),
+            'background': $color-tag-selectable-light-selected-background
+          )
         ),
         'dark': (
           'background': $color-tag-selectable-dark-background,
           '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,
+            'background': $color-tag-selectable-dark-active-background
           ),
           'selected': (
-            'background': $color-tag-selectable-dark-selected-background,
+            'background': $color-tag-selectable-dark-selected-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': (
@@ -1080,52 +1081,52 @@ $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': (
       '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,
+        'circle': $color-toggle-disabled-circle
       ),
       'disabled-checked': (
         'background': $color-toggle-disabled-checked-background,
-        'circle': $color-toggle-disabled-checked-circle,
-      ),
-    ),
+        'circle': $color-toggle-disabled-checked-circle
+      )
+    )
   ),
   'preset': $preset,
   'radius': (
     's': $radius-s,
     'm': $radius-m,
-    'l': $radius-l,
+    'l': $radius-l
   ),
   'shadow': (
     's': (
@@ -1133,22 +1134,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,
@@ -1165,88 +1166,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,
@@ -1260,6 +1261,6 @@ $tokens: (
     'xl': $screen-xl,
     'xl-medium': $screen-xl-medium,
     'xl-large': $screen-xl-large,
-    'xxl': $screen-xxl,
-  ),
+    'xxl': $screen-xxl
+  )
 );