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

package/src/components/Icon.js

@@ -1,33 +0,0 @@
-module.exports = {
-  appearances: {
-    size: {
-      values: ['small'],
-      type: 'variant'
-    },
-    rank: {
-      values: ['primary'],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    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}'
-      }
-    },
-    {
-      if: { rank: 'primary' },
-      tokens: {
-        color: '{palette.color.purpleTelus}'
-      }
-    }
-  ]
-}

package/src/components/InputLabel.js

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

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

package/src/components/Link.js

@@ -1,203 +0,0 @@
-module.exports = {
-  appearances: {
-    size: {
-      description:
-        'Text sizes for block links; similar but not always identical to Typography sizes.',
-      values: ['large', 'small', 'micro'],
-      type: 'variant'
-    },
-    alternative: {
-      description: 'Replaces the default green colour with a more subtle grey.',
-      values: [true],
-      type: 'variant'
-    },
-    inverse: {
-      description: 'Styles the link white for use on dark backgrounds.',
-      values: [true],
-      type: 'variant'
-    },
-    light: {
-      description:
-        'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
-      values: [true],
-      type: 'variant'
-    },
-    iconPosition: '{appearances.Link.iconPosition}',
-    focus: '{appearances.Link.focus}',
-    hover: '{appearances.Link.hover}',
-    pressed: '{appearances.Link.pressed}'
-  },
-  tokens: {
-    color: '{palette.color.greenAccessible}',
-
-    textLine: '{system.textLine.underline}',
-    textLineStyle: '{system.textLineStyle.solid}',
-
-    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: '{palette.fontWeight.weight400}',
-    blockFontName: '{palette.fontName.HelveticaNow}',
-
-    blockFontSize: '{palette.fontSize.size16}',
-    blockLineHeight: '{palette.lineHeight.ratio3to2}',
-    alignSelf: '{system.flexAlign.flexStart}',
-
-    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: '{palette.color.greenAccessible}',
-        outerBorderOutline: '{system.borderStyle.none}'
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        textLine: '{system.textLine.none}',
-        color: '{palette.color.greenSanFelix}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        textLine: '{system.textLine.none}',
-        color: '{palette.color.greenDarkFern}'
-      }
-    },
-    {
-      if: { pressed: true, focus: true },
-      tokens: {
-        outerBorderColor: '{palette.color.greenDarkFern}'
-      }
-    },
-
-    // block link sizes
-    {
-      if: { size: 'large' },
-      tokens: {
-        blockFontSize: '{palette.fontSize.size20}',
-        iconSize: '{palette.fontSize.size24}',
-        blockLineHeight: '{palette.lineHeight.ratio8to5}'
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        blockFontSize: '{palette.fontSize.size14}',
-        iconSize: '{palette.fontSize.size20}',
-        blockLineHeight: '{palette.lineHeight.ratio10to7}'
-      }
-    },
-    {
-      if: { size: 'micro' },
-      tokens: {
-        blockFontSize: '{palette.fontSize.size12}',
-        blockFontWeight: '{palette.fontWeight.weight500}',
-        blockFontName: '{palette.fontName.HelveticaNow}',
-        iconSize: '{palette.fontSize.size16}',
-        blockLineHeight: '{palette.lineHeight.ratio4to3}'
-      }
-    },
-
-    // "alternative" variant
-    {
-      if: { alternative: true },
-      tokens: {
-        color: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { alternative: true, focus: true },
-      tokens: {
-        color: '{palette.color.greyCharcoal}',
-        outerBorderColor: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      if: { alternative: true, hover: true },
-      tokens: {
-        color: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { alternative: true, pressed: true },
-      tokens: {
-        color: '{palette.color.greyThunder}'
-      }
-    },
-
-    // "inverse" variant
-    {
-      if: { inverse: true },
-      tokens: {
-        color: '{palette.color.white}'
-      }
-    },
-    {
-      if: { inverse: true, hover: true },
-      tokens: {
-        color: '{palette.color.greyAthens}'
-      }
-    },
-    {
-      if: { inverse: true, focus: true },
-      tokens: {
-        outerBorderColor: '{palette.color.white}',
-        outerBorderOutline: '{system.borderStyle.none}'
-      }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        color: '{palette.color.greyMystic}'
-      }
-    },
-    {
-      if: { inverse: true, pressed: true, focus: true },
-      tokens: {
-        color: '{palette.color.greyMystic}',
-        outerBorderColor: '{palette.color.greyMystic}'
-      }
-    },
-
-    // "light" variant
-    {
-      if: { light: true },
-      tokens: {
-        color: '{palette.color.greyShuttle}'
-      }
-    },
-    {
-      if: { light: true, focus: true },
-      tokens: {
-        color: '{palette.color.greyShuttle}',
-        outerBorderColor: '{palette.color.greyShuttle}'
-      }
-    },
-    {
-      if: { light: true, hover: true },
-      tokens: {
-        color: '{palette.color.greyCharcoal}',
-        textLine: '{system.textLine.none}'
-      }
-    }
-  ]
-}

