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

package/src/components/Select.js

@@ -0,0 +1,88 @@
+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
+  },
+  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,
+
+    outerBackgroundColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderColor: palette.color.transparent,
+    outerBorderRadius: palette.radius.radius4,
+
+    fontSize: palette.fontSize.size16,
+    // TODO replace with font token
+    fontName: Object.keys(palette.font)[0],
+    fontWeight: '400',
+
+    icon: caretDownIcon,
+    iconSize: palette.fontSize.size24,
+    iconColor: palette.color.greenAccessible,
+
+    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
+      }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        borderColor: palette.color.greenAccessible,
+        validationIcon: successIcon,
+        validationIconColor: palette.color.greenAccessible
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        borderColor: palette.color.red,
+        validationIcon: errorIcon,
+        validationIconColor: palette.color.red
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: palette.color.purpleDeluge,
+        borderWidth: palette.border.border3,
+        validationIcon: system.icon.none
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: palette.color.greyAthens,
+        borderColor: palette.color.greyAthens
+      }
+    }
+  ]
+}
+
+export default Select

package/src/components/SideNav.js

@@ -1,18 +1,12 @@
 import palette from '@telus-uds/palette-allium'
-import { getSideNavSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
-const SideNav = {
+export default {
   appearances: {},
   tokens: {
     borderColor: palette.color.greyCloud,
     borderWidth: palette.border.border1,
-    borderStyle: 'solid'
+    borderStyle: system.borderStyle.solid
   },
   rules: []
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNav, getSideNavSchema(palette), 'side-nav')
-
-export default SideNav

package/src/components/SideNavItem.js

@@ -1,30 +1,32 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  getSideNavItemSchema,
-  sideNavItemAppearances,
-  linkAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const SideNavItem = {
+export default {
   appearances: {
-    ...sideNavItemAppearances,
-    hover: linkAppearances.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: 'solid',
+    borderStyle: system.borderStyle.solid,
     paddingLeft: palette.size.size16,
     paddingRight: palette.size.size16,
     paddingTop: palette.size.size16,
     paddingBottom: palette.size.size16,
-    justifyContent: 'space-between',
+    justifyContent: system.flexJustifyContent.spaceBetween,
     color: palette.color.greyCharcoal,
-    accentOffset: 0,
-    accentPadding: 0,
+    accentOffset: system.size.zero,
+    accentPadding: system.size.zero,
     accentWidth: palette.size.size4,
-    accentBackgroundColor: palette.color.transparent
+    accentBackgroundColor: palette.color.transparent,
+    fontSize: palette.fontSize.size16,
+    fontWeight: '400',
+    lineHeight: palette.lineHeight.ratio3to2,
+    backgroundColor: palette.color.transparent
   },
   rules: [
     {
@@ -35,7 +37,10 @@ const SideNavItem = {
         paddingLeft: palette.size.size12,
         accentBackgroundColor: palette.color.purpleTelus,
         color: palette.color.purpleTelus,
+
+        // TODO: replace with font token
         fontWeight: '700'
+        // font: palette.font.HelveticaNow[700]
       }
     },
     {
@@ -48,7 +53,7 @@ const SideNavItem = {
         accentBackgroundColor: palette.color.greyAthens,
         accentOffset: palette.size.size16,
         fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.multiply140
+        lineHeight: palette.lineHeight.ratio7to5
       }
     },
     {
@@ -102,15 +107,9 @@ const SideNavItem = {
       tokens: {
         accentBackgroundColor: palette.color.white,
         color: palette.color.greyCharcoal,
-        accentOffset: 0,
+        accentOffset: system.size.zero,
         accentWidth: palette.size.size16
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNavItem, getSideNavItemSchema(palette), 'side-nav-item')
-
-export default SideNavItem

package/src/components/SideNavItemsGroup.js

@@ -1,15 +1,18 @@
 import palette from '@telus-uds/palette-allium'
-import { getSideNavItemsGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+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'
 
-const SideNavItemsGroup = {
-  appearances: {},
+export default {
+  appearances: {
+    expanded: appearances.SideNavItemGroup.expanded
+  },
   tokens: {
     // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
+    expandDuration: palette.duration.duration300,
+    collapseDuration: palette.duration.duration250,
     contentPaddingLeft: palette.size.size0,
     contentPaddingRight: palette.size.size0,
     contentPaddingTop: palette.size.size0,
@@ -18,9 +21,9 @@ const SideNavItemsGroup = {
     iconColor: palette.color.purpleTelus,
     iconGap: palette.size.size8,
     iconSize: palette.size.size24,
-    iconPosition: 'right',
-    verticalAlign: 'middle',
-    justifyContent: 'space-between'
+    iconPosition: system.position.right,
+    verticalAlign: system.verticalAlign.middle,
+    justifyContent: system.flexJustifyContent.spaceBetween
   },
   rules: [
     {
@@ -29,13 +32,3 @@ const SideNavItemsGroup = {
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  SideNavItemsGroup,
-  getSideNavItemsGroupSchema(palette),
-  'side-nav-items-group'
-)
-
-export default SideNavItemsGroup

package/src/components/Skeleton.js

@@ -0,0 +1,16 @@
+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
+  },
+  rules: []
+}
+export default Skeleton

package/src/components/StackView.js

@@ -0,0 +1,12 @@
+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 {
+  appearances: {},
+  tokens: {
+    alignItems: system.flexAlign.stretch,
+    justifyContent: system.flexJustifyContent.flexStart,
+    flexGrow: system.integer[0]
+  },
+  rules: []
+}

package/src/components/Tags.js

@@ -0,0 +1,16 @@
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
+
+export default {
+  appearances: {
+    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]
+  },
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: system.integer[3] } }]
+}

package/src/components/TagsItem.js

@@ -0,0 +1,118 @@
+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 {
+  appearances: {
+    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],
+
+    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,
+
+    // Button tokens, very similar to ButtonGroup
+    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'],
+
+    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
+  },
+  rules: [
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: palette.color.purpleTelus,
+        borderWidth: palette.border.border3,
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.transparent
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
+    {
+      if: { selected: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white,
+
+        icon: closeIcon,
+        iconColor: palette.color.white,
+        iconBackground: palette.color.purpleDeluge
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.greyShuttle,
+        color: palette.color.white,
+
+        iconColor: palette.color.white,
+        iconBackground: palette.color.greyCharcoal
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white,
+
+        iconColor: palette.color.white,
+        iconBackground: palette.color.purpleDark
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: palette.color.greyCloud,
+        color: palette.color.white,
+        borderWidth: system.border.zero
+      }
+    }
+  ]
+}

package/src/components/TextArea.js

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

package/src/components/TextInput.js

@@ -0,0 +1,83 @@
+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 {
+  appearances: {
+    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,
+
+    outerBackgroundColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderColor: palette.color.transparent,
+    outerBorderRadius: palette.radius.radius4,
+
+    // TODO: replace this with font token
+    fontName: Object.keys(palette.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
+    fontSize: palette.fontSize.size16,
+    lineHeight: palette.lineHeight.ratio3to2,
+
+    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
+      }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        borderColor: palette.color.greenAccessible,
+        icon: successIcon,
+        iconColor: palette.color.greenAccessible
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        borderColor: palette.color.red,
+        icon: errorIcon,
+        iconColor: palette.color.red
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: palette.color.purpleDeluge,
+        borderWidth: palette.border.border3,
+        icon: system.icon.none
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: palette.color.greyAthens,
+        borderColor: palette.color.greyAthens
+      }
+    }
+  ]
+}

package/src/components/ToggleSwitch.js

@@ -1,18 +1,16 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  toggleSwitchAppearances,
-  getToggleSwitchSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+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'
 
-const ToggleSwitch = {
+export default {
   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: {
     borderColor: palette.color.transparent,
@@ -24,14 +22,15 @@ const ToggleSwitch = {
     outerBorderRadius: palette.radius.pill32,
     outerBackgroundColor: palette.color.transparent,
     backgroundColor: palette.color.greyShuttle,
-    opacity: 1,
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
+    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',
 
-    icon: null,
+    icon: system.icon.none,
     width: palette.size.size40,
     trackBorderWidth: palette.border.border3,
     trackBorderColor: palette.color.transparent,
@@ -117,9 +116,3 @@ const ToggleSwitch = {
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ToggleSwitch, getToggleSwitchSchema(palette), 'ToggleSwitch')
-
-export default ToggleSwitch

package/src/components/Tooltip.js

@@ -0,0 +1,41 @@
+import palette from '@telus-uds/palette-allium'
+
+export default {
+  appearances: {
+    inverse: {
+      values: [true],
+      type: 'variant'
+    }
+  },
+  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,
+
+    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]
+
+    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
+      }
+    }
+  ]
+}

package/src/components/TooltipButton.js

@@ -0,0 +1,68 @@
+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 {
+  appearances: {
+    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,
+
+    icon: questionIcon,
+    iconScale: system.iconScale.scale1,
+    iconSize: palette.size.size16,
+    iconColor: palette.color.greyThunder
+  },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        iconColor: palette.color.white
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        iconScale: system.iconScale.scale1_25
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        iconColor: palette.color.greyShuttle
+      }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        iconColor: palette.color.greyCloud
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: palette.color.greyShuttle
+      }
+    },
+    {
+      if: { inverse: true, focus: true },
+      tokens: {
+        outerBorderColor: palette.color.greyCloud
+      }
+    }
+  ]
+}