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

package/lib/components/Skeleton.js

@@ -0,0 +1,26 @@
+"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 }; }
+
+const Skeleton = {
+  appearances: {},
+  tokens: {
+    color: _paletteAllium.default.color.greyCloud,
+    size: _paletteAllium.default.border.border3,
+    radius: _paletteAllium.default.size.size120,
+    baseWidth: _paletteAllium.default.size.size40,
+    characters: _paletteAllium.default.size.size10,
+    spaceBetweenLines: _paletteAllium.default.size.size2,
+    squareRadius: _paletteAllium.default.size.size4
+  },
+  rules: []
+};
+var _default = Skeleton;
+exports.default = _default;

package/lib/components/StackView.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This makes the React Native defaults explicit and allows them to be overridden with tokens
+var _default = {
+  appearances: {},
+  tokens: {
+    alignItems: _rn.default.flexAlign.stretch,
+    justifyContent: _rn.default.flexJustifyContent.flexStart,
+    flexGrow: _rn.default.integer[0]
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/Tags.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/TagsItem.js

@@ -0,0 +1,133 @@
+"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");
+
+var _addIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/add.icon.svg"));
+
+var _closeIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/close.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// console.log({ addIcon, closeIcon, size16: palette.size.size16 })
+var _default = {
+  appearances: {
+    hover: _schema.appearances.TagsItem.hover,
+    focus: _schema.appearances.TagsItem.focus,
+    pressed: _schema.appearances.TagsItem.pressed,
+    selected: _schema.appearances.TagsItem.selected,
+    inactive: _schema.appearances.TagsItem.inactive
+  },
+  tokens: {
+    // Icon tokens
+    iconSize: _paletteAllium.default.size.size16,
+    iconColor: _paletteAllium.default.color.greyThunder,
+    iconTranslateX: _rn.default.integer[0],
+    iconTranslateY: _rn.default.integer[0],
+    icon: _addIcon.default,
+    iconPosition: _rn.default.position.right,
+    iconSpace: _rn.default.integer[2],
+    iconBackground: _paletteAllium.default.color.greyAthens,
+    iconBorderRadius: _paletteAllium.default.radius.pill32,
+    iconAlignSelf: _rn.default.flexAlign.center,
+    iconPadding: _paletteAllium.default.size.size2,
+    // Button tokens, very similar to ButtonGroup
+    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.ratio10to7,
+    textAlign: _rn.default.flexJustifyContent.center,
+    alignSelf: _rn.default.flexAlign.center,
+    // 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.size8,
+    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: {
+      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,
+      icon: _closeIcon.default,
+      iconColor: _paletteAllium.default.color.white,
+      iconBackground: _paletteAllium.default.color.purpleDeluge
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.none,
+      backgroundColor: _paletteAllium.default.color.greyShuttle,
+      color: _paletteAllium.default.color.white,
+      iconColor: _paletteAllium.default.color.white,
+      iconBackground: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      focus: true,
+      pressed: true
+    },
+    tokens: {
+      borderWidth: _paletteAllium.default.border.none,
+      backgroundColor: _paletteAllium.default.color.purpleTelus,
+      color: _paletteAllium.default.color.white,
+      iconColor: _paletteAllium.default.color.white,
+      iconBackground: _paletteAllium.default.color.purpleDark
+    }
+  }, {
+    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/TextArea.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {},
+  tokens: {
+    minLines: _rn.default.integer[5],
+    maxLines: _rn.default.integer[8]
+  },
+  rules: []
+};
+exports.default = _default;

package/lib/components/TextInput.js

@@ -0,0 +1,97 @@
+"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");
+
+var _notificationErrorIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg"));
+
+var _notificationSuccessIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    validation: _schema.appearances.TextInput.validation,
+    hover: _schema.appearances.TextInput.hover,
+    focus: _schema.appearances.TextInput.focus,
+    inactive: _schema.appearances.TextInput.inactive
+  },
+  tokens: {
+    backgroundColor: _paletteAllium.default.color.white,
+    color: _paletteAllium.default.color.greyCharcoal,
+    borderWidth: _paletteAllium.default.border.border1,
+    borderColor: _paletteAllium.default.color.greyShuttle,
+    borderRadius: _paletteAllium.default.radius.radius4,
+    paddingTop: _paletteAllium.default.size.size12,
+    paddingBottom: _paletteAllium.default.size.size12,
+    paddingLeft: _paletteAllium.default.size.size16,
+    paddingRight: _paletteAllium.default.size.size16,
+    outerBackgroundColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border2,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderRadius: _paletteAllium.default.radius.radius4,
+    // TODO: replace this with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    icon: _rn.default.icon.none,
+    iconSize: _paletteAllium.default.fontSize.size24,
+    iconColor: _paletteAllium.default.color.transparent
+  },
+  rules: [{
+    if: {
+      hover: true,
+      inactive: null
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greyMystic,
+      outerBackgroundColor: _paletteAllium.default.color.greyMystic
+    }
+  }, {
+    if: {
+      validation: 'success'
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.greenAccessible,
+      icon: _notificationSuccessIcon.default,
+      iconColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      validation: 'error'
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.red,
+      icon: _notificationErrorIcon.default,
+      iconColor: _paletteAllium.default.color.red
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      borderColor: _paletteAllium.default.color.purpleDeluge,
+      borderWidth: _paletteAllium.default.border.border3,
+      icon: _rn.default.icon.none
+    }
+  }, {
+    if: {
+      inactive: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyAthens,
+      borderColor: _paletteAllium.default.color.greyAthens
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/ToggleSwitch.js

@@ -0,0 +1,144 @@
+"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");
+
+var _checkmarkIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    focus: _schema.appearances.ToggleSwitch.focus,
+    hover: _schema.appearances.ToggleSwitch.hover,
+    pressed: _schema.appearances.ToggleSwitch.pressed,
+    inactive: _schema.appearances.ToggleSwitch.inactive,
+    selected: _schema.appearances.ToggleSwitch.selected
+  },
+  tokens: {
+    borderColor: _paletteAllium.default.color.transparent,
+    borderWidth: _paletteAllium.default.border.none,
+    borderRadius: _paletteAllium.default.radius.pill32,
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.none,
+    outerBorderGap: _paletteAllium.default.size.size0,
+    outerBorderRadius: _paletteAllium.default.radius.pill32,
+    outerBackgroundColor: _paletteAllium.default.color.transparent,
+    backgroundColor: _paletteAllium.default.color.greyShuttle,
+    opacity: _rn.default.opacity.opaque,
+    paddingLeft: _rn.default.size.zero,
+    paddingRight: _rn.default.size.zero,
+    paddingTop: _rn.default.size.zero,
+    paddingBottom: _rn.default.size.zero,
+    shadow: _paletteAllium.default.shadow.surfaceInset,
+    alignSelf: 'flex-start',
+    icon: _rn.default.icon.none,
+    width: _paletteAllium.default.size.size40,
+    trackBorderWidth: _paletteAllium.default.border.border3,
+    trackBorderColor: _paletteAllium.default.color.transparent,
+    trackBorderRadius: _paletteAllium.default.radius.pill32,
+    iconSize: _paletteAllium.default.size.size12,
+    iconColor: _paletteAllium.default.color.greyShuttle,
+    switchSize: _paletteAllium.default.size.size16,
+    switchColor: _paletteAllium.default.color.white,
+    switchBorderColor: _paletteAllium.default.color.transparent,
+    switchBorderWidth: _paletteAllium.default.border.none,
+    switchBorderRadius: _paletteAllium.default.radius.pill32,
+    switchShadow: _paletteAllium.default.shadow.surfaceRaised
+  },
+  rules: [{
+    if: {
+      hover: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      outerBackgroundColor: _paletteAllium.default.color.white,
+      outerBorderGap: _paletteAllium.default.border.border3,
+      outerBorderWidth: _paletteAllium.default.border.border2,
+      outerBorderColor: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      focus: true,
+      pressed: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      selected: true
+    },
+    tokens: {
+      icon: _checkmarkIcon.default,
+      backgroundColor: _paletteAllium.default.color.greenAccessible,
+      iconColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      selected: true,
+      hover: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenSanFelix,
+      iconColor: _paletteAllium.default.color.greenSanFelix
+    }
+  }, {
+    if: {
+      selected: true,
+      pressed: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greenDarkFern,
+      iconColor: _paletteAllium.default.color.greenDarkFern
+    }
+  }, {
+    if: {
+      selected: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenAccessible
+    }
+  }, {
+    if: {
+      selected: true,
+      focus: true,
+      pressed: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greenDarkFern
+    }
+  }, {
+    if: {
+      inactive: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.greyCloud,
+      outerBorderColor: _paletteAllium.default.color.greyCloud,
+      iconColor: _paletteAllium.default.color.greyShuttle
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/Tooltip.js

@@ -0,0 +1,48 @@
+"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: {
+    inverse: {
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    backgroundColor: _paletteAllium.default.color.greyThunder,
+    paddingTop: _paletteAllium.default.size.size8,
+    paddingBottom: _paletteAllium.default.size.size8,
+    paddingLeft: _paletteAllium.default.size.size16,
+    paddingRight: _paletteAllium.default.size.size16,
+    borderRadius: _paletteAllium.default.radius.radius8,
+    shadow: _paletteAllium.default.shadow.elevation1,
+    color: _paletteAllium.default.color.white,
+    fontSize: _paletteAllium.default.fontSize.size14,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    arrowWidth: _paletteAllium.default.size.size16,
+    arrowBorderRadius: _paletteAllium.default.radius.radius1,
+    arrowOffset: _paletteAllium.default.size.size4
+  },
+  rules: [{
+    if: {
+      inverse: true
+    },
+    tokens: {
+      backgroundColor: _paletteAllium.default.color.white,
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/TooltipButton.js

@@ -0,0 +1,86 @@
+"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");
+
+var _questionIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/question.icon.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    focus: _schema.appearances.TooltipButton.focus,
+    hover: _schema.appearances.TooltipButton.hover,
+    pressed: _schema.appearances.TooltipButton.pressed,
+    inverse: {
+      values: [true],
+      type: 'variant'
+    }
+  },
+  tokens: {
+    outerBorderColor: _paletteAllium.default.color.transparent,
+    outerBorderWidth: _paletteAllium.default.border.border1,
+    outerBorderGap: _paletteAllium.default.size.size4,
+    outerBorderRadius: _paletteAllium.default.radius.pill32,
+    borderRadius: _paletteAllium.default.radius.pill32,
+    width: _paletteAllium.default.size.size16,
+    icon: _questionIcon.default,
+    iconScale: _rn.default.iconScale.scale1,
+    iconSize: _paletteAllium.default.size.size16,
+    iconColor: _paletteAllium.default.color.greyThunder
+  },
+  rules: [{
+    if: {
+      inverse: true
+    },
+    tokens: {
+      iconColor: _paletteAllium.default.color.white
+    }
+  }, {
+    if: {
+      hover: true
+    },
+    tokens: {
+      iconScale: _rn.default.iconScale.scale1_25
+    }
+  }, {
+    if: {
+      pressed: true
+    },
+    tokens: {
+      iconColor: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      inverse: true,
+      pressed: true
+    },
+    tokens: {
+      iconColor: _paletteAllium.default.color.greyCloud
+    }
+  }, {
+    if: {
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      inverse: true,
+      focus: true
+    },
+    tokens: {
+      outerBorderColor: _paletteAllium.default.color.greyCloud
+    }
+  }]
+};
+exports.default = _default;