@telus-uds/theme-allium 0.0.2-prerelease.5 → 0.0.2-prerelease.6

package/src/components/Select.js

@@ -1,88 +1,78 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-import errorIcon from '@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg'
-import successIcon from '@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg'
-import caretDownIcon from '@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg'
-
 const Select = {
   appearances: {
-    validation: appearances.Select.validation,
-    hover: appearances.Select.hover,
-    focus: appearances.Select.focus,
-    inactive: appearances.Select.inactive
+    validation: '{appearances.Select.validation}',
+    hover: '{appearances.Select.hover}',
+    focus: '{appearances.Select.focus}',
+    inactive: '{appearances.Select.inactive}'
   },
   tokens: {
-    backgroundColor: palette.color.white,
-    color: palette.color.greyCharcoal,
-    borderWidth: palette.border.border1,
-    borderColor: palette.color.greyShuttle,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    height: palette.size.size48,
+    backgroundColor: '{palette.color.white}',
+    color: '{palette.color.greyCharcoal}',
+    borderWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyShuttle}',
+    borderRadius: '{palette.radius.radius4}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    height: '{palette.size.size48}',
 
-    outerBackgroundColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderColor: palette.color.transparent,
-    outerBorderRadius: palette.radius.radius4,
+    outerBackgroundColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderColor: '{palette.color.transparent}',
 
-    fontSize: palette.fontSize.size16,
-    // TODO replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
+    fontSize: '{palette.fontSize.size16}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    icon: caretDownIcon,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.greenAccessible,
+    icon: '{palette.icon.CaretDown}',
+    iconSize: '{palette.fontSize.size24}',
+    iconColor: '{palette.color.greenAccessible}',
 
-    validationIcon: system.icon.none,
-    validationIconSize: palette.fontSize.size24,
-    validationIconColor: palette.color.transparent
+    validationIcon: '{system.icon.none}',
+    validationIconSize: '{palette.fontSize.size24}',
+    validationIconColor: '{palette.color.transparent}'
   },
   rules: [
     {
       if: { hover: true, inactive: null },
       tokens: {
-        outerBorderColor: palette.color.greyMystic,
-        outerBackgroundColor: palette.color.greyMystic
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBackgroundColor: '{palette.color.greyMystic}'
       }
     },
     {
       if: { validation: 'success' },
       tokens: {
-        borderColor: palette.color.greenAccessible,
-        validationIcon: successIcon,
-        validationIconColor: palette.color.greenAccessible
+        borderColor: '{palette.color.greenAccessible}',
+        validationIcon: '{palette.icon.NotificationSuccess}',
+        validationIconColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { validation: 'error' },
       tokens: {
-        borderColor: palette.color.red,
-        validationIcon: errorIcon,
-        validationIconColor: palette.color.red
+        borderColor: '{palette.color.red}',
+        validationIcon: '{palette.icon.NotificationError}',
+        validationIconColor: '{palette.color.red}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        borderColor: palette.color.purpleDeluge,
-        borderWidth: palette.border.border3,
-        validationIcon: system.icon.none
+        borderColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{palette.border.border3}',
+        validationIcon: '{system.icon.none}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        borderColor: palette.color.greyAthens
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyAthens}'
       }
     }
   ]
 }
 
-export default Select
+module.exports = Select

package/src/components/SideNav.js

@@ -1,12 +1,9 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
+module.exports = {
   appearances: {},
   tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: system.borderStyle.solid
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderStyle: '{system.borderStyle.solid}'
   },
   rules: []
 }

package/src/components/SideNavItem.js

