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

package/lib/components/Typography.js

@@ -1,370 +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: `Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,
-"display" headings are larger than "h" headings. Default is medium size body text. Does not change
-accessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.`,
-      values: ['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2'],
-      type: 'variant'
-    },
-    colour: {
-      description: `Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,
-  use the tokens prop.`,
-      values: ['secondary', 'tertiary'],
-      type: 'variant'
-    },
-    bold: {
-      description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
-      values: [true],
-      type: 'variant'
-    },
-    inverse: {
-      description: 'Styles the link white for use on dark backgrounds.',
-      values: [true],
-      type: 'variant'
-    },
-    compact: {
-      description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
-      values: [true],
-      type: 'variant'
-    },
-    viewport: _schema.appearances.system.viewport
-  },
-  tokens: {
-    // TODO: replace with font token
-    fontName: Object.keys(_paletteAllium.default.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-    fontSize: _paletteAllium.default.fontSize.size16,
-    color: _paletteAllium.default.color.greyThunder,
-    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
-    letterSpacing: _rn.default.letterSpacing.none,
-    textTransform: _rn.default.textTransform.none,
-    fontScaleCap: _paletteAllium.default.fontSize.size64
-  },
-  rules: [
-  /**
-   * Colour rules: most variants are thunder / charcoal, but some heading sizes are purple / thunder, inverse is white for all
-   */
-  {
-    if: {
-      colour: 'secondary'
-    },
-    tokens: {
-      color: _paletteAllium.default.color.greyCharcoal
-    }
-  }, {
-    if: {
-      size: ['display1', 'display2', 'h1', 'h2', 'h3']
-    },
-    tokens: {
-      color: _paletteAllium.default.color.purpleTelus
-    }
-  }, {
-    if: {
-      size: ['display1', 'display2', 'h1', 'h2', 'h3'],
-      colour: 'secondary'
-    },
-    tokens: {
-      color: _paletteAllium.default.color.greyThunder
-    }
-  }, {
-    if: {
-      size: 'h6',
-      colour: 'tertiary'
-    },
-    // TODO pending confirmation that this is necessary
-    tokens: {
-      color: _paletteAllium.default.color.greyShuttle
-    }
-  }, {
-    if: {
-      size: 'eyebrow'
-    },
-    tokens: {
-      color: _paletteAllium.default.color.greyCharcoal
-    }
-  }, {
-    if: {
-      size: 'eyebrow',
-      colour: 'secondary'
-    },
-    tokens: {
-      color: _paletteAllium.default.color.purpleTelus
-    }
-  }, {
-    if: {
-      inverse: true
-    },
-    tokens: {
-      color: _paletteAllium.default.color.white
-    }
-  },
-  /**
-   * Size/weight/line height/letter spacing rules
-   */
-
-  /* Display 1 */
-  {
-    if: {
-      size: 'display1'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size40,
-      // TODO: replace with font token
-      fontWeight: '300',
-      // font: palette.font.HelveticaNow[300]
-      lineHeight: _paletteAllium.default.lineHeight.ratio6to5,
-      letterSpacing: _paletteAllium.default.letterSpacing.medium
-    }
-  }, {
-    if: {
-      size: 'display1',
-      viewport: ['lg', 'xl']
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size64,
-      lineHeight: _paletteAllium.default.lineHeight.ratio9to8
-    }
-  },
-  /* Display 2 */
-  {
-    if: {
-      size: 'display2'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size36,
-      // TODO: replace with font token
-      fontWeight: '400',
-      // font: palette.font.HelveticaNow[400]
-      letterSpacing: _paletteAllium.default.letterSpacing.medium,
-      lineHeight: _paletteAllium.default.lineHeight.ratio11to9
-    }
-  }, {
-    if: {
-      size: 'display2',
-      viewport: ['lg', 'xl']
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size56,
-      // TODO: replace with font token
-      fontWeight: '300',
-      // font: palette.font.HelveticaNow[300]
-      lineHeight: _paletteAllium.default.lineHeight.ratio8to7,
-      letterSpacing: _paletteAllium.default.letterSpacing.condensed
-    }
-  },
-  /* h1 */
-  {
-    if: {
-      size: 'h1'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size28,
-      lineHeight: _paletteAllium.default.lineHeight.ratio9to7,
-      letterSpacing: _paletteAllium.default.letterSpacing.loose
-    }
-  }, {
-    if: {
-      size: 'h1',
-      viewport: ['lg', 'xl']
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size40,
-      // TODO: replace with font token
-      fontWeight: '300',
-      // font: palette.font.HelveticaNow[300]
-      lineHeight: _paletteAllium.default.lineHeight.ratio6to5,
-      letterSpacing: _paletteAllium.default.letterSpacing.medium
-    }
-  },
-  /* h2 */
-  {
-    if: {
-      size: 'h2'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size24,
-      // TODO: replace with font token
-      fontWeight: '500',
-      // font: palette.font.HelveticaNow[500]
-      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
-    }
-  }, {
-    if: {
-      size: 'h2',
-      viewport: ['lg', 'xl']
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size28,
-      lineHeight: _paletteAllium.default.lineHeight.ratio9to7,
-      letterSpacing: _paletteAllium.default.letterSpacing.loose
-    }
-  },
-  /* h3 */
-  {
-    if: {
-      size: 'h3'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size20,
-      // TODO: replace with font token
-      fontWeight: '500',
-      // font: palette.font.HelveticaNow[500]
-      lineHeight: _paletteAllium.default.lineHeight.ratio7to5
-    }
-  }, {
-    if: {
-      size: 'h3',
-      viewport: ['lg', 'xl']
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size24,
-      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
-    }
-  },
-  /* h4 */
-  {
-    if: {
-      size: 'h4'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size16,
-      // TODO: replace with font token
-      fontWeight: '500',
-      // font: palette.font.HelveticaNow[500]
-      lineHeight: _paletteAllium.default.lineHeight.ratio3to2
-    }
-  },
-  /* h5 */
-  {
-    if: {
-      size: 'h5'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size14,
-      // TODO: replace with font token
-      fontWeight: '500',
-      // font: palette.font.HelveticaNow[500]
-      lineHeight: _paletteAllium.default.lineHeight.ratio9to7
-    }
-  },
-  /* h6 */
-  {
-    if: {
-      size: 'h6'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size12,
-      // TODO: replace with font token
-      fontWeight: '700',
-      // font: palette.font.HelveticaNow[700]
-      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
-    }
-  },
-  /* large */
-  {
-    if: {
-      size: 'large'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size20,
-      lineHeight: _paletteAllium.default.lineHeight.ratio8to5
-    }
-  }, {
-    if: {
-      size: 'large',
-      compact: true
-    },
-    tokens: {
-      lineHeight: _paletteAllium.default.lineHeight.ratio6to5
-    }
-  },
-  /* default (medium) */
-  {
-    if: {
-      size: null,
-      compact: true
-    },
-    description: "The compact line height for the 'default' font size, but doesn't apply for any other styles",
-    tokens: {
-      lineHeight: _paletteAllium.default.lineHeight.ratio5to4
-    }
-  },
-  /* small */
-  {
-    if: {
-      size: 'small'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size14,
-      lineHeight: _paletteAllium.default.lineHeight.ratio10to7
-    }
-  }, {
-    if: {
-      size: 'small',
-      compact: true
-    },
-    tokens: {
-      lineHeight: _paletteAllium.default.lineHeight.ratio8to7
-    }
-  },
-  /* micro */
-  {
-    if: {
-      size: 'micro'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size12,
-      // TODO: replace with font token
-      fontWeight: '500',
-      // font: palette.font.HelveticaNow[500]
-      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
-    }
-  },
-  /* eyebrow */
-  {
-    if: {
-      size: 'eyebrow'
-    },
-    tokens: {
-      fontSize: _paletteAllium.default.fontSize.size14,
-      // TODO: replace with font token
-      fontWeight: '700',
-      // font: palette.font.HelveticaNow[700]
-      textTransform: _rn.default.textTransform.uppercase,
-      lineHeight: _paletteAllium.default.lineHeight.ratio9to7
-    }
-  },
-  /**
-   * bold styles
-   */
-  {
-    if: {
-      size: ['large', null, 'small', 'micro'],
-      bold: true
-    },
-    description: 'Bold is only available on body text styles, not headings',
-    tokens: {
-      // TODO: replace with font token
-      fontWeight: '700' // font: palette.font.HelveticaNow[700]
-
-    }
-  }]
-};
-exports.default = _default;

