@telus-uds/theme-allium - npm Package Compare versions

Comparing version 0.0.2-prerelease.2 to 0.0.2-prerelease.3

CHANGELOG.md

@@ -5,2 +5,17 @@ # Changelog
 
+### [0.0.2-prerelease.3](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v0.0.2-prerelease.2...@telus-uds/theme-allium/v0.0.2-prerelease.3) (2021-10-27)
+
+### Features
+
+- **allium-web:** Add `ExpandCollapseMiniControl` component ([#661](https://github.com/telus/universal-design-system/issues/661)) ([227407e](https://github.com/telus/universal-design-system/commit/227407ec6a48c0a170b8e39761ba33293f13eb3c)), closes [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605)
+- **base:** add StackView and Spacer ([#662](https://github.com/telus/universal-design-system/issues/662)) ([cc3965e](https://github.com/telus/universal-design-system/commit/cc3965e83c1ec2fa0f0dd006a03eeeeda5384940))
+- **base:** add StackWrap component ([#666](https://github.com/telus/universal-design-system/issues/666)) ([f34fb60](https://github.com/telus/universal-design-system/commit/f34fb60d0a923b1e4b3105c21b4a762b630ab309))
+- **base:** add TextInput component ([#649](https://github.com/telus/universal-design-system/issues/649)) ([245c073](https://github.com/telus/universal-design-system/commit/245c073ed3ba3a022f989d234fbf5cf972edec25))
+- **base:** add the Feedback component ([#656](https://github.com/telus/universal-design-system/issues/656)) ([5d7a5b6](https://github.com/telus/universal-design-system/commit/5d7a5b69c870ce1077adfdb230fddd1aa120b373))
+
+### Bug Fixes
+
+- **allium:** use fontName instead of fontFamily in Feedback ([#672](https://github.com/telus/universal-design-system/issues/672)) ([a0fb765](https://github.com/telus/universal-design-system/commit/a0fb7651e4f5428871a3462209a7ed5e123a61cc))
+- **base:** control stretch from a row parent ([#668](https://github.com/telus/universal-design-system/issues/668)) ([fa13c37](https://github.com/telus/universal-design-system/commit/fa13c37b2bd6b4118dbeb39bc2cdf59d13d5b151))
+
 ### [0.0.2-prerelease.2](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v0.0.2-prerelease.1...@telus-uds/theme-allium/v0.0.2-prerelease.2) (2021-10-12)
@@ -7,0 +22,0 @@

package.json

 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.0.2-prerelease.2",
+  "version": "0.0.2-prerelease.3",
   "description": "Allium theme",
@@ -16,6 +16,6 @@ "author": "TELUS Digital",
     "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.2"
+    "@telus-uds/tools-theme": "^0.0.2-prerelease.3"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^0.1.0-prerelease.2"
+    "@telus-uds/palette-allium": "^0.1.0-prerelease.3"
   },
@@ -22,0 +22,0 @@ "files": [

src/components/Box.js

 import palette from '@telus-uds/palette-allium'
 import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
 
-const { color } = palette
-
 const Box = {
@@ -27,11 +25,11 @@ appearances: {
   rules: [
-    { if: { background: 'lightest' }, tokens: { backgroundColor: color.white } },
-    { if: { background: 'light' }, tokens: { backgroundColor: color.greyAthens } },
-    { if: { background: 'dark' }, tokens: { backgroundColor: color.greyCharcoal } },
-    { if: { background: 'darkest' }, tokens: { backgroundColor: color.greyThunder } },
-    { if: { background: 'critical' }, tokens: { backgroundColor: color.redDark } },
-    { if: { background: 'danger' }, tokens: { backgroundColor: color.redLight } },
-    { if: { background: 'warning' }, tokens: { backgroundColor: color.amberLight } },
-    { if: { background: 'positive' }, tokens: { backgroundColor: color.greenPanache } },
-    { if: { background: 'brand' }, tokens: { backgroundColor: color.purpleTelus } }
+    { if: { background: 'lightest' }, tokens: { backgroundColor: palette.color.white } },
+    { if: { background: 'light' }, tokens: { backgroundColor: palette.color.greyAthens } },
+    { if: { background: 'dark' }, tokens: { backgroundColor: palette.color.greyCharcoal } },
+    { if: { background: 'darkest' }, tokens: { backgroundColor: palette.color.greyThunder } },
+    { if: { background: 'critical' }, tokens: { backgroundColor: palette.color.redDark } },
+    { if: { background: 'danger' }, tokens: { backgroundColor: palette.color.redLight } },
+    { if: { background: 'warning' }, tokens: { backgroundColor: palette.color.amberLight } },
+    { if: { background: 'positive' }, tokens: { backgroundColor: palette.color.greenPanache } },
+    { if: { background: 'brand' }, tokens: { backgroundColor: palette.color.purpleTelus } }
   ]
@@ -42,4 +40,4 @@ }
 // https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Box, getBoxSchema(palette))
+validateComponentTheme(Box, getBoxSchema(palette), 'box')
 
 export default Box

src/components/Button.js

 import { getButtonSchema, validateComponentTheme, buttonAppearances } from '@telus-uds/tools-theme'
 import palette from '@telus-uds/palette-allium'
 
-const { color, border, font, fontSize, lineHeight, radius, size } = palette
-
 const Button = {
@@ -48,35 +46,31 @@ appearances: {
   tokens: {
-    borderColor: color.greenAccessible,
-    borderWidth: border.border1,
-    borderRadius: radius.pill32,
+    borderColor: palette.color.greenAccessible,
+    borderWidth: palette.border.border1,
+    borderRadius: palette.radius.pill32,
     shadow: null,
 
-    fontSize: fontSize.size16,
-    color: color.greenAccessible,
-    lineHeight: lineHeight.ratio3to2,
-    fontName: Object.keys(font)[0],
+    fontSize: palette.fontSize.size16,
+    color: palette.color.greenAccessible,
+    lineHeight: palette.lineHeight.ratio3to2,
+    fontName: Object.keys(palette.font)[0],
     textAlign: 'center',
+    alignSelf: 'flex-start',
     fontWeight: '700',
 
-    backgroundColor: color.white,
+    backgroundColor: palette.color.white,
     opacity: 1,
-    paddingLeft: size.size32,
-    paddingRight: size.size32,
-    paddingTop: size.size12,
-    paddingBottom: size.size12,
+    paddingLeft: palette.size.size32,
+    paddingRight: palette.size.size32,
+    paddingTop: palette.size.size12,
+    paddingBottom: palette.size.size12,
     width: null,
 
-    marginLeft: size.size0,
-    marginRight: size.size0,
-    marginTop: size.size0,
-    marginBottom: size.size0,
-
-    outerBorderColor: color.transparent,
-    outerBorderWidth: border.border2,
-    outerBorderGap: border.border2,
-    outerBorderRadius: radius.pill32,
-    outerBackgroundColor: color.transparent
+    outerBorderColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderGap: palette.border.border2,
+    outerBorderRadius: palette.radius.pill32,
+    outerBackgroundColor: palette.color.transparent
   },
   rules: [
-    { if: { hover: true }, tokens: { borderWidth: border.border3 } },
+    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
 
@@ -86,5 +80,5 @@ {
       tokens: {
-        backgroundColor: color.greenAccessible,
-        color: color.white,
-        borderWidth: border.none
+        backgroundColor: palette.color.greenAccessible,
+        color: palette.color.white,
+        borderWidth: palette.border.none
       }
@@ -94,3 +88,3 @@ },
       if: { priority: 'high', hover: true },
-      tokens: { backgroundColor: color.greenSanFelix }
+      tokens: { backgroundColor: palette.color.greenSanFelix }
     },
@@ -103,20 +97,27 @@
         borderWidth: 0,
-        backgroundColor: color.greenDarkFern,
-        color: color.white
+        backgroundColor: palette.color.greenDarkFern,
+        color: palette.color.white
       }
     },
-    { if: { focus: true }, tokens: { outerBorderColor: color.greenAccessible } },
-    { if: { focus: true, pressed: true }, tokens: { outerBorderColor: color.greenDarkFern } },
+    { if: { focus: true }, tokens: { outerBorderColor: palette.color.greenAccessible } },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { outerBorderColor: palette.color.greenDarkFern }
+    },
 
     {
       if: { inverse: true },
-      tokens: { backgroundColor: null, borderColor: color.white, color: color.white }
+      tokens: {
+        backgroundColor: null,
+        borderColor: palette.color.white,
+        color: palette.color.white
+      }
     },
     {
       if: { inverse: true, priority: 'high' },
-      tokens: { backgroundColor: color.white, color: color.greyCharcoal }
+      tokens: { backgroundColor: palette.color.white, color: palette.color.greyCharcoal }
     },
     {
       if: { inverse: true, priority: 'high', hover: true },
-      tokens: { backgroundColor: color.light80 }
+      tokens: { backgroundColor: palette.color.light80 }
     },
@@ -126,35 +127,44 @@ {
       tokens: {
-        color: color.greyCharcoal,
-        backgroundColor: color.light60
+        color: palette.color.greyCharcoal,
+        backgroundColor: palette.color.light60
       }
     },
-    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: color.white } },
+    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: palette.color.white } },
 
-    { if: { danger: true, priority: null }, tokens: { color: color.red, borderColor: color.red } },
     {
+      if: { danger: true, priority: null },
+      tokens: { color: palette.color.red, borderColor: palette.color.red }
+    },
+    {
       if: { danger: true, priority: null, inverse: true },
-      tokens: { backgroundColor: color.white }
+      tokens: { backgroundColor: palette.color.white }
     },
-    { if: { danger: true, priority: null, focus: true }, tokens: { outerBorderColor: color.red } },
     {
+      if: { danger: true, priority: null, focus: true },
+      tokens: { outerBorderColor: palette.color.red }
+    },
+    {
       if: { danger: true, priority: null, pressed: true },
-      tokens: { backgroundColor: color.redDark, color: color.white }
+      tokens: { backgroundColor: palette.color.redDark, color: palette.color.white }
     },
     {
       if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: color.redDark }
+      tokens: { outerBorderColor: palette.color.redDark }
     },
 
     { if: { width: 'full' }, tokens: { width: '100%' } },
-    { if: { size: 'small' }, tokens: { paddingTop: size.size4, paddingBottom: size.size4 } },
     {
+      if: { size: 'small' },
+      tokens: { paddingTop: palette.size.size4, paddingBottom: palette.size.size4 }
+    },
+    {
       if: { component: 'ButtonGroup' },
       tokens: {
-        paddingLeft: size.size16,
-        paddingRight: size.size16,
-        paddingTop: size.size8,
-        paddingBottom: size.size8,
-        color: color.greyShuttle,
-        fontSize: fontSize.size14,
-        borderColor: color.greyCloud
+        paddingLeft: palette.size.size16,
+        paddingRight: palette.size.size16,
+        paddingTop: palette.size.size8,
+        paddingBottom: palette.size.size8,
+        color: palette.color.greyShuttle,
+        fontSize: palette.fontSize.size14,
+        borderColor: palette.color.greyCloud
       }
@@ -165,5 +175,5 @@ },
       tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.greyShuttle,
-        color: color.white
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.greyShuttle,
+        color: palette.color.white
       }
@@ -174,6 +184,6 @@ },
       tokens: {
-        borderColor: color.purpleTelus,
-        borderWidth: border.border3,
-        color: color.greyCharcoal,
-        outerBorderColor: color.transparent
+        borderColor: palette.color.purpleTelus,
+        borderWidth: palette.border.border3,
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.transparent
       }
@@ -184,5 +194,5 @@ },
       tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.purpleTelus,
-        color: color.white
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
       }
@@ -193,5 +203,5 @@ },
       tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.purpleTelus,
-        color: color.white
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
       }
@@ -201,7 +211,11 @@ },
       if: { inactive: true },
-      tokens: { backgroundColor: color.greyCloud, color: color.white, borderWidth: 0 }
+      tokens: {
+        backgroundColor: palette.color.greyCloud,
+        color: palette.color.white,
+        borderWidth: 0
+      }
     },
     {
       if: { inactive: true, inverse: true },
-      tokens: { backgroundColor: color.light60, color: color.greyCharcoal }
+      tokens: { backgroundColor: palette.color.light60, color: palette.color.greyCharcoal }
     }
@@ -213,4 +227,4 @@ ]
 // https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Button, getButtonSchema(palette))
