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

package/src/components/PaginationSideButton.js

@@ -1,98 +1,89 @@
-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 {
+module.exports = {
   appearances: {
-    viewport: appearances.system.viewport,
-    focus: appearances.PaginationSideButton.focus,
-    hover: appearances.PaginationSideButton.hover,
-    pressed: appearances.PaginationSideButton.pressed,
-    selected: appearances.PaginationSideButton.selected,
-    direction: appearances.PaginationSideButton.direction
+    viewport: '{appearances.system.viewport}',
+    focus: '{appearances.PaginationSideButton.focus}',
+    hover: '{appearances.PaginationSideButton.hover}',
+    pressed: '{appearances.PaginationSideButton.pressed}',
+    selected: '{appearances.PaginationSideButton.selected}',
+    direction: '{appearances.PaginationSideButton.direction}'
   },
   tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    outerBorderColor: palette.color.transparent,
+    borderColor: '{palette.color.transparent}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.radius4}',
+    backgroundColor: '{palette.color.transparent}',
+    paddingLeft: '{palette.size.size8}',
+    paddingRight: '{palette.size.size8}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    outerBorderColor: '{palette.color.transparent}',
 
-    color: palette.color.greyShuttle,
+    color: '{palette.color.greyShuttle}',
 
-    // TODO replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: system.textLine.underline,
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    textLine: '{system.textLine.underline}',
 
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconDisplace: palette.size.size0,
+    icon: '{system.icon.none}',
+    iconSize: '{palette.fontSize.size24}',
+    iconDisplace: '{palette.size.size0}',
 
-    width: system.size.none,
-    textAlign: system.flexJustifyContent.center
+    width: '{system.size.none}',
+    textAlign: '{system.flexJustifyContent.center}'
   },
   rules: [
     {
       if: { viewport: ['xs', 'sm'] },
       tokens: {
-        borderRadius: palette.radius.pill32,
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        width: palette.size.size32
+        borderRadius: '{palette.radius.pill32}',
+        paddingTop: '{palette.size.size4}',
+        paddingBottom: '{palette.size.size4}',
+        width: '{palette.size.size32}'
       }
     },
     {
       if: { hover: true },
       tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: system.textLine.none,
-        iconDisplace: palette.size.size4
+        borderColor: '{palette.color.greyShuttle}',
+        textLine: '{system.textLine.none}',
+        iconDisplace: '{palette.size.size4}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        borderColor: palette.color.greyShuttle,
-        borderWidth: palette.border.border3
+        borderColor: '{palette.color.greyShuttle}',
+        borderWidth: '{palette.border.border3}'
       }
     },
     {
       if: { selected: true },
       tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white,
-        textLine: system.textLine.none
+        backgroundColor: '{palette.color.greyShuttle}',
+        color: '{palette.color.white}',
+        textLine: '{system.textLine.none}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
+        backgroundColor: '{palette.color.greyShuttle}',
+        color: '{palette.color.white}'
       }
     },
     {
       if: { direction: 'previous' },
       tokens: {
-        icon: leftArrowIcon
+        icon: '{palette.icon.ArrowLeft}'
       }
     },
     {
       if: { direction: 'next' },
       tokens: {
-        icon: rightArrowIcon
+        icon: '{palette.icon.ArrowRight}'
       }
     }
   ]

package/src/components/Progress.js

@@ -0,0 +1,13 @@
+module.exports = {
+  appearances: {
+    size: { values: ['mini'], type: 'variant' }
+  },
+  tokens: {
+    backgroundColor: '{palette.color.greyAthens}',
+    borderWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyCloud}',
+    borderRadius: '{palette.radius.radius12}',
+    height: '{palette.size.size16}'
+  },
+  rules: [{ if: { size: 'mini' }, tokens: { height: '{palette.size.size8}' } }]
+}

package/src/components/ProgressBar.js

