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

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-prerelease.5](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v0.0.2-prerelease.4...@telus-uds/theme-allium/v0.0.2-prerelease.5) (2021-11-23)
+
+### Features
+
+- add opacity and duration tokens to palettes ([#754](https://github.com/telus/universal-design-system/issues/754)) ([e1de9a6](https://github.com/telus/universal-design-system/commit/e1de9a62ec78d217677409590ad46e3674aabf2f))
+- **base:** add `Radio` button ([#731](https://github.com/telus/universal-design-system/issues/731)) ([ad1613c](https://github.com/telus/universal-design-system/commit/ad1613c547fe3b0cdf1490a92267f32045356133))
+- **base:** add base `Checkbox` component ([#706](https://github.com/telus/universal-design-system/issues/706)) ([a3fa01a](https://github.com/telus/universal-design-system/commit/a3fa01ad0da342be02c15284a103c22d7b315ae9))
+- **base:** add Tags component ([#785](https://github.com/telus/universal-design-system/issues/785)) ([90bbf40](https://github.com/telus/universal-design-system/commit/90bbf4035a0bc0a8cdf319d9b366c8498c0dfb56))
+- **base:** add TextArea ([#720](https://github.com/telus/universal-design-system/issues/720)) ([b18cae3](https://github.com/telus/universal-design-system/commit/b18cae3357375019ecc4e24e78ed9a2345b26139))
+- **base:** add the Select component ([#759](https://github.com/telus/universal-design-system/issues/759)) ([9cfdf84](https://github.com/telus/universal-design-system/commit/9cfdf846b7a273dd140537b60e08f30a70c13a66))
+- **base:** adding list component ([#296](https://github.com/telus/universal-design-system/issues/296)) ([#703](https://github.com/telus/universal-design-system/issues/703)) ([50e474d](https://github.com/telus/universal-design-system/commit/50e474d3d7f1988f5971a10be8416c8ac510626f))
+- **base:** implementing base Skeleton component ([#770](https://github.com/telus/universal-design-system/issues/770)) ([1138f08](https://github.com/telus/universal-design-system/commit/1138f08885f4cf67fc0fb7273758d20cc0a989c1)), closes [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296)
+
+### Bug Fixes
+
+- **base:** fix button text alignment ([#794](https://github.com/telus/universal-design-system/issues/794)) ([9671087](https://github.com/telus/universal-design-system/commit/9671087477eb45b0d3c872b47f1d24cdd43a727f))
+- **base:** restore missing Allium link styles ([#789](https://github.com/telus/universal-design-system/issues/789)) ([73664bd](https://github.com/telus/universal-design-system/commit/73664bd5ac0a1b60ad1ec3514a927030b7c5c002))
+- **base:** update ButtonGroupItem theme approach ([#784](https://github.com/telus/universal-design-system/issues/784)) ([ce3744b](https://github.com/telus/universal-design-system/commit/ce3744b85ea6ce634a30cca73b3484640b36ffec))
+
 ### [0.0.2-prerelease.4](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v0.0.2-prerelease.3...@telus-uds/theme-allium/v0.0.2-prerelease.4) (2021-11-08)
 
 ### Features

package/lib/components/ActivityIndicator.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    size: {
+      values: ['large'],
+      description: 'used for full-screen spinners',
+      type: 'variant'
+    }
+  },
+  tokens: {
+    size: _paletteAllium.default.size.size20,
+    thickness: _paletteAllium.default.border.border2,
+    color: _paletteAllium.default.color.greenAccessible
+  },
+  rules: [{
+    if: {
+      size: 'large'
+    },
+    tokens: {
+      thickness: _paletteAllium.default.border.border4,
+      size: _paletteAllium.default.size.size40
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Box.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    background: {
+      description: 'Background colour of box. Transparent if not specified.',
+      values: ['light', 'lightest', 'dark', 'darkest', 'critical', 'danger', 'warning', 'positive', 'brand']
+    }
+  },
+  tokens: {
+    backgroundColor: _rn.default.color.none
+  },
+  rules: [{
+    if: {
+      background: 'lightest'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      background: 'light'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens
+    }
+  }, {
+    if: {
+      background: 'dark'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      background: 'darkest'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      background: 'critical'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.redDark
+    }
+  }, {
+    if: {
+      background: 'danger'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.redLight
+    }
+  }, {
+    if: {
+      background: 'warning'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.amberLight
+    }
+  }, {
+    if: {
+      background: 'positive'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenPanache
+    }
+  }, {
+    if: {
+      background: 'brand'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.purpleTelus
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Button.js

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  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.',
+      values: ['high'],
+      type: 'variant'
+    },
+    danger: {
+      description: 'Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.',
+      values: [true],
+      type: 'variant'
+    },
+    inverse: {
+      description: 'Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.',
+      values: [true],
+      type: 'variant'
+    },
+    size: {
+      values: ['small'],
+      type: 'variant'
+    },
+    width: {
+      description: 'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
+      values: ['full'],
+      type: 'variant'
+    },
+    hover: _schema.appearances.Button.hover,
+    focus: _schema.appearances.Button.focus,
+    pressed: _schema.appearances.Button.pressed,
+    inactive: _schema.appearances.Button.inactive
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.greenAccessible,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderRadius: _paletteAllium.default.radius.pill32,
+    shadow: _rn.default.shadow.none,
+    fontSize: _paletteAllium.default.fontSize.size16,
+    color: _paletteAllium.default.color.greenAccessible,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    textAlign: _rn.default.flexJustifyContent.center,
+    alignSelf: _rn.default.flexAlign.flexStart,
+    // TODO: replace these with font for theme building
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '700',
+    // font: palette.font.HelveticaNow['700'],
+    backgroundColor: _paletteAllium.default.color.white,
+    opacity: _rn.default.opacity.opaque,
+    paddingLeft: _paletteAllium.default.size.size32,
+    paddingRight: _paletteAllium.default.size.size32,
+    paddingTop: _paletteAllium.default.size.size12,
+    paddingBottom: _paletteAllium.default.size.size12,
+    width: _rn.default.size.none,
+    minWidth: _paletteAllium.default.size.size144,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border2,
+    outerBorderGap: _paletteAllium.default.border.border2,
+    outerBorderRadius: _paletteAllium.default.radius.pill32,
+    outerBackgroundColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      hover: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.border3
+    }
+  }, {
+    if: {
+      priority: 'high'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenAccessible,
+      color: _paletteAllium.default.color.white,
+      borderWidth: _paletteAllium.default.border.none
+    }
+  }, {
+    if: {
+      priority: 'high',
+      hover: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenSanFelix
+    }
+  }, // pressed and focus apply the same tokens to both high and low priority
+  {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      borderWidth: _rn.default.size.zero,
+      backgroundColor: _paletteAllium.default.color.greenDarkFern,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      focus: true,
+      pressed: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenDarkFern
+    }
+  }, {
+    if: {
+      inverse: true
+    },
+    tokens: {
+      backgroundColor: _rn.default.color.none,
+      borderColor: _paletteAllium.default.color.white,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      inverse: true,
+      priority: 'high'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.white,
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      inverse: true,
+      priority: 'high',
+      hover: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.light80
+    }
+  }, {
+    if: {
+      inverse: true,
+      pressed: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCharcoal,
+      backgroundColor: _paletteAllium.default.color.light60
+    }
+  }, {
+    if: {
+      inverse: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      danger: true,
+      priority: null
+    },
+    tokens: {
+      color: _paletteAllium.default.color.red,
+      borderColor: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      danger: true,
+      priority: null,
+      inverse: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      danger: true,
+      priority: null,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      danger: true,
+      priority: null,
+      pressed: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.redDark,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      danger: true,
+      priority: null,
+      pressed: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.redDark
+    }
+  }, {
+    if: {
+      width: 'full'
+    },
+    tokens: {
+      width: _rn.default.size.full
+    }
+  }, {
+    if: {
+      size: 'small'
+    },
+    tokens: {
+      paddingTop: _paletteAllium.default.size.size4,
+      paddingBottom: _paletteAllium.default.size.size4,
+      minWidth: _rn.default.size.zero
+    }
+  }, {
+    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: {
+      backgroundColor: _paletteAllium.default.color.greyCloud,
+      color: _paletteAllium.default.color.white,
+      borderWidth: _rn.default.size.zero
+    }
+  }, {
+    if: {
+      inactive: true,
+      inverse: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.light60,
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ButtonGroup.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    viewport: _schema.appearances.system.viewport
+  },
+  tokens: {
+    space: _rn.default.integer[1],
+    direction: _rn.default.direction.row,
+    alignItems: _rn.default.flexAlign.center,
+    justifyContent: _rn.default.flexJustifyContent.flexStart,
+    flexGrow: _rn.default.integer[0]
+  },
+  rules: [{
+    if: {
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      space: _rn.default.integer[3]
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ButtonGroupItem.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    hover: _schema.appearances.ButtonGroupItem.hover,
+    focus: _schema.appearances.ButtonGroupItem.focus,
+    pressed: _schema.appearances.ButtonGroupItem.pressed,
+    selected: _schema.appearances.ButtonGroupItem.selected,
+    inactive: _schema.appearances.ButtonGroupItem.inactive
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.greyCloud,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderRadius: _paletteAllium.default.radius.pill32,
+    shadow: _rn.default.shadow.none,
+    fontSize: _paletteAllium.default.fontSize.size14,
+    color: _paletteAllium.default.color.greyShuttle,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    textAlign: _rn.default.flexJustifyContent.center,
+    alignSelf: _rn.default.flexAlign.flexStart,
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '700',
+    // font: palette.font.HelveticaNow['700'],
+    backgroundColor: _paletteAllium.default.color.white,
+    opacity: _rn.default.opacity.opaque,
+    paddingLeft: _paletteAllium.default.size.size16,
+    paddingRight: _paletteAllium.default.size.size16,
+    paddingTop: _paletteAllium.default.size.size8,
+    paddingBottom: _paletteAllium.default.size.size8,
+    width: _rn.default.size.none,
+    minWidth: _rn.default.size.zero,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border2,
+    outerBorderGap: _paletteAllium.default.border.border2,
+    outerBorderRadius: _paletteAllium.default.radius.pill32,
+    outerBackgroundColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      pressed: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.none,
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.purpleTelus,
+      borderWidth: _paletteAllium.default.border.border3,
+      color: _paletteAllium.default.color.greyCharcoal,
+      outerBorderColor: _paletteAllium.default.color.transparent
+    }
+  }, {
+    if: {
+      hover: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.border3
+    }
+  }, {
+    if: {
+      selected: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.none,
+      backgroundColor: _paletteAllium.default.color.purpleTelus,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      focus: true,
+      pressed: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.none,
+      backgroundColor: _paletteAllium.default.color.purpleTelus,
+      color: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      inactive: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyCloud,
+      color: _paletteAllium.default.color.white,
+      borderWidth: _rn.default.border.zero
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Card.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    background: {
+      values: ['alternative'],
+      type: 'variant'
+    },
+    padding: {
+      values: ['narrow', 'intermediate', 'compact', 'custom'],
+      type: 'variant'
+    },
+    viewport: _schema.appearances.system.viewport
+  },
+  tokens: {
+    backgroundColor: _paletteAllium.default.color.white,
+    borderColor: _paletteAllium.default.color.greyMystic,
+    borderRadius: _paletteAllium.default.radius.radius6,
+    borderWidth: _paletteAllium.default.border.border1,
+    paddingBottom: _paletteAllium.default.size.size32,
+    paddingLeft: _paletteAllium.default.size.size24,
+    paddingRight: _paletteAllium.default.size.size24,
+    paddingTop: _paletteAllium.default.size.size32,
+    shadow: _rn.default.shadow.none
+  },
+  rules: [{
+    if: {
+      background: 'alternative'
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens
+    }
+  }, {
+    if: {
+      viewport: ['md', 'lg', 'xl']
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size48,
+      paddingLeft: _paletteAllium.default.size.size32,
+      paddingRight: _paletteAllium.default.size.size32,
+      paddingTop: _paletteAllium.default.size.size48
+    }
+  }, {
+    if: {
+      padding: 'narrow'
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size24,
+      paddingLeft: _paletteAllium.default.size.size16,
+      paddingRight: _paletteAllium.default.size.size16,
+      paddingTop: _paletteAllium.default.size.size24
+    }
+  }, {
+    if: {
+      padding: 'narrow',
+      viewport: ['md', 'lg', 'xl']
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size32,
+      paddingLeft: _paletteAllium.default.size.size16,
+      paddingRight: _paletteAllium.default.size.size16,
+      paddingTop: _paletteAllium.default.size.size32
+    }
+  }, {
+    if: {
+      padding: 'intermediate'
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size24,
+      paddingLeft: _paletteAllium.default.size.size24,
+      paddingRight: _paletteAllium.default.size.size24,
+      paddingTop: _paletteAllium.default.size.size24
+    }
+  }, {
+    if: {
+      padding: 'intermediate',
+      viewport: ['md', 'lg', 'xl']
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size32,
+      paddingLeft: _paletteAllium.default.size.size32,
+      paddingRight: _paletteAllium.default.size.size32,
+      paddingTop: _paletteAllium.default.size.size32
+    }
+  }, {
+    if: {
+      padding: 'compact'
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size16,
+      paddingLeft: _paletteAllium.default.size.size16,
+      paddingRight: _paletteAllium.default.size.size16,
+      paddingTop: _paletteAllium.default.size.size16
+    }
+  }, {
+    if: {
+      padding: 'custom'
+    },
+    tokens: {
+      paddingBottom: _paletteAllium.default.size.size0,
+      paddingLeft: _paletteAllium.default.size.size0,
+      paddingRight: _paletteAllium.default.size.size0,
+      paddingTop: _paletteAllium.default.size.size0
+    }
+  }]
+};
+exports.default = _default;