@telus-uds/theme-public-mobile 2.12.0 → 2.14.0

package/build/rn/CheckboxCardGroup.js

@@ -0,0 +1,45 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 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: 6 }
+    },
+    {
+      if: { fullWidth: true },
+      tokens: { direction: 'column', fieldSpace: 4, space: 4 }
+    }
+  ],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    direction: 'column',
+    fieldSpace: 4,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 4
+  }
+}

package/build/rn/CheckboxGroup.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 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,115 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+const PaletteIconChevronLeft = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronLeft')
+const PaletteIconChevronRight = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronRight')
+
+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: '#394056', iconDisplace: 4 }
+    },
+    { if: { pressed: true }, tokens: { color: '#2b3145' } },
+    {
+      if: { focus: true },
+      tokens: { color: '#636c8c', outerBorderColor: '#636c8c' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#394056', outerBorderColor: '#394056' }
+    },
+    { if: { alternative: true }, tokens: { color: '#394056' } },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { alternative: true, pressed: true },
+      tokens: { color: '#2b3145' }
+    },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#394056', outerBorderColor: '#394056' }
+    },
+    {
+      if: { alternative: true, focus: true, pressed: true },
+      tokens: { color: '#2b3145', outerBorderColor: '#2b3145' }
+    },
+    { if: { inverse: true }, tokens: { color: '#f9f2dd' } },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#f9cebf' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { color: '#f39d80' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { color: '#f9f2dd', outerBorderColor: '#f9f2dd' }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { color: '#f39d80', outerBorderColor: '#f39d80' }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { blockLineHeight: 1.4, fontSize: 20, iconSize: 20 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { blockLineHeight: 1.5, fontSize: 16, iconSize: 16 }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: {
+        blockLineHeight: 1.4285714285714286,
+        fontSize: 14,
+        iconSize: 16
+      }
+    }
+  ],
+  tokens: {
+    blockLineHeight: 1.55555555,
+    color: '#636c8c',
+    fontSize: 18,
+    iconDisplace: 0,
+    iconSize: 16,
+    iconSpace: 1,
+    leftIcon: PaletteIconChevronLeft,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    rightIcon: PaletteIconChevronRight,
+    textLine: 'none'
+  }
+}

package/build/rn/ColourToggle.js

@@ -0,0 +1,93 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 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: '#cdcfd5',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        bubbleBorderColor: '#6a7080',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        bubbleBorderColor: '#2b3145',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        bubbleBorderColor: '#394056',
+        bubbleBorderRadius: 45,
+        bubbleBorderWidth: 1
+      }
+    }
+  ],
+  tokens: {
+    borderColor: '#9c9faa',
+    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,79 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 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.4285714285714286,
+        textLineHeight: 1.28571428571
+      }
+    },
+    {
+      if: { feature: true },
+      tokens: {
+        containerBorderColor: '#f39d80',
+        labelLineHeight: 1.55555555,
+        textFontSize: 72,
+        textLineHeight: 1.2,
+        textTimerFontName: 'SofiaPro',
+        textTimerFontWeight: '700'
+      }
+    },
+    {
+      if: { large: true },
+      tokens: {
+        labelLineHeight: 1.55555555,
+        textFontSize: 72,
+        textLineHeight: 1.2,
+        textTimerFontName: 'SofiaPro',
+        textTimerFontWeight: '700'
+      }
+    },
+    {
+      if: { inverse: true },
+      tokens: { containerBorderColor: '#ffffff', labelBorderColor: '#ffffff' }
+    }
+  ],
+  tokens: {
+    containerBorderColor: 'rgba(0, 0, 0, 0)',
+    containerBorderRadius: 6,
+    containerBorderWidth: 2,
+    containerGradient: null,
+    containerInverseBorder: 2,
+    containerInverseBorderColor: '#ffffff',
+    containerPaddingBottomTop: 48,
+    containerPaddingLeftRight: 64,
+    inverseBorderColor: 'rgba(0, 0, 0, 0)',
+    labelBorderColor: '#394056',
+    labelFontName: 'SofiaPro',
+    labelFontSize: 18,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    textFontSize: 18,
+    textLineHeight: 1.5,
+    textTimerFontName: 'SofiaPro',
+    textTimerFontWeight: '400'
+  }
+}

package/build/rn/DatePicker.js