+validateComponentTheme(Button, getButtonSchema(palette), 'button')
 
 export default Button

src/components/ButtonGroup.js

@@ -5,4 +5,2 @@ import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
 
-const { size } = palette
-
 const ButtonGroup = {
@@ -13,6 +11,9 @@ appearances: {
   tokens: {
-    gap: size.size4,
-    direction: 'row'
+    space: 1,
+    direction: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: 0
   },
-  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { gap: size.size16 } }]
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: 3 } }]
 }
@@ -22,4 +23,4 @@
 // https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ButtonGroup, getButtonGroupSchema(palette))
+validateComponentTheme(ButtonGroup, getButtonGroupSchema(palette), 'button-group')
 
 export default ButtonGroup

src/components/index.js

@@ -10,4 +10,7 @@ import ActivityIndicator from './ActivityIndicator'
 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'
@@ -21,2 +24,3 @@ import Typography from './Typography'
 import PaginationSideButton from './PaginationSideButton'
+import StackView from './StackView'
 import spacingScale from './spacingScale'
@@ -34,3 +38,5 @@
   ExpandCollapsePanel,
+  Feedback,
   Icon,
+  InputLabel,
   Link,
@@ -43,2 +49,4 @@ Pagination,
   SideNavItemsGroup,
+  StackView,
+  TextInput,
   ToggleSwitch,
