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

package/src/components/List.js

@@ -0,0 +1,68 @@
+module.exports = {
+  appearances: {
+    size: {
+      description: 'Indicates list item text size.',
+      values: ['large', 'small'],
+      type: 'variant'
+    },
+    compact: {
+      description: 'When true it will reduce the line height of the list item.',
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    itemFontWeight: '{palette.fontWeight.weight400}',
+    itemFontSize: '{palette.fontSize.size16}',
+    itemLineHeight: '{palette.lineHeight.ratio3to2}',
+    itemFontName: '{palette.fontName.HelveticaNow}',
+    interItemMargin: '{palette.size.size8}',
+    interItemMarginWithDivider: '{palette.size.size16}',
+    dividerColor: '{palette.color.greyCloud}',
+    dividerSize: '{palette.border.border1}',
+    itemBulletContainerWidth: '{palette.size.size16}',
+    itemBulletContainerAlign: '{system.textAlign.center}',
+    itemBulletWidth: '{palette.size.size4}',
+    itemBulletHeight: '{palette.size.size4}',
+    itemBulletColor: '{palette.color.purpleTelus}',
+    itemIconSize: '{palette.size.size16}',
+    itemIconColor: '{palette.color.purpleTelus}',
+    listGutter: '{palette.size.size12}'
+  },
+  rules: [
+    {
+      if: { size: 'large' },
+      tokens: {
+        itemFontSize: '{palette.fontSize.size20}',
+        itemLineHeight: '{palette.lineHeight.ratio8to5}',
+        listGutter: '{palette.size.size12}'
+      }
+    },
+    {
+      if: { size: 'small' },
+      tokens: {
+        itemFontSize: '{palette.fontSize.size14}',
+        itemLineHeight: '{palette.lineHeight.ratio10to7}',
+        listGutter: '{palette.size.size12}'
+      }
+    },
+    {
+      if: { compact: true },
+      tokens: {
+        itemLineHeight: '{palette.lineHeight.ratio5to4}'
+      }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: {
+        itemLineHeight: '{palette.lineHeight.ratio8to7}'
+      }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: {
+        itemLineHeight: '{palette.lineHeight.ratio6to5}'
+      }
+    }
+  ]
+}

package/src/components/Modal.js

@@ -0,0 +1,57 @@
+module.exports = {
+  appearances: {
+    maxWidth: '{appearances.Modal.maxWidth}',
+    viewport: '{appearances.system.viewport}'
+  },
+  tokens: {
+    backdropColor: '{palette.color.bgModal}',
+    backdropOpacity: '{system.opacity.opaque}',
+
+    height: '{system.size.none}',
+    maxWidth: '{system.size.full}',
+
+    containerPaddingLeft: '{system.size.zero}',
+    containerPaddingRight: '{system.size.zero}',
+    containerPaddingTop: '{system.size.zero}',
+    containerPaddingBottom: '{system.size.zero}',
+
+    backgroundColor: '{palette.color.white}',
+    borderRadius: '{palette.radius.radius4}',
+    shadow: '{palette.shadow.elevation1}',
+    paddingLeft: '{palette.size.size24}',
+    paddingRight: '{palette.size.size24}',
+    paddingTop: '{palette.size.size24}',
+    paddingBottom: '{palette.size.size24}',
+
+    closeIcon: '{palette.icon.Close}',
+    closeIconSize: '{palette.size.size24}',
+    closeIconColor: '{palette.color.greyCharcoal}'
+  },
+  rules: [
+    {
+      if: { viewport: ['xs', 'sm'] },
+      // covers the entire viewport on mobile devices
+      tokens: {
+        height: '{system.size.full}'
+      }
+    },
+    {
+      if: { viewport: ['md', 'lg', 'xl'] },
+      tokens: {
+        maxWidth: '{system.integer.576}', // default when maxWidth is not enabled
+        // ensures that there's a gap near the top and bottom edge of the viewport
+        containerPaddingTop: '{palette.size.size32}',
+        containerPaddingBottom: '{palette.size.size32}'
+      }
+    },
+    {
+      if: { viewport: ['md', 'lg', 'xl'], maxWidth: true },
+      tokens: {
+        maxWidth: '{system.size.twoThirds}', // 100% * 8/12
+        // compensate for the outside gutter of the layout columns (modal edges should be aligned with the columns edges)
+        containerPaddingLeft: '{palette.size.size16}',
+        containerPaddingRight: '{palette.size.size16}'
+      }
+    }
+  ]
+}

package/src/components/Notification.js

@@ -0,0 +1,90 @@
+// TODO: replace Close with circled close
+
+module.exports = {
+  appearances: {
+    system: '{appearances.Notification.system}',
+    style: '{appearances.Notification.style}'
+  },
+  tokens: {
+    backgroundColor: '{palette.color.greyAthens}',
+    borderBottomWidth: '{palette.border.border1}',
+    borderTopWidth: '{palette.border.border1}',
+    borderLeftWidth: '{palette.border.border1}',
+    borderRightWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyShuttle}',
+    borderRadius: '{palette.radius.radius6}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size12}',
+    paddingRight: '{palette.size.size12}',
+
+    color: '{palette.color.greyCharcoal}',
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    icon: '{system.icon.none}',
+    iconColor: '{system.color.none}',
+    iconSize: '{palette.size.size24}',
+    iconGap: '{palette.size.size16}',
+
+    dismissIcon: '{palette.icon.Close}',
+    dismissIconColor: '{palette.color.greyCharcoal}',
+    dismissIconSize: '{palette.size.size24}',
+    dismissButtonGap: '{palette.size.size16}'
+  },
+  rules: [
+    {
+      if: {
+        system: true
+      },
+      tokens: {
+        borderTopWidth: '{system.border.zero}',
+        borderLeftWidth: '{system.border.zero}',
+        borderRightWidth: '{system.border.zero}',
+        borderRadius: '{system.radius.zero}',
+        paddingTop: '{palette.size.size16}',
+        paddingBottom: '{palette.size.size16}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size16}',
+        iconGap: '{palette.size.size12}'
+      }
+    },
+    {
+      if: {
+        style: 'success'
+      },
+      tokens: {
+        backgroundColor: '{palette.color.greenPanache}',
+        borderColor: '{palette.color.greenAccessible}',
+        icon: '{palette.icon.NotificationSuccess}',
+        iconColor: '{palette.color.greenAccessible}'
+      }
+    },
+    {
+      if: {
+        style: 'warning'
+      },
+      tokens: {
+        backgroundColor: '{palette.color.amberLight}',
+        borderColor: '{palette.color.amberDark}',
+        icon: '{palette.icon.NotificationWarning}',
+        iconColor: '{palette.color.amberDark}',
+        dismissIcon: '{system.icon.none}'
+      }
+    },
+    {
+      if: {
+        style: 'error'
+      },
+      tokens: {
+        backgroundColor: '{palette.color.redLight}',
+        borderColor: '{palette.color.red}',
+        icon: '{palette.icon.NotificationError}',
+        iconColor: '{palette.color.red}',
+        dismissIcon: '{system.icon.none}'
+      }
+    }
+  ]
+}

