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

package/src/components/StepTracker.js

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

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

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

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

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

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

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

package/src/components/TextInput.js

@@ -0,0 +1,73 @@
+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,125 +1,111 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  toggleSwitchAppearances,
-  getToggleSwitchSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-import checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
-
-const ToggleSwitch = {
+module.exports = {
   appearances: {
-    focus: toggleSwitchAppearances.focus,
-    hover: toggleSwitchAppearances.hover,
-    pressed: toggleSwitchAppearances.pressed,
-    inactive: toggleSwitchAppearances.inactive,
-    selected: toggleSwitchAppearances.selected
+    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,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent,
-    backgroundColor: palette.color.greyShuttle,
-    opacity: 1,
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    shadow: palette.shadow.surfaceInset,
+    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: null,
-    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
+    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
+        backgroundColor: '{palette.color.greyCharcoal}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        backgroundColor: palette.color.greyThunder
+        backgroundColor: '{palette.color.greyThunder}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        outerBackgroundColor: palette.color.white,
-        outerBorderGap: palette.border.border3,
-        outerBorderWidth: palette.border.border2,
-        outerBorderColor: palette.color.greyShuttle
+        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
+        outerBorderColor: '{palette.color.greyThunder}'
       }
     },
     {
       if: { selected: true },
       tokens: {
-        icon: checkmarkIcon,
-        backgroundColor: palette.color.greenAccessible,
-        iconColor: palette.color.greenAccessible
+        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
+        backgroundColor: '{palette.color.greenSanFelix}',
+        iconColor: '{palette.color.greenSanFelix}'
       }
     },
     {
       if: { selected: true, pressed: true },
       tokens: {
-        backgroundColor: palette.color.greenDarkFern,
-        iconColor: palette.color.greenDarkFern
+        backgroundColor: '{palette.color.greenDarkFern}',
+        iconColor: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { selected: true, focus: true },
       tokens: {
-        outerBorderColor: palette.color.greenAccessible
+        outerBorderColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { selected: true, focus: true, pressed: true },
       tokens: {
-        outerBorderColor: palette.color.greenDarkFern
+        outerBorderColor: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyCloud,
-        outerBorderColor: palette.color.greyCloud,
-        iconColor: palette.color.greyShuttle
+        backgroundColor: '{palette.color.greyCloud}',
+        outerBorderColor: '{palette.color.greyCloud}',
+        iconColor: '{palette.color.greyShuttle}'
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ToggleSwitch, getToggleSwitchSchema(palette), 'ToggleSwitch')
-
-export default ToggleSwitch

package/src/components/Tooltip.js

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