@telus-uds/theme-allium 0.0.2-prerelease.2 → 0.0.2-prerelease.6

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.0.2-prerelease.2",
+  "version": "0.0.2-prerelease.6",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
-  "main": "src/index.js",
-  "react-native": "src/index.js",
+  "main": "build/theme.js",
+  "react-native": "build/theme.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
   },
-  "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.2"
+  "dependencies": {},
+  "devDependencies": {
+    "@telus-uds/palette-allium": "^1.0.0-prerelease.0",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.1"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^0.1.0-prerelease.2"
+    "@telus-uds/palette-allium": "^1.0.0-prerelease.0"
   },
   "files": [
     "lib",
@@ -27,8 +28,10 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1",
-    "release": "standard-version"
+    "test": "jest",
+    "release": "standard-version",
+    "build": "THEME_PATH=./src/index.js UDS_THEME_MODULE_PALETTE=@telus-uds/palette-allium UDS_THEME_MODULE_SYSTEM=@telus-uds/system-themes/src/tokens/rn UDS_THEME_MODULE_APPEARANCES=@telus-uds/system-themes/schema/appearances system-themes-build",
+    "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"

package/src/components/ActivityIndicator.js

@@ -1,6 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
+module.exports = {
   appearances: {
     size: {
       values: ['large'],
@@ -9,16 +7,16 @@ export default {
     }
   },
   tokens: {
-    size: palette.size.size20,
-    thickness: palette.border.border2,
-    color: palette.color.greenAccessible
+    size: '{palette.size.size20}',
+    thickness: '{palette.border.border2}',
+    color: '{palette.color.greenAccessible}'
   },
   rules: [
     {
       if: { size: 'large' },
       tokens: {
-        thickness: palette.border.border4,
-        size: palette.size.size40
+        thickness: '{palette.border.border4}',
+        size: '{palette.size.size40}'
       }
     }
   ]

package/src/components/Box.js

@@ -1,9 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-
-const { color } = palette
-
-const Box = {
+module.exports = {
   appearances: {
     background: {
       description: 'Background colour of box. Transparent if not specified.',
@@ -21,23 +16,17 @@ const Box = {
     }
   },
   tokens: {
-    backgroundColor: null
+    backgroundColor: '{system.color.none}'
   },
   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}' } }
   ]
 }
-
-// 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,13 +1,8 @@
-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 = {
+module.exports = {
   appearances: {
     priority: {
       description:
-        'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to proritize meaningful user flows. Low priority styles are applied by default.',
+        'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
       values: ['high'],
       type: 'variant'
     },
@@ -33,173 +28,140 @@ const Button = {
       values: ['full'],
       type: 'variant'
     },
-    component: buttonAppearances.component,
-    hover: buttonAppearances.hover,
-    focus: buttonAppearances.focus,
-    pressed: buttonAppearances.pressed,
-    inactive: {
-      ...buttonAppearances.inactive,
-      description:
-        // Based on https://tds.telus.com/components/index.html#/Forms
-        'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.'
-    }
+    hover: '{appearances.Button.hover}',
+    focus: '{appearances.Button.focus}',
+    pressed: '{appearances.Button.pressed}',
+    inactive: '{appearances.Button.inactive}'
   },
   tokens: {
-    borderColor: color.greenAccessible,
-    borderWidth: border.border1,
-    borderRadius: radius.pill32,
-    shadow: null,
+    borderColor: '{palette.color.greenAccessible}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.pill32}',
+    shadow: '{system.shadow.none}',
 
-    fontSize: fontSize.size16,
-    color: color.greenAccessible,
-    lineHeight: lineHeight.ratio3to2,
-    fontName: Object.keys(font)[0],
-    textAlign: 'center',
-    fontWeight: '700',
+    fontSize: '{palette.fontSize.size16}',
+    color: '{palette.color.greenAccessible}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    textAlign: '{system.flexJustifyContent.center}',
+    alignSelf: '{system.flexAlign.flexStart}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight700}',
 
-    backgroundColor: color.white,
-    opacity: 1,
-    paddingLeft: size.size32,
-    paddingRight: size.size32,
-    paddingTop: size.size12,
-    paddingBottom: size.size12,
-    width: null,
+    backgroundColor: '{palette.color.white}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{palette.size.size32}',
+    paddingRight: '{palette.size.size32}',
+    paddingTop: '{palette.size.size12}',
+    paddingBottom: '{palette.size.size12}',
+    width: '{system.size.none}',
+    minWidth: '{palette.size.size144}',
 
-    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}',
+    outerBackgroundColor: '{palette.color.transparent}'
   },
   rules: [
-    { if: { hover: true }, tokens: { borderWidth: border.border3 } },
+    { if: { hover: true }, tokens: { borderWidth: '{palette.border.border3}' } },
 
     {
       if: { priority: 'high' },
       tokens: {
-        backgroundColor: color.greenAccessible,
-        color: color.white,
-        borderWidth: border.none
+        backgroundColor: '{palette.color.greenAccessible}',
+        color: '{palette.color.white}',
+        borderWidth: '{palette.border.none}'
       }
     },
     {
       if: { priority: 'high', hover: true },
-      tokens: { backgroundColor: color.greenSanFelix }
+      tokens: { backgroundColor: '{palette.color.greenSanFelix}' }
     },
 
     // pressed and focus apply the same tokens to both high and low priority
     {
       if: { pressed: true },
       tokens: {
-        borderWidth: 0,
-        backgroundColor: color.greenDarkFern,
-        color: color.white
+        borderWidth: '{system.size.zero}',
+        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: '{system.color.none}',
+        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}' }
     },
     {
       if: { inverse: true, pressed: true },
       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, inverse: true },
-      tokens: { backgroundColor: color.white }
+      if: { danger: true, priority: null },
+      tokens: { color: '{palette.color.red}', borderColor: '{palette.color.red}' }
     },
-    { if: { danger: true, priority: null, focus: true }, tokens: { outerBorderColor: color.red } },
     {
-      if: { danger: true, priority: null, pressed: true },
-      tokens: { backgroundColor: color.redDark, color: color.white }
-    },
-    {
-      if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: color.redDark }
+      if: { danger: true, priority: null, inverse: true },
+      tokens: { backgroundColor: '{palette.color.white}' }
     },
-
-    { if: { width: 'full' }, tokens: { width: '100%' } },
-    { if: { size: 'small' }, tokens: { paddingTop: size.size4, paddingBottom: 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
-      }
+      if: { danger: true, priority: null, focus: true },
+      tokens: { outerBorderColor: '{palette.color.red}' }
     },
     {
-      if: { component: 'ButtonGroup', pressed: true },
-      tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.greyShuttle,
-        color: color.white
-      }
+      if: { danger: true, priority: null, pressed: true },
+      tokens: { backgroundColor: '{palette.color.redDark}', color: '{palette.color.white}' }
     },
     {
-      if: { component: 'ButtonGroup', focus: true },
-      tokens: {
-        borderColor: color.purpleTelus,
-        borderWidth: border.border3,
-        color: color.greyCharcoal,
-        outerBorderColor: color.transparent
-      }
+      if: { danger: true, priority: null, pressed: true, focus: true },
+      tokens: { outerBorderColor: '{palette.color.redDark}' }
     },
+
+    { if: { width: 'full' }, tokens: { width: '{system.size.full}' } },
     {
-      if: { component: 'ButtonGroup', selected: true },
+      if: { size: 'small' },
       tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.purpleTelus,
-        color: color.white
+        paddingTop: '{palette.size.size4}',
+        paddingBottom: '{palette.size.size4}',
+        minWidth: '{system.size.zero}'
       }
     },
     {
-      if: { component: 'ButtonGroup', focus: true, pressed: true },
+      description:
+        'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
+      if: {
+        inactive: true
+      },
       tokens: {
-        borderWidth: border.none,
-        backgroundColor: color.purpleTelus,
-        color: color.white
+        backgroundColor: '{palette.color.greyCloud}',
+        color: '{palette.color.white}',
+        borderWidth: '{system.size.zero}'
       }
     },
-    {
-      if: { inactive: true },
-      tokens: { backgroundColor: color.greyCloud, color: 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}' }
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Button, getButtonSchema(palette))
-
-export default Button

package/src/components/ButtonGroup.js

@@ -1,22 +1,13 @@
-import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
-
-const { size } = palette
-
-const ButtonGroup = {
+module.exports = {
   appearances: {
-    viewport: appearances.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    gap: size.size4,
-    direction: 'row'
+    space: '{system.integer.1}',
+    direction: '{system.direction.row}',
+    alignItems: '{system.flexAlign.center}',
+    justifyContent: '{system.flexJustifyContent.flexStart}',
+    flexGrow: '{system.integer.0}'
   },
-  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { gap: size.size16 } }]
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: '{system.integer.3}' } }]
 }
