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

package/src/components/ActivityIndicator.js

@@ -1,23 +0,0 @@
-module.exports = {
-  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,32 +0,0 @@
-module.exports = {
-  appearances: {
-    background: {
-      description: 'Background colour of box. Transparent if not specified.',
-      values: [
-        'light',
-        'lightest',
-        'dark',
-        'darkest',
-        'critical',
-        'danger',
-        'warning',
-        'positive',
-        'brand'
-      ]
-    }
-  },
-  tokens: {
-    backgroundColor: '{system.color.none}'
-  },
-  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}' } }
-  ]
-}

package/src/components/Button.js

@@ -1,167 +0,0 @@
-module.exports = {
-  appearances: {
-    priority: {
-      description:
-        'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize 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'
-    },
-    hover: '{appearances.Button.hover}',
-    focus: '{appearances.Button.focus}',
-    pressed: '{appearances.Button.pressed}',
-    inactive: '{appearances.Button.inactive}'
-  },
-  tokens: {
-    borderColor: '{palette.color.greenAccessible}',
-    borderWidth: '{palette.border.border1}',
-    borderRadius: '{palette.radius.pill32}',
-    shadow: '{system.shadow.none}',
-
-    fontSize: '{palette.fontSize.size16}',
-    color: '{palette.color.greenAccessible}',
-    lineHeight: '{palette.lineHeight.ratio3to2}',
-    textAlign: '{system.flexJustifyContent.center}',
-    alignSelf: '{system.flexAlign.flexStart}',
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight700}',
-
-    backgroundColor: '{palette.color.white}',
-    opacity: '{system.opacity.opaque}',
-    paddingLeft: '{palette.size.size32}',
-    paddingRight: '{palette.size.size32}',
-    paddingTop: '{palette.size.size12}',
-    paddingBottom: '{palette.size.size12}',
-    width: '{system.size.none}',
-    minWidth: '{palette.size.size144}',
-
-    outerBorderColor: '{palette.color.transparent}',
-    outerBorderWidth: '{palette.border.border2}',
-    outerBorderGap: '{palette.border.border2}',
-    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: '{system.size.zero}',
-        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: '{system.color.none}',
-        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: '{system.size.full}' } },
-    {
-      if: { size: 'small' },
-      tokens: {
-        paddingTop: '{palette.size.size4}',
-        paddingBottom: '{palette.size.size4}',
-        minWidth: '{system.size.zero}'
-      }
-    },
-    {
-      description:
-        '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.',
-      if: {
-        inactive: true
-      },
-      tokens: {
-        backgroundColor: '{palette.color.greyCloud}',
-        color: '{palette.color.white}',
-        borderWidth: '{system.size.zero}'
-      }
-    },
-    {
-      if: { inactive: true, inverse: true },
-      tokens: { backgroundColor: '{palette.color.light60}', color: '{palette.color.greyCharcoal}' }
-    }
-  ]
-}

package/src/components/ButtonGroup.js

@@ -1,13 +0,0 @@
-module.exports = {
-  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/ButtonGroupItem.js

@@ -1,98 +0,0 @@
-module.exports = {
-  appearances: {
-    hover: '{appearances.ButtonGroupItem.hover}',
-    focus: '{appearances.ButtonGroupItem.focus}',
-    pressed: '{appearances.ButtonGroupItem.pressed}',
-    selected: '{appearances.ButtonGroupItem.selected}',
-    inactive: '{appearances.ButtonGroupItem.inactive}'
-  },
-  tokens: {
-    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.ratio3to2}',
-    textAlign: '{system.flexJustifyContent.center}',
-    alignSelf: '{system.flexAlign.flexStart}',
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight700}',
-
-    backgroundColor: '{palette.color.white}',
-    opacity: '{system.opacity.opaque}',
-    paddingLeft: '{palette.size.size16}',
-    paddingRight: '{palette.size.size16}',
-    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}',
-    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}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        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: { selected: true },
-      tokens: {
-        borderWidth: '{palette.border.none}',
-        backgroundColor: '{palette.color.purpleTelus}',
-        color: '{palette.color.white}'
-      }
-    },
-    {
-      if: { selected: true, hover: true },
-      tokens: {
-        backgroundColor: '{palette.color.purpleDeluge}'
-      }
-    },
-    {
-      if: { selected: true, pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.purpleDark}'
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderColor: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: { selected: true, focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: '{palette.color.purpleDark}'
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyCloud}',
-        color: '{palette.color.white}',
-        borderWidth: '{system.border.zero}'
-      }
-    }
-  ]
-}

