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

package/src/components/Typography.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: `Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,
@@ -47,20 +43,18 @@ accessibility or SEO-related properties; use the heading prop if text should be
       values: [true],
       type: 'variant'
     },
-    viewport: appearances.system.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-
-    fontSize: palette.fontSize.size16,
-    color: palette.color.greyThunder,
-    lineHeight: palette.lineHeight.ratio3to2,
-    letterSpacing: system.letterSpacing.none,
-    textTransform: system.textTransform.none,
-    fontScaleCap: palette.fontSize.size64
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    fontSize: '{palette.fontSize.size16}',
+    color: '{palette.color.greyThunder}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    letterSpacing: '{system.letterSpacing.none}',
+    textTransform: '{system.textTransform.none}',
+    fontScaleCap: '{palette.fontSize.size64}'
   },
   rules: [
     /**
@@ -69,44 +63,44 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { colour: 'secondary' },
       tokens: {
-        color: palette.color.greyCharcoal
+        color: '{palette.color.greyCharcoal}'
       }
     },
 
     {
       if: { size: ['display1', 'display2', 'h1', 'h2', 'h3'] },
       tokens: {
-        color: palette.color.purpleTelus
+        color: '{palette.color.purpleTelus}'
       }
     },
     {
       if: { size: ['display1', 'display2', 'h1', 'h2', 'h3'], colour: 'secondary' },
       tokens: {
-        color: palette.color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
     {
       if: { size: 'h6', colour: 'tertiary' }, // TODO pending confirmation that this is necessary
       tokens: {
-        color: palette.color.greyShuttle
+        color: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { size: 'eyebrow' },
       tokens: {
-        color: palette.color.greyCharcoal
+        color: '{palette.color.greyCharcoal}'
       }
     },
     {
       if: { size: 'eyebrow', colour: 'secondary' },
       tokens: {
-        color: palette.color.purpleTelus
+        color: '{palette.color.purpleTelus}'
       }
     },
     {
       if: { inverse: true },
       tokens: {
-        color: palette.color.white
+        color: '{palette.color.white}'
       }
     },
 
@@ -117,21 +111,20 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'display1' },
       tokens: {
-        fontSize: palette.fontSize.size40,
+        fontSize: '{palette.fontSize.size40}',
 
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
+        fontWeight: '{palette.fontWeight.weight300}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio6to5,
-        letterSpacing: palette.letterSpacing.medium
+        lineHeight: '{palette.lineHeight.ratio6to5}',
+        letterSpacing: '{palette.letterSpacing.medium}'
       }
     },
     {
       if: { size: 'display1', viewport: ['lg', 'xl'] },
       tokens: {
-        fontSize: palette.fontSize.size64,
-        lineHeight: palette.lineHeight.ratio9to8
+        fontSize: '{palette.fontSize.size64}',
+        lineHeight: '{palette.lineHeight.ratio9to8}'
       }
     },
 
@@ -139,27 +132,25 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'display2' },
       tokens: {
-        fontSize: palette.fontSize.size36,
+        fontSize: '{palette.fontSize.size36}',
 
-        // TODO: replace with font token
-        fontWeight: '400',
-        // font: palette.font.HelveticaNow[400]
+        fontWeight: '{palette.fontWeight.weight400}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        letterSpacing: palette.letterSpacing.medium,
-        lineHeight: palette.lineHeight.ratio11to9
+        letterSpacing: '{palette.letterSpacing.medium}',
+        lineHeight: '{palette.lineHeight.ratio11to9}'
       }
     },
     {
       if: { size: 'display2', viewport: ['lg', 'xl'] },
       tokens: {
-        fontSize: palette.fontSize.size56,
+        fontSize: '{palette.fontSize.size56}',
 
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
+        fontWeight: '{palette.fontWeight.weight300}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio8to7,
-        letterSpacing: palette.letterSpacing.condensed
+        lineHeight: '{palette.lineHeight.ratio8to7}',
+        letterSpacing: '{palette.letterSpacing.condensed}'
       }
     },
 
@@ -167,22 +158,21 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h1' },
       tokens: {
-        fontSize: palette.fontSize.size28,
-        lineHeight: palette.lineHeight.ratio9to7,
-        letterSpacing: palette.letterSpacing.loose
+        fontSize: '{palette.fontSize.size28}',
+        lineHeight: '{palette.lineHeight.ratio9to7}',
+        letterSpacing: '{palette.letterSpacing.loose}'
       }
     },
     {
       if: { size: 'h1', viewport: ['lg', 'xl'] },
       tokens: {
-        fontSize: palette.fontSize.size40,
+        fontSize: '{palette.fontSize.size40}',
 
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
+        fontWeight: '{palette.fontWeight.weight300}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio6to5,
-        letterSpacing: palette.letterSpacing.medium
+        lineHeight: '{palette.lineHeight.ratio6to5}',
+        letterSpacing: '{palette.letterSpacing.medium}'
       }
     },
 
@@ -190,21 +180,20 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h2' },
       tokens: {
-        fontSize: palette.fontSize.size24,
+        fontSize: '{palette.fontSize.size24}',
 
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
+        fontWeight: '{palette.fontWeight.weight500}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio4to3
+        lineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
     {
       if: { size: 'h2', viewport: ['lg', 'xl'] },
       tokens: {
-        fontSize: palette.fontSize.size28,
-        lineHeight: palette.lineHeight.ratio9to7,
-        letterSpacing: palette.letterSpacing.loose
+        fontSize: '{palette.fontSize.size28}',
+        lineHeight: '{palette.lineHeight.ratio9to7}',
+        letterSpacing: '{palette.letterSpacing.loose}'
       }
     },
 
@@ -212,20 +201,19 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h3' },
       tokens: {
-        fontSize: palette.fontSize.size20,
+        fontSize: '{palette.fontSize.size20}',
 
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
+        fontWeight: '{palette.fontWeight.weight500}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio7to5
+        lineHeight: '{palette.lineHeight.ratio7to5}'
       }
     },
     {
       if: { size: 'h3', viewport: ['lg', 'xl'] },
       tokens: {
-        fontSize: palette.fontSize.size24,
-        lineHeight: palette.lineHeight.ratio4to3
+        fontSize: '{palette.fontSize.size24}',
+        lineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
 
@@ -233,13 +221,12 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h4' },
       tokens: {
-        fontSize: palette.fontSize.size16,
+        fontSize: '{palette.fontSize.size16}',
 
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
+        fontWeight: '{palette.fontWeight.weight500}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio3to2
+        lineHeight: '{palette.lineHeight.ratio3to2}'
       }
     },
 
@@ -247,13 +234,12 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h5' },
       tokens: {
-        fontSize: palette.fontSize.size14,
+        fontSize: '{palette.fontSize.size14}',
 
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
+        fontWeight: '{palette.fontWeight.weight500}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio9to7
+        lineHeight: '{palette.lineHeight.ratio9to7}'
       }
     },
 
@@ -261,13 +247,12 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'h6' },
       tokens: {
-        fontSize: palette.fontSize.size12,
+        fontSize: '{palette.fontSize.size12}',
 
-        // TODO: replace with font token
-        fontWeight: '700',
-        // font: palette.font.HelveticaNow[700]
+        fontWeight: '{palette.fontWeight.weight700}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio4to3
+        lineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
 
@@ -275,14 +260,14 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'large' },
       tokens: {
-        fontSize: palette.fontSize.size20,
-        lineHeight: palette.lineHeight.ratio8to5
+        fontSize: '{palette.fontSize.size20}',
+        lineHeight: '{palette.lineHeight.ratio8to5}'
       }
     },
     {
       if: { size: 'large', compact: true },
       tokens: {
-        lineHeight: palette.lineHeight.ratio6to5
+        lineHeight: '{palette.lineHeight.ratio6to5}'
       }
     },
 
@@ -292,21 +277,21 @@ accessibility or SEO-related properties; use the heading prop if text should be
       description:
         "The compact line height for the 'default' font size, but doesn't apply for any other styles",
       tokens: {
-        lineHeight: palette.lineHeight.ratio5to4
+        lineHeight: '{palette.lineHeight.ratio5to4}'
       }
     },
     /* small */
     {
       if: { size: 'small' },
       tokens: {
-        fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.ratio10to7
+        fontSize: '{palette.fontSize.size14}',
+        lineHeight: '{palette.lineHeight.ratio10to7}'
       }
     },
     {
       if: { size: 'small', compact: true },
       tokens: {
-        lineHeight: palette.lineHeight.ratio8to7
+        lineHeight: '{palette.lineHeight.ratio8to7}'
       }
     },
 
@@ -314,13 +299,12 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'micro' },
       tokens: {
-        fontSize: palette.fontSize.size12,
+        fontSize: '{palette.fontSize.size12}',
 
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
+        fontWeight: '{palette.fontWeight.weight500}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        lineHeight: palette.lineHeight.ratio4to3
+        lineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
 
@@ -328,14 +312,13 @@ accessibility or SEO-related properties; use the heading prop if text should be
     {
       if: { size: 'eyebrow' },
       tokens: {
-        fontSize: palette.fontSize.size14,
+        fontSize: '{palette.fontSize.size14}',
 
-        // TODO: replace with font token
-        fontWeight: '700',
-        // font: palette.font.HelveticaNow[700]
+        fontWeight: '{palette.fontWeight.weight700}',
+        fontName: '{palette.fontName.HelveticaNow}',
 
-        textTransform: system.textTransform.uppercase,
-        lineHeight: palette.lineHeight.ratio9to7
+        textTransform: '{system.textTransform.uppercase}',
+        lineHeight: '{palette.lineHeight.ratio9to7}'
       }
     },
 
@@ -346,9 +329,8 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: ['large', null, 'small', 'micro'], bold: true },
       description: 'Bold is only available on body text styles, not headings',
       tokens: {
-        // TODO: replace with font token
-        fontWeight: '700'
-        // font: palette.font.HelveticaNow[700]
+        fontWeight: '{palette.fontWeight.weight700}',
+        fontName: '{palette.fontName.HelveticaNow}'
       }
     }
   ]

package/src/components/index.js

@@ -1,37 +1,53 @@
-export { default as ActivityIndicator } from './ActivityIndicator'
-export { default as Box } from './Box'
-export { default as Button } from './Button'
-export { default as ButtonGroup } from './ButtonGroup'
-export { default as ButtonGroupItem } from './ButtonGroupItem'
-export { default as Card } from './Card'
-export { default as Checkbox } from './Checkbox'
-export { default as ChevronLink } from './ChevronLink'
-export { default as Divider } from './Divider'
-export { default as ExpandCollapse } from './ExpandCollapse'
-export { default as ExpandCollapseControl } from './ExpandCollapseControl'
-export { default as ExpandCollapsePanel } from './ExpandCollapsePanel'
-export { default as Feedback } from './Feedback'
-export { default as Icon } from './Icon'
-export { default as InputLabel } from './InputLabel'
-export { default as InputSupports } from './InputSupports'
-export { default as Link } from './Link'
-export { default as List } from './List'
-export { default as Pagination } from './Pagination'
-export { default as PaginationPageButton } from './PaginationPageButton'
-export { default as PaginationSideButton } from './PaginationSideButton'
-export { default as Radio } from './Radio'
-export { default as Select } from './Select'
-export { default as SideNav } from './SideNav'
-export { default as SideNavItem } from './SideNavItem'
-export { default as SideNavItemsGroup } from './SideNavItemsGroup'
-export { default as Skeleton } from './Skeleton'
-export { default as StackView } from './StackView'
-export { default as Tags } from './Tags'
-export { default as TagsItem } from './TagsItem'
-export { default as TextArea } from './TextArea'
-export { default as TextInput } from './TextInput'
-export { default as ToggleSwitch } from './ToggleSwitch'
-export { default as Tooltip } from './Tooltip'
-export { default as TooltipButton } from './TooltipButton'
-export { default as Typography } from './Typography'
-export { default as spacingScale } from './spacingScale'
+module.exports = {
+  ActivityIndicator: require('./ActivityIndicator'),
+  Box: require('./Box'),
+  Button: require('./Button'),
+  ButtonGroup: require('./ButtonGroup'),
+  ButtonGroupItem: require('./ButtonGroupItem'),
+  Card: require('./Card'),
+  Checkbox: require('./Checkbox'),
+  CheckboxGroup: require('./CheckboxGroup'),
+  ChevronLink: require('./ChevronLink'),
+  Divider: require('./Divider'),
+  ExpandCollapse: require('./ExpandCollapse'),
+  ExpandCollapseControl: require('./ExpandCollapseControl'),
+  ExpandCollapsePanel: require('./ExpandCollapsePanel'),
+  Feedback: require('./Feedback'),
+  Icon: require('./Icon'),
+  InputLabel: require('./InputLabel'),
+  InputSupports: require('./InputSupports'),
+  Link: require('./Link'),
+  List: require('./List'),
+  Modal: require('./Modal'),
+  Notification: require('./Notification'),
+  Pagination: require('./Pagination'),
+  PaginationPageButton: require('./PaginationPageButton'),
+  PaginationSideButton: require('./PaginationSideButton'),
+  Progress: require('./Progress'),
+  ProgressBar: require('./ProgressBar'),
+  Radio: require('./Radio'),
+  RadioCard: require('./RadioCard'),
+  RadioCardGroup: require('./RadioCardGroup'),
+  RadioGroup: require('./RadioGroup'),
+  Search: require('./Search'),
+  SearchButton: require('./SearchButton'),
+  StepTracker: require('./StepTracker'),
+  Tabs: require('./Tabs'),
+  TabsItem: require('./TabsItem'),
+  TabsScrollButton: require('./TabsScrollButton'),
+  TextArea: require('./TextArea'),
+  TextInput: require('./TextInput'),
+  ToggleSwitch: require('./ToggleSwitch'),
+  Tooltip: require('./Tooltip'),
+  TooltipButton: require('./TooltipButton'),
+  Typography: require('./Typography'),
+  Select: require('./Select'),
+  SideNav: require('./SideNav'),
+  SideNavItem: require('./SideNavItem'),
+  SideNavItemsGroup: require('./SideNavItemsGroup'),
+  Skeleton: require('./Skeleton'),
+  StackView: require('./StackView'),
+  Tags: require('./Tags'),
+  TagsItem: require('./TagsItem'),
+  spacingScale: require('./spacingScale')
+}

package/src/components/spacingScale.js

@@ -1,36 +1,33 @@
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
+module.exports = {
   appearances: {
-    space: appearances.spacingScale.space,
-    viewport: appearances.system.viewport
+    space: '{appearances.spacingScale.space}',
+    viewport: '{appearances.system.viewport}'
   },
   // Largest spacings first, so they apply any time space >= highest index'
-  tokens: { size: palette.size.size96 },
+  tokens: { size: '{palette.size.size96}' },
   rules: [
-    { if: { viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size120 } },
+    { if: { viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size120}' } },
 
-    { if: { space: 11 }, tokens: { size: palette.size.size96 } },
-    { if: { space: 10 }, tokens: { size: palette.size.size80 } },
-    { if: { space: 9 }, tokens: { size: palette.size.size64 } },
-    { if: { space: 8 }, tokens: { size: palette.size.size48 } },
-    { if: { space: 7 }, tokens: { size: palette.size.size40 } },
-    { if: { space: 6 }, tokens: { size: palette.size.size36 } },
-    { if: { space: 5 }, tokens: { size: palette.size.size32 } },
-    { if: { space: 4 }, tokens: { size: palette.size.size24 } },
-    { if: { space: 3 }, tokens: { size: palette.size.size16 } },
-    { if: { space: 2 }, tokens: { size: palette.size.size8 } },
-    { if: { space: 1 }, tokens: { size: palette.size.size4 } },
+    { if: { space: 11 }, tokens: { size: '{palette.size.size96}' } },
+    { if: { space: 10 }, tokens: { size: '{palette.size.size80}' } },
+    { if: { space: 9 }, tokens: { size: '{palette.size.size64}' } },
+    { if: { space: 8 }, tokens: { size: '{palette.size.size48}' } },
+    { if: { space: 7 }, tokens: { size: '{palette.size.size40}' } },
+    { if: { space: 6 }, tokens: { size: '{palette.size.size36}' } },
+    { if: { space: 5 }, tokens: { size: '{palette.size.size32}' } },
+    { if: { space: 4 }, tokens: { size: '{palette.size.size24}' } },
+    { if: { space: 3 }, tokens: { size: '{palette.size.size16}' } },
+    { if: { space: 2 }, tokens: { size: '{palette.size.size8}' } },
+    { if: { space: 1 }, tokens: { size: '{palette.size.size4}' } },
 
-    { if: { space: 11, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size120 } },
-    { if: { space: 10, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size96 } },
-    { if: { space: 9, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size72 } },
-    { if: { space: 8, viewport: ['lg', 'xl'] }, tokens: { size: palette.size.size64 } },
-    { if: { space: 7 }, tokens: { size: palette.size.size48 } },
-    { if: { space: 6 }, tokens: { size: palette.size.size40 } },
+    { if: { space: 11, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size120}' } },
+    { if: { space: 10, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size96}' } },
+    { if: { space: 9, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size72}' } },
+    { if: { space: 8, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size64}' } },
+    { if: { space: 7, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size48}' } },
+    { if: { space: 6, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size40}' } },
 
     // Zero spacing last; overrides all other rules when space === 0
-    { if: { space: 0 }, tokens: { size: palette.size.size0 } }
+    { if: { space: 0 }, tokens: { size: '{palette.size.size0}' } }
   ]
 }

package/src/index.js

@@ -1,5 +1,5 @@
-import packageJson from '../package.json'
-import * as components from './components'
+const packageJson = require('../package.json')
+const components = require('./components')
 
 // TODO: replace this with theme build tooling and schema checks as part of
 // https://github.com/telus/universal-design-system/issues/92
@@ -14,4 +14,4 @@ const alliumTheme = {
   components
 }
 
-export default alliumTheme
+module.exports = alliumTheme

package/lib/components/ActivityIndicator.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  appearances: {
-    size: {
-      values: ['large'],
-      description: 'used for full-screen spinners',
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: _paletteAllium.default.size.size20,
-    thickness: _paletteAllium.default.border.border2,
-    color: _paletteAllium.default.color.greenAccessible
-  },
-  rules: [{
-    if: {
-      size: 'large'
-    },
-    tokens: {
-      thickness: _paletteAllium.default.border.border4,
-      size: _paletteAllium.default.size.size40
-    }
-  }]
-};
-exports.default = _default;