@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/rn/Listbox.js

@@ -0,0 +1,198 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
+const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
+
+module.exports = {
+  appearances: {
+    current: {
+      description: 'When the current item is selected',
+      type: 'state',
+      values: [ true, false ]
+    },
+    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 ]
+    },
+    isChild: {
+      description: 'when the item is child of another child',
+      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 ]
+    }
+  },
+  rules: [
+    {
+      if: { focus: true, hover: true, pressed: true },
+      tokens: {
+        groupBackgroundColor: '#e3e6e8',
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        groupColor: '#676e73',
+        itemBackgroundColor: '#e3e6e8',
+        itemColor: '#676e73'
+      }
+    },
+    {
+      if: { focus: false, hover: true, pressed: false },
+      tokens: {
+        groupBackgroundColor: '#f4f4f7',
+        groupColor: '#4b286d',
+        itemBackgroundColor: '#f4f4f7',
+        itemColor: '#4b286d'
+      }
+    },
+    {
+      if: { focus: true, pressed: false },
+      tokens: {
+        groupBorderColor: '#4b286d',
+        groupBorderWidth: 1,
+        groupColor: '#4b286d',
+        itemBorderBottomColor: '#4b286d',
+        itemBorderLeftColor: '#4b286d',
+        itemBorderRightColor: '#4b286d',
+        itemBorderTopColor: '#4b286d',
+        itemColor: '#4b286d'
+      }
+    },
+    {
+      if: { expanded: true },
+      tokens: { groupIcon: PaletteIconCaretUp }
+    },
+    {
+      if: { current: true },
+      tokens: {
+        groupColor: '#4b286d',
+        groupFontName: 'HelveticaNow',
+        groupFontWeight: '700',
+        itemColor: '#4b286d',
+        itemPaddingBottom: 12,
+        itemPaddingLeft: 16,
+        itemPaddingRight: 16,
+        itemPaddingTop: 12
+      }
+    },
+    {
+      if: { current: true, pressed: true },
+      tokens: {
+        groupBackgroundColor: '#e3e6e8',
+        groupBorderWidth: 0,
+        groupColor: '#676e73',
+        groupFontName: 'HelveticaNow',
+        groupFontWeight: '700'
+      }
+    },
+    {
+      if: { isChild: true },
+      tokens: {
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#e3e6e8',
+        itemBorderLeftWidth: 4,
+        itemBorderTopWidth: 0
+      }
+    },
+    {
+      if: { focus: true, isChild: true },
+      tokens: {
+        itemBorderBottomColor: '#4b286d',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#4b286d',
+        itemBorderRightColor: '#4b286d',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#4b286d',
+        itemBorderTopWidth: 1
+      }
+    },
+    {
+      if: { hover: true, isChild: true },
+      tokens: { itemBorderLeftColor: '#4b286d' }
+    },
+    {
+      if: { current: true, isChild: true },
+      tokens: { itemBorderLeftColor: '#4b286d' }
+    },
+    {
+      if: { current: true, pressed: true },
+      tokens: { itemColor: '#676e73' }
+    },
+    {
+      if: { isChild: true, pressed: true },
+      tokens: {
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#676e73',
+        itemBorderTopWidth: 0
+      }
+    }
+  ],
+  tokens: {
+    groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+    groupBorderColor: 'rgba(0, 0, 0, 0)',
+    groupBorderRadius: 0,
+    groupBorderWidth: 1,
+    groupColor: '#414547',
+    groupFontName: 'HelveticaNow',
+    groupFontSize: 14,
+    groupFontWeight: '400',
+    groupHeight: 40,
+    groupIcon: PaletteIconCaretDown,
+    groupPaddingBottom: 12,
+    groupPaddingLeft: 16,
+    groupPaddingRight: 16,
+    groupPaddingTop: 12,
+    itemBackgroundColor: 'rgba(0, 0, 0, 0)',
+    itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
+    itemBorderBottomWidth: 1,
+    itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
+    itemBorderLeftWidth: 1,
+    itemBorderRadius: 0,
+    itemBorderRightColor: 'rgba(0, 0, 0, 0)',
+    itemBorderRightWidth: 1,
+    itemBorderTopColor: 'rgba(0, 0, 0, 0)',
+    itemBorderTopWidth: 1,
+    itemBorderWidth: 1,
+    itemColor: '#414547',
+    itemDisplay: false,
+    itemFontName: 'HelveticaNow',
+    itemFontSize: 14,
+    itemFontWeight: '700',
+    itemHeight: 40,
+    itemOutline: 0,
+    itemPaddingBottom: 8,
+    itemPaddingLeft: 16,
+    itemPaddingRight: 16,
+    itemPaddingTop: 8,
+    itemTextDecoration: 'none',
+    lineHeight: 1.14285714286,
+    minHeight: '100%',
+    minWidth: '100%',
+    shadow: {
+      blur: 8,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 4,
+      spread: 0
+    }
+  }
+}