package/src/components/List.js

@@ -1,68 +0,0 @@
-module.exports = {
-  appearances: {
-    size: {
-      description: 'Indicates list item text size.',
-      values: ['large', 'small'],
-      type: 'variant'
-    },
-    compact: {
-      description: 'When true it will reduce the line height of the list item.',
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    itemFontWeight: '{palette.fontWeight.weight400}',
-    itemFontSize: '{palette.fontSize.size16}',
-    itemLineHeight: '{palette.lineHeight.ratio3to2}',
-    itemFontName: '{palette.fontName.HelveticaNow}',
-    interItemMargin: '{palette.size.size8}',
-    interItemMarginWithDivider: '{palette.size.size16}',
-    dividerColor: '{palette.color.greyCloud}',
-    dividerSize: '{palette.border.border1}',
-    itemBulletContainerWidth: '{palette.size.size16}',
-    itemBulletContainerAlign: '{system.textAlign.center}',
-    itemBulletWidth: '{palette.size.size4}',
-    itemBulletHeight: '{palette.size.size4}',
-    itemBulletColor: '{palette.color.purpleTelus}',
-    itemIconSize: '{palette.size.size16}',
-    itemIconColor: '{palette.color.purpleTelus}',
-    listGutter: '{palette.size.size12}'
-  },
-  rules: [
-    {
-      if: { size: 'large' },
-      tokens: {
-        itemFontSize: '{palette.fontSize.size20}',
-        itemLineHeight: '{palette.lineHeight.ratio8to5}',
-        listGutter: '{palette.size.size12}'
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        itemFontSize: '{palette.fontSize.size14}',
-        itemLineHeight: '{palette.lineHeight.ratio10to7}',
-        listGutter: '{palette.size.size12}'
-      }
-    },
-    {
-      if: { compact: true },
-      tokens: {
-        itemLineHeight: '{palette.lineHeight.ratio5to4}'
-      }
-    },
-    {
-      if: { compact: true, size: 'small' },
-      tokens: {
-        itemLineHeight: '{palette.lineHeight.ratio8to7}'
-      }
-    },
-    {
-      if: { compact: true, size: 'large' },
-      tokens: {
-        itemLineHeight: '{palette.lineHeight.ratio6to5}'
-      }
-    }
-  ]
-}

package/src/components/Modal.js

@@ -1,57 +0,0 @@
-module.exports = {
-  appearances: {
-    maxWidth: '{appearances.Modal.maxWidth}',
-    viewport: '{appearances.system.viewport}'
-  },
-  tokens: {
-    backdropColor: '{palette.color.bgModal}',
-    backdropOpacity: '{system.opacity.opaque}',
-
-    height: '{system.size.none}',
-    maxWidth: '{system.size.full}',
-
-    containerPaddingLeft: '{system.size.zero}',
-    containerPaddingRight: '{system.size.zero}',
-    containerPaddingTop: '{system.size.zero}',
-    containerPaddingBottom: '{system.size.zero}',
-
-    backgroundColor: '{palette.color.white}',
-    borderRadius: '{palette.radius.radius4}',
-    shadow: '{palette.shadow.elevation1}',
-    paddingLeft: '{palette.size.size24}',
-    paddingRight: '{palette.size.size24}',
-    paddingTop: '{palette.size.size24}',
-    paddingBottom: '{palette.size.size24}',
-
-    closeIcon: '{palette.icon.Close}',
-    closeIconSize: '{palette.size.size24}',
-    closeIconColor: '{palette.color.greyCharcoal}'
-  },
-  rules: [
-    {
-      if: { viewport: ['xs', 'sm'] },
-      // covers the entire viewport on mobile devices
-      tokens: {
-        height: '{system.size.full}'
-      }
-    },
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        maxWidth: '{system.integer.576}', // default when maxWidth is not enabled
-        // ensures that there's a gap near the top and bottom edge of the viewport
-        containerPaddingTop: '{palette.size.size32}',
-        containerPaddingBottom: '{palette.size.size32}'
-      }
-    },
-    {
-      if: { viewport: ['md', 'lg', 'xl'], maxWidth: true },
-      tokens: {
-        maxWidth: '{system.size.twoThirds}', // 100% * 8/12
-        // compensate for the outside gutter of the layout columns (modal edges should be aligned with the columns edges)
-        containerPaddingLeft: '{palette.size.size16}',
-        containerPaddingRight: '{palette.size.size16}'
-      }
-    }
-  ]
-}

