@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/__fixtures__/testTheme.js

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