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

package/src/components/RadioCard.js

@@ -0,0 +1,123 @@
+module.exports = {
+  appearances: {
+    pressed: '{appearances.RadioCard.pressed}',
+    hover: '{appearances.RadioCard.hover}',
+    focus: '{appearances.RadioCard.focus}',
+    checked: '{appearances.RadioCard.checked}',
+    inactive: '{appearances.RadioCard.inactive}',
+    error: '{appearances.RadioCard.error}',
+    viewport: '{appearances.system.viewport}'
+  },
+  tokens: {
+    // Outer border
+    outerBorderColor: '{system.color.transparent}',
+    outerBorderWidth: '{system.border.zero}',
+    outerBorderGap: '{system.size.zero}',
+
+    // Card
+    flex: '{system.integer.1}',
+    backgroundColor: '{palette.color.white}',
+    borderColor: '{palette.color.greyCloud}',
+    borderRadius: '{palette.radius.radius6}',
+    borderWidth: '{palette.border.border1}',
+    paddingBottom: '{palette.size.size16}',
+    paddingLeft: '{palette.size.size10}',
+    paddingRight: '{palette.size.size16}',
+    paddingTop: '{palette.size.size16}',
+    minWidth: '{palette.size.size288}',
+    shadow: '{system.shadow.none}',
+
+    // RadioButton
+    radioCheckedBackgroundColor: '{palette.color.purpleDeluge}',
+    radioCheckedSize: '{palette.size.size12}',
+    radioInputBackgroundColor: '{palette.color.white}',
+    radioInputBorderColor: '{palette.color.greyShuttle}',
+    radioInputBorderWidth: '{palette.border.border1}',
+    radioInputOutlineColor: '{palette.color.transparent}',
+    radioInputOutlineWidth: '{palette.border.none}',
+    radioInputSize: '{palette.size.size20}',
+    radioOuterBorderColor: '{system.color.transparent}',
+    radioOuterBorderWidth: '{system.border.zero}',
+    radioOuterBorderGap: '{system.size.zero}',
+
+    // Title text - duplicates Typography variant { size: 'h3' }
+    fontSize: '{palette.fontSize.size20}',
+    lineHeight: '{palette.lineHeight.ratio7to5}',
+    color: '{palette.color.greyThunder}',
+    letterSpacing: '{system.letterSpacing.none}',
+    textTransform: '{system.textTransform.none}',
+    fontWeight: '{palette.fontWeight.weight500}',
+    fontName: '{palette.fontName.HelveticaNow}',
+
+    // Spacing
+    radioSpace: '{system.integer.2}',
+    contentSpace: '{system.integer.2}'
+  },
+  rules: [
+    {
+      if: { viewport: ['lg', 'xl'] },
+      tokens: {
+        paddingBottom: '{palette.size.size24}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size24}',
+        paddingTop: '{palette.size.size16}',
+
+        fontSize: '{palette.fontSize.size24}',
+        lineHeight: '{palette.lineHeight.ratio4to3}'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBorderWidth: '{palette.border.border2}',
+
+        radioOuterBorderWidth: '{palette.border.border2}',
+        radioOuterBorderColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { pressed: true },
+      description: 'Pressed state matches hover state plus light grey background',
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBorderWidth: '{palette.border.border2}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '{palette.color.greyShuttle}',
+        outerBorderWidth: '{palette.border.border2}',
+        outerBorderGap: '{palette.size.size2}',
+
+        radioInputBorderColor: '{palette.color.purpleDeluge}',
+        radioInputBorderWidth: '{palette.border.border3}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{system.color.transparent}',
+
+        radioInputBorderColor: '{palette.color.transparent}',
+        radioInputBackgroundColor: '{palette.color.greyMystic}',
+        color: '{palette.color.greyShuttle}'
+      }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '{palette.color.red}',
+
+        radioInputBorderColor: '{palette.color.red}',
+
+        color: '{palette.color.red}'
+      }
+    }
+  ]
+}

package/src/components/RadioCardGroup.js

