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

package/src/components/ExpandCollapse.js

@@ -1,18 +1,12 @@
 import palette from '@telus-uds/palette-allium'
-import { getExpandCollapseSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
-const ExpandCollapse = {
+export default {
   appearances: {},
   tokens: {
     borderColor: palette.color.greyCloud,
     borderWidth: palette.border.border1,
-    borderStyle: 'solid'
+    borderStyle: system.borderStyle.solid
   },
   rules: []
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ExpandCollapse, getExpandCollapseSchema(palette), 'expand-collapse')
-
-export default ExpandCollapse

package/src/components/ExpandCollapseControl.js

@@ -1,42 +1,29 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  getExpandCollapseControlSchema,
-  validateComponentTheme,
-  expandCollapseControlAppearances
-} from '@telus-uds/tools-theme'
+import { appearances } from '@telus-uds/system-themes/schema'
 
 import CaretUp from '@telus-uds/palette-allium/build/rn/icons/caret-up.icon.svg'
 import CaretDown from '@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
-const ExpandCollapseControl = {
+export default {
   appearances: {
-    expanded: expandCollapseControlAppearances.expanded
+    expanded: appearances.ExpandCollapseControl.expanded
   },
   tokens: {
     icon: CaretDown,
     iconColor: palette.color.greenAccessible,
     iconSize: palette.size.size24,
     iconGap: palette.size.size8,
-    iconPosition: 'left',
-    verticalAlign: 'top',
-    justifyContent: 'flex-start',
+    iconPosition: system.position.left,
+    verticalAlign: system.verticalAlign.top,
+    justifyContent: system.flexJustifyContent.flexStart,
     paddingLeft: palette.size.size8,
     paddingRight: palette.size.size16,
     paddingTop: palette.size.size16,
     paddingBottom: palette.size.size16,
-    borderWidth: palette.border.border0,
+    borderWidth: system.border.zero,
     borderColor: palette.color.transparent,
     backgroundColor: palette.color.transparent
   },
   rules: [{ if: { expanded: true }, tokens: { icon: CaretUp } }]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapseControl,
-  getExpandCollapseControlSchema(palette),
-  'expand-collapse-control'
-)
-
-export default ExpandCollapseControl

package/src/components/ExpandCollapsePanel.js

@@ -1,12 +1,11 @@
 import palette from '@telus-uds/palette-allium'
-import { getExpandCollapsePanelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
 
-const ExpandCollapsePanel = {
+export default {
   appearances: {},
   tokens: {
     // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
+    expandDuration: palette.duration.duration300,
+    collapseDuration: palette.duration.duration250,
     contentPaddingLeft: palette.size.size40,
     contentPaddingRight: palette.size.size16,
     contentPaddingTop: palette.size.size0,
@@ -14,13 +13,3 @@ const ExpandCollapsePanel = {
   },
   rules: []
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapsePanel,
-  getExpandCollapsePanelSchema(palette),
-  'expand-collapse-panel'
-)
-
-export default ExpandCollapsePanel

package/src/components/Feedback.js

@@ -1,15 +1,18 @@
 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 errorIcon from '@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg'
 import successIcon from '@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg'
-import {
-  feedbackAppearances,
-  getFeedbackSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
 
-const Feedback = {
-  appearances: feedbackAppearances,
+export default {
+  appearances: {
+    validation: appearances.Feedback.validation,
+    icon: {
+      values: [true],
+      type: 'variant'
+    }
+  },
   tokens: {
     backgroundColor: palette.color.greyAthens,
     borderColor: palette.color.greyMystic,
@@ -19,23 +22,27 @@ const Feedback = {
     paddingBottom: palette.size.size12,
     paddingLeft: palette.size.size16,
     paddingRight: palette.size.size16,
-    space: 2,
+    space: system.integer[2],
 
     color: palette.color.greyThunder,
+
+    // TODO: replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     lineHeight: palette.lineHeight.ratio3to2,
     titleFontSize: palette.fontSize.size16,
     contentFontSize: palette.fontSize.size14,
 
-    icon: null,
+    icon: system.icon.none,
     iconSize: palette.fontSize.size24,
     iconColor: palette.color.transparent,
     iconGap: palette.size.size8
   },
   rules: [
     {
-      if: { state: 'success' },
+      if: { validation: 'success' },
       tokens: {
         backgroundColor: palette.color.greenPanache,
         borderColor: palette.color.greenPanache,
@@ -43,7 +50,7 @@ const Feedback = {
       }
     },
     {
-      if: { state: 'error' },
+      if: { validation: 'error' },
       tokens: {
         backgroundColor: palette.color.redLight,
         borderColor: palette.color.redLight,
@@ -51,14 +58,14 @@ const Feedback = {
       }
     },
     {
-      if: { state: 'success', icon: true },
+      if: { validation: 'success', icon: true },
       tokens: {
         icon: successIcon,
         iconColor: palette.color.greenAccessible
       }
     },
     {
-      if: { state: 'error', icon: true },
+      if: { validation: 'error', icon: true },
       tokens: {
         icon: errorIcon,
         iconColor: palette.color.red
@@ -66,9 +73,3 @@ const Feedback = {
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Feedback, getFeedbackSchema(palette))
-
-export default Feedback

package/src/components/Icon.js

@@ -1,4 +1,5 @@
 import palette from '@telus-uds/palette-allium'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
 export default {
   appearances: {
@@ -12,14 +13,16 @@ export default {
     }
   },
   tokens: {
-    size: 24,
-    color: palette.color.greyCharcoal
+    size: palette.size.size24,
+    color: palette.color.greyCharcoal,
+    translateX: system.size.zero,
+    translateY: system.size.zero
   },
   rules: [
     {
       if: { size: 'small' },
       tokens: {
-        size: 20
+        size: palette.size.size20
       }
     },
     {

package/src/components/InputLabel.js

@@ -1,28 +1,29 @@
 import palette from '@telus-uds/palette-allium'
-import { getInputLabelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
 
-const InputLabel = {
+export default {
   appearances: {},
   tokens: {
     gap: palette.size.size8,
 
     color: palette.color.greyCharcoal,
+
+    // TODO: replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '700',
+    // font: palette.font.HelveticaNow[700]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2,
 
     hintColor: palette.color.greyCharcoal,
+
+    // TODO: replace with font token
     hintFontName: Object.keys(palette.font)[0],
     hintFontWeight: '400',
+    // hintFont: palette.font.HelveticaNow[700],
+
     hintFontSize: palette.fontSize.size14,
     hintLineHeight: palette.lineHeight.ratio7to5
   },
   rules: []
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(InputLabel, getInputLabelSchema(palette), 'input-label')
-
-export default InputLabel

package/src/components/InputSupports.js

@@ -0,0 +1,9 @@
+import system from '@telus-uds/system-themes/src/tokens/rn'
+
+export default {
+  appearances: {},
+  tokens: {
+    space: system.integer[1]
+  },
+  rules: []
+}

package/src/components/Link.js

@@ -1,7 +1,8 @@
 import palette from '@telus-uds/palette-allium'
-import { getLinkSchema, validateComponentTheme, linkAppearances } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const Link = {
+export default {
   appearances: {
     size: {
       description:
@@ -25,47 +26,65 @@ const Link = {
       values: [true],
       type: 'variant'
     },
-    iconPosition: linkAppearances.iconPosition,
-    focus: linkAppearances.focus,
-    hover: linkAppearances.hover
+    iconPosition: appearances.Link.iconPosition,
+    focus: appearances.Link.focus,
+    hover: appearances.Link.hover,
+    pressed: appearances.Link.pressed
   },
   tokens: {
     color: palette.color.greenAccessible,
 
-    textLine: 'underline',
-    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,
 
     // Same as default size Typography
+    // TODO replace with single font token
     blockFontWeight: '400',
+    blockFontName: Object.keys(palette.font)[0],
+    // bockFont: palette.font.HelveticaNow[400]
+
     blockFontSize: palette.fontSize.size16,
     blockLineHeight: palette.lineHeight.ratio3to2,
-    blockFontName: Object.keys(palette.font)[0],
-    alignSelf: 'flex-start',
+    alignSelf: system.flexAlign.flexStart,
 
-    icon: null,
+    icon: system.icon.none,
     iconSize: palette.fontSize.size24,
-    iconGapBefore: palette.size.size4,
-    iconGapAfter: palette.size.size8,
-    iconTranslateX: 0,
-    iconTranslateY: 0
+    iconSpace: system.integer[1],
+    iconTranslateX: system.size.zero,
+    iconTranslateY: system.size.zero
   },
   rules: [
+    {
+      if: { iconPosition: 'left' },
+      tokens: {
+        iconSpace: system.integer[2]
+      }
+    },
     // Initial interaction states
     {
       if: { focus: true },
       tokens: {
         outerBorderColor: palette.color.greenAccessible,
-        outerBorderOutline: 'none'
+        outerBorderOutline: system.borderStyle.none
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        textLine: system.textLine.none,
+        color: palette.color.greenSanFelix
       }
     },
     {
       if: { pressed: true },
       tokens: {
+        textLine: system.textLine.none,
         color: palette.color.greenDarkFern
       }
     },
@@ -97,7 +116,10 @@ const Link = {
       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
       }
@@ -147,7 +169,7 @@ const Link = {
       if: { inverse: true, focus: true },
       tokens: {
         outerBorderColor: palette.color.white,
-        outerBorderOutline: 'none'
+        outerBorderOutline: system.borderStyle.none
       }
     },
     {
@@ -182,14 +204,8 @@ const Link = {
       if: { light: true, hover: true },
       tokens: {
         color: palette.color.greyCharcoal,
-        textLine: 'none'
+        textLine: system.textLine.none
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Link, getLinkSchema(palette), 'Link')
-
-export default Link

package/src/components/List.js

@@ -0,0 +1,70 @@
+import palette from '@telus-uds/palette-allium'
+
+export default {
+  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: '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
+  },
+  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/Pagination.js

@@ -1,18 +1,21 @@
 import palette from '@telus-uds/palette-allium'
-import { getPaginationSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import { appearances } from '@telus-uds/system-constants'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const Pagination = {
+export default {
   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,
+    // TODO: replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2
   },
@@ -20,14 +23,8 @@ const Pagination = {
     {
       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,18 +1,13 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationPageButtonSchema,
-  lineOptions,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationPageButton = {
+export default {
   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,
@@ -31,18 +26,23 @@ const PaginationPageButton = {
     outerBorderGap: palette.border.border4,
 
     color: palette.color.greyShuttle,
+
+    // TODO: replace this with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline
+    textLine: system.textLine.underline,
+    textAlign: system.flexJustifyContent.center
   },
   rules: [
     {
       if: { hover: true },
       tokens: {
         borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -57,7 +57,7 @@ const PaginationPageButton = {
       tokens: {
         backgroundColor: palette.color.greyShuttle,
         color: palette.color.white,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -69,13 +69,3 @@ const PaginationPageButton = {
     }
   ]
 }
-
-// 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,25 +1,18 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationSideButtonSchema,
-  lineOptions,
-  paginationSideButtonAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+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'
-import { appearances } from '@telus-uds/system-constants'
 
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationSideButton = {
+export default {
   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,
@@ -33,15 +26,22 @@ const PaginationSideButton = {
     outerBorderColor: palette.color.transparent,
 
     color: palette.color.greyShuttle,
+
+    // TODO replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline,
+    textLine: system.textLine.underline,
 
-    icon: null,
+    icon: system.icon.none,
     iconSize: palette.fontSize.size24,
-    iconDisplace: palette.size.size0
+    iconDisplace: palette.size.size0,
+
+    width: system.size.none,
+    textAlign: system.flexJustifyContent.center
   },
   rules: [
     {
@@ -50,14 +50,14 @@ const PaginationSideButton = {
         borderRadius: palette.radius.pill32,
         paddingTop: palette.size.size4,
         paddingBottom: palette.size.size4,
-        width: 32
+        width: palette.size.size32
       }
     },
     {
       if: { hover: true },
       tokens: {
         borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none,
+        textLine: system.textLine.none,
         iconDisplace: palette.size.size4
       }
     },
@@ -73,7 +73,7 @@ const PaginationSideButton = {
       tokens: {
         backgroundColor: palette.color.greyShuttle,
         color: palette.color.white,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -97,13 +97,3 @@ const PaginationSideButton = {
     }
   ]
 }
-
-// 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