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

package/src/components/StepTracker.js

@@ -1,59 +0,0 @@
-module.exports = {
-  appearances: {
-    viewport: '{appearances.system.viewport}'
-  },
-  tokens: {
-    completedIcon: '{system.icon.none}',
-    completedIconColor: '{system.color.none}',
-    completedIconSize: '{system.size.none}',
-    connectorColor: '{palette.color.greyShuttle}',
-    connectorHeight: '{palette.border.border1}',
-    connectorMinWidth: '{palette.size.size16}',
-    connectorCompletedHeight: '{palette.border.border3}',
-    connectorCompletedColor: '{palette.color.purpleDeluge}',
-    containerPaddingBottom: '{system.size.none}',
-    containerPaddingLeft: '{system.size.none}',
-    containerPaddingRight: '{system.size.none}',
-    containerPaddingTop: '{system.size.none}',
-    knobBackgroundColor: '{palette.color.transparent}',
-    knobBorderWidth: '{palette.border.border1}',
-    knobBorderColor: '{palette.color.greyShuttle}',
-    knobCompletedBackgroundColor: '{palette.color.purpleDeluge}',
-    knobCompletedBorderColor: '{palette.color.purpleDeluge}',
-    knobCompletedPaddingLeft: '{system.size.none}',
-    knobCompletedPaddingTop: '{system.size.none}',
-    knobCurrentBackgroundColor: '{palette.color.transparent}',
-    knobCurrentBorderColor: '{palette.color.purpleDeluge}',
-    knobCurrentBorderWidth: '{palette.border.border2}',
-    knobCurrentInnerColor: '{palette.color.purpleDeluge}',
-    knobCurrentInnerSize: '{palette.size.size8}',
-    knobCurrentPaddingLeft: '{palette.size.size2}',
-    knobCurrentPaddingTop: '{palette.size.size2}',
-    knobSize: '{palette.size.size16}',
-    labelColor: '{palette.color.greyCharcoal}',
-    labelCurrentColor: '{palette.color.purpleDeluge}',
-    labelCurrentFontWeight: '{palette.fontWeight.weight700}',
-    labelCurrentFontName: '{palette.fontName.HelveticaNow}',
-    labelDirection: '{system.direction.column}',
-    labelFontSize: '{palette.fontSize.size16}',
-    labelFontWeight: '{palette.fontWeight.weight400}',
-    labelFontName: '{palette.fontName.HelveticaNow}',
-    labelGap: '{palette.size.size0}',
-    labelLineHeight: '{palette.lineHeight.ratio10to7}',
-    labelMarginTop: '{palette.size.size8}',
-    labelPaddingLeft: '{palette.size.size16}',
-    labelPaddingRight: '{palette.size.size16}',
-    showStepLabel: '{system.show.false}',
-    showStepName: '{system.show.true}',
-    showStepTrackerLabel: '{system.show.true}'
-  },
-  rules: [
-    {
-      if: { viewport: ['lg', 'xl'] },
-      tokens: {
-        showStepLabel: '{system.show.true}',
-        showStepTrackerLabel: '{system.show.false}'
-      }
-    }
-  ]
-}

package/src/components/Tabs.js

@@ -1,13 +0,0 @@
-module.exports = {
-  appearances: {},
-  tokens: {
-    nextIcon: '{palette.icon.ArrowRight}',
-    previousIcon: '{palette.icon.ArrowLeft}',
-    space: '{system.integer.0}',
-    gutter: '{palette.size.size2}',
-    borderBottomWidth: '{palette.border.border1}',
-    borderBottomColor: '{palette.color.greyShuttle}',
-    buttonClearance: '{palette.size.size16}'
-  },
-  rules: []
-}

package/src/components/TabsItem.js

