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

package/src/components/ActivityIndicator.js

@@ -1,25 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    size: {
-      values: ['large'],
-      description: 'used for full-screen spinners',
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: palette.size.size20,
-    thickness: palette.border.border2,
-    color: palette.color.greenAccessible
-  },
-  rules: [
-    {
-      if: { size: 'large' },
-      tokens: {
-        thickness: palette.border.border4,
-        size: palette.size.size40
-      }
-    }
-  ]
-}

package/src/components/Box.js

@@ -1,41 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const Box = {
-  appearances: {
-    background: {
-      description: 'Background colour of box. Transparent if not specified.',
-      values: [
-        'light',
-        'lightest',
-        'dark',
-        'darkest',
-        'critical',
-        'danger',
-        'warning',
-        'positive',
-        'brand'
-      ]
-    }
-  },
-  tokens: {
-    backgroundColor: null
-  },
-  rules: [
-    { if: { background: 'lightest' }, tokens: { backgroundColor: palette.color.white } },
-    { if: { background: 'light' }, tokens: { backgroundColor: palette.color.greyAthens } },
-    { if: { background: 'dark' }, tokens: { backgroundColor: palette.color.greyCharcoal } },
-    { if: { background: 'darkest' }, tokens: { backgroundColor: palette.color.greyThunder } },
-    { if: { background: 'critical' }, tokens: { backgroundColor: palette.color.redDark } },
-    { if: { background: 'danger' }, tokens: { backgroundColor: palette.color.redLight } },
-    { if: { background: 'warning' }, tokens: { backgroundColor: palette.color.amberLight } },
-    { if: { background: 'positive' }, tokens: { backgroundColor: palette.color.greenPanache } },
-    { if: { background: 'brand' }, tokens: { backgroundColor: palette.color.purpleTelus } }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Box, getBoxSchema(palette), 'box')
-
-export default Box

package/src/components/Button.js

@@ -1,219 +0,0 @@
-import { getButtonSchema, validateComponentTheme, buttonAppearances } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-allium'
-
-const Button = {
-  appearances: {
-    priority: {
-      description:
-        'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to proritize meaningful user flows. Low priority styles are applied by default.',
-      values: ['high'],
-      type: 'variant'
-    },
-    danger: {
-      description:
-        'Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.',
-      values: [true],
-      type: 'variant'
-    },
-    inverse: {
-      description:
-        'Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.',
-      values: [true],
-      type: 'variant'
-    },
-    size: {
-      values: ['small'],
-      type: 'variant'
-    },
-    width: {
-      description:
-        'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
-      values: ['full'],
-      type: 'variant'
-    },
-    component: buttonAppearances.component,
-    hover: buttonAppearances.hover,
-    focus: buttonAppearances.focus,
-    pressed: buttonAppearances.pressed,
-    inactive: {
-      ...buttonAppearances.inactive,
-      description:
-        // Based on https://tds.telus.com/components/index.html#/Forms
-        'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.'
-    }
-  },
-  tokens: {
-    borderColor: palette.color.greenAccessible,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    shadow: null,
-
-    fontSize: palette.fontSize.size16,
-    color: palette.color.greenAccessible,
-    lineHeight: palette.lineHeight.ratio3to2,
-    fontName: Object.keys(palette.font)[0],
-    textAlign: 'center',
-    alignSelf: 'flex-start',
-    fontWeight: '700',
-
-    backgroundColor: palette.color.white,
-    opacity: 1,
-    paddingLeft: palette.size.size32,
-    paddingRight: palette.size.size32,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    width: null,
-
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent
-  },
-  rules: [
-    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
-
-    {
-      if: { priority: 'high' },
-      tokens: {
-        backgroundColor: palette.color.greenAccessible,
-        color: palette.color.white,
-        borderWidth: palette.border.none
-      }
-    },
-    {
-      if: { priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.color.greenSanFelix }
-    },
-
-    // pressed and focus apply the same tokens to both high and low priority
-    {
-      if: { pressed: true },
-      tokens: {
-        borderWidth: 0,
-        backgroundColor: palette.color.greenDarkFern,
-        color: palette.color.white
-      }
-    },
-    { if: { focus: true }, tokens: { outerBorderColor: palette.color.greenAccessible } },
-    {
-      if: { focus: true, pressed: true },
-      tokens: { outerBorderColor: palette.color.greenDarkFern }
-    },
-
-    {
-      if: { inverse: true },
-      tokens: {
-        backgroundColor: null,
-        borderColor: palette.color.white,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inverse: true, priority: 'high' },
-      tokens: { backgroundColor: palette.color.white, color: palette.color.greyCharcoal }
-    },
-    {
-      if: { inverse: true, priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.color.light80 }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        backgroundColor: palette.color.light60
-      }
-    },
-    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: palette.color.white } },
-
-    {
-      if: { danger: true, priority: null },
-      tokens: { color: palette.color.red, borderColor: palette.color.red }
-    },
-    {
-      if: { danger: true, priority: null, inverse: true },
-      tokens: { backgroundColor: palette.color.white }
-    },
-    {
-      if: { danger: true, priority: null, focus: true },
-      tokens: { outerBorderColor: palette.color.red }
-    },
-    {
-      if: { danger: true, priority: null, pressed: true },
-      tokens: { backgroundColor: palette.color.redDark, color: palette.color.white }
-    },
-    {
-      if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: palette.color.redDark }
-    },
-
-    { if: { width: 'full' }, tokens: { width: '100%' } },
-    {
-      if: { size: 'small' },
-      tokens: { paddingTop: palette.size.size4, paddingBottom: palette.size.size4 }
-    },
-    {
-      if: { component: 'ButtonGroup' },
-      tokens: {
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size8,
-        paddingBottom: palette.size.size8,
-        color: palette.color.greyShuttle,
-        fontSize: palette.fontSize.size14,
-        borderColor: palette.color.greyCloud
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', pressed: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', focus: true },
-      tokens: {
-        borderColor: palette.color.purpleTelus,
-        borderWidth: palette.border.border3,
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.transparent
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', selected: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', focus: true, pressed: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: 0
-      }
-    },
-    {
-      if: { inactive: true, inverse: true },
-      tokens: { backgroundColor: palette.color.light60, color: palette.color.greyCharcoal }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Button, getButtonSchema(palette), 'button')
-
-export default Button

