@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/rn/TermsAndConditions.js

@@ -0,0 +1,82 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
+const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
+
+module.exports = {
+  appearances: {
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      type: 'state',
+      values: [ true, false ]
+    },
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        expandContentPaddingRight: 24,
+        listMarginLeft: 6,
+        titlePaddingLeft: 6
+      }
+    },
+    { if: { expanded: true }, tokens: { icon: PaletteIconCaretUp } }
+  ],
+  tokens: {
+    contentBorderColor: 'transparent',
+    contentMarginBottom: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 16,
+    dividerColor: '#b2b9bf',
+    expandBaseBorderWidth: 0,
+    expandContentPaddingBottom: 16,
+    expandContentPaddingLeft: 16,
+    expandContentPaddingRight: 16,
+    expandContentPaddingTop: 16,
+    expandIconContainerAlignItems: 'center',
+    expandIconContainerBorder: 0,
+    expandIconContainerBorderColor: 'rgba(0, 0, 0, 0)',
+    expandIconContainerHeight: 32,
+    expandIconContainerJustifyContent: 'center',
+    expandIconContainerMarginX: 0,
+    expandIconContainerMarginY: 12,
+    expandIconContainerWidth: 32,
+    expandTitleBorder: 0,
+    expandTitleBorderColor: 'rgba(0, 0, 0, 0)',
+    expandTitleColor: '#2c2e30',
+    expandTitleFontName: 'HelveticaNow',
+    expandTitleFontSize: 16,
+    expandTitleFontWeight: '500',
+    expandTitleLineHeight: 1.5,
+    expandTitleMarginX: 4,
+    expandTitleMarginY: 0,
+    expandTitlePaddingLeft: 0,
+    expandTitleUnderline: 'none',
+    icon: PaletteIconCaretDown,
+    listColor: '#414547',
+    listFontName: 'HelveticaNow',
+    listFontSize: 14,
+    listFontWeight: '400',
+    listLineHeight: 1.42857142857,
+    listMarginBottom: 16,
+    listMarginLeft: 32,
+    mdContentPaddingBottom: 16,
+    mdContentPaddingLeft: 48,
+    orderedPadding: 0,
+    titleColor: '#414547',
+    titleFontSize: 14,
+    titleLineHeight: 1.42857142857,
+    titlePaddingLeft: 32,
+    unorderedPadding: 12
+  }
+}

package/build/rn/Testimonial.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconQuoteLeft = require('@telus-uds/palette-allium/build/rn/icons/QuoteLeft')
+const PaletteIconQuoteLeftArrow = require('@telus-uds/palette-allium/build/rn/icons/QuoteLeftArrow')
+
+module.exports = {
+  appearances: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        testimonialFontNameHeading: 'HelveticaNow',
+        testimonialFontSizeHeading: 28,
+        testimonialFontWeightHeading: '400',
+        testimonialLineHeightHeading: 1.28571428571
+      }
+    }
+  ],
+  tokens: {
+    additionalFontName: 'HelveticaNow',
+    additionalFontSize: 14,
+    additionalFontWeight: '400',
+    additionalLineHeight: 1.42857142857,
+    authorFontName: 'HelveticaNow',
+    authorFontSize: 16,
+    authorFontWeight: '700',
+    authorLineHeight: 1.5,
+    dividerBackgroundColor: '#b2b9bf',
+    dividerBorder: 1,
+    figcaptionGap: 12,
+    icon: PaletteIconQuoteLeft,
+    iconColor: '#b2b9bf',
+    iconFr: PaletteIconQuoteLeftArrow,
+    imageSize: 48,
+    quoteContainerGap: 4,
+    testimonialContainerGap: 12,
+    testimonialFontNameHeading: 'HelveticaNow',
+    testimonialFontNameLarge: 'HelveticaNow',
+    testimonialFontSizeHeading: 24,
+    testimonialFontSizeLarge: 20,
+    testimonialFontWeightHeading: '400',
+    testimonialFontWeightLarge: '400',
+    testimonialLineHeightHeading: 1.33333333333,
+    testimonialLineHeightLarge: 1.6,
+    textColor: '#414547'
+  }
+}

package/build/rn/TextArea.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = { appearances: {}, rules: [], tokens: { maxLines: 8, minLines: 5 } }

package/build/rn/TextInput.js

@@ -0,0 +1,114 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconAmex = require('@telus-uds/palette-allium/build/rn/icons/Amex')
+const PaletteIconTimes = require('@telus-uds/palette-allium/build/rn/icons/Times')
+const PaletteIconCreditCard = require('@telus-uds/palette-allium/build/rn/icons/CreditCard')
+const PaletteIconMasterCard = require('@telus-uds/palette-allium/build/rn/icons/MasterCard')
+const PaletteIconInvisible = require('@telus-uds/palette-allium/build/rn/icons/Invisible')
+const PaletteIconVisible = require('@telus-uds/palette-allium/build/rn/icons/Visible')
+const PaletteIconVisa = require('@telus-uds/palette-allium/build/rn/icons/Visa')
+const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
+const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
+
+module.exports = {
+  appearances: {
+    focus: {
+      description: 'Focus states for some input elements are well supported across web, RN, ios and android',
+      type: 'state',
+      values: [ true ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    inactive: {
+      description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+      type: 'state',
+      values: [ true ]
+    },
+    numeric: {
+      description: 'capability to only allow numbers',
+      type: 'variant',
+      values: [ true ]
+    },
+    password: {
+      description: 'capability that helps masking and unmasking text',
+      type: 'variant',
+      values: [ true ]
+    },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: { outerBackgroundColor: '#e3e6e8', outerBorderColor: '#e3e6e8' }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        borderColor: '#2b8000',
+        icon: PaletteIconStatusSuccess,
+        iconColor: '#2b8000'
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        borderColor: '#e12339',
+        icon: PaletteIconStatusError,
+        iconColor: '#e12339'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#7c53a5', borderWidth: 3, icon: null }
+    },
+    {
+      if: { inactive: true },
+      tokens: { backgroundColor: '#f4f4f7', borderColor: '#f4f4f7' }
+    }
+  ],
+  tokens: {
+    amexIcon: PaletteIconAmex,
+    backgroundColor: '#ffffff',
+    borderColor: '#676e73',
+    borderRadius: 4,
+    borderWidth: 1,
+    buttonSize: 32,
+    buttonsGap: 1,
+    buttonsPaddingRight: 8,
+    clearButtonIcon: PaletteIconTimes,
+    color: '#414547',
+    defaultCreditIcon: PaletteIconCreditCard,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    icon: null,
+    iconColor: 'rgba(0, 0, 0, 0)',
+    iconSize: 24,
+    leftIconPaddingBottom: 8,
+    lineHeight: 1.5,
+    masterCardIcon: PaletteIconMasterCard,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderWidth: 2,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    passwordHideButtonIcon: PaletteIconInvisible,
+    passwordShowButtonIcon: PaletteIconVisible,
+    visaIcon: PaletteIconVisa
+  }
+}

package/build/rn/Timeline.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    horizontal: {
+      description: 'Use horizontal to display timeline horizontally.',
+      type: 'variant',
+      values: [ true ]
+    },
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { horizontal: true, viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        connectorHeight: 1,
+        connectorWidth: '100%',
+        itemContentMarginBottom: 0,
+        itemContentMarginRight: 32,
+        lineItemContainerDirection: 'column',
+        lineItemDirection: 'row',
+        lineItemMarginBottom: 24,
+        lineItemMarginRight: 0,
+        timelineContainerDirection: 'row'
+      }
+    }
+  ],
+  tokens: {
+    connectorHeight: '100%',
+    connectorWidth: 1,
+    dotBorderWidth: 1,
+    dotColor: '#ffffff',
+    dotWidth: 14,
+    itemContentFlexSize: 1,
+    itemContentMarginBottom: 32,
+    itemContentMarginRight: 0,
+    lineContainerFlexSize: 1,
+    lineItemAlign: 'center',
+    lineItemContainerDirection: 'row',
+    lineItemDirection: 'column',
+    lineItemMarginBottom: 0,
+    lineItemMarginRight: 24,
+    timelineColor: '#676e73',
+    timelineConnectorColor: '#676e73',
+    timelineContainerDirection: 'column'
+  }
+}

package/build/rn/Toast.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'xs' ] },
+      tokens: { animationPaddingBottomAfter: 8, animationPaddingTopAfter: 8 }
+    }
+  ],
+  tokens: {
+    animationBackgroundColorAfter: '#f4f4f7',
+    animationBackgroundColorBefore: '#4b286d',
+    animationColorAfter: '#414547',
+    animationColorBefore: '#ffffff',
+    animationDivColorAfter: '#2b8000',
+    animationDivColorBefore: '#ffffff',
+    animationHeightAfter: 24,
+    animationHeightBefore: 0,
+    animationPaddingBottomAfter: 16,
+    animationPaddingBottomBefore: 0,
+    animationPaddingTopAfter: 16,
+    animationPaddingTopBefore: 0,
+    chevronlinkFontName: 'HelveticaNow',
+    chevronlinkFontWeight: '400',
+    containerBackgroundColor: '#4b286d',
+    containerGap: 10,
+    padding: 16
+  }
+}

package/build/rn/ToggleSwitch.js

@@ -0,0 +1,146 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
+
+module.exports = {
+  appearances: {
+    focus: {
+      description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+      platforms: [ 'rn' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    inactive: {
+      description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+      type: 'state',
+      values: [ true ]
+    },
+    pressed: {
+      description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+      type: 'state',
+      values: [ true, false ]
+    },
+    selected: {
+      description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+      type: 'state',
+      values: [ true ]
+    }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#414547' } },
+    { if: { pressed: true }, tokens: { backgroundColor: '#2c2e30' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 3,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        outerBorderColor: '#2c2e30',
+        outerBorderGap: 3,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#2b8000',
+        icon: PaletteIconCheckmark,
+        iconColor: '#2b8000'
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#1f5c09', iconColor: '#1f5c09' }
+    },
+    {
+      if: { pressed: true, selected: true },
+      tokens: { backgroundColor: '#163e06', iconColor: '#163e06' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: { outerBorderColor: '#676e73', outerBorderWidth: 2 }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { outerBorderColor: '#163e06', outerBorderWidth: 2 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#b2b9bf',
+        iconColor: '#b2b9bf',
+        labelColor: '#b2b9bf',
+        outerBorderColor: '#b2b9bf'
+      }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#676e73',
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    borderWidth: 0,
+    icon: null,
+    iconColor: '#676e73',
+    iconSize: 14,
+    labelColor: '#414547',
+    labelFontName: 'HelveticaNow',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderGapButton: 3,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    shadow: {
+      blur: 2,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: true,
+      offsetX: 0,
+      offsetY: 2,
+      spread: 0
+    },
+    space: 2,
+    switchBorderColor: 'rgba(0, 0, 0, 0)',
+    switchBorderRadius: 32,
+    switchBorderWidth: 0,
+    switchColor: '#ffffff',
+    switchShadow: {
+      blur: 2,
+      color: 'rgba(0, 0, 0, 0.2)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 2,
+      spread: 0
+    },
+    switchSize: 18,
+    trackBorderColor: 'rgba(0, 0, 0, 0)',
+    trackBorderRadius: 32,
+    trackBorderWidth: 3,
+    trackHeight: 24,
+    width: 40
+  }
+}

package/build/rn/ToggleSwitchGroup.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    }
+  },
+  rules: [ { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
+  tokens: {
+    alignItems: 'flex-start',
+    direction: 'column',
+    fieldSpace: 2,
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    space: 1
+  }
+}

package/build/rn/Tooltip.js

@@ -0,0 +1,42 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: { backgroundColor: '#ffffff', color: '#414547' }
+    }
+  ],
+  tokens: {
+    arrowBorderRadius: 1,
+    arrowOffset: 4,
+    arrowWidth: 16,
+    backgroundColor: '#2c2e30',
+    borderRadius: 8,
+    color: '#ffffff',
+    fontName: 'HelveticaNow',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: {
+      blur: 8,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 4,
+      spread: 0
+    }
+  }
+}

package/build/rn/TooltipButton.js

@@ -0,0 +1,57 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconQuestion = require('@telus-uds/palette-allium/build/rn/icons/Question')
+
+module.exports = {
+  appearances: {
+    focus: {
+      description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+      platforms: [ 'rn' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    hover: {
+      description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+      platforms: [ 'rn' ],
+      type: 'state',
+      values: [ true, false ]
+    },
+    inverse: { type: 'variant', values: [ true ] },
+    pressed: {
+      description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+      type: 'state',
+      values: [ true, false ]
+    }
+  },
+  rules: [
+    { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
+    { if: { hover: true }, tokens: { iconScale: 1.25 } },
+    { if: { pressed: true }, tokens: { iconColor: '#676e73' } },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { iconColor: '#b2b9bf' }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#676e73' } },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#b2b9bf' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    icon: PaletteIconQuestion,
+    iconColor: '#2c2e30',
+    iconScale: 1,
+    iconSize: 16,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 4,
+    outerBorderWidth: 1,
+    width: 16
+  }
+}