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

package/src/components/ToggleSwitch.js

@@ -1,118 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-import checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
-
-export default {
-  appearances: {
-    focus: appearances.ToggleSwitch.focus,
-    hover: appearances.ToggleSwitch.hover,
-    pressed: appearances.ToggleSwitch.pressed,
-    inactive: appearances.ToggleSwitch.inactive,
-    selected: appearances.ToggleSwitch.selected
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.none,
-    borderRadius: palette.radius.pill32,
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.none,
-    outerBorderGap: palette.size.size0,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent,
-    backgroundColor: palette.color.greyShuttle,
-    opacity: system.opacity.opaque,
-    paddingLeft: system.size.zero,
-    paddingRight: system.size.zero,
-    paddingTop: system.size.zero,
-    paddingBottom: system.size.zero,
-    shadow: palette.shadow.surfaceInset,
-    alignSelf: 'flex-start',
-
-    icon: system.icon.none,
-    width: palette.size.size40,
-    trackBorderWidth: palette.border.border3,
-    trackBorderColor: palette.color.transparent,
-    trackBorderRadius: palette.radius.pill32,
-    iconSize: palette.size.size12,
-    iconColor: palette.color.greyShuttle,
-    switchSize: palette.size.size16,
-    switchColor: palette.color.white,
-    switchBorderColor: palette.color.transparent,
-    switchBorderWidth: palette.border.none,
-    switchBorderRadius: palette.radius.pill32,
-    switchShadow: palette.shadow.surfaceRaised
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        backgroundColor: palette.color.greyCharcoal
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.greyThunder
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        outerBackgroundColor: palette.color.white,
-        outerBorderGap: palette.border.border3,
-        outerBorderWidth: palette.border.border2,
-        outerBorderColor: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: palette.color.greyThunder
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        icon: checkmarkIcon,
-        backgroundColor: palette.color.greenAccessible,
-        iconColor: palette.color.greenAccessible
-      }
-    },
-    {
-      if: { selected: true, hover: true },
-      tokens: {
-        backgroundColor: palette.color.greenSanFelix,
-        iconColor: palette.color.greenSanFelix
-      }
-    },
-    {
-      if: { selected: true, pressed: true },
-      tokens: {
-        backgroundColor: palette.color.greenDarkFern,
-        iconColor: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greenAccessible
-      }
-    },
-    {
-      if: { selected: true, focus: true, pressed: true },
-      tokens: {
-        outerBorderColor: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: palette.color.greyCloud,
-        outerBorderColor: palette.color.greyCloud,
-        iconColor: palette.color.greyShuttle
-      }
-    }
-  ]
-}

package/src/components/Tooltip.js

@@ -1,41 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    inverse: {
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    backgroundColor: palette.color.greyThunder,
-    paddingTop: palette.size.size8,
-    paddingBottom: palette.size.size8,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    borderRadius: palette.radius.radius8,
-    shadow: palette.shadow.elevation1,
-
-    color: palette.color.white,
-    fontSize: palette.fontSize.size14,
-    lineHeight: palette.lineHeight.ratio3to2,
-
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-
-    arrowWidth: palette.size.size16,
-    arrowBorderRadius: palette.radius.radius1,
-    arrowOffset: palette.size.size4
-  },
-  rules: [
-    {
-      if: { inverse: true },
-      tokens: {
-        backgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal
-      }
-    }
-  ]
-}

package/src/components/TooltipButton.js

