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

package/lib/components/Checkbox.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+var _checkmarkIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    checked: _schema.appearances.Checkbox.checked,
+    error: _schema.appearances.Checkbox.error,
+    focus: _schema.appearances.Checkbox.focus,
+    hover: _schema.appearances.Checkbox.hover,
+    inactive: _schema.appearances.Checkbox.inactive
+  },
+  tokens: {
+    containerBackgroundColor: _paletteAllium.default.color.transparent,
+    containerMarginBottom: _paletteAllium.default.size.size8,
+    feedbackMarginBottom: _rn.default.size.zero,
+    feedbackMarginTop: _paletteAllium.default.size.size2,
+    feedbackPosition: _rn.default.position.bottom,
+    icon: _checkmarkIcon.default,
+    iconBackgroundColor: _paletteAllium.default.color.purpleDeluge,
+    iconColor: _paletteAllium.default.color.white,
+    iconSize: _paletteAllium.default.size.size16,
+    inputBackgroundColor: _paletteAllium.default.color.white,
+    inputBorderColor: _paletteAllium.default.color.greyShuttle,
+    inputBorderRadius: _paletteAllium.default.radius.radius4,
+    inputBorderWidth: _paletteAllium.default.border.border1,
+    inputHeight: _paletteAllium.default.size.size20,
+    inputOutlineColor: _rn.default.color.none,
+    inputOutlineWidth: _paletteAllium.default.border.none,
+    inputShadow: _rn.default.shadow.none,
+    inputWidth: _paletteAllium.default.size.size20,
+    labelColor: _paletteAllium.default.color.greyCharcoal,
+    labelFontName: Object.keys(_paletteAllium.default.font)[0],
+    labelFontSize: _paletteAllium.default.fontSize.size16,
+    labelFontWeight: '400',
+    labelLineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    labelMarginLeft: _paletteAllium.default.size.size10
+  },
+  rules: [{
+    if: {
+      error: true
+    },
+    tokens: {
+      inputBorderColor: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      inputBorderColor: _paletteAllium.default.color.purpleDeluge,
+      inputBorderWidth: _paletteAllium.default.border.border3
+    }
+  }, {
+    if: {
+      inactive: true
+    },
+    tokens: {
+      inputBorderColor: _paletteAllium.default.color.transparent,
+      inputBackgroundColor: _paletteAllium.default.color.greyMystic,
+      iconBackgroundColor: _paletteAllium.default.color.greyMystic,
+      iconColor: _paletteAllium.default.color.greyShuttle,
+      labelColor: _paletteAllium.default.color.greyShuttle
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ChevronLink.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+var _arrowLeftIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/arrow-left.icon.svg"));
+
+var _arrowRightIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/arrow-right.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    hover: _schema.appearances.ChevronLink.hover
+  },
+  tokens: {
+    leftIcon: _arrowLeftIcon.default,
+    rightIcon: _arrowRightIcon.default,
+    iconDisplace: _paletteAllium.default.size.size0,
+    iconSpace: _rn.default.integer[0]
+  },
+  rules: [{
+    if: {
+      hover: true
+    },
+    tokens: {
+      iconDisplace: _paletteAllium.default.size.size4
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Divider.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    weight: {
+      values: ['thick'],
+      type: 'variant'
+    },
+    decorative: {
+      description: 'Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.',
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    width: _paletteAllium.default.border.border1,
+    color: _paletteAllium.default.color.greyShuttle
+  },
+  rules: [{
+    if: {
+      weight: 'thick'
+    },
+    tokens: {
+      width: _paletteAllium.default.border.border2
+    }
+  }, {
+    if: {
+      decorative: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCloud
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ExpandCollapse.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {},
+  tokens: {
+    borderColor: _paletteAllium.default.color.greyCloud,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderStyle: _rn.default.borderStyle.solid
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/ExpandCollapseControl.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+var _caretUpIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-up.icon.svg"));
+
+var _caretDownIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    expanded: _schema.appearances.ExpandCollapseControl.expanded
+  },
+  tokens: {
+    icon: _caretDownIcon.default,
+    iconColor: _paletteAllium.default.color.greenAccessible,
+    iconSize: _paletteAllium.default.size.size24,
+    iconGap: _paletteAllium.default.size.size8,
+    iconPosition: _rn.default.position.left,
+    verticalAlign: _rn.default.verticalAlign.top,
+    justifyContent: _rn.default.flexJustifyContent.flexStart,
+    paddingLeft: _paletteAllium.default.size.size8,
+    paddingRight: _paletteAllium.default.size.size16,
+    paddingTop: _paletteAllium.default.size.size16,
+    paddingBottom: _paletteAllium.default.size.size16,
+    borderWidth: _rn.default.border.zero,
+    borderColor: _paletteAllium.default.color.transparent,
+    backgroundColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      expanded: true
+    },
+    tokens: {
+      icon: _caretUpIcon.default
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ExpandCollapsePanel.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {},
+  tokens: {
+    // animate slightly faster when closing
+    expandDuration: _paletteAllium.default.duration.duration300,
+    collapseDuration: _paletteAllium.default.duration.duration250,
+    contentPaddingLeft: _paletteAllium.default.size.size40,
+    contentPaddingRight: _paletteAllium.default.size.size16,
+    contentPaddingTop: _paletteAllium.default.size.size0,
+    contentPaddingBottom: _paletteAllium.default.size.size16
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/Feedback.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+var _notificationErrorIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg"));
+
+var _notificationSuccessIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    validation: _schema.appearances.Feedback.validation,
+    icon: {
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    backgroundColor: _paletteAllium.default.color.greyAthens,
+    borderColor: _paletteAllium.default.color.greyMystic,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderRadius: _paletteAllium.default.radius.radius4,
+    paddingTop: _paletteAllium.default.size.size12,
+    paddingBottom: _paletteAllium.default.size.size12,
+    paddingLeft: _paletteAllium.default.size.size16,
+    paddingRight: _paletteAllium.default.size.size16,
+    space: _rn.default.integer[2],
+    color: _paletteAllium.default.color.greyThunder,
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    titleFontSize: _paletteAllium.default.fontSize.size16,
+    contentFontSize: _paletteAllium.default.fontSize.size14,
+    icon: _rn.default.icon.none,
+    iconSize: _paletteAllium.default.fontSize.size24,
+    iconColor: _paletteAllium.default.color.transparent,
+    iconGap: _paletteAllium.default.size.size8
+  },
+  rules: [{
+    if: {
+      validation: 'success'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenPanache,
+      borderColor: _paletteAllium.default.color.greenPanache,
+      color: _paletteAllium.default.color.greenDarkFern
+    }
+  }, {
+    if: {
+      validation: 'error'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.redLight,
+      borderColor: _paletteAllium.default.color.redLight,
+      color: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      validation: 'success',
+      icon: true
+    },
+    tokens: {
+      icon: _notificationSuccessIcon.default,
+      iconColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      validation: 'error',
+      icon: true
+    },
+    tokens: {
+      icon: _notificationErrorIcon.default,
+      iconColor: _paletteAllium.default.color.red
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Icon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    size: {
+      values: ['small'],
+      type: 'variant'
+    },
+    rank: {
+      values: ['primary'],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    size: _paletteAllium.default.size.size24,
+    color: _paletteAllium.default.color.greyCharcoal,
+    translateX: _rn.default.size.zero,
+    translateY: _rn.default.size.zero
+  },
+  rules: [{
+    if: {
+      size: 'small'
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size20
+    }
+  }, {
+    if: {
+      rank: 'primary'
+    },
+    tokens: {
+      color: _paletteAllium.default.color.purpleTelus
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/InputLabel.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {},
+  tokens: {
+    gap: _paletteAllium.default.size.size8,
+    color: _paletteAllium.default.color.greyCharcoal,
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '700',
+    // font: palette.font.HelveticaNow[700]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    hintColor: _paletteAllium.default.color.greyCharcoal,
+    // TODO: replace with font token
+    hintFontName: Object.keys(_paletteAllium.default.font)[0],
+    hintFontWeight: '400',
+    // hintFont: palette.font.HelveticaNow[700],
+    hintFontSize: _paletteAllium.default.fontSize.size14,
+    hintLineHeight: _paletteAllium.default.lineHeight.ratio7to5
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/InputSupports.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {},
+  tokens: {
+    space: _rn.default.integer[1]
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/Link.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  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: _schema.appearances.Link.iconPosition,
+    focus: _schema.appearances.Link.focus,
+    hover: _schema.appearances.Link.hover,
+    pressed: _schema.appearances.Link.pressed
+  },
+  tokens: {
+    color: _paletteAllium.default.color.greenAccessible,
+    textLine: _rn.default.textLine.underline,
+    textLineStyle: _rn.default.textLineStyle.solid,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border2,
+    outerBorderGap: _paletteAllium.default.border.border2,
+    outerBorderRadius: _paletteAllium.default.radius.radius4,
+    outerBorderOutline: _rn.default.borderStyle.none,
+    // Same as default size Typography
+    // TODO replace with single font token
+    blockFontWeight: '400',
+    blockFontName: Object.keys(_paletteAllium.default.font)[0],
+    // bockFont: palette.font.HelveticaNow[400]
+    blockFontSize: _paletteAllium.default.fontSize.size16,
+    blockLineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    alignSelf: _rn.default.flexAlign.flexStart,
+    icon: _rn.default.icon.none,
+    iconSize: _paletteAllium.default.fontSize.size24,
+    iconSpace: _rn.default.integer[1],
+    iconTranslateX: _rn.default.size.zero,
+    iconTranslateY: _rn.default.size.zero
+  },
+  rules: [{
+    if: {
+      iconPosition: 'left'
+    },
+    tokens: {
+      iconSpace: _rn.default.integer[2]
+    }
+  }, // Initial interaction states
+  {
+    if: {
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenAccessible,
+      outerBorderOutline: _rn.default.borderStyle.none
+    }
+  }, {
+    if: {
+      hover: true
+    },
+    tokens: {
+      textLine: _rn.default.textLine.none,
+      color: _paletteAllium.default.color.greenSanFelix
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      textLine: _rn.default.textLine.none,
+      color: _paletteAllium.default.color.greenDarkFern
+    }
+  }, {
+    if: {
+      pressed: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenDarkFern
+    }
+  }, // block link sizes
+  {
+    if: {
+      size: 'large'
+    },
+    tokens: {
+      blockFontSize: _paletteAllium.default.fontSize.size20,
+      iconSize: _paletteAllium.default.fontSize.size24,
+      blockLineHeight: _paletteAllium.default.lineHeight.ratio8to5
+    }
+  }, {
+    if: {
+      size: 'small'
+    },
+    tokens: {
+      blockFontSize: _paletteAllium.default.fontSize.size14,
+      iconSize: _paletteAllium.default.fontSize.size20,
+      blockLineHeight: _paletteAllium.default.lineHeight.ratio10to7
+    }
+  }, {
+    if: {
+      size: 'micro'
+    },
+    tokens: {
+      blockFontSize: _paletteAllium.default.fontSize.size12,
+      // TODO replace this with font token
+      blockFontWeight: '500',
+      // blockFont: palette.font.HelveticaNow[500]
+      iconSize: _paletteAllium.default.fontSize.size16,
+      blockLineHeight: _paletteAllium.default.lineHeight.ratio4to3
+    }
+  }, // "alternative" variant
+  {
+    if: {
+      alternative: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      alternative: true,
+      focus: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCharcoal,
+      outerBorderColor: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      alternative: true,
+      hover: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      alternative: true,
+      pressed: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyThunder
+    }
+  }, // "inverse" variant
+  {
+    if: {
+      inverse: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      inverse: true,
+      hover: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyAthens
+    }
+  }, {
+    if: {
+      inverse: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.white,
+      outerBorderOutline: _rn.default.borderStyle.none
+    }
+  }, {
+    if: {
+      inverse: true,
+      pressed: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyMystic
+    }
+  }, {
+    if: {
+      inverse: true,
+      pressed: true,
+      focus: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyMystic,
+      outerBorderColor: _paletteAllium.default.color.greyMystic
+    }
+  }, // "light" variant
+  {
+    if: {
+      light: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      light: true,
+      focus: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyShuttle,
+      outerBorderColor: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      light: true,
+      hover: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCharcoal,
+      textLine: _rn.default.textLine.none
+    }
+  }]
+};
+exports.default = _default;