package/src/components/ButtonGroup.js

@@ -1,23 +0,0 @@
-import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
-
-const ButtonGroup = {
-  appearances: {
-    viewport: appearances.viewport
-  },
-  tokens: {
-    space: 1,
-    direction: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexGrow: 0
-  },
-  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: 3 } }]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ButtonGroup, getButtonGroupSchema(palette), 'button-group')
-
-export default ButtonGroup

package/src/components/Card.js

@@ -1,98 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
-
-export default {
-  appearances: {
-    background: {
-      values: ['alternative'],
-      type: 'variant'
-    },
-    padding: {
-      values: ['narrow', 'intermediate', 'compact', 'custom'],
-      type: 'variant'
-    },
-    viewport: appearances.viewport
-  },
-  tokens: {
-    backgroundColor: palette.color.white,
-    borderColor: palette.color.greyMystic,
-    borderRadius: palette.radius.radius6,
-    borderWidth: palette.border.border1,
-    paddingBottom: palette.size.size32,
-    paddingLeft: palette.size.size24,
-    paddingRight: palette.size.size24,
-    paddingTop: palette.size.size32,
-    shadow: null
-  },
-  rules: [
-    {
-      if: { background: 'alternative' },
-      tokens: {
-        backgroundColor: palette.color.greyAthens
-      }
-    },
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size48,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size48
-      }
-    },
-    {
-      if: { padding: 'narrow' },
-      tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size24
-      }
-    },
-    {
-      if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size32
-      }
-    },
-    {
-      if: { padding: 'intermediate' },
-      tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size24,
-        paddingRight: palette.size.size24,
-        paddingTop: palette.size.size24
-      }
-    },
-    {
-      if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size32
-      }
-    },
-    {
-      if: { padding: 'compact' },
-      tokens: {
-        paddingBottom: palette.size.size16,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size16
-      }
-    },
-    {
-      if: { padding: 'custom' },
-      tokens: {
-        paddingBottom: palette.size.size0,
-        paddingLeft: palette.size.size0,
-        paddingRight: palette.size.size0,
-        paddingTop: palette.size.size0
-      }
-    }
-  ]
-}

package/src/components/ChevronLink.js