@@ -0,0 +1,66 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+const PaletteIconMobileArrowRight = require('@telus-uds/palette-public-mobile/build/rn/icons/MobileArrowRight')
+const PaletteIconMobileArrowBack = require('@telus-uds/palette-public-mobile/build/rn/icons/MobileArrowBack')
+
+module.exports = {
+  appearances: { inline: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inline: true },
+      tokens: { calendarBackgroundColor: '#ffffff' }
+    }
+  ],
+  tokens: {
+    calendarBackgroundColor: '#f9f2dd',
+    calendarDayBlockedCalendarHoverBackground: '#cdcfd5',
+    calendarDayBlockedCalendarHoverColor: '#9c9faa',
+    calendarDayDefaultBackgroundColor: '#f9f2dd',
+    calendarDayDefaultBorder: 1,
+    calendarDayDefaultBorderColor: '#cdcfd5',
+    calendarDayDefaultCalendarDaySelectedHoverBackground: '#f39d80',
+    calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#f39d80',
+    calendarDayDefaultCalendarDaySelectedHoverColor: '#394056',
+    calendarDayDefaultColor: '#394056',
+    calendarDayDefaultFontName: 'SofiaPro',
+    calendarDayDefaultFontSize: 18,
+    calendarDayDefaultFontWeight: '700',
+    calendarDaySelectedDisabledBackground: '#cdcfd5',
+    calendarDaySelectedDisabledColor: '#cdcfd5',
+    calendarDaySelectedDisabledContentBackgroundColor: '#9c9faa',
+    calendarDaySelectedFocusBeforeBackground: '#f39d80',
+    calendarDaySelectedHoverBackground: '#f9f2dd',
+    calendarDaySelectedHoverBeforeBackground: '#f9f2dd',
+    calendarDaySelectedHoverBeforeBorderColor: '#f39d80',
+    calendarDaySelectedHoverBorderColor: '#cdcfd5',
+    calendarDaySelectedHoverColor: '#394056',
+    calendarMonthCaptionColor: '#2b3145',
+    calendarMonthCaptionFontName: 'SofiaPro',
+    calendarMonthCaptionFontSize: 20,
+    calendarMonthCaptionFontWeight: '700',
+    calendarMonthCaptionLineHeight: 1.2,
+    calendarMonthCaptionPaddingBottom: 46,
+    dateInputStrokeColor: '#cdcfd5',
+    dayPickerNavigationButtonPadding: 12,
+    dayPickerWeekHeaderColor: '#394056',
+    dayPickerWeekHeaderFontName: 'SofiaPro',
+    dayPickerWeekHeaderFontWeight: '700',
+    dayPickerWeekHeaderLineHeight: 1.5,
+    dayPickerWeekHeaderSmall: 16,
+    hiddenInputFieldContainerHeight: 0,
+    hiddenInputFieldContainerWidth: 0,
+    invalidInputMixin: null,
+    nextIcon: PaletteIconMobileArrowRight,
+    previousIcon: PaletteIconMobileArrowBack,
+    singleDatePickerBorderColor: '#cdcfd5',
+    singleDatePickerLeftRight: 16,
+    singleDatePickerPaddingTopBottom: 8,
+    singleDatePickerRadius: 8,
+    validInputMixin: null
+  }
+}

package/build/rn/Disclaimer.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    color: '#394056',
+    fontName: 'SofiaPro',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.4285714285714286
+  }
+}

package/build/rn/Divider.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    decorative: {
+      description: 'Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.',
+      type: 'variant',
+      values: [ true ]
+    },
+    inverse: { type: 'variant', values: [ true ] },
+    weight: { type: 'variant', values: [ 'thick' ] }
+  },
+  rules: [
+    { if: { weight: 'thick' }, tokens: { width: 2 } },
+    { if: { decorative: true }, tokens: { color: '#cdcfd5' } },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } }
+  ],
+  tokens: { color: '#9c9faa', width: 1 }
+}

package/build/rn/ExpandCollapse.js

@@ -0,0 +1,18 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderStyle: 'solid',
+    borderWidth: 0
+  }
+}

package/build/rn/ExpandCollapseControl.js

@@ -0,0 +1,125 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:03 GMT
+ *
+ */
+
+const PaletteIconAddCircle = require('@telus-uds/palette-public-mobile/build/rn/icons/AddCircle')
+const PaletteIconDeduct = require('@telus-uds/palette-public-mobile/build/rn/icons/Deduct')
+
+module.exports = {
+  appearances: {
+    compact: { type: 'variant', values: [ true ] },
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      type: 'state',
+      values: [ true, false ]
+    },
+    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 ]
+    },
+    mini: { 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: { compact: true },
+      tokens: {
+        paddingBottom: 8,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8
+      }
+    },
+    { if: { expanded: true }, tokens: { icon: PaletteIconDeduct } },
+    {
+      if: { mini: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#394056',
+        borderWidth: 3,
+        textLine: 'underline'
+      }
+    },
+    {
+      if: { expanded: false, hover: true },
+      tokens: {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4,
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      }
+    },
+    {
+      if: { expanded: true, hover: true },
+      tokens: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      }
+    },
+    {
+      if: { hover: true, mini: null },
+      tokens: { backgroundColor: '#f9f2dd' }
+    },
+    {
+      if: { hover: true, mini: true },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#cdcfd5', textLine: 'underline' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { backgroundColor: '#394056' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderWidth: 3,
+    icon: PaletteIconAddCircle,
+    iconColor: '#394056',
+    iconGap: 16,
+    iconPaddingTop: 0,
+    iconPosition: 'left',
+    iconSize: 24,
+    justifyContent: 'flex-start',
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 12,
+    textLine: 'none',
+    verticalAlign: 'middle'
+  }
+}

package/build/rn/ExpandCollapseMini.js

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