package/src/components/Card.js

@@ -1,97 +0,0 @@
-module.exports = {
-  appearances: {
-    background: {
-      values: ['alternative'],
-      type: 'variant'
-    },
-    padding: {
-      values: ['narrow', 'intermediate', 'compact', 'custom'],
-      type: 'variant'
-    },
-    viewport: '{appearances.system.viewport}'
-  },
-  tokens: {
-    flex: '{system.integer.1}',
-    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}',
-    minWidth: '{system.size.none}',
-    shadow: '{system.shadow.none}'
-  },
-  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/Checkbox.js

@@ -1,59 +0,0 @@
-module.exports = {
-  appearances: {
-    checked: '{appearances.Checkbox.checked}',
-    error: '{appearances.Checkbox.error}',
-    focus: '{appearances.Checkbox.focus}',
-    hover: '{appearances.Checkbox.hover}',
-    inactive: '{appearances.Checkbox.inactive}'
-  },
-  tokens: {
-    containerBackgroundColor: '{palette.color.transparent}',
-    feedbackMarginBottom: '{system.size.zero}',
-    feedbackMarginTop: '{palette.size.size2}',
-    feedbackPosition: '{system.position.bottom}',
-    icon: '{palette.icon.Checkmark}',
-    iconBackgroundColor: '{palette.color.purpleDeluge}',
-    iconColor: '{palette.color.white}',
-    iconSize: '{palette.size.size16}',
-    inputBackgroundColor: '{palette.color.white}',
-    inputBorderColor: '{palette.color.greyShuttle}',
-    inputBorderRadius: '{palette.radius.radius4}',
-    inputBorderWidth: '{palette.border.border1}',
-    inputHeight: '{palette.size.size20}',
-    inputOutlineColor: '{system.color.none}',
-    inputOutlineWidth: '{palette.border.none}',
-    inputShadow: '{system.shadow.none}',
-    inputWidth: '{palette.size.size20}',
-    labelColor: '{palette.color.greyCharcoal}',
-    labelFontName: '{palette.fontName.HelveticaNow}',
-    labelFontSize: '{palette.fontSize.size16}',
-    labelFontWeight: '{palette.fontWeight.weight400}',
-    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}',
-        iconBackgroundColor: '{palette.color.greyMystic}',
-        iconColor: '{palette.color.greyShuttle}',
-        labelColor: '{palette.color.greyShuttle}'
-      }
-    }
-  ]
-}

package/src/components/CheckboxGroup.js

@@ -1,8 +0,0 @@
-module.exports = {
-  appearances: {},
-  tokens: {
-    space: '{system.integer.2}',
-    fieldSpace: '{system.integer.2}'
-  },
-  rules: []
-}

package/src/components/ChevronLink.js

@@ -1,12 +0,0 @@
-module.exports = {
-  appearances: {
-    hover: '{appearances.ChevronLink.hover}'
-  },
-  tokens: {
-    leftIcon: '{palette.icon.ArrowLeft}',
-    rightIcon: '{palette.icon.ArrowRight}',
-    iconDisplace: '{palette.size.size0}',
-    iconSpace: '{system.integer.0}'
-  },
-  rules: [{ if: { hover: true }, tokens: { iconDisplace: '{palette.size.size4}' } }]
-}

package/src/components/Divider.js

@@ -1,32 +0,0 @@
-module.exports = {
-  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,9 +0,0 @@
-module.exports = {
-  appearances: {},
-  tokens: {
-    borderColor: '{palette.color.greyCloud}',
-    borderWidth: '{palette.border.border1}',
-    borderStyle: '{system.borderStyle.solid}'
-  },
-  rules: []
-}

package/src/components/ExpandCollapseControl.js

@@ -1,22 +0,0 @@
-module.exports = {
-  appearances: {
-    expanded: '{appearances.ExpandCollapseControl.expanded}'
-  },
-  tokens: {
-    icon: '{palette.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: '{palette.icon.CaretUp}' } }]
-}

package/src/components/ExpandCollapsePanel.js

@@ -1,13 +0,0 @@
-module.exports = {
-  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,66 +0,0 @@
-module.exports = {
-  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}',
-
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    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: '{palette.icon.NotificationSuccess}',
-        iconColor: '{palette.color.greenAccessible}'
-      }
-    },
-    {
-      if: { validation: 'error', icon: true },
-      tokens: {
-        icon: '{palette.icon.NotificationError}',
-        iconColor: '{palette.color.red}'
-      }
-    }
-  ]
-}