package/src/components/Pagination.js

@@ -1,33 +1,24 @@
-import palette from '@telus-uds/palette-allium'
-import { getPaginationSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import { appearances } from '@telus-uds/system-constants'
-
-const Pagination = {
+module.exports = {
   appearances: {
-    viewport: appearances.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    gap: 2,
-    truncateAbove: 4,
+    gap: '{system.integer.2}',
+    truncateAbove: '{system.integer.4}',
+
+    color: '{palette.color.greyShuttle}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    color: palette.color.greyShuttle,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}'
   },
   rules: [
     {
       if: { viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        truncateAbove: 6
+        truncateAbove: '{system.integer.6}'
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Pagination, getPaginationSchema(palette), 'pagination')
-
-export default Pagination

package/src/components/PaginationPageButton.js

@@ -1,81 +1,65 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationPageButtonSchema,
-  lineOptions,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationPageButton = {
+module.exports = {
   appearances: {
-    focus,
-    hover,
-    pressed
+    focus: '{appearances.PaginationPageButton.focus}',
+    hover: '{appearances.PaginationPageButton.hover}',
+    pressed: '{appearances.PaginationPageButton.pressed}',
+    selected: '{appearances.PaginationPageButton.selected}'
   },
   tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size4,
-    paddingBottom: palette.size.size4,
-    width: palette.size.size32,
+    borderColor: '{palette.color.transparent}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.pill32}',
+    backgroundColor: '{palette.color.transparent}',
+    paddingLeft: '{palette.size.size8}',
+    paddingRight: '{palette.size.size8}',
+    paddingTop: '{palette.size.size4}',
+    paddingBottom: '{palette.size.size4}',
+    width: '{palette.size.size32}',
 
     // never visible - used only to increase the click area size
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border4,
-    outerBorderGap: palette.border.border4,
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border4}',
+    outerBorderGap: '{palette.border.border4}',
+
+    color: '{palette.color.greyShuttle}',
 
-    color: palette.color.greyShuttle,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    textLine: '{system.textLine.underline}',
+    textAlign: '{system.flexJustifyContent.center}'
   },
   rules: [
     {
       if: { hover: true },
       tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none
+        borderColor: '{palette.color.greyShuttle}',
+        textLine: '{system.textLine.none}'
       }
     },
     {
       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: lineOptions.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}'
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationPageButton,
-  getPaginationPageButtonSchema(palette),
-  'pagination-page-button'
-)
-
-export default PaginationPageButton

package/src/components/PaginationSideButton.js

@@ -1,120 +1,90 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationSideButtonSchema,
-  lineOptions,
-  paginationSideButtonAppearances,
-  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'
-import { appearances } from '@telus-uds/system-constants'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationSideButton = {
+module.exports = {
   appearances: {
-    viewport: appearances.viewport,
-    focus,
-    hover,
-    pressed,
-    ...paginationSideButtonAppearances
+    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,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline,
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconTranslateX: palette.size.size0
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    textLine: '{system.textLine.underline}',
+
+    icon: '{system.icon.none}',
+    iconSize: '{palette.fontSize.size24}',
+    iconDisplace: '{palette.size.size0}',
+
+    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: 32
+        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: lineOptions.none
+        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: lineOptions.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
-      }
-    },
-    {
-      if: { direction: 'previous', hover: true },
-      tokens: {
-        iconTranslateX: -1 * palette.size.size4
-      }
-    },
-    {
-      if: { direction: 'next', hover: true },
-      tokens: {
-        iconTranslateX: palette.size.size4
+        icon: '{palette.icon.ArrowRight}'
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationSideButton,
-  getPaginationSideButtonSchema(palette),
-  'pagination-side-button'
-)
-
-export default PaginationSideButton

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

@@ -0,0 +1,69 @@
+module.exports = {
+  appearances: {
+    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}',
+    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}'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        outerBorderWidth: '{palette.border.border2}',
+        outerBorderColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        inputBorderColor: '{palette.color.purpleDeluge}',
+        inputBorderWidth: '{palette.border.border3}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBorderColor: '{palette.color.transparent}',
+        inputBackgroundColor: '{palette.color.greyMystic}',
+        labelColor: '{palette.color.greyShuttle}'
+      }
+    }
+  ]
+}