@telus-uds/theme-allium 4.21.0 → 4.22.0

package/build/rn/Pagination.js

@@ -0,0 +1,44 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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: [ 'md', 'lg', 'xl' ] },
+      tokens: { truncateAbove: 6 }
+    }
+  ],
+  tokens: {
+    borderBottomWidth: 0,
+    borderColor: '#676e73',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    color: '#676e73',
+    ellipsisBorderBottomWidth: 0,
+    ellipsisBorderLeftWidth: 0,
+    ellipsisBorderRightWidth: 0,
+    ellipsisBorderTopWidth: 0,
+    ellipsisHeight: null,
+    ellipsisPadding: 0,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    gap: 2,
+    lineHeight: 1.5,
+    truncateAbove: 4
+  }
+}

package/build/rn/PaginationPageButton.js

@@ -0,0 +1,88 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+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 ]
+    },
+    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: { borderColor: '#676e73', textLine: 'none' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderColor: '#676e73',
+        borderLeftWidth: 3,
+        borderRightWidth: 3,
+        borderTopWidth: 3
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#676e73',
+        color: '#ffffff',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderLeftWidth: 1,
+    borderRadius: 32,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    color: '#676e73',
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    height: 32,
+    lineHeight: 1.5,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 4,
+    outerBorderWidth: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    textAlign: 'center',
+    textLine: 'underline',
+    width: 32
+  }
+}

package/build/rn/PaginationSideButton.js

@@ -0,0 +1,125 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
+const PaletteIconArrowRight = require('@telus-uds/palette-allium/build/rn/icons/ArrowRight')
+
+module.exports = {
+  appearances: {
+    compact: {
+      description: 'Determines if the "Next" and "Previous" labels should be omitted',
+      type: 'state',
+      values: [ true ]
+    },
+    direction: {
+      description: "Determines which way does the button navigate in Pagination's context",
+      type: 'state',
+      values: [ 'previous', 'next' ]
+    },
+    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 ]
+    },
+    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 ]
+    },
+    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: { compact: true }, tokens: { displayLabel: false } },
+    {
+      if: { viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        borderRadius: 32,
+        displayLabel: false,
+        paddingBottom: 4,
+        paddingTop: 4,
+        width: 32
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        iconDisplace: 4,
+        outerBorderColor: '#676e73',
+        outerBorderWidth: 1,
+        textLine: 'none'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#676e73', outerBorderWidth: 3 }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#676e73',
+        color: '#ffffff',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+    },
+    {
+      if: { direction: 'previous' },
+      tokens: { icon: PaletteIconArrowLeft }
+    },
+    {
+      if: { direction: 'next' },
+      tokens: { icon: PaletteIconArrowRight }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomWidth: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderLeftWidth: 0,
+    borderRadius: 4,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    color: '#676e73',
+    displayLabel: true,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    height: null,
+    icon: null,
+    iconDisplace: 0,
+    iconSize: 24,
+    lineHeight: 1.5,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderWidth: 1,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    textAlign: 'center',
+    textLine: 'none',
+    width: null
+  }
+}

package/build/rn/PreviewCard.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+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 ]
+    },
+    pressed: {
+      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 ]
+    }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { borderWidth: 2 } },
+    { if: { pressed: true }, tokens: { backgroundColor: '#f4f4f7' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e3e6e8',
+    borderRadius: 6,
+    borderWidth: 1,
+    flex: 1,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    separatorColor: '#b2b9bf'
+  }
+}

package/build/rn/PriceLockup.js

