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

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.0.2-prerelease.5",
+  "version": "0.0.2-prerelease.6",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
-  "main": "lib/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-themes": "^0.0.2-prerelease.0"
+  "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.6"
+    "@telus-uds/palette-allium": "^1.0.0-prerelease.0"
   },
   "files": [
     "lib",
@@ -28,7 +30,7 @@
   "scripts": {
     "test": "jest",
     "release": "standard-version",
-    "build": "babel src -d lib",
+    "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": {

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,7 +1,4 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
+module.exports = {
   appearances: {
     background: {
       description: 'Background colour of box. Transparent if not specified.',
@@ -19,17 +16,17 @@ export default {
     }
   },
   tokens: {
-    backgroundColor: system.color.none
+    backgroundColor: '{system.color.none}'
   },
   rules: [
-    { 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 } }
+    { 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}' } }
   ]
 }

package/src/components/Button.js

@@ -1,12 +1,8 @@
-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 {
+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'
     },
@@ -32,126 +28,123 @@ export default {
       values: ['full'],
       type: 'variant'
     },
-    hover: appearances.Button.hover,
-    focus: appearances.Button.focus,
-    pressed: appearances.Button.pressed,
-    inactive: appearances.Button.inactive
+    hover: '{appearances.Button.hover}',
+    focus: '{appearances.Button.focus}',
+    pressed: '{appearances.Button.pressed}',
+    inactive: '{appearances.Button.inactive}'
   },
   tokens: {
-    borderColor: palette.color.greenAccessible,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    shadow: system.shadow.none,
+    borderColor: '{palette.color.greenAccessible}',
+    borderWidth: '{palette.border.border1}',
+    borderRadius: '{palette.radius.pill32}',
+    shadow: '{system.shadow.none}',
 
-    fontSize: palette.fontSize.size16,
-    color: palette.color.greenAccessible,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textAlign: system.flexJustifyContent.center,
-    alignSelf: system.flexAlign.flexStart,
-    // TODO: replace these with font for theme building
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow['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: 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,
+    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}',
 
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent
+    outerBorderColor: '{palette.color.transparent}',
+    outerBorderWidth: '{palette.border.border2}',
+    outerBorderGap: '{palette.border.border2}',
+    outerBackgroundColor: '{palette.color.transparent}'
   },
   rules: [
-    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
+    { if: { hover: true }, tokens: { borderWidth: '{palette.border.border3}' } },
 
     {
       if: { priority: 'high' },
       tokens: {
-        backgroundColor: palette.color.greenAccessible,
-        color: palette.color.white,
-        borderWidth: palette.border.none
+        backgroundColor: '{palette.color.greenAccessible}',
+        color: '{palette.color.white}',
+        borderWidth: '{palette.border.none}'
       }
     },
     {
       if: { priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.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: system.size.zero,
-        backgroundColor: palette.color.greenDarkFern,
-        color: palette.color.white
+        borderWidth: '{system.size.zero}',
+        backgroundColor: '{palette.color.greenDarkFern}',
+        color: '{palette.color.white}'
       }
     },
-    { if: { focus: true }, tokens: { outerBorderColor: palette.color.greenAccessible } },
+    { if: { focus: true }, tokens: { outerBorderColor: '{palette.color.greenAccessible}' } },
     {
       if: { focus: true, pressed: true },
-      tokens: { outerBorderColor: palette.color.greenDarkFern }
+      tokens: { outerBorderColor: '{palette.color.greenDarkFern}' }
     },
 
     {
       if: { inverse: true },
       tokens: {
-        backgroundColor: system.color.none,
-        borderColor: palette.color.white,
-        color: palette.color.white
+        backgroundColor: '{system.color.none}',
+        borderColor: '{palette.color.white}',
+        color: '{palette.color.white}'
       }
     },
     {
       if: { inverse: true, priority: 'high' },
-      tokens: { backgroundColor: palette.color.white, color: palette.color.greyCharcoal }
+      tokens: { backgroundColor: '{palette.color.white}', color: '{palette.color.greyCharcoal}' }
     },
     {
       if: { inverse: true, priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.color.light80 }
+      tokens: { backgroundColor: '{palette.color.light80}' }
     },
     {
       if: { inverse: true, pressed: true },
       tokens: {
-        color: palette.color.greyCharcoal,
-        backgroundColor: palette.color.light60
+        color: '{palette.color.greyCharcoal}',
+        backgroundColor: '{palette.color.light60}'
       }
     },
-    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: palette.color.white } },
+    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: '{palette.color.white}' } },
 
     {
       if: { danger: true, priority: null },
-      tokens: { color: palette.color.red, borderColor: palette.color.red }
+      tokens: { color: '{palette.color.red}', borderColor: '{palette.color.red}' }
     },
     {
       if: { danger: true, priority: null, inverse: true },
-      tokens: { backgroundColor: palette.color.white }
+      tokens: { backgroundColor: '{palette.color.white}' }
     },
     {
       if: { danger: true, priority: null, focus: true },
-      tokens: { outerBorderColor: palette.color.red }
+      tokens: { outerBorderColor: '{palette.color.red}' }
     },
     {
       if: { danger: true, priority: null, pressed: true },
-      tokens: { backgroundColor: palette.color.redDark, color: palette.color.white }
+      tokens: { backgroundColor: '{palette.color.redDark}', color: '{palette.color.white}' }
     },
     {
       if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: palette.color.redDark }