package/src/components/Notification.js

@@ -1,90 +0,0 @@
-// TODO: replace Close with circled close
-
-module.exports = {
-  appearances: {
-    system: '{appearances.Notification.system}',
-    style: '{appearances.Notification.style}'
-  },
-  tokens: {
-    backgroundColor: '{palette.color.greyAthens}',
-    borderBottomWidth: '{palette.border.border1}',
-    borderTopWidth: '{palette.border.border1}',
-    borderLeftWidth: '{palette.border.border1}',
-    borderRightWidth: '{palette.border.border1}',
-    borderColor: '{palette.color.greyShuttle}',
-    borderRadius: '{palette.radius.radius6}',
-    paddingTop: '{palette.size.size12}',
-    paddingBottom: '{palette.size.size12}',
-    paddingLeft: '{palette.size.size12}',
-    paddingRight: '{palette.size.size12}',
-
-    color: '{palette.color.greyCharcoal}',
-    fontSize: '{palette.fontSize.size16}',
-    lineHeight: '{palette.lineHeight.ratio3to2}',
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    icon: '{system.icon.none}',
-    iconColor: '{system.color.none}',
-    iconSize: '{palette.size.size24}',
-    iconGap: '{palette.size.size16}',
-
-    dismissIcon: '{palette.icon.Close}',
-    dismissIconColor: '{palette.color.greyCharcoal}',
-    dismissIconSize: '{palette.size.size24}',
-    dismissButtonGap: '{palette.size.size16}'
-  },
-  rules: [
-    {
-      if: {
-        system: true
-      },
-      tokens: {
-        borderTopWidth: '{system.border.zero}',
-        borderLeftWidth: '{system.border.zero}',
-        borderRightWidth: '{system.border.zero}',
-        borderRadius: '{system.radius.zero}',
-        paddingTop: '{palette.size.size16}',
-        paddingBottom: '{palette.size.size16}',
-        paddingLeft: '{palette.size.size16}',
-        paddingRight: '{palette.size.size16}',
-        iconGap: '{palette.size.size12}'
-      }
-    },
-    {
-      if: {
-        style: 'success'
-      },
-      tokens: {
-        backgroundColor: '{palette.color.greenPanache}',
-        borderColor: '{palette.color.greenAccessible}',
-        icon: '{palette.icon.NotificationSuccess}',
-        iconColor: '{palette.color.greenAccessible}'
-      }
-    },
-    {
-      if: {
-        style: 'warning'
-      },
-      tokens: {
-        backgroundColor: '{palette.color.amberLight}',
-        borderColor: '{palette.color.amberDark}',
-        icon: '{palette.icon.NotificationWarning}',
-        iconColor: '{palette.color.amberDark}',
-        dismissIcon: '{system.icon.none}'
-      }
-    },
-    {
-      if: {
-        style: 'error'
-      },
-      tokens: {
-        backgroundColor: '{palette.color.redLight}',
-        borderColor: '{palette.color.red}',
-        icon: '{palette.icon.NotificationError}',
-        iconColor: '{palette.color.red}',
-        dismissIcon: '{system.icon.none}'
-      }
-    }
-  ]
-}

package/src/components/Pagination.js

@@ -1,24 +0,0 @@
-module.exports = {
-  appearances: {
-    viewport: '{appearances.system.viewport}'
-  },
-  tokens: {
-    gap: '{system.integer.2}',
-    truncateAbove: '{system.integer.4}',
-
-    color: '{palette.color.greyShuttle}',
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    fontSize: '{palette.fontSize.size16}',
-    lineHeight: '{palette.lineHeight.ratio3to2}'
-  },
-  rules: [
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        truncateAbove: '{system.integer.6}'
-      }
-    }
-  ]
-}

package/src/components/PaginationPageButton.js