@@ -1,32 +1,29 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
+module.exports = {
   appearances: {
-    active: appearances.SideNavItem.active,
-    type: appearances.SideNavItem.type,
-    expanded: appearances.SideNavItem.expanded,
-    hover: appearances.SideNavItem.hover
+    active: '{appearances.SideNavItem.active}',
+    type: '{appearances.SideNavItem.type}',
+    expanded: '{appearances.SideNavItem.expanded}',
+    hover: '{appearances.SideNavItem.hover}'
   },
   tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: system.borderStyle.solid,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    justifyContent: system.flexJustifyContent.spaceBetween,
-    color: palette.color.greyCharcoal,
-    accentOffset: system.size.zero,
-    accentPadding: system.size.zero,
-    accentWidth: palette.size.size4,
-    accentBackgroundColor: palette.color.transparent,
-    fontSize: palette.fontSize.size16,
-    fontWeight: '400',
-    lineHeight: palette.lineHeight.ratio3to2,
-    backgroundColor: palette.color.transparent
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderStyle: '{system.borderStyle.solid}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    paddingTop: '{palette.size.size16}',
+    paddingBottom: '{palette.size.size16}',
+    justifyContent: '{system.flexJustifyContent.spaceBetween}',
+    color: '{palette.color.greyCharcoal}',
+    accentOffset: '{system.size.zero}',
+    accentPadding: '{system.size.zero}',
+    accentWidth: '{palette.size.size4}',
+    accentBackgroundColor: '{palette.color.transparent}',
+    fontSize: '{palette.fontSize.size16}',
+    fontWeight: '{palette.fontWeight.weight400}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    backgroundColor: '{palette.color.transparent}'
   },
   rules: [
     {
@@ -34,13 +31,12 @@ export default {
         active: true
       },
       tokens: {
-        paddingLeft: palette.size.size12,
-        accentBackgroundColor: palette.color.purpleTelus,
-        color: palette.color.purpleTelus,
+        paddingLeft: '{palette.size.size12}',
+        accentBackgroundColor: '{palette.color.purpleTelus}',
+        color: '{palette.color.purpleTelus}',
 
-        // TODO: replace with font token
-        fontWeight: '700'
-        // font: palette.font.HelveticaNow[700]
+        fontWeight: '{palette.fontWeight.weight700}',
+        fontName: '{palette.fontName.HelveticaNow}'
       }
     },
     {
@@ -48,12 +44,12 @@ export default {
         type: 'child'
       },
       tokens: {
-        paddingLeft: palette.size.size36,
-        borderWidth: palette.border.none,
-        accentBackgroundColor: palette.color.greyAthens,
-        accentOffset: palette.size.size16,
-        fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.ratio7to5
+        paddingLeft: '{palette.size.size36}',
+        borderWidth: '{palette.border.none}',
+        accentBackgroundColor: '{palette.color.greyAthens}',
+        accentOffset: '{palette.size.size16}',
+        fontSize: '{palette.fontSize.size14}',
+        lineHeight: '{palette.lineHeight.ratio7to5}'
       }
     },
     {
@@ -62,7 +58,7 @@ export default {
         active: true
       },
       tokens: {
-        paddingLeft: palette.size.size12
+        paddingLeft: '{palette.size.size12}'
       }
     },
     {
@@ -72,9 +68,9 @@ export default {
         expanded: true
       },
       tokens: {
-        paddingLeft: palette.size.size16,
-        accentBackgroundColor: palette.color.transparent,
-        color: palette.color.greyCharcoal
+        paddingLeft: '{palette.size.size16}',
+        accentBackgroundColor: '{palette.color.transparent}',
+        color: '{palette.color.greyCharcoal}'
       }
     },
     {
@@ -82,8 +78,8 @@ export default {
         hover: true
       },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus
+        backgroundColor: '{palette.color.greyAthens}',
+        color: '{palette.color.purpleTelus}'
       }
     },
     {
@@ -92,10 +88,10 @@ export default {
         active: true
       },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus,
-        accentPadding: palette.size.size16,
-        accentBackgroundColor: palette.color.purpleTelus
+        backgroundColor: '{palette.color.greyAthens}',
+        color: '{palette.color.purpleTelus}',
+        accentPadding: '{palette.size.size16}',
+        accentBackgroundColor: '{palette.color.purpleTelus}'
       }
     },
     {
@@ -105,10 +101,10 @@ export default {
         hover: true
       },
       tokens: {
-        accentBackgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal,
-        accentOffset: system.size.zero,
-        accentWidth: palette.size.size16
+        accentBackgroundColor: '{palette.color.white}',
+        color: '{palette.color.greyCharcoal}',
+        accentOffset: '{system.size.zero}',
+        accentWidth: '{palette.size.size16}'
       }
     }
   ]

