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

package/build/rn/IconButton.js

@@ -0,0 +1,316 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+const PaletteIconAdd = require('@telus-uds/palette-public-mobile/build/rn/icons/Add')
+const PaletteIconSubtract = require('@telus-uds/palette-public-mobile/build/rn/icons/Subtract')
+const PaletteIconClose = require('@telus-uds/palette-public-mobile/build/rn/icons/Close')
+const PaletteIconExpand = require('@telus-uds/palette-public-mobile/build/rn/icons/Expand')
+const PaletteIconChevronDown = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronDown')
+const PaletteIconChevronLeft = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronLeft')
+const PaletteIconChevronRight = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronRight')
+const PaletteIconChevronUp = require('@telus-uds/palette-public-mobile/build/rn/icons/ChevronUp')
+const PaletteIconPlayVideo = require('@telus-uds/palette-public-mobile/build/rn/icons/PlayVideo')
+
+module.exports = {
+  appearances: {
+    action: {
+      type: 'variant',
+      values: [
+        'add',      'close',
+        'expand',   'moveDown',
+        'moveLeft', 'moveRight',
+        'moveUp',   'play',
+        'subtract'
+      ]
+    },
+    compact: {
+      description: 'Without the outer border gap',
+      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: 'For use on dark backgrounds',
+      type: 'variant',
+      values: [ true ]
+    },
+    password: {
+      description: 'password mask and unmask',
+      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 ]
+    },
+    raised: {
+      description: 'Uses shadow and background colour to appear raised above the page',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: { type: 'variant', values: [ 'small', 'large' ] }
+  },
+  rules: [
+    { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+    {
+      if: { action: 'subtract' },
+      tokens: { icon: PaletteIconSubtract }
+    },
+    { if: { action: 'close' }, tokens: { icon: PaletteIconClose } },
+    { if: { action: 'expand' }, tokens: { icon: PaletteIconExpand } },
+    {
+      if: { action: 'moveDown' },
+      tokens: { icon: PaletteIconChevronDown }
+    },
+    {
+      if: { action: 'moveLeft' },
+      tokens: { icon: PaletteIconChevronLeft }
+    },
+    {
+      if: { action: 'moveRight' },
+      tokens: { icon: PaletteIconChevronRight }
+    },
+    {
+      if: { action: 'moveUp' },
+      tokens: { icon: PaletteIconChevronUp }
+    },
+    {
+      if: { action: 'play' },
+      tokens: { icon: PaletteIconPlayVideo }
+    },
+    { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+    {
+      if: { action: 'subtract' },
+      tokens: { icon: PaletteIconSubtract }
+    },
+    { if: { action: 'close' }, tokens: { icon: PaletteIconClose } },
+    { if: { action: 'expand' }, tokens: { icon: PaletteIconExpand } },
+    {
+      if: { action: 'moveDown' },
+      tokens: { icon: PaletteIconChevronDown }
+    },
+    {
+      if: { action: 'moveLeft' },
+      tokens: { icon: PaletteIconChevronLeft }
+    },
+    {
+      if: { action: 'moveRight' },
+      tokens: { icon: PaletteIconChevronRight }
+    },
+    {
+      if: { action: 'moveUp' },
+      tokens: { icon: PaletteIconChevronUp }
+    },
+    {
+      if: { action: 'play' },
+      tokens: { icon: PaletteIconPlayVideo }
+    },
+    {
+      if: { inverse: true },
+      tokens: { borderColor: '#f9f2dd', iconColor: '#f9f2dd' }
+    },
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#394056', iconColor: '#394056', iconScale: 1.1 }
+    },
+    { if: { hover: true, inactive: true }, tokens: { iconScale: 1 } },
+    {
+      if: { hover: true, password: true },
+      tokens: {
+        backgroundColor: '#394056',
+        borderColor: '#394056',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { password: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { borderColor: '#f9cebf', iconColor: '#f9cebf' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#636c8c',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderColor: '#f9f2dd',
+        iconColor: '#f9f2dd',
+        outerBorderColor: '#f9f2dd',
+        outerBorderWidth: 3
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: '#636c8c',
+        outerBorderGap: 4
+      }
+    },
+    {
+      if: { password: true, pressed: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#636c8c',
+        borderWidth: 1,
+        iconColor: '#ffffff',
+        outerBorderGap: 0,
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { inactive: true, password: true, pressed: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        outerBorderGap: 0,
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { focus: true, password: true, pressed: false },
+      tokens: {
+        outerBorderColor: '#636c8c',
+        outerBorderGap: 0,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#f39d80',
+        borderColor: '#394056',
+        iconColor: '#394056',
+        outerBorderColor: '#f39d80',
+        outerBorderWidth: 3
+      }
+    },
+    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 12 } },
+    { if: { size: 'small' }, tokens: { padding: 4 } },
+    {
+      description: 'Raised IconButtons follow different design patterns to other variants',
+      if: { raised: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#636c8c',
+        borderWidth: 3,
+        outerBorderColor: 'transparent',
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        padding: 8,
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    { if: { raised: true, size: 'large' }, tokens: { padding: 12 } },
+    { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+    {
+      if: { pressed: true, raised: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#636c8c',
+        borderWidth: 0,
+        iconColor: '#ffffff',
+        outerBorderColor: '#636c8c'
+      }
+    },
+    {
+      if: { inactive: true, password: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        iconColor: '#9c9faa',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { focus: true, pressed: true, raised: true },
+      tokens: {
+        backgroundColor: '#636c8c',
+        borderColor: '#636c8c',
+        borderWidth: 0,
+        iconColor: '#ffffff',
+        outerBorderColor: '#636c8c'
+      }
+    },
+    {
+      if: { hover: true, pressed: false, raised: true },
+      tokens: { borderColor: '#394056', borderWidth: 3 }
+    },
+    {
+      if: { focus: true, pressed: false, raised: true },
+      tokens: { borderColor: '#636c8c', borderWidth: 4, iconColor: '#636c8c' }
+    },
+    { if: { compact: true }, tokens: { outerBorderGap: 0 } },
+    {
+      if: { hover: true, password: true },
+      tokens: { iconColor: '#9c9faa', outerBorderWidth: 0 }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'transparent',
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    borderBottomWidth: 1,
+    borderColor: '#636c8c',
+    borderLeftWidth: 1,
+    borderRadius: 99999999999999,
+    borderRightWidth: 1,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderTopWidth: 1,
+    borderWidth: 2,
+    height: null,
+    icon: PaletteIconAdd,
+    iconColor: '#636c8c',
+    iconScale: 1,
+    iconSize: 16,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    padding: 4,
+    shadow: null,
+    width: null
+  }
+}

package/build/rn/Image.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = { appearances: {}, rules: [], tokens: { borderRadius: 4 } }

package/build/rn/InputLabel.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    color: '#394056',
+    fontName: 'SofiaPro',
+    fontSize: 18,
+    fontWeight: '400',
+    gap: 8,
+    hintColor: '#394056',
+    hintFontName: 'SofiaPro',
+    hintFontSize: 14,
+    hintFontWeight: '400',
+    hintLineHeight: 1.4285714285714286,
+    lineHeight: 1.55555555
+  }
+}

package/build/rn/InputSupports.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+module.exports = { appearances: {}, rules: [], tokens: { space: 1 } }

package/build/rn/Link.js

@@ -0,0 +1,179 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+
+
+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 ]
+    },
+    iconPosition: {
+      description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
+      type: 'state',
+      values: [ 'left', 'right' ]
+    },
+    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 ]
+    },
+    quiet: {
+      description: 'When it is true, it does not show the decoration',
+      type: 'state',
+      values: [ true, false ]
+    },
+    size: {
+      description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
+      type: 'variant',
+      values: [ 'micro', 'small', 'large' ]
+    }
+  },
+  rules: [
+    { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+    {
+      if: { focus: true },
+      tokens: {
+        color: '#636c8c',
+        outerBorderColor: '#636c8c',
+        outerBorderOutline: 'none'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: { color: '#394056', textLine: 'none' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { color: '#2b3145', textLine: 'none' }
+    },
+    { if: { alternative: true }, tokens: { color: '#394056' } },
+    {
+      if: { alternative: true, hover: true },
+      tokens: { color: '#2b3145' }
+    },
+    {
+      if: { alternative: true, pressed: true },
+      tokens: { color: '#2b3145', outerBorderWidth: 0 }
+    },
+    {
+      if: { alternative: true, focus: true, pressed: true },
+      tokens: { color: '#2b3145' }
+    },
+    {
+      if: { alternative: true, focus: true },
+      tokens: { color: '#394056', outerBorderColor: '#394056' }
+    },
+    {
+      if: { alternative: true, focus: false, pressed: true },
+      tokens: { color: '#2b3145' }
+    },
+    {
+      if: { alternative: true, focus: true, hover: true, pressed: true },
+      tokens: { color: '#2b3145', outerBorderColor: '#2b3145' }
+    },
+    {
+      if: { alternative: true, focus: false, hover: true, pressed: false },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { alternative: true, focus: true, pressed: true },
+      tokens: { color: '#636c8c' }
+    },
+    {
+      if: { alternative: true, focus: true },
+      tokens: {
+        color: '#636c8c',
+        outerBorderColor: '#636c8c',
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { alternative: true, pressed: true },
+      tokens: { color: '#2b3145' }
+    },
+    { if: { inverse: true }, tokens: { color: '#f9f2dd' } },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { color: '#f9f2dd', outerBorderColor: '#f9f2dd' }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { color: '#f39d80', outerBorderColor: '#f39d80' }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#f9cebf' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { color: '#f39d80' }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: {
+        blockFontName: 'SofiaPro',
+        blockFontSize: 14,
+        blockFontWeight: '400',
+        blockLineHeight: 1.4285714285714286,
+        iconSize: 16
+      }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { blockFontSize: 16, blockLineHeight: 1.5, iconSize: 20 }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { blockFontSize: 20, blockLineHeight: 1.4, iconSize: 24 }
+    },
+    { if: { quiet: true }, tokens: { textLine: 'none' } },
+    {
+      if: { hover: true, quiet: true },
+      tokens: { color: '#394056', textLine: 'underline' }
+    },
+    {
+      if: { alternative: true, hover: true, quiet: true },
+      tokens: { color: '#2b3145', textLine: 'underline' }
+    },
+    {
+      if: { hover: true, inverse: true, quiet: true },
+      tokens: { color: '#f9cebf', textLine: 'underline' }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    blockFontName: 'SofiaPro',
+    blockFontSize: 18,
+    blockFontWeight: '400',
+    blockLineHeight: 1.55555555,
+    borderRadius: 4,
+    color: '#636c8c',
+    icon: null,
+    iconSize: 24,
+    iconSpace: 1,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderOutline: 'none',
+    outerBorderWidth: 2,
+    textLine: 'underline',
+    textLineStyle: 'solid'
+  }
+}

package/build/rn/List.js

@@ -0,0 +1,75 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:13 GMT
+ *
+ */
+
+const PaletteIconBulletFill = require('@telus-uds/palette-public-mobile/build/rn/icons/BulletFill')
+
+module.exports = {
+  appearances: {
+    compact: {
+      description: 'When true it will reduce the line height of the list item.',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: {
+      description: 'Indicates list item text size.',
+      type: 'variant',
+      values: [ 'large', 'small' ]
+    }
+  },
+  rules: [
+    {
+      if: { size: 'large' },
+      tokens: {
+        iconMarginTop: 6,
+        itemFontSize: 20,
+        itemIconSize: 20,
+        itemLineHeight: 1.6,
+        listGutter: 12
+      }
+    },
+    {
+      if: { size: 'small' },
+      tokens: {
+        iconMarginTop: 2,
+        itemFontSize: 14,
+        itemIconSize: 14,
+        itemLineHeight: 1.4285714285714286,
+        listGutter: 12
+      }
+    },
+    {
+      if: { compact: true },
+      tokens: { iconMarginTop: 2, itemLineHeight: 1.25 }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: { itemLineHeight: 1.14285714286 }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: { itemLineHeight: 1.2 }
+    }
+  ],
+  tokens: {
+    bulletIcon: PaletteIconBulletFill,
+    dividerColor: '#9c9faa',
+    dividerSize: 1,
+    iconMarginTop: 4,
+    interItemMargin: 8,
+    interItemMarginWithDivider: 16,
+    itemBulletColor: '#394056',
+    itemBulletContainerAlign: 'center',
+    itemBulletContainerWidth: 16,
+    itemFontName: 'SofiaPro',
+    itemFontSize: 16,
+    itemFontWeight: '400',
+    itemIconColor: '#394056',
+    itemIconSize: 16,
+    itemLineHeight: 1.5,
+    listGutter: 16
+  }
+}