@@ -1,68 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-import questionIcon from '@telus-uds/palette-allium/build/rn/icons/question.icon.svg'
-
-export default {
-  appearances: {
-    focus: appearances.TooltipButton.focus,
-    hover: appearances.TooltipButton.hover,
-    pressed: appearances.TooltipButton.pressed,
-    inverse: {
-      values: [true],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border1,
-    outerBorderGap: palette.size.size4,
-    outerBorderRadius: palette.radius.pill32,
-    borderRadius: palette.radius.pill32,
-    width: palette.size.size16,
-
-    icon: questionIcon,
-    iconScale: system.iconScale.scale1,
-    iconSize: palette.size.size16,
-    iconColor: palette.color.greyThunder
-  },
-  rules: [
-    {
-      if: { inverse: true },
-      tokens: {
-        iconColor: palette.color.white
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        iconScale: system.iconScale.scale1_25
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        iconColor: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        iconColor: palette.color.greyCloud
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { inverse: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greyCloud
-      }
-    }
-  ]
-}

package/src/components/Typography.js

@@ -1,355 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export 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: appearances.system.viewport
-  },
-  tokens: {
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    // font: palette.font.HelveticaNow[400]
-
-    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,
-
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
-
-        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,
-
-        // TODO: replace with font token
-        fontWeight: '400',
-        // font: palette.font.HelveticaNow[400]
-
-        letterSpacing: palette.letterSpacing.medium,
-        lineHeight: palette.lineHeight.ratio11to9
-      }
-    },
-    {
-      if: { size: 'display2', viewport: ['lg', 'xl'] },
-      tokens: {
-        fontSize: palette.fontSize.size56,
-
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
-
-        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,
-
-        // TODO: replace with font token
-        fontWeight: '300',
-        // font: palette.font.HelveticaNow[300]
-
-        lineHeight: palette.lineHeight.ratio6to5,
-        letterSpacing: palette.letterSpacing.medium
-      }
-    },
-
-    /* h2 */
-    {
-      if: { size: 'h2' },
-      tokens: {
-        fontSize: palette.fontSize.size24,
-
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
-
-        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,
-
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
-
-        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,
-
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
-
-        lineHeight: palette.lineHeight.ratio3to2
-      }
-    },
-
-    /* h5 */
-    {
-      if: { size: 'h5' },
-      tokens: {
-        fontSize: palette.fontSize.size14,
-
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
-
-        lineHeight: palette.lineHeight.ratio9to7
-      }
-    },
-
-    /* h6 */
-    {
-      if: { size: 'h6' },
-      tokens: {
-        fontSize: palette.fontSize.size12,
-
-        // TODO: replace with font token
-        fontWeight: '700',
-        // font: palette.font.HelveticaNow[700]
-
-        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,
-
-        // TODO: replace with font token
-        fontWeight: '500',
-        // font: palette.font.HelveticaNow[500]
-
-        lineHeight: palette.lineHeight.ratio4to3
-      }
-    },
-
-    /* eyebrow */
-    {
-      if: { size: 'eyebrow' },
-      tokens: {
-        fontSize: palette.fontSize.size14,
-
-        // TODO: replace with font token
-        fontWeight: '700',
-        // font: palette.font.HelveticaNow[700]
-
-        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: {
-        // TODO: replace with font token
-        fontWeight: '700'
-        // font: palette.font.HelveticaNow[700]
-      }
-    }
-  ]
-}

package/src/components/index.js

@@ -1,37 +0,0 @@
-export { default as ActivityIndicator } from './ActivityIndicator'
-export { default as Box } from './Box'
-export { default as Button } from './Button'
-export { default as ButtonGroup } from './ButtonGroup'
-export { default as ButtonGroupItem } from './ButtonGroupItem'
-export { default as Card } from './Card'
-export { default as Checkbox } from './Checkbox'
-export { default as ChevronLink } from './ChevronLink'
-export { default as Divider } from './Divider'
-export { default as ExpandCollapse } from './ExpandCollapse'
-export { default as ExpandCollapseControl } from './ExpandCollapseControl'
-export { default as ExpandCollapsePanel } from './ExpandCollapsePanel'
-export { default as Feedback } from './Feedback'
-export { default as Icon } from './Icon'
-export { default as InputLabel } from './InputLabel'
-export { default as InputSupports } from './InputSupports'
-export { default as Link } from './Link'
-export { default as List } from './List'
-export { default as Pagination } from './Pagination'
-export { default as PaginationPageButton } from './PaginationPageButton'
-export { default as PaginationSideButton } from './PaginationSideButton'
-export { default as Radio } from './Radio'
-export { default as Select } from './Select'
-export { default as SideNav } from './SideNav'
-export { default as SideNavItem } from './SideNavItem'
-export { default as SideNavItemsGroup } from './SideNavItemsGroup'
-export { default as Skeleton } from './Skeleton'
-export { default as StackView } from './StackView'
-export { default as Tags } from './Tags'
-export { default as TagsItem } from './TagsItem'
-export { default as TextArea } from './TextArea'
-export { default as TextInput } from './TextInput'
-export { default as ToggleSwitch } from './ToggleSwitch'
-export { default as Tooltip } from './Tooltip'
-export { default as TooltipButton } from './TooltipButton'
-export { default as Typography } from './Typography'
-export { default as spacingScale } from './spacingScale'

package/src/components/spacingScale.js

@@ -1,36 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
-  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 }, tokens: { size: palette.size.size48 } },
-    { if: { space: 6 }, 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 @@
-import packageJson from '../package.json'
-import * as components from './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
-}
-
-export default alliumTheme