package/src/components/SideNavItemsGroup.js

@@ -1,34 +1,27 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-import CaretUp from '@telus-uds/palette-allium/build/rn/icons/caret-up.icon.svg'
-import CaretDown from '@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg'
-
-export default {
+module.exports = {
   appearances: {
-    expanded: appearances.SideNavItemGroup.expanded
+    expanded: '{appearances.SideNavItemGroup.expanded}'
   },
   tokens: {
     // animate slightly faster when closing
-    expandDuration: palette.duration.duration300,
-    collapseDuration: palette.duration.duration250,
-    contentPaddingLeft: palette.size.size0,
-    contentPaddingRight: palette.size.size0,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size0,
-    icon: CaretDown,
-    iconColor: palette.color.purpleTelus,
-    iconGap: palette.size.size8,
-    iconSize: palette.size.size24,
-    iconPosition: system.position.right,
-    verticalAlign: system.verticalAlign.middle,
-    justifyContent: system.flexJustifyContent.spaceBetween
+    expandDuration: '{palette.duration.duration300}',
+    collapseDuration: '{palette.duration.duration250}',
+    contentPaddingLeft: '{palette.size.size0}',
+    contentPaddingRight: '{palette.size.size0}',
+    contentPaddingTop: '{palette.size.size0}',
+    contentPaddingBottom: '{palette.size.size0}',
+    icon: '{palette.icon.CaretDown}',
+    iconColor: '{palette.color.purpleTelus}',
+    iconGap: '{palette.size.size8}',
+    iconSize: '{palette.size.size24}',
+    iconPosition: '{system.position.right}',
+    verticalAlign: '{system.verticalAlign.middle}',
+    justifyContent: '{system.flexJustifyContent.spaceBetween}'
   },
   rules: [
     {
       if: { expanded: true },
-      tokens: { icon: CaretUp }
+      tokens: { icon: '{palette.icon.CaretUp}' }
     }
   ]
 }

package/src/components/Skeleton.js

@@ -1,16 +1,14 @@
-import palette from '@telus-uds/palette-allium'
-
 const Skeleton = {
   appearances: {},
   tokens: {
-    color: palette.color.greyCloud,
-    size: palette.border.border3,
-    radius: palette.size.size120,
-    baseWidth: palette.size.size40,
-    characters: palette.size.size10,
-    spaceBetweenLines: palette.size.size2,
-    squareRadius: palette.size.size4
+    color: '{palette.color.greyCloud}',
+    size: '{palette.border.border3}',
+    radius: '{palette.size.size120}',
+    baseWidth: '{palette.size.size40}',
+    characters: '{palette.size.size10}',
+    spaceBetweenLines: '{palette.size.size2}',
+    squareRadius: '{palette.size.size4}'
   },
   rules: []
 }
-export default Skeleton
+module.exports = Skeleton

package/src/components/StackView.js

@@ -1,12 +1,10 @@
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
 // This makes the React Native defaults explicit and allows them to be overridden with tokens
-export default {
+module.exports = {
   appearances: {},
   tokens: {
-    alignItems: system.flexAlign.stretch,
-    justifyContent: system.flexJustifyContent.flexStart,
-    flexGrow: system.integer[0]
+    alignItems: '{system.flexAlign.stretch}',
+    justifyContent: '{system.flexJustifyContent.flexStart}',
+    flexGrow: '{system.integer.0}'
   },
   rules: []
 }

package/src/components/StepTracker.js

@@ -0,0 +1,59 @@
+module.exports = {
+  appearances: {
+    viewport: '{appearances.system.viewport}'
+  },
+  tokens: {
+    completedIcon: '{system.icon.none}',
+    completedIconColor: '{system.color.none}',
+    completedIconSize: '{system.size.none}',
+    connectorColor: '{palette.color.greyShuttle}',
+    connectorHeight: '{palette.border.border1}',
+    connectorMinWidth: '{palette.size.size16}',
+    connectorCompletedHeight: '{palette.border.border3}',
+    connectorCompletedColor: '{palette.color.purpleDeluge}',
+    containerPaddingBottom: '{system.size.none}',
+    containerPaddingLeft: '{system.size.none}',
+    containerPaddingRight: '{system.size.none}',
+    containerPaddingTop: '{system.size.none}',
+    knobBackgroundColor: '{palette.color.transparent}',
+    knobBorderWidth: '{palette.border.border1}',
+    knobBorderColor: '{palette.color.greyShuttle}',
+    knobCompletedBackgroundColor: '{palette.color.purpleDeluge}',
+    knobCompletedBorderColor: '{palette.color.purpleDeluge}',
+    knobCompletedPaddingLeft: '{system.size.none}',
+    knobCompletedPaddingTop: '{system.size.none}',
+    knobCurrentBackgroundColor: '{palette.color.transparent}',
+    knobCurrentBorderColor: '{palette.color.purpleDeluge}',
+    knobCurrentBorderWidth: '{palette.border.border2}',
+    knobCurrentInnerColor: '{palette.color.purpleDeluge}',
+    knobCurrentInnerSize: '{palette.size.size8}',
+    knobCurrentPaddingLeft: '{palette.size.size2}',
+    knobCurrentPaddingTop: '{palette.size.size2}',
+    knobSize: '{palette.size.size16}',
+    labelColor: '{palette.color.greyCharcoal}',
+    labelCurrentColor: '{palette.color.purpleDeluge}',
+    labelCurrentFontWeight: '{palette.fontWeight.weight700}',
+    labelCurrentFontName: '{palette.fontName.HelveticaNow}',
+    labelDirection: '{system.direction.column}',
+    labelFontSize: '{palette.fontSize.size16}',
+    labelFontWeight: '{palette.fontWeight.weight400}',
+    labelFontName: '{palette.fontName.HelveticaNow}',
+    labelGap: '{palette.size.size0}',
+    labelLineHeight: '{palette.lineHeight.ratio10to7}',
+    labelMarginTop: '{palette.size.size8}',
+    labelPaddingLeft: '{palette.size.size16}',
+    labelPaddingRight: '{palette.size.size16}',
+    showStepLabel: '{system.show.false}',
+    showStepName: '{system.show.true}',
+    showStepTrackerLabel: '{system.show.true}'
+  },
+  rules: [
+    {
+      if: { viewport: ['lg', 'xl'] },
+      tokens: {
+        showStepLabel: '{system.show.true}',
+        showStepTrackerLabel: '{system.show.false}'
+      }
+    }
+  ]
+}

package/src/components/Tabs.js

@@ -0,0 +1,13 @@
+module.exports = {
+  appearances: {},
+  tokens: {
+    nextIcon: '{palette.icon.ArrowRight}',
+    previousIcon: '{palette.icon.ArrowLeft}',
+    space: '{system.integer.0}',
+    gutter: '{palette.size.size2}',
+    borderBottomWidth: '{palette.border.border1}',
+    borderBottomColor: '{palette.color.greyShuttle}',
+    buttonClearance: '{palette.size.size16}'
+  },
+  rules: []
+}

package/src/components/TabsItem.js

@@ -0,0 +1,81 @@
+module.exports = {
+  appearances: {
+    pressed: '{appearances.TabsItem.pressed}',
+    hover: '{appearances.TabsItem.pressed}',
+    focus: '{appearances.TabsItem.pressed}',
+    selected: '{appearances.TabsItem.pressed}'
+  },
+  tokens: {
+    highlightColor: '{system.color.transparent}',
+    highlightBarHeight: '{system.border.zero}',
+    highlightBarBorderRadius: '{system.radius.zero}',
+    highlightBarBorderWidth: '{system.border.zero}',
+    highlightTriangleSize: '{system.size.zero}',
+
+    backgroundColor: '{system.color.transparent}',
+    borderColor: '{system.color.transparent}',
+    borderWidth: '{system.border.zero}',
+    borderRadius: '{palette.radius.pill32}',
+    maxWidth: '{palette.size.size192}',
+    space: '{system.integer.1}',
+    paddingHorizontal: '{palette.size.size24}',
+    paddingVertical: '{palette.size.size8}',
+
+    textAlign: '{system.textAlign.center}',
+    lineHeight: '{palette.lineHeight.ratio8to7}',
+    color: '{palette.color.greyShuttle}',
+    fontSize: '{palette.fontSize.size14}',
+    letterSpacing: '{system.letterSpacing.none}',
+    textTransform: '{system.textTransform.none}',
+    fontScaleCap: '{palette.fontSize.size64}',
+
+    fontWeight: '{palette.fontWeight.weight700}',
+    fontName: '{palette.fontName.HelveticaNow}'
+  },
+  rules: [
+    {
+      if: { selected: true },
+      description:
+        "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
+      tokens: {
+        highlightBarBorderWidth: '{palette.border.border1}',
+        highlightBarHeight: '{palette.border.border1}',
+        highlightColor: '{palette.color.purpleTelus}',
+        highlightBarBorderRadius: '{palette.radius.pill32}',
+
+        color: '{palette.color.purpleTelus}',
+        backgroundColor: '{palette.color.greyAthens}'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '{palette.color.greyCloud}',
+        borderWidth: '{palette.border.border2}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        color: '{palette.color.purpleTelus}',
+        borderColor: '{palette.color.purpleTelus}',
+        borderWidth: '{palette.border.border2}'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        color: '{palette.color.white}',
+        backgroundColor: '{palette.color.greyShuttle}',
+        borderColor: '{system.color.transparent}',
+        borderWidth: '{system.border.zero}'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleTelus}'
+      }
+    }
+  ]
+}

package/src/components/TabsScrollButton.js

@@ -0,0 +1,34 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.TabsScrollButton.hover}',
+    focus: '{appearances.TabsScrollButton.focus}',
+    pressed: '{appearances.TabsScrollButton.pressed}'
+  },
+  tokens: {
+    borderRadius: '{palette.radius.pill32}',
+    backgroundColor: '{palette.color.white}',
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    padding: '{system.size.zero}',
+    shadow: '{palette.shadow.surfaceRaised}',
+    iconSize: '{palette.size.size32}',
+    iconColor: '{palette.color.greyShuttle}'
+  },
+  // TODO: refine the states etc when designs for icon buttons are finalized
+  rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '{palette.color.greyCharcoal}',
+        iconColor: '{palette.color.greyCharcoal}'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyShuttle}',
+        iconColor: '{palette.color.white}'
+      }
+    }
+  ]
+}

package/src/components/Tags.js

@@ -1,16 +1,13 @@
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
+module.exports = {
   appearances: {
-    viewport: appearances.system.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    space: system.integer[1],
-    direction: system.direction.row,
-    alignItems: system.flexAlign.center,
-    justifyContent: system.flexJustifyContent.flexStart,
-    flexGrow: system.integer[0]
+    space: '{system.integer.1}',
+    direction: '{system.direction.row}',
+    alignItems: '{system.flexAlign.center}',
+    justifyContent: '{system.flexJustifyContent.flexStart}',
+    flexGrow: '{system.integer.0}'
   },
-  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: system.integer[3] } }]
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: '{system.integer.3}' } }]
 }