-
-// 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/ButtonGroupItem.js

@@ -0,0 +1,98 @@
+module.exports = {
+  appearances: {
+    hover: '{appearances.ButtonGroupItem.hover}',
+    focus: '{appearances.ButtonGroupItem.focus}',
+    pressed: '{appearances.ButtonGroupItem.pressed}',
+    selected: '{appearances.ButtonGroupItem.selected}',
+    inactive: '{appearances.ButtonGroupItem.inactive}'
+  },
+  tokens: {
+    borderColor: '{palette.color.greyCloud}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.pill32}',
+    shadow: '{system.shadow.none}',
+
+    fontSize: '{palette.fontSize.size14}',
+    color: '{palette.color.greyShuttle}',
+    lineHeight: '{palette.lineHeight.ratio3to2}',
+    textAlign: '{system.flexJustifyContent.center}',
+    alignSelf: '{system.flexAlign.flexStart}',
+    fontName: '{palette.fontName.HelveticaNow}',
+    fontWeight: '{palette.fontWeight.weight700}',
+
+    backgroundColor: '{palette.color.white}',
+    opacity: '{system.opacity.opaque}',
+    paddingLeft: '{palette.size.size16}',
+    paddingRight: '{palette.size.size16}',
+    paddingTop: '{palette.size.size8}',
+    paddingBottom: '{palette.size.size8}',
+    width: '{system.size.none}',
+    minWidth: '{system.size.zero}',
+
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderGap: '{palette.border.border2}',
+    outerBackgroundColor: '{palette.color.transparent}'
+  },
+  rules: [
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: '{palette.border.none}',
+        backgroundColor: '{palette.color.greyShuttle}',
+        borderColor: '{palette.color.greyShuttle}',
+        color: '{palette.color.white}'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '{palette.color.greyShuttle}',
+        outerBorderColor: '{palette.color.greyShuttle}',
+        outerBorderGap: '{palette.size.size2}',
+        outerBorderWidth: '{palette.size.size2}'
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: '{palette.border.border3}' } },
+    {
+      if: { selected: true },
+      tokens: {
+        borderWidth: '{palette.border.none}',
+        backgroundColor: '{palette.color.purpleTelus}',
+        color: '{palette.color.white}'
+      }
+    },
+    {
+      if: { selected: true, hover: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleDeluge}'
+      }
+    },
+    {
+      if: { selected: true, pressed: true },
+      tokens: {
+        backgroundColor: '{palette.color.purpleDark}'
+      }
+    },
+    {
+      if: { selected: true, focus: true },
+      tokens: {
+        outerBorderColor: '{palette.color.purpleTelus}'
+      }
+    },
+    {
+      if: { selected: true, focus: true, pressed: true },
+      tokens: {
+        outerBorderColor: '{palette.color.purpleDark}'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '{palette.color.greyCloud}',
+        color: '{palette.color.white}',
+        borderWidth: '{system.border.zero}'
+      }
+    }
+  ]
+}

