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

package/lib/components/Skeleton.js

@@ -1,26 +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 }; }
-
-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

@@ -1,22 +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"));
-
-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

@@ -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/TagsItem.js

@@ -1,133 +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");
-
-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

@@ -1,20 +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"));
-
-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

@@ -1,97 +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");
-
-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

@@ -1,144 +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");
-
-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

@@ -1,48 +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: {
-    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

@@ -1,86 +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");
-
-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;