+      tokens: { outerBorderColor: '{palette.color.redDark}' }
     },
 
-    { if: { width: 'full' }, tokens: { width: system.size.full } },
+    { if: { width: 'full' }, tokens: { width: '{system.size.full}' } },
     {
       if: { size: 'small' },
       tokens: {
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        minWidth: system.size.zero
+        paddingTop: '{palette.size.size4}',
+        paddingBottom: '{palette.size.size4}',
+        minWidth: '{system.size.zero}'
       }
     },
     {
@@ -161,14 +154,14 @@ export default {
         inactive: true
       },
       tokens: {
-        backgroundColor: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: system.size.zero
+        backgroundColor: '{palette.color.greyCloud}',
+        color: '{palette.color.white}',
+        borderWidth: '{system.size.zero}'
       }
     },
     {
       if: { inactive: true, inverse: true },
-      tokens: { backgroundColor: palette.color.light60, color: palette.color.greyCharcoal }
+      tokens: { backgroundColor: '{palette.color.light60}', color: '{palette.color.greyCharcoal}' }
     }
   ]
 }

package/src/components/ButtonGroup.js

@@ -1,16 +1,13 @@
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
+module.exports = {
   appearances: {
-    viewport: appearances.system.viewport
+    viewport: '{appearances.system.viewport}'
   },
   tokens: {
-    space: system.integer[1],
-    direction: system.direction.row,
-    alignItems: system.flexAlign.center,
-    justifyContent: system.flexJustifyContent.flexStart,
-    flexGrow: system.integer[0]
+    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: { space: system.integer[3] } }]
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: '{system.integer.3}' } }]
 }

package/src/components/ButtonGroupItem.js

@@ -1,87 +1,97 @@
-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 {
+module.exports = {
   appearances: {
-    hover: appearances.ButtonGroupItem.hover,
-    focus: appearances.ButtonGroupItem.focus,
-    pressed: appearances.ButtonGroupItem.pressed,
-    selected: appearances.ButtonGroupItem.selected,
-    inactive: appearances.ButtonGroupItem.inactive
+    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,
+    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,
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow['700'],
+    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,
+    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,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent
+    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,
-        color: palette.color.white
+        borderWidth: '{palette.border.none}',
+        backgroundColor: '{palette.color.greyShuttle}',
+        borderColor: '{palette.color.greyShuttle}',
+        color: '{palette.color.white}'
       }
     },
     {
       if: { focus: true },
       tokens: {
-        borderColor: palette.color.purpleTelus,
-        borderWidth: palette.border.border3,
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.transparent
+        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: { hover: true }, tokens: { borderWidth: '{palette.border.border3}' } },
     {
       if: { selected: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
+        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: { focus: true, pressed: true },
+      if: { selected: true, focus: true, pressed: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
+        outerBorderColor: '{palette.color.purpleDark}'
       }
     },
     {
       if: { inactive: true },
       tokens: {
-        backgroundColor: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: system.border.zero
+        backgroundColor: '{palette.color.greyCloud}',
+        color: '{palette.color.white}',
+        borderWidth: '{system.border.zero}'
       }
     }
   ]

package/src/components/Card.js

@@ -1,8 +1,4 @@
-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 {
+module.exports = {
   appearances: {
     background: {
       values: ['alternative'],
@@ -12,87 +8,89 @@ export default {
       values: ['narrow', 'intermediate', 'compact', 'custom'],
       type: 'variant'
     },
-    viewport: appearances.system.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: system.shadow.none
+    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}'
       }
     }
   ]