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

package/lib/components/Checkbox.js

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

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

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

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

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

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

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

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

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

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

@@ -1,241 +0,0 @@
-"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;