@@ -1,81 +0,0 @@
-module.exports = {
-  appearances: {
-    pressed: '{appearances.TabsItem.pressed}',
-    hover: '{appearances.TabsItem.pressed}',
-    focus: '{appearances.TabsItem.pressed}',
-    selected: '{appearances.TabsItem.pressed}'
-  },
-  tokens: {
-    highlightColor: '{system.color.transparent}',
-    highlightBarHeight: '{system.border.zero}',
-    highlightBarBorderRadius: '{system.radius.zero}',
-    highlightBarBorderWidth: '{system.border.zero}',
-    highlightTriangleSize: '{system.size.zero}',
-
-    backgroundColor: '{system.color.transparent}',
-    borderColor: '{system.color.transparent}',
-    borderWidth: '{system.border.zero}',
-    borderRadius: '{palette.radius.pill32}',
-    maxWidth: '{palette.size.size192}',
-    space: '{system.integer.1}',
-    paddingHorizontal: '{palette.size.size24}',
-    paddingVertical: '{palette.size.size8}',
-
-    textAlign: '{system.textAlign.center}',
-    lineHeight: '{palette.lineHeight.ratio8to7}',
-    color: '{palette.color.greyShuttle}',
-    fontSize: '{palette.fontSize.size14}',
-    letterSpacing: '{system.letterSpacing.none}',
-    textTransform: '{system.textTransform.none}',
-    fontScaleCap: '{palette.fontSize.size64}',
-
-    fontWeight: '{palette.fontWeight.weight700}',
-    fontName: '{palette.fontName.HelveticaNow}'
-  },
-  rules: [
-    {
-      if: { selected: true },
-      description:
-        "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
-      tokens: {
-        highlightBarBorderWidth: '{palette.border.border1}',
-        highlightBarHeight: '{palette.border.border1}',
-        highlightColor: '{palette.color.purpleTelus}',
-        highlightBarBorderRadius: '{palette.radius.pill32}',
-
-        color: '{palette.color.purpleTelus}',
-        backgroundColor: '{palette.color.greyAthens}'
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: '{palette.color.greyCloud}',
-        borderWidth: '{palette.border.border2}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        color: '{palette.color.purpleTelus}',
-        borderColor: '{palette.color.purpleTelus}',
-        borderWidth: '{palette.border.border2}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        color: '{palette.color.white}',
-        backgroundColor: '{palette.color.greyShuttle}',
-        borderColor: '{system.color.transparent}',
-        borderWidth: '{system.border.zero}'
-      }
-    },
-    {
-      if: { focus: true, pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.purpleTelus}'
-      }
-    }
-  ]
-}

package/src/components/TabsScrollButton.js

@@ -1,34 +0,0 @@
-module.exports = {
-  appearances: {
-    hover: '{appearances.TabsScrollButton.hover}',
-    focus: '{appearances.TabsScrollButton.focus}',
-    pressed: '{appearances.TabsScrollButton.pressed}'
-  },
-  tokens: {
-    borderRadius: '{palette.radius.pill32}',
-    backgroundColor: '{palette.color.white}',
-    borderColor: '{palette.color.greyCloud}',
-    borderWidth: '{palette.border.border1}',
-    padding: '{system.size.zero}',
-    shadow: '{palette.shadow.surfaceRaised}',
-    iconSize: '{palette.size.size32}',
-    iconColor: '{palette.color.greyShuttle}'
-  },
-  // TODO: refine the states etc when designs for icon buttons are finalized
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: '{palette.color.greyCharcoal}',
-        iconColor: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyShuttle}',
-        iconColor: '{palette.color.white}'
-      }
-    }
-  ]
-}

package/src/components/Tags.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/TagsItem.js

@@ -1,126 +0,0 @@
-module.exports = {
-  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: '{palette.icon.Add}',
-    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}',
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight700}',
-
-    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}',
-    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}',
-
-        iconColor: '{palette.color.white}',
-        iconBackground: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      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}',
-
-        icon: '{palette.icon.Close}',
-        iconColor: '{palette.color.white}',
-        iconBackground: '{palette.color.purpleDeluge}'
-      }
-    },
-    {
-      if: { selected: true, hover: true },
-      tokens: {
-        backgroundColor: '{palette.color.purpleDeluge}',
-
-        iconBackground: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: { selected: true, pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.purpleDark}',
-
-        iconBackground: '{palette.color.purpleDeluge}'
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderColor: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: { selected: true, focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: '{palette.color.purpleDark}',
-
-        iconBackground: '{palette.color.purpleDeluge}'
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyCloud}',
-        color: '{palette.color.white}',
-        borderWidth: '{system.border.zero}'
-      }
-    }
-  ]
-}

