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

package/lib/components/spacingScale.js

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

@@ -1,30 +0,0 @@
-"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/src/components/ActivityIndicator.js

@@ -1,25 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-
-export default {
-  appearances: {
-    size: {
-      values: ['large'],
-      description: 'used for full-screen spinners',
-      type: 'variant'
-    }
-  },
-  tokens: {
-    size: palette.size.size20,
-    thickness: palette.border.border2,
-    color: palette.color.greenAccessible
-  },
-  rules: [
-    {
-      if: { size: 'large' },
-      tokens: {
-        thickness: palette.border.border4,
-        size: palette.size.size40
-      }
-    }
-  ]
-}

package/src/components/Box.js

@@ -1,35 +0,0 @@
-import palette from '@telus-uds/palette-allium'
-import system from '@telus-uds/system-themes/src/tokens/rn'
-
-export default {
-  appearances: {
-    background: {
-      description: 'Background colour of box. Transparent if not specified.',
-      values: [
-        'light',
-        'lightest',
-        'dark',
-        'darkest',
-        'critical',
-        'danger',
-        'warning',
-        'positive',
-        'brand'
-      ]
-    }
-  },
-  tokens: {
-    backgroundColor: system.color.none
-  },
-  rules: [
-    { 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 } }
-  ]
-}

package/src/components/Button.js

@@ -1,174 +0,0 @@
-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'
-
-export 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: appearances.Button.hover,
-    focus: appearances.Button.focus,
-    pressed: appearances.Button.pressed,
-    inactive: appearances.Button.inactive
-  },
-  tokens: {
-    borderColor: palette.color.greenAccessible,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    shadow: system.shadow.none,
-
-    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: 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: 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: palette.border.border3 } },
-
-    {
-      if: { priority: 'high' },
-      tokens: {
-        backgroundColor: palette.color.greenAccessible,
-        color: palette.color.white,
-        borderWidth: palette.border.none
-      }
-    },
-    {
-      if: { priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.color.greenSanFelix }
-    },
-
-    // pressed and focus apply the same tokens to both high and low priority
-    {
-      if: { pressed: true },
-      tokens: {
-        borderWidth: system.size.zero,
-        backgroundColor: palette.color.greenDarkFern,
-        color: palette.color.white
-      }
-    },
-    { if: { focus: true }, tokens: { outerBorderColor: palette.color.greenAccessible } },
-    {
-      if: { focus: true, pressed: true },
-      tokens: { outerBorderColor: palette.color.greenDarkFern }
-    },
-
-    {
-      if: { inverse: true },
-      tokens: {
-        backgroundColor: system.color.none,
-        borderColor: palette.color.white,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inverse: true, priority: 'high' },
-      tokens: { backgroundColor: palette.color.white, color: palette.color.greyCharcoal }
-    },
-    {
-      if: { inverse: true, priority: 'high', hover: true },
-      tokens: { backgroundColor: palette.color.light80 }
-    },
-    {
-      if: { inverse: true, pressed: true },
-      tokens: {
-        color: palette.color.greyCharcoal,
-        backgroundColor: palette.color.light60
-      }
-    },
-    { if: { inverse: true, focus: true }, tokens: { outerBorderColor: palette.color.white } },
-
-    {
-      if: { danger: true, priority: null },
-      tokens: { color: palette.color.red, borderColor: palette.color.red }
-    },
-    {
-      if: { danger: true, priority: null, inverse: true },
-      tokens: { backgroundColor: palette.color.white }
-    },
-    {
-      if: { danger: true, priority: null, focus: true },
-      tokens: { outerBorderColor: palette.color.red }
-    },
-    {
-      if: { danger: true, priority: null, pressed: true },
-      tokens: { backgroundColor: palette.color.redDark, color: palette.color.white }
-    },
-    {
-      if: { danger: true, priority: null, pressed: true, focus: true },
-      tokens: { outerBorderColor: palette.color.redDark }
-    },
-
-    { if: { width: 'full' }, tokens: { width: system.size.full } },
-    {
-      if: { size: 'small' },
-      tokens: {
-        paddingTop: palette.size.size4,
-        paddingBottom: palette.size.size4,
-        minWidth: system.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: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: system.size.zero
-      }
-    },
-    {
-      if: { inactive: true, inverse: true },
-      tokens: { backgroundColor: palette.color.light60, color: palette.color.greyCharcoal }
-    }
-  ]
-}

package/src/components/ButtonGroup.js

@@ -1,16 +0,0 @@
-import system from '@telus-uds/system-themes/src/tokens/rn'
-import { appearances } from '@telus-uds/system-themes/schema'
-
-export default {
-  appearances: {
-    viewport: appearances.system.viewport
-  },
-  tokens: {
-    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: { space: system.integer[3] } }]
-}

package/src/components/ButtonGroupItem.js

