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

package/src/components/ChevronLink.js

@@ -1,19 +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: {
-    hover: appearances.ChevronLink.hover
-  },
-  tokens: {
-    leftIcon: leftArrowIcon,
-    rightIcon: rightArrowIcon,
-    iconDisplace: palette.size.size0,
-    iconSpace: system.integer[0]
-  },
-  rules: [{ if: { hover: true }, tokens: { iconDisplace: palette.size.size4 } }]
-}

package/src/components/Divider.js

@@ -1,34 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    weight: {
-      values: ['thick'],
-      type: 'variant'
-    },
-    decorative: {
-      description:
-        'Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.',
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    width: palette.border.border1,
-    color: palette.color.greyShuttle
-  },
-  rules: [
-    {
-      if: { weight: 'thick' },
-      tokens: {
-        width: palette.border.border2
-      }
-    },
-    {
-      if: { decorative: true },
-      tokens: {
-        color: palette.color.greyCloud
-      }
-    }
-  ]
-}

package/src/components/ExpandCollapse.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/ExpandCollapseControl.js

@@ -1,29 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-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'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
-  appearances: {
-    expanded: appearances.ExpandCollapseControl.expanded
-  },
-  tokens: {
-    icon: CaretDown,
-    iconColor: palette.color.greenAccessible,
-    iconSize: palette.size.size24,
-    iconGap: palette.size.size8,
-    iconPosition: system.position.left,
-    verticalAlign: system.verticalAlign.top,
-    justifyContent: system.flexJustifyContent.flexStart,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    borderWidth: system.border.zero,
-    borderColor: palette.color.transparent,
-    backgroundColor: palette.color.transparent
-  },
-  rules: [{ if: { expanded: true }, tokens: { icon: CaretUp } }]
-}

package/src/components/ExpandCollapsePanel.js

@@ -1,15 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {},
-  tokens: {
-    // animate slightly faster when closing
-    expandDuration: palette.duration.duration300,
-    collapseDuration: palette.duration.duration250,
-    contentPaddingLeft: palette.size.size40,
-    contentPaddingRight: palette.size.size16,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size16
-  },
-  rules: []
-}

package/src/components/Feedback.js

@@ -1,75 +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.Feedback.validation,
-    icon: {
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    backgroundColor: palette.color.greyAthens,
-    borderColor: palette.color.greyMystic,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    space: system.integer[2],
-
-    color: palette.color.greyThunder,
-
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-
-    lineHeight: palette.lineHeight.ratio3to2,
-    titleFontSize: palette.fontSize.size16,
-    contentFontSize: palette.fontSize.size14,
-
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent,
-    iconGap: palette.size.size8
-  },
-  rules: [
-    {
-      if: { validation: 'success' },
-      tokens: {
-        backgroundColor: palette.color.greenPanache,
-        borderColor: palette.color.greenPanache,
-        color: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { validation: 'error' },
-      tokens: {
-        backgroundColor: palette.color.redLight,
-        borderColor: palette.color.redLight,
-        color: palette.color.red
-      }
-    },
-    {
-      if: { validation: 'success', icon: true },
-      tokens: {
-        icon: successIcon,
-        iconColor: palette.color.greenAccessible
-      }
-    },
-    {
-      if: { validation: 'error', icon: true },
-      tokens: {
-        icon: errorIcon,
-        iconColor: palette.color.red
-      }
-    }
-  ]
-}

package/src/components/Icon.js

@@ -1,35 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
-  appearances: {
-    size: {
-      values: ['small'],
-      type: 'variant'
-    },
-    rank: {
-      values: ['primary'],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: palette.size.size24,
-    color: palette.color.greyCharcoal,
-    translateX: system.size.zero,
-    translateY: system.size.zero
-  },
-  rules: [
-    {
-      if: { size: 'small' },
-      tokens: {
-        size: palette.size.size20
-      }
-    },
-    {
-      if: { rank: 'primary' },
-      tokens: {
-        color: palette.color.purpleTelus
-      }
-    }
-  ]
-}