package/src/components/TextArea.js

@@ -1,8 +0,0 @@
-module.exports = {
-  appearances: {},
-  tokens: {
-    minLines: '{system.integer.5}',
-    maxLines: '{system.integer.8}'
-  },
-  rules: []
-}

package/src/components/TextInput.js

@@ -1,73 +0,0 @@
-module.exports = {
-  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}',
-
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    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: '{palette.icon.NotificationSuccess}',
-        iconColor: '{palette.color.greenAccessible}'
-      }
-    },
-    {
-      if: { validation: 'error' },
-      tokens: {
-        borderColor: '{palette.color.red}',
-        icon: '{palette.icon.NotificationError}',
-        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,111 +0,0 @@
-module.exports = {
-  appearances: {
-    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}',
-    borderWidth: '{palette.border.none}',
-    borderRadius: '{palette.radius.pill32}',
-    outerBorderColor: '{palette.color.transparent}',
-    outerBorderWidth: '{palette.border.none}',
-    outerBorderGap: '{palette.size.size0}',
-    outerBackgroundColor: '{palette.color.transparent}',
-    backgroundColor: '{palette.color.greyShuttle}',
-    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: '{system.flexAlign.flexStart}',
-
-    icon: '{system.icon.none}',
-    width: '{palette.size.size40}',
-    trackBorderWidth: '{palette.border.border3}',
-    trackBorderColor: '{palette.color.transparent}',
-    trackBorderRadius: '{palette.radius.pill32}',
-    iconSize: '{palette.size.size12}',
-    iconColor: '{palette.color.greyShuttle}',
-    switchSize: '{palette.size.size16}',
-    switchColor: '{palette.color.white}',
-    switchBorderColor: '{palette.color.transparent}',
-    switchBorderWidth: '{palette.border.none}',
-    switchBorderRadius: '{palette.radius.pill32}',
-    switchShadow: '{palette.shadow.surfaceRaised}'
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        outerBackgroundColor: '{palette.color.white}',
-        outerBorderGap: '{palette.border.border3}',
-        outerBorderWidth: '{palette.border.border2}',
-        outerBorderColor: '{palette.color.greyShuttle}'
-      }
-    },
-    {
-      if: { focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        icon: '{palette.icon.Checkmark}',
-        backgroundColor: '{palette.color.greenAccessible}',
-        iconColor: '{palette.color.greenAccessible}'
-      }
-    },
-    {
-      if: { selected: true, hover: true },
-      tokens: {
-        backgroundColor: '{palette.color.greenSanFelix}',
-        iconColor: '{palette.color.greenSanFelix}'
-      }
-    },
-    {
-      if: { selected: true, pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.greenDarkFern}',
-        iconColor: '{palette.color.greenDarkFern}'
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderColor: '{palette.color.greenAccessible}'
-      }
-    },
-    {
-      if: { selected: true, focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: '{palette.color.greenDarkFern}'
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyCloud}',
-        outerBorderColor: '{palette.color.greyCloud}',
-        iconColor: '{palette.color.greyShuttle}'
-      }
-    }
-  ]
-}

package/src/components/Tooltip.js

@@ -1,37 +0,0 @@
-module.exports = {
-  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}',
-
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    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

@@ -1,61 +0,0 @@
-module.exports = {
-  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}',
-    borderRadius: '{palette.radius.pill32}',
-    width: '{palette.size.size16}',
-
-    icon: '{palette.icon.Question}',
-    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}'
-      }
-    }
-  ]
-}