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

package/src/components/TagsItem.js

@@ -1,117 +1,125 @@
-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 addIcon from '@telus-uds/palette-allium/build/rn/icons/add.icon.svg'
-import closeIcon from '@telus-uds/palette-allium/build/rn/icons/close.icon.svg'
-
-// console.log({ addIcon, closeIcon, size16: palette.size.size16 })
-
-export default {
+module.exports = {
   appearances: {
-    hover: appearances.TagsItem.hover,
-    focus: appearances.TagsItem.focus,
-    pressed: appearances.TagsItem.pressed,
-    selected: appearances.TagsItem.selected,
-    inactive: appearances.TagsItem.inactive
+    hover: '{appearances.TagsItem.hover}',
+    focus: '{appearances.TagsItem.focus}',
+    pressed: '{appearances.TagsItem.pressed}',
+    selected: '{appearances.TagsItem.selected}',
+    inactive: '{appearances.TagsItem.inactive}'
   },
   tokens: {
     // Icon tokens
-    iconSize: palette.size.size16,
-    iconColor: palette.color.greyThunder,
-    iconTranslateX: system.integer[0],
-    iconTranslateY: system.integer[0],
+    iconSize: '{palette.size.size16}',
+    iconColor: '{palette.color.greyThunder}',
+    iconTranslateX: '{system.integer.0}',
+    iconTranslateY: '{system.integer.0}',
 
-    icon: addIcon,
-    iconPosition: system.position.right,
-    iconSpace: system.integer[2],
-    iconBackground: palette.color.greyAthens,
-    iconBorderRadius: palette.radius.pill32,
-    iconAlignSelf: system.flexAlign.center,
-    iconPadding: palette.size.size2,
+    icon: '{palette.icon.Add}',
+    iconPosition: '{system.position.right}',
+    iconSpace: '{system.integer.2}',
+    iconBackground: '{palette.color.greyAthens}',
+    iconBorderRadius: '{palette.radius.pill32}',
+    iconAlignSelf: '{system.flexAlign.center}',
+    iconPadding: '{palette.size.size2}',
 
     // Button tokens, very similar to ButtonGroup
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    shadow: system.shadow.none,
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.pill32}',
+    shadow: '{system.shadow.none}',
 
-    fontSize: palette.fontSize.size14,
-    color: palette.color.greyShuttle,
-    lineHeight: palette.lineHeight.ratio10to7,
-    textAlign: system.flexJustifyContent.center,
-    alignSelf: system.flexAlign.center,
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow['700'],
+    fontSize: '{palette.fontSize.size14}',
+    color: '{palette.color.greyShuttle}',
+    lineHeight: '{palette.lineHeight.ratio10to7}',
+    textAlign: '{system.flexJustifyContent.center}',
+    alignSelf: '{system.flexAlign.center}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight700}',
 
-    backgroundColor: palette.color.white,
-    opacity: system.opacity.opaque,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size8,
-    paddingBottom: palette.size.size8,
-    width: system.size.none,
-    minWidth: system.size.zero,
+    backgroundColor: '{palette.color.white}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size8}',
+    paddingTop: '{palette.size.size8}',
+    paddingBottom: '{palette.size.size8}',
+    width: '{system.size.none}',
+    minWidth: '{system.size.zero}',
 
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderGap: '{palette.border.border2}',
+    outerBackgroundColor: '{palette.color.transparent}'
   },
   rules: [
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: '{palette.border.none}',
+        backgroundColor: '{palette.color.greyShuttle}',
+        borderColor: '{palette.color.greyShuttle}',
+        color: '{palette.color.white}',
+
+        iconColor: '{palette.color.white}',
+        iconBackground: '{palette.color.greyCharcoal}'
+      }
+    },
     {
       if: { focus: true },
       tokens: {
-        borderColor: palette.color.purpleTelus,
-        borderWidth: palette.border.border3,
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.transparent
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyShuttle}',
+        outerBorderGap: '{palette.size.size2}',
+        outerBorderWidth: '{palette.size.size2}'
       }
     },