package/lib/components/index.js

@@ -1,303 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ActivityIndicator", {
-  enumerable: true,
-  get: function () {
-    return _ActivityIndicator.default;
-  }
-});
-Object.defineProperty(exports, "Box", {
-  enumerable: true,
-  get: function () {
-    return _Box.default;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () {
-    return _Button.default;
-  }
-});
-Object.defineProperty(exports, "ButtonGroup", {
-  enumerable: true,
-  get: function () {
-    return _ButtonGroup.default;
-  }
-});
-Object.defineProperty(exports, "ButtonGroupItem", {
-  enumerable: true,
-  get: function () {
-    return _ButtonGroupItem.default;
-  }
-});
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _Card.default;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function () {
-    return _Checkbox.default;
-  }
-});
-Object.defineProperty(exports, "ChevronLink", {
-  enumerable: true,
-  get: function () {
-    return _ChevronLink.default;
-  }
-});
-Object.defineProperty(exports, "Divider", {
-  enumerable: true,
-  get: function () {
-    return _Divider.default;
-  }
-});
-Object.defineProperty(exports, "ExpandCollapse", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapse.default;
-  }
-});
-Object.defineProperty(exports, "ExpandCollapseControl", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapseControl.default;
-  }
-});
-Object.defineProperty(exports, "ExpandCollapsePanel", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapsePanel.default;
-  }
-});
-Object.defineProperty(exports, "Feedback", {
-  enumerable: true,
-  get: function () {
-    return _Feedback.default;
-  }
-});
-Object.defineProperty(exports, "Icon", {
-  enumerable: true,
-  get: function () {
-    return _Icon.default;
-  }
-});
-Object.defineProperty(exports, "InputLabel", {
-  enumerable: true,
-  get: function () {
-    return _InputLabel.default;
-  }
-});
-Object.defineProperty(exports, "InputSupports", {
-  enumerable: true,
-  get: function () {
-    return _InputSupports.default;
-  }
-});
-Object.defineProperty(exports, "Link", {
-  enumerable: true,
-  get: function () {
-    return _Link.default;
-  }
-});
-Object.defineProperty(exports, "List", {
-  enumerable: true,
-  get: function () {
-    return _List.default;
-  }
-});
-Object.defineProperty(exports, "Pagination", {
-  enumerable: true,
-  get: function () {
-    return _Pagination.default;
-  }
-});
-Object.defineProperty(exports, "PaginationPageButton", {
-  enumerable: true,
-  get: function () {
-    return _PaginationPageButton.default;
-  }
-});
-Object.defineProperty(exports, "PaginationSideButton", {
-  enumerable: true,
-  get: function () {
-    return _PaginationSideButton.default;
-  }
-});
-Object.defineProperty(exports, "Radio", {
-  enumerable: true,
-  get: function () {
-    return _Radio.default;
-  }
-});
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () {
-    return _Select.default;
-  }
-});
-Object.defineProperty(exports, "SideNav", {
-  enumerable: true,
-  get: function () {
-    return _SideNav.default;
-  }
-});
-Object.defineProperty(exports, "SideNavItem", {
-  enumerable: true,
-  get: function () {
-    return _SideNavItem.default;
-  }
-});
-Object.defineProperty(exports, "SideNavItemsGroup", {
-  enumerable: true,
-  get: function () {
-    return _SideNavItemsGroup.default;
-  }
-});
-Object.defineProperty(exports, "Skeleton", {
-  enumerable: true,
-  get: function () {
-    return _Skeleton.default;
-  }
-});
-Object.defineProperty(exports, "StackView", {
-  enumerable: true,
-  get: function () {
-    return _StackView.default;
-  }
-});
-Object.defineProperty(exports, "Tags", {
-  enumerable: true,
-  get: function () {
-    return _Tags.default;
-  }
-});
-Object.defineProperty(exports, "TagsItem", {
-  enumerable: true,
-  get: function () {
-    return _TagsItem.default;
-  }
-});
-Object.defineProperty(exports, "TextArea", {
-  enumerable: true,
-  get: function () {
-    return _TextArea.default;
-  }
-});
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () {
-    return _TextInput.default;
-  }
-});
-Object.defineProperty(exports, "ToggleSwitch", {
-  enumerable: true,
-  get: function () {
-    return _ToggleSwitch.default;
-  }
-});
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function () {
-    return _Tooltip.default;
-  }
-});
-Object.defineProperty(exports, "TooltipButton", {
-  enumerable: true,
-  get: function () {
-    return _TooltipButton.default;
-  }
-});
-Object.defineProperty(exports, "Typography", {
-  enumerable: true,
-  get: function () {
-    return _Typography.default;
-  }
-});
-Object.defineProperty(exports, "spacingScale", {
-  enumerable: true,
-  get: function () {
-    return _spacingScale.default;
-  }
-});
-
-var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
-
-var _Box = _interopRequireDefault(require("./Box"));
-
-var _Button = _interopRequireDefault(require("./Button"));
-
-var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
-
-var _ButtonGroupItem = _interopRequireDefault(require("./ButtonGroupItem"));
-
-var _Card = _interopRequireDefault(require("./Card"));
-
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
-var _ChevronLink = _interopRequireDefault(require("./ChevronLink"));
-
-var _Divider = _interopRequireDefault(require("./Divider"));
-
-var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
-
-var _ExpandCollapseControl = _interopRequireDefault(require("./ExpandCollapseControl"));
-
-var _ExpandCollapsePanel = _interopRequireDefault(require("./ExpandCollapsePanel"));
-
-var _Feedback = _interopRequireDefault(require("./Feedback"));
-
-var _Icon = _interopRequireDefault(require("./Icon"));
-
-var _InputLabel = _interopRequireDefault(require("./InputLabel"));
-
-var _InputSupports = _interopRequireDefault(require("./InputSupports"));
-
-var _Link = _interopRequireDefault(require("./Link"));
-
-var _List = _interopRequireDefault(require("./List"));
-
-var _Pagination = _interopRequireDefault(require("./Pagination"));
-
-var _PaginationPageButton = _interopRequireDefault(require("./PaginationPageButton"));
-
-var _PaginationSideButton = _interopRequireDefault(require("./PaginationSideButton"));
-
-var _Radio = _interopRequireDefault(require("./Radio"));
-
-var _Select = _interopRequireDefault(require("./Select"));
-
-var _SideNav = _interopRequireDefault(require("./SideNav"));
-
-var _SideNavItem = _interopRequireDefault(require("./SideNavItem"));
-
-var _SideNavItemsGroup = _interopRequireDefault(require("./SideNavItemsGroup"));
-
-var _Skeleton = _interopRequireDefault(require("./Skeleton"));
-
-var _StackView = _interopRequireDefault(require("./StackView"));
-
-var _Tags = _interopRequireDefault(require("./Tags"));
-
-var _TagsItem = _interopRequireDefault(require("./TagsItem"));
-
-var _TextArea = _interopRequireDefault(require("./TextArea"));
-
-var _TextInput = _interopRequireDefault(require("./TextInput"));
-
-var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
-
-var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-
-var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
-
-var _Typography = _interopRequireDefault(require("./Typography"));
-
-var _spacingScale = _interopRequireDefault(require("./spacingScale"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }