@telus-uds/theme-allium 4.20.0 → 4.22.0

package/build/rn/CarouselThumbnail.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * 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 ]
+    },
+    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: { alignItems: 'flex-start', size: 48 }
+    },
+    { if: { hover: true }, tokens: { borderColor: '#2b8000' } },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#2b8000', borderWidth: 2 }
+    },
+    {
+      if: { pressed: true },
+      tokens: { borderColor: '#1f5c09', borderWidth: 2 }
+    }
+  ],
+  tokens: {
+    alignItems: 'center',
+    borderColor: '#e3e6e8',
+    borderRadius: 4,
+    borderWidth: 1,
+    containerPaddingTop: 24,
+    margin: 4,
+    padding: 8,
+    selectedBorderColor: '#676e73',
+    selectedBorderWidth: 2,
+    size: 72
+  }
+}

package/build/rn/Checkbox.js

@@ -0,0 +1,92 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
+
+module.exports = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', values: [ true ] },
+    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 ]
+    }
+  },
+  rules: [
+    { if: { error: true }, tokens: { inputBorderColor: '#e12339' } },
+    {
+      if: { focus: true },
+      tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        iconBackgroundColor: '#e3e6e8',
+        iconColor: '#676e73',
+        inputBackgroundColor: '#e3e6e8',
+        inputBorderColor: 'rgba(0, 0, 0, 0)',
+        labelColor: '#676e73'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
+    },
+    {
+      if: { checked: true, focus: true },
+      tokens: {
+        inputBorderColor: '#ffffff',
+        inputBorderWidth: 2,
+        inputOutlineColor: '#7c53a5',
+        inputOutlineWidth: 3
+      }
+    }
+  ],
+  tokens: {
+    containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    feedbackMarginBottom: 0,
+    feedbackMarginTop: 2,
+    feedbackPosition: 'bottom',
+    icon: PaletteIconCheckmark,
+    iconBackgroundColor: '#7c53a5',
+    iconColor: '#ffffff',
+    iconSize: 16,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#676e73',
+    inputBorderRadius: 4,
+    inputBorderWidth: 1,
+    inputHeight: 20,
+    inputOutlineColor: null,
+    inputOutlineOffset: 0,
+    inputOutlineWidth: 0,
+    inputShadow: null,
+    inputWidth: 20,
+    labelColor: '#414547',
+    labelFontName: 'HelveticaNow',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 10
+  }
+}

package/build/rn/CheckboxCard.js

@@ -0,0 +1,159 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', values: [ true ] },
+    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 ]
+    },
+    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: {
+        fontSize: 24,
+        lineHeight: 1.33333333333,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 24,
+        paddingTop: 16
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#676e73',
+        checkboxOuterBorderColor: '#e3e6e8',
+        checkboxOuterBorderWidth: 2,
+        outerBorderColor: '#e3e6e8'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        checkboxInputBorderColor: '#7c53a5',
+        checkboxInputBorderWidth: 3,
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2
+      }
+    },
+    {
+      description: 'Pressed state matches hover state plus light grey background',
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#676e73',
+        checkboxInputBorderColor: '#676e73',
+        checkboxInputBorderWidth: 1,
+        checkboxOuterBorderColor: '#e3e6e8',
+        checkboxOuterBorderWidth: 3,
+        outerBorderColor: '#e3e6e8',
+        outerBorderGap: 0
+      }
+    },
+    { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+    {
+      if: { checked: true, hover: true },
+      tokens: { borderColor: '#4b286d' }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '#e12339',
+        checkboxInputBorderColor: '#e12339',
+        color: '#e12339'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        checkboxCheckedBackgroundColor: '#676e73',
+        checkboxInputBackgroundColor: '#b2b9bf',
+        checkboxInputBorderColor: 'transparent',
+        checkboxInputSize: 12,
+        checkboxOuterBorderColor: '#b2b9bf',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        color: '#676e73'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#b2b9bf',
+    borderRadius: 6,
+    borderWidth: 1,
+    checkboxCheckedBackgroundColor: '#7c53a5',
+    checkboxCheckedSize: 12,
+    checkboxInputBackgroundColor: '#ffffff',
+    checkboxInputBorderColor: '#676e73',
+    checkboxInputBorderWidth: 1,
+    checkboxInputOutlineColor: 'rgba(0, 0, 0, 0)',
+    checkboxInputOutlineWidth: 0,
+    checkboxInputSize: 20,
+    checkboxOuterBorderColor: 'transparent',
+    checkboxOuterBorderGap: 0,
+    checkboxOuterBorderWidth: 0,
+    checkboxSpace: 2,
+    color: '#2c2e30',
+    contentAlignItems: 'stretch',
+    contentFlexGrow: 0,
+    contentFlexShrink: 1,
+    contentJustifyContent: 'flex-start',
+    contentSpace: 2,
+    flex: 1,
+    fontName: 'HelveticaNow',
+    fontSize: 20,
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 1.4,
+    minWidth: 264,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 2,
+    paddingBottom: 16,
+    paddingLeft: 10,
+    paddingRight: 16,
+    paddingTop: 16,
+    shadow: null,
+    textTransform: 'none'
+  }
+}

package/build/rn/CheckboxCardGroup.js

