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

package/src/components/Typography.js

@@ -1,337 +0,0 @@
-module.exports = {
-  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: '{appearances.system.viewport}'
-  },
-  tokens: {
-    fontName: '{palette.fontName.HelveticaNow}',
-    fontWeight: '{palette.fontWeight.weight400}',
-
-    fontSize: '{palette.fontSize.size16}',
-    color: '{palette.color.greyThunder}',
-    lineHeight: '{palette.lineHeight.ratio3to2}',
-    letterSpacing: '{system.letterSpacing.none}',
-    textTransform: '{system.textTransform.none}',
-    fontScaleCap: '{palette.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: '{palette.color.greyCharcoal}'
-      }
-    },
-
-    {
-      if: { size: ['display1', 'display2', 'h1', 'h2', 'h3'] },
-      tokens: {
-        color: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: { size: ['display1', 'display2', 'h1', 'h2', 'h3'], colour: 'secondary' },
-      tokens: {
-        color: '{palette.color.greyThunder}'
-      }
-    },
-    {
-      if: { size: 'h6', colour: 'tertiary' }, // TODO pending confirmation that this is necessary
-      tokens: {
-        color: '{palette.color.greyShuttle}'
-      }
-    },
-    {
-      if: { size: 'eyebrow' },
-      tokens: {
-        color: '{palette.color.greyCharcoal}'
-      }
-    },
-    {
-      if: { size: 'eyebrow', colour: 'secondary' },
-      tokens: {
-        color: '{palette.color.purpleTelus}'
-      }
-    },
-    {
-      if: { inverse: true },
-      tokens: {
-        color: '{palette.color.white}'
-      }
-    },
-
-    /**
-     * Size/weight/line height/letter spacing rules
-     */
-    /* Display 1 */
-    {
-      if: { size: 'display1' },
-      tokens: {
-        fontSize: '{palette.fontSize.size40}',
-
-        fontWeight: '{palette.fontWeight.weight300}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio6to5}',
-        letterSpacing: '{palette.letterSpacing.medium}'
-      }
-    },
-    {
-      if: { size: 'display1', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: '{palette.fontSize.size64}',
-        lineHeight: '{palette.lineHeight.ratio9to8}'
-      }
-    },
-
-    /* Display 2 */
-    {
-      if: { size: 'display2' },
-      tokens: {
-        fontSize: '{palette.fontSize.size36}',
-
-        fontWeight: '{palette.fontWeight.weight400}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        letterSpacing: '{palette.letterSpacing.medium}',
-        lineHeight: '{palette.lineHeight.ratio11to9}'
-      }
-    },
-    {
-      if: { size: 'display2', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: '{palette.fontSize.size56}',
-
-        fontWeight: '{palette.fontWeight.weight300}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio8to7}',
-        letterSpacing: '{palette.letterSpacing.condensed}'
-      }
-    },
-
-    /* h1 */
-    {
-      if: { size: 'h1' },
-      tokens: {
-        fontSize: '{palette.fontSize.size28}',
-        lineHeight: '{palette.lineHeight.ratio9to7}',
-        letterSpacing: '{palette.letterSpacing.loose}'
-      }
-    },
-    {
-      if: { size: 'h1', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: '{palette.fontSize.size40}',
-
-        fontWeight: '{palette.fontWeight.weight300}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio6to5}',
-        letterSpacing: '{palette.letterSpacing.medium}'
-      }
-    },
-
-    /* h2 */
-    {
-      if: { size: 'h2' },
-      tokens: {
-        fontSize: '{palette.fontSize.size24}',
-
-        fontWeight: '{palette.fontWeight.weight500}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio4to3}'
-      }
-    },
-    {
-      if: { size: 'h2', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: '{palette.fontSize.size28}',
-        lineHeight: '{palette.lineHeight.ratio9to7}',
-        letterSpacing: '{palette.letterSpacing.loose}'
-      }
-    },
-
-    /* h3 */
-    {
-      if: { size: 'h3' },
-      tokens: {
-        fontSize: '{palette.fontSize.size20}',
-
-        fontWeight: '{palette.fontWeight.weight500}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio7to5}'
-      }
-    },
-    {
-      if: { size: 'h3', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: '{palette.fontSize.size24}',
-        lineHeight: '{palette.lineHeight.ratio4to3}'
-      }
-    },
-
-    /* h4 */
-    {
-      if: { size: 'h4' },
-      tokens: {
-        fontSize: '{palette.fontSize.size16}',
-
-        fontWeight: '{palette.fontWeight.weight500}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio3to2}'
-      }
-    },
-
-    /* h5 */
-    {
-      if: { size: 'h5' },
-      tokens: {
-        fontSize: '{palette.fontSize.size14}',
-
-        fontWeight: '{palette.fontWeight.weight500}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio9to7}'
-      }
-    },
-
-    /* h6 */
-    {
-      if: { size: 'h6' },
-      tokens: {
-        fontSize: '{palette.fontSize.size12}',
-
-        fontWeight: '{palette.fontWeight.weight700}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio4to3}'
-      }
-    },
-
-    /* large */
-    {
-      if: { size: 'large' },
-      tokens: {
-        fontSize: '{palette.fontSize.size20}',
-        lineHeight: '{palette.lineHeight.ratio8to5}'
-      }
-    },
-    {
-      if: { size: 'large', compact: true },
-      tokens: {
-        lineHeight: '{palette.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: '{palette.lineHeight.ratio5to4}'
-      }
-    },
-    /* small */
-    {
-      if: { size: 'small' },
-      tokens: {
-        fontSize: '{palette.fontSize.size14}',
-        lineHeight: '{palette.lineHeight.ratio10to7}'
-      }
-    },
-    {
-      if: { size: 'small', compact: true },
-      tokens: {
-        lineHeight: '{palette.lineHeight.ratio8to7}'
-      }
-    },
-
-    /* micro */
-    {
-      if: { size: 'micro' },
-      tokens: {
-        fontSize: '{palette.fontSize.size12}',
-
-        fontWeight: '{palette.fontWeight.weight500}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        lineHeight: '{palette.lineHeight.ratio4to3}'
-      }
-    },
-
-    /* eyebrow */
-    {
-      if: { size: 'eyebrow' },
-      tokens: {
-        fontSize: '{palette.fontSize.size14}',
-
-        fontWeight: '{palette.fontWeight.weight700}',
-        fontName: '{palette.fontName.HelveticaNow}',
-
-        textTransform: '{system.textTransform.uppercase}',
-        lineHeight: '{palette.lineHeight.ratio9to7}'
-      }
-    },
-
-    /**
-     * bold styles
-     */
-    {
-      if: { size: ['large', null, 'small', 'micro'], bold: true },
-      description: 'Bold is only available on body text styles, not headings',
-      tokens: {
-        fontWeight: '{palette.fontWeight.weight700}',
-        fontName: '{palette.fontName.HelveticaNow}'
-      }
-    }
-  ]
-}

