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

package/src/components/Link.js

@@ -1,195 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getLinkSchema, validateComponentTheme, linkAppearances } from '@telus-uds/tools-theme'
-
-const Link = {
-  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: linkAppearances.iconPosition,
-    focus: linkAppearances.focus,
-    hover: linkAppearances.hover
-  },
-  tokens: {
-    color: palette.color.greenAccessible,
-
-    textLine: 'underline',
-    textLineStyle: 'solid',
-
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.radius4,
-
-    // Same as default size Typography
-    blockFontWeight: '400',
-    blockFontSize: palette.fontSize.size16,
-    blockLineHeight: palette.lineHeight.ratio3to2,
-    blockFontName: Object.keys(palette.font)[0],
-    alignSelf: 'flex-start',
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconGapBefore: palette.size.size4,
-    iconGapAfter: palette.size.size8,
-    iconTranslateX: 0,
-    iconTranslateY: 0
-  },
-  rules: [
-    // Initial interaction states
-    {
-      if: { focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greenAccessible,
-        outerBorderOutline: 'none'
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        color: palette.color.greenDarkFern
-      }
-    },
-    {
-      if: { pressed: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.greenDarkFern
-      }
-    },
-
-    // block link sizes
-    {
-      if: { size: 'large' },
-      tokens: {
-        blockFontSize: palette.fontSize.size20,
-        iconSize: palette.fontSize.size24,
-        blockLineHeight: palette.lineHeight.ratio8to5
-      }
-    },
-    {
-      if: { size: 'small' },
-      tokens: {
-        blockFontSize: palette.fontSize.size14,
-        iconSize: palette.fontSize.size20,
-        blockLineHeight: palette.lineHeight.ratio10to7
-      }
-    },
-    {
-      if: { size: 'micro' },
-      tokens: {
-        blockFontSize: palette.fontSize.size12,
-        blockFontWeight: '500',
-        iconSize: palette.fontSize.size16,
-        blockLineHeight: palette.lineHeight.ratio4to3
-      }
-    },
-
-    // "alternative" variant
-    {
-      if: { alternative: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-    {
-      if: { alternative: true, focus: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.greyCharcoal
-      }
-    },
-    {
-      if: { alternative: true, hover: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-    {
-      if: { alternative: true, pressed: true },
-      tokens: {
-        color: palette.color.greyThunder
-      }
-    },
-
-    // "inverse" variant
-    {
-      if: { inverse: true },
-      tokens: {
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inverse: true, hover: true },
-      tokens: {
-        color: palette.color.greyAthens
-      }
-    },
-    {
-      if: { inverse: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.white,
-        outerBorderOutline: 'none'
-      }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        color: palette.color.greyMystic
-      }
-    },
-    {
-      if: { inverse: true, pressed: true, focus: true },
-      tokens: {
-        color: palette.color.greyMystic,
-        outerBorderColor: palette.color.greyMystic
-      }
-    },
-
-    // "light" variant
-    {
-      if: { light: true },
-      tokens: {
-        color: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { light: true, focus: true },
-      tokens: {
-        color: palette.color.greyShuttle,
-        outerBorderColor: palette.color.greyShuttle
-      }
-    },
-    {
-      if: { light: true, hover: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        textLine: 'none'
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Link, getLinkSchema(palette), 'Link')
-
-export default Link

package/src/components/Pagination.js

@@ -1,33 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getPaginationSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import { appearances } from '@telus-uds/system-constants'
-
-const Pagination = {
-  appearances: {
-    viewport: appearances.viewport
-  },
-  tokens: {
-    gap: 2,
-    truncateAbove: 4,
-
-    color: palette.color.greyShuttle,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2
-  },
-  rules: [
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        truncateAbove: 6
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Pagination, getPaginationSchema(palette), 'pagination')
-
-export default Pagination

package/src/components/PaginationPageButton.js

@@ -1,81 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationPageButtonSchema,
-  lineOptions,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationPageButton = {
-  appearances: {
-    focus,
-    hover,
-    pressed
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size4,
-    paddingBottom: palette.size.size4,
-    width: palette.size.size32,
-
-    // never visible - used only to increase the click area size
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border4,
-    outerBorderGap: palette.border.border4,
-
-    color: palette.color.greyShuttle,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline
-  },
-  rules: [
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        borderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationPageButton,
-  getPaginationPageButtonSchema(palette),
-  'pagination-page-button'
-)
-
-export default PaginationPageButton

package/src/components/PaginationSideButton.js

@@ -1,109 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationSideButtonSchema,
-  lineOptions,
-  paginationSideButtonAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-import leftArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-left.icon.svg'
-import rightArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-right.icon.svg'
-import { appearances } from '@telus-uds/system-constants'
-
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationSideButton = {
-  appearances: {
-    viewport: appearances.viewport,
-    focus,
-    hover,
-    pressed,
-    ...paginationSideButtonAppearances
-  },
-  tokens: {
-    borderColor: palette.color.transparent,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    backgroundColor: palette.color.transparent,
-    paddingLeft: palette.size.size8,
-    paddingRight: palette.size.size8,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    outerBorderColor: palette.color.transparent,
-
-    color: palette.color.greyShuttle,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline,
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconDisplace: palette.size.size0
-  },
-  rules: [
-    {
-      if: { viewport: ['xs', 'sm'] },
-      tokens: {
-        borderRadius: palette.radius.pill32,
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        width: 32
-      }
-    },
-    {
-      if: { hover: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none,
-        iconDisplace: palette.size.size4
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.greyShuttle,
-        borderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { selected: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white,
-        textLine: lineOptions.none
-      }
-    },
-    {
-      if: { pressed: true },
-      tokens: {
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { direction: 'previous' },
-      tokens: {
-        icon: leftArrowIcon
-      }
-    },
-    {
-      if: { direction: 'next' },
-      tokens: {
-        icon: rightArrowIcon
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  PaginationSideButton,
-  getPaginationSideButtonSchema(palette),
-  'pagination-side-button'
-)
-
-export default PaginationSideButton

package/src/components/SideNav.js

@@ -1,18 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getSideNavSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const SideNav = {
-  appearances: {},
-  tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid'
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNav, getSideNavSchema(palette), 'side-nav')
-
-export default SideNav

package/src/components/SideNavItem.js

@@ -1,116 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  getSideNavItemSchema,
-  sideNavItemAppearances,
-  linkAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const SideNavItem = {
-  appearances: {
-    ...sideNavItemAppearances,
-    hover: linkAppearances.hover
-  },
-  tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderStyle: 'solid',
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    justifyContent: 'space-between',
-    color: palette.color.greyCharcoal,
-    accentOffset: 0,
-    accentPadding: 0,
-    accentWidth: palette.size.size4,
-    accentBackgroundColor: palette.color.transparent
-  },
-  rules: [
-    {
-      if: {
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size12,
-        accentBackgroundColor: palette.color.purpleTelus,
-        color: palette.color.purpleTelus,
-        fontWeight: '700'
-      }
-    },
-    {
-      if: {
-        type: 'child'
-      },
-      tokens: {
-        paddingLeft: palette.size.size36,
-        borderWidth: palette.border.none,
-        accentBackgroundColor: palette.color.greyAthens,
-        accentOffset: palette.size.size16,
-        fontSize: palette.fontSize.size14,
-        lineHeight: palette.lineHeight.multiply140
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size12
-      }
-    },
-    {
-      if: {
-        type: 'parent',
-        active: true,
-        expanded: true
-      },
-      tokens: {
-        paddingLeft: palette.size.size16,
-        accentBackgroundColor: palette.color.transparent,
-        color: palette.color.greyCharcoal
-      }
-    },
-    {
-      if: {
-        hover: true
-      },
-      tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: true
-      },
-      tokens: {
-        backgroundColor: palette.color.greyAthens,
-        color: palette.color.purpleTelus,
-        accentPadding: palette.size.size16,
-        accentBackgroundColor: palette.color.purpleTelus
-      }
-    },
-    {
-      if: {
-        type: 'child',
-        active: false,
-        hover: true
-      },
-      tokens: {
-        accentBackgroundColor: palette.color.white,
-        color: palette.color.greyCharcoal,
-        accentOffset: 0,
-        accentWidth: palette.size.size16
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(SideNavItem, getSideNavItemSchema(palette), 'side-nav-item')
-
-export default SideNavItem

package/src/components/SideNavItemsGroup.js

@@ -1,41 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getSideNavItemsGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-import CaretUp from '@telus-uds/palette-allium/build/rn/icons/caret-up.icon.svg'
-import CaretDown from '@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg'
-
-const SideNavItemsGroup = {
-  appearances: {},
-  tokens: {
-    // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    contentPaddingLeft: palette.size.size0,
-    contentPaddingRight: palette.size.size0,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size0,
-    icon: CaretDown,
-    iconColor: palette.color.purpleTelus,
-    iconGap: palette.size.size8,
-    iconSize: palette.size.size24,
-    iconPosition: 'right',
-    verticalAlign: 'middle',
-    justifyContent: 'space-between'
-  },
-  rules: [
-    {
-      if: { expanded: true },
-      tokens: { icon: CaretUp }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  SideNavItemsGroup,
-  getSideNavItemsGroupSchema(palette),
-  'side-nav-items-group'
-)
-
-export default SideNavItemsGroup

package/src/components/StackView.js

@@ -1,19 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import { getStackViewSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-// This makes the React Native defaults explicit and allows them to be overridden with tokens
-const StackView = {
-  appearances: {},
-  tokens: {
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    flexGrow: 0
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(StackView, getStackViewSchema(palette), 'stack-view')
-
-export default StackView

package/src/components/TextInput.js

@@ -1,86 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import {
-  getTextInputSchema,
-  textInputAppearances,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-import errorIcon from '@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg'
-import successIcon from '@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg'
-
-const TextInput = {
-  appearances: {
-    ...textInputAppearances
-  },
-  tokens: {
-    backgroundColor: palette.color.white,
-    color: palette.color.greyCharcoal,
-    borderWidth: palette.border.border1,
-    borderColor: palette.color.greyShuttle,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size12,
-    paddingBottom: palette.size.size12,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    space: 1,
-
-    outerBackgroundColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderColor: palette.color.transparent,
-    outerBorderRadius: palette.radius.radius4,
-
-    fontName: Object.keys(palette.font)[0],
-    fontSize: palette.fontSize.size16,
-    fontWeight: '400',
-    lineHeight: palette.lineHeight.ratio3to2,
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent
-  },
-  rules: [
-    {
-      if: { hover: true, inactive: null },
-      tokens: {
-        outerBorderColor: palette.color.greyMystic,
-        outerBackgroundColor: palette.color.greyMystic
-      }
-    },
-    {
-      if: { validation: 'success' },
-      tokens: {
-        borderColor: palette.color.greenAccessible,
-        icon: successIcon,
-        iconColor: palette.color.greenAccessible
-      }
-    },
-    {
-      if: { validation: 'error' },
-      tokens: {
-        borderColor: palette.color.red,
-        icon: errorIcon,
-        iconColor: palette.color.red
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.purpleDeluge,
-        borderWidth: palette.border.border3,
-        icon: null
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: palette.color.greyAthens,
-        borderColor: palette.color.greyAthens
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(TextInput, getTextInputSchema(palette), 'text-input')
-
-export default TextInput