@@ -0,0 +1,31 @@
+module.exports = {
+  appearances: {
+    inactive: '{appearances.ProgressBar.inactive}',
+    negative: { values: [true], type: 'variant' }
+  },
+  tokens: {
+    backgroundColor: '{palette.color.greenAccessible}',
+    borderRadius: '{palette.radius.radius12}',
+    gradient: '{palette.gradient.green}',
+    outlineWidth: '{palette.border.border1}',
+    outlineColor: '{palette.color.greenAccessible}'
+  },
+  rules: [
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyCloud}',
+        gradient: '{system.gradient.none}',
+        outlineColor: '{palette.color.greyThunder}'
+      }
+    },
+    {
+      if: { negative: true },
+      tokens: {
+        backgroundColor: '{palette.color.redDark}',
+        gradient: '{system.gradient.none}',
+        outlineColor: '{palette.color.redDark}'
+      }
+    }
+  ]
+}

package/src/components/Radio.js

@@ -1,63 +1,68 @@
-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 {
+module.exports = {
   appearances: {
-    checked: appearances.Radio.checked,
-    error: appearances.Radio.error,
-    focus: appearances.Radio.focus,
-    hover: appearances.Radio.hover,
-    inactive: appearances.Radio.inactive
+    checked: '{appearances.Radio.checked}',
+    error: '{appearances.Radio.error}',
+    focus: '{appearances.Radio.focus}',
+    hover: '{appearances.Radio.hover}',
+    inactive: '{appearances.Radio.inactive}'
   },
   tokens: {
-    checkedBackgroundColor: palette.color.purpleDeluge,
-    checkedSize: palette.size.size12,
-    containerBackgroundColor: palette.color.transparent,
-    containerBorderRadius: palette.radius.none,
-    containerMarginBottom: palette.size.size8,
-    containerOpacity: system.opacity.opaque,
-    containerPaddingBottom: palette.size.size0,
-    containerPaddingLeft: palette.size.size0,
-    containerPaddingRight: palette.size.size0,
-    containerPaddingTop: palette.size.size0,
-    containerShadow: system.shadow.none,
-    descriptionFontSize: palette.fontSize.size14,
-    descriptionLineHeight: palette.lineHeight.ratio10to7,
-    descriptionMarginLeft: system.size.none,
-    inputBackgroundColor: palette.color.white,
-    inputBorderColor: palette.color.greyShuttle,
-    inputBorderWidth: palette.border.border1,
-    inputOutlineColor: palette.color.transparent,
-    inputOutlineWidth: palette.border.none,
-    inputSize: palette.size.size20,
-    labelColor: palette.color.greyCharcoal,
-    labelFontName: Object.keys(palette.font)[0],
-    labelFontSize: palette.fontSize.size16,
-    labelFontWeight: '400',
-    labelLineHeight: palette.lineHeight.ratio3to2,
-    labelMarginLeft: palette.size.size10
+    checkedBackgroundColor: '{palette.color.purpleDeluge}',
+    checkedSize: '{palette.size.size12}',
+    containerBackgroundColor: '{palette.color.transparent}',
+    containerBorderRadius: '{palette.radius.none}',
+    containerOpacity: '{system.opacity.opaque}',
+    containerPaddingBottom: '{palette.size.size0}',
+    containerPaddingLeft: '{palette.size.size0}',
+    containerPaddingRight: '{palette.size.size0}',
+    containerPaddingTop: '{palette.size.size0}',
+    containerShadow: '{system.shadow.none}',
+    descriptionFontSize: '{palette.fontSize.size14}',
+    descriptionLineHeight: '{palette.lineHeight.ratio10to7}',
+    descriptionMarginLeft: '{system.size.none}',
+    inputBackgroundColor: '{palette.color.white}',
+    inputBorderColor: '{palette.color.greyShuttle}',
+    inputBorderWidth: '{palette.border.border1}',
+    inputOutlineColor: '{palette.color.transparent}',
+    inputOutlineWidth: '{palette.border.none}',
+    inputSize: '{palette.size.size20}',
+    outerBorderWidth: '{system.border.zero}',
+    outerBorderColor: '{system.color.transparent}',
+    outerBorderGap: '{system.size.zero}',
+    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
+        inputBorderColor: '{palette.color.red}'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        outerBorderWidth: '{palette.border.border2}',
+        outerBorderColor: '{palette.color.greyMystic}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        inputBorderColor: palette.color.purpleDeluge,
-        inputBorderWidth: palette.border.border3
+        inputBorderColor: '{palette.color.purpleDeluge}',
+        inputBorderWidth: '{palette.border.border3}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        inputBorderColor: palette.color.transparent,
-        inputBackgroundColor: palette.color.greyMystic,
-        labelColor: palette.color.greyShuttle
+        inputBorderColor: '{palette.color.transparent}',
+        inputBackgroundColor: '{palette.color.greyMystic}',
+        labelColor: '{palette.color.greyShuttle}'
       }
     }
   ]