@@ -1,65 +0,0 @@
-module.exports = {
-  appearances: {
-    focus: '{appearances.PaginationPageButton.focus}',
-    hover: '{appearances.PaginationPageButton.hover}',
-    pressed: '{appearances.PaginationPageButton.pressed}',
-    selected: '{appearances.PaginationPageButton.selected}'
-  },
-  tokens: {
-    borderColor: '{palette.color.transparent}',
-    borderWidth: '{palette.border.border1}',
-    borderRadius: '{palette.radius.pill32}',
-    backgroundColor: '{palette.color.transparent}',
-    paddingLeft: '{palette.size.size8}',
-    paddingRight: '{palette.size.size8}',
-    paddingTop: '{palette.size.size4}',
-    paddingBottom: '{palette.size.size4}',
-    width: '{palette.size.size32}',
-
-    // never visible - used only to increase the click area size
-    outerBorderColor: '{palette.color.transparent}',
-    outerBorderWidth: '{palette.border.border4}',
-    outerBorderGap: '{palette.border.border4}',
-
-    color: '{palette.color.greyShuttle}',
-
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    fontSize: '{palette.fontSize.size16}',
-    lineHeight: '{palette.lineHeight.ratio3to2}',
-    textLine: '{system.textLine.underline}',
-    textAlign: '{system.flexJustifyContent.center}'
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: '{palette.color.greyShuttle}',
-        textLine: '{system.textLine.none}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: '{palette.color.greyShuttle}',
-        borderWidth: '{palette.border.border3}'
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyShuttle}',
-        color: '{palette.color.white}',
-        textLine: '{system.textLine.none}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyShuttle}',
-        color: '{palette.color.white}'
-      }
-    }
-  ]
-}

package/src/components/PaginationSideButton.js

@@ -1,90 +0,0 @@
-module.exports = {
-  appearances: {
-    viewport: '{appearances.system.viewport}',
-    focus: '{appearances.PaginationSideButton.focus}',
-    hover: '{appearances.PaginationSideButton.hover}',
-    pressed: '{appearances.PaginationSideButton.pressed}',
-    selected: '{appearances.PaginationSideButton.selected}',
-    direction: '{appearances.PaginationSideButton.direction}'
-  },
-  tokens: {
-    borderColor: '{palette.color.transparent}',
-    borderWidth: '{palette.border.border1}',
-    borderRadius: '{palette.radius.radius4}',
-    backgroundColor: '{palette.color.transparent}',
-    paddingLeft: '{palette.size.size8}',
-    paddingRight: '{palette.size.size8}',
-    paddingTop: '{palette.size.size12}',
-    paddingBottom: '{palette.size.size12}',
-    outerBorderColor: '{palette.color.transparent}',
-
-    color: '{palette.color.greyShuttle}',
-
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    fontSize: '{palette.fontSize.size16}',
-    lineHeight: '{palette.lineHeight.ratio3to2}',
-    textLine: '{system.textLine.underline}',
-
-    icon: '{system.icon.none}',
-    iconSize: '{palette.fontSize.size24}',
-    iconDisplace: '{palette.size.size0}',
-
-    width: '{system.size.none}',
-    textAlign: '{system.flexJustifyContent.center}'
-  },
-  rules: [
-    {
-      if: { viewport: ['xs', 'sm'] },
-      tokens: {
-        borderRadius: '{palette.radius.pill32}',
-        paddingTop: '{palette.size.size4}',
-        paddingBottom: '{palette.size.size4}',
-        width: '{palette.size.size32}'
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: '{palette.color.greyShuttle}',
-        textLine: '{system.textLine.none}',
-        iconDisplace: '{palette.size.size4}'
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: '{palette.color.greyShuttle}',
-        borderWidth: '{palette.border.border3}'
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyShuttle}',
-        color: '{palette.color.white}',
-        textLine: '{system.textLine.none}'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: '{palette.color.greyShuttle}',
-        color: '{palette.color.white}'
-      }
-    },
-    {
-      if: { direction: 'previous' },
-      tokens: {
-        icon: '{palette.icon.ArrowLeft}'
-      }
-    },
-    {
-      if: { direction: 'next' },
-      tokens: {
-        icon: '{palette.icon.ArrowRight}'
-      }
-    }
-  ]
-}

package/src/components/Progress.js

@@ -1,13 +0,0 @@
-module.exports = {
-  appearances: {
-    size: { values: ['mini'], type: 'variant' }
-  },
-  tokens: {
-    backgroundColor: '{palette.color.greyAthens}',
-    borderWidth: '{palette.border.border1}',
-    borderColor: '{palette.color.greyCloud}',
-    borderRadius: '{palette.radius.radius12}',
-    height: '{palette.size.size16}'
-  },
-  rules: [{ if: { size: 'mini' }, tokens: { height: '{palette.size.size8}' } }]
-}