-    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
+    { if: { hover: true }, tokens: { borderWidth: '{palette.border.border3}' } },
     {
       if: { selected: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white,
+        borderWidth: '{palette.border.none}',
+        backgroundColor: '{palette.color.purpleTelus}',
+        color: '{palette.color.white}',
 
-        icon: closeIcon,
-        iconColor: palette.color.white,
-        iconBackground: palette.color.purpleDeluge
+        icon: '{palette.icon.Close}',
+        iconColor: '{palette.color.white}',
+        iconBackground: '{palette.color.purpleDeluge}'
       }
     },
     {
-      if: { pressed: true },
+      if: { selected: true, hover: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white,
+        backgroundColor: '{palette.color.purpleDeluge}',
 
-        iconColor: palette.color.white,
-        iconBackground: palette.color.greyCharcoal
+        iconBackground: '{palette.color.purpleTelus}'
+      }
+    },
+    {
+      if: { selected: true, pressed: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleDark}',
+
+        iconBackground: '{palette.color.purpleDeluge}'
+      }
+    },
+    {
+      if: { selected: true, focus: true },
+      tokens: {
+        outerBorderColor: '{palette.color.purpleTelus}'
       }
     },
     {
-      if: { focus: true, pressed: true },
+      if: { selected: true, focus: true, pressed: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white,
+        outerBorderColor: '{palette.color.purpleDark}',
 
-        iconColor: palette.color.white,
-        iconBackground: palette.color.purpleDark
+        iconBackground: '{palette.color.purpleDeluge}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: system.border.zero
+        backgroundColor: '{palette.color.greyCloud}',
+        color: '{palette.color.white}',
+        borderWidth: '{system.border.zero}'
       }
     }
   ]

package/src/components/TextArea.js

@@ -1,10 +1,8 @@
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
+module.exports = {
   appearances: {},
   tokens: {
-    minLines: system.integer[5],
-    maxLines: system.integer[8]
+    minLines: '{system.integer.5}',
+    maxLines: '{system.integer.8}'
   },
   rules: []
 }

package/src/components/TextInput.js

@@ -1,82 +1,72 @@
-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'
-
-export default {
+module.exports = {
   appearances: {
-    validation: appearances.TextInput.validation,
-    hover: appearances.TextInput.hover,
-    focus: appearances.TextInput.focus,
-    inactive: appearances.TextInput.inactive
+    validation: '{appearances.TextInput.validation}',
+    hover: '{appearances.TextInput.hover}',
+    focus: '{appearances.TextInput.focus}',
+    inactive: '{appearances.TextInput.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,
+    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}',
 
-    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}',
 
-    // TODO: replace this with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
 
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent
+    icon: '{system.icon.none}',
+    iconSize: '{palette.fontSize.size24}',
+    iconColor: '{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,
-        icon: successIcon,
-        iconColor: palette.color.greenAccessible
+        borderColor: '{palette.color.greenAccessible}',
+        icon: '{palette.icon.NotificationSuccess}',
+        iconColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { validation: 'error' },
       tokens: {
-        borderColor: palette.color.red,
-        icon: errorIcon,
-        iconColor: palette.color.red
+        borderColor: '{palette.color.red}',
+        icon: '{palette.icon.NotificationError}',
+        iconColor: '{palette.color.red}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        borderColor: palette.color.purpleDeluge,
-        borderWidth: palette.border.border3,
-        icon: system.icon.none
+        borderColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{palette.border.border3}',
+        icon: '{system.icon.none}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        borderColor: palette.color.greyAthens
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyAthens}'
       }
     }
   ]

package/src/components/ToggleSwitch.js

