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

package/src/components/ProgressBar.js

@@ -1,31 +0,0 @@
-module.exports = {
-  appearances: {
-    inactive: '{appearances.ProgressBar.inactive}',
-    negative: { values: [true], type: 'variant' }
-  },
-  tokens: {
-    backgroundColor: '{palette.color.greenAccessible}',
-    borderRadius: '{palette.radius.radius12}',
-    gradient: '{palette.gradient.green}',
-    outlineWidth: '{palette.border.border1}',
-    outlineColor: '{palette.color.greenAccessible}'
-  },
-  rules: [
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyCloud}',
-        gradient: '{system.gradient.none}',
-        outlineColor: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { negative: true },
-      tokens: {
-        backgroundColor: '{palette.color.redDark}',
-        gradient: '{system.gradient.none}',
-        outlineColor: '{palette.color.redDark}'
-      }
-    }
-  ]
-}

package/src/components/Radio.js

@@ -1,69 +0,0 @@
-module.exports = {
-  appearances: {
-    checked: '{appearances.Radio.checked}',
-    error: '{appearances.Radio.error}',
-    focus: '{appearances.Radio.focus}',
-    hover: '{appearances.Radio.hover}',
-    inactive: '{appearances.Radio.inactive}'
-  },
-  tokens: {
-    checkedBackgroundColor: '{palette.color.purpleDeluge}',
-    checkedSize: '{palette.size.size12}',
-    containerBackgroundColor: '{palette.color.transparent}',
-    containerBorderRadius: '{palette.radius.none}',
-    containerOpacity: '{system.opacity.opaque}',
-    containerPaddingBottom: '{palette.size.size0}',
-    containerPaddingLeft: '{palette.size.size0}',
-    containerPaddingRight: '{palette.size.size0}',
-    containerPaddingTop: '{palette.size.size0}',
-    containerShadow: '{system.shadow.none}',
-    descriptionFontSize: '{palette.fontSize.size14}',
-    descriptionLineHeight: '{palette.lineHeight.ratio10to7}',
-    descriptionMarginLeft: '{system.size.none}',
-    inputBackgroundColor: '{palette.color.white}',
-    inputBorderColor: '{palette.color.greyShuttle}',
-    inputBorderWidth: '{palette.border.border1}',
-    inputOutlineColor: '{palette.color.transparent}',
-    inputOutlineWidth: '{palette.border.none}',
-    inputSize: '{palette.size.size20}',
-    outerBorderWidth: '{system.border.zero}',
-    outerBorderColor: '{system.color.transparent}',
-    outerBorderGap: '{system.size.zero}',
-    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: { hover: true },
-      tokens: {
-        outerBorderWidth: '{palette.border.border2}',
-        outerBorderColor: '{palette.color.greyMystic}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        inputBorderColor: '{palette.color.purpleDeluge}',
-        inputBorderWidth: '{palette.border.border3}'
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        inputBorderColor: '{palette.color.transparent}',
-        inputBackgroundColor: '{palette.color.greyMystic}',
-        labelColor: '{palette.color.greyShuttle}'
-      }
-    }
-  ]
-}

package/src/components/RadioCard.js

@@ -1,123 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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

package/src/components/Search.js

@@ -1,57 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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,9 +0,0 @@
-module.exports = {
-  appearances: {},
-  tokens: {
-    borderColor: '{palette.color.greyCloud}',
-    borderWidth: '{palette.border.border1}',
-    borderStyle: '{system.borderStyle.solid}'
-  },
-  rules: []
-}

package/src/components/SideNavItem.js

@@ -1,111 +0,0 @@
-module.exports = {
-  appearances: {
-    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: '{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: [
-    {
-      if: {
-        active: true
-      },
-      tokens: {
-        paddingLeft: '{palette.size.size12}',
-        accentBackgroundColor: '{palette.color.purpleTelus}',
-        color: '{palette.color.purpleTelus}',
-
-        fontWeight: '{palette.fontWeight.weight700}',
-        fontName: '{palette.fontName.HelveticaNow}'
-      }
-    },
-    {
-      if: {
-        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.ratio7to5}'
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true
-      },
-      tokens: {
-        paddingLeft: '{palette.size.size12}'
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true,
-        expanded: true
-      },
-      tokens: {
-        paddingLeft: '{palette.size.size16}',
-        accentBackgroundColor: '{palette.color.transparent}',
-        color: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      if: {
-        hover: true
-      },
-      tokens: {
-        backgroundColor: '{palette.color.greyAthens}',
-        color: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: true
-      },
-      tokens: {
-        backgroundColor: '{palette.color.greyAthens}',
-        color: '{palette.color.purpleTelus}',
-        accentPadding: '{palette.size.size16}',
-        accentBackgroundColor: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: false,
-        hover: true
-      },
-      tokens: {
-        accentBackgroundColor: '{palette.color.white}',
-        color: '{palette.color.greyCharcoal}',
-        accentOffset: '{system.size.zero}',
-        accentWidth: '{palette.size.size16}'
-      }
-    }
-  ]
-}

package/src/components/SideNavItemsGroup.js

@@ -1,27 +0,0 @@
-module.exports = {
-  appearances: {
-    expanded: '{appearances.SideNavItemGroup.expanded}'
-  },
-  tokens: {
-    // animate slightly faster when closing
-    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: '{palette.icon.CaretUp}' }
-    }
-  ]
-}

package/src/components/Skeleton.js

@@ -1,14 +0,0 @@
-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

@@ -1,10 +0,0 @@
-// 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: []
-}