package/src/components/index.js

@@ -1,53 +0,0 @@
-module.exports = {
-  ActivityIndicator: require('./ActivityIndicator'),
-  Box: require('./Box'),
-  Button: require('./Button'),
-  ButtonGroup: require('./ButtonGroup'),
-  ButtonGroupItem: require('./ButtonGroupItem'),
-  Card: require('./Card'),
-  Checkbox: require('./Checkbox'),
-  CheckboxGroup: require('./CheckboxGroup'),
-  ChevronLink: require('./ChevronLink'),
-  Divider: require('./Divider'),
-  ExpandCollapse: require('./ExpandCollapse'),
-  ExpandCollapseControl: require('./ExpandCollapseControl'),
-  ExpandCollapsePanel: require('./ExpandCollapsePanel'),
-  Feedback: require('./Feedback'),
-  Icon: require('./Icon'),
-  InputLabel: require('./InputLabel'),
-  InputSupports: require('./InputSupports'),
-  Link: require('./Link'),
-  List: require('./List'),
-  Modal: require('./Modal'),
-  Notification: require('./Notification'),
-  Pagination: require('./Pagination'),
-  PaginationPageButton: require('./PaginationPageButton'),
-  PaginationSideButton: require('./PaginationSideButton'),
-  Progress: require('./Progress'),
-  ProgressBar: require('./ProgressBar'),
-  Radio: require('./Radio'),
-  RadioCard: require('./RadioCard'),
-  RadioCardGroup: require('./RadioCardGroup'),
-  RadioGroup: require('./RadioGroup'),
-  Search: require('./Search'),
-  SearchButton: require('./SearchButton'),
-  StepTracker: require('./StepTracker'),
-  Tabs: require('./Tabs'),
-  TabsItem: require('./TabsItem'),
-  TabsScrollButton: require('./TabsScrollButton'),
-  TextArea: require('./TextArea'),
-  TextInput: require('./TextInput'),
-  ToggleSwitch: require('./ToggleSwitch'),
-  Tooltip: require('./Tooltip'),
-  TooltipButton: require('./TooltipButton'),
-  Typography: require('./Typography'),
-  Select: require('./Select'),
-  SideNav: require('./SideNav'),
-  SideNavItem: require('./SideNavItem'),
-  SideNavItemsGroup: require('./SideNavItemsGroup'),
-  Skeleton: require('./Skeleton'),
-  StackView: require('./StackView'),
-  Tags: require('./Tags'),
-  TagsItem: require('./TagsItem'),
-  spacingScale: require('./spacingScale')
-}