package/src/components/RadioCard.js

@@ -0,0 +1,123 @@
+module.exports = {
+  appearances: {
+    pressed: '{appearances.RadioCard.pressed}',
+    hover: '{appearances.RadioCard.hover}',
+    focus: '{appearances.RadioCard.focus}',
+    checked: '{appearances.RadioCard.checked}',
+    inactive: '{appearances.RadioCard.inactive}',
+    error: '{appearances.RadioCard.error}',
+    viewport: '{appearances.system.viewport}'
+  },
+  tokens: {
+    // Outer border
+    outerBorderColor: '{system.color.transparent}',
+    outerBorderWidth: '{system.border.zero}',
+    outerBorderGap: '{system.size.zero}',
+
+    // Card
+    flex: '{system.integer.1}',
+    backgroundColor: '{palette.color.white}',
+    borderColor: '{palette.color.greyCloud}',
+    borderRadius: '{palette.radius.radius6}',
+    borderWidth: '{palette.border.border1}',
+    paddingBottom: '{palette.size.size16}',
+    paddingLeft: '{palette.size.size10}',
+    paddingRight: '{palette.size.size16}',
+    paddingTop: '{palette.size.size16}',
+    minWidth: '{palette.size.size288}',
+    shadow: '{system.shadow.none}',
+
+    // RadioButton
+    radioCheckedBackgroundColor: '{palette.color.purpleDeluge}',
+    radioCheckedSize: '{palette.size.size12}',
+    radioInputBackgroundColor: '{palette.color.white}',
+    radioInputBorderColor: '{palette.color.greyShuttle}',
+    radioInputBorderWidth: '{palette.border.border1}',
+    radioInputOutlineColor: '{palette.color.transparent}',
+    radioInputOutlineWidth: '{palette.border.none}',
+    radioInputSize: '{palette.size.size20}',
+    radioOuterBorderColor: '{system.color.transparent}',
+    radioOuterBorderWidth: '{system.border.zero}',
+    radioOuterBorderGap: '{system.size.zero}',
+
+    // Title text - duplicates Typography variant { size: 'h3' }
+    fontSize: '{palette.fontSize.size20}',
+    lineHeight: '{palette.lineHeight.ratio7to5}',
+    color: '{palette.color.greyThunder}',
+    letterSpacing: '{system.letterSpacing.none}',
+    textTransform: '{system.textTransform.none}',
+    fontWeight: '{palette.fontWeight.weight500}',
+    fontName: '{palette.fontName.HelveticaNow}',
+
+    // Spacing
+    radioSpace: '{system.integer.2}',
+    contentSpace: '{system.integer.2}'
+  },
+  rules: [
+    {
+      if: { viewport: ['lg', 'xl'] },
+      tokens: {
+        paddingBottom: '{palette.size.size24}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size24}',
+        paddingTop: '{palette.size.size16}',
+
+        fontSize: '{palette.fontSize.size24}',
+        lineHeight: '{palette.lineHeight.ratio4to3}'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBorderWidth: '{palette.border.border2}',
+
+        radioOuterBorderWidth: '{palette.border.border2}',
+        radioOuterBorderColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { pressed: true },
+      description: 'Pressed state matches hover state plus light grey background',
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBorderWidth: '{palette.border.border2}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '{palette.color.greyShuttle}',
+        outerBorderWidth: '{palette.border.border2}',
+        outerBorderGap: '{palette.size.size2}',
+
+        radioInputBorderColor: '{palette.color.purpleDeluge}',
+        radioInputBorderWidth: '{palette.border.border3}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{system.color.transparent}',
+
+        radioInputBorderColor: '{palette.color.transparent}',
+        radioInputBackgroundColor: '{palette.color.greyMystic}',
+        color: '{palette.color.greyShuttle}'
+      }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '{palette.color.red}',
+
+        radioInputBorderColor: '{palette.color.red}',
+
+        color: '{palette.color.red}'
+      }
+    }
+  ]
+}