@@ -45,0 +53,0 @@ Typography,

src/components/Link.js

@@ -7,4 +7,2 @@ import palette from '@telus-uds/palette-allium'
 
-const { color, fontSize, lineHeight, font, border, radius, size } = palette
-
 const Link = {
@@ -39,3 +37,3 @@ appearances: {
   tokens: {
-    color: color.greenAccessible,
+    color: palette.color.greenAccessible,
 
@@ -45,19 +43,21 @@ textLine: 'underline',
 
-    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,
 
     // Same as default size Typography
     blockFontWeight: '400',
-    blockFontSize: fontSize.size16,
-    blockLineHeight: lineHeight.ratio3to2,
-    blockFontName: Object.keys(font)[0],
+    blockFontSize: palette.fontSize.size16,
+    blockLineHeight: palette.lineHeight.ratio3to2,
+    blockFontName: Object.keys(palette.font)[0],
+    alignSelf: 'flex-start',
 
     icon: null,
-    iconSize: fontSize.size24,
-    iconGapBefore: size.size4,
-    iconGapAfter: size.size8,
+    iconSize: palette.fontSize.size24,
+    iconGapBefore: palette.size.size4,
+    iconGapAfter: palette.size.size8,
     iconScale: 1,
-    iconTranslateX: 0
+    iconTranslateX: 0,
+    iconTranslateY: 0
   },
@@ -69,3 +69,3 @@ rules: [
       tokens: {
-        outerBorderColor: color.greenAccessible,
+        outerBorderColor: palette.color.greenAccessible,
         outerBorderOutline: 'none'
@@ -77,3 +77,3 @@ }
       tokens: {
-        color: color.greenSanFelix,
+        color: palette.color.greenSanFelix,
         iconScale: 1.1
@@ -85,3 +85,3 @@ }
       tokens: {
-        color: color.greenDarkFern
+        color: palette.color.greenDarkFern
       }
@@ -92,3 +92,3 @@ },
       tokens: {
-        outerBorderColor: color.greenDarkFern
+        outerBorderColor: palette.color.greenDarkFern
       }
@@ -101,5 +101,5 @@ },
       tokens: {
-        blockFontSize: fontSize.size20,
-        iconSize: fontSize.size24,
-        blockLineHeight: lineHeight.ratio8to5
+        blockFontSize: palette.fontSize.size20,
+        iconSize: palette.fontSize.size24,
+        blockLineHeight: palette.lineHeight.ratio8to5
       }
@@ -110,5 +110,5 @@ },
       tokens: {
-        blockFontSize: fontSize.size14,
-        iconSize: fontSize.size20,
-        blockLineHeight: lineHeight.ratio10to7
+        blockFontSize: palette.fontSize.size14,
+        iconSize: palette.fontSize.size20,
+        blockLineHeight: palette.lineHeight.ratio10to7
       }
