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

package/build/theme.js

@@ -0,0 +1,2365 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 20 Jan 2022 13:54:07 GMT
+ *
+ */
+
+const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
+const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
+const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
+const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
+const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/ChevronDown')
+const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
+const PaletteIconExclamationTriangle = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle')
+const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
+const PaletteIconExclamationOctagon = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon')
+const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
+const PaletteIconCheckCircledNotFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledNotFilled')
+const PaletteIconInfo = require('@telus-uds/palette-koodo/build/rn/icons/Info')
+
+module.exports = {
+  components: {
+    ActivityIndicator: {
+      appearances: {},
+      rules: [],
+      tokens: { color: '#014847', size: 40, thickness: 4 }
+    },
+    Box: {
+      appearances: {
+        background: {
+          description: 'Background colour of box. Transparent if not specified.',
+          values: [ 'light', 'lightest' ]
+        }
+      },
+      rules: [
+        {
+          if: { background: 'lightest' },
+          tokens: { backgroundColor: '#ffffff' }
+        },
+        {
+          if: { background: 'light' },
+          tokens: { backgroundColor: '#efefef' }
+        }
+      ],
+      tokens: { backgroundColor: null }
+    },
+    Button: {
+      appearances: {
+        clear: {
+          description: 'Gives a button borders and a transparent background',
+          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 ]
+        },
+        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 ]
+        },
+        rank: {
+          description: 'Prominence of the button. Use the default ("primary") button style for the main action on a page or in a form, and "secondary" style for secondary actions.',
+          type: 'variant',
+          values: [ 'secondary' ]
+        },
+        rounded: {
+          description: 'Gives a button "pill-style" rounded sides',
+          type: 'variant',
+          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: { rounded: true }, tokens: { borderRadius: 32 } },
+        {
+          if: { clear: true },
+          tokens: {
+            backgroundColor: null,
+            borderColor: '#016b6a',
+            borderWidth: 2,
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#014847',
+            borderColor: '#014847',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { clear: true, hover: true },
+          tokens: { backgroundColor: '#016b6a', borderWidth: 0 }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderColor: '#016b6a',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
+        {
+          if: { rank: 'secondary' },
+          tokens: {
+            backgroundColor: '#00a1db',
+            borderColor: '#00a1db',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { clear: true, rank: 'secondary' },
+          tokens: {
+            backgroundColor: '#ffffff',
+            borderColor: '#00a1db',
+            color: '#00a1db'
+          }
+        },
+        {
+          if: { hover: true, rank: 'secondary' },
+          tokens: {
+            backgroundColor: '#0083b3',
+            borderColor: '#0083b3',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { pressed: true, rank: 'secondary' },
+          tokens: {
+            backgroundColor: '#c3efff',
+            borderColor: '#c3efff',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, rank: 'secondary' },
+          tokens: { outerBorderColor: '#00a1db' }
+        },
+        {
+          if: { focus: true, pressed: true, rank: 'secondary' },
+          tokens: { outerBorderColor: '#c3efff' }
+        },
+        { if: { inactive: true }, tokens: { opacity: 0.3 } },
+        {
+          if: { selected: true },
+          tokens: {
+            opacity: 0.8,
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 1,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderGap: 2 }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#016b6a',
+        borderColor: '#ffffff',
+        borderRadius: 4,
+        borderWidth: 0,
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.5,
+        minWidth: 0,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: '#ffffff',
+        outerBorderGap: 2,
+        outerBorderWidth: 2,
+        paddingBottom: 8,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    ButtonGroup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'center',
+        direction: 'row',
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        space: 3
+      }
+    },
+    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: '#016b6a',
+            borderColor: '#016b6a',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
+        { if: { hover: true }, tokens: { backgroundColor: '#014847' } },
+        {
+          if: { selected: true },
+          tokens: {
+            opacity: 0.8,
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 1,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#258b0b' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#666666',
+            borderWidth: 0,
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            opacity: 0.8,
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 1,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#014847' }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#016b6a',
+        borderColor: '#014847',
+        borderRadius: 4,
+        borderWidth: 0,
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        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: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    Card: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        backgroundColor: '#f9f6a5',
+        borderColor: null,
+        borderRadius: 0,
+        borderWidth: 0,
+        flex: 1,
+        minWidth: null,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        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: { focus: true },
+          tokens: { inputOutlineColor: '#c9c8c8', inputOutlineWidth: 2 }
+        }
+      ],
+      tokens: {
+        containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        feedbackMarginBottom: 0,
+        feedbackMarginTop: 0,
+        feedbackPosition: 'bottom',
+        icon: PaletteIconCheck,
+        iconBackgroundColor: '#ffffff',
+        iconColor: '#016b6a',
+        iconSize: 16,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#016b6a',
+        inputBorderRadius: 0,
+        inputBorderWidth: 2,
+        inputHeight: 20,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputShadow: null,
+        inputWidth: 20,
+        labelColor: '#000000',
+        labelFontName: 'StagSans',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8
+      }
+    },
+    CheckboxGroup: { appearances: {}, rules: [], tokens: { fieldSpace: 2, space: 2 } },
+    ChevronLink: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        iconDisplace: 4,
+        iconSize: 24,
+        iconSpace: 0,
+        leftIcon: PaletteIconChevronLeft,
+        rightIcon: PaletteIconChevronRight
+      }
+    },
+    Divider: {
+      appearances: {},
+      rules: [],
+      tokens: { color: '#c9c8c8', width: 1 }
+    },
+    ExpandCollapse: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderStyle: 'solid',
+        borderWidth: 0
+      }
+    },
+    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: PaletteIconChevronDown }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        icon: PaletteIconChevronUp,
+        iconColor: '#016b6a',
+        iconGap: 16,
+        iconPosition: 'left',
+        iconSize: 16,
+        justifyContent: 'flex-start',
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        verticalAlign: 'middle'
+      }
+    },
+    ExpandCollapsePanel: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        collapseDuration: 250,
+        contentPaddingBottom: 16,
+        contentPaddingLeft: 48,
+        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: '#c1f2e8',
+            borderColor: '#c1f2e8',
+            color: '#258b0b'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            backgroundColor: '#fae6f4',
+            borderColor: '#fae6f4',
+            color: '#df3d0c'
+          }
+        },
+        {
+          if: { icon: true, validation: 'success' },
+          tokens: {
+            icon: PaletteIconCheckCircledFilled,
+            iconColor: '#258b0b'
+          }
+        },
+        {
+          if: { icon: true, validation: 'error' },
+          tokens: {
+            icon: PaletteIconExclamationTriangle,
+            iconColor: '#df3d0c'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#c9c8c8',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#595959',
+        contentFontSize: 14,
+        fontName: 'StagSans',
+        fontWeight: '400',
+        icon: null,
+        iconColor: 'rgba(0, 0, 0, 0)',
+        iconGap: 8,
+        iconSize: 24,
+        lineHeight: 1.5,
+        paddingBottom: 10,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 10,
+        space: 2,
+        titleFontSize: 16
+      }
+    },
+    HorizontalScrollButton: {
+      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: {
+            backgroundColor: '#f9f6a5',
+            borderColor: '#014847',
+            iconColor: '#014847'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderColor: '#016b6a',
+            iconColor: '#ffffff'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#c9c8c8',
+        borderRadius: 32,
+        borderWidth: 1,
+        iconColor: '#016b6a',
+        iconSize: 16,
+        padding: 8,
+        shadow: null
+      }
+    },
+    Icon: {
+      appearances: {
+        colour: {
+          type: 'variant',
+          values: [ 'primary', 'secondary', 'black', 'white' ]
+        },
+        size: { type: 'variant', values: [ 'small' ] },
+        status: {
+          description: 'Uses icon colour to communicate meaning to the user',
+          type: 'variant',
+          values: [ 'success', 'error' ]
+        }
+      },
+      rules: [
+        { if: { size: 'small' }, tokens: { size: 20 } },
+        { if: { colour: 'primary' }, tokens: { color: '#000000' } },
+        { if: { colour: 'secondary' }, tokens: { color: '#00a1db' } },
+        { if: { colour: 'black' }, tokens: { color: '#000000' } },
+        { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+        { if: { status: 'success' }, tokens: { color: '#016b6a' } },
+        { if: { status: 'error' }, tokens: { color: '#ee2c74' } }
+      ],
+      tokens: {
+        color: '#666666',
+        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 ]
+        },
+        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 ]
+        }
+      },
+      rules: [],
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#016b6a',
+        borderRadius: 99999999999999,
+        borderWidth: 1,
+        iconColor: '#016b6a',
+        iconScale: 1,
+        iconSize: 24,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        outerBorderColor: 'transparent',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        padding: 4,
+        shadow: null
+      }
+    },
+    InputLabel: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        color: '#666666',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '500',
+        gap: 8,
+        hintColor: '#666666',
+        hintFontName: 'StagSans',
+        hintFontSize: 14,
+        hintFontWeight: '400',
+        hintLineHeight: 1.4,
+        lineHeight: 1.4
+      }
+    },
+    InputSupports: { appearances: {}, rules: [], tokens: { space: 1 } },
+    Link: {
+      appearances: {
+        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' ]
+        },
+        rank: {
+          description: 'Prominence of the link.',
+          type: 'variant',
+          values: [ 'secondary' ]
+        }
+      },
+      rules: [
+        { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+        {
+          if: { hover: true },
+          tokens: { color: '#014847', textLine: 'none' }
+        },
+        { if: { rank: 'secondary' }, tokens: { color: '#00a1db' } },
+        {
+          if: { hover: true, rank: 'secondary' },
+          tokens: { color: '#0083b3' }
+        }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        blockFontName: 'StagSans',
+        blockFontSize: 16,
+        blockFontWeight: '600',
+        blockLineHeight: 1.5,
+        borderRadius: 4,
+        color: '#016b6a',
+        icon: null,
+        iconSize: 24,
+        iconSpace: 1,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderOutline: 'none',
+        outerBorderWidth: 0,
+        textLine: 'underline',
+        textLineStyle: 'solid'
+      }
+    },
+    List: {
+      appearances: {
+        compact: {
+          description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: {
+          description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
+          type: 'variant',
+          values: [ 'large', 'small' ]
+        }
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: { itemFontSize: 20, itemLineHeight: 1.4, listGutter: 16 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { itemFontSize: 14, listGutter: 10 }
+        },
+        { if: { compact: true }, tokens: { itemLineHeight: 1.2 } },
+        {
+          if: { compact: true, size: 'small' },
+          tokens: { itemLineHeight: 1.1 }
+        },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: { itemLineHeight: 1.3 }
+        }
+      ],
+      tokens: {
+        dividerColor: '#c9c8c8',
+        dividerSize: 1,
+        interItemMargin: 8,
+        interItemMarginWithDivider: 16,
+        itemBulletColor: '#7c1366',
+        itemBulletContainerAlign: 'center',
+        itemBulletContainerWidth: 16,
+        itemBulletHeight: 4,
+        itemBulletWidth: 4,
+        itemFontName: 'StagSans',
+        itemFontSize: 16,
+        itemFontWeight: '600',
+        itemIconColor: '#7c1366',
+        itemIconSize: 16,
+        itemLineHeight: 1.3,
+        listGutter: 10
+      }
+    },
+    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: '#000000',
+        backdropOpacity: 0.5,
+        backgroundColor: '#ffffff',
+        borderRadius: 4,
+        closeIcon: PaletteIconTimes,
+        closeIconColor: '#000000',
+        closeIconSize: 24,
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
+        containerPaddingTop: 0,
+        height: null,
+        maxWidth: '100%',
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        shadow: {
+          blur: 0,
+          color: 'rgba(0, 0, 0, 0)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 0,
+          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: '#c1f2e8',
+            borderColor: '#258b0b',
+            icon: PaletteIconCheckCircledFilled,
+            iconColor: '#258b0b'
+          }
+        },
+        {
+          if: { style: 'warning' },
+          tokens: {
+            backgroundColor: '#feeec7',
+            borderColor: '#fbaf34',
+            icon: PaletteIconExclamationTriangle,
+            iconColor: '#fbaf34'
+          }
+        },
+        {
+          if: { style: 'error' },
+          tokens: {
+            backgroundColor: '#fae6f4',
+            borderColor: '#df3d0c',
+            icon: PaletteIconExclamationOctagon,
+            iconColor: '#df3d0c'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#efefef',
+        borderBottomWidth: 1,
+        borderColor: '#595959',
+        borderLeftWidth: 1,
+        borderRadius: 4,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#666666',
+        dismissButtonGap: 16,
+        dismissIcon: PaletteIconTimes,
+        dismissIconColor: '#666666',
+        dismissIconSize: 16,
+        fontName: 'StagSans',
+        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: '#666666',
+        fontName: 'StagSans',
+        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: '#666666', textLine: 'none' }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#666666', borderWidth: 2 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#666666',
+            color: '#ffffff',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#666666', color: '#ffffff' }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 32,
+        borderWidth: 1,
+        color: '#666666',
+        fontName: 'StagSans',
+        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: '#666666', iconDisplace: 4, textLine: 'none' }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#666666', borderWidth: 3 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#666666',
+            color: '#ffffff',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#666666', color: '#ffffff' }
+        },
+        {
+          if: { direction: 'previous' },
+          tokens: { icon: PaletteIconChevronLeft }
+        },
+        {
+          if: { direction: 'next' },
+          tokens: { icon: PaletteIconChevronRight }
+        }
+      ],
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#666666',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '400',
+        icon: null,
+        iconDisplace: 0,
+        iconSize: 14,
+        lineHeight: 1.5,
+        outerBorderColor: 'transparent',
+        paddingBottom: 10,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 10,
+        textAlign: 'center',
+        textLine: 'underline',
+        width: null
+      }
+    },
+    Progress: {
+      appearances: { size: { type: 'variant', values: [ 'mini' ] } },
+      rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#016b6a',
+        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: '#666666', outlineColor: '#666666' }
+        },
+        {
+          if: { negative: true },
+          tokens: { backgroundColor: '#b8373e', outlineColor: '#b8373e' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#016b6a',
+        borderRadius: 12,
+        gradient: null,
+        outlineColor: '#014847',
+        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: { focus: true },
+          tokens: { inputOutlineColor: '#c9c8c8', inputOutlineWidth: 2 }
+        }
+      ],
+      tokens: {
+        checkedBackgroundColor: '#016b6a',
+        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.4,
+        descriptionMarginLeft: null,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#016b6a',
+        inputBorderWidth: 2,
+        inputOutlineColor: 'rgba(0, 0, 0, 0)',
+        inputOutlineWidth: 0,
+        inputSize: 20,
+        labelColor: '#000000',
+        labelFontName: 'StagSans',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8,
+        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.3,
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 24,
+            paddingTop: 16
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderColor: '#666666',
+            outerBorderColor: '#efefef',
+            outerBorderWidth: 2,
+            radioInputBorderColor: '#014847'
+          }
+        },
+        {
+          description: 'Pressed state matches hover state plus light grey background',
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: '#666666',
+            outerBorderColor: '#efefef',
+            outerBorderWidth: 2,
+            radioInputBorderColor: '#014847'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#666666',
+            outerBorderGap: 4,
+            outerBorderWidth: 2,
+            radioInputBorderColor: '#014847'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderColor: 'transparent',
+            color: '#666666',
+            radioInputBackgroundColor: '#efefef',
+            radioInputBorderColor: '#c9c8c8'
+          }
+        },
+        {
+          if: { error: true },
+          tokens: {
+            borderColor: '#df3d0c',
+            color: '#df3d0c',
+            radioInputBorderColor: '#df3d0c'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#c9c8c8',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#000000',
+        contentSpace: 2,
+        flex: 1,
+        fontName: 'StagSans',
+        fontSize: 20,
+        fontWeight: '700',
+        letterSpacing: 0,
+        lineHeight: 1.4,
+        minWidth: 120,
+        outerBorderColor: 'transparent',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 16,
+        paddingLeft: 10,
+        paddingRight: 16,
+        paddingTop: 16,
+        radioCheckedBackgroundColor: '#016b6a',
+        radioCheckedSize: 12,
+        radioInputBackgroundColor: '#ffffff',
+        radioInputBorderColor: '#016b6a',
+        radioInputBorderWidth: 2,
+        radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
+        radioInputOutlineWidth: 0,
+        radioInputSize: 20,
+        radioOuterBorderColor: 'transparent',
+        radioOuterBorderGap: 0,
+        radioOuterBorderWidth: 0,
+        radioSpace: 2,
+        shadow: null,
+        textTransform: 'none'
+      }
+    },
+    RadioCardGroup: {
+      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: { direction: 'column' }
+        }
+      ],
+      tokens: { direction: 'row', fieldSpace: 2, space: 2 }
+    },
+    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: '#efefef',
+            outerBorderColor: '#efefef'
+          }
+        },
+        {
+          if: { focus: true, inactive: null },
+          tokens: { borderColor: '#016b6a', borderWidth: 2 }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#c9c8c8',
+        borderRadius: 32,
+        borderWidth: 1,
+        buttonsGap: 1,
+        clearButtonIcon: PaletteIconTimes,
+        color: '#666666',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '400',
+        lineHeight: 1.5,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderRadius: 32,
+        outerBorderWidth: 2,
+        paddingBottom: 10,
+        paddingLeft: 24,
+        paddingRight: 4,
+        paddingTop: 10,
+        placeholderColor: '#666666',
+        submitButtonIcon: PaletteIconSpyglass
+      }
+    },
+    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: '#016b6a', iconColor: '#ffffff' }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            backgroundColor: '#014847',
+            borderColor: '#014847',
+            iconColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            backgroundColor: 'transparent',
+            borderColor: '#016b6a',
+            borderWidth: 2,
+            iconColor: '#016b6a'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderColor: null,
+            borderWidth: 0,
+            iconColor: '#ffffff'
+          }
+        },
+        { if: { inactive: true }, tokens: { opacity: 0.3 } }
+      ],
+      tokens: {
+        backgroundColor: null,
+        borderColor: null,
+        borderRadius: 32,
+        borderWidth: 0,
+        iconColor: '#666666',
+        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: '#efefef',
+            outerBorderColor: '#efefef'
+          }
+        },
+        {
+          if: { validation: 'success' },
+          tokens: {
+            borderColor: '#258b0b',
+            validationIcon: PaletteIconCheckCircledFilled,
+            validationIconColor: '#258b0b'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            borderColor: '#df3d0c',
+            validationIcon: PaletteIconTimes,
+            validationIconColor: '#df3d0c'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { borderColor: '#016b6a', borderWidth: 2, icon: null }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#c9c8c8',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#666666',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '400',
+        height: 48,
+        icon: PaletteIconChevronDown,
+        iconColor: '#666666',
+        iconSize: 24,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 2,
+        paddingBottom: 10,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 10,
+        validationIcon: null,
+        validationIconColor: 'rgba(0, 0, 0, 0)',
+        validationIconSize: 24
+      }
+    },
+    SideNav: {
+      appearances: {},
+      rules: [],
+      tokens: { borderColor: '#c9c8c8', 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: '#016b6a',
+            backgroundColor: '#c1f2e8',
+            color: '#016b6a',
+            paddingLeft: 10
+          }
+        },
+        {
+          if: { type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#c1f2e8',
+            accentOffset: 16,
+            borderWidth: 0,
+            paddingLeft: 36
+          }
+        },
+        {
+          if: { active: true, type: 'parent' },
+          tokens: { paddingLeft: 10 }
+        },
+        {
+          if: { active: true, expanded: true, type: 'parent' },
+          tokens: {
+            accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            color: '#666666',
+            paddingLeft: 16
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#c1f2e8', color: '#016b6a' }
+        },
+        {
+          if: { active: true, type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#016b6a',
+            accentPadding: 16,
+            backgroundColor: '#c1f2e8',
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { active: false, hover: true, type: 'child' },
+          tokens: {
+            accentBackgroundColor: '#ffffff',
+            accentOffset: 0,
+            accentWidth: 16,
+            color: '#666666'
+          }
+        }
+      ],
+      tokens: {
+        accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        accentOffset: 0,
+        accentPadding: 0,
+        accentWidth: 4,
+        backgroundColor: 'transparent',
+        borderColor: '#c9c8c8',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        color: '#666666',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '400',
+        justifyContent: 'space-between',
+        lineHeight: 1.5,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16
+      }
+    },
+    SideNavItemsGroup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        collapseDuration: 250,
+        contentPaddingBottom: 0,
+        contentPaddingLeft: 0,
+        contentPaddingRight: 0,
+        contentPaddingTop: 0,
+        expandDuration: 300,
+        icon: null,
+        iconColor: null,
+        iconGap: 8,
+        iconPosition: 'right',
+        iconSize: 10,
+        justifyContent: 'space-between',
+        verticalAlign: 'middle'
+      }
+    },
+    Skeleton: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        baseWidth: 40,
+        characters: 10,
+        color: '#666666',
+        radius: 120,
+        size: 2,
+        spaceBetweenLines: 4,
+        squareRadius: 4
+      }
+    },
+    StackView: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'stretch',
+        flexGrow: 0,
+        flexShrink: 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: PaletteIconCheck,
+        completedIconColor: '#ffffff',
+        completedIconSize: 10,
+        connectorColor: '#016b6a',
+        connectorCompletedColor: '#016b6a',
+        connectorCompletedHeight: 1,
+        connectorHeight: 1,
+        connectorMinWidth: 16,
+        containerPaddingBottom: null,
+        containerPaddingLeft: null,
+        containerPaddingRight: null,
+        containerPaddingTop: null,
+        knobBackgroundColor: 'rgba(0, 0, 0, 0)',
+        knobBorderColor: '#016b6a',
+        knobBorderWidth: 1,
+        knobCompletedBackgroundColor: '#016b6a',
+        knobCompletedBorderColor: '#016b6a',
+        knobCompletedPaddingLeft: 2,
+        knobCompletedPaddingTop: 2,
+        knobCurrentBackgroundColor: '#016b6a',
+        knobCurrentBorderColor: '#016b6a',
+        knobCurrentBorderWidth: 1,
+        knobCurrentInnerColor: null,
+        knobCurrentInnerSize: null,
+        knobCurrentPaddingLeft: null,
+        knobCurrentPaddingTop: null,
+        knobSize: 16,
+        labelColor: '#016b6a',
+        labelCurrentColor: '#016b6a',
+        labelCurrentFontName: 'StagSans',
+        labelCurrentFontWeight: '600',
+        labelDirection: 'row',
+        labelFontName: 'StagSans',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelGap: 4,
+        labelLineHeight: 1.5,
+        labelMarginTop: 8,
+        labelPaddingLeft: 16,
+        labelPaddingRight: 16,
+        showStepLabel: false,
+        showStepName: true,
+        showStepTrackerLabel: true
+      }
+    },
+    Tabs: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderBottomColor: 'transparent',
+        borderBottomWidth: 0,
+        buttonClearance: 32,
+        gutter: 16,
+        nextIcon: PaletteIconChevronRight,
+        previousIcon: PaletteIconChevronLeft,
+        space: 0
+      }
+    },
+    TabsItem: {
+      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 ]
+        },
+        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: [
+        { if: { focus: true }, tokens: { borderWidth: 4 } },
+        { if: { hover: true }, tokens: { backgroundColor: '#f9f6a5' } },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#016b6a',
+            borderWidth: 0,
+            color: '#ffffff',
+            highlightColor: '#016b6a',
+            highlightTriangleSize: 8
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#c9c8c8',
+        borderRadius: 0,
+        borderWidth: 1,
+        color: '#000000',
+        fontName: 'StagSans',
+        fontScaleCap: 64,
+        fontSize: 16,
+        fontWeight: '700',
+        highlightBarBorderRadius: 0,
+        highlightBarBorderWidth: 0,
+        highlightBarHeight: 0,
+        highlightColor: 'transparent',
+        highlightTriangleSize: 0,
+        letterSpacing: 0,
+        lineHeight: 1.1,
+        maxWidth: null,
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        space: 0,
+        textAlign: 'center',
+        textTransform: 'none'
+      }
+    },
+    Tags: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        alignItems: 'center',
+        direction: 'row',
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        space: 3
+      }
+    },
+    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: '#016b6a',
+            borderColor: '#016b6a',
+            color: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#014847', iconColor: '#014847' }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            icon: PaletteIconCheckCircledFilled,
+            opacity: 0.8,
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 1,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#666666',
+            borderWidth: 0,
+            color: '#ffffff',
+            iconColor: '#666666'
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            opacity: 0.8,
+            outerBorderColor: '#016b6a',
+            outerBorderGap: 1,
+            outerBorderWidth: 4
+          }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#014847' }
+        }
+      ],
+      tokens: {
+        alignSelf: 'center',
+        backgroundColor: '#016b6a',
+        borderColor: '#014847',
+        borderRadius: 4,
+        borderWidth: 0,
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        icon: PaletteIconCheckCircledNotFilled,
+        iconAlignSelf: 'center',
+        iconBackground: '#ffffff',
+        iconBorderRadius: 32,
+        iconColor: '#016b6a',
+        iconPadding: 4,
+        iconPosition: 'right',
+        iconSize: 20,
+        iconSpace: 3,
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+        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: 24,
+        paddingRight: 16,
+        paddingTop: 8,
+        shadow: null,
+        textAlign: 'center',
+        width: null
+      }
+    },
+    TextArea: {
+      appearances: {},
+      rules: [],
+      tokens: { maxLines: 4, minLines: 2 }
+    },
+    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: '#efefef',
+            outerBorderColor: '#efefef'
+          }
+        },
+        {
+          if: { validation: 'success' },
+          tokens: {
+            borderColor: '#258b0b',
+            icon: PaletteIconCheckCircledFilled,
+            iconColor: '#258b0b'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            borderColor: '#df3d0c',
+            icon: PaletteIconTimes,
+            iconColor: '#df3d0c'
+          }
+        },
+        {
+          if: { focus: true, inactive: null },
+          tokens: { borderColor: '#016b6a', borderWidth: 2, icon: null }
+        },
+        {
+          if: { inactive: true },
+          tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+        }
+      ],
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#c9c8c8',
+        borderRadius: 4,
+        borderWidth: 1,
+        color: '#666666',
+        fontName: 'StagSans',
+        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: 10,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 10
+      }
+    },
+    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: '#014847' } },
+        {
+          if: { pressed: true },
+          tokens: { backgroundColor: '#c3efff' }
+        },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#016b6a' }
+        },
+        {
+          if: { selected: true },
+          tokens: { backgroundColor: '#00a1db' }
+        },
+        {
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#0083b3' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#c3efff' }
+        },
+        {
+          if: { focus: true, selected: true },
+          tokens: { outerBorderColor: '#00a1db' }
+        },
+        {
+          if: { focus: true, pressed: true, selected: true },
+          tokens: { outerBorderColor: '#c3efff' }
+        },
+        { if: { inactive: true }, tokens: { opacity: 0.5 } }
+      ],
+      tokens: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#016b6a',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 4,
+        borderWidth: 0,
+        icon: null,
+        iconColor: 'rgba(0, 0, 0, 0)',
+        iconSize: 16,
+        opacity: 1,
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 4,
+        paddingLeft: 8,
+        paddingRight: 8,
+        paddingTop: 4,
+        shadow: null,
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchBorderRadius: 32,
+        switchBorderWidth: 0,
+        switchColor: '#ffffff',
+        switchShadow: null,
+        switchSize: 24,
+        trackBorderColor: 'rgba(0, 0, 0, 0)',
+        trackBorderRadius: 0,
+        trackBorderWidth: 0,
+        width: 64
+      }
+    },
+    Tooltip: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        arrowBorderRadius: 0,
+        arrowOffset: 4,
+        arrowWidth: 8,
+        backgroundColor: '#014847',
+        borderRadius: 4,
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 1.4,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8,
+        shadow: {
+          blur: 0,
+          color: 'rgba(0, 0, 0, 0)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 0,
+          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 ]
+        },
+        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: { iconScale: 1.25 } },
+        { if: { pressed: true }, tokens: { iconColor: '#014847' } },
+        {
+          if: { focus: true },
+          tokens: { outerBorderColor: '#014847' }
+        }
+      ],
+      tokens: {
+        borderRadius: 32,
+        icon: PaletteIconInfo,
+        iconColor: '#ee2c74',
+        iconScale: 1,
+        iconSize: 16,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 4,
+        outerBorderWidth: 1,
+        width: 16
+      }
+    },
+    Typography: {
+      appearances: {
+        colour: { type: 'variant', values: [ 'red' ] },
+        inverse: {
+          description: 'Styles the link white for use on dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        },
+        size: {
+          type: 'variant',
+          values: [ 'small', 'large', 'h1', 'h2', 'h3', 'h4', 'display' ]
+        },
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        },
+        weight: {
+          description: 'Sets the font weight, default is regular 400 weight. Does not change accessibility properties.',
+          type: 'variant',
+          values: [ 'semibold', 'bold' ]
+        }
+      },
+      rules: [
+        {
+          if: { weight: 'semibold' },
+          tokens: { fontName: 'StagSans', fontWeight: '600' }
+        },
+        {
+          if: { weight: 'bold' },
+          tokens: { fontName: 'StagSans', fontWeight: '700' }
+        },
+        {
+          if: { size: 'large' },
+          tokens: { fontSize: 20, lineHeight: 1.6 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { fontSize: 14, lineHeight: 1.4 }
+        },
+        {
+          if: { size: 'display' },
+          tokens: {
+            fontName: 'StagSans',
+            fontSize: 48,
+            fontWeight: '700',
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'display', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 64, lineHeight: 1.1 }
+        },
+        {
+          if: { size: 'h1' },
+          tokens: {
+            fontName: 'StagSans',
+            fontSize: 44,
+            fontWeight: '700',
+            lineHeight: 1.2
+          }
+        },
+        {
+          if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 40, lineHeight: 1.1 }
+        },
+        {
+          if: { size: 'h2' },
+          tokens: {
+            color: '#000000',
+            fontName: 'StagSans',
+            fontSize: 28,
+            fontWeight: '700',
+            lineHeight: 1.3
+          }
+        },
+        {
+          if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 28 }
+        },
+        {
+          if: { size: 'h3' },
+          tokens: {
+            fontName: 'StagSans',
+            fontSize: 20,
+            fontWeight: '700',
+            lineHeight: 1.4
+          }
+        },
+        {
+          if: { size: 'h3', viewport: [ 'lg', 'xl' ] },
+          tokens: { fontSize: 24, lineHeight: 1.3 }
+        },
+        {
+          if: { size: 'h4' },
+          tokens: {
+            fontName: 'StagSans',
+            fontSize: 16,
+            fontWeight: '700',
+            lineHeight: 1.5
+          }
+        },
+        { if: { inverse: true }, tokens: { color: '#ffffff' } },
+        { if: { colour: 'red' }, tokens: { color: '#df3d0c' } }
+      ],
+      tokens: {
+        color: '#000000',
+        fontName: 'StagSans',
+        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: 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: 10, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 120 }
+        },
+        {
+          if: { space: 9, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 96 }
+        },
+        {
+          if: { space: 8, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 72 }
+        },
+        {
+          if: { space: 7, viewport: [ 'lg', 'xl' ] },
+          tokens: { size: 64 }
+        },
+        { if: { space: 0 }, tokens: { size: 0 } }
+      ],
+      tokens: { size: 96 }
+    }
+  },
+  metadata: {
+    name: 'koodo',
+    package: '@telus-uds/theme-koodo',
+    themeTokensVersion: '0.0.2-prerelease.0'
+  }
+}