package/build/rn/Modal.js

@@ -0,0 +1,143 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
+
+module.exports = {
+  appearances: {
+    maxWidth: {
+      description: 'Whether a modal should expand responsively to the maximum of 8 layout columns width',
+      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' ]
+    },
+    width: {
+      description: 'The width of the modal',
+      type: 'state',
+      values: [ 's', 'm', 'l', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        direction: 'column',
+        height: '100%',
+        paddingBottom: 24,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        direction: 'row',
+        maxWidth: 576
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ], width: 's' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 320
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ], width: 'm' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 480
+      }
+    },
+    {
+      if: { viewport: [ 'lg', 'xl' ], width: 'l' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 630
+      }
+    },
+    {
+      if: { viewport: 'xl', width: 'xl' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 768
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'md' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 480
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'lg' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 630
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'xl' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 768
+      }
+    }
+  ],
+  tokens: {
+    backdropColor: 'rgba(244, 244, 247, 0.97)',
+    backdropOpacity: 1,
+    backgroundColor: '#ffffff',
+    borderColor: '#e3e6e8',
+    borderRadius: 4,
+    cancelButtonColor: '#2b8000',
+    closeIcon: PaletteIconClose,
+    closeIconColor: '#414547',
+    closeIconSize: 16,
+    closePadding: 4,
+    containerPaddingBottom: 0,
+    containerPaddingLeft: 0,
+    containerPaddingRight: 0,
+    containerPaddingTop: 0,
+    direction: 'row',
+    gap: 16,
+    headingColor: '#414547',
+    headingPaddingRight: 24,
+    height: null,
+    marginLeft: 24,
+    marginRight: 24,
+    maxWidth: '100%',
+    paddingBottom: 24,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 24,
+    shadow: {
+      blur: 8,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 4,
+      spread: 0
+    },
+    subHeadingMarginTop: 8
+  }
+}

package/build/rn/MultiSelectFilter.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    maxHeight: {
+      description: 'Whether MultiselectFilter modal should expand responsively to content or a set maximu height',
+      type: 'state',
+      values: [ true ]
+    },
+    maxWidth: {
+      description: 'Whether MultiselectFilter modal should expand to content or a set maximuh width',
+      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: { viewport: [ 'xs' ] },
+      tokens: {
+        buttonDirection: 'column',
+        minHeight: '100%',
+        minWidth: '100%'
+      }
+    },
+    {
+      if: { maxHeight: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+      tokens: { maxHeightSize: 480 }
+    },
+    {
+      if: { maxWidth: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+      tokens: { maxWidthSize: 544 }
+    }
+  ],
+  tokens: {
+    buttonDirection: 'row',
+    headerFontColor: '#414547',
+    headerFontName: 'HelveticaNow',
+    headerFontSize: 16,
+    headerFontWeight: '500',
+    headerLineHeight: 1.5,
+    maxHeightSize: 0,
+    maxWidthSize: 0,
+    minHeight: 412,
+    minWidth: 320,
+    subHeaderFontName: 'HelveticaNow',
+    subHeaderFontSize: 14,
+    subHeaderFontWeight: '400',
+    subHeaderLineHeight: 1.4
+  }
+}

package/build/rn/NavigationBar.js