@@ -119,6 +119,6 @@ },
       tokens: {
-        blockFontSize: fontSize.size12,
+        blockFontSize: palette.fontSize.size12,
         blockFontWeight: '500',
-        iconSize: fontSize.size16,
-        blockLineHeight: lineHeight.ratio4to3
+        iconSize: palette.fontSize.size16,
+        blockLineHeight: palette.lineHeight.ratio4to3
       }
@@ -131,3 +131,3 @@ },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
@@ -138,4 +138,4 @@ },
       tokens: {
-        color: color.greyCharcoal,
-        outerBorderColor: color.greyCharcoal
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.greyCharcoal
       }
@@ -146,3 +146,3 @@ },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
@@ -153,3 +153,3 @@ },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
@@ -162,3 +162,3 @@ },
       tokens: {
-        color: color.white
+        color: palette.color.white
       }
@@ -169,3 +169,3 @@ },
       tokens: {
-        color: color.greyAthens
+        color: palette.color.greyAthens
       }
@@ -176,3 +176,3 @@ },
       tokens: {
-        outerBorderColor: color.white,
+        outerBorderColor: palette.color.white,
         outerBorderOutline: 'none'
@@ -184,3 +184,3 @@ }
       tokens: {
-        color: color.greyMystic
+        color: palette.color.greyMystic
       }
