@telus-uds/theme-public-mobile 2.11.0 → 2.13.0

package/build/rn/Breadcrumbs.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+const PaletteIconChevronRight = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronRight')
+
+module.exports = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        color: '#f9f2dd',
+        currentColor: '#f5f5f7',
+        iconColor: '#9c9faa'
+      }
+    }
+  ],
+  tokens: {
+    color: '#636c8c',
+    currentColor: '#394056',
+    fontName: 'SofiaPro',
+    fontSize: 16,
+    fontWeight: '400',
+    icon: PaletteIconChevronRight,
+    iconColor: '#9c9faa',
+    iconPadding: 4,
+    iconSize: 24,
+    listItemPadding: 0
+  }
+}

package/build/rn/Button.js

@@ -0,0 +1,369 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    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.',
+      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 ]
+    },
+    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 ]
+    },
+    inverse: {
+      description: 'Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in 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 ]
+    },
+    priority: {
+      description: 'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
+      type: 'variant',
+      values: [ 'high', 'low' ]
+    },
+    size: { type: 'variant', values: [ 'small' ] },
+    text: {
+      description: 'Text variant visually deprioritize the button styles',
+      type: 'variant',
+      values: [ true ]
+    },
+    width: {
+      description: 'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
+      type: 'variant',
+      values: [ 'full' ]
+    }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#2b3145' } },
+    {
+      if: { priority: 'high' },
+      tokens: {
+        backgroundColor: '#f39d80',
+        borderColor: '#636c8c',
+        color: '#394056'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#636c8c',
+        color: '#fefefc'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: { outerBorderColor: '#f39d80', outerBorderWidth: 4 }
+    },
+    {
+      if: { inverse: true },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0
+      }
+    },
+    {
+      if: { hover: true, priority: 'high' },
+      tokens: {
+        backgroundColor: '#f6b5a0',
+        borderColor: '#636c8c',
+        color: '#394056'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#f39d80',
+        color: '#fefefc',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    {
+      if: { inverse: true, priority: 'high' },
+      tokens: {
+        backgroundColor: '#f9f2dd',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0
+      }
+    },
+    {
+      if: { hover: true, inverse: true, priority: 'high' },
+      tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#fdfcf6',
+        borderColor: '#394056',
+        color: '#394056'
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: '#394056',
+        color: '#394056',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    {
+      if: { danger: true },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: '#bf1722',
+        color: '#bf1722'
+      }
+    },
+    {
+      if: { danger: true, hover: true },
+      tokens: {
+        backgroundColor: '#f9e8e9',
+        borderColor: '#bf1722',
+        color: '#bf1722'
+      }
+    },
+    {
+      if: { danger: true, priority: null },
+      tokens: { borderColor: '#bf1722', color: '#bf1722' }
+    },
+    {
+      if: { danger: true, inverse: true, priority: null },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: '#bf1722',
+        color: '#bf1722'
+      }
+    },
+    {
+      if: { danger: true, focus: true, priority: null },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: '#bf1722',
+        color: '#bf1722',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    {
+      if: { danger: true, pressed: true, priority: null },
+      tokens: {
+        backgroundColor: '#bf1722',
+        borderColor: '#bf1722',
+        color: '#fefefc'
+      }
+    },
+    {
+      if: { danger: true, focus: true, pressed: true, priority: null },
+      tokens: {
+        backgroundColor: '#bf1722',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#fefefc',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    { if: { width: 'full' }, tokens: { width: '100%' } },
+    {
+      if: { size: 'small' },
+      tokens: { paddingBottom: 4, paddingTop: 4 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#9c9faa',
+        borderColor: '#f5f5f7',
+        color: '#cdcfd5'
+      }
+    },
+    {
+      if: { inactive: true, inverse: true },
+      tokens: {
+        backgroundColor: '#f5f5f7',
+        borderColor: '#9c9faa',
+        color: '#cdcfd5'
+      }
+    },
+    {
+      if: { text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        color: '#636c8c',
+        minWidth: 0,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        paddingLeft: 4,
+        paddingRight: 4,
+        textLine: 'underline'
+      }
+    },
+    { if: { hover: true, text: true }, tokens: { textLine: 'none' } },
+    {
+      if: { priority: 'high', text: true },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { priority: 'low', text: true },
+      tokens: { color: '#394056' }
+    },
+    {
+      if: { focus: true, text: true },
+      tokens: {
+        color: '#636c8c',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { hover: true, priority: 'high', text: true },
+      tokens: { color: '#394056' }
+    },
+    {
+      if: { hover: true, priority: null, text: true },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { hover: true, priority: 'low', text: true },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { danger: true, hover: true, text: true },
+      tokens: { color: '#394056' }
+    },
+    { if: { pressed: true, text: true }, tokens: { color: '#2b3145' } },
+    {
+      if: { focus: true, pressed: true, text: true },
+      tokens: {
+        color: '#2b3145',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    {
+      if: { inactive: true, text: true },
+      tokens: { color: '#cdcfd5' }
+    },
+    { if: { inverse: true, text: true }, tokens: { color: '#f9f2dd' } },
+    {
+      if: { focus: true, inverse: true, text: true },
+      tokens: {
+        color: '#f9f2dd',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 4
+      }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true, text: true },
+      tokens: {
+        color: '#f9f2dd',
+        outerBorderColor: '#f9f2dd',
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { inactive: true, inverse: true, text: true },
+      tokens: { color: '#cdcfd5' }
+    },
+    {
+      if: { pressed: true, priority: 'high' },
+      tokens: {
+        backgroundColor: '#fce6df',
+        borderColor: '#636c8c',
+        color: '#394056'
+      }
+    },
+    {
+      if: { focus: true, priority: 'high' },
+      tokens: { outerBorderColor: '#f9cebf', outerBorderWidth: 4 }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { backgroundColor: '#fcf8ee', borderColor: '#fcf8ee' }
+    },
+    {
+      if: { danger: true, inverse: true },
+      tokens: {
+        backgroundColor: '#fefefc',
+        borderColor: '#bf1722',
+        borderWidth: 1,
+        color: '#bf1722'
+      }
+    },
+    {
+      if: { inactive: true, inverse: true, priority: 'high' },
+      tokens: {
+        backgroundColor: '#f9f2dd',
+        borderColor: '#f9f2dd',
+        color: '#394056'
+      }
+    },
+    {
+      if: { size: 'small', text: true },
+      tokens: { fontSize: 16, lineHeight: 1.5 }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#394056',
+    borderBottomWidth: 1,
+    borderColor: '#394056',
+    borderLeftWidth: 1,
+    borderRadius: 8,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    borderWidth: 1,
+    color: '#f39d80',
+    fontName: 'SofiaPro',
+    fontSize: 18,
+    fontWeight: '400',
+    height: null,
+    icon: null,
+    iconSize: 24,
+    iconSpace: 2,
+    lineHeight: 1.55555555,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: '#ffffff',
+    outerBorderGap: 0,
+    outerBorderWidth: 2,
+    paddingBottom: 10,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 10,
+    shadow: null,
+    textAlign: 'center',
+    textLine: 'none',
+    textLineStyle: 'solid',
+    width: null
+  }
+}

package/build/rn/ButtonDropdown.js

@@ -0,0 +1,153 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+const PaletteIconChevronDown = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronDown')
+const PaletteIconChevronUp = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronUp')
+
+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 ]
+    },
+    open: {
+      description: 'Applies when a ButtonDropdown is open.',
+      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: { open: true }, tokens: { icon: PaletteIconChevronUp } },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#d8dae2',
+        borderColor: '#636c8c',
+        color: '#394056',
+        iconColor: '#394056',
+        outerBorderColor: '#f9cebf',
+        outerBorderGap: 0,
+        outerBorderWidth: 3
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        color: '#ffffff',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#2b3145',
+        borderColor: '#636c8c',
+        color: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: '#f9cebf',
+        outerBorderGap: 0,
+        outerBorderWidth: 3
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#f5f5f7',
+        borderColor: '#9c9faa',
+        borderWidth: 1,
+        color: '#cdcfd5',
+        iconColor: '#cdcfd5'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#394056',
+        color: '#ffffff',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#636c8c', iconColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#394056',
+        borderColor: '#636c8c',
+        color: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: '#f9cebf',
+        outerBorderGap: 0,
+        outerBorderWidth: 3
+      }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#d8dae2',
+    borderColor: '#636c8c',
+    borderRadius: 8,
+    borderWidth: 1,
+    color: '#394056',
+    dividerColor: '#f9cebf',
+    fontName: 'SofiaPro',
+    fontSize: 18,
+    fontWeight: '400',
+    icon: PaletteIconChevronDown,
+    iconAlignSelf: 'center',
+    iconBackground: 'rgba(0, 0, 0, 0)',
+    iconBorderRadius: 999,
+    iconColor: '#394056',
+    iconPadding: 4,
+    iconPosition: 'right',
+    iconSize: 20,
+    iconSpace: 0,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    lineHeight: 1,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderWidth: 1,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: null,
+    subtitleColor: '#f9cebf',
+    textAlign: 'center',
+    width: null
+  }
+}

package/build/rn/ButtonGroup.js

@@ -0,0 +1,39 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 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' ]
+    },
+    width: {
+      description: 'Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.',
+      type: 'variant',
+      values: [ 'responsive' ]
+    }
+  },
+  rules: [
+    { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } },
+    {
+      if: { viewport: [ 'xs' ], width: 'responsive' },
+      tokens: { alignItems: 'stretch', direction: 'column' }
+    }
+  ],
+  tokens: {
+    alignItems: 'center',
+    direction: 'row',
+    fieldSpace: 2,
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    space: 1
+  }
+}