@telus-uds/components-base 1.7.0 → 1.8.1

package/__fixtures__/testTheme.js

@@ -1,1830 +0,0 @@
-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 */
-import {
-  ChevronLeft,
-  ChevronRight,
-  Checkmark,
-  Close,
-  Question,
-  SearchBold,
-  Times
-} from '@telus-uds/palette-allium/build/rn/icons'
-
-const transparent = 'rgba(0, 0, 0, 0)'
-
-export default {
-  metadata: {
-    name: 'test',
-    themeTokensVersion: systemThemeTokensPackage.version
-  },
-  components: {
-    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'
-        },
-        light: {
-          backgroundColor: '#f4f4f7'
-        },
-        dark: {
-          backgroundColor: '#414547'
-        },
-        darkest: {
-          backgroundColor: '#2c2e30'
-        },
-        critical: {
-          backgroundColor: '#c12335'
-        },
-        danger: {
-          backgroundColor: '#fff6f8'
-        },
-        warning: {
-          backgroundColor: '#000000'
-        },
-        positive: {
-          backgroundColor: '#f4f9f2'
-        },
-        brand: {
-          backgroundColor: '#4d80de'
-        }
-      },
-      defaultVariant: ['lightest']
-    },
-    Button: {
-      appearances: {
-        full: {
-          values: [true],
-          type: 'variant'
-        },
-        solid: {
-          values: [true],
-          type: 'variant'
-        },
-        rounded: {
-          values: [true],
-          type: 'variant'
-        },
-        big: {
-          values: [true],
-          type: 'variant'
-        },
-        focus: appearances.Button.focus,
-        hover: appearances.Button.hover,
-        pressed: appearances.Button.pressed
-      },
-      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 }
-        },
-        {
-          if: { full: true },
-          tokens: {
-            width: '100%',
-            outerBorderColor: '#0e6ac855'
-          }
-        },
-        {
-          if: { solid: true },
-          tokens: {
-            borderWidth: 0,
-            backgroundColor: '#0e6ac8',
-            outerBorderColor: '#0e6ac855',
-            color: '#ffffff',
-            width: '80%',
-            shadow: {
-              color: 'rgba(0,0,0,0.2)',
-              offsetX: 1,
-              offsetY: 5,
-              spread: 4,
-              blur: 2,
-              inset: false
-            }
-          }
-        },
-        {
-          if: { solid: true, focus: true },
-          tokens: {
-            opacity: 0.8,
-            shadow: {
-              color: 'rgba(0,0,0,0.2)',
-              offsetX: 1,
-              offsetY: 3,
-              spread: 3,
-              blur: 3,
-              inset: false
-            }
-          }
-        },
-        {
-          if: { solid: true, hover: true },
-          tokens: {
-            opacity: 0.6
-          }
-        },
-        {
-          if: { solid: true, pressed: true },
-          tokens: {
-            opacity: 0.4,
-            shadow: null
-          }
-        },
-        {
-          if: { solid: true, selected: true },
-          tokens: { outerBorderColor: '#0e6ac8' }
-        },
-        {
-          if: { rounded: true },
-          tokens: {
-            borderRadius: 48
-          }
-        },
-        {
-          if: { rounded: true, focus: true },
-          tokens: {
-            borderRadius: 32
-          }
-        },
-        {
-          if: { rounded: true, hover: true },
-          tokens: {
-            borderRadius: 16
-          }
-        },
-        {
-          if: { rounded: true, pressed: true },
-          tokens: {
-            borderRadius: 0
-          }
-        },
-        {
-          if: { big: true },
-          tokens: {
-            paddingTop: 16,
-            paddingBottom: 16,
-            width: 300,
-            height: 100,
-            outerBorderGap: 16,
-            outerBorderWidth: 8,
-            borderWidth: 4
-          }
-        },
-        {
-          if: { big: true, focus: true },
-          tokens: {
-            borderWidth: 8
-          }
-        },
-        {
-          if: { big: true, hover: true },
-          tokens: {
-            borderWidth: 12
-          }
-        },
-        {
-          if: { big: true, pressed: true },
-          tokens: {
-            borderWidth: 16
-          }
-        },
-        {
-          if: { inactive: true },
-          tokens: {
-            color: '#0e6ac8',
-            backgroundColor: '#0e6ac855',
-            opacity: 0.6
-          }
-        }
-      ]
-    },
-    ButtonGroup: {
-      tokens: {
-        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: {
-          values: ['thick'],
-          type: 'variant'
-        }
-      },
-      tokens: {
-        width: 1,
-        color: '#e3e6e8'
-      },
-      rules: [
-        {
-          if: { weight: 'thick' },
-          tokens: {
-            width: 5
-          }
-        }
-      ]
-    },
-    ExpandCollapse: {},
-    ExpandCollapseControl: {},
-    ExpandCollapsePanel: {},
-    Icon: {
-      appearances: {
-        size: {
-          values: ['small'],
-          type: 'variant'
-        },
-        rank: {
-          values: ['primary'],
-          type: 'variant'
-        }
-      },
-      tokens: {
-        size: 24,
-        color: '#414547'
-      },
-      rules: [
-        {
-          if: { size: 'small' },
-          tokens: {
-            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: { selected: true },
-          tokens: {
-            highlightBarHeight: 2,
-            highlightColor: '#034045',
-            highlightTriangleSize: 8
-          }
-        }
-      ]
-    },
-    TabsScrollButton: {
-      appearances: {},
-      tokens: {
-        backgroundColor: '#ffffff',
-        borderColor: '#81a0a2',
-        borderRadius: 12,
-        borderWidth: 1,
-        iconColor: '#81a0a2',
-        iconSize: 24,
-        padding: 0,
-        shadow: null
-      },
-      rules: []
-    },
-    Typography: {
-      appearances: {
-        weight: {
-          values: ['light', 'medium', 'bold'],
-          type: 'variant'
-        },
-        size: {
-          values: [
-            'micro',
-            'small',
-            'large',
-            'h1',
-            'h2',
-            'h3',
-            'h4',
-            'h5',
-            'h6',
-            'display1',
-            'display2'
-          ],
-          type: 'variant'
-        },
-        colour: {
-          values: ['secondary', 'tertiary'],
-          type: 'variant'
-        },
-        inverse: {
-          description: 'Styles the link white for use on dark backgrounds.',
-          values: [true],
-          type: 'variant'
-        },
-        viewport: appearances.system.viewport
-      },
-      tokens: {
-        fontWeight: '400',
-        fontSize: 16,
-        color: '#2c2e30',
-        lineHeight: 1.5,
-        fontScaleCap: 64
-      },
-      rules: [
-        {
-          if: { inverse: true },
-          tokens: {
-            color: '#ffffff'
-          }
-        },
-        {
-          if: { colour: 'primary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { colour: 'secondary' },
-          tokens: {
-            color: '#414547'
-          }
-        },
-        {
-          if: { weight: 'light' },
-          tokens: {
-            fontWeight: '300'
-          }
-        },
-        {
-          if: { weight: 'medium' },
-          tokens: {
-            fontWeight: '500'
-          }
-        },
-        {
-          if: { weight: 'bold' },
-          tokens: {
-            fontWeight: '700'
-          }
-        },
-        {
-          if: { size: 'large' },
-          tokens: {
-            fontSize: 20,
-            lineHeight: 1.6
-          }
-        },
-        {
-          if: { size: 'small' },
-          tokens: {
-            fontSize: 14,
-            lineHeight: 1.4
-          }
-        },
-        {
-          if: { size: 'micro' },
-          tokens: {
-            fontSize: 12,
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'display1' },
-          tokens: {
-            fontSize: 40,
-            fontWeight: '300',
-            lineHeight: 1.2
-          }
-        },
-        {
-          if: { size: 'display1', colour: 'primary' },
-          tokens: {
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'display1', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'display1', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 64,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'display2' },
-          tokens: {
-            fontSize: 40,
-            fontWeight: '300',
-            color: '#4d80de',
-            lineHeight: 1.2
-          }
-        },
-        {
-          if: { size: 'display2', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'display2', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 56,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'h1' },
-          tokens: {
-            fontSize: 28,
-            lineHeight: 1.2,
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'h1', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h1', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 40,
-            lineHeight: 1.1
-          }
-        },
-        {
-          if: { size: 'h2' },
-          tokens: {
-            fontSize: 24,
-            color: '#4d80de',
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h2', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h2', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 28
-          }
-        },
-        {
-          if: { size: 'h3' },
-          tokens: {
-            fontSize: 20,
-            fontWeight: '500',
-            lineHeight: 1.4,
-            color: '#4d80de'
-          }
-        },
-        {
-          if: { size: 'h3', colour: 'secondary' },
-          tokens: {
-            color: '#2c2e30'
-          }
-        },
-        {
-          if: { size: 'h3', viewport: ['lg', 'xl'] },
-          tokens: {
-            fontSize: 24,
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h4' },
-          tokens: {
-            fontSize: 16,
-            weight: '500',
-            lineHeight: 1.5
-          }
-        },
-        {
-          if: { size: 'h5' },
-          tokens: {
-            fontSize: 14,
-            fontWeight: '500',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h6' },
-          tokens: {
-            fontSize: 12,
-            fontWeight: '700',
-            lineHeight: 1.3
-          }
-        },
-        {
-          if: { size: 'h6', colour: 'tertiary' },
-          tokens: {
-            color: '#000000'
-          }
-        }
-      ]
-    },
-    Link: {
-      appearances: {
-        size: {
-          values: ['big'],
-          type: 'variant'
-        },
-        alternative: {
-          values: [true],
-          type: 'variant'
-        },
-        focus: {
-          values: [true],
-          type: 'state'
-        },
-        hover: {
-          values: [true],
-          type: 'state'
-        },
-        iconPosition: appearances.Link.iconPosition
-      },
-      tokens: {
-        color: '#0000ff',
-
-        blockFontWeight: '400',
-        blockFontSize: 16,
-        blockLineHeight: 1.5,
-
-        outerBorderColor: transparent,
-        outerBorderOutline: 'none',
-        outerBorderGap: 4,
-        outerBorderWidth: 4,
-
-        textLine: 'underline',
-        textLineStyle: 'solid',
-
-        iconSize: 18,
-        iconSpace: 1
-      },
-      rules: [
-        {
-          if: { size: 'big' },
-          tokens: {
-            blockFontSize: 28,
-            iconSize: 24
-          }
-        },
-        {
-          if: { focus: true },
-          tokens: {
-            outerBorderColor: '#eeee00'
-          }
-        },
-        {
-          if: { alternative: true },
-          tokens: {
-            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: { focus: true },
-          tokens: {
-            inputBorderColor: '#7c53a5',
-            inputBorderWidth: 3
-          }
-        },
-        {
-          if: { inactive: true },
-          tokens: {
-            inputBorderColor: 'transparent',
-            inputBackgroundColor: '#e3e6e8',
-            labelColor: '#676e73'
-          }
-        }
-      ]
-    },
-    SideNav: {},
-    SideNavItem: {
-      appearances: {
-        type: appearances.SideNavItem.type
-      },
-      rules: [
-        {
-          if: {
-            type: 'child'
-          },
-          tokens: {
-            paddingLeft: 12
-          }
-        }
-      ]
-    },
-    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: 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,
-        outerBackgroundColor: '#333333',
-        borderColor: '#666666',
-        borderWidth: 2,
-        borderRadius: 6,
-        backgroundColor: '#999999',
-        opacity: 1,
-        paddingLeft: 2,
-        paddingRight: 2,
-        paddingTop: 2,
-        paddingBottom: 2,
-        alignSelf: 'flex-start',
-
-        trackBorderWidth: 2,
-        trackBorderColor: '#bbbbbb',
-        trackBorderRadius: 4,
-        width: 48,
-        iconSize: 10,
-        switchSize: 16,
-        switchColor: '#dddddd',
-        switchBorderColor: '#ffffff',
-        switchBorderWidth: 2,
-        switchBorderRadius: 4,
-
-        shadow: {
-          color: '#00000044',
-          offsetY: 2,
-          offsetX: 0,
-          spread: 6,
-          blur: 2,
-          inset: false
-        }
-      },
-      rules: [
-        {
-          if: { selected: true },
-          tokens: {
-            switchBorderColor: '#99ff99'
-          }
-        },
-        {
-          if: { focus: true },
-          tokens: {
-            outerBorderColor: '#990000'
-          }
-        },
-        {
-          if: { hover: true },
-          tokens: {
-            borderColor: '#6666cc'
-          }
-        },
-        {
-          if: { pressed: true },
-          tokens: {
-            outerBackgroundColor: '#cccc33'
-          }
-        },
-        {
-          if: { inactive: true },
-          tokens: { opacity: 0.4 }
-        }
-      ]
-    },
-    ToggleSwitchGroup: {
-      tokens: {
-        space: 2,
-        direction: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        flexGrow: 1
-      }
-    },
-    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'
-          }
-        }
-      ]
-    }
-  }
-}