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

package/src/components/Checkbox.js

@@ -0,0 +1,59 @@
+module.exports = {
+  appearances: {
+    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}',
+    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}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        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}'
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,12 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.ChevronLink.hover}'
+  },
+  tokens: {
+    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}' } }]
+}

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,18 +1,9 @@
-import palette from '@telus-uds/palette-allium'
-import { getExpandCollapseSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const ExpandCollapse = {
+module.exports = {
   appearances: {},
   tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid'
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    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,22 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  getExpandCollapseControlSchema,
-  validateComponentTheme,
-  expandCollapseControlAppearances
-} from '@telus-uds/tools-theme'
-
-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'
-
-const ExpandCollapseControl = {
+module.exports = {
   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',
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    borderWidth: palette.border.border0,
-    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}' } }]
 }
-
-// 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,26 +1,13 @@
-import palette from '@telus-uds/palette-allium'
-import { getExpandCollapsePanelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const ExpandCollapsePanel = {
+module.exports = {
   appearances: {},
   tokens: {
     // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    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: []
 }
-
-// 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

@@ -0,0 +1,66 @@
+module.exports = {
+  appearances: {
+    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}',
+
+    color: '{palette.color.greyThunder}',
+
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    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}'
+  },
+  rules: [
+    {
+      if: { validation: 'success' },
+      tokens: {
+        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}'
+      }
+    },
+    {
+      if: { validation: 'success', icon: true },
+      tokens: {
+        icon: '{palette.icon.NotificationSuccess}',
+        iconColor: '{palette.color.greenAccessible}'
+      }
+    },
+    {
+      if: { validation: 'error', icon: true },
+      tokens: {
+        icon: '{palette.icon.NotificationError}',
+        iconColor: '{palette.color.red}'
+      }
+    }
+  ]
+}

package/src/components/Icon.js

@@ -1,6 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {
     size: {
       values: ['small'],
@@ -12,20 +10,23 @@ 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}',
+    scale: '{system.integer.1}'
   },
   rules: [
     {
       if: { size: 'small' },
       tokens: {
-        size: 20
+        size: '{palette.size.size20}'
       }
     },
     {
       if: { rank: 'primary' },
       tokens: {
-        color: palette.color.purpleTelus
+        color: '{palette.color.purpleTelus}'
       }
     }
   ]

package/src/components/InputLabel.js

@@ -0,0 +1,23 @@
+module.exports = {
+  appearances: {},
+  tokens: {
+    gap: '{palette.size.size8}',
+
+    color: '{palette.color.greyCharcoal}',
+
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight700}',
+
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+
+    hintColor: '{palette.color.greyCharcoal}',
+
+    hintFontName: '{palette.fontName.HelveticaNow}',
+    hintFontWeight: '{palette.fontWeight.weight400}',
+
+    hintFontSize: '{palette.fontSize.size14}',
+    hintLineHeight: '{palette.lineHeight.ratio7to5}'
+  },
+  rules: []
+}

package/src/components/InputSupports.js

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

package/src/components/Link.js

@@ -1,12 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-import { getLinkSchema, validateComponentTheme, linkAppearances } 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'
-
-const { color, fontSize, lineHeight, font, border, radius, size } = palette
-
-const Link = {
+module.exports = {
   appearances: {
     size: {
       description:
@@ -27,63 +19,73 @@ const Link = {
     light: {
       description:
         'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
-      values: [true]
+      values: [true],
+      type: 'variant'
     },
-    component: linkAppearances.component,
-    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: color.greenAccessible,
+    color: '{palette.color.greenAccessible}',
 
-    textLine: 'underline',
-    textLineStyle: 'solid',
+    textLine: '{system.textLine.underline}',
+    textLineStyle: '{system.textLineStyle.solid}',
 
-    outerBorderColor: color.transparent,
-    outerBorderWidth: border.border2,
-    outerBorderGap: border.border2,
-    outerBorderRadius: radius.radius4,
+    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
-    blockFontWeight: '400',
-    blockFontSize: fontSize.size16,
-    blockLineHeight: lineHeight.ratio3to2,
-    blockFontName: Object.keys(font)[0],
+    blockFontWeight: '{palette.fontWeight.weight400}',
+    blockFontName: '{palette.fontName.HelveticaNow}',
+
+    blockFontSize: '{palette.fontSize.size16}',
+    blockLineHeight: '{palette.lineHeight.ratio3to2}',
+    alignSelf: '{system.flexAlign.flexStart}',
 
-    icon: null,
-    iconSize: fontSize.size24,
-    iconGapBefore: size.size4,
-    iconGapAfter: size.size8,
-    iconScale: 1,
-    iconTranslateX: 0
+    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}'
+      }
+    },
     // Initial interaction states
     {
       if: { focus: true },
       tokens: {
-        outerBorderColor: color.greenAccessible,
-        outerBorderOutline: 'none'
+        outerBorderColor: '{palette.color.greenAccessible}',
+        outerBorderOutline: '{system.borderStyle.none}'
       }
     },
     {
       if: { hover: true },
       tokens: {
-        color: color.greenSanFelix,
-        iconScale: 1.1
+        textLine: '{system.textLine.none}',
+        color: '{palette.color.greenSanFelix}'
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        color: color.greenDarkFern
+        textLine: '{system.textLine.none}',
+        color: '{palette.color.greenDarkFern}'
       }
     },
     {
       if: { pressed: true, focus: true },
       tokens: {
-        outerBorderColor: color.greenDarkFern
+        outerBorderColor: '{palette.color.greenDarkFern}'
       }
     },
 
@@ -91,26 +93,27 @@ const Link = {
     {
       if: { size: 'large' },
       tokens: {
-        blockFontSize: fontSize.size20,
-        iconSize: fontSize.size24,
-        blockLineHeight: lineHeight.ratio8to5
+        blockFontSize: '{palette.fontSize.size20}',
+        iconSize: '{palette.fontSize.size24}',
+        blockLineHeight: '{palette.lineHeight.ratio8to5}'
       }
     },
     {
       if: { size: 'small' },
       tokens: {
-        blockFontSize: fontSize.size14,
-        iconSize: fontSize.size20,
-        blockLineHeight: lineHeight.ratio10to7
+        blockFontSize: '{palette.fontSize.size14}',
+        iconSize: '{palette.fontSize.size20}',
+        blockLineHeight: '{palette.lineHeight.ratio10to7}'
       }
     },
     {
       if: { size: 'micro' },
       tokens: {
-        blockFontSize: fontSize.size12,
-        blockFontWeight: '500',
-        iconSize: fontSize.size16,
-        blockLineHeight: lineHeight.ratio4to3
+        blockFontSize: '{palette.fontSize.size12}',
+        blockFontWeight: '{palette.fontWeight.weight500}',
+        blockFontName: '{palette.fontName.HelveticaNow}',
+        iconSize: '{palette.fontSize.size16}',
+        blockLineHeight: '{palette.lineHeight.ratio4to3}'
       }
     },
 
@@ -118,26 +121,26 @@ const Link = {
     {
       if: { alternative: true },
       tokens: {
-        color: color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
     {
       if: { alternative: true, focus: true },
       tokens: {
-        color: color.greyCharcoal,
-        outerBorderColor: color.greyCharcoal
+        color: '{palette.color.greyCharcoal}',
+        outerBorderColor: '{palette.color.greyCharcoal}'
       }
     },
     {
       if: { alternative: true, hover: true },
       tokens: {
-        color: color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
     {
       if: { alternative: true, pressed: true },
       tokens: {
-        color: color.greyThunder
+        color: '{palette.color.greyThunder}'
       }
     },
 
@@ -145,33 +148,33 @@ const Link = {
     {
       if: { inverse: true },
       tokens: {
-        color: color.white
+        color: '{palette.color.white}'
       }
     },
     {
       if: { inverse: true, hover: true },
       tokens: {
-        color: color.greyAthens
+        color: '{palette.color.greyAthens}'
       }
     },
     {
       if: { inverse: true, focus: true },
       tokens: {
-        outerBorderColor: color.white,
-        outerBorderOutline: 'none'
+        outerBorderColor: '{palette.color.white}',
+        outerBorderOutline: '{system.borderStyle.none}'
       }
     },
     {
       if: { inverse: true, pressed: true },
       tokens: {
-        color: color.greyMystic
+        color: '{palette.color.greyMystic}'
       }
     },
     {
       if: { inverse: true, pressed: true, focus: true },
       tokens: {
-        color: color.greyMystic,
-        outerBorderColor: color.greyMystic
+        color: '{palette.color.greyMystic}',
+        outerBorderColor: '{palette.color.greyMystic}'
       }
     },
 
@@ -179,54 +182,22 @@ const Link = {
     {
       if: { light: true },
       tokens: {
-        color: color.greyShuttle
+        color: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { light: true, focus: true },
       tokens: {
-        color: color.greyShuttle,
-        outerBorderColor: color.greyShuttle
+        color: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyShuttle}'
       }
     },
     {
       if: { light: true, hover: true },
       tokens: {
-        color: color.greyCharcoal,
-        textLine: 'none'
-      }
-    },
-    {
-      if: { component: 'ChevronLink' },
-      tokens: { iconGapAfter: 0, iconGapBefore: 0 }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left' },
-      tokens: { icon: leftArrowIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right' },
-      tokens: { icon: rightArrowIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left', hover: true },
-      tokens: {
-        iconTranslateX: -1 * size.size4,
-        iconScale: 1
-      }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right', hover: true },
-      tokens: {
-        iconTranslateX: size.size4,
-        iconScale: 1
+        color: '{palette.color.greyCharcoal}',
+        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