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

package/src/components/Link.js

@@ -1,12 +1,8 @@
 import palette from '@telus-uds/palette-allium'
-import { getLinkSchema, validateComponentTheme, linkAppearances } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-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'
-
-const { color, fontSize, lineHeight, font, border, radius, size } = palette
-
-const Link = {
+export default {
   appearances: {
     size: {
       description:
@@ -27,63 +23,75 @@ const Link = {
     light: {
       description:
         'A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)',
-      values: [true]
+      values: [true],
+      type: 'variant'
     },
-    component: linkAppearances.component,
-    iconPosition: linkAppearances.iconPosition,
-    focus: linkAppearances.focus,
-    hover: linkAppearances.hover
+    iconPosition: appearances.Link.iconPosition,
+    focus: appearances.Link.focus,
+    hover: appearances.Link.hover,
+    pressed: appearances.Link.pressed
   },
   tokens: {
-    color: color.greenAccessible,
+    color: palette.color.greenAccessible,
 
-    textLine: 'underline',
-    textLineStyle: 'solid',
+    textLine: system.textLine.underline,
+    textLineStyle: system.textLineStyle.solid,
 
-    outerBorderColor: color.transparent,
-    outerBorderWidth: border.border2,
-    outerBorderGap: border.border2,
-    outerBorderRadius: radius.radius4,
+    outerBorderColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderGap: palette.border.border2,
+    outerBorderRadius: palette.radius.radius4,
+    outerBorderOutline: system.borderStyle.none,
 
     // Same as default size Typography
+    // TODO replace with single font token
     blockFontWeight: '400',
-    blockFontSize: fontSize.size16,
-    blockLineHeight: lineHeight.ratio3to2,
-    blockFontName: Object.keys(font)[0],
+    blockFontName: Object.keys(palette.font)[0],
+    // bockFont: palette.font.HelveticaNow[400]
 
-    icon: null,
-    iconSize: fontSize.size24,
-    iconGapBefore: size.size4,
-    iconGapAfter: size.size8,
-    iconScale: 1,
-    iconTranslateX: 0
+    blockFontSize: palette.fontSize.size16,
+    blockLineHeight: palette.lineHeight.ratio3to2,
+    alignSelf: system.flexAlign.flexStart,
+
+    icon: system.icon.none,
+    iconSize: palette.fontSize.size24,
+    iconSpace: system.integer[1],
+    iconTranslateX: system.size.zero,
+    iconTranslateY: system.size.zero
   },
   rules: [
+    {
+      if: { iconPosition: 'left' },
+      tokens: {
+        iconSpace: system.integer[2]
+      }
+    },
     // Initial interaction states
     {
       if: { focus: true },
       tokens: {
-        outerBorderColor: color.greenAccessible,
-        outerBorderOutline: 'none'
+        outerBorderColor: palette.color.greenAccessible,
+        outerBorderOutline: system.borderStyle.none
       }
     },
     {
       if: { hover: true },
       tokens: {
-        color: color.greenSanFelix,
-        iconScale: 1.1
+        textLine: system.textLine.none,
+        color: palette.color.greenSanFelix
       }
     },
     {
       if: { pressed: true },
       tokens: {
-        color: color.greenDarkFern
+        textLine: system.textLine.none,
+        color: palette.color.greenDarkFern
       }
     },
     {
       if: { pressed: true, focus: true },
       tokens: {
-        outerBorderColor: color.greenDarkFern
+        outerBorderColor: palette.color.greenDarkFern
       }
     },
 
@@ -91,26 +99,29 @@ const Link = {
     {
       if: { size: 'large' },
       tokens: {
-        blockFontSize: fontSize.size20,
-        iconSize: fontSize.size24,
-        blockLineHeight: lineHeight.ratio8to5
+        blockFontSize: palette.fontSize.size20,
+        iconSize: palette.fontSize.size24,
+        blockLineHeight: palette.lineHeight.ratio8to5
       }
     },
     {
       if: { size: 'small' },
       tokens: {
-        blockFontSize: fontSize.size14,
-        iconSize: fontSize.size20,
-        blockLineHeight: lineHeight.ratio10to7
+        blockFontSize: palette.fontSize.size14,
+        iconSize: palette.fontSize.size20,
+        blockLineHeight: palette.lineHeight.ratio10to7
       }
     },
     {
       if: { size: 'micro' },
       tokens: {
-        blockFontSize: fontSize.size12,
+        blockFontSize: palette.fontSize.size12,
+        // TODO replace this with font token
         blockFontWeight: '500',
-        iconSize: fontSize.size16,
-        blockLineHeight: lineHeight.ratio4to3
+        // blockFont: palette.font.HelveticaNow[500]
+
+        iconSize: palette.fontSize.size16,
+        blockLineHeight: palette.lineHeight.ratio4to3
       }
     },
 
@@ -118,26 +129,26 @@ const Link = {
     {
       if: { alternative: true },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
     },
     {
       if: { alternative: true, focus: true },
       tokens: {
-        color: color.greyCharcoal,
-        outerBorderColor: color.greyCharcoal
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.greyCharcoal
       }
     },
     {
       if: { alternative: true, hover: true },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
     },
     {
       if: { alternative: true, pressed: true },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
     },
 
@@ -145,33 +156,33 @@ const Link = {
     {
       if: { inverse: true },
       tokens: {
-        color: color.white
+        color: palette.color.white
       }
     },
     {
       if: { inverse: true, hover: true },
       tokens: {
-        color: color.greyAthens
+        color: palette.color.greyAthens
       }
     },
     {
       if: { inverse: true, focus: true },
       tokens: {
-        outerBorderColor: color.white,
-        outerBorderOutline: 'none'
+        outerBorderColor: palette.color.white,
+        outerBorderOutline: system.borderStyle.none
       }
     },
     {
       if: { inverse: true, pressed: true },
       tokens: {
-        color: color.greyMystic
+        color: palette.color.greyMystic
       }
     },
     {
       if: { inverse: true, pressed: true, focus: true },
       tokens: {
-        color: color.greyMystic,
-        outerBorderColor: color.greyMystic
+        color: palette.color.greyMystic,
+        outerBorderColor: palette.color.greyMystic
       }
     },
 
@@ -179,54 +190,22 @@ const Link = {
     {
       if: { light: true },
       tokens: {
-        color: color.greyShuttle
+        color: palette.color.greyShuttle
       }
     },
     {
       if: { light: true, focus: true },
       tokens: {
-        color: color.greyShuttle,
-        outerBorderColor: color.greyShuttle
+        color: palette.color.greyShuttle,
+        outerBorderColor: palette.color.greyShuttle
       }
     },
     {
       if: { light: true, hover: true },
       tokens: {
-        color: color.greyCharcoal,
-        textLine: 'none'
-      }
-    },
-    {
-      if: { component: 'ChevronLink' },
-      tokens: { iconGapAfter: 0, iconGapBefore: 0 }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left' },
-      tokens: { icon: leftArrowIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right' },
-      tokens: { icon: rightArrowIcon }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'left', hover: true },
-      tokens: {
-        iconTranslateX: -1 * size.size4,
-        iconScale: 1
-      }
-    },
-    {
-      if: { component: 'ChevronLink', iconPosition: 'right', hover: true },
-      tokens: {
-        iconTranslateX: size.size4,
-        iconScale: 1
+        color: palette.color.greyCharcoal,
+        textLine: system.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/List.js

@@ -0,0 +1,70 @@
+import palette from '@telus-uds/palette-allium'
+
+export default {
+  appearances: {
+    size: {
+      description: 'Indicates list item text size.',
+      values: ['large', 'small'],
+      type: 'variant'
+    },
+    compact: {
+      description: 'When true it will reduce the line height of the list item.',
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    itemFontWeight: '400',
+    itemFontSize: palette.fontSize.size16,
+    itemLineHeight: palette.lineHeight.ratio3to2,
+    itemFontName: Object.keys(palette.font)[0],
+    interItemMargin: palette.size.size8,
+    interItemMarginWithDivider: palette.size.size16,
+    dividerColor: palette.color.greyCloud,
+    dividerSize: palette.border.border1,
+    itemBulletContainerWidth: palette.size.size16,
+    itemBulletContainerAlign: 'center',
+    itemBulletWidth: palette.size.size4,
+    itemBulletHeight: palette.size.size4,
+    itemBulletColor: palette.color.purpleTelus,
+    itemIconSize: palette.size.size16,
+    itemIconColor: palette.color.purpleTelus,
+    listGutter: palette.size.size12
+  },
+  rules: [
+    {
+      if: { size: 'large' },
+      tokens: {
+        itemFontSize: palette.fontSize.size20,
+        itemLineHeight: palette.lineHeight.ratio8to5,
+        listGutter: palette.size.size12
+      }
+    },
+    {
+      if: { size: 'small' },
+      tokens: {
+        itemFontSize: palette.fontSize.size14,
+        itemLineHeight: palette.lineHeight.ratio10to7,
+        listGutter: palette.size.size12
+      }
+    },
+    {
+      if: { compact: true },
+      tokens: {
+        itemLineHeight: palette.lineHeight.ratio5to4
+      }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: {
+        itemLineHeight: palette.lineHeight.ratio8to7
+      }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: {
+        itemLineHeight: palette.lineHeight.ratio6to5
+      }
+    }
+  ]
+}

package/src/components/Pagination.js

@@ -1,18 +1,21 @@
 import palette from '@telus-uds/palette-allium'
-import { getPaginationSchema, 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 Pagination = {
+export default {
   appearances: {
-    viewport: appearances.viewport
+    viewport: appearances.system.viewport
   },
   tokens: {
-    gap: 2,
-    truncateAbove: 4,
+    gap: system.integer[2],
+    truncateAbove: system.integer[4],
 
     color: palette.color.greyShuttle,
+    // TODO: replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2
   },
@@ -20,14 +23,8 @@ const Pagination = {
     {
       if: { viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        truncateAbove: 6
+        truncateAbove: system.integer[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,18 +1,13 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationPageButtonSchema,
-  lineOptions,
-  validateComponentTheme
-} from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const { focus, hover, pressed } = buttonAppearances
-
-const PaginationPageButton = {
+export default {
   appearances: {
-    focus,
-    hover,
-    pressed
+    focus: appearances.PaginationPageButton.focus,
+    hover: appearances.PaginationPageButton.hover,
+    pressed: appearances.PaginationPageButton.pressed,
+    selected: appearances.PaginationPageButton.selected
   },
   tokens: {
     borderColor: palette.color.transparent,
@@ -31,18 +26,23 @@ const PaginationPageButton = {
     outerBorderGap: palette.border.border4,
 
     color: palette.color.greyShuttle,
+
+    // TODO: replace this with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline
+    textLine: system.textLine.underline,
+    textAlign: system.flexJustifyContent.center
   },
   rules: [
     {
       if: { hover: true },
       tokens: {
         borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -57,7 +57,7 @@ const PaginationPageButton = {
       tokens: {
         backgroundColor: palette.color.greyShuttle,
         color: palette.color.white,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -69,13 +69,3 @@ const PaginationPageButton = {
     }
   ]
 }
-
-// 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,25 +1,18 @@
 import palette from '@telus-uds/palette-allium'
-import {
-  buttonAppearances,
-  getPaginationSideButtonSchema,
-  lineOptions,
-  paginationSideButtonAppearances,
-  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 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 = {
+export default {
   appearances: {
-    viewport: appearances.viewport,
-    focus,
-    hover,
-    pressed,
-    ...paginationSideButtonAppearances
+    viewport: appearances.system.viewport,
+    focus: appearances.PaginationSideButton.focus,
+    hover: appearances.PaginationSideButton.hover,
+    pressed: appearances.PaginationSideButton.pressed,
+    selected: appearances.PaginationSideButton.selected,
+    direction: appearances.PaginationSideButton.direction
   },
   tokens: {
     borderColor: palette.color.transparent,
@@ -33,15 +26,22 @@ const PaginationSideButton = {
     outerBorderColor: palette.color.transparent,
 
     color: palette.color.greyShuttle,
+
+    // TODO replace with font token
     fontName: Object.keys(palette.font)[0],
     fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+
     fontSize: palette.fontSize.size16,
     lineHeight: palette.lineHeight.ratio3to2,
-    textLine: lineOptions.underline,
+    textLine: system.textLine.underline,
 
-    icon: null,
+    icon: system.icon.none,
     iconSize: palette.fontSize.size24,
-    iconTranslateX: palette.size.size0
+    iconDisplace: palette.size.size0,
+
+    width: system.size.none,
+    textAlign: system.flexJustifyContent.center
   },
   rules: [
     {
@@ -50,14 +50,15 @@ const PaginationSideButton = {
         borderRadius: palette.radius.pill32,
         paddingTop: palette.size.size4,
         paddingBottom: palette.size.size4,
-        width: 32
+        width: palette.size.size32
       }
     },
     {
       if: { hover: true },
       tokens: {
         borderColor: palette.color.greyShuttle,
-        textLine: lineOptions.none
+        textLine: system.textLine.none,
+        iconDisplace: palette.size.size4
       }
     },
     {
@@ -72,7 +73,7 @@ const PaginationSideButton = {
       tokens: {
         backgroundColor: palette.color.greyShuttle,
         color: palette.color.white,
-        textLine: lineOptions.none
+        textLine: system.textLine.none
       }
     },
     {
@@ -93,28 +94,6 @@ const PaginationSideButton = {
       tokens: {
         icon: rightArrowIcon
       }
-    },
-    {
-      if: { direction: 'previous', hover: true },
-      tokens: {
-        iconTranslateX: -1 * palette.size.size4
-      }
-    },
-    {
-      if: { direction: 'next', 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(
-  PaginationSideButton,
-  getPaginationSideButtonSchema(palette),
-  'pagination-side-button'
-)
-
-export default PaginationSideButton

package/src/components/Radio.js

@@ -0,0 +1,64 @@
+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: {
+    checked: appearances.Radio.checked,
+    error: appearances.Radio.error,
+    focus: appearances.Radio.focus,
+    hover: appearances.Radio.hover,
+    inactive: appearances.Radio.inactive
+  },
+  tokens: {
+    checkedBackgroundColor: palette.color.purpleDeluge,
+    checkedSize: palette.size.size12,
+    containerBackgroundColor: palette.color.transparent,
+    containerBorderRadius: palette.radius.none,
+    containerMarginBottom: palette.size.size8,
+    containerOpacity: system.opacity.opaque,
+    containerPaddingBottom: palette.size.size0,
+    containerPaddingLeft: palette.size.size0,
+    containerPaddingRight: palette.size.size0,
+    containerPaddingTop: palette.size.size0,
+    containerShadow: system.shadow.none,
+    descriptionFontSize: palette.fontSize.size14,
+    descriptionLineHeight: palette.lineHeight.ratio10to7,
+    descriptionMarginLeft: system.size.none,
+    inputBackgroundColor: palette.color.white,
+    inputBorderColor: palette.color.greyShuttle,
+    inputBorderWidth: palette.border.border1,
+    inputOutlineColor: palette.color.transparent,
+    inputOutlineWidth: palette.border.none,
+    inputSize: palette.size.size20,
+    labelColor: palette.color.greyCharcoal,
+    labelFontName: Object.keys(palette.font)[0],
+    labelFontSize: palette.fontSize.size16,
+    labelFontWeight: '400',
+    labelLineHeight: palette.lineHeight.ratio3to2,
+    labelMarginLeft: palette.size.size10
+  },
+  rules: [
+    {
+      if: { error: true },
+      tokens: {
+        inputBorderColor: palette.color.red
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        inputBorderColor: palette.color.purpleDeluge,
+        inputBorderWidth: palette.border.border3
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBorderColor: palette.color.transparent,
+        inputBackgroundColor: palette.color.greyMystic,
+        labelColor: palette.color.greyShuttle
+      }
+    }
+  ]
+}