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

package/lib/components/ActivityIndicator.js

@@ -1,35 +0,0 @@
-"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

@@ -1,89 +0,0 @@
-"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

@@ -1,252 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-"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

@@ -1,108 +0,0 @@
-"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

@@ -1,120 +0,0 @@
-"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;