@@ -0,0 +1,104 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    size: { type: 'variant', values: [ 'small', 'medium', 'large' ] },
+    strikeThrough: { 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: { size: 'small' },
+      tokens: {
+        amountFontSize: 28,
+        bottomTextFontSize: 14,
+        bottomTextLineHeight: 1.42857142857,
+        centsFontSize: 16,
+        centsLineHeight: 1.33333333333,
+        currencySymbolFontSize: 16,
+        currencySymbolLineHeight: 1.25,
+        rateFontSize: 14,
+        rateLineHeight: 1.14285714286,
+        strikeThroughPosition: 15,
+        topTextFontSize: 14,
+        topTextLineHeight: 1.42857142857
+      }
+    },
+    {
+      if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        amountFontSize: 64,
+        bottomTextFontSize: 20,
+        bottomTextLineHeight: 1.6,
+        centsFontSize: 36,
+        centsLineHeight: 1.125,
+        currencySymbolFontSize: 36,
+        currencySymbolLineHeight: 1.125,
+        rateFontSize: 20,
+        rateLineHeight: 1.6,
+        strikeThroughHeight: 3,
+        strikeThroughPosition: 35,
+        topTextFontSize: 20,
+        topTextLineHeight: 1.6
+      }
+    },
+    {
+      if: { strikeThrough: true },
+      tokens: { fontColor: '#676e73', footnoteLinkColor: '#676e73' }
+    }
+  ],
+  tokens: {
+    amountFontName: 'HelveticaNow',
+    amountFontSize: 40,
+    amountFontWeight: '300',
+    amountLetterSpacing: -0.039,
+    amountLineHeight: 1,
+    bottomLinksMarginLeft: 4,
+    bottomTextFontSize: 16,
+    bottomTextLineHeight: 1.6,
+    bottomTextMarginTop: 4,
+    centsFontName: 'HelveticaNow',
+    centsFontSize: 20,
+    centsFontWeight: '400',
+    centsLineHeight: 1.2,
+    currencySymbolFontName: 'HelveticaNow',
+    currencySymbolFontSize: 20,
+    currencySymbolFontWeight: '400',
+    currencySymbolLineHeight: 1.2,
+    dividerColor: '#b2b9bf',
+    fontColor: '#414547',
+    fontName: 'HelveticaNow',
+    fontWeight: '700',
+    footnoteGap: 4,
+    footnoteLinkColor: '#414547',
+    footnoteLinkFontName: 'HelveticaNow',
+    footnoteLinkFontSize: 14,
+    footnoteLinkFontWeight: '400',
+    footnoteLinkLineHeight: 1.42857142857,
+    footnoteMarginTop: 4,
+    priceMarginBottom: 8,
+    rateFontName: 'HelveticaNow',
+    rateFontSize: 16,
+    rateFontWeight: '400',
+    rateLineHeight: 1.25,
+    strikeThroughColor: '#676e73',
+    strikeThroughHeight: 2,
+    strikeThroughPosition: 22,
+    topTextFontName: 'HelveticaNow',
+    topTextFontSize: 16,
+    topTextFontWeight: '700',
+    topTextLineHeight: 1.5,
+    topTextMarginBottom: 4
+  }
+}

package/build/rn/Progress.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { size: { type: 'variant', values: [ 'mini' ] } },
+  rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
+  tokens: {
+    backgroundColor: '#f4f4f7',
+    borderColor: '#b2b9bf',
+    borderRadius: 12,
+    borderWidth: 1,
+    height: 16
+  }
+}

package/build/rn/ProgressBar.js

@@ -0,0 +1,48 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    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 ]
+    },
+    negative: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#b2b9bf',
+        gradient: null,
+        outlineColor: '#2c2e30'
+      }
+    },
+    {
+      if: { negative: true },
+      tokens: {
+        backgroundColor: '#c12335',
+        gradient: null,
+        outlineColor: '#c12335'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#2b8000',
+    borderRadius: 12,
+    gradient: {
+      angle: 135,
+      stops: [ { color: '#00784a', stop: 0 }, { color: '#66cc00', stop: 1 } ],
+      type: 'linear'
+    },
+    outlineColor: '#2b8000',
+    outlineWidth: 1
+  }
+}

package/build/rn/QuantitySelector.js