@@ -1,117 +1,110 @@
-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 checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
-
-export default {
+module.exports = {
   appearances: {
-    focus: appearances.ToggleSwitch.focus,
-    hover: appearances.ToggleSwitch.hover,
-    pressed: appearances.ToggleSwitch.pressed,
-    inactive: appearances.ToggleSwitch.inactive,
-    selected: appearances.ToggleSwitch.selected
+    focus: '{appearances.ToggleSwitch.focus}',
+    hover: '{appearances.ToggleSwitch.hover}',
+    pressed: '{appearances.ToggleSwitch.pressed}',
+    inactive: '{appearances.ToggleSwitch.inactive}',
+    selected: '{appearances.ToggleSwitch.selected}'
   },
   tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.none,
-    borderRadius: palette.radius.pill32,
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.none,
-    outerBorderGap: palette.size.size0,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent,
-    backgroundColor: palette.color.greyShuttle,
-    opacity: system.opacity.opaque,
-    paddingLeft: system.size.zero,
-    paddingRight: system.size.zero,
-    paddingTop: system.size.zero,
-    paddingBottom: system.size.zero,
-    shadow: palette.shadow.surfaceInset,
-    alignSelf: 'flex-start',
+    borderColor: '{palette.color.transparent}',
+    borderWidth: '{palette.border.none}',
+    borderRadius: '{palette.radius.pill32}',
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.none}',
+    outerBorderGap: '{palette.size.size0}',
+    outerBackgroundColor: '{palette.color.transparent}',
+    backgroundColor: '{palette.color.greyShuttle}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{system.size.zero}',
+    paddingRight: '{system.size.zero}',
+    paddingTop: '{system.size.zero}',
+    paddingBottom: '{system.size.zero}',
+    shadow: '{palette.shadow.surfaceInset}',
+    alignSelf: '{system.flexAlign.flexStart}',
 
-    icon: system.icon.none,
-    width: palette.size.size40,
-    trackBorderWidth: palette.border.border3,
-    trackBorderColor: palette.color.transparent,
-    trackBorderRadius: palette.radius.pill32,
-    iconSize: palette.size.size12,
-    iconColor: palette.color.greyShuttle,
-    switchSize: palette.size.size16,
-    switchColor: palette.color.white,
-    switchBorderColor: palette.color.transparent,
-    switchBorderWidth: palette.border.none,
-    switchBorderRadius: palette.radius.pill32,
-    switchShadow: palette.shadow.surfaceRaised
+    icon: '{system.icon.none}',
+    width: '{palette.size.size40}',
+    trackBorderWidth: '{palette.border.border3}',
+    trackBorderColor: '{palette.color.transparent}',
+    trackBorderRadius: '{palette.radius.pill32}',
+    iconSize: '{palette.size.size12}',
+    iconColor: '{palette.color.greyShuttle}',
+    switchSize: '{palette.size.size16}',
+    switchColor: '{palette.color.white}',
+    switchBorderColor: '{palette.color.transparent}',
+    switchBorderWidth: '{palette.border.none}',
+    switchBorderRadius: '{palette.radius.pill32}',
+    switchShadow: '{palette.shadow.surfaceRaised}'
   },
   rules: [
     {
       if: { hover: true },
       tokens: {
-        backgroundColor: palette.color.greyCharcoal
+        backgroundColor: '{palette.color.greyCharcoal}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        backgroundColor: palette.color.greyThunder
+        backgroundColor: '{palette.color.greyThunder}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        outerBackgroundColor: palette.color.white,
-        outerBorderGap: palette.border.border3,
-        outerBorderWidth: palette.border.border2,
-        outerBorderColor: palette.color.greyShuttle
+        outerBackgroundColor: '{palette.color.white}',
+        outerBorderGap: '{palette.border.border3}',
+        outerBorderWidth: '{palette.border.border2}',
+        outerBorderColor: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { focus: true, pressed: true },
       tokens: {
-        outerBorderColor: palette.color.greyThunder
+        outerBorderColor: '{palette.color.greyThunder}'
       }
     },
     {
       if: { selected: true },
       tokens: {
-        icon: checkmarkIcon,
-        backgroundColor: palette.color.greenAccessible,
-        iconColor: palette.color.greenAccessible
+        icon: '{palette.icon.Checkmark}',
+        backgroundColor: '{palette.color.greenAccessible}',
+        iconColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { selected: true, hover: true },
       tokens: {
-        backgroundColor: palette.color.greenSanFelix,
-        iconColor: palette.color.greenSanFelix
+        backgroundColor: '{palette.color.greenSanFelix}',
+        iconColor: '{palette.color.greenSanFelix}'
       }
     },
     {
       if: { selected: true, pressed: true },
       tokens: {
-        backgroundColor: palette.color.greenDarkFern,
-        iconColor: palette.color.greenDarkFern
+        backgroundColor: '{palette.color.greenDarkFern}',
+        iconColor: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { selected: true, focus: true },
       tokens: {
-        outerBorderColor: palette.color.greenAccessible
+        outerBorderColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { selected: true, focus: true, pressed: true },
       tokens: {
-        outerBorderColor: palette.color.greenDarkFern
+        outerBorderColor: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyCloud,
-        outerBorderColor: palette.color.greyCloud,
-        iconColor: palette.color.greyShuttle
+        backgroundColor: '{palette.color.greyCloud}',
+        outerBorderColor: '{palette.color.greyCloud}',
+        iconColor: '{palette.color.greyShuttle}'
       }
     }
   ]

package/src/components/Tooltip.js

@@ -1,6 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {
     inverse: {
       values: [true],
@@ -8,33 +6,31 @@ export default {
     }
   },
   tokens: {
-    backgroundColor: palette.color.greyThunder,
-    paddingTop: palette.size.size8,
-    paddingBottom: palette.size.size8,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    borderRadius: palette.radius.radius8,
-    shadow: palette.shadow.elevation1,
+    backgroundColor: '{palette.color.greyThunder}',
+    paddingTop: '{palette.size.size8}',
+    paddingBottom: '{palette.size.size8}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    borderRadius: '{palette.radius.radius8}',
+    shadow: '{palette.shadow.elevation1}',
 
-    color: palette.color.white,
-    fontSize: palette.fontSize.size14,
-    lineHeight: palette.lineHeight.ratio3to2,
+    color: '{palette.color.white}',
+    fontSize: '{palette.fontSize.size14}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
 
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    arrowWidth: palette.size.size16,
-    arrowBorderRadius: palette.radius.radius1,
-    arrowOffset: palette.size.size4
+    arrowWidth: '{palette.size.size16}',
+    arrowBorderRadius: '{palette.radius.radius1}',
+    arrowOffset: '{palette.size.size4}'
   },
   rules: [
     {
       if: { inverse: true },
       tokens: {
-        backgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal
+        backgroundColor: '{palette.color.white}',
+        color: '{palette.color.greyCharcoal}'
       }
     }
   ]

package/src/components/TooltipButton.js

@@ -1,67 +1,60 @@
-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 questionIcon from '@telus-uds/palette-allium/build/rn/icons/question.icon.svg'
-
-export default {
+module.exports = {
   appearances: {
-    focus: appearances.TooltipButton.focus,
-    hover: appearances.TooltipButton.hover,
-    pressed: appearances.TooltipButton.pressed,
+    focus: '{appearances.TooltipButton.focus}',
+    hover: '{appearances.TooltipButton.hover}',
+    pressed: '{appearances.TooltipButton.pressed}',
     inverse: {
       values: [true],
       type: 'variant'
     }
   },
   tokens: {
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border1,
-    outerBorderGap: palette.size.size4,
-    outerBorderRadius: palette.radius.pill32,
-    borderRadius: palette.radius.pill32,
-    width: palette.size.size16,
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border1}',
+    outerBorderGap: '{palette.size.size4}',
+    borderRadius: '{palette.radius.pill32}',
+    width: '{palette.size.size16}',
 
-    icon: questionIcon,
-    iconScale: system.iconScale.scale1,
-    iconSize: palette.size.size16,
-    iconColor: palette.color.greyThunder
+    icon: '{palette.icon.Question}',
+    iconScale: '{system.iconScale.scale1}',
+    iconSize: '{palette.size.size16}',
+    iconColor: '{palette.color.greyThunder}'
   },
   rules: [
     {
       if: { inverse: true },
       tokens: {
-        iconColor: palette.color.white
+        iconColor: '{palette.color.white}'
       }
     },
     {
       if: { hover: true },
       tokens: {
-        iconScale: system.iconScale.scale1_25
+        iconScale: '{system.iconScale.scale1_25}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        iconColor: palette.color.greyShuttle
+        iconColor: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { inverse: true, pressed: true },
       tokens: {
-        iconColor: palette.color.greyCloud
+        iconColor: '{palette.color.greyCloud}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        outerBorderColor: palette.color.greyShuttle
+        outerBorderColor: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { inverse: true, focus: true },
       tokens: {
-        outerBorderColor: palette.color.greyCloud
+        outerBorderColor: '{palette.color.greyCloud}'
       }
     }
   ]