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

package/lib/components/List.js

@@ -0,0 +1,86 @@
+"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: {
+    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: '400',
+    itemFontSize: _paletteAllium.default.fontSize.size16,
+    itemLineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    itemFontName: Object.keys(_paletteAllium.default.font)[0],
+    interItemMargin: _paletteAllium.default.size.size8,
+    interItemMarginWithDivider: _paletteAllium.default.size.size16,
+    dividerColor: _paletteAllium.default.color.greyCloud,
+    dividerSize: _paletteAllium.default.border.border1,
+    itemBulletContainerWidth: _paletteAllium.default.size.size16,
+    itemBulletContainerAlign: 'center',
+    itemBulletWidth: _paletteAllium.default.size.size4,
+    itemBulletHeight: _paletteAllium.default.size.size4,
+    itemBulletColor: _paletteAllium.default.color.purpleTelus,
+    itemIconSize: _paletteAllium.default.size.size16,
+    itemIconColor: _paletteAllium.default.color.purpleTelus,
+    listGutter: _paletteAllium.default.size.size12
+  },
+  rules: [{
+    if: {
+      size: 'large'
+    },
+    tokens: {
+      itemFontSize: _paletteAllium.default.fontSize.size20,
+      itemLineHeight: _paletteAllium.default.lineHeight.ratio8to5,
+      listGutter: _paletteAllium.default.size.size12
+    }
+  }, {
+    if: {
+      size: 'small'
+    },
+    tokens: {
+      itemFontSize: _paletteAllium.default.fontSize.size14,
+      itemLineHeight: _paletteAllium.default.lineHeight.ratio10to7,
+      listGutter: _paletteAllium.default.size.size12
+    }
+  }, {
+    if: {
+      compact: true
+    },
+    tokens: {
+      itemLineHeight: _paletteAllium.default.lineHeight.ratio5to4
+    }
+  }, {
+    if: {
+      compact: true,
+      size: 'small'
+    },
+    tokens: {
+      itemLineHeight: _paletteAllium.default.lineHeight.ratio8to7
+    }
+  }, {
+    if: {
+      compact: true,
+      size: 'large'
+    },
+    tokens: {
+      itemLineHeight: _paletteAllium.default.lineHeight.ratio6to5
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Pagination.js

@@ -0,0 +1,40 @@
+"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: {
+    viewport: _schema.appearances.system.viewport
+  },
+  tokens: {
+    gap: _rn.default.integer[2],
+    truncateAbove: _rn.default.integer[4],
+    color: _paletteAllium.default.color.greyShuttle,
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2
+  },
+  rules: [{
+    if: {
+      viewport: ['md', 'lg', 'xl']
+    },
+    tokens: {
+      truncateAbove: _rn.default.integer[6]
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/PaginationPageButton.js

@@ -0,0 +1,82 @@
+"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: {
+    focus: _schema.appearances.PaginationPageButton.focus,
+    hover: _schema.appearances.PaginationPageButton.hover,
+    pressed: _schema.appearances.PaginationPageButton.pressed,
+    selected: _schema.appearances.PaginationPageButton.selected
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.transparent,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderRadius: _paletteAllium.default.radius.pill32,
+    backgroundColor: _paletteAllium.default.color.transparent,
+    paddingLeft: _paletteAllium.default.size.size8,
+    paddingRight: _paletteAllium.default.size.size8,
+    paddingTop: _paletteAllium.default.size.size4,
+    paddingBottom: _paletteAllium.default.size.size4,
+    width: _paletteAllium.default.size.size32,
+    // never visible - used only to increase the click area size
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border4,
+    outerBorderGap: _paletteAllium.default.border.border4,
+    color: _paletteAllium.default.color.greyShuttle,
+    // TODO: replace this with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    textLine: _rn.default.textLine.underline,
+    textAlign: _rn.default.flexJustifyContent.center
+  },
+  rules: [{
+    if: {
+      hover: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greyShuttle,
+      textLine: _rn.default.textLine.none
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greyShuttle,
+      borderWidth: _paletteAllium.default.border.border3
+    }
+  }, {
+    if: {
+      selected: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white,
+      textLine: _rn.default.textLine.none
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/PaginationSideButton.js

@@ -0,0 +1,113 @@
+"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: {
+    viewport: _schema.appearances.system.viewport,
+    focus: _schema.appearances.PaginationSideButton.focus,
+    hover: _schema.appearances.PaginationSideButton.hover,
+    pressed: _schema.appearances.PaginationSideButton.pressed,
+    selected: _schema.appearances.PaginationSideButton.selected,
+    direction: _schema.appearances.PaginationSideButton.direction
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.transparent,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderRadius: _paletteAllium.default.radius.radius4,
+    backgroundColor: _paletteAllium.default.color.transparent,
+    paddingLeft: _paletteAllium.default.size.size8,
+    paddingRight: _paletteAllium.default.size.size8,
+    paddingTop: _paletteAllium.default.size.size12,
+    paddingBottom: _paletteAllium.default.size.size12,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    color: _paletteAllium.default.color.greyShuttle,
+    // TODO replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    textLine: _rn.default.textLine.underline,
+    icon: _rn.default.icon.none,
+    iconSize: _paletteAllium.default.fontSize.size24,
+    iconDisplace: _paletteAllium.default.size.size0,
+    width: _rn.default.size.none,
+    textAlign: _rn.default.flexJustifyContent.center
+  },
+  rules: [{
+    if: {
+      viewport: ['xs', 'sm']
+    },
+    tokens: {
+      borderRadius: _paletteAllium.default.radius.pill32,
+      paddingTop: _paletteAllium.default.size.size4,
+      paddingBottom: _paletteAllium.default.size.size4,
+      width: _paletteAllium.default.size.size32
+    }
+  }, {
+    if: {
+      hover: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greyShuttle,
+      textLine: _rn.default.textLine.none,
+      iconDisplace: _paletteAllium.default.size.size4
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greyShuttle,
+      borderWidth: _paletteAllium.default.border.border3
+    }
+  }, {
+    if: {
+      selected: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white,
+      textLine: _rn.default.textLine.none
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      direction: 'previous'
+    },
+    tokens: {
+      icon: _arrowLeftIcon.default
+    }
+  }, {
+    if: {
+      direction: 'next'
+    },
+    tokens: {
+      icon: _arrowRightIcon.default
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Radio.js

@@ -0,0 +1,78 @@
+"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: {
+    checked: _schema.appearances.Radio.checked,
+    error: _schema.appearances.Radio.error,
+    focus: _schema.appearances.Radio.focus,
+    hover: _schema.appearances.Radio.hover,
+    inactive: _schema.appearances.Radio.inactive
+  },
+  tokens: {
+    checkedBackgroundColor: _paletteAllium.default.color.purpleDeluge,
+    checkedSize: _paletteAllium.default.size.size12,
+    containerBackgroundColor: _paletteAllium.default.color.transparent,
+    containerBorderRadius: _paletteAllium.default.radius.none,
+    containerMarginBottom: _paletteAllium.default.size.size8,
+    containerOpacity: _rn.default.opacity.opaque,
+    containerPaddingBottom: _paletteAllium.default.size.size0,
+    containerPaddingLeft: _paletteAllium.default.size.size0,
+    containerPaddingRight: _paletteAllium.default.size.size0,
+    containerPaddingTop: _paletteAllium.default.size.size0,
+    containerShadow: _rn.default.shadow.none,
+    descriptionFontSize: _paletteAllium.default.fontSize.size14,
+    descriptionLineHeight: _paletteAllium.default.lineHeight.ratio10to7,
+    descriptionMarginLeft: _rn.default.size.none,
+    inputBackgroundColor: _paletteAllium.default.color.white,
+    inputBorderColor: _paletteAllium.default.color.greyShuttle,
+    inputBorderWidth: _paletteAllium.default.border.border1,
+    inputOutlineColor: _paletteAllium.default.color.transparent,
+    inputOutlineWidth: _paletteAllium.default.border.none,
+    inputSize: _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,
+      labelColor: _paletteAllium.default.color.greyShuttle
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Select.js

@@ -0,0 +1,102 @@
+"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"));
+
+var _caretDownIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Select = {
+  appearances: {
+    validation: _schema.appearances.Select.validation,
+    hover: _schema.appearances.Select.hover,
+    focus: _schema.appearances.Select.focus,
+    inactive: _schema.appearances.Select.inactive
+  },
+  tokens: {
+    backgroundColor: _paletteAllium.default.color.white,
+    color: _paletteAllium.default.color.greyCharcoal,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderColor: _paletteAllium.default.color.greyShuttle,
+    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,
+    height: _paletteAllium.default.size.size48,
+    outerBackgroundColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border2,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderRadius: _paletteAllium.default.radius.radius4,
+    fontSize: _paletteAllium.default.fontSize.size16,
+    // TODO replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    icon: _caretDownIcon.default,
+    iconSize: _paletteAllium.default.fontSize.size24,
+    iconColor: _paletteAllium.default.color.greenAccessible,
+    validationIcon: _rn.default.icon.none,
+    validationIconSize: _paletteAllium.default.fontSize.size24,
+    validationIconColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      hover: true,
+      inactive: null
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greyMystic,
+      outerBackgroundColor: _paletteAllium.default.color.greyMystic
+    }
+  }, {
+    if: {
+      validation: 'success'
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greenAccessible,
+      validationIcon: _notificationSuccessIcon.default,
+      validationIconColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      validation: 'error'
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.red,
+      validationIcon: _notificationErrorIcon.default,
+      validationIconColor: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.purpleDeluge,
+      borderWidth: _paletteAllium.default.border.border3,
+      validationIcon: _rn.default.icon.none
+    }
+  }, {
+    if: {
+      inactive: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens,
+      borderColor: _paletteAllium.default.color.greyAthens
+    }
+  }]
+};
+var _default = Select;
+exports.default = _default;

package/lib/components/SideNav.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/SideNavItem.js

@@ -0,0 +1,118 @@
+"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: {
+    active: _schema.appearances.SideNavItem.active,
+    type: _schema.appearances.SideNavItem.type,
+    expanded: _schema.appearances.SideNavItem.expanded,
+    hover: _schema.appearances.SideNavItem.hover
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.greyCloud,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderStyle: _rn.default.borderStyle.solid,
+    paddingLeft: _paletteAllium.default.size.size16,
+    paddingRight: _paletteAllium.default.size.size16,
+    paddingTop: _paletteAllium.default.size.size16,
+    paddingBottom: _paletteAllium.default.size.size16,
+    justifyContent: _rn.default.flexJustifyContent.spaceBetween,
+    color: _paletteAllium.default.color.greyCharcoal,
+    accentOffset: _rn.default.size.zero,
+    accentPadding: _rn.default.size.zero,
+    accentWidth: _paletteAllium.default.size.size4,
+    accentBackgroundColor: _paletteAllium.default.color.transparent,
+    fontSize: _paletteAllium.default.fontSize.size16,
+    fontWeight: '400',
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    backgroundColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      active: true
+    },
+    tokens: {
+      paddingLeft: _paletteAllium.default.size.size12,
+      accentBackgroundColor: _paletteAllium.default.color.purpleTelus,
+      color: _paletteAllium.default.color.purpleTelus,
+      // TODO: replace with font token
+      fontWeight: '700' // font: palette.font.HelveticaNow[700]
+
+    }
+  }, {
+    if: {
+      type: 'child'
+    },
+    tokens: {
+      paddingLeft: _paletteAllium.default.size.size36,
+      borderWidth: _paletteAllium.default.border.none,
+      accentBackgroundColor: _paletteAllium.default.color.greyAthens,
+      accentOffset: _paletteAllium.default.size.size16,
+      fontSize: _paletteAllium.default.fontSize.size14,
+      lineHeight: _paletteAllium.default.lineHeight.ratio7to5
+    }
+  }, {
+    if: {
+      type: 'parent',
+      active: true
+    },
+    tokens: {
+      paddingLeft: _paletteAllium.default.size.size12
+    }
+  }, {
+    if: {
+      type: 'parent',
+      active: true,
+      expanded: true
+    },
+    tokens: {
+      paddingLeft: _paletteAllium.default.size.size16,
+      accentBackgroundColor: _paletteAllium.default.color.transparent,
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      hover: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens,
+      color: _paletteAllium.default.color.purpleTelus
+    }
+  }, {
+    if: {
+      type: 'child',
+      active: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens,
+      color: _paletteAllium.default.color.purpleTelus,
+      accentPadding: _paletteAllium.default.size.size16,
+      accentBackgroundColor: _paletteAllium.default.color.purpleTelus
+    }
+  }, {
+    if: {
+      type: 'child',
+      active: false,
+      hover: true
+    },
+    tokens: {
+      accentBackgroundColor: _paletteAllium.default.color.white,
+      color: _paletteAllium.default.color.greyCharcoal,
+      accentOffset: _rn.default.size.zero,
+      accentWidth: _paletteAllium.default.size.size16
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/SideNavItemsGroup.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 _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    expanded: _schema.appearances.SideNavItemGroup.expanded
+  },
+  tokens: {
+    // animate slightly faster when closing
+    expandDuration: _paletteAllium.default.duration.duration300,
+    collapseDuration: _paletteAllium.default.duration.duration250,
+    contentPaddingLeft: _paletteAllium.default.size.size0,
+    contentPaddingRight: _paletteAllium.default.size.size0,
+    contentPaddingTop: _paletteAllium.default.size.size0,
+    contentPaddingBottom: _paletteAllium.default.size.size0,
+    icon: _caretDownIcon.default,
+    iconColor: _paletteAllium.default.color.purpleTelus,
+    iconGap: _paletteAllium.default.size.size8,
+    iconSize: _paletteAllium.default.size.size24,
+    iconPosition: _rn.default.position.right,
+    verticalAlign: _rn.default.verticalAlign.middle,
+    justifyContent: _rn.default.flexJustifyContent.spaceBetween
+  },
+  rules: [{
+    if: {
+      expanded: true
+    },
+    tokens: {
+      icon: _caretUpIcon.default
+    }
+  }]
+};
+exports.default = _default;