@@ -0,0 +1,45 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    fullWidth: {
+      description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+      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: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: { direction: 'row', space: 5 }
+    },
+    {
+      if: { fullWidth: true },
+      tokens: { direction: 'column', fieldSpace: 3, space: 3 }
+    }
+  ],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    direction: 'column',
+    fieldSpace: 3,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 3
+  }
+}

package/build/rn/CheckboxGroup.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    fieldSpace: 2,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 2
+  }
+}

package/build/rn/ChevronLink.js

@@ -0,0 +1,100 @@
+/*
+ *
+ * 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: {
+    alternative: { type: 'variant', values: [ true ] },
+    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 ]
+    },
+    size: {
+      description: 'Sets the size of the text and icon; these variants are shared with ChevronLink',
+      type: 'variant',
+      values: [ 'large', 'small', 'micro' ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { color: '#1f5c09', iconDisplace: 4 }
+    },
+    { if: { pressed: true }, tokens: { color: '#163e06' } },
+    { if: { alternative: true }, tokens: { color: '#414547' } },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#2c2e30' }
+    },
+    {
+      if: { alternative: true, pressed: true },
+      tokens: { color: '#2c2e30' }
+    },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#f4f4f7' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { color: '#e3e6e8' }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { blockLineHeight: 1.6, fontSize: 20, iconSize: 20 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { blockLineHeight: 1.42857142857, fontSize: 14, iconSize: 16 }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: { blockLineHeight: 1.33333333333, fontSize: 12, iconSize: 16 }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#2b8000' } },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { outerBorderColor: '#163e06' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#414547', outerBorderColor: '#414547' }
+    }
+  ],
+  tokens: {
+    blockLineHeight: 1.5,
+    color: '#2b8000',
+    fontSize: 16,
+    iconDisplace: 0,
+    iconSize: 16,
+    iconSpace: 1,
+    leftIcon: PaletteIconArrowLeft,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    rightIcon: PaletteIconArrowRight,
+    textLine: 'none'
+  }
+}

package/build/rn/ColourToggle.js

@@ -0,0 +1,93 @@
+/*
+ *
+ * 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: {
+        bubbleBorderColor: '#b2b9bf',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        bubbleBorderColor: '#676e73',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        bubbleBorderColor: '#e3e6e8',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        bubbleBorderColor: '#4b286d',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    }
+  ],
+  tokens: {
+    borderColor: '#e3e6e8',
+    borderRadius: 45,
+    borderWidth: 1,
+    bubbleBorderColor: 'rgba(0, 0, 0, 0)',
+    bubbleBorderRadius: 0,
+    bubbleBorderWidth: 0,
+    innerBubbleBorderRadius: 45,
+    innerBubbleHeight: 40,
+    innerBubbleWidth: 40,
+    outerBubbleContentAlignItems: 'center',
+    outerBubbleHeight: 48,
+    outerBubbleJustifyContent: 'center',
+    outerBubbleWidth: 48,
+    shadow: {
+      blur: 2,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: true,
+      offsetX: 0,
+      offsetY: 2,
+      spread: 0
+    },
+    space: 2
+  }
+}

package/build/rn/Countdown.js

@@ -0,0 +1,90 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    feature: { type: 'variant', values: [ true ] },
+    inverse: { type: 'variant', values: [ true ] },
+    label: { type: 'variant', values: [ true ] },
+    large: { 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: { viewport: [ 'xs' ] },
+      tokens: {
+        containerPaddingBottomTop: 16,
+        containerPaddingLeftRight: 24,
+        labelFontSize: 14,
+        labelLineHeight: 1.42857142857,
+        textLineHeight: 1.42857142857
+      }
+    },
+    {
+      if: { large: true },
+      tokens: {
+        textFontSize: 64,
+        textLineHeight: 1.125,
+        textTimerFontName: 'HelveticaNow',
+        textTimerFontWeight: '300'
+      }
+    },
+    {
+      if: { feature: true },
+      tokens: {
+        labelBorderColor: '#4b286d',
+        textFontSize: 64,
+        textLineHeight: 1.125,
+        textTimerFontName: 'HelveticaNow',
+        textTimerFontWeight: '300'
+      }
+    },
+    {
+      if: { large: true, viewport: [ 'xs' ] },
+      tokens: { textFontSize: 40 }
+    },
+    {
+      if: { feature: true, viewport: [ 'xs' ] },
+      tokens: { textFontSize: 40 }
+    },
+    { if: { inverse: true }, tokens: { labelBorderColor: '#ffffff' } },
+    {
+      if: { feature: true, inverse: true },
+      tokens: { containerBorderColor: '#676e73', labelBorderColor: '#ffffff' }
+    }
+  ],
+  tokens: {
+    containerBorderColor: 'rgba(0, 0, 0, 0)',
+    containerBorderRadius: 6,
+    containerBorderWidth: 2,
+    containerGradient: {
+      angle: 135,
+      stops: [ { color: '#4b286d', stop: 0 }, { color: '#e53293', stop: 1 } ],
+      type: 'linear'
+    },
+    containerInverseBorder: 2,
+    containerInverseBorderColor: '#ffffff',
+    containerPaddingBottomTop: 48,
+    containerPaddingLeftRight: 64,
+    inverseBorderColor: '#676e73',
+    labelBorderColor: '#414547',
+    labelFontName: 'HelveticaNow',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    textFontSize: 16,
+    textLineHeight: 1.5,
+    textTimerFontName: 'HelveticaNow',
+    textTimerFontWeight: '400'
+  }
+}