@telus-uds/theme-allium 4.21.0 → 4.22.0

package/build/web/Modal.js

@@ -0,0 +1,143 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+import PaletteIconClose from '@telus-uds/palette-allium/build/rn/icons/Close'
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/MultiSelectFilter.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/NavigationBar.js

@@ -0,0 +1,89 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+import PaletteIconCaretDown from '@telus-uds/palette-allium/build/rn/icons/CaretDown'
+import PaletteIconCaretUp from '@telus-uds/palette-allium/build/rn/icons/CaretUp'
+const theme = {
+  appearances: {
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      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: { 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
+  }
+}
+export default theme

package/build/web/Notification.js

@@ -0,0 +1,118 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+import PaletteIconClose from '@telus-uds/palette-allium/build/rn/icons/Close'
+import PaletteIconStatusInfo from '@telus-uds/palette-allium/build/rn/icons/StatusInfo'
+import PaletteIconStatusSuccess from '@telus-uds/palette-allium/build/rn/icons/StatusSuccess'
+import PaletteIconStatusWarning from '@telus-uds/palette-allium/build/rn/icons/StatusWarning'
+import PaletteIconStatusError from '@telus-uds/palette-allium/build/rn/icons/StatusError'
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/OrderedList.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/Pagination.js

@@ -0,0 +1,44 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+
+const theme = {
+  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' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: { truncateAbove: 6 }
+    }
+  ],
+  tokens: {
+    borderBottomWidth: 0,
+    borderColor: '#676e73',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    color: '#676e73',
+    ellipsisBorderBottomWidth: 0,
+    ellipsisBorderLeftWidth: 0,
+    ellipsisBorderRightWidth: 0,
+    ellipsisBorderTopWidth: 0,
+    ellipsisHeight: null,
+    ellipsisPadding: 0,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    gap: 2,
+    lineHeight: 1.5,
+    truncateAbove: 4
+  }
+}
+export default theme

package/build/web/PaginationPageButton.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    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: { selected: true },
+      tokens: {
+        backgroundColor: '#676e73',
+        color: '#ffffff',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderLeftWidth: 1,
+    borderRadius: 32,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    color: '#676e73',
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    height: 32,
+    lineHeight: 1.5,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 4,
+    outerBorderWidth: 4,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    textAlign: 'center',
+    textLine: 'underline',
+    width: 32
+  }
+}
+export default theme

package/build/web/PaginationSideButton.js

@@ -0,0 +1,100 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+import PaletteIconArrowLeft from '@telus-uds/palette-allium/build/rn/icons/ArrowLeft'
+import PaletteIconArrowRight from '@telus-uds/palette-allium/build/rn/icons/ArrowRight'
+const theme = {
+  appearances: {
+    compact: {
+      description: 'Determines if the "Next" and "Previous" labels should be omitted',
+      type: 'state',
+      values: [ true ]
+    },
+    direction: {
+      description: "Determines which way does the button navigate in Pagination's context",
+      type: 'state',
+      values: [ 'previous', 'next' ]
+    },
+    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: { compact: true }, tokens: { displayLabel: false } },
+    {
+      if: { viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        borderRadius: 32,
+        displayLabel: false,
+        paddingBottom: 4,
+        paddingTop: 4,
+        width: 32
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#676e73',
+        color: '#ffffff',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#676e73', color: '#ffffff' }
+    },
+    {
+      if: { direction: 'previous' },
+      tokens: { icon: PaletteIconArrowLeft }
+    },
+    {
+      if: { direction: 'next' },
+      tokens: { icon: PaletteIconArrowRight }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomWidth: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderLeftWidth: 0,
+    borderRadius: 4,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    color: '#676e73',
+    displayLabel: true,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    height: null,
+    icon: null,
+    iconDisplace: 0,
+    iconSize: 24,
+    lineHeight: 1.5,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderWidth: 1,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    textAlign: 'center',
+    textLine: 'none',
+    width: null
+  }
+}
+export default theme

package/build/web/PreviewCard.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:07:10 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#e3e6e8',
+    borderRadius: 6,
+    borderWidth: 1,
+    flex: 1,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    separatorColor: '#b2b9bf'
+  }
+}
+export default theme