@@ -191,4 +191,4 @@ },
       tokens: {
-        color: color.greyMystic,
-        outerBorderColor: color.greyMystic
+        color: palette.color.greyMystic,
+        outerBorderColor: palette.color.greyMystic
       }
@@ -201,3 +201,3 @@ },
       tokens: {
-        color: color.greyShuttle
+        color: palette.color.greyShuttle
       }
@@ -208,4 +208,4 @@ },
       tokens: {
-        color: color.greyShuttle,
-        outerBorderColor: color.greyShuttle
+        color: palette.color.greyShuttle,
+        outerBorderColor: palette.color.greyShuttle
       }
@@ -216,3 +216,3 @@ },
       tokens: {
-        color: color.greyCharcoal,
+        color: palette.color.greyCharcoal,
         textLine: 'none'
@@ -236,3 +236,3 @@ }
       tokens: {
-        iconTranslateX: -1 * size.size4,
+        iconTranslateX: -1 * palette.size.size4,
         iconScale: 1
@@ -244,3 +244,3 @@ }
       tokens: {
-        iconTranslateX: size.size4,
+        iconTranslateX: palette.size.size4,
         iconScale: 1
@@ -247,0 +247,0 @@ }

src/components/Typography.js

@@ -5,4 +5,2 @@ import palette from '@telus-uds/palette-allium'
 