package/src/components/spacingScale.js

@@ -1,33 +0,0 @@
-module.exports = {
-  appearances: {
-    space: '{appearances.spacingScale.space}',
-    viewport: '{appearances.system.viewport}'
-  },
-  // Largest spacings first, so they apply any time space >= highest index'
-  tokens: { size: '{palette.size.size96}' },
-  rules: [
-    { if: { viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size120}' } },
-
-    { if: { space: 11 }, tokens: { size: '{palette.size.size96}' } },
-    { if: { space: 10 }, tokens: { size: '{palette.size.size80}' } },
-    { if: { space: 9 }, tokens: { size: '{palette.size.size64}' } },
-    { if: { space: 8 }, tokens: { size: '{palette.size.size48}' } },
-    { if: { space: 7 }, tokens: { size: '{palette.size.size40}' } },
-    { if: { space: 6 }, tokens: { size: '{palette.size.size36}' } },
-    { if: { space: 5 }, tokens: { size: '{palette.size.size32}' } },
-    { if: { space: 4 }, tokens: { size: '{palette.size.size24}' } },
-    { if: { space: 3 }, tokens: { size: '{palette.size.size16}' } },
-    { if: { space: 2 }, tokens: { size: '{palette.size.size8}' } },
-    { if: { space: 1 }, tokens: { size: '{palette.size.size4}' } },
-
-    { if: { space: 11, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size120}' } },
-    { if: { space: 10, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size96}' } },
-    { if: { space: 9, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size72}' } },
-    { if: { space: 8, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size64}' } },
-    { if: { space: 7, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size48}' } },
-    { if: { space: 6, viewport: ['lg', 'xl'] }, tokens: { size: '{palette.size.size40}' } },
-
-    // Zero spacing last; overrides all other rules when space === 0
-    { if: { space: 0 }, tokens: { size: '{palette.size.size0}' } }
-  ]
-}

package/src/index.js

@@ -1,17 +0,0 @@
-const packageJson = require('../package.json')
-const components = require('./components')
-
-// TODO: replace this with theme build tooling and schema checks as part of
-// https://github.com/telus/universal-design-system/issues/92
-const metadata = {
-  name: 'allium',
-  package: packageJson.name,
-  version: packageJson.version
-}
-
-const alliumTheme = {
-  metadata,
-  components
-}
-
-module.exports = alliumTheme