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

package/lib/components/spacingScale.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    space: _schema.appearances.spacingScale.space,
+    viewport: _schema.appearances.system.viewport
+  },
+  // Largest spacings first, so they apply any time space >= highest index'
+  tokens: {
+    size: _paletteAllium.default.size.size96
+  },
+  rules: [{
+    if: {
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size120
+    }
+  }, {
+    if: {
+      space: 11
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size96
+    }
+  }, {
+    if: {
+      space: 10
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size80
+    }
+  }, {
+    if: {
+      space: 9
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size64
+    }
+  }, {
+    if: {
+      space: 8
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size48
+    }
+  }, {
+    if: {
+      space: 7
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size40
+    }
+  }, {
+    if: {
+      space: 6
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size36
+    }
+  }, {
+    if: {
+      space: 5
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size32
+    }
+  }, {
+    if: {
+      space: 4
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size24
+    }
+  }, {
+    if: {
+      space: 3
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size16
+    }
+  }, {
+    if: {
+      space: 2
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size8
+    }
+  }, {
+    if: {
+      space: 1
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size4
+    }
+  }, {
+    if: {
+      space: 11,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size120
+    }
+  }, {
+    if: {
+      space: 10,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size96
+    }
+  }, {
+    if: {
+      space: 9,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size72
+    }
+  }, {
+    if: {
+      space: 8,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size64
+    }
+  }, {
+    if: {
+      space: 7
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size48
+    }
+  }, {
+    if: {
+      space: 6
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size40
+    }
+  }, // Zero spacing last; overrides all other rules when space === 0
+  {
+    if: {
+      space: 0
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size0
+    }
+  }]
+};
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _package = _interopRequireDefault(require("../package.json"));
+
+var components = _interopRequireWildcard(require("./components"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TODO: replace this with theme build tooling and schema checks as part of
+// https://github.com/telus/universal-design-system/issues/92
+const metadata = {
+  name: 'allium',
+  package: _package.default.name,
+  version: _package.default.version
+};
+const alliumTheme = {
+  metadata,
+  components
+};
+var _default = alliumTheme;
+exports.default = _default;

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.0.2-prerelease.1",
+  "version": "0.0.2-prerelease.5",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
   },
   "dependencies": {
-    "@telus-uds/palette-allium": "^0.1.0-prerelease.1",
-    "@telus-uds/system-constants": "^0.0.2-prerelease.0",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.1"
+    "@telus-uds/system-themes": "^0.0.2-prerelease.0"
+  },
+  "peerDependencies": {
+    "@telus-uds/palette-allium": "^0.1.0-prerelease.6"
   },
   "files": [
     "lib",
@@ -25,8 +26,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": "babel src -d lib",
+    "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"

package/src/components/Box.js

@@ -1,9 +1,7 @@
 import palette from '@telus-uds/palette-allium'
-import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
-const { color, size } = palette
-
-const Box = {
+export default {
   appearances: {
     background: {
       description: 'Background colour of box. Transparent if not specified.',
@@ -20,98 +18,18 @@ const Box = {
       ]
     }
   },
-  // TODO: integrate box levels into normal token resolution system as part of
-  // https://github.com/telus/universal-design-system/issues/267
-  levels: {
-    xs: {
-      0: size.size0,
-      1: size.size4,
-      2: size.size8,
-      3: size.size16,
-      4: size.size24,
-      5: size.size32,
-      6: size.size36,
-      7: size.size40,
-      8: size.size48,
-      9: size.size64,
-      10: size.size80,
-      11: size.size96
-    },
-    sm: {
-      0: size.size0,
-      1: size.size4,
-      2: size.size8,
-      3: size.size16,
-      4: size.size24,
-      5: size.size32,
-      6: size.size36,
-      7: size.size40,
-      8: size.size48,
-      9: size.size64,
-      10: size.size80,
-      11: size.size96
-    },
-    md: {
-      0: size.size0,
-      1: size.size4,
-      2: size.size8,
-      3: size.size16,
-      4: size.size24,
-      5: size.size32,
-      6: size.size36,
-      7: size.size40,
-      8: size.size48,
-      9: size.size64,
-      10: size.size80,
-      11: size.size96
-    },
-    lg: {
-      0: size.size0,
-      1: size.size4,
-      2: size.size8,
-      3: size.size16,
-      4: size.size24,
-      5: size.size32,
-      6: size.size40,
-      7: size.size48,
-      8: size.size64,
-      9: size.size72,
-      10: size.size96,
-      11: size.size120
-    },
-    xl: {
-      0: size.size0,
-      1: size.size4,
-      2: size.size8,
-      3: size.size16,
-      4: size.size24,
-      5: size.size32,
-      6: size.size40,
-      7: size.size48,
-      8: size.size64,
-      9: size.size72,
-      10: size.size96,
-      11: size.size120
-    }
-  },
   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,9 +1,8 @@
-import { getButtonSchema, validateComponentTheme, buttonAppearances } from '@telus-uds/tools-theme'
 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'
 
-const { color, border, font, fontSize, lineHeight, radius, size } = palette
-
-const Button = {
+export default {
   appearances: {
     priority: {
       description:
@@ -33,173 +32,143 @@ 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',
+    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'],
 
-    backgroundColor: color.white,
-    opacity: 1,
-    paddingLeft: size.size32,
-    paddingRight: size.size32,
-    paddingTop: size.size12,
-    paddingBottom: size.size12,
-    width: null,
-
-    marginLeft: size.size0,
-    marginRight: size.size0,
-    marginTop: size.size0,
-    marginBottom: size.size0,
+    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: 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 } },
 
     {
       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, inverse: true },
+      tokens: { backgroundColor: palette.color.white }
     },
     {
-      if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: color.redDark }
+      if: { danger: true, priority: null, focus: true },
+      tokens: { outerBorderColor: palette.color.red }
     },
-
-    { 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: { 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,16 @@
-import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-allium'
-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 { size } = palette
-
-const ButtonGroup = {
+export default {
   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