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

package/src/components/PaginationSideButton.js

@@ -1,99 +0,0 @@
-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 leftArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-left.icon.svg'
-import rightArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-right.icon.svg'
-
-export default {
-  appearances: {
-    viewport: appearances.system.viewport,
-    focus: appearances.PaginationSideButton.focus,
-    hover: appearances.PaginationSideButton.hover,
-    pressed: appearances.PaginationSideButton.pressed,
-    selected: appearances.PaginationSideButton.selected,
-    direction: appearances.PaginationSideButton.direction
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    outerBorderColor: palette.color.transparent,
-
-    color: palette.color.greyShuttle,
-
-    // TODO replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: system.textLine.underline,
-
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconDisplace: palette.size.size0,
-
-    width: system.size.none,
-    textAlign: system.flexJustifyContent.center
-  },
-  rules: [
-    {
-      if: { viewport: ['xs', 'sm'] },
-      tokens: {
-        borderRadius: palette.radius.pill32,
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        width: palette.size.size32
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: system.textLine.none,
-        iconDisplace: palette.size.size4
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        borderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white,
-        textLine: system.textLine.none
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { direction: 'previous' },
-      tokens: {
-        icon: leftArrowIcon
-      }
-    },
-    {
-      if: { direction: 'next' },
-      tokens: {
-        icon: rightArrowIcon
-      }
-    }
-  ]
-}

package/src/components/Radio.js

@@ -1,64 +0,0 @@
-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 {
-  appearances: {
-    checked: appearances.Radio.checked,
-    error: appearances.Radio.error,
-    focus: appearances.Radio.focus,
-    hover: appearances.Radio.hover,
-    inactive: appearances.Radio.inactive
-  },
-  tokens: {
-    checkedBackgroundColor: palette.color.purpleDeluge,
-    checkedSize: palette.size.size12,
-    containerBackgroundColor: palette.color.transparent,
-    containerBorderRadius: palette.radius.none,
-    containerMarginBottom: palette.size.size8,
-    containerOpacity: system.opacity.opaque,
-    containerPaddingBottom: palette.size.size0,
-    containerPaddingLeft: palette.size.size0,
-    containerPaddingRight: palette.size.size0,
-    containerPaddingTop: palette.size.size0,
-    containerShadow: system.shadow.none,
-    descriptionFontSize: palette.fontSize.size14,
-    descriptionLineHeight: palette.lineHeight.ratio10to7,
-    descriptionMarginLeft: system.size.none,
-    inputBackgroundColor: palette.color.white,
-    inputBorderColor: palette.color.greyShuttle,
-    inputBorderWidth: palette.border.border1,
-    inputOutlineColor: palette.color.transparent,
-    inputOutlineWidth: palette.border.none,
-    inputSize: palette.size.size20,
-    labelColor: palette.color.greyCharcoal,
-    labelFontName: Object.keys(palette.font)[0],
-    labelFontSize: palette.fontSize.size16,
-    labelFontWeight: '400',
-    labelLineHeight: palette.lineHeight.ratio3to2,
-    labelMarginLeft: palette.size.size10
-  },
-  rules: [
-    {
-      if: { error: true },
-      tokens: {
-        inputBorderColor: palette.color.red
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        inputBorderColor: palette.color.purpleDeluge,
-        inputBorderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        inputBorderColor: palette.color.transparent,
-        inputBackgroundColor: palette.color.greyMystic,
-        labelColor: palette.color.greyShuttle
-      }
-    }
-  ]
-}

package/src/components/Select.js

@@ -1,88 +0,0 @@
-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,12 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
-  appearances: {},
-  tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: system.borderStyle.solid
-  },
-  rules: []
-}

package/src/components/SideNavItem.js

@@ -1,115 +0,0 @@
-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 {
-  appearances: {
-    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
-  },
-  rules: [
-    {
-      if: {
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size12,
-        accentBackgroundColor: palette.color.purpleTelus,
-        color: palette.color.purpleTelus,
-
-        // TODO: replace with font token
-        fontWeight: '700'
-        // font: palette.font.HelveticaNow[700]
-      }
-    },
-    {
-      if: {
-        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
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size12
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true,
-        expanded: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size16,
-        accentBackgroundColor: palette.color.transparent,
-        color: palette.color.greyCharcoal
-      }
-    },
-    {
-      if: {
-        hover: true
-      },
-      tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: true
-      },
-      tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus,
-        accentPadding: palette.size.size16,
-        accentBackgroundColor: palette.color.purpleTelus
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: false,
-        hover: true
-      },
-      tokens: {
-        accentBackgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal,
-        accentOffset: system.size.zero,
-        accentWidth: palette.size.size16
-      }
-    }
-  ]
-}

package/src/components/SideNavItemsGroup.js

@@ -1,34 +0,0 @@
-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 {
-  appearances: {
-    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
-  },
-  rules: [
-    {
-      if: { expanded: true },
-      tokens: { icon: CaretUp }
-    }
-  ]
-}

package/src/components/Skeleton.js

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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
-      }
-    }
-  ]
-}