-const { color, fontSize, lineHeight, letterSpacing, font } = palette
-
 const Typography = {
@@ -56,8 +54,8 @@ appearances: {
     fontWeight: '400',
-    fontSize: fontSize.size16,
-    color: color.greyThunder,
-    lineHeight: lineHeight.ratio3to2,
+    fontSize: palette.fontSize.size16,
+    color: palette.color.greyThunder,
+    lineHeight: palette.lineHeight.ratio3to2,
     textTransform: 'none',
-    fontName: Object.keys(font)[0],
-    fontScaleCap: fontSize.size64
+    fontName: Object.keys(palette.font)[0],
+    fontScaleCap: palette.fontSize.size64
   },
@@ -71,3 +69,3 @@ rules: [
       tokens: {
-        color: color.greyCharcoal
+        color: palette.color.greyCharcoal
       }
@@ -79,3 +77,3 @@ },
       tokens: {
-        color: color.purpleTelus
+        color: palette.color.purpleTelus
       }
@@ -86,3 +84,3 @@ },
       tokens: {
-        color: color.greyThunder
+        color: palette.color.greyThunder
       }
@@ -93,3 +91,3 @@ },
       tokens: {
-        color: color.greyShuttle
+        color: palette.color.greyShuttle
       }
@@ -100,3 +98,3 @@ },
       tokens: {
-        color: color.greyCharcoal
+        color: palette.color.greyCharcoal
       }
@@ -107,3 +105,3 @@ },
       tokens: {
-        color: color.purpleTelus
+        color: palette.color.purpleTelus
       }
@@ -114,3 +112,3 @@ },
       tokens: {
-        color: color.white
+        color: palette.color.white
       }
@@ -126,6 +124,6 @@ },
       tokens: {
-        fontSize: fontSize.size40,
+        fontSize: palette.fontSize.size40,
         fontWeight: '300',
-        lineHeight: lineHeight.ratio6to5,
-        letterSpacing: letterSpacing.medium
+        lineHeight: palette.lineHeight.ratio6to5,
+        letterSpacing: palette.letterSpacing.medium
       }
@@ -136,4 +134,4 @@ },
       tokens: {
-        fontSize: fontSize.size64,
-        lineHeight: lineHeight.ratio9to8
+        fontSize: palette.fontSize.size64,
+        lineHeight: palette.lineHeight.ratio9to8
       }
@@ -146,6 +144,6 @@ },
       tokens: {
-        fontSize: fontSize.size36,
+        fontSize: palette.fontSize.size36,
         fontWeight: '400',
-        letterSpacing: letterSpacing.medium,
-        lineHeight: lineHeight.ratio11to9
+        letterSpacing: palette.letterSpacing.medium,
+        lineHeight: palette.lineHeight.ratio11to9
       }
@@ -156,6 +154,6 @@ },
       tokens: {
-        fontSize: fontSize.size56,
+        fontSize: palette.fontSize.size56,
         fontWeight: '300',
-        lineHeight: lineHeight.ratio8to7,
-        letterSpacing: letterSpacing.condensed
+        lineHeight: palette.lineHeight.ratio8to7,
+        letterSpacing: palette.letterSpacing.condensed
       }
@@ -168,5 +166,5 @@ },
       tokens: {
-        fontSize: fontSize.size28,
-        lineHeight: lineHeight.ratio9to7,
-        letterSpacing: letterSpacing.loose
+        fontSize: palette.fontSize.size28,
+        lineHeight: palette.lineHeight.ratio9to7,
+        letterSpacing: palette.letterSpacing.loose
       }
@@ -177,6 +175,6 @@ },
       tokens: {
-        fontSize: fontSize.size40,
+        fontSize: palette.fontSize.size40,
         fontWeight: '300',
-        lineHeight: lineHeight.ratio6to5,
-        letterSpacing: letterSpacing.medium
+        lineHeight: palette.lineHeight.ratio6to5,
+        letterSpacing: palette.letterSpacing.medium
       }
@@ -189,5 +187,5 @@ },
       tokens: {
-        fontSize: fontSize.size24,
+        fontSize: palette.fontSize.size24,
         fontWeight: '500',
-        lineHeight: lineHeight.ratio4to3
+        lineHeight: palette.lineHeight.ratio4to3
       }
@@ -198,5 +196,5 @@ },
       tokens: {
-        fontSize: fontSize.size28,
-        lineHeight: lineHeight.ratio9to7,
-        letterSpacing: letterSpacing.loose
+        fontSize: palette.fontSize.size28,
+        lineHeight: palette.lineHeight.ratio9to7,
+        letterSpacing: palette.letterSpacing.loose
       }
