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

package/src/components/Checkbox.js

@@ -1,64 +1,58 @@
-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 checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
-
-export default {
+module.exports = {
   appearances: {
-    checked: appearances.Checkbox.checked,
-    error: appearances.Checkbox.error,
-    focus: appearances.Checkbox.focus,
-    hover: appearances.Checkbox.hover,
-    inactive: appearances.Checkbox.inactive
+    checked: '{appearances.Checkbox.checked}',
+    error: '{appearances.Checkbox.error}',
+    focus: '{appearances.Checkbox.focus}',
+    hover: '{appearances.Checkbox.hover}',
+    inactive: '{appearances.Checkbox.inactive}'
   },
   tokens: {
-    containerBackgroundColor: palette.color.transparent,
-    containerMarginBottom: palette.size.size8,
-    feedbackMarginBottom: system.size.zero,
-    feedbackMarginTop: palette.size.size2,
-    feedbackPosition: system.position.bottom,
-    icon: checkmarkIcon,
-    iconBackgroundColor: palette.color.purpleDeluge,
-    iconColor: palette.color.white,
-    iconSize: palette.size.size16,
-    inputBackgroundColor: palette.color.white,
-    inputBorderColor: palette.color.greyShuttle,
-    inputBorderRadius: palette.radius.radius4,
-    inputBorderWidth: palette.border.border1,
-    inputHeight: palette.size.size20,
-    inputOutlineColor: system.color.none,
-    inputOutlineWidth: palette.border.none,
-    inputShadow: system.shadow.none,
-    inputWidth: 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
+    containerBackgroundColor: '{palette.color.transparent}',
+    feedbackMarginBottom: '{system.size.zero}',
+    feedbackMarginTop: '{palette.size.size2}',
+    feedbackPosition: '{system.position.bottom}',
+    icon: '{palette.icon.Checkmark}',
+    iconBackgroundColor: '{palette.color.purpleDeluge}',
+    iconColor: '{palette.color.white}',
+    iconSize: '{palette.size.size16}',
+    inputBackgroundColor: '{palette.color.white}',
+    inputBorderColor: '{palette.color.greyShuttle}',
+    inputBorderRadius: '{palette.radius.radius4}',
+    inputBorderWidth: '{palette.border.border1}',
+    inputHeight: '{palette.size.size20}',
+    inputOutlineColor: '{system.color.none}',
+    inputOutlineWidth: '{palette.border.none}',
+    inputShadow: '{system.shadow.none}',
+    inputWidth: '{palette.size.size20}',
+    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: { 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,
-        iconBackgroundColor: palette.color.greyMystic,
-        iconColor: palette.color.greyShuttle,
-        labelColor: palette.color.greyShuttle
+        inputBorderColor: '{palette.color.transparent}',
+        inputBackgroundColor: '{palette.color.greyMystic}',
+        iconBackgroundColor: '{palette.color.greyMystic}',
+        iconColor: '{palette.color.greyShuttle}',
+        labelColor: '{palette.color.greyShuttle}'
       }
     }
   ]

package/src/components/CheckboxGroup.js

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

package/src/components/ChevronLink.js

@@ -1,19 +1,12 @@
-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: {
-    hover: appearances.ChevronLink.hover
+    hover: '{appearances.ChevronLink.hover}'
   },
   tokens: {
-    leftIcon: leftArrowIcon,
-    rightIcon: rightArrowIcon,
-    iconDisplace: palette.size.size0,
-    iconSpace: system.integer[0]
+    leftIcon: '{palette.icon.ArrowLeft}',
+    rightIcon: '{palette.icon.ArrowRight}',
+    iconDisplace: '{palette.size.size0}',
+    iconSpace: '{system.integer.0}'
   },
-  rules: [{ if: { hover: true }, tokens: { iconDisplace: palette.size.size4 } }]
+  rules: [{ if: { hover: true }, tokens: { iconDisplace: '{palette.size.size4}' } }]
 }

package/src/components/Divider.js

@@ -1,6 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {
     weight: {
       values: ['thick'],
@@ -14,20 +12,20 @@ export default {
     }
   },
   tokens: {
-    width: palette.border.border1,
-    color: palette.color.greyShuttle
+    width: '{palette.border.border1}',
+    color: '{palette.color.greyShuttle}'
   },
   rules: [
     {
       if: { weight: 'thick' },
       tokens: {
-        width: palette.border.border2
+        width: '{palette.border.border2}'
       }
     },
     {
       if: { decorative: true },
       tokens: {
-        color: palette.color.greyCloud
+        color: '{palette.color.greyCloud}'
       }
     }
   ]

package/src/components/ExpandCollapse.js

@@ -1,12 +1,9 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
+module.exports = {
   appearances: {},
   tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: system.borderStyle.solid
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderStyle: '{system.borderStyle.solid}'
   },
   rules: []
 }

package/src/components/ExpandCollapseControl.js

