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

package/src/components/ActivityIndicator.js

@@ -1,10 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-
-export default {
-  tokens: {
-    size: palette.size.size40,
-    thickness: palette.border.border4,
-    color: palette.color.darkMosque
-  },
-  rules: []
-}

package/src/components/Box.js

@@ -1,24 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const Box = {
-  appearances: {
-    background: {
-      description: 'Background colour of box. Transparent if not specified.',
-      values: ['light', 'lightest']
-    }
-  },
-  tokens: {
-    backgroundColor: undefined
-  },
-  rules: [
-    { if: { background: 'lightest' }, tokens: { backgroundColor: palette.color.white } },
-    { if: { background: 'light' }, tokens: { backgroundColor: palette.color.gallery } }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Box, getBoxSchema(palette))
-
-export default Box

package/src/components/Button.js

@@ -1,178 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getButtonSchema, validateComponentTheme, buttonAppearances } from '@telus-uds/tools-theme'
-
-const Button = {
-  appearances: {
-    rank: {
-      description:
-        'Prominence of the button. Use the default ("primary") button style for the main action on a page or in a form, and "secondary" style for secondary actions.',
-      values: ['secondary'],
-      type: 'variant'
-    },
-    rounded: {
-      // TODO: add some usage guidance, there's none on https://telus.github.io/kds/#button
-      description: 'Gives a button "pill-style" rounded sides',
-      values: [true],
-      type: 'variant'
-    },
-    clear: {
-      // TODO: add some usage guidance, there's none on https://telus.github.io/kds/#button
-      description: 'Gives a button borders and a transparent background',
-      values: [true],
-      type: 'variant'
-    },
-    hover: buttonAppearances.hover,
-    focus: buttonAppearances.focus,
-    pressed: buttonAppearances.pressed,
-    inactive: buttonAppearances.inactive
-  },
-  tokens: {
-    borderColor: palette.color.white,
-    borderWidth: palette.border.none,
-    borderRadius: palette.radius.radius4,
-    shadow: null,
-
-    fontSize: palette.fontSize.size16,
-    fontWeight: '600',
-    color: palette.color.white,
-    lineHeight: palette.lineHeight.multiply150,
-    fontName: Object.keys(palette.font)[0],
-    textAlign: 'center',
-    alignSelf: 'flex-start',
-
-    backgroundColor: palette.color.mosque,
-    opacity: 1,
-    paddingLeft: palette.size.size24,
-    paddingRight: palette.size.size24,
-    paddingTop: palette.size.size8,
-    paddingBottom: palette.size.size8,
-    width: undefined,
-
-    outerBorderColor: palette.color.white,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.radius4,
-    outerBackgroundColor: palette.color.transparent
-  },
-  rules: [
-    // "Primary" (default rank) styles
-    {
-      if: { rounded: true },
-      tokens: { borderRadius: palette.radius.pill32 }
-    },
-    {
-      if: { clear: true },
-      tokens: {
-        borderWidth: palette.border.border2,
-        borderColor: palette.color.mosque,
-        color: palette.color.mosque,
-        backgroundColor: null
-      }
-    },
-
-    {
-      if: { hover: true },
-      tokens: {
-        color: palette.color.white,
-        borderColor: palette.color.darkMosque,
-        backgroundColor: palette.color.darkMosque
-      }
-    },
-    {
-      if: { clear: true, hover: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.mosque
-      }
-    },
-
-    {
-      if: { pressed: true },
-      tokens: {
-        color: palette.color.white,
-        borderColor: palette.color.mosque,
-        backgroundColor: palette.color.mosque
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        outerBorderColor: palette.color.mosque
-      }
-    },
-
-    // "Secondary" rank styles
-    {
-      if: { rank: 'secondary' },
-      tokens: {
-        backgroundColor: palette.color.blue,
-        borderColor: palette.color.blue,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { rank: 'secondary', clear: true },
-      tokens: {
-        backgroundColor: palette.color.white,
-        borderColor: palette.color.blue,
-        color: palette.color.blue
-      }
-    },
-    {
-      if: { rank: 'secondary', hover: true },
-      tokens: {
-        backgroundColor: palette.color.darkBlue,
-        borderColor: palette.color.darkBlue,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { rank: 'secondary', pressed: true },
-      tokens: {
-        backgroundColor: palette.color.onahau,
-        borderColor: palette.color.onahau,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { rank: 'secondary', focus: true },
-      tokens: {
-        outerBorderColor: palette.color.blue
-      }
-    },
-    {
-      if: { rank: 'secondary', pressed: true, focus: true },
-      tokens: {
-        outerBorderColor: palette.color.onahau
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        opacity: 0.3
-      }
-    },
-    // There's no designs for this so just do something simple and visible for now
-    {
-      if: { selected: true },
-      tokens: {
-        opacity: 0.8,
-        outerBorderColor: palette.color.mosque,
-        outerBorderGap: palette.border.border1,
-        outerBorderWidth: palette.border.border4
-      }
-    },
-    {
-      if: { selected: true, focus: true },
-      tokens: {
-        outerBorderGap: palette.border.border2
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Button, getButtonSchema(palette), 'Button')
-
-export default Button

package/src/components/ButtonGroup.js

@@ -1,15 +0,0 @@
-import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-koodo'
-
-const ButtonGroup = {
-  tokens: {
-    space: 3,
-    direction: 'row'
-  }
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ButtonGroup, getButtonGroupSchema(palette))
-
-export default ButtonGroup

package/src/components/Card.js

@@ -1,16 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-
-export default {
-  appearances: {},
-  tokens: {
-    backgroundColor: palette.color.texas,
-    borderColor: null,
-    borderRadius: palette.radius.none,
-    borderWidth: palette.border.none,
-    paddingBottom: palette.size.size16,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    shadow: null
-  }
-}

package/src/components/Divider.js

@@ -1,8 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-
-export default {
-  tokens: {
-    width: palette.border.border1,
-    color: palette.color.silver
-  }
-}

package/src/components/ExpandCollapse.js

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

package/src/components/ExpandCollapseControl.js

@@ -1,42 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import {
-  getExpandCollapseControlSchema,
-  validateComponentTheme,
-  expandCollapseControlAppearances
-} from '@telus-uds/tools-theme'
-
-import ChevronUp from '@telus-uds/palette-koodo/build/rn/icons/chevron-up.icon.svg'
-import ChevronDown from '@telus-uds/palette-koodo/build/rn/icons/chevron-down.icon.svg'
-
-const ExpandCollapseControl = {
-  appearances: {
-    expanded: expandCollapseControlAppearances.expanded
-  },
-  tokens: {
-    icon: ChevronUp,
-    iconColor: palette.color.mosque,
-    iconSize: palette.size.size16,
-    iconGap: palette.size.size16,
-    iconPosition: 'left',
-    verticalAlign: 'middle',
-    justifyContent: 'flex-start',
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size16,
-    paddingBottom: palette.size.size16,
-    borderWidth: palette.border.border0,
-    borderColor: palette.color.transparent,
-    backgroundColor: palette.color.transparent
-  },
-  rules: [{ if: { expanded: true }, tokens: { icon: ChevronDown } }]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapseControl,
-  getExpandCollapseControlSchema(palette),
-  'expand-collapse-control'
-)
-
-export default ExpandCollapseControl

package/src/components/ExpandCollapsePanel.js

@@ -1,26 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getExpandCollapsePanelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const ExpandCollapsePanel = {
-  appearances: {},
-  tokens: {
-    // animate slightly faster when closing
-    expandDuration: 300,
-    collapseDuration: 250,
-    contentPaddingLeft: palette.size.size48,
-    contentPaddingRight: palette.size.size16,
-    contentPaddingTop: palette.size.size0,
-    contentPaddingBottom: palette.size.size16
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  ExpandCollapsePanel,
-  getExpandCollapsePanelSchema(palette),
-  'expand-collapse-panel'
-)
-
-export default ExpandCollapsePanel

package/src/components/Feedback.js

@@ -1,73 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-
-import errorIcon from '@telus-uds/palette-koodo/build/rn/icons/exclamation-triangle.icon.svg'
-import successIcon from '@telus-uds/palette-koodo/build/rn/icons/check-circled-filled.icon.svg'
-import {
-  feedbackAppearances,
-  getFeedbackSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
-
-const Feedback = {
-  appearances: feedbackAppearances,
-  tokens: {
-    backgroundColor: palette.color.gallery,
-    borderColor: palette.color.silver,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.radius4,
-    paddingTop: palette.size.size10,
-    paddingBottom: palette.size.size10,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-
-    color: palette.color.mortar,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    lineHeight: palette.lineHeight.multiply150,
-    titleFontSize: palette.fontSize.size16,
-    contentFontSize: palette.fontSize.size14,
-
-    icon: null,
-    iconSize: palette.fontSize.size24,
-    iconColor: palette.color.transparent,
-    iconGap: palette.size.size8
-  },
-  rules: [
-    {
-      if: { state: 'success' },
-      tokens: {
-        backgroundColor: palette.color.mintTulip,
-        borderColor: palette.color.mintTulip,
-        color: palette.color.bilbao
-      }
-    },
-    {
-      if: { state: 'error' },
-      tokens: {
-        backgroundColor: palette.color.carouselPink,
-        borderColor: palette.color.carouselPink,
-        color: palette.color.trinidad
-      }
-    },
-    {
-      if: { state: 'success', icon: true },
-      tokens: {
-        icon: successIcon,
-        iconColor: palette.color.bilbao
-      }
-    },
-    {
-      if: { state: 'error', icon: true },
-      tokens: {
-        icon: errorIcon,
-        iconColor: palette.color.trinidad
-      }
-    }
-  ]
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Feedback, getFeedbackSchema(palette))
-
-export default Feedback

package/src/components/Icon.js

@@ -1,67 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-
-export default {
-  appearances: {
-    size: {
-      values: ['small'],
-      type: 'variant'
-    },
-    colour: {
-      values: ['primary', 'secondary', 'black', 'white'],
-      type: 'variant'
-    },
-    status: {
-      description: 'Uses icon colour to communicate meaning to the user',
-      values: ['success', 'error'],
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: 24,
-    color: palette.color.dove
-  },
-  rules: [
-    {
-      if: { size: 'small' },
-      tokens: {
-        size: 20
-      }
-    },
-    {
-      if: { colour: 'primary' },
-      tokens: {
-        color: palette.color.black
-      }
-    },
-    {
-      if: { colour: 'secondary' },
-      tokens: {
-        color: palette.color.blue
-      }
-    },
-    {
-      if: { colour: 'black' },
-      tokens: {
-        color: palette.color.black
-      }
-    },
-    {
-      if: { colour: 'white' },
-      tokens: {
-        color: palette.color.white
-      }
-    },
-    {
-      if: { status: 'success' },
-      tokens: {
-        color: palette.color.mosque
-      }
-    },
-    {
-      if: { status: 'error' },
-      tokens: {
-        color: palette.color.amaranth
-      }
-    }
-  ]
-}

package/src/components/InputLabel.js

@@ -1,28 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getInputLabelSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const InputLabel = {
-  appearances: {},
-  tokens: {
-    gap: palette.size.size8,
-
-    color: palette.color.dove,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '500',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.multiply140,
-
-    hintColor: palette.color.dove,
-    hintFontName: Object.keys(palette.font)[0],
-    hintFontWeight: '400',
-    hintFontSize: palette.fontSize.size14,
-    hintLineHeight: palette.lineHeight.multiply140
-  },
-  rules: []
-}
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(InputLabel, getInputLabelSchema(palette), 'input-label')
-
-export default InputLabel

package/src/components/Link.js

@@ -1,92 +0,0 @@
-import palette from '@telus-uds/palette-koodo'
-import { getLinkSchema, validateComponentTheme, linkAppearances } from '@telus-uds/tools-theme'
-
-import leftChevronIcon from '@telus-uds/palette-koodo/build/rn/icons/chevron-left.icon.svg'
-import rightChevronIcon from '@telus-uds/palette-koodo/build/rn/icons/chevron-right.icon.svg'
-
-const Link = {
-  appearances: {
-    rank: {
-      // TODO: needs some guidance on when to use secondary links, none on https://telus.github.io/kds/#link
-      description: 'Prominence of the link.',
-      values: ['secondary'],
-      type: 'variant'
-    },
-    component: linkAppearances.component,
-    iconPosition: linkAppearances.iconPosition,
-    hover: linkAppearances.hover
-  },
-  tokens: {
-    color: palette.color.mosque,
-
-    textLine: 'underline',
-    textLineStyle: 'solid',
-
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.none,
-    outerBorderGap: palette.border.none,
-    outerBorderRadius: palette.radius.radius0,
-
-    blockFontWeight: '600',
-    blockFontSize: palette.fontSize.size16,
-    blockLineHeight: palette.lineHeight.multiply150,
-    blockFontName: Object.keys(palette.font)[0],
-    alignSelf: 'flex-start',
-
-    iconSize: palette.fontSize.size24,
-    iconGapBefore: palette.size.size4,
-    iconGapAfter: palette.size.size8,
-    iconScale: 1,
-    iconTranslateX: 0
-  },
-  rules: [
-    // Default link style interaction states
-    {
-      if: { hover: true },
-      tokens: {
-        color: palette.color.darkMosque,
-        textLine: 'none'
-      }
-    },
-
-    // Secondary link style
-    {
-      if: { rank: 'secondary' },
-      tokens: {
-        color: palette.color.blue
-      }
-    },
-    {
-      if: { rank: 'secondary', hover: true },
-      tokens: {
-        color: palette.color.darkBlue
-      }
-    },
-    {
-      if: { component: 'ChevronLink' },
-      tokens: { iconGapAfter: 0, iconGapBefore: 0 }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left' },
-      tokens: { icon: leftChevronIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right' },
-      tokens: { icon: rightChevronIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left', hover: true },
-      tokens: { iconTranslateX: -1 * palette.size.size4 }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right', hover: true },
-      tokens: { iconTranslateX: palette.size.size4 }
-    }
-  ]
-}
-
-// 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-koodo'
-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.dove,
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '400',
-    fontSize: palette.fontSize.size16,
-    lineHeight: palette.lineHeight.multiply150
-  },
-  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