package/src/components/RadioCardGroup.js

@@ -0,0 +1,24 @@
+module.exports = {
+  appearances: {
+    viewport: '{appearances.system.viewport}',
+    fullWidth: {
+      description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    direction: '{system.direction.column}',
+    space: '{system.integer.3}',
+    fieldSpace: '{system.integer.3}'
+  },
+  rules: [
+    {
+      if: { viewport: ['lg', 'xl'], fullWidth: null },
+      tokens: {
+        direction: '{system.direction.row}',
+        space: '{system.integer.4}'
+      }
+    }
+  ]
+}

package/src/components/RadioGroup.js

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

package/src/components/Search.js

@@ -0,0 +1,57 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.Search.hover}',
+    focus: '{appearances.Search.focus}',
+    inactive: '{appearances.Search.inactive}'
+  },
+  tokens: {
+    backgroundColor: '{palette.color.white}',
+    color: '{palette.color.greyCharcoal}',
+    borderWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyShuttle}',
+    borderRadius: '{palette.radius.pill32}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size24}',
+    paddingRight: '{palette.size.size8}',
+
+    outerBackgroundColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderRadius: '{palette.radius.pill32}',
+
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+
+    placeholderColor: '{palette.color.greyCharcoal}',
+    buttonsGap: '{system.integer.1}',
+    clearButtonIcon: '{palette.icon.Times}',
+    submitButtonIcon: '{palette.icon.SearchBold}'
+  },
+  rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: {
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBackgroundColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{palette.border.border3}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyAthens}'
+      }
+    }
+  ]
+}

package/src/components/SearchButton.js

@@ -0,0 +1,71 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.SearchButton.hover}',
+    focus: '{appearances.SearchButton.focus}',
+    inactive: '{appearances.SearchButton.inactive}',
+    pressed: '{appearances.SearchButton.pressed}',
+    priority: {
+      description: '',
+      values: ['high'],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    borderColor: '{palette.color.transparent}',
+    borderWidth: '{system.border.zero}',
+    borderRadius: '{palette.radius.pill32}',
+    backgroundColor: '{system.color.none}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{palette.size.size8}',
+    paddingRight: '{palette.size.size8}',
+    paddingBottom: '{palette.size.size8}',
+    paddingTop: '{palette.size.size8}',
+    shadow: '{system.shadow.none}',
+
+    iconSize: '{palette.size.size20}',
+    iconColor: '{palette.color.greyShuttle}'
+  },
+  rules: [
+    {
+      if: { priority: 'high' },
+      tokens: {
+        backgroundColor: '{palette.color.purpleTelus}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    // only the default appearance is different for a high priority button
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{system.border.zero}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.purpleTelus}',
+        borderWidth: '{palette.border.border3}',
+        iconColor: '{palette.color.purpleTelus}',
+        backgroundColor: '{system.color.transparent}'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: '{system.size.zero}',
+        backgroundColor: '{palette.color.purpleDark}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyMystic}',
+        iconColor: '{palette.color.greyShuttle}',
+        borderWidth: '{system.size.zero}'
+      }
+    }
+  ]
+}