@@ -1,88 +0,0 @@
-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'
-
-export default {
-  appearances: {
-    hover: appearances.ButtonGroupItem.hover,
-    focus: appearances.ButtonGroupItem.focus,
-    pressed: appearances.ButtonGroupItem.pressed,
-    selected: appearances.ButtonGroupItem.selected,
-    inactive: appearances.ButtonGroupItem.inactive
-  },
-  tokens: {
-    borderColor: palette.color.greyCloud,
-    borderWidth: palette.border.border1,
-    borderRadius: palette.radius.pill32,
-    shadow: system.shadow.none,
-
-    fontSize: palette.fontSize.size14,
-    color: palette.color.greyShuttle,
-    lineHeight: palette.lineHeight.ratio3to2,
-    textAlign: system.flexJustifyContent.center,
-    alignSelf: system.flexAlign.flexStart,
-    // TODO: replace with font token
-    fontName: Object.keys(palette.font)[0],
-    fontWeight: '700',
-    // font: palette.font.HelveticaNow['700'],
-
-    backgroundColor: palette.color.white,
-    opacity: system.opacity.opaque,
-    paddingLeft: palette.size.size16,
-    paddingRight: palette.size.size16,
-    paddingTop: palette.size.size8,
-    paddingBottom: palette.size.size8,
-    width: system.size.none,
-    minWidth: system.size.zero,
-
-    outerBorderColor: palette.color.transparent,
-    outerBorderWidth: palette.border.border2,
-    outerBorderGap: palette.border.border2,
-    outerBorderRadius: palette.radius.pill32,
-    outerBackgroundColor: palette.color.transparent
-  },
-  rules: [
-    {
-      if: { pressed: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        borderColor: palette.color.purpleTelus,
-        borderWidth: palette.border.border3,
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.transparent
-      }
-    },
-    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
-    {
-      if: { selected: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { focus: true, pressed: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        backgroundColor: palette.color.greyCloud,
-        color: palette.color.white,
-        borderWidth: system.border.zero
-      }
-    }
-  ]
-}

package/src/components/Card.js

@@ -1,99 +0,0 @@
-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'
-
-export default {
-  appearances: {
-    background: {
-      values: ['alternative'],
-      type: 'variant'
-    },
-    padding: {
-      values: ['narrow', 'intermediate', 'compact', 'custom'],
-      type: 'variant'
-    },
-    viewport: appearances.system.viewport
-  },
-  tokens: {
-    backgroundColor: palette.color.white,
-    borderColor: palette.color.greyMystic,
-    borderRadius: palette.radius.radius6,
-    borderWidth: palette.border.border1,
-    paddingBottom: palette.size.size32,
-    paddingLeft: palette.size.size24,
-    paddingRight: palette.size.size24,
-    paddingTop: palette.size.size32,
-    shadow: system.shadow.none
-  },
-  rules: [
-    {
-      if: { background: 'alternative' },
-      tokens: {
-        backgroundColor: palette.color.greyAthens
-      }
-    },
-    {
-      if: { viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size48,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size48
-      }
-    },
-    {
-      if: { padding: 'narrow' },
-      tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size24
-      }
-    },
-    {
-      if: { padding: 'narrow', viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size32
-      }
-    },
-    {
-      if: { padding: 'intermediate' },
-      tokens: {
-        paddingBottom: palette.size.size24,
-        paddingLeft: palette.size.size24,
-        paddingRight: palette.size.size24,
-        paddingTop: palette.size.size24
-      }
-    },
-    {
-      if: { padding: 'intermediate', viewport: ['md', 'lg', 'xl'] },
-      tokens: {
-        paddingBottom: palette.size.size32,
-        paddingLeft: palette.size.size32,
-        paddingRight: palette.size.size32,
-        paddingTop: palette.size.size32
-      }
-    },
-    {
-      if: { padding: 'compact' },
-      tokens: {
-        paddingBottom: palette.size.size16,
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size16
-      }
-    },
-    {
-      if: { padding: 'custom' },
-      tokens: {
-        paddingBottom: palette.size.size0,
-        paddingLeft: palette.size.size0,
-        paddingRight: palette.size.size0,
-        paddingTop: palette.size.size0
-      }
-    }
-  ]
-}

package/src/components/Checkbox.js

@@ -1,65 +0,0 @@
-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'
-import checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
-
-export default {
-  appearances: {
-    checked: appearances.Checkbox.checked,
-    error: appearances.Checkbox.error,
-    focus: appearances.Checkbox.focus,
-    hover: appearances.Checkbox.hover,
-    inactive: appearances.Checkbox.inactive
-  },
-  tokens: {
-    containerBackgroundColor: palette.color.transparent,
-    containerMarginBottom: palette.size.size8,
-    feedbackMarginBottom: system.size.zero,
-    feedbackMarginTop: palette.size.size2,
-    feedbackPosition: system.position.bottom,
-    icon: checkmarkIcon,
-    iconBackgroundColor: palette.color.purpleDeluge,
-    iconColor: palette.color.white,
-    iconSize: palette.size.size16,
-    inputBackgroundColor: palette.color.white,
-    inputBorderColor: palette.color.greyShuttle,
-    inputBorderRadius: palette.radius.radius4,
-    inputBorderWidth: palette.border.border1,
-    inputHeight: palette.size.size20,
-    inputOutlineColor: system.color.none,
-    inputOutlineWidth: palette.border.none,
-    inputShadow: system.shadow.none,
-    inputWidth: palette.size.size20,
-    labelColor: palette.color.greyCharcoal,
-    labelFontName: Object.keys(palette.font)[0],
-    labelFontSize: palette.fontSize.size16,
-    labelFontWeight: '400',
-    labelLineHeight: palette.lineHeight.ratio3to2,
-    labelMarginLeft: palette.size.size10
-  },
-  rules: [
-    {
-      if: { error: true },
-      tokens: {
-        inputBorderColor: palette.color.red
-      }
-    },
-    {
-      if: { focus: true },
-      tokens: {
-        inputBorderColor: palette.color.purpleDeluge,
-        inputBorderWidth: palette.border.border3
-      }
-    },
-    {
-      if: { inactive: true },
-      tokens: {
-        inputBorderColor: palette.color.transparent,
-        inputBackgroundColor: palette.color.greyMystic,
-        iconBackgroundColor: palette.color.greyMystic,
-        iconColor: palette.color.greyShuttle,
-        labelColor: palette.color.greyShuttle
-      }
-    }
-  ]
-}