@@ -1,29 +1,22 @@
-import palette from '@telus-uds/palette-allium'
-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'
-
-export default {
+module.exports = {
   appearances: {
-    expanded: appearances.ExpandCollapseControl.expanded
+    expanded: '{appearances.ExpandCollapseControl.expanded}'
   },
   tokens: {
-    icon: CaretDown,
-    iconColor: palette.color.greenAccessible,
-    iconSize: palette.size.size24,
-    iconGap: palette.size.size8,
-    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: system.border.zero,
-    borderColor: palette.color.transparent,
-    backgroundColor: palette.color.transparent
+    icon: '{palette.icon.CaretDown}',
+    iconColor: '{palette.color.greenAccessible}',
+    iconSize: '{palette.size.size24}',
+    iconGap: '{palette.size.size8}',
+    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: '{system.border.zero}',
+    borderColor: '{palette.color.transparent}',
+    backgroundColor: '{palette.color.transparent}'
   },
-  rules: [{ if: { expanded: true }, tokens: { icon: CaretUp } }]
+  rules: [{ if: { expanded: true }, tokens: { icon: '{palette.icon.CaretUp}' } }]
 }

package/src/components/ExpandCollapsePanel.js

@@ -1,15 +1,13 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {},
   tokens: {
     // animate slightly faster when closing
-    expandDuration: palette.duration.duration300,
-    collapseDuration: palette.duration.duration250,
-    contentPaddingLeft: palette.size.size40,
-    contentPaddingRight: palette.size.size16,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size16
+    expandDuration: '{palette.duration.duration300}',
+    collapseDuration: '{palette.duration.duration250}',
+    contentPaddingLeft: '{palette.size.size40}',
+    contentPaddingRight: '{palette.size.size16}',
+    contentPaddingTop: '{palette.size.size0}',
+    contentPaddingBottom: '{palette.size.size16}'
   },
   rules: []
 }

package/src/components/Feedback.js

@@ -1,74 +1,65 @@
-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'
-
-export default {
+module.exports = {
   appearances: {
-    validation: appearances.Feedback.validation,
+    validation: '{appearances.Feedback.validation}',
     icon: {
       values: [true],
       type: 'variant'
     }
   },
   tokens: {
-    backgroundColor: palette.color.greyAthens,
-    borderColor: palette.color.greyMystic,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    space: system.integer[2],
+    backgroundColor: '{palette.color.greyAthens}',
+    borderColor: '{palette.color.greyMystic}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.radius4}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    space: '{system.integer.2}',
 
-    color: palette.color.greyThunder,
+    color: '{palette.color.greyThunder}',
 
-    // 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}',
 
-    lineHeight: palette.lineHeight.ratio3to2,
-    titleFontSize: palette.fontSize.size16,
-    contentFontSize: palette.fontSize.size14,
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    titleFontSize: '{palette.fontSize.size16}',
+    contentFontSize: '{palette.fontSize.size14}',
 
-    icon: system.icon.none,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent,
-    iconGap: palette.size.size8
+    icon: '{system.icon.none}',
+    iconSize: '{palette.fontSize.size24}',
+    iconColor: '{palette.color.transparent}',
+    iconGap: '{palette.size.size8}'
   },
   rules: [
     {
       if: { validation: 'success' },
       tokens: {
-        backgroundColor: palette.color.greenPanache,
-        borderColor: palette.color.greenPanache,
-        color: palette.color.greenDarkFern
+        backgroundColor: '{palette.color.greenPanache}',
+        borderColor: '{palette.color.greenPanache}',
+        color: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { validation: 'error' },
       tokens: {
-        backgroundColor: palette.color.redLight,
-        borderColor: palette.color.redLight,
-        color: palette.color.red
+        backgroundColor: '{palette.color.redLight}',
+        borderColor: '{palette.color.redLight}',
+        color: '{palette.color.red}'
       }
     },
     {
       if: { validation: 'success', icon: true },
       tokens: {
-        icon: successIcon,
-        iconColor: palette.color.greenAccessible
+        icon: '{palette.icon.NotificationSuccess}',
+        iconColor: '{palette.color.greenAccessible}'
       }
     },
     {
       if: { validation: 'error', icon: true },
       tokens: {
-        icon: errorIcon,
-        iconColor: palette.color.red
+        icon: '{palette.icon.NotificationError}',
+        iconColor: '{palette.color.red}'
       }
     }
   ]

package/src/components/Icon.js

@@ -1,7 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
+module.exports = {
   appearances: {
     size: {
       values: ['small'],
@@ -13,22 +10,23 @@ export default {
     }
   },
   tokens: {
-    size: palette.size.size24,
-    color: palette.color.greyCharcoal,
-    translateX: system.size.zero,
-    translateY: system.size.zero
+    size: '{palette.size.size24}',
+    color: '{palette.color.greyCharcoal}',
+    translateX: '{system.size.zero}',
+    translateY: '{system.size.zero}',
+    scale: '{system.integer.1}'
   },
   rules: [
     {
       if: { size: 'small' },
       tokens: {
-        size: palette.size.size20
+        size: '{palette.size.size20}'
       }
     },
     {
       if: { rank: 'primary' },
       tokens: {
-        color: palette.color.purpleTelus
+        color: '{palette.color.purpleTelus}'
       }
     }
   ]

package/src/components/InputLabel.js

@@ -1,29 +1,23 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {},
   tokens: {
-    gap: palette.size.size8,
+    gap: '{palette.size.size8}',
 
-    color: palette.color.greyCharcoal,
+    color: '{palette.color.greyCharcoal}',
 
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow[700]
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight700}',
 
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
 
-    hintColor: palette.color.greyCharcoal,
+    hintColor: '{palette.color.greyCharcoal}',
 
-    // TODO: replace with font token
-    hintFontName: Object.keys(palette.font)[0],
-    hintFontWeight: '400',
-    // hintFont: palette.font.HelveticaNow[700],
+    hintFontName: '{palette.fontName.HelveticaNow}',
+    hintFontWeight: '{palette.fontWeight.weight400}',
 
-    hintFontSize: palette.fontSize.size14,
-    hintLineHeight: palette.lineHeight.ratio7to5
+    hintFontSize: '{palette.fontSize.size14}',
+    hintLineHeight: '{palette.lineHeight.ratio7to5}'
   },
   rules: []
 }

package/src/components/InputSupports.js

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