@telus-uds/theme-allium 0.0.2-prerelease.3 → 0.1.0-prerelease.0

package/build/theme.js

@@ -0,0 +1,2978 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Wed, 29 Dec 2021 09:03:35 GMT
+ *
+ */
+
+const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
+const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
+const PaletteIconArrowRight = require('@telus-uds/palette-allium/build/rn/icons/ArrowRight')
+const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
+const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
+const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
+const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
+const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
+const PaletteIconStatusWarning = require('@telus-uds/palette-allium/build/rn/icons/StatusWarning')
+const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
+const PaletteIconSearchBold = require('@telus-uds/palette-allium/build/rn/icons/SearchBold')
+const PaletteIconQuestion = require('@telus-uds/palette-allium/build/rn/icons/Question')
+const PaletteIconAdd = require('@telus-uds/palette-allium/build/rn/icons/Add')
+
+module.exports = {
+  components: {
+    ActivityIndicator: {
+      appearances: {
+        size: {
+          description: 'used for full-screen spinners',
+          type: 'variant',
+          values: [ 'large' ]
+        }
+      },
+      rules: [ { if: { size: 'large' }, tokens: { size: 40, thickness: 4 } } ],
+      tokens: { color: '#2b8000', size: 20, thickness: 2 }
+    },
+    Box: {
+      appearances: {
+        background: {
+          description: 'Background colour of box. Transparent if not specified.',
+          values: [
+            'light',    'lightest',
+            'dark',     'darkest',
+            'critical', 'danger',
+            'warning',  'positive',
+            'brand'
+          ]
+        }
+      },
+      rules: [
+        {
+          if: { background: 'lightest' },
+          tokens: { backgroundColor: '#ffffff' }
+        },
+        {
+          if: { background: 'light' },
+          tokens: { backgroundColor: '#f4f4f7' }
+        },
+        {
+          if: { background: 'dark' },
+          tokens: { backgroundColor: '#414547' }
+        },
+        {
+          if: { background: 'darkest' },
+          tokens: { backgroundColor: '#2c2e30' }
+        },
+        {
+          if: { background: 'critical' },
+          tokens: { backgroundColor: '#c12335' }
+        },
+        {
+          if: { background: 'danger' },
+          tokens: { backgroundColor: '#fff6f8' }
+        },
+        {
+          if: { background: 'warning' },
+          tokens: { backgroundColor: '#fff9ee' }
+        },
+        {
+          if: { background: 'positive' },
+          tokens: { backgroundColor: '#f4f9f2' }
+        },
+        {
+          if: { background: 'brand' },
+          tokens: { backgroundColor: '#4b286d' }
+        }
+      ],
+      tokens: { backgroundColor: null }
+    },
+    Button: {
+      appearances: {
+        danger: {
+          description: 'Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.',
+          type: 'variant',
+          values: [ true ]
+        },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        inverse: {
+          description: 'Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.',
+          type: 'variant',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        priority: {
+          description: 'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
+          type: 'variant',
+          values: [ 'high' ]
+        },
+        size: { type: 'variant', values: [ 'small' ] },
+        width: {
+          description: 'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
+          type: 'variant',
+          values: [ 'full' ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
+        {
+          if: { priority: 'high' },
+          tokens: {
+            backgroundColor: '#2b8000',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true, priority: 'high' },
+          tokens: { backgroundColor: '#1f5c09' }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#163e06',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            backgroundColor: null,
+            borderColor: '#ffffff',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, priority: 'high' },
+          tokens: { backgroundColor: '#ffffff', color: '#414547' }
+        },
+        {
+          if: { hover: true, inverse: true, priority: 'high' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.8)' }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: {
+            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            color: '#414547'
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { danger: true, priority: null },
+          tokens: { borderColor: '#e12339', color: '#e12339' }
+        },
+        {
+          if: { danger: true, inverse: true, priority: null },
+          tokens: { backgroundColor: '#ffffff' }
+        },
+        {
+          if: { danger: true, focus: true, priority: null },
+          tokens: { outerBorderColor: '#e12339' }
+        },
+        {
+          if: { danger: true, pressed: true, priority: null },
+          tokens: { backgroundColor: '#c12335', color: '#ffffff' }
+        },
+        {
+          if: { danger: true, focus: true, pressed: true, priority: null },
+          tokens: { outerBorderColor: '#c12335' }
+        },
+        { if: { width: 'full' }, tokens: { width: '100%' } },
+        {
+          if: { size: 'small' },
+          tokens: { minWidth: 0, paddingBottom: 4, paddingTop: 4 }
+        },
+        {
+          description: 'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { inactive: true, inverse: true },
+          tokens: {
+            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            color: '#414547'
+          }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#ffffff',
+        borderColor: '#2b8000',
+        borderRadius: 32,
+        borderWidth: 1,
+        color: '#2b8000',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '700',
+        lineHeight: 1.5,
+        minWidth: 144,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 2,
+        outerBorderWidth: 2,
+        paddingBottom: 12,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 12,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    ButtonGroup: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [ { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
+      tokens: {
+        alignItems: 'center',
+        direction: 'row',
+        flexGrow: 0,
+        justifyContent: 'flex-start',
+        space: 1
+      }
+    },
+    ButtonGroupItem: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            borderColor: '#676e73',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#4b286d',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#3f2a54' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#4b286d' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#3f2a54' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 32,
+        borderWidth: 1,
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontSize: 14,
+        fontWeight: '700',
+        lineHeight: 1.5,
+        minWidth: 0,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 2,
+        outerBorderWidth: 2,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    Card: {
+      appearances: {
+        background: { type: 'variant', values: [ 'alternative' ] },
+        padding: {
+          type: 'variant',
+          values: [ 'narrow', 'intermediate', 'compact', 'custom' ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      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
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#e3e6e8',
+        borderRadius: 6,
+        borderWidth: 1,
+        flex: 1,
+        minWidth: null,
+        paddingBottom: 32,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 32,
+        shadow: null
+      }
+    },
+    Checkbox: {
+      appearances: {
+        checked: {
+          description: 'Corresponds to a selected state for a checkbox or radio',
+          type: 'state',
+          values: [ true ]
+        },
+        error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: { inputBorderColor: '#e12339' }
+        },
+        {
+          if: { focus: true },
+          tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            iconBackgroundColor: '#e3e6e8',
+            iconColor: '#676e73',
+            inputBackgroundColor: '#e3e6e8',
+            inputBorderColor: 'rgba(0, 0, 0, 0)',
+            labelColor: '#676e73'
+          }
+        }
+      ],
+      tokens: {
+        containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        feedbackMarginBottom: 0,
+        feedbackMarginTop: 2,
+        feedbackPosition: 'bottom',
+        icon: PaletteIconCheckmark,
+        iconBackgroundColor: '#7c53a5',
+        iconColor: '#ffffff',
+        iconSize: 16,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderRadius: 4,
+        inputBorderWidth: 1,
+        inputHeight: 20,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputShadow: null,
+        inputWidth: 20,
+        labelColor: '#414547',
+        labelFontName: 'HelveticaNow',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 10
+      }
+    },
+    CheckboxGroup: { appearances: {}, rules: [], tokens: { fieldSpace: 2, space: 2 } },
+    ChevronLink: {
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [ { if: { hover: true }, tokens: { iconDisplace: 4 } } ],
+      tokens: {
+        iconDisplace: 0,
+        iconSpace: 0,
+        leftIcon: PaletteIconArrowLeft,
+        rightIcon: PaletteIconArrowRight
+      }
+    },
+    Divider: {
+      appearances: {
+        decorative: {
+          description: 'Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.',
+          type: 'variant',
+          values: [ true ]
+        },
+        inverse: { type: 'variant', values: [ true ] },
+        weight: { type: 'variant', values: [ 'thick' ] }
+      },
+      rules: [
+        { if: { weight: 'thick' }, tokens: { width: 2 } },
+        { if: { decorative: true }, tokens: { color: '#b2b9bf' } },
+        { if: { inverse: true }, tokens: { color: '#ffffff' } }
+      ],
+      tokens: { color: '#676e73', width: 1 }
+    },
+    ExpandCollapse: {
+      appearances: {},
+      rules: [],
+      tokens: { borderColor: '#b2b9bf', borderStyle: 'solid', borderWidth: 1 }
+    },
+    ExpandCollapseControl: {
+      appearances: {
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { expanded: true },
+          tokens: { icon: PaletteIconCaretUp }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        icon: PaletteIconCaretDown,
+        iconColor: '#2b8000',
+        iconGap: 8,
+        iconPosition: 'left',
+        iconSize: 24,
+        justifyContent: 'flex-start',
+        paddingBottom: 16,
+        paddingLeft: 8,
+        paddingRight: 16,
+        paddingTop: 16,
+        verticalAlign: 'top'
+      }
+    },
+    ExpandCollapsePanel: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        collapseDuration: 250,
+        contentPaddingBottom: 16,
+        contentPaddingLeft: 40,
+        contentPaddingRight: 16,
+        contentPaddingTop: 0,
+        expandDuration: 300
+      }
+    },
+    Feedback: {
+      appearances: {
+        icon: { type: 'variant', values: [ true ] },
+        validation: {
+          description: 'Validation states for form inputs',
+          type: 'state',
+          values: [ 'error', 'success' ]
+        }
+      },
+      rules: [
+        {
+          if: { validation: 'success' },
+          tokens: {
+            backgroundColor: '#f4f9f2',
+            borderColor: '#f4f9f2',
+            color: '#163e06'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            backgroundColor: '#fff6f8',
+            borderColor: '#fff6f8',
+            color: '#e12339'
+          }
+        },
+        {
+          if: { icon: true, validation: 'success' },
+          tokens: { icon: PaletteIconStatusSuccess, iconColor: '#2b8000' }
+        },
+        {
+          if: { icon: true, validation: 'error' },
+          tokens: { icon: PaletteIconStatusError, iconColor: '#e12339' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#e3e6e8',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#2c2e30',
+        contentFontSize: 14,
+        fontName: 'HelveticaNow',
+        fontWeight: '400',
+        icon: null,
+        iconColor: 'rgba(0, 0, 0, 0)',
+        iconGap: 8,
+        iconSize: 24,
+        lineHeight: 1.5,
+        paddingBottom: 12,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 12,
+        space: 2,
+        titleFontSize: 16
+      }
+    },
+    Icon: {
+      appearances: {
+        rank: { type: 'variant', values: [ 'primary' ] },
+        size: { type: 'variant', values: [ 'small' ] }
+      },
+      rules: [
+        { if: { size: 'small' }, tokens: { size: 20 } },
+        { if: { rank: 'primary' }, tokens: { color: '#4b286d' } }
+      ],
+      tokens: {
+        color: '#414547',
+        scale: 1,
+        size: 24,
+        translateX: 0,
+        translateY: 0
+      }
+    },
+    IconButton: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inverse: {
+          description: 'For use on dark backgrounds',
+          type: 'variant',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        raised: {
+          description: 'Uses shadow and background colour to appear raised above the page',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: { type: 'variant', values: [ 'small', 'large' ] }
+      },
+      rules: [
+        {
+          if: { inverse: true },
+          tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#414547',
+            iconColor: '#414547',
+            iconScale: 1.1
+          }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { borderColor: '#ffffff', iconColor: '#ffffff' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 4,
+            outerBorderWidth: 1
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: {
+            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            borderColor: '#414547',
+            iconColor: '#414547',
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            borderColor: '#ffffff',
+            iconColor: '#ffffff',
+            outerBorderGap: 4
+          }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: {
+            backgroundColor: 'rgba(255, 255, 255, 0.4)',
+            borderColor: '#676e73',
+            iconColor: '#676e73'
+          }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { iconSize: 24, padding: 12 }
+        },
+        { if: { size: 'small' }, tokens: { padding: 4 } },
+        {
+          description: 'Raised IconButtons follow different design patterns to other variants',
+          if: { raised: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            borderColor: '#b2b9bf',
+            borderWidth: 1,
+            outerBorderColor: 'transparent',
+            outerBorderGap: 0,
+            outerBorderWidth: 0,
+            padding: 12,
+            shadow: {
+              blur: 2,
+              color: 'rgba(0, 0, 0, 0.1)',
+              inset: false,
+              offsetX: 0,
+              offsetY: 2,
+              spread: 0
+            }
+          }
+        },
+        {
+          if: { raised: true, size: 'large' },
+          tokens: { padding: 16 }
+        },
+        { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+        {
+          if: { pressed: true, raised: true },
+          tokens: { backgroundColor: '#676e73', borderWidth: 0 }
+        },
+        {
+          if: { focus: true, pressed: true, raised: true },
+          tokens: { backgroundColor: '#4b286d', borderWidth: 0 }
+        },
+        {
+          if: { hover: true, raised: true },
+          tokens: { borderColor: '#b2b9bf', borderWidth: 3 }
+        },
+        {
+          if: { focus: true, raised: true },
+          tokens: { borderColor: '#4b286d', borderWidth: 3 }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#676e73',
+        borderRadius: 99999999999999,
+        borderWidth: 1,
+        iconColor: '#676e73',
+        iconScale: 1,
+        iconSize: 16,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        outerBorderColor: 'transparent',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        padding: 8,
+        shadow: null
+      }
+    },
+    InputLabel: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        color: '#414547',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '700',
+        gap: 8,
+        hintColor: '#414547',
+        hintFontName: 'HelveticaNow',
+        hintFontSize: 14,
+        hintFontWeight: '400',
+        hintLineHeight: 1.4,
+        lineHeight: 1.5
+      }
+    },
+    InputSupports: { appearances: {}, rules: [], tokens: { space: 1 } },
+    Link: {
+      appearances: {
+        alternative: {
+          description: 'Replaces the default green colour with a more subtle grey.',
+          type: 'variant',
+          values: [ true ]
+        },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        iconPosition: {
+          description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
+          type: 'state',
+          values: [ 'left', 'right' ]
+        },
+        inverse: {
+          description: 'Styles the link white for use on dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        },
+        light: {
+          description: 'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
+          type: 'variant',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        size: {
+          description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
+          type: 'variant',
+          values: [ 'large', 'small', 'micro' ]
+        }
+      },
+      rules: [
+        { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#2b8000', outerBorderOutline: 'none' }
+        },
+        {
+          if: { hover: true },
+          tokens: { color: '#1f5c09', textLine: 'none' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { color: '#163e06', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { blockFontSize: 20, blockLineHeight: 1.6, iconSize: 24 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: {
+            blockFontSize: 14,
+            blockLineHeight: 1.42857142857,
+            iconSize: 20
+          }
+        },
+        {
+          if: { size: 'micro' },
+          tokens: {
+            blockFontName: 'HelveticaNow',
+            blockFontSize: 12,
+            blockFontWeight: '500',
+            blockLineHeight: 1.33333333333,
+            iconSize: 16
+          }
+        },
+        { if: { alternative: true }, tokens: { color: '#2c2e30' } },
+        {
+          if: { alternative: true, focus: true },
+          tokens: { color: '#414547', outerBorderColor: '#414547' }
+        },
+        {
+          if: { alternative: true, hover: true },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { alternative: true, pressed: true },
+          tokens: { color: '#2c2e30' }
+        },
+        { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { color: '#f4f4f7' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#ffffff', outerBorderOutline: 'none' }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: { color: '#e3e6e8' }
+        },
+        {
+          if: { focus: true, inverse: true, pressed: true },
+          tokens: { color: '#e3e6e8', outerBorderColor: '#e3e6e8' }
+        },
+        { if: { light: true }, tokens: { color: '#676e73' } },
+        {
+          if: { focus: true, light: true },
+          tokens: { color: '#676e73', outerBorderColor: '#676e73' }
+        },
+        {
+          if: { hover: true, light: true },
+          tokens: { color: '#414547', textLine: 'none' }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        blockFontName: 'HelveticaNow',
+        blockFontSize: 16,
+        blockFontWeight: '400',
+        blockLineHeight: 1.5,
+        borderRadius: 4,
+        color: '#2b8000',
+        icon: null,
+        iconSize: 24,
+        iconSpace: 1,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 2,
+        outerBorderOutline: 'none',
+        outerBorderWidth: 2,
+        textLine: 'underline',
+        textLineStyle: 'solid'
+      }
+    },
+    List: {
+      appearances: {
+        compact: {
+          description: 'When true it will reduce the line height of the list item.',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: {
+          description: 'Indicates list item text size.',
+          type: 'variant',
+          values: [ 'large', 'small' ]
+        }
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: { itemFontSize: 20, itemLineHeight: 1.6, listGutter: 12 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: {
+            itemFontSize: 14,
+            itemLineHeight: 1.42857142857,
+            listGutter: 12
+          }
+        },
+        { 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 }
+        }
+      ],
+      tokens: {
+        dividerColor: '#b2b9bf',
+        dividerSize: 1,
+        interItemMargin: 8,
+        interItemMarginWithDivider: 16,
+        itemBulletColor: '#4b286d',
+        itemBulletContainerAlign: 'center',
+        itemBulletContainerWidth: 16,
+        itemBulletHeight: 4,
+        itemBulletWidth: 4,
+        itemFontName: 'HelveticaNow',
+        itemFontSize: 16,
+        itemFontWeight: '400',
+        itemIconColor: '#4b286d',
+        itemIconSize: 16,
+        itemLineHeight: 1.5,
+        listGutter: 12
+      }
+    },
+    Modal: {
+      appearances: {
+        maxWidth: {
+          description: 'Whether a modal should expand responsively to the maximum of 8 layout columns width',
+          type: 'state',
+          values: [ true ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'xs', 'sm' ] },
+          tokens: { height: '100%' }
+        },
+        {
+          if: { viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: {
+            containerPaddingBottom: 32,
+            containerPaddingTop: 32,
+            maxWidth: 576
+          }
+        },
+        {
+          if: { maxWidth: true, viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: {
+            containerPaddingLeft: 16,
+            containerPaddingRight: 16,
+            maxWidth: '66.67%'
+          }
+        }
+      ],
+      tokens: {
+        backdropColor: 'rgba(244, 244, 247, 0.97)',
+        backdropOpacity: 1,
+        backgroundColor: '#ffffff',
+        borderRadius: 4,
+        closeIcon: PaletteIconClose,
+        closeIconColor: '#414547',
+        closeIconSize: 24,
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
+        containerPaddingTop: 0,
+        height: null,
+        maxWidth: '100%',
+        paddingBottom: 24,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24,
+        shadow: {
+          blur: 8,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 4,
+          spread: 0
+        }
+      }
+    },
+    Notification: {
+      appearances: {
+        style: { type: 'state', values: [ 'success', 'warning', 'error' ] },
+        system: { type: 'state', values: [ true ] }
+      },
+      rules: [
+        {
+          if: { system: true },
+          tokens: {
+            borderLeftWidth: 0,
+            borderRadius: 0,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+            iconGap: 12,
+            paddingBottom: 16,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingTop: 16
+          }
+        },
+        {
+          if: { style: 'success' },
+          tokens: {
+            backgroundColor: '#f4f9f2',
+            borderColor: '#2b8000',
+            icon: PaletteIconStatusSuccess,
+            iconColor: '#2b8000'
+          }
+        },
+        {
+          if: { style: 'warning' },
+          tokens: {
+            backgroundColor: '#fff9ee',
+            borderColor: '#b4872c',
+            dismissIcon: null,
+            icon: PaletteIconStatusWarning,
+            iconColor: '#b4872c'
+          }
+        },
+        {
+          if: { style: 'error' },
+          tokens: {
+            backgroundColor: '#fff6f8',
+            borderColor: '#e12339',
+            dismissIcon: null,
+            icon: PaletteIconStatusError,
+            iconColor: '#e12339'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderBottomWidth: 1,
+        borderColor: '#676e73',
+        borderLeftWidth: 1,
+        borderRadius: 6,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#414547',
+        dismissButtonGap: 16,
+        dismissIcon: PaletteIconClose,
+        dismissIconColor: '#414547',
+        dismissIconSize: 24,
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        icon: null,
+        iconColor: null,
+        iconGap: 16,
+        iconSize: 24,
+        lineHeight: 1.5,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 12
+      }
+    },
+    Pagination: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: { truncateAbove: 6 }
+        }
+      ],
+      tokens: {
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        gap: 2,
+        lineHeight: 1.5,
+        truncateAbove: 4
+      }
+    },
+    PaginationPageButton: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#676e73', textLine: 'none' }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#676e73', borderWidth: 3 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            color: '#ffffff',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 32,
+        borderWidth: 1,
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 1.5,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 4,
+        outerBorderWidth: 4,
+        paddingBottom: 4,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 4,
+        textAlign: 'center',
+        textLine: 'underline',
+        width: 32
+      }
+    },
+    PaginationSideButton: {
+      appearances: {
+        direction: {
+          description: "Determines which way does the button navigate in Pagination's context",
+          type: 'state',
+          values: [ 'previous', 'next' ]
+        },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'xs', 'sm' ] },
+          tokens: {
+            borderRadius: 32,
+            paddingBottom: 4,
+            paddingTop: 4,
+            width: 32
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#676e73', iconDisplace: 4, textLine: 'none' }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#676e73', borderWidth: 3 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            color: '#ffffff',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+        },
+        {
+          if: { direction: 'previous' },
+          tokens: { icon: PaletteIconArrowLeft }
+        },
+        {
+          if: { direction: 'next' },
+          tokens: { icon: PaletteIconArrowRight }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        icon: null,
+        iconDisplace: 0,
+        iconSize: 24,
+        lineHeight: 1.5,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        paddingBottom: 12,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 12,
+        textAlign: 'center',
+        textLine: 'underline',
+        width: null
+      }
+    },
+    Progress: {
+      appearances: { size: { type: 'variant', values: [ 'mini' ] } },
+      rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#b2b9bf',
+        borderRadius: 12,
+        borderWidth: 1,
+        height: 16
+      }
+    },
+    ProgressBar: {
+      appearances: {
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        negative: { type: 'variant', values: [ true ] }
+      },
+      rules: [
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            gradient: null,
+            outlineColor: '#2c2e30'
+          }
+        },
+        {
+          if: { negative: true },
+          tokens: {
+            backgroundColor: '#c12335',
+            gradient: null,
+            outlineColor: '#c12335'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#2b8000',
+        borderRadius: 12,
+        gradient: {
+          angle: 135,
+          stops: [
+            { color: '#00784a', stop: 0 },
+            { color: '#66cc00', stop: 1 }
+          ],
+          type: 'linear'
+        },
+        outlineColor: '#2b8000',
+        outlineWidth: 1
+      }
+    },
+    Radio: {
+      appearances: {
+        checked: {
+          description: 'Corresponds to a selected state for a checkbox or radio',
+          type: 'state',
+          values: [ true ]
+        },
+        error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: { inputBorderColor: '#e12339' }
+        },
+        {
+          if: { hover: true },
+          tokens: { outerBorderColor: '#e3e6e8', outerBorderWidth: 2 }
+        },
+        {
+          if: { focus: true },
+          tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            inputBackgroundColor: '#e3e6e8',
+            inputBorderColor: 'rgba(0, 0, 0, 0)',
+            labelColor: '#676e73'
+          }
+        }
+      ],
+      tokens: {
+        checkedBackgroundColor: '#7c53a5',
+        checkedSize: 12,
+        containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        containerBorderRadius: 0,
+        containerOpacity: 1,
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
+        containerPaddingTop: 0,
+        containerShadow: null,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 1.42857142857,
+        descriptionMarginLeft: null,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderWidth: 1,
+        inputOutlineColor: 'rgba(0, 0, 0, 0)',
+        inputOutlineWidth: 0,
+        inputSize: 20,
+        labelColor: '#414547',
+        labelFontName: 'HelveticaNow',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 10,
+        outerBorderColor: 'transparent',
+        outerBorderGap: 0,
+        outerBorderWidth: 0
+      }
+    },
+    RadioCard: {
+      appearances: {
+        checked: {
+          description: 'Corresponds to a selected state for a checkbox or radio',
+          type: 'state',
+          values: [ true ]
+        },
+        error: { type: 'state', values: [ true ] },
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      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: {
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2,
+            radioInputBorderColor: '#7c53a5',
+            radioInputBorderWidth: 3
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: 'transparent',
+            color: '#676e73',
+            radioInputBackgroundColor: '#e3e6e8',
+            radioInputBorderColor: 'rgba(0, 0, 0, 0)'
+          }
+        },
+        {
+          if: { error: true },
+          tokens: {
+            borderColor: '#e12339',
+            color: '#e12339',
+            radioInputBorderColor: '#e12339'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 6,
+        borderWidth: 1,
+        color: '#2c2e30',
+        contentSpace: 2,
+        flex: 1,
+        fontName: 'HelveticaNow',
+        fontSize: 20,
+        fontWeight: '500',
+        letterSpacing: 0,
+        lineHeight: 1.4,
+        minWidth: 288,
+        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: 'rgba(0, 0, 0, 0)',
+        radioInputOutlineWidth: 0,
+        radioInputSize: 20,
+        radioOuterBorderColor: 'transparent',
+        radioOuterBorderGap: 0,
+        radioOuterBorderWidth: 0,
+        radioSpace: 2,
+        shadow: null,
+        textTransform: 'none'
+      }
+    },
+    RadioCardGroup: {
+      appearances: {
+        fullWidth: {
+          description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+          type: 'variant',
+          values: [ true ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { fullWidth: null, viewport: [ 'lg', 'xl' ] },
+          tokens: { direction: 'row', space: 4 }
+        }
+      ],
+      tokens: { direction: 'column', fieldSpace: 3, space: 3 }
+    },
+    RadioGroup: { appearances: {}, rules: [], tokens: { fieldSpace: 2, space: 2 } },
+    Search: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: {
+            outerBackgroundColor: '#e3e6e8',
+            outerBorderColor: '#e3e6e8'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#7c53a5', borderWidth: 3 }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#676e73',
+        borderRadius: 32,
+        borderWidth: 1,
+        buttonsGap: 1,
+        clearButtonIcon: PaletteIconTimes,
+        color: '#414547',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 1.5,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderRadius: 32,
+        outerBorderWidth: 2,
+        paddingBottom: 12,
+        paddingLeft: 24,
+        paddingRight: 8,
+        paddingTop: 12,
+        placeholderColor: '#414547',
+        submitButtonIcon: PaletteIconSearchBold
+      }
+    },
+    SearchButton: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        priority: { description: '', type: 'variant', values: [ 'high' ] }
+      },
+      rules: [
+        {
+          if: { priority: 'high' },
+          tokens: { backgroundColor: '#4b286d', iconColor: '#ffffff' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#7c53a5',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#4b286d',
+            borderWidth: 3,
+            iconColor: '#4b286d'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#3f2a54',
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#e3e6e8',
+            borderWidth: 0,
+            iconColor: '#676e73'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: null,
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 32,
+        borderWidth: 0,
+        iconColor: '#676e73',
+        iconSize: 20,
+        opacity: 1,
+        paddingBottom: 8,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 8,
+        shadow: null
+      }
+    },
+    Select: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        validation: {
+          description: 'Validation states for form inputs',
+          type: 'state',
+          values: [ 'error', 'success' ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: {
+            outerBackgroundColor: '#e3e6e8',
+            outerBorderColor: '#e3e6e8'
+          }
+        },
+        {
+          if: { validation: 'success' },
+          tokens: {
+            borderColor: '#2b8000',
+            validationIcon: PaletteIconStatusSuccess,
+            validationIconColor: '#2b8000'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            borderColor: '#e12339',
+            validationIcon: PaletteIconStatusError,
+            validationIconColor: '#e12339'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#7c53a5',
+            borderWidth: 3,
+            validationIcon: null
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#676e73',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#414547',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        height: 48,
+        icon: PaletteIconCaretDown,
+        iconColor: '#2b8000',
+        iconSize: 24,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 2,
+        paddingBottom: 12,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 12,
+        validationIcon: null,
+        validationIconColor: 'rgba(0, 0, 0, 0)',
+        validationIconSize: 24
+      }
+    },
+    SideNav: {
+      appearances: {},
+      rules: [],
+      tokens: { borderColor: '#b2b9bf', borderStyle: 'solid', borderWidth: 1 }
+    },
+    SideNavItem: {
+      appearances: {
+        active: {
+          description: 'Used to mark currently active Item or and ItemGroup containing the currently active Item',
+          type: 'state',
+          values: [ true, false ]
+        },
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        type: {
+          description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
+          type: 'state',
+          values: [ 'child', 'parent' ]
+        }
+      },
+      rules: [
+        {
+          if: { active: true },
+          tokens: {
+            accentBackgroundColor: '#4b286d',
+            color: '#4b286d',
+            fontName: 'HelveticaNow',
+            fontWeight: '700',
+            paddingLeft: 12
+          }
+        },
+        {
+          if: { type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#f4f4f7',
+            accentOffset: 16,
+            borderWidth: 0,
+            fontSize: 14,
+            lineHeight: 1.4,
+            paddingLeft: 36
+          }
+        },
+        {
+          if: { active: true, type: 'parent' },
+          tokens: { paddingLeft: 12 }
+        },
+        {
+          if: { active: true, expanded: true, type: 'parent' },
+          tokens: {
+            accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+            color: '#414547',
+            paddingLeft: 16
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#f4f4f7', color: '#4b286d' }
+        },
+        {
+          if: { active: true, type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#4b286d',
+            accentPadding: 16,
+            backgroundColor: '#f4f4f7',
+            color: '#4b286d'
+          }
+        },
+        {
+          if: { active: false, hover: true, type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#ffffff',
+            accentOffset: 0,
+            accentWidth: 16,
+            color: '#414547'
+          }
+        }
+      ],
+      tokens: {
+        accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        accentOffset: 0,
+        accentPadding: 0,
+        accentWidth: 4,
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#b2b9bf',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        color: '#414547',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        justifyContent: 'space-between',
+        lineHeight: 1.5,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16
+      }
+    },
+    SideNavItemsGroup: {
+      appearances: {
+        expanded: {
+          description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { expanded: true },
+          tokens: { icon: PaletteIconCaretUp }
+        }
+      ],
+      tokens: {
+        collapseDuration: 250,
+        contentPaddingBottom: 0,
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        expandDuration: 300,
+        icon: PaletteIconCaretDown,
+        iconColor: '#4b286d',
+        iconGap: 8,
+        iconPosition: 'right',
+        iconSize: 24,
+        justifyContent: 'space-between',
+        verticalAlign: 'middle'
+      }
+    },
+    Skeleton: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        baseWidth: 40,
+        characters: 10,
+        color: '#b2b9bf',
+        radius: 120,
+        size: 3,
+        spaceBetweenLines: 2,
+        squareRadius: 4
+      }
+    },
+    StackView: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'stretch',
+        flexGrow: 0,
+        justifyContent: 'flex-start'
+      }
+    },
+    StepTracker: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'lg', 'xl' ] },
+          tokens: { showStepLabel: true, showStepTrackerLabel: false }
+        }
+      ],
+      tokens: {
+        completedIcon: null,
+        completedIconColor: null,
+        completedIconSize: null,
+        connectorColor: '#676e73',
+        connectorCompletedColor: '#7c53a5',
+        connectorCompletedHeight: 3,
+        connectorHeight: 1,
+        connectorMinWidth: 16,
+        containerPaddingBottom: null,
+        containerPaddingLeft: null,
+        containerPaddingRight: null,
+        containerPaddingTop: null,
+        knobBackgroundColor: 'rgba(0, 0, 0, 0)',
+        knobBorderColor: '#676e73',
+        knobBorderWidth: 1,
+        knobCompletedBackgroundColor: '#7c53a5',
+        knobCompletedBorderColor: '#7c53a5',
+        knobCompletedPaddingLeft: null,
+        knobCompletedPaddingTop: null,
+        knobCurrentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        knobCurrentBorderColor: '#7c53a5',
+        knobCurrentBorderWidth: 2,
+        knobCurrentInnerColor: '#7c53a5',
+        knobCurrentInnerSize: 8,
+        knobCurrentPaddingLeft: 2,
+        knobCurrentPaddingTop: 2,
+        knobSize: 16,
+        labelColor: '#414547',
+        labelCurrentColor: '#7c53a5',
+        labelCurrentFontName: 'HelveticaNow',
+        labelCurrentFontWeight: '700',
+        labelDirection: 'column',
+        labelFontName: 'HelveticaNow',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelGap: 0,
+        labelLineHeight: 1.42857142857,
+        labelMarginTop: 8,
+        labelPaddingLeft: 16,
+        labelPaddingRight: 16,
+        showStepLabel: false,
+        showStepName: true,
+        showStepTrackerLabel: true
+      }
+    },
+    Tabs: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderBottomColor: '#676e73',
+        borderBottomWidth: 1,
+        buttonClearance: 16,
+        gutter: 2,
+        nextIcon: PaletteIconArrowRight,
+        previousIcon: PaletteIconArrowLeft,
+        space: 0
+      }
+    },
+    TabsItem: {
+      appearances: {
+        focus: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          description: "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            color: '#4b286d',
+            highlightBarBorderRadius: 32,
+            highlightBarBorderWidth: 1,
+            highlightBarHeight: 1,
+            highlightColor: '#4b286d'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#b2b9bf', borderWidth: 2 }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#4b286d', borderWidth: 2, color: '#4b286d' }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            borderColor: 'transparent',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { backgroundColor: '#4b286d' }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderRadius: 32,
+        borderWidth: 0,
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontScaleCap: 64,
+        fontSize: 14,
+        fontWeight: '700',
+        highlightBarBorderRadius: 0,
+        highlightBarBorderWidth: 0,
+        highlightBarHeight: 0,
+        highlightColor: 'transparent',
+        highlightTriangleSize: 0,
+        letterSpacing: 0,
+        lineHeight: 1.14285714286,
+        maxWidth: 192,
+        paddingHorizontal: 24,
+        paddingVertical: 8,
+        space: 1,
+        textAlign: 'center',
+        textTransform: 'none'
+      }
+    },
+    TabsScrollButton: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: { borderColor: '#414547', iconColor: '#414547' }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 32,
+        borderWidth: 1,
+        iconColor: '#676e73',
+        iconSize: 32,
+        padding: 0,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    Tags: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [ { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
+      tokens: {
+        alignItems: 'center',
+        direction: 'row',
+        flexGrow: 0,
+        justifyContent: 'flex-start',
+        space: 1
+      }
+    },
+    TagsItem: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#676e73',
+            borderColor: '#676e73',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconBackground: '#414547',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        { if: { hover: true }, tokens: { borderWidth: 3 } },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#4b286d',
+            borderWidth: 0,
+            color: '#ffffff',
+            icon: PaletteIconClose,
+            iconBackground: '#7c53a5',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#7c53a5', iconBackground: '#4b286d' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#3f2a54', iconBackground: '#7c53a5' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#4b286d' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { iconBackground: '#7c53a5', outerBorderColor: '#3f2a54' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        }
+      ],
+      tokens: {
+        alignSelf: 'center',
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 32,
+        borderWidth: 1,
+        color: '#676e73',
+        fontName: 'HelveticaNow',
+        fontSize: 14,
+        fontWeight: '700',
+        icon: PaletteIconAdd,
+        iconAlignSelf: 'center',
+        iconBackground: '#f4f4f7',
+        iconBorderRadius: 32,
+        iconColor: '#2c2e30',
+        iconPadding: 2,
+        iconPosition: 'right',
+        iconSize: 16,
+        iconSpace: 2,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        lineHeight: 1.42857142857,
+        minWidth: 0,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 2,
+        outerBorderWidth: 2,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 8,
+        paddingTop: 8,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    TextArea: {
+      appearances: {},
+      rules: [],
+      tokens: { maxLines: 8, minLines: 5 }
+    },
+    TextInput: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        validation: {
+          description: 'Validation states for form inputs',
+          type: 'state',
+          values: [ 'error', 'success' ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true, inactive: null },
+          tokens: {
+            outerBackgroundColor: '#e3e6e8',
+            outerBorderColor: '#e3e6e8'
+          }
+        },
+        {
+          if: { validation: 'success' },
+          tokens: {
+            borderColor: '#2b8000',
+            icon: PaletteIconStatusSuccess,
+            iconColor: '#2b8000'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            borderColor: '#e12339',
+            icon: PaletteIconStatusError,
+            iconColor: '#e12339'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#7c53a5', borderWidth: 3, icon: null }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#676e73',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#414547',
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '400',
+        icon: null,
+        iconColor: 'rgba(0, 0, 0, 0)',
+        iconSize: 24,
+        lineHeight: 1.5,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 2,
+        paddingBottom: 12,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 12
+      }
+    },
+    ToggleSwitch: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { backgroundColor: '#414547' } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#2c2e30' }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBackgroundColor: '#ffffff',
+            outerBorderColor: '#676e73',
+            outerBorderGap: 3,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#2b8000',
+            icon: PaletteIconCheckmark,
+            iconColor: '#2b8000'
+          }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#1f5c09', iconColor: '#1f5c09' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#163e06', iconColor: '#163e06' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#2b8000' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            iconColor: '#676e73',
+            outerBorderColor: '#b2b9bf'
+          }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#676e73',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 32,
+        borderWidth: 0,
+        icon: null,
+        iconColor: '#676e73',
+        iconSize: 12,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: true,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        },
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchBorderRadius: 32,
+        switchBorderWidth: 0,
+        switchColor: '#ffffff',
+        switchShadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        },
+        switchSize: 16,
+        trackBorderColor: 'rgba(0, 0, 0, 0)',
+        trackBorderRadius: 32,
+        trackBorderWidth: 3,
+        width: 40
+      }
+    },
+    Tooltip: {
+      appearances: { inverse: { type: 'variant', values: [ true ] } },
+      rules: [
+        {
+          if: { inverse: true },
+          tokens: { backgroundColor: '#ffffff', color: '#414547' }
+        }
+      ],
+      tokens: {
+        arrowBorderRadius: 1,
+        arrowOffset: 4,
+        arrowWidth: 16,
+        backgroundColor: '#2c2e30',
+        borderRadius: 8,
+        color: '#ffffff',
+        fontName: 'HelveticaNow',
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 1.5,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        shadow: {
+          blur: 8,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 4,
+          spread: 0
+        }
+      }
+    },
+    TooltipButton: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inverse: { type: 'variant', values: [ true ] },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
+        { if: { hover: true }, tokens: { iconScale: 1.25 } },
+        { if: { pressed: true }, tokens: { iconColor: '#676e73' } },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: { iconColor: '#b2b9bf' }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#676e73' }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { outerBorderColor: '#b2b9bf' }
+        }
+      ],
+      tokens: {
+        borderRadius: 32,
+        icon: PaletteIconQuestion,
+        iconColor: '#2c2e30',
+        iconScale: 1,
+        iconSize: 16,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 4,
+        outerBorderWidth: 1,
+        width: 16
+      }
+    },
+    Typography: {
+      appearances: {
+        bold: {
+          description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+          type: 'variant',
+          values: [ true ]
+        },
+        colour: {
+          description: 'Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n' +
+            '  use the tokens prop.',
+          type: 'variant',
+          values: [ 'secondary', 'tertiary' ]
+        },
+        compact: {
+          description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
+          type: 'variant',
+          values: [ true ]
+        },
+        inverse: {
+          description: 'Styles the link white for use on dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: {
+          description: 'Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,\n' +
+            '"display" headings are larger than "h" headings. Default is medium size body text. Does not change\n' +
+            'accessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.',
+          type: 'variant',
+          values: [
+            'micro',    'small',
+            'large',    'eyebrow',
+            'h1',       'h2',
+            'h3',       'h4',
+            'h5',       'h6',
+            'display1', 'display2'
+          ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        { if: { colour: 'secondary' }, tokens: { color: '#414547' } },
+        {
+          if: { size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ] },
+          tokens: { color: '#4b286d' }
+        },
+        {
+          if: {
+            colour: 'secondary',
+            size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ]
+          },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { colour: 'tertiary', size: 'h6' },
+          tokens: { color: '#676e73' }
+        },
+        { if: { size: 'eyebrow' }, tokens: { color: '#414547' } },
+        {
+          if: { colour: 'secondary', size: 'eyebrow' },
+          tokens: { color: '#4b286d' }
+        },
+        { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        {
+          if: { size: 'display1' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 40,
+            fontWeight: '300',
+            letterSpacing: -0.035,
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 64, lineHeight: 1.125 }
+        },
+        {
+          if: { size: 'display2' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 36,
+            fontWeight: '400',
+            letterSpacing: -0.035,
+            lineHeight: 1.22222222222
+          }
+        },
+        {
+          if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 56,
+            fontWeight: '300',
+            letterSpacing: -0.039,
+            lineHeight: 1.14285714286
+          }
+        },
+        {
+          if: { size: 'h1' },
+          tokens: {
+            fontSize: 28,
+            letterSpacing: -0.017,
+            lineHeight: 1.28571428571
+          }
+        },
+        {
+          if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 40,
+            fontWeight: '300',
+            letterSpacing: -0.035,
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'h2' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 24,
+            fontWeight: '500',
+            lineHeight: 1.33333333333
+          }
+        },
+        {
+          if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            fontSize: 28,
+            letterSpacing: -0.017,
+            lineHeight: 1.28571428571
+          }
+        },
+        {
+          if: { size: 'h3' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 20,
+            fontWeight: '500',
+            lineHeight: 1.4
+          }
+        },
+        {
+          if: { size: 'h3', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 24, lineHeight: 1.33333333333 }
+        },
+        {
+          if: { size: 'h4' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 16,
+            fontWeight: '500',
+            lineHeight: 1.5
+          }
+        },
+        {
+          if: { size: 'h5' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 14,
+            fontWeight: '500',
+            lineHeight: 1.28571428571
+          }
+        },
+        {
+          if: { size: 'h6' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 12,
+            fontWeight: '700',
+            lineHeight: 1.33333333333
+          }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { fontSize: 20, lineHeight: 1.6 }
+        },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: { lineHeight: 1.2 }
+        },
+        {
+          description: "The compact line height for the 'default' font size, but doesn't apply for any other styles",
+          if: { compact: true, size: null },
+          tokens: { lineHeight: 1.25 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { fontSize: 14, lineHeight: 1.42857142857 }
+        },
+        {
+          if: { compact: true, size: 'small' },
+          tokens: { lineHeight: 1.14285714286 }
+        },
+        {
+          if: { size: 'micro' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 12,
+            fontWeight: '500',
+            lineHeight: 1.33333333333
+          }
+        },
+        {
+          if: { size: 'eyebrow' },
+          tokens: {
+            fontName: 'HelveticaNow',
+            fontSize: 14,
+            fontWeight: '700',
+            lineHeight: 1.28571428571,
+            textTransform: 'uppercase'
+          }
+        },
+        {
+          description: 'Bold is only available on body text styles, not headings',
+          if: { bold: true, size: [ 'large', null, 'small', 'micro' ] },
+          tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+        }
+      ],
+      tokens: {
+        color: '#2c2e30',
+        fontName: 'HelveticaNow',
+        fontScaleCap: 64,
+        fontSize: 16,
+        fontWeight: '400',
+        letterSpacing: 0,
+        lineHeight: 1.5,
+        textTransform: 'none'
+      }
+    },
+    spacingScale: {
+      appearances: {
+        space: {
+          description: 'Index of the intended position on the spacing scale',
+          type: 'state',
+          values: [
+             0,  1, 2, 3, 4,
+             5,  6, 7, 8, 9,
+            10, 11
+          ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        { if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
+        { if: { space: 11 }, tokens: { size: 96 } },
+        { if: { space: 10 }, tokens: { size: 80 } },
+        { if: { space: 9 }, tokens: { size: 64 } },
+        { if: { space: 8 }, tokens: { size: 48 } },
+        { if: { space: 7 }, tokens: { size: 40 } },
+        { if: { space: 6 }, tokens: { size: 36 } },
+        { 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: { space: 11, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 120 }
+        },
+        {
+          if: { space: 10, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 96 }
+        },
+        {
+          if: { space: 9, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 72 }
+        },
+        {
+          if: { space: 8, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 64 }
+        },
+        {
+          if: { space: 7, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 48 }
+        },
+        {
+          if: { space: 6, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 40 }
+        },
+        { if: { space: 0 }, tokens: { size: 0 } }
+      ],
+      tokens: { size: 96 }
+    }
+  },
+  metadata: { name: 'allium', package: '@telus-uds/theme-allium' }
+}