@@ -1,20 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getChevronLinkSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-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'
-
-const ChevronLink = {
-  appearances: {},
-  tokens: {
-    leftIcon: leftArrowIcon,
-    rightIcon: rightArrowIcon,
-    iconDisplace: palette.size.size4
-  }
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ChevronLink, getChevronLinkSchema(palette), 'ChevronLink')
-
-export default ChevronLink

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,18 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getExpandCollapseSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const ExpandCollapse = {
-  appearances: {},
-  tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid'
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ExpandCollapse, getExpandCollapseSchema(palette), 'expand-collapse')
-
-export default ExpandCollapse

package/src/components/ExpandCollapseControl.js

@@ -1,42 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  getExpandCollapseControlSchema,
-  validateComponentTheme,
-  expandCollapseControlAppearances
-} from '@telus-uds/tools-theme'
-
-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 ExpandCollapseControl = {
-  appearances: {
-    expanded: expandCollapseControlAppearances.expanded
-  },
-  tokens: {
-    icon: CaretDown,
-    iconColor: palette.color.greenAccessible,
-    iconSize: palette.size.size24,
-    iconGap: palette.size.size8,
-    iconPosition: 'left',
-    verticalAlign: 'top',
-    justifyContent: 'flex-start',
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    borderWidth: palette.border.border0,
-    borderColor: palette.color.transparent,
-    backgroundColor: palette.color.transparent
-  },
-  rules: [{ if: { expanded: true }, tokens: { icon: CaretUp } }]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapseControl,
-  getExpandCollapseControlSchema(palette),
-  'expand-collapse-control'
-)
-
-export default ExpandCollapseControl

package/src/components/ExpandCollapsePanel.js

@@ -1,26 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getExpandCollapsePanelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const ExpandCollapsePanel = {
-  appearances: {},
-  tokens: {
-    // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    contentPaddingLeft: palette.size.size40,
-    contentPaddingRight: palette.size.size16,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size16
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapsePanel,
-  getExpandCollapsePanelSchema(palette),
-  'expand-collapse-panel'
-)
-
-export default ExpandCollapsePanel

package/src/components/Feedback.js

@@ -1,74 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-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 {
-  feedbackAppearances,
-  getFeedbackSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const Feedback = {
-  appearances: feedbackAppearances,
-  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: 2,
-
-    color: palette.color.greyThunder,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    lineHeight: palette.lineHeight.ratio3to2,
-    titleFontSize: palette.fontSize.size16,
-    contentFontSize: palette.fontSize.size14,
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent,
-    iconGap: palette.size.size8
-  },
-  rules: [
-    {
-      if: { state: 'success' },
-      tokens: {
-        backgroundColor: palette.color.greenPanache,
-        borderColor: palette.color.greenPanache,
-        color: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { state: 'error' },
-      tokens: {
-        backgroundColor: palette.color.redLight,
-        borderColor: palette.color.redLight,
-        color: palette.color.red
-      }
-    },
-    {
-      if: { state: 'success', icon: true },
-      tokens: {
-        icon: successIcon,
-        iconColor: palette.color.greenAccessible
-      }
-    },
-    {
-      if: { state: 'error', icon: true },
-      tokens: {
-        icon: errorIcon,
-        iconColor: palette.color.red
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Feedback, getFeedbackSchema(palette))
-
-export default Feedback

package/src/components/Icon.js

@@ -1,32 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    size: {
-      values: ['small'],
-      type: 'variant'
-    },
-    rank: {
-      values: ['primary'],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: 24,
-    color: palette.color.greyCharcoal
-  },
-  rules: [
-    {
-      if: { size: 'small' },
-      tokens: {
-        size: 20
-      }
-    },
-    {
-      if: { rank: 'primary' },
-      tokens: {
-        color: palette.color.purpleTelus
-      }
-    }
-  ]
-}

package/src/components/InputLabel.js

@@ -1,28 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getInputLabelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const InputLabel = {
-  appearances: {},
-  tokens: {
-    gap: palette.size.size8,
-
-    color: palette.color.greyCharcoal,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-
-    hintColor: palette.color.greyCharcoal,
-    hintFontName: Object.keys(palette.font)[0],
-    hintFontWeight: '400',
-    hintFontSize: palette.fontSize.size14,
-    hintLineHeight: palette.lineHeight.ratio7to5
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(InputLabel, getInputLabelSchema(palette), 'input-label')
-
-export default InputLabel