@@ -0,0 +1,128 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
+const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
+
+module.exports = {
+  appearances: {
+    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 ]
+    },
+    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: { selected: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#f4f4f7',
+        color: '#4b286d',
+        fontName: 'HelveticaNow',
+        fontWeight: '700'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#4b286d',
+        borderWidth: 2,
+        color: '#4b286d',
+        outerBorderColor: '#4b286d',
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '#4b286d',
+        borderColor: '#4b286d',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#7c53a5',
+        color: '#4b286d'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#e3e6e8',
+        borderColor: '#7c53a5',
+        borderWidth: 1,
+        color: '#4b286d'
+      }
+    },
+    {
+      if: { viewport: [ 'xs', 'sm', 'md' ] },
+      tokens: { textAlign: 'space-between', width: 288 }
+    },
+    {
+      if: { expanded: true },
+      tokens: { icoMenu: PaletteIconCaretUp }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#ffffff',
+    borderRadius: 32,
+    borderWidth: 1,
+    color: '#414547',
+    fontName: 'HelveticaNow',
+    fontSize: 14,
+    fontWeight: '400',
+    icoMenu: PaletteIconCaretDown,
+    lineHeight: 1.14285714286,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 1,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: null,
+    textAlign: 'center',
+    width: 0
+  }
+}

package/build/rn/Notification.js

@@ -0,0 +1,118 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
+const PaletteIconStatusInfo = require('@telus-uds/palette-allium/build/rn/icons/StatusInfo')
+const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
+const PaletteIconStatusWarning = require('@telus-uds/palette-allium/build/rn/icons/StatusWarning')
+const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
+
+module.exports = {
+  appearances: {
+    style: { type: 'variant', values: [ 'system', 'subtle' ] },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    },
+    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: [ 'xl' ] },
+      tokens: { justifyContent: 'center' }
+    },
+    {
+      if: { style: 'system' },
+      tokens: {
+        borderLeftWidth: 0,
+        borderRadius: 0,
+        borderRightWidth: 0,
+        borderTopWidth: 0,
+        iconGap: 8,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 12
+      }
+    },
+    {
+      if: { style: 'subtle' },
+      tokens: {
+        borderBottomWidth: 0,
+        borderLeftWidth: 0,
+        borderRadius: 0,
+        borderRightWidth: 0,
+        borderTopWidth: 0,
+        iconGap: 8,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12,
+        paddingTop: 12
+      }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        backgroundColor: '#f4f9f2',
+        borderColor: '#2b8000',
+        icon: PaletteIconStatusSuccess,
+        iconColor: '#2b8000'
+      }
+    },
+    {
+      if: { validation: 'warning' },
+      tokens: {
+        backgroundColor: '#fff9ee',
+        borderColor: '#b4872c',
+        dismissIcon: null,
+        icon: PaletteIconStatusWarning,
+        iconColor: '#b4872c'
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        backgroundColor: '#fff6f8',
+        borderColor: '#e12339',
+        dismissIcon: null,
+        icon: PaletteIconStatusError,
+        iconColor: '#e12339'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#efedff',
+    borderBottomWidth: 1,
+    borderColor: '#7c53a5',
+    borderLeftWidth: 1,
+    borderRadius: 6,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    color: '#414547',
+    dismissButtonGap: 24,
+    dismissIcon: PaletteIconClose,
+    dismissIconColor: '#676e73',
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    icon: PaletteIconStatusInfo,
+    iconColor: '#4b286d',
+    iconGap: 8,
+    iconSize: 24,
+    justifyContent: 'flex-start',
+    lineHeight: 1.5,
+    paddingBottom: 12,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 12
+  }
+}

package/build/rn/OrderedList.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+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', 'medium', 'small' ]
+    }
+  },
+  rules: [
+    {
+      if: { size: 'large' },
+      tokens: { itemFontSize: 20, itemLineHeight: 1.6 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { itemFontSize: 14, itemLineHeight: 1.42857142857 }
+    },
+    { if: { compact: true }, tokens: { itemLineHeight: 1.25 } },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: { itemLineHeight: 1.14285714286 }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: { itemLineHeight: 1.2 }
+    }
+  ],
+  tokens: {
+    headerFontName: 'HelveticaNow',
+    headerFontWeight: '700',
+    interItemMargin: 8,
+    itemBulletContainerWidth: 16,
+    itemBulletHeight: 4,
+    itemBulletWidth: 4,
+    itemColor: '#414547',
+    itemFontName: 'HelveticaNow',
+    itemFontSize: 16,
+    itemFontWeight: '400',
+    itemLineHeight: 1.5,
+    itemMarginTop: 0,
+    itemPaddingTop: 0,
+    listGutter: 8
+  }
+}