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

package/src/components/Link.js

@@ -1,8 +1,4 @@
-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: {
     size: {
       description:
@@ -26,72 +22,70 @@ export default {
       values: [true],
       type: 'variant'
     },
-    iconPosition: appearances.Link.iconPosition,
-    focus: appearances.Link.focus,
-    hover: appearances.Link.hover,
-    pressed: appearances.Link.pressed
+    iconPosition: '{appearances.Link.iconPosition}',
+    focus: '{appearances.Link.focus}',
+    hover: '{appearances.Link.hover}',
+    pressed: '{appearances.Link.pressed}'
   },
   tokens: {
-    color: palette.color.greenAccessible,
+    color: '{palette.color.greenAccessible}',
 
-    textLine: system.textLine.underline,
-    textLineStyle: system.textLineStyle.solid,
+    textLine: '{system.textLine.underline}',
+    textLineStyle: '{system.textLineStyle.solid}',
 
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.radius4,
-    outerBorderOutline: system.borderStyle.none,
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderGap: '{palette.border.border2}',
+    borderRadius: '{palette.radius.radius4}',
+    outerBorderOutline: '{system.borderStyle.none}',
 
     // Same as default size Typography
-    // TODO replace with single font token
-    blockFontWeight: '400',
-    blockFontName: Object.keys(palette.font)[0],
-    // bockFont: palette.font.HelveticaNow[400]
+    blockFontWeight: '{palette.fontWeight.weight400}',
+    blockFontName: '{palette.fontName.HelveticaNow}',
 
-    blockFontSize: palette.fontSize.size16,
-    blockLineHeight: palette.lineHeight.ratio3to2,
-    alignSelf: system.flexAlign.flexStart,
+    blockFontSize: '{palette.fontSize.size16}',
+    blockLineHeight: '{palette.lineHeight.ratio3to2}',
+    alignSelf: '{system.flexAlign.flexStart}',
 
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconSpace: system.integer[1],
-    iconTranslateX: system.size.zero,
-    iconTranslateY: system.size.zero
+    icon: '{system.icon.none}',
+    iconSize: '{palette.fontSize.size24}',
+    iconSpace: '{system.integer.1}',
+    iconTranslateX: '{system.size.zero}',
+    iconTranslateY: '{system.size.zero}'
   },
   rules: [
     {
       if: { iconPosition: 'left' },
       tokens: {
-        iconSpace: system.integer[2]
+        iconSpace: '{system.integer.2}'
       }
     },
     // Initial interaction states
     {
       if: { focus: true },
       tokens: {
-        outerBorderColor: palette.color.greenAccessible,
-        outerBorderOutline: system.borderStyle.none
+        outerBorderColor: '{palette.color.greenAccessible}',
+        outerBorderOutline: '{system.borderStyle.none}'
       }
     },
     {
       if: { hover: true },
       tokens: {
-        textLine: system.textLine.none,
-        color: palette.color.greenSanFelix
+        textLine: '{system.textLine.none}',
+        color: '{palette.color.greenSanFelix}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        textLine: system.textLine.none,
-        color: palette.color.greenDarkFern
+        textLine: '{system.textLine.none}',
+        color: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { pressed: true, focus: true },
       tokens: {
-        outerBorderColor: palette.color.greenDarkFern
+        outerBorderColor: '{palette.color.greenDarkFern}'
       }
     },
 
@@ -99,29 +93,27 @@ export default {
     {
       if: { size: 'large' },
       tokens: {
-        blockFontSize: palette.fontSize.size20,
-        iconSize: palette.fontSize.size24,
-        blockLineHeight: palette.lineHeight.ratio8to5
+        blockFontSize: '{palette.fontSize.size20}',
+        iconSize: '{palette.fontSize.size24}',
+        blockLineHeight: '{palette.lineHeight.ratio8to5}'
       }
     },
     {
       if: { size: 'small' },
       tokens: {
-        blockFontSize: palette.fontSize.size14,
-        iconSize: palette.fontSize.size20,
-        blockLineHeight: palette.lineHeight.ratio10to7
+        blockFontSize: '{palette.fontSize.size14}',
+        iconSize: '{palette.fontSize.size20}',
+        blockLineHeight: '{palette.lineHeight.ratio10to7}'
       }
     },
     {
       if: { size: 'micro' },
       tokens: {
-        blockFontSize: palette.fontSize.size12,
-        // TODO replace this with font token
-        blockFontWeight: '500',
-        // blockFont: palette.font.HelveticaNow[500]
-
-        iconSize: palette.fontSize.size16,
-        blockLineHeight: palette.lineHeight.ratio4to3
+        blockFontSize: '{palette.fontSize.size12}',
+        blockFontWeight: '{palette.fontWeight.weight500}',
+        blockFontName: '{palette.fontName.HelveticaNow}',
+        iconSize: '{palette.fontSize.size16}',
+        blockLineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
 
@@ -129,26 +121,26 @@ export default {
     {
       if: { alternative: true },
       tokens: {
-        color: palette.color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
     {
       if: { alternative: true, focus: true },
       tokens: {
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.greyCharcoal
+        color: '{palette.color.greyCharcoal}',
+        outerBorderColor: '{palette.color.greyCharcoal}'
       }
     },
     {
       if: { alternative: true, hover: true },
       tokens: {
-        color: palette.color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
     {
       if: { alternative: true, pressed: true },
       tokens: {
-        color: palette.color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
 
@@ -156,33 +148,33 @@ export default {
     {
       if: { inverse: true },
       tokens: {
-        color: palette.color.white
+        color: '{palette.color.white}'
       }
     },
     {
       if: { inverse: true, hover: true },
       tokens: {
-        color: palette.color.greyAthens
+        color: '{palette.color.greyAthens}'
       }
     },
     {
       if: { inverse: true, focus: true },
       tokens: {
-        outerBorderColor: palette.color.white,
-        outerBorderOutline: system.borderStyle.none
+        outerBorderColor: '{palette.color.white}',
+        outerBorderOutline: '{system.borderStyle.none}'
       }
     },
     {
       if: { inverse: true, pressed: true },
       tokens: {
-        color: palette.color.greyMystic
+        color: '{palette.color.greyMystic}'
       }
     },
     {
       if: { inverse: true, pressed: true, focus: true },
       tokens: {
-        color: palette.color.greyMystic,
-        outerBorderColor: palette.color.greyMystic
+        color: '{palette.color.greyMystic}',
+        outerBorderColor: '{palette.color.greyMystic}'
       }
     },
 
@@ -190,21 +182,21 @@ export default {
     {
       if: { light: true },
       tokens: {
-        color: palette.color.greyShuttle
+        color: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { light: true, focus: true },
       tokens: {
-        color: palette.color.greyShuttle,
-        outerBorderColor: palette.color.greyShuttle
+        color: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { light: true, hover: true },
       tokens: {
-        color: palette.color.greyCharcoal,
-        textLine: system.textLine.none
+        color: '{palette.color.greyCharcoal}',
+        textLine: '{system.textLine.none}'
       }
     }
   ]

package/src/components/List.js

@@ -1,6 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {
     size: {
       description: 'Indicates list item text size.',
@@ -14,56 +12,56 @@ export default {
     }
   },
   tokens: {
-    itemFontWeight: '400',
-    itemFontSize: palette.fontSize.size16,
-    itemLineHeight: palette.lineHeight.ratio3to2,
-    itemFontName: Object.keys(palette.font)[0],
-    interItemMargin: palette.size.size8,
-    interItemMarginWithDivider: palette.size.size16,
-    dividerColor: palette.color.greyCloud,
-    dividerSize: palette.border.border1,
-    itemBulletContainerWidth: palette.size.size16,
-    itemBulletContainerAlign: '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
+    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
+        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
+        itemFontSize: '{palette.fontSize.size14}',
+        itemLineHeight: '{palette.lineHeight.ratio10to7}',
+        listGutter: '{palette.size.size12}'
       }
     },
     {
       if: { compact: true },
       tokens: {
-        itemLineHeight: palette.lineHeight.ratio5to4
+        itemLineHeight: '{palette.lineHeight.ratio5to4}'
       }
     },
     {
       if: { compact: true, size: 'small' },
       tokens: {
-        itemLineHeight: palette.lineHeight.ratio8to7
+        itemLineHeight: '{palette.lineHeight.ratio8to7}'
       }
     },
     {
       if: { compact: true, size: 'large' },
       tokens: {
-        itemLineHeight: palette.lineHeight.ratio6to5
+        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,29 +1,23 @@
-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: {
-    viewport: appearances.system.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    gap: system.integer[2],
-    truncateAbove: system.integer[4],
+    gap: '{system.integer.2}',
+    truncateAbove: '{system.integer.4}',
 
-    color: palette.color.greyShuttle,
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
+    color: '{palette.color.greyShuttle}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
 
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}'
   },
   rules: [
     {
       if: { viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        truncateAbove: system.integer[6]
+        truncateAbove: '{system.integer.6}'
       }
     }
   ]

package/src/components/PaginationPageButton.js

@@ -1,70 +1,64 @@
-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: {
-    focus: appearances.PaginationPageButton.focus,
-    hover: appearances.PaginationPageButton.hover,
-    pressed: appearances.PaginationPageButton.pressed,
-    selected: appearances.PaginationPageButton.selected
+    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}',
 
-    // TODO: replace this 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,
-    textAlign: system.flexJustifyContent.center
+    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: system.textLine.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: 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}'
       }
     }
   ]