package/src/components/Card.js

@@ -1,7 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
-
-export default {
+module.exports = {
   appearances: {
     background: {
       values: ['alternative'],
@@ -11,87 +8,89 @@ export default {
       values: ['narrow', 'intermediate', 'compact', 'custom'],
       type: 'variant'
     },
-    viewport: appearances.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    backgroundColor: palette.color.white,
-    borderColor: palette.color.greyMystic,
-    borderRadius: palette.radius.radius6,
-    borderWidth: palette.border.border1,
-    paddingBottom: palette.size.size32,
-    paddingLeft: palette.size.size24,
-    paddingRight: palette.size.size24,
-    paddingTop: palette.size.size32,
-    shadow: null
+    flex: '{system.integer.1}',
+    backgroundColor: '{palette.color.white}',
+    borderColor: '{palette.color.greyMystic}',
+    borderRadius: '{palette.radius.radius6}',
+    borderWidth: '{palette.border.border1}',
+    paddingBottom: '{palette.size.size32}',
+    paddingLeft: '{palette.size.size24}',
+    paddingRight: '{palette.size.size24}',
+    paddingTop: '{palette.size.size32}',
+    minWidth: '{system.size.none}',
+    shadow: '{system.shadow.none}'
   },
   rules: [
     {
       if: { background: 'alternative' },
       tokens: {
-        backgroundColor: palette.color.greyAthens
+        backgroundColor: '{palette.color.greyAthens}'
       }
     },
     {
       if: { viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        paddingBottom: palette.size.size48,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size48
+        paddingBottom: '{palette.size.size48}',
+        paddingLeft: '{palette.size.size32}',
+        paddingRight: '{palette.size.size32}',
+        paddingTop: '{palette.size.size48}'
       }
     },
     {
       if: { padding: 'narrow' },
       tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size24
+        paddingBottom: '{palette.size.size24}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size16}',
+        paddingTop: '{palette.size.size24}'
       }
     },
     {
       if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size32
+        paddingBottom: '{palette.size.size32}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size16}',
+        paddingTop: '{palette.size.size32}'
       }
     },
     {
       if: { padding: 'intermediate' },
       tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size24,
-        paddingRight: palette.size.size24,
-        paddingTop: palette.size.size24
+        paddingBottom: '{palette.size.size24}',
+        paddingLeft: '{palette.size.size24}',
+        paddingRight: '{palette.size.size24}',
+        paddingTop: '{palette.size.size24}'
       }
     },
     {
       if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
       tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size32
+        paddingBottom: '{palette.size.size32}',
+        paddingLeft: '{palette.size.size32}',
+        paddingRight: '{palette.size.size32}',
+        paddingTop: '{palette.size.size32}'
       }
     },
     {
       if: { padding: 'compact' },
       tokens: {
-        paddingBottom: palette.size.size16,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size16
+        paddingBottom: '{palette.size.size16}',
+        paddingLeft: '{palette.size.size16}',
+        paddingRight: '{palette.size.size16}',
+        paddingTop: '{palette.size.size16}'
       }
     },
     {
       if: { padding: 'custom' },
       tokens: {
-        paddingBottom: palette.size.size0,
-        paddingLeft: palette.size.size0,
-        paddingRight: palette.size.size0,
-        paddingTop: palette.size.size0
+        paddingBottom: '{palette.size.size0}',
+        paddingLeft: '{palette.size.size0}',
+        paddingRight: '{palette.size.size0}',
+        paddingTop: '{palette.size.size0}'
       }
     }
   ]