package/src/components/InputLabel.js

@@ -1,29 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {},
-  tokens: {
-    gap: palette.size.size8,
-
-    color: palette.color.greyCharcoal,
-
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow[700]
-
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-
-    hintColor: palette.color.greyCharcoal,
-
-    // TODO: replace with font token
-    hintFontName: Object.keys(palette.font)[0],
-    hintFontWeight: '400',
-    // hintFont: palette.font.HelveticaNow[700],
-
-    hintFontSize: palette.fontSize.size14,
-    hintLineHeight: palette.lineHeight.ratio7to5
-  },
-  rules: []
-}

package/src/components/InputSupports.js

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

package/src/components/Link.js

@@ -1,211 +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: {
-    size: {
-      description:
-        'Text sizes for block links; similar but not always identical to Typography sizes.',
-      values: ['large', 'small', 'micro'],
-      type: 'variant'
-    },
-    alternative: {
-      description: 'Replaces the default green colour with a more subtle grey.',
-      values: [true],
-      type: 'variant'
-    },
-    inverse: {
-      description: 'Styles the link white for use on dark backgrounds.',
-      values: [true],
-      type: 'variant'
-    },
-    light: {
-      description:
-        'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
-      values: [true],
-      type: 'variant'
-    },
-    iconPosition: appearances.Link.iconPosition,
-    focus: appearances.Link.focus,
-    hover: appearances.Link.hover,
-    pressed: appearances.Link.pressed
-  },
-  tokens: {
-    color: palette.color.greenAccessible,
-
-    textLine: system.textLine.underline,
-    textLineStyle: system.textLineStyle.solid,
-
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.radius4,
-    outerBorderOutline: system.borderStyle.none,
-
-    // Same as default size Typography
-    // TODO replace with single font token
-    blockFontWeight: '400',
-    blockFontName: Object.keys(palette.font)[0],
-    // bockFont: palette.font.HelveticaNow[400]
-
-    blockFontSize: palette.fontSize.size16,
-    blockLineHeight: palette.lineHeight.ratio3to2,
-    alignSelf: system.flexAlign.flexStart,
-
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconSpace: system.integer[1],
-    iconTranslateX: system.size.zero,
-    iconTranslateY: system.size.zero
-  },
-  rules: [
-    {
-      if: { iconPosition: 'left' },
-      tokens: {
-        iconSpace: system.integer[2]
-      }
-    },
-    // Initial interaction states
-    {
-      if: { focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greenAccessible,
-        outerBorderOutline: system.borderStyle.none
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        textLine: system.textLine.none,
-        color: palette.color.greenSanFelix
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        textLine: system.textLine.none,
-        color: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { pressed: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greenDarkFern
-      }
-    },
-
-    // block link sizes
-    {
-      if: { size: 'large' },
-      tokens: {
-        blockFontSize: palette.fontSize.size20,
-        iconSize: palette.fontSize.size24,
-        blockLineHeight: palette.lineHeight.ratio8to5
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        blockFontSize: palette.fontSize.size14,
-        iconSize: palette.fontSize.size20,
-        blockLineHeight: palette.lineHeight.ratio10to7
-      }
-    },
-    {
-      if: { size: 'micro' },
-      tokens: {
-        blockFontSize: palette.fontSize.size12,
-        // TODO replace this with font token
-        blockFontWeight: '500',
-        // blockFont: palette.font.HelveticaNow[500]
-
-        iconSize: palette.fontSize.size16,
-        blockLineHeight: palette.lineHeight.ratio4to3
-      }
-    },
-
-    // "alternative" variant
-    {
-      if: { alternative: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-    {
-      if: { alternative: true, focus: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.greyCharcoal
-      }
-    },
-    {
-      if: { alternative: true, hover: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-    {
-      if: { alternative: true, pressed: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-
-    // "inverse" variant
-    {
-      if: { inverse: true },
-      tokens: {
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inverse: true, hover: true },
-      tokens: {
-        color: palette.color.greyAthens
-      }
-    },
-    {
-      if: { inverse: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.white,
-        outerBorderOutline: system.borderStyle.none
-      }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        color: palette.color.greyMystic
-      }
-    },
-    {
-      if: { inverse: true, pressed: true, focus: true },
-      tokens: {
-        color: palette.color.greyMystic,
-        outerBorderColor: palette.color.greyMystic
-      }
-    },
-
-    // "light" variant
-    {
-      if: { light: true },
-      tokens: {
-        color: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { light: true, focus: true },
-      tokens: {
-        color: palette.color.greyShuttle,
-        outerBorderColor: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { light: true, hover: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        textLine: system.textLine.none
-      }
-    }
-  ]
-}

package/src/components/List.js

@@ -1,70 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    size: {
-      description: 'Indicates list item text size.',
-      values: ['large', 'small'],
-      type: 'variant'
-    },
-    compact: {
-      description: 'When true it will reduce the line height of the list item.',
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    itemFontWeight: '400',
-    itemFontSize: palette.fontSize.size16,
-    itemLineHeight: palette.lineHeight.ratio3to2,
-    itemFontName: Object.keys(palette.font)[0],
-    interItemMargin: palette.size.size8,
-    interItemMarginWithDivider: palette.size.size16,
-    dividerColor: palette.color.greyCloud,
-    dividerSize: palette.border.border1,
-    itemBulletContainerWidth: palette.size.size16,
-    itemBulletContainerAlign: 'center',
-    itemBulletWidth: palette.size.size4,
-    itemBulletHeight: palette.size.size4,
-    itemBulletColor: palette.color.purpleTelus,
-    itemIconSize: palette.size.size16,
-    itemIconColor: palette.color.purpleTelus,
-    listGutter: palette.size.size12
-  },
-  rules: [
-    {
-      if: { size: 'large' },
-      tokens: {
-        itemFontSize: palette.fontSize.size20,
-        itemLineHeight: palette.lineHeight.ratio8to5,
-        listGutter: palette.size.size12
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        itemFontSize: palette.fontSize.size14,
-        itemLineHeight: palette.lineHeight.ratio10to7,
-        listGutter: palette.size.size12
-      }
-    },
-    {
-      if: { compact: true },
-      tokens: {
-        itemLineHeight: palette.lineHeight.ratio5to4
-      }
-    },
-    {
-      if: { compact: true, size: 'small' },
-      tokens: {
-        itemLineHeight: palette.lineHeight.ratio8to7
-      }
-    },
-    {
-      if: { compact: true, size: 'large' },
-      tokens: {
-        itemLineHeight: palette.lineHeight.ratio6to5
-      }
-    }
-  ]
-}

package/src/components/Pagination.js

@@ -1,30 +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: {
-    viewport: appearances.system.viewport
-  },
-  tokens: {
-    gap: system.integer[2],
-    truncateAbove: system.integer[4],
-
-    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
-  },
-  rules: [
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        truncateAbove: system.integer[6]
-      }
-    }
-  ]
-}

package/src/components/PaginationPageButton.js

@@ -1,71 +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: {
-    focus: appearances.PaginationPageButton.focus,
-    hover: appearances.PaginationPageButton.hover,
-    pressed: appearances.PaginationPageButton.pressed,
-    selected: appearances.PaginationPageButton.selected
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size4,
-    paddingBottom: palette.size.size4,
-    width: palette.size.size32,
-
-    // never visible - used only to increase the click area size
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border4,
-    outerBorderGap: palette.border.border4,
-
-    color: palette.color.greyShuttle,
-
-    // 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,
-    textLine: system.textLine.underline,
-    textAlign: system.flexJustifyContent.center
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: system.textLine.none
-      }
-    },
-    {
-      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
-      }
-    }
-  ]
-}