@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/__fixtures__/testTheme.js

@@ -1,100 +1,68 @@
-const {
-  buttonAppearances,
-  linkAppearances,
-  sideNavItemAppearances,
-  toggleSwitchAppearances
-} = require('@telus-uds/tools-theme')
-const { appearances: systemAppearances } = require('@telus-uds/system-constants')
+import { appearances } from '@telus-uds/system-theme-tokens'
+import systemThemeTokensPackage from '@telus-uds/system-theme-tokens/package.json'
 
 // This is a dev-only file so we don't need to make @telus-uds/palette-allium a dependency.
-// eslint-disable-next-line import/no-extraneous-dependencies
-const chevronLeft = require('@telus-uds/palette-allium/build/rn/icons/chevron-left.icon.svg')
-  .default
-// eslint-disable-next-line import/no-extraneous-dependencies
-const chevronRight = require('@telus-uds/palette-allium/build/rn/icons/chevron-right.icon.svg')
-  .default
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import {
+  ChevronLeft,
+  ChevronRight,
+  Checkmark,
+  Close,
+  Question,
+  SearchBold,
+  Times
+} from '@telus-uds/palette-allium/build/rn/icons'
 
 const transparent = 'rgba(0, 0, 0, 0)'
 
-module.exports = {
+export default {
   metadata: {
-    name: 'test'
+    name: 'test',
+    themeTokensVersion: systemThemeTokensPackage.version
   },
   components: {
-    Box: {
-      style: {},
-      levels: {
-        xs: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        sm: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        md: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 36,
-          7: 40,
-          8: 48,
-          9: 64,
-          10: 80,
-          11: 96
-        },
-        lg: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 40,
-          7: 48,
-          8: 64,
-          9: 72,
-          10: 96,
-          11: 120
-        },
-        xl: {
-          0: 0,
-          1: 4,
-          2: 8,
-          3: 16,
-          4: 24,
-          5: 32,
-          6: 40,
-          7: 48,
-          8: 64,
-          9: 72,
-          10: 96,
-          11: 120
-        }
+    spacingScale: {
+      tokens: {
+        size: 36
       },
+      rules: [
+        { if: { space: 5 }, tokens: { size: 32 } },
+        { if: { space: 4 }, tokens: { size: 24 } },
+        { if: { space: 3 }, tokens: { size: 16 } },
+        { if: { space: 2 }, tokens: { size: 8 } },
+        { if: { space: 1 }, tokens: { size: 4 } },
+
+        { if: { compact: true }, tokens: { size: 12 } },
+        { if: { compact: true, space: 5 }, tokens: { size: 10 } },
+        { if: { compact: true, space: 4 }, tokens: { size: 8 } },
+        { if: { compact: true, space: 3 }, tokens: { size: 6 } },
+        { if: { compact: true, space: 2 }, tokens: { size: 4 } },
+        { if: { compact: true, space: 1 }, tokens: { size: 2 } },
+
+        { if: { responsive: true }, tokens: { size: 6 } },
+        { if: { responsive: true, space: 5 }, tokens: { size: 5 } },
+        { if: { responsive: true, space: 4 }, tokens: { size: 4 } },
+        { if: { responsive: true, space: 3 }, tokens: { size: 3 } },
+        { if: { responsive: true, space: 2 }, tokens: { size: 2 } },
+        { if: { responsive: true, space: 1 }, tokens: { size: 1 } },
+        { if: { responsive: true, viewport: ['sm', 'md'] }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 5 }, tokens: { size: 7 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 4 }, tokens: { size: 6 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 3 }, tokens: { size: 5 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 2 }, tokens: { size: 4 } },
+        { if: { responsive: true, viewport: ['sm', 'md'], space: 1 }, tokens: { size: 3 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'] }, tokens: { size: 12 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 5 }, tokens: { size: 11 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 4 }, tokens: { size: 10 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 3 }, tokens: { size: 9 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 2 }, tokens: { size: 8 } },
+        { if: { responsive: true, viewport: ['lg', 'xl'], space: 1 }, tokens: { size: 7 } },
+
+        { if: { space: 0 }, tokens: { size: 0 } }
+      ]
+    },
+    Box: {
+      tokens: {},
       variants: {
         lightest: {
           backgroundColor: '#ffffff'
@@ -144,7 +112,9 @@ module.exports = {
           values: [true],
           type: 'variant'
         },
-        ...buttonAppearances
+        focus: appearances.Button.focus,
+        hover: appearances.Button.hover,
+        pressed: appearances.Button.pressed
       },
       tokens: {
         borderColor: '#0e6ac8',
@@ -155,12 +125,12 @@ module.exports = {
         outerBorderColor: transparent,
         outerBorderWidth: 4,
         outerBorderGap: 2,
-        outerBorderRadius: 2,
 
         fontSize: 16,
         color: '#0e6ac8',
         lineHeight: 1.5,
         fontWeight: '600',
+        alignSelf: 'flex-start',
 
         backgroundColor: '#ffffff',
         opacity: 1,
@@ -169,12 +139,7 @@ module.exports = {
         paddingTop: 8,
         paddingBottom: 8,
 
-        width: null,
-
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: 0,
-        marginBottom: 0
+        width: null
       },
       rules: [
         {
@@ -260,8 +225,7 @@ module.exports = {
         {
           if: { rounded: true },
           tokens: {
-            borderRadius: 48,
-            outerBorderRadius: 16
+            borderRadius: 48
           }
         },
         {
@@ -279,8 +243,7 @@ module.exports = {
         {
           if: { rounded: true, pressed: true },
           tokens: {
-            borderRadius: 0,
-            outerBorderRadius: 0
+            borderRadius: 0
           }
         },
         {
@@ -325,10 +288,246 @@ module.exports = {
     },
     ButtonGroup: {
       tokens: {
-        gap: 8,
-        direction: 'row'
+        space: 2,
+        direction: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        flexGrow: 1
+      }
+    },
+    ButtonGroupItem: {
+      appearances: {
+        focus: appearances.ButtonGroupItem.focus,
+        hover: appearances.ButtonGroupItem.hover,
+        pressed: appearances.ButtonGroupItem.pressed,
+        selected: appearances.ButtonGroupItem.selected
+      },
+      tokens: {
+        borderColor: '#0e6ac8',
+        borderWidth: 2,
+        borderRadius: 0,
+        shadow: null,
+
+        outerBorderColor: transparent,
+        outerBorderWidth: 4,
+        outerBorderGap: 2,
+
+        fontSize: 16,
+        color: '#0e6ac8',
+        lineHeight: 1.5,
+        fontWeight: '600',
+        alignSelf: 'flex-start',
+
+        backgroundColor: '#ffffff',
+        opacity: 1,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        paddingBottom: 8,
+
+        width: null
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            borderWidth: 4,
+            outerBorderColor: '#0e6ac8',
+            opacity: 0.5
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderWidth: 6
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderWidth: 8
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: { backgroundColor: '#0e6ac8', color: '#ffffff', opacity: 1 }
+        }
+      ]
+    },
+    Card: {
+      appearances: {
+        background: {
+          values: ['alternative'],
+          type: 'variant'
+        },
+        padding: {
+          values: ['narrow', 'intermediate', 'compact', 'custom'],
+          type: 'variant'
+        },
+        viewport: appearances.system.viewport
+      },
+      tokens: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+        borderColor: '#666666',
+        borderRadius: 6,
+        borderWidth: 1,
+        paddingBottom: 32,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 32
+      },
+      rules: [
+        {
+          if: { background: 'alternative' },
+          tokens: {
+            backgroundColor: '#f4f4f7'
+          }
+        },
+        {
+          if: { viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 48,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 48
+          }
+        },
+        {
+          if: { padding: 'narrow' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'intermediate' },
+          tokens: {
+            paddingBottom: 24,
+            paddingLeft: 24,
+            paddingRight: 24,
+            paddingTop: 24
+          }
+        },
+        {
+          if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
+          tokens: {
+            paddingBottom: 32,
+            paddingLeft: 32,
+            paddingRight: 32,
+            paddingTop: 32
+          }
+        },
+        {
+          if: { padding: 'compact' },
+          tokens: {
+            paddingBottom: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 16
+          }
+        },
+        {
+          if: { padding: 'custom' },
+          tokens: {
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingTop: 0
+          }
+        }
+      ]
+    },
+    Checkbox: {
+      appearances: {
+        error: appearances.Checkbox.error,
+        focus: appearances.Checkbox.focus,
+        inactive: appearances.Checkbox.inactive
+      },
+      tokens: {
+        containerBackgroundColor: transparent,
+        feedbackMarginBottom: 0,
+        feedbackMarginTop: 2,
+        feedbackPosition: 'bottom',
+        icon: Checkmark,
+        iconBackgroundColor: '#7c53a5',
+        iconColor: '#ffffff',
+        iconSize: 18,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderRadius: 4,
+        inputBorderWidth: 1,
+        inputHeight: 20,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputShadow: {
+          color: '#00000044',
+          offsetY: 1,
+          offsetX: 1,
+          spread: 0,
+          blur: 1,
+          inset: false
+        },
+        inputWidth: 20,
+        labelColor: '#414547',
+        labelFontSize: 18,
+        labelFontWeight: '500',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: {
+            inputBorderColor: '#e12339'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            inputBorderColor: '#7c53a5',
+            inputBorderWidth: 3
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            inputBorderColor: 'transparent',
+            inputBackgroundColor: '#e3e6e8',
+            iconBackgroundColor: '#e3e6e8',
+            iconColor: 'rgba(103, 110, 115, 1)',
+            labelColor: '#676e73'
+          }
+        }
+      ]
+    },
+    ChevronLink: {
+      appearances: {},
+      tokens: {
+        leftIcon: ChevronLeft,
+        rightIcon: ChevronRight,
+        iconDisplace: 4
       }
     },
+    CheckboxGroup: {
+      appearances: {},
+      tokens: {
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: []
+    },
     Divider: {
       appearances: {
         weight: {
@@ -371,38 +570,385 @@ module.exports = {
         {
           if: { size: 'small' },
           tokens: {
-            size: 20
+            size: 20
+          }
+        },
+        {
+          if: { rank: 'primary' },
+          tokens: {
+            color: '#4d80de'
+          }
+        }
+      ]
+    },
+    ActivityIndicator: {
+      appearances: {
+        size: {
+          values: ['large'],
+          type: 'variant'
+        }
+      },
+      tokens: {
+        size: 24,
+        color: '#0e6ac8',
+        thickness: 2
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: {
+            size: 48,
+            thickness: 4
+          }
+        }
+      ]
+    },
+    IconButton: {
+      appearances: {},
+      tokens: {},
+      rules: []
+    },
+    Progress: {
+      appearances: {
+        size: { values: ['mini'], type: 'variant' }
+      },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderWidth: 1,
+        borderColor: '#f4f4f7',
+        borderRadius: 12,
+        height: 16
+      },
+      rules: [{ if: { size: 'mini' }, tokens: { height: 8 } }]
+    },
+    ProgressBar: {
+      appearances: {
+        inactive: appearances.ProgressBar.inactive,
+        negative: { values: [true], type: 'variant' }
+      },
+      tokens: {
+        backgroundColor: '#08804b',
+        borderRadius: 12,
+        outlineWidth: 1,
+        outlineColor: '#2b8000'
+      },
+      rules: [
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            outlineColor: '#f4f4f7'
+          }
+        },
+        {
+          if: { negative: true },
+          tokens: {
+            backgroundColor: '#c12335',
+            outlineColor: '#c12335'
+          }
+        }
+      ]
+    },
+    RadioCardGroup: {
+      appearances: {
+        viewport: appearances.system.viewport
+      },
+      tokens: {
+        direction: 'column',
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: [
+        {
+          if: {
+            viewport: ['lg', 'xl']
+          },
+          tokens: {
+            direction: 'row'
+          }
+        }
+      ]
+    },
+    RadioGroup: {
+      appearances: {},
+      tokens: {
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: []
+    },
+    Modal: {
+      appearances: {},
+      tokens: {
+        backdropColor: 'rgba(0,0,0,0.5)',
+        backdropOpacity: 1,
+        maxWidth: 600,
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        containerPaddingTop: 16,
+        containerPaddingBottom: 16,
+        backgroundColor: '#fff',
+        borderRadius: 4,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24,
+        paddingBottom: 24,
+
+        closeIcon: Close,
+        closeIconSize: 24,
+        closeIconColor: '#000'
+      },
+      rules: []
+    },
+    Search: {
+      appearances: {
+        focus: appearances.Search.focus,
+        hover: appearances.Search.hover,
+        inactive: appearances.Search.inactive
+      },
+      tokens: {
+        borderRadius: 32,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 16,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent,
+        outerBorderRadius: 32,
+        buttonsGap: 2,
+        clearButtonIcon: Times,
+        submitButtonIcon: SearchBold
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        }
+      ]
+    },
+    SearchButton: {
+      appearances: {},
+      tokens: {},
+      rules: []
+    },
+    Notification: {
+      appearances: {},
+      tokens: {
+        dismissIcon: Close
+      },
+      rules: []
+    },
+    RadioCard: {
+      appearances: {
+        checked: appearances.Radio.checked,
+        error: appearances.Radio.error,
+        focus: appearances.Radio.focus,
+        hover: appearances.Radio.hover,
+        inactive: appearances.Radio.inactive
+      },
+      tokens: {
+        // Taken from Allium theme snapshot
+        flex: 1,
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 6,
+        borderWidth: 1,
+        color: '#2c2e30',
+        contentSpace: 2,
+        fontSize: 20,
+        fontWeight: '500',
+        letterSpacing: 0,
+        lineHeight: 1.4,
+        outerBorderColor: transparent,
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 16,
+        paddingLeft: 10,
+        paddingRight: 16,
+        paddingTop: 16,
+        radioCheckedBackgroundColor: '#7c53a5',
+        radioCheckedSize: 12,
+        radioInputBackgroundColor: '#ffffff',
+        radioInputBorderColor: '#676e73',
+        radioInputBorderWidth: 1,
+        radioInputOutlineColor: transparent,
+        radioInputOutlineWidth: 0,
+        radioInputSize: 20,
+        radioOuterBorderColor: transparent,
+        radioOuterBorderGap: 0,
+        radioOuterBorderWidth: 0,
+        radioSpace: 2,
+        minWidth: 288,
+        shadow: null,
+        textTransform: 'none'
+      },
+      rules: [
+        {
+          if: {
+            viewport: ['lg', 'xl']
+          },
+          tokens: {
+            fontSize: 24,
+            lineHeight: 1.33333333333,
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 24,
+            paddingTop: 16
+          }
+        },
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            outerBorderWidth: 2,
+            radioOuterBorderColor: '#e3e6e8',
+            radioOuterBorderWidth: 2
+          }
+        },
+        {
+          description: 'Pressed state matches hover state plus light grey background',
+          if: {
+            pressed: true
+          },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: {
+            focus: true
+          },
+          tokens: {
+            radioIputBorderColor: '#7c53a5',
+            radioInputBorderWidth: 3,
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: {
+            inactive: true
+          },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: 'transparent',
+            radioInputBackgroundColor: '#e3e6e8',
+            radioInputBorderColor: 'rgba(0, 0, 0, 0)',
+            labelColor: '#676e73'
+          }
+        },
+        {
+          if: {
+            error: true
+          },
+          tokens: {
+            borderColor: '#e12339',
+            color: '#e12339',
+            radioInputBorderColor: '#e12339'
+          }
+        }
+      ]
+    },
+    Tabs: {
+      appearances: {},
+      tokens: {
+        buttonClearance: 20,
+        gutter: 12,
+        nextIcon: ChevronRight,
+        previousIcon: ChevronLeft,
+        borderBottomWidth: 1,
+        borderBottomColor: '#ebefed',
+        space: 1
+      },
+      rules: []
+    },
+    TabsItem: {
+      appearances: {},
+      tokens: {
+        backgroundColor: transparent,
+        borderColor: transparent,
+        borderRadius: 0,
+        borderWidth: 0,
+        color: '#034045',
+        fontName: '',
+        fontScaleCap: 66,
+        fontSize: 14,
+        fontWeight: '700',
+        highlightBarBorderRadius: 0,
+        highlightBarBorderWidth: 0,
+        highlightBarHeight: 0,
+        highlightColor: transparent,
+        highlightTriangleSize: 0,
+        letterSpacing: 0,
+        lineHeight: 1,
+        maxWidth: 150,
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        space: 0,
+        textAlign: 'left',
+        textTransform: 'uppercase'
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            highlightBarHeight: 2,
+            highlightColor: '#81a0a2'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#81a0a2',
+            borderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#ebefed'
           }
         },
         {
-          if: { rank: 'primary' },
+          if: { selected: true },
           tokens: {
-            color: '#4d80de'
+            highlightBarHeight: 2,
+            highlightColor: '#034045',
+            highlightTriangleSize: 8
           }
         }
       ]
     },
-    ActivityIndicator: {
-      appearances: {
-        size: {
-          values: ['large'],
-          type: 'variant'
-        }
-      },
+    TabsScrollButton: {
+      appearances: {},
       tokens: {
-        size: 24,
-        color: '#0e6ac8',
-        thickness: 2
+        backgroundColor: '#ffffff',
+        borderColor: '#81a0a2',
+        borderRadius: 12,
+        borderWidth: 1,
+        iconColor: '#81a0a2',
+        iconSize: 24,
+        padding: 0,
+        shadow: null
       },
-      rules: [
-        {
-          if: { size: 'large' },
-          tokens: {
-            size: 48,
-            thickness: 4
-          }
-        }
-      ]
+      rules: []
     },
     Typography: {
       appearances: {
@@ -435,15 +981,13 @@ module.exports = {
           values: [true],
           type: 'variant'
         },
-        viewport: systemAppearances.viewport
+        viewport: appearances.system.viewport
       },
       tokens: {
         fontWeight: '400',
         fontSize: 16,
         color: '#2c2e30',
         lineHeight: 1.5,
-        marginTop: 8,
-        marginBottom: 8,
         fontScaleCap: 64
       },
       rules: [
@@ -668,8 +1212,7 @@ module.exports = {
           values: [true],
           type: 'state'
         },
-        iconPosition: linkAppearances.iconPosition,
-        component: linkAppearances.component
+        iconPosition: appearances.Link.iconPosition
       },
       tokens: {
         color: '#0000ff',
@@ -677,8 +1220,6 @@ module.exports = {
         blockFontWeight: '400',
         blockFontSize: 16,
         blockLineHeight: 1.5,
-        blockMarginTop: 8,
-        blockMarginBottom: 8,
 
         outerBorderColor: transparent,
         outerBorderOutline: 'none',
@@ -689,9 +1230,7 @@ module.exports = {
         textLineStyle: 'solid',
 
         iconSize: 18,
-        iconGapBefore: 4,
-        iconGapAfter: 4,
-        iconScale: 1
+        iconSpace: 1
       },
       rules: [
         {
@@ -713,21 +1252,122 @@ module.exports = {
             color: '#ff0000',
             textLine: 'none'
           }
+        }
+      ]
+    },
+    Pagination: {
+      tokens: {
+        gap: 3
+      }
+    },
+    PaginationPageButton: {
+      tokens: {
+        paddingLeft: 4,
+        paddingRight: 4
+      },
+      rules: [
+        {
+          if: {
+            selected: true
+          },
+          tokens: {
+            fontWeight: '600',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            color: 'blue'
+          }
+        }
+      ]
+    },
+    PaginationSideButton: {
+      tokens: {
+        paddingLeft: 4,
+        paddingRight: 4
+      },
+      rules: [
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            color: 'blue'
+          }
+        }
+      ]
+    },
+    Radio: {
+      appearances: {
+        checked: appearances.Radio.checked,
+        error: appearances.Radio.error,
+        focus: appearances.Radio.focus,
+        hover: appearances.Radio.hover,
+        inactive: appearances.Radio.inactive
+      },
+      tokens: {
+        checkedBackgroundColor: '#7c53a5',
+        checkedSize: 12,
+        containerBackgroundColor: '#ffffff',
+        containerBorderRadius: 12,
+        containerOpacity: 1,
+        containerPaddingBottom: 12,
+        containerPaddingLeft: 18,
+        containerPaddingRight: 18,
+        containerPaddingTop: 12,
+        containerShadow: null,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 1.4,
+        descriptionMarginLeft: null,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderWidth: 1,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputSize: 20,
+        inputShadow: null,
+        outerBorderWidth: 0,
+        outerBorderColor: transparent,
+        outerBorderGap: 0,
+        labelColor: '#414547',
+        labelFontName: '',
+        labelFontSize: 18,
+        labelFontWeight: '500',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: {
+            inputBorderColor: '#e12339'
+          }
         },
         {
-          if: { component: 'ChevronLink', iconPosition: 'left' },
-          tokens: { icon: chevronLeft }
+          if: { focus: true },
+          tokens: {
+            inputBorderColor: '#7c53a5',
+            inputBorderWidth: 3
+          }
         },
         {
-          if: { component: 'ChevronLink', iconPosition: 'right' },
-          tokens: { icon: chevronRight }
+          if: { inactive: true },
+          tokens: {
+            inputBorderColor: 'transparent',
+            inputBackgroundColor: '#e3e6e8',
+            labelColor: '#676e73'
+          }
         }
       ]
     },
     SideNav: {},
     SideNavItem: {
       appearances: {
-        ...sideNavItemAppearances
+        type: appearances.SideNavItem.type
       },
       rules: [
         {
@@ -741,19 +1381,77 @@ module.exports = {
       ]
     },
     SideNavItemsGroup: {},
+    StackView: {
+      tokens: {}
+    },
+    StepTracker: {
+      appearances: {},
+      tokens: {
+        completedIcon: null,
+        completedIconColor: '#ffffff',
+        completedIconSize: 12,
+        connectorColor: '#676e73',
+        connectorHeight: 1,
+        connectorMinWidth: 16,
+        connectorCompletedHeight: 3,
+        connectorCompletedColor: '#7c53a5',
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
+        containerPaddingTop: 0,
+        knobBackgroundColor: transparent,
+        knobBorderWidth: 1,
+        knobBorderColor: '#676e73',
+        knobCompletedBackgroundColor: '#7c53a5',
+        knobCompletedBorderColor: '#7c53a5',
+        knobCompletedPaddingLeft: 1,
+        knobCompletedPaddingTop: 1,
+        knobCurrentBackgroundColor: transparent,
+        knobCurrentBorderColor: '#7c53a5',
+        knobCurrentBorderWidth: 2,
+        knobCurrentInnerColor: '#7c53a5',
+        knobCurrentInnerSize: 8,
+        knobCurrentPaddingLeft: 2,
+        knobCurrentPaddingTop: 2,
+        knobSize: 16,
+        labelColor: '#676e73',
+        labelCurrentColor: '#7c53a5',
+        labelCurrentFontWeight: '600',
+        labelDirection: 'column',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelFontName: '',
+        labelGap: 0,
+        labelLineHeight: 1.5,
+        labelMarginTop: 8,
+        labelPaddingLeft: 16,
+        labelPaddingRight: 16,
+        showStepLabel: false,
+        showStepName: true,
+        showStepTrackerLabel: true
+      },
+      rules: [
+        {
+          if: { viewport: ['lg', 'xl'] },
+          tokens: {
+            showStepLabel: true,
+            showStepTrackerLabel: false
+          }
+        }
+      ]
+    },
     ToggleSwitch: {
       appearances: {
-        focus: toggleSwitchAppearances.focus,
-        hover: toggleSwitchAppearances.hover,
-        pressed: toggleSwitchAppearances.pressed,
-        inactive: toggleSwitchAppearances.inactive,
-        selected: toggleSwitchAppearances.selected
+        focus: appearances.ToggleSwitch.focus,
+        hover: appearances.ToggleSwitch.hover,
+        pressed: appearances.ToggleSwitch.pressed,
+        inactive: appearances.ToggleSwitch.inactive,
+        selected: appearances.ToggleSwitch.selected
       },
       tokens: {
         outerBorderColor: '#000000',
         outerBorderWidth: 2,
         outerBorderGap: 2,
-        outerBorderRadius: 8,
         outerBackgroundColor: '#333333',
         borderColor: '#666666',
         borderWidth: 2,
@@ -764,6 +1462,7 @@ module.exports = {
         paddingRight: 2,
         paddingTop: 2,
         paddingBottom: 2,
+        alignSelf: 'flex-start',
 
         trackBorderWidth: 2,
         trackBorderColor: '#bbbbbb',
@@ -815,6 +1514,308 @@ module.exports = {
           tokens: { opacity: 0.4 }
         }
       ]
+    },
+    TextInput: {
+      appearances: {
+        validation: appearances.TextInput.validation,
+        focus: appearances.TextInput.focus,
+        hover: appearances.TextInput.hover,
+        inactive: appearances.TextInput.inactive
+      },
+      tokens: {
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 6,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent
+      },
+      rules: [
+        {
+          if: { validation: 'success' },
+          tokens: {
+            outerBorderColor: '#99ff99'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            outerBorderColor: '#990000'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            outerBorderColor: transparent,
+            backgroundColor: '#00000044'
+          }
+        }
+      ]
+    },
+    InputLabel: {
+      tokens: {
+        gap: 20,
+        hintFontSize: 12
+      }
+    },
+    Feedback: {
+      appearances: {
+        validation: appearances.Feedback.validation
+      },
+      tokens: {
+        borderColor: '#eee',
+        borderWidth: 1,
+        borderRadius: 3,
+        titleFontSize: 16,
+        contentFontSize: 14,
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12
+      },
+      rules: [
+        { if: { validation: 'success' }, tokens: { color: 'green' } },
+        { if: { validation: 'error' }, tokens: { color: 'red' } }
+      ]
+    },
+    List: {
+      appearances: {
+        size: {
+          values: ['large', 'small'],
+          type: 'variant'
+        },
+        compact: {
+          values: [true],
+          type: 'variant'
+        }
+      },
+      tokens: {
+        interItemMargin: 8,
+        interItemMarginWithDivider: 16,
+        dividerColor: '#666666',
+        dividerSize: 1,
+        itemBulletContainerWidth: 16,
+        itemBulletContainerAlign: 'center',
+        itemBulletWidth: 4,
+        itemBulletHeight: 4,
+        itemBulletColor: '#6666cc',
+        itemIconSize: 16,
+        itemIconColor: '#6666cc',
+        listGutter: 10,
+        itemLineHeight: 1.5
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: {
+            itemFontSize: 20,
+            itemLineHeight: 1.6,
+            listGutter: 16
+          }
+        },
+        {
+          if: { size: 'small' },
+          tokens: {
+            itemFontSize: 14,
+            itemLineHeight: 1.42857142857,
+            listGutter: 10
+          }
+        },
+        {
+          if: { compact: true },
+          tokens: {
+            itemLineHeight: 1.25
+          }
+        },
+        {
+          if: { compact: true, size: 'small' },
+          tokens: {
+            itemLineHeight: 1.14285714286
+          }
+        },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: {
+            itemLineHeight: 1.2
+          }
+        }
+      ]
+    },
+    Tags: {
+      space: 2,
+      direction: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      flexGrow: 1
+    },
+    TagsItem: {
+      appearances: {
+        focus: appearances.ButtonGroupItem.focus,
+        hover: appearances.ButtonGroupItem.hover,
+        pressed: appearances.ButtonGroupItem.pressed,
+        selected: appearances.ButtonGroupItem.selected
+      },
+      tokens: {
+        icon: Checkmark,
+        iconSize: 16,
+        iconColor: '#ffffff',
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+
+        iconPosition: 'right',
+        iconSpace: 2,
+        iconBackground: '#ffffff',
+        iconBorderRadius: 0,
+        iconAlignSelf: 'center',
+        iconPadding: 0,
+
+        borderColor: '#0e6ac8',
+        borderWidth: 2,
+        borderRadius: 0,
+        shadow: null,
+
+        outerBorderColor: transparent,
+        outerBorderWidth: 4,
+        outerBorderGap: 2,
+
+        fontSize: 16,
+        color: '#0e6ac8',
+        lineHeight: 1.5,
+        fontWeight: '600',
+        alignSelf: 'flex-start',
+
+        backgroundColor: '#ffffff',
+        opacity: 1,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        paddingBottom: 8,
+
+        width: null
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            borderWidth: 4,
+            outerBorderColor: '#0e6ac8',
+            opacity: 0.5
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderWidth: 6
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderWidth: 8
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#0e6ac8',
+            color: '#ffffff',
+            opacity: 1,
+            iconBackground: '#0e6ac8'
+          }
+        }
+      ]
+    },
+    Tooltip: {
+      tokens: {
+        backgroundColor: 'black',
+        color: 'white',
+        paddingLeft: 4,
+        paddingRight: 4,
+        paddingTop: 4,
+        paddingBottom: 4,
+        arrowOffset: 4
+      }
+    },
+    TooltipButton: {
+      tokens: {
+        icon: Question,
+        iconColor: 'black',
+        iconSize: 16
+      }
+    },
+    TextArea: {},
+    InputSupports: {},
+    Skeleton: {
+      tokens: {
+        color: '#b2b9bf',
+        radius: 100,
+        size: 3,
+        baseWidth: 40,
+        characters: 10,
+        spaceBetweenLines: 2,
+        squareRadius: 4
+      }
+    },
+    Select: {
+      tokens: {
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 6,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent
+      },
+      rules: [
+        {
+          if: { validation: 'success' },
+          tokens: {
+            outerBorderColor: '#99ff99'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            outerBorderColor: '#990000'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            outerBorderColor: transparent,
+            backgroundColor: '#00000044'
+          }
+        }
+      ]
     }
   }
 }