@@ -0,0 +1,54 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    alternative: { type: 'variant', values: [ true ] },
+    disabled: { type: 'variant', values: [ true ] },
+    focus: { type: 'variant', values: [ true ] },
+    hover: { type: 'variant', values: [ true ] },
+    pressed: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { alternative: true },
+      tokens: { paddingBottom: 8, paddingTop: 8 }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputBackgroundColor: '#f4f4f7' }
+    },
+    {
+      if: { disabled: true },
+      tokens: { inputBackgroundColor: '#fafafa', textColor: '#b2b9bf' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { inputBackgroundColor: '#b2b9bf' }
+    },
+    {
+      if: { focus: true },
+      tokens: { inputBorderColor: '#676e73', inputBorderWidth: 3 }
+    }
+  ],
+  tokens: {
+    fontSize: 16,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#676e73',
+    inputBorderWidth: 1,
+    inputWidth: 64,
+    lineHeight: 1.5,
+    padding: 12,
+    paddingBottom: 12,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 12,
+    textColor: '#414547'
+  }
+}

package/build/rn/QuantitySelectorSideButton.js

@@ -0,0 +1,102 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+const PaletteIconSubtract = require('@telus-uds/palette-allium/build/rn/icons/Subtract')
+const PaletteIconAdd = require('@telus-uds/palette-allium/build/rn/icons/Add')
+
+module.exports = {
+  appearances: {
+    alternative: { type: 'variant', values: [ true, false ] },
+    decrease: { type: 'variant', values: [ true ] },
+    disabled: { type: 'variant', values: [ true ] },
+    focus: { type: 'variant', values: [ true ] },
+    hover: { type: 'variant', values: [ true ] },
+    increase: { type: 'variant', values: [ true ] },
+    pressed: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#f4f4f7' } },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#b2b9bf', iconColor: '#676e73' }
+    },
+    {
+      if: { decrease: true },
+      tokens: {
+        borderBottomLeftRadius: 4,
+        borderRightWidth: 0,
+        borderTopLeftRadius: 4,
+        icon: PaletteIconSubtract
+      }
+    },
+    {
+      if: { increase: true },
+      tokens: {
+        borderBottomRightRadius: 4,
+        borderLeftWidth: 0,
+        borderTopRightRadius: 4,
+        icon: PaletteIconAdd
+      }
+    },
+    {
+      if: { focus: true, increase: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderLeftWidth: 2,
+        borderRightWidth: 3,
+        borderTopWidth: 3
+      }
+    },
+    {
+      if: { decrease: true, focus: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderLeftWidth: 3,
+        borderRightWidth: 2,
+        borderTopWidth: 3
+      }
+    },
+    {
+      if: { disabled: true },
+      tokens: { backgroundColor: '#fafafa', iconColor: '#e3e6e8' }
+    },
+    {
+      if: { alternative: true },
+      tokens: { paddingBottom: 12, paddingTop: 12 }
+    },
+    {
+      if: { alternative: true, increase: true },
+      tokens: { borderBottomRightRadius: 24, borderTopRightRadius: 24 }
+    },
+    {
+      if: { alternative: true, decrease: true },
+      tokens: { borderBottomLeftRadius: 24, borderTopLeftRadius: 24 }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomWidth: 1,
+    borderColor: '#676e73',
+    borderLeftWidth: 1,
+    borderRadius: 0,
+    borderRightWidth: 1,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderTopWidth: 1,
+    borderWidth: 1,
+    icon: null,
+    iconColor: '#414547',
+    iconSize: 16,
+    padding: 16,
+    paddingBottom: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16
+  }
+}

package/build/rn/QuickLinks.js

@@ -0,0 +1,32 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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: [ 'md', 'lg', 'xl' ] },
+      tokens: { card: false, dividers: true, list: false }
+    }
+  ],
+  tokens: {
+    card: true,
+    dividers: true,
+    list: true,
+    stackGap: 2,
+    stackJustify: 'center',
+    stackSpace: 4
+  }
+}