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

package/src/components/ButtonGroupItem.js

@@ -0,0 +1,88 @@
+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 {
+  appearances: {
+    hover: appearances.ButtonGroupItem.hover,
+    focus: appearances.ButtonGroupItem.focus,
+    pressed: appearances.ButtonGroupItem.pressed,
+    selected: appearances.ButtonGroupItem.selected,
+    inactive: appearances.ButtonGroupItem.inactive
+  },
+  tokens: {
+    borderColor: palette.color.greyCloud,
+    borderWidth: palette.border.border1,
+    borderRadius: palette.radius.pill32,
+    shadow: system.shadow.none,
+
+    fontSize: palette.fontSize.size14,
+    color: palette.color.greyShuttle,
+    lineHeight: palette.lineHeight.ratio3to2,
+    textAlign: system.flexJustifyContent.center,
+    alignSelf: system.flexAlign.flexStart,
+    // TODO: replace with font token
+    fontName: Object.keys(palette.font)[0],
+    fontWeight: '700',
+    // font: palette.font.HelveticaNow['700'],
+
+    backgroundColor: palette.color.white,
+    opacity: system.opacity.opaque,
+    paddingLeft: palette.size.size16,
+    paddingRight: palette.size.size16,
+    paddingTop: palette.size.size8,
+    paddingBottom: palette.size.size8,
+    width: system.size.none,
+    minWidth: system.size.zero,
+
+    outerBorderColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderGap: palette.border.border2,
+    outerBorderRadius: palette.radius.pill32,
+    outerBackgroundColor: palette.color.transparent
+  },
+  rules: [
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.greyShuttle,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: palette.color.purpleTelus,
+        borderWidth: palette.border.border3,
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.transparent
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
+    {
+      if: { selected: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: palette.color.greyCloud,
+        color: palette.color.white,
+        borderWidth: system.border.zero
+      }
+    }
+  ]
+}

package/src/components/Card.js

@@ -0,0 +1,99 @@
+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 {
+  appearances: {
+    background: {
+      values: ['alternative'],
+      type: 'variant'
+    },
+    padding: {
+      values: ['narrow', 'intermediate', 'compact', 'custom'],
+      type: 'variant'
+    },
+    viewport: appearances.system.viewport
+  },
+  tokens: {
+    backgroundColor: palette.color.white,
+    borderColor: palette.color.greyMystic,
+    borderRadius: palette.radius.radius6,
+    borderWidth: palette.border.border1,
+    paddingBottom: palette.size.size32,
+    paddingLeft: palette.size.size24,
+    paddingRight: palette.size.size24,
+    paddingTop: palette.size.size32,
+    shadow: system.shadow.none
+  },
+  rules: [
+    {
+      if: { background: 'alternative' },
+      tokens: {
+        backgroundColor: palette.color.greyAthens
+      }
+    },
+    {
+      if: { viewport: ['md', 'lg', 'xl'] },
+      tokens: {
+        paddingBottom: palette.size.size48,
+        paddingLeft: palette.size.size32,
+        paddingRight: palette.size.size32,
+        paddingTop: palette.size.size48
+      }
+    },
+    {
+      if: { padding: 'narrow' },
+      tokens: {
+        paddingBottom: palette.size.size24,
+        paddingLeft: palette.size.size16,
+        paddingRight: palette.size.size16,
+        paddingTop: palette.size.size24
+      }
+    },
+    {
+      if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
+      tokens: {
+        paddingBottom: palette.size.size32,
+        paddingLeft: palette.size.size16,
+        paddingRight: palette.size.size16,
+        paddingTop: palette.size.size32
+      }
+    },
+    {
+      if: { padding: 'intermediate' },
+      tokens: {
+        paddingBottom: palette.size.size24,
+        paddingLeft: palette.size.size24,
+        paddingRight: palette.size.size24,
+        paddingTop: palette.size.size24
+      }
+    },
+    {
+      if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
+      tokens: {
+        paddingBottom: palette.size.size32,
+        paddingLeft: palette.size.size32,
+        paddingRight: palette.size.size32,
+        paddingTop: palette.size.size32
+      }
+    },
+    {
+      if: { padding: 'compact' },
+      tokens: {
+        paddingBottom: palette.size.size16,
+        paddingLeft: palette.size.size16,
+        paddingRight: palette.size.size16,
+        paddingTop: palette.size.size16
+      }
+    },
+    {
+      if: { padding: 'custom' },
+      tokens: {
+        paddingBottom: palette.size.size0,
+        paddingLeft: palette.size.size0,
+        paddingRight: palette.size.size0,
+        paddingTop: palette.size.size0
+      }
+    }
+  ]
+}

package/src/components/Checkbox.js

@@ -0,0 +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 checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
+
+export default {
+  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,
+    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
+  },
+  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/ChevronLink.js

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

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

@@ -0,0 +1,75 @@
+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 {
+  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,
+
+    // 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: 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: successIcon,
+        iconColor: palette.color.greenAccessible
+      }
+    },
+    {
+      if: { validation: 'error', icon: true },
+      tokens: {
+        icon: errorIcon,
+        iconColor: palette.color.red
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,29 @@
+import palette from '@telus-uds/palette-allium'
+
+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: []
+}

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: []
+}