@@ -209,5 +207,5 @@ },
       tokens: {
-        fontSize: fontSize.size20,
+        fontSize: palette.fontSize.size20,
         fontWeight: '500',
-        lineHeight: lineHeight.ratio7to5
+        lineHeight: palette.lineHeight.ratio7to5
       }
@@ -218,4 +216,4 @@ },
       tokens: {
-        fontSize: fontSize.size24,
-        lineHeight: lineHeight.ratio4to3
+        fontSize: palette.fontSize.size24,
+        lineHeight: palette.lineHeight.ratio4to3
       }
@@ -228,5 +226,5 @@ },
       tokens: {
-        fontSize: fontSize.size16,
+        fontSize: palette.fontSize.size16,
         fontWeight: '500',
-        lineHeight: lineHeight.ratio3to2
+        lineHeight: palette.lineHeight.ratio3to2
       }
@@ -239,5 +237,5 @@ },
       tokens: {
-        fontSize: fontSize.size14,
+        fontSize: palette.fontSize.size14,
         fontWeight: '500',
-        lineHeight: lineHeight.ratio9to7
+        lineHeight: palette.lineHeight.ratio9to7
       }
@@ -250,5 +248,5 @@ },
       tokens: {
-        fontSize: fontSize.size12,
+        fontSize: palette.fontSize.size12,
         fontWeight: '700',
-        lineHeight: lineHeight.ratio4to3
+        lineHeight: palette.lineHeight.ratio4to3
       }
@@ -261,4 +259,4 @@ },
       tokens: {
-        fontSize: fontSize.size20,
-        lineHeight: lineHeight.ratio8to5
+        fontSize: palette.fontSize.size20,
+        lineHeight: palette.lineHeight.ratio8to5
       }
@@ -269,3 +267,3 @@ },
       tokens: {
-        lineHeight: lineHeight.ratio6to5
+        lineHeight: palette.lineHeight.ratio6to5
       }
@@ -280,3 +278,3 @@ },
       tokens: {
-        lineHeight: lineHeight.ratio5to4
+        lineHeight: palette.lineHeight.ratio5to4
       }
@@ -288,4 +286,4 @@ },
       tokens: {
-        fontSize: fontSize.size14,
-        lineHeight: lineHeight.ratio10to7
+        fontSize: palette.fontSize.size14,
+        lineHeight: palette.lineHeight.ratio10to7
       }
@@ -296,3 +294,3 @@ },
       tokens: {
-        lineHeight: lineHeight.ratio8to7
+        lineHeight: palette.lineHeight.ratio8to7
       }
@@ -305,5 +303,5 @@ },
       tokens: {
-        fontSize: fontSize.size12,
+        fontSize: palette.fontSize.size12,
         fontWeight: '500',
-        lineHeight: lineHeight.ratio4to3
+        lineHeight: palette.lineHeight.ratio4to3
       }
@@ -316,6 +314,6 @@ },
       tokens: {
-        fontSize: fontSize.size14,
+        fontSize: palette.fontSize.size14,
         fontWeight: '700',
         textTransform: 'uppercase',
-        lineHeight: lineHeight.ratio9to7
+        lineHeight: palette.lineHeight.ratio9to7
       }
@@ -337,15 +335,6 @@ },
 
-// Subset of allowed colours
-const { greyCharcoal, greyShuttle, purpleTelus, greyThunder, white } = palette.color
-
 // TODO: replace this with a build step similar to Palettes
 // https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(
-  Typography,
-  getTypographySchema({
-    ...palette,
-    color: { greyCharcoal, greyShuttle, purpleTelus, greyThunder, white }
-  })
-)
+validateComponentTheme(Typography, getTypographySchema(palette))
 
 export default Typography

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60603

increased by18.19%

Number of package files

29

increased by16%

Lines of code

1832

increased by12.39%

Dependency changes

• Updated@telus-uds/tools-theme@^0.0.2-prerelease.3