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

package/src/components/TooltipButton.js

@@ -1,15 +1,14 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getTooltipButtonSchema,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+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'
 
-const TooltipButton = {
+export default {
   appearances: {
-    ...buttonAppearances,
+    focus: appearances.TooltipButton.focus,
+    hover: appearances.TooltipButton.hover,
+    pressed: appearances.TooltipButton.pressed,
     inverse: {
       values: [true],
       type: 'variant'
@@ -24,6 +23,7 @@ const TooltipButton = {
     width: palette.size.size16,
 
     icon: questionIcon,
+    iconScale: system.iconScale.scale1,
     iconSize: palette.size.size16,
     iconColor: palette.color.greyThunder
   },
@@ -37,7 +37,7 @@ const TooltipButton = {
     {
       if: { hover: true },
       tokens: {
-        iconScale: 1.25
+        iconScale: system.iconScale.scale1_25
       }
     },
     {
@@ -66,9 +66,3 @@ const TooltipButton = {
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(TooltipButton, getTooltipButtonSchema(palette), 'tooltip-button')
-
-export default TooltipButton

package/src/components/Typography.js

@@ -1,8 +1,8 @@
 import palette from '@telus-uds/palette-allium'
-import { getTypographySchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import { appearances } from '@telus-uds/system-constants'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const Typography = {
+export default {
   appearances: {
     size: {
       description: `Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,
@@ -12,6 +12,7 @@ accessibility or SEO-related properties; use the heading prop if text should be
         'micro',
         'small',
         'large',
+        'eyebrow',
         'h1',
         'h2',
         'h3',
@@ -46,15 +47,19 @@ accessibility or SEO-related properties; use the heading prop if text should be
       values: [true],
       type: 'variant'
     },
-    viewport: appearances.viewport
+    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,
-    textTransform: 'none',
-    fontName: Object.keys(palette.font)[0],
+    letterSpacing: system.letterSpacing.none,
+    textTransform: system.textTransform.none,
     fontScaleCap: palette.fontSize.size64
   },
   rules: [
@@ -113,7 +118,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       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
       }
@@ -131,7 +140,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       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
       }
@@ -140,7 +153,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       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
       }
@@ -159,7 +176,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       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
       }
@@ -170,7 +191,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'h2' },
       tokens: {
         fontSize: palette.fontSize.size24,
+
+        // TODO: replace with font token
         fontWeight: '500',
+        // font: palette.font.HelveticaNow[500]
+
         lineHeight: palette.lineHeight.ratio4to3
       }
     },
@@ -188,7 +213,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'h3' },
       tokens: {
         fontSize: palette.fontSize.size20,
+
+        // TODO: replace with font token
         fontWeight: '500',
+        // font: palette.font.HelveticaNow[500]
+
         lineHeight: palette.lineHeight.ratio7to5
       }
     },
@@ -205,7 +234,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'h4' },
       tokens: {
         fontSize: palette.fontSize.size16,
+
+        // TODO: replace with font token
         fontWeight: '500',
+        // font: palette.font.HelveticaNow[500]
+
         lineHeight: palette.lineHeight.ratio3to2
       }
     },
@@ -215,7 +248,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'h5' },
       tokens: {
         fontSize: palette.fontSize.size14,
+
+        // TODO: replace with font token
         fontWeight: '500',
+        // font: palette.font.HelveticaNow[500]
+
         lineHeight: palette.lineHeight.ratio9to7
       }
     },
@@ -225,7 +262,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'h6' },
       tokens: {
         fontSize: palette.fontSize.size12,
+
+        // TODO: replace with font token
         fontWeight: '700',
+        // font: palette.font.HelveticaNow[700]
+
         lineHeight: palette.lineHeight.ratio4to3
       }
     },
@@ -274,7 +315,11 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'micro' },
       tokens: {
         fontSize: palette.fontSize.size12,
+
+        // TODO: replace with font token
         fontWeight: '500',
+        // font: palette.font.HelveticaNow[500]
+
         lineHeight: palette.lineHeight.ratio4to3
       }
     },
@@ -284,8 +329,12 @@ accessibility or SEO-related properties; use the heading prop if text should be
       if: { size: 'eyebrow' },
       tokens: {
         fontSize: palette.fontSize.size14,
+
+        // TODO: replace with font token
         fontWeight: '700',
-        textTransform: 'uppercase',
+        // font: palette.font.HelveticaNow[700]
+
+        textTransform: system.textTransform.uppercase,
         lineHeight: palette.lineHeight.ratio9to7
       }
     },
@@ -297,14 +346,10 @@ accessibility or SEO-related properties; use the heading prop if text should be
       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]
       }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Typography, getTypographySchema(palette))
-
-export default Typography

package/src/components/index.js

@@ -1,57 +1,37 @@
-import ActivityIndicator from './ActivityIndicator'
-import Box from './Box'
-import Button from './Button'
-import ButtonGroup from './ButtonGroup'
-import Card from './Card'
-import ChevronLink from './ChevronLink'
-import Divider from './Divider'
-import ExpandCollapse from './ExpandCollapse'
-import ExpandCollapseControl from './ExpandCollapseControl'
-import ExpandCollapsePanel from './ExpandCollapsePanel'
-import Feedback from './Feedback'
-import Icon from './Icon'
-import InputLabel from './InputLabel'
-import Link from './Link'
-import TextInput from './TextInput'
-import ToggleSwitch from './ToggleSwitch'
-import Tooltip from './Tooltip'
-import TooltipButton from './TooltipButton'
-import Typography from './Typography'
-import SideNav from './SideNav'
-import SideNavItem from './SideNavItem'
-import SideNavItemsGroup from './SideNavItemsGroup'
-import Pagination from './Pagination'
-import PaginationPageButton from './PaginationPageButton'
-import PaginationSideButton from './PaginationSideButton'
-import StackView from './StackView'
-import spacingScale from './spacingScale'
-
-export default {
-  ActivityIndicator,
-  Box,
-  Button,
-  ButtonGroup,
-  Card,
-  ChevronLink,
-  Divider,
-  ExpandCollapse,
-  ExpandCollapseControl,
-  ExpandCollapsePanel,
-  Feedback,
-  Icon,
-  InputLabel,
-  Link,
-  Pagination,
-  PaginationPageButton,
-  PaginationSideButton,
-  SideNav,
-  SideNavItem,
-  SideNavItemsGroup,
-  StackView,
-  TextInput,
-  ToggleSwitch,
-  Tooltip,
-  TooltipButton,
-  Typography,
-  spacingScale
-}
+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,14 +1,10 @@
-import {
-  getSpacingScaleSchema,
-  validateComponentTheme,
-  spacingScaleAppearances
-} from '@telus-uds/tools-theme'
 import palette from '@telus-uds/palette-allium'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const spacingScale = {
+export default {
   appearances: {
-    space: spacingScaleAppearances.space,
-    viewport: spacingScaleAppearances.viewport
+    space: appearances.spacingScale.space,
+    viewport: appearances.system.viewport
   },
   // Largest spacings first, so they apply any time space >= highest index'
   tokens: { size: palette.size.size96 },
@@ -38,9 +34,3 @@ const spacingScale = {
     { if: { space: 0 }, tokens: { size: palette.size.size0 } }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(spacingScale, getSpacingScaleSchema(palette), 'spacingScale')
-
-export default spacingScale

package/src/index.js

@@ -1,5 +1,5 @@
 import packageJson from '../package.json'
-import components from './components'
+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