@@ -0,0 +1,24 @@
+module.exports = {
+  appearances: {
+    viewport: '{appearances.system.viewport}',
+    fullWidth: {
+      description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    direction: '{system.direction.column}',
+    space: '{system.integer.3}',
+    fieldSpace: '{system.integer.3}'
+  },
+  rules: [
+    {
+      if: { viewport: ['lg', 'xl'], fullWidth: null },
+      tokens: {
+        direction: '{system.direction.row}',
+        space: '{system.integer.4}'
+      }
+    }
+  ]
+}

package/src/components/RadioGroup.js

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

package/src/components/Search.js

@@ -0,0 +1,57 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.Search.hover}',
+    focus: '{appearances.Search.focus}',
+    inactive: '{appearances.Search.inactive}'
+  },
+  tokens: {
+    backgroundColor: '{palette.color.white}',
+    color: '{palette.color.greyCharcoal}',
+    borderWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyShuttle}',
+    borderRadius: '{palette.radius.pill32}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size24}',
+    paddingRight: '{palette.size.size8}',
+
+    outerBackgroundColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderRadius: '{palette.radius.pill32}',
+
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    fontSize: '{palette.fontSize.size16}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+
+    placeholderColor: '{palette.color.greyCharcoal}',
+    buttonsGap: '{system.integer.1}',
+    clearButtonIcon: '{palette.icon.Times}',
+    submitButtonIcon: '{palette.icon.SearchBold}'
+  },
+  rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: {
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBackgroundColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{palette.border.border3}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyAthens}'
+      }
+    }
+  ]
+}

package/src/components/SearchButton.js

@@ -0,0 +1,71 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.SearchButton.hover}',
+    focus: '{appearances.SearchButton.focus}',
+    inactive: '{appearances.SearchButton.inactive}',
+    pressed: '{appearances.SearchButton.pressed}',
+    priority: {
+      description: '',
+      values: ['high'],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    borderColor: '{palette.color.transparent}',
+    borderWidth: '{system.border.zero}',
+    borderRadius: '{palette.radius.pill32}',
+    backgroundColor: '{system.color.none}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{palette.size.size8}',
+    paddingRight: '{palette.size.size8}',
+    paddingBottom: '{palette.size.size8}',
+    paddingTop: '{palette.size.size8}',
+    shadow: '{system.shadow.none}',
+
+    iconSize: '{palette.size.size20}',
+    iconColor: '{palette.color.greyShuttle}'
+  },
+  rules: [
+    {
+      if: { priority: 'high' },
+      tokens: {
+        backgroundColor: '{palette.color.purpleTelus}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    // only the default appearance is different for a high priority button
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{system.border.zero}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.purpleTelus}',
+        borderWidth: '{palette.border.border3}',
+        iconColor: '{palette.color.purpleTelus}',
+        backgroundColor: '{system.color.transparent}'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: '{system.size.zero}',
+        backgroundColor: '{palette.color.purpleDark}',
+        iconColor: '{palette.color.white}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyMystic}',
+        iconColor: '{palette.color.greyShuttle}',
+        borderWidth: '{system.size.zero}'
+      }
+    }
+  ]
+}

package/src/components/Select.js

@@ -0,0 +1,78 @@
+const Select = {
+  appearances: {
+    validation: '{appearances.Select.validation}',
+    hover: '{appearances.Select.hover}',
+    focus: '{appearances.Select.focus}',
+    inactive: '{appearances.Select.inactive}'
+  },
+  tokens: {
+    backgroundColor: '{palette.color.white}',
+    color: '{palette.color.greyCharcoal}',
+    borderWidth: '{palette.border.border1}',
+    borderColor: '{palette.color.greyShuttle}',
+    borderRadius: '{palette.radius.radius4}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    height: '{palette.size.size48}',
+
+    outerBackgroundColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderColor: '{palette.color.transparent}',
+
+    fontSize: '{palette.fontSize.size16}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight400}',
+
+    icon: '{palette.icon.CaretDown}',
+    iconSize: '{palette.fontSize.size24}',
+    iconColor: '{palette.color.greenAccessible}',
+
+    validationIcon: '{system.icon.none}',
+    validationIconSize: '{palette.fontSize.size24}',
+    validationIconColor: '{palette.color.transparent}'
+  },
+  rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: {
+        outerBorderColor: '{palette.color.greyMystic}',
+        outerBackgroundColor: '{palette.color.greyMystic}'
+      }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        borderColor: '{palette.color.greenAccessible}',
+        validationIcon: '{palette.icon.NotificationSuccess}',
+        validationIconColor: '{palette.color.greenAccessible}'
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        borderColor: '{palette.color.red}',
+        validationIcon: '{palette.icon.NotificationError}',
+        validationIconColor: '{palette.color.red}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.purpleDeluge}',
+        borderWidth: '{palette.border.border3}',
+        validationIcon: '{system.icon.none}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyAthens}',
+        borderColor: '{palette.color.greyAthens}'
+      }
+    }
+  ]
+}
+
+module.exports = Select

package/src/components/SideNav.js

@@ -1,18 +1,9 @@
-import palette from '@telus-uds/palette-allium'
-import { getSideNavSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const SideNav = {
+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(SideNav, getSideNavSchema(palette), 'side-nav')
-
-export default SideNav

package/src/components/SideNavItem.js

@@ -1,30 +1,29 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  getSideNavItemSchema,
-  sideNavItemAppearances,
-  linkAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const SideNavItem = {
+module.exports = {
   appearances: {
-    ...sideNavItemAppearances,
-    hover: linkAppearances.hover
+    active: '{appearances.SideNavItem.active}',
+    type: '{appearances.SideNavItem.type}',
+    expanded: '{appearances.SideNavItem.expanded}',
+    hover: '{appearances.SideNavItem.hover}'
   },
   tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid',
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    justifyContent: 'space-between',
-    color: palette.color.greyCharcoal,
-    accentOffset: 0,
-    accentPadding: 0,
-    accentWidth: palette.size.size4,
-    accentBackgroundColor: palette.color.transparent
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderStyle: '{system.borderStyle.solid}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    paddingTop: '{palette.size.size16}',
+    paddingBottom: '{palette.size.size16}',
+    justifyContent: '{system.flexJustifyContent.spaceBetween}',
+    color: '{palette.color.greyCharcoal}',
+    accentOffset: '{system.size.zero}',
+    accentPadding: '{system.size.zero}',
+    accentWidth: '{palette.size.size4}',
+    accentBackgroundColor: '{palette.color.transparent}',
+    fontSize: '{palette.fontSize.size16}',
+    fontWeight: '{palette.fontWeight.weight400}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    backgroundColor: '{palette.color.transparent}'
   },
   rules: [
     {
@@ -32,10 +31,12 @@ const SideNavItem = {
         active: true
       },
       tokens: {
-        paddingLeft: palette.size.size12,
-        accentBackgroundColor: palette.color.purpleTelus,
-        color: palette.color.purpleTelus,
-        fontWeight: '700'
+        paddingLeft: '{palette.size.size12}',
+        accentBackgroundColor: '{palette.color.purpleTelus}',
+        color: '{palette.color.purpleTelus}',
+
+        fontWeight: '{palette.fontWeight.weight700}',
+        fontName: '{palette.fontName.HelveticaNow}'
       }
     },
     {
@@ -43,12 +44,12 @@ const SideNavItem = {
         type: 'child'
       },
       tokens: {
-        paddingLeft: palette.size.size36,
-        borderWidth: palette.border.none,
-        accentBackgroundColor: palette.color.greyAthens,
-        accentOffset: palette.size.size16,
-        fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.multiply140
+        paddingLeft: '{palette.size.size36}',
+        borderWidth: '{palette.border.none}',
+        accentBackgroundColor: '{palette.color.greyAthens}',
+        accentOffset: '{palette.size.size16}',
+        fontSize: '{palette.fontSize.size14}',
+        lineHeight: '{palette.lineHeight.ratio7to5}'
       }
     },
     {
@@ -57,7 +58,7 @@ const SideNavItem = {
         active: true
       },
       tokens: {
-        paddingLeft: palette.size.size12
+        paddingLeft: '{palette.size.size12}'
       }
     },
     {
@@ -67,9 +68,9 @@ const SideNavItem = {
         expanded: true
       },
       tokens: {
-        paddingLeft: palette.size.size16,
-        accentBackgroundColor: palette.color.transparent,
-        color: palette.color.greyCharcoal
+        paddingLeft: '{palette.size.size16}',
+        accentBackgroundColor: '{palette.color.transparent}',
+        color: '{palette.color.greyCharcoal}'
       }
     },
     {
@@ -77,8 +78,8 @@ const SideNavItem = {
         hover: true
       },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus
+        backgroundColor: '{palette.color.greyAthens}',
+        color: '{palette.color.purpleTelus}'
       }
     },
     {
@@ -87,10 +88,10 @@ const SideNavItem = {
         active: true
       },
       tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus,
-        accentPadding: palette.size.size16,
-        accentBackgroundColor: palette.color.purpleTelus
+        backgroundColor: '{palette.color.greyAthens}',
+        color: '{palette.color.purpleTelus}',
+        accentPadding: '{palette.size.size16}',
+        accentBackgroundColor: '{palette.color.purpleTelus}'
       }
     },
     {
@@ -100,17 +101,11 @@ const SideNavItem = {
         hover: true
       },
       tokens: {
-        accentBackgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal,
-        accentOffset: 0,
-        accentWidth: palette.size.size16
+        accentBackgroundColor: '{palette.color.white}',
+        color: '{palette.color.greyCharcoal}',
+        accentOffset: '{system.size.zero}',
+        accentWidth: '{palette.size.size16}'
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNavItem, getSideNavItemSchema(palette), 'side-nav-item')
-
-export default SideNavItem

package/src/components/SideNavItemsGroup.js

@@ -1,41 +1,27 @@
-import palette from '@telus-uds/palette-allium'
-import { getSideNavItemsGroupSchema, validateComponentTheme } 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 SideNavItemsGroup = {
-  appearances: {},
+module.exports = {
+  appearances: {
+    expanded: '{appearances.SideNavItemGroup.expanded}'
+  },
   tokens: {
     // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    contentPaddingLeft: palette.size.size0,
-    contentPaddingRight: palette.size.size0,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size0,
-    icon: CaretDown,
-    iconColor: palette.color.purpleTelus,
-    iconGap: palette.size.size8,
-    iconSize: palette.size.size24,
-    iconPosition: 'right',
-    verticalAlign: 'middle',
-    justifyContent: 'space-between'
+    expandDuration: '{palette.duration.duration300}',
+    collapseDuration: '{palette.duration.duration250}',
+    contentPaddingLeft: '{palette.size.size0}',
+    contentPaddingRight: '{palette.size.size0}',
+    contentPaddingTop: '{palette.size.size0}',
+    contentPaddingBottom: '{palette.size.size0}',
+    icon: '{palette.icon.CaretDown}',
+    iconColor: '{palette.color.purpleTelus}',
+    iconGap: '{palette.size.size8}',
+    iconSize: '{palette.size.size24}',
+    iconPosition: '{system.position.right}',
+    verticalAlign: '{system.verticalAlign.middle}',
+    justifyContent: '{system.flexJustifyContent.spaceBetween}'
   },
   rules: [
     {
       if: { expanded: true },
-      tokens: { icon: CaretUp }
+      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(
-  SideNavItemsGroup,
-  getSideNavItemsGroupSchema(palette),
-  'side-nav-items-group'
-)
-
-export default SideNavItemsGroup

package/src/components/Skeleton.js

@@ -0,0 +1,14 @@
+const Skeleton = {
+  appearances: {},
+  tokens: {
+    color: '{palette.color.greyCloud}',
+    size: '{palette.border.border3}',
+    radius: '{palette.size.size120}',
+    baseWidth: '{palette.size.size40}',
+    characters: '{palette.size.size10}',
+    spaceBetweenLines: '{palette.size.size2}',
+    squareRadius: '{palette.size.size4}'
+  },
+  rules: []
+}
+module.exports = Skeleton

package/src/components/StackView.js

@@ -0,0 +1,10 @@
+// This makes the React Native defaults explicit and allows them to be overridden with tokens
+module.exports = {
+  appearances: {},
+  tokens: {
+    alignItems: '{system.flexAlign.stretch}',
+    justifyContent: '{system.flexJustifyContent.flexStart}',
+    flexGrow: '{system.integer.0}'
+  },
+  rules: []
+}