@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/rn/Divider.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 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: '#b2b9bf' } },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } }
+  ],
+  tokens: { color: '#676e73', width: 1 }
+}

package/build/rn/ExpandCollapse.js

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

package/build/rn/ExpandCollapseControl.js

@@ -0,0 +1,56 @@
+/*
+ *
+ * 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: {
+    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 ]
+    },
+    mini: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    { if: { expanded: true }, tokens: { icon: PaletteIconCaretUp } },
+    {
+      if: { compact: true },
+      tokens: {
+        paddingBottom: 8,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 8
+      }
+    },
+    { if: { mini: true }, tokens: { paddingBottom: 0 } }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderWidth: 0,
+    icon: PaletteIconCaretDown,
+    iconColor: '#2b8000',
+    iconGap: 8,
+    iconPaddingTop: 4,
+    iconPosition: 'left',
+    iconSize: 16,
+    justifyContent: 'flex-start',
+    paddingBottom: 16,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 16,
+    textLine: 'none',
+    verticalAlign: 'top'
+  }
+}

package/build/rn/ExpandCollapseMini.js

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

package/build/rn/ExpandCollapseMiniControl.js

@@ -0,0 +1,71 @@
+/*
+ *
+ * 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: {
+    alternative: {
+      description: 'Replaces the default green colour with a more subtle grey.',
+      type: 'variant',
+      values: [ true ]
+    },
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      type: 'state',
+      values: [ true, false ]
+    },
+    inverse: {
+      description: 'Replaces the default green colour with white. Useful for dark backgrounds.',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: { type: 'variant', values: [ 'micro', 'small', 'large' ] }
+  },
+  rules: [
+    { if: { expanded: true }, tokens: { icon: PaletteIconCaretUp } },
+    { if: { alternative: true }, tokens: { color: '#414547' } },
+    {
+      if: { inverse: true },
+      tokens: { color: '#ffffff', iconColor: '#ffffff' }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: { fontSize: 12, iconSize: 16, lineHeight: 1.33333333333 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { fontSize: 14, iconSize: 20, lineHeight: 1.45 }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { fontSize: 20, lineHeight: 1.28571428571 }
+    }
+  ],
+  tokens: {
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderWidth: 0,
+    color: '#2b8000',
+    fontSize: 16,
+    icon: PaletteIconCaretDown,
+    iconColor: '#2b8000',
+    iconGap: 8,
+    iconPaddingTop: 4,
+    iconPosition: 'left',
+    iconSize: 24,
+    justifyContent: 'flex-start',
+    lineHeight: 1.5,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    size: 4,
+    textLine: 'underline',
+    verticalAlign: 'top'
+  }
+}

package/build/rn/ExpandCollapsePanel.js

@@ -0,0 +1,53 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    compact: { type: 'variant', values: [ true ] },
+    mini: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { compact: true },
+      tokens: {
+        contentPaddingBottom: 16,
+        contentPaddingLeft: 24,
+        contentPaddingRight: 0,
+        contentPaddingTop: 8
+      }
+    },
+    { if: { mini: true }, tokens: { contentPaddingLeft: 0 } }
+  ],
+  tokens: {
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 0,
+    borderWidth: 0,
+    collapseDuration: 250,
+    contentPaddingBottom: 16,
+    contentPaddingLeft: 24,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
+    contentPanelBackgroundColor: 'rgba(0, 0, 0, 0)',
+    contentPanelBorderColor: 'rgba(0, 0, 0, 0)',
+    contentPanelBorderWidth: 0,
+    contentPanelFontColor: '#2c2e30',
+    contentPanelFontName: 'HelveticaNow',
+    contentPanelFontSize: 16,
+    contentPanelFontWeight: '700',
+    contentPanelLineHeight: 1.5,
+    contentPanelPaddingBottom: 16,
+    contentPanelPaddingLeft: 24,
+    contentPanelPaddingRight: 0,
+    contentPanelPaddingTop: 16,
+    expandDividerColor: 'rgba(0, 0, 0, 0)',
+    expandDividerWidth: 0,
+    expandDuration: 300,
+    marginBottom: 0
+  }
+}

package/build/rn/Feedback.js

@@ -0,0 +1,67 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
+const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
+
+module.exports = {
+  appearances: {
+    icon: { type: 'variant', values: [ true ] },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    }
+  },
+  rules: [
+    {
+      if: { validation: 'success' },
+      tokens: {
+        backgroundColor: '#f4f9f2',
+        borderColor: '#f4f9f2',
+        color: '#163e06'
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        backgroundColor: '#fff6f8',
+        borderColor: '#fff6f8',
+        color: '#c12335'
+      }
+    },
+    {
+      if: { icon: true, validation: 'success' },
+      tokens: { icon: PaletteIconStatusSuccess, iconColor: '#2b8000' }
+    },
+    {
+      if: { icon: true, validation: 'error' },
+      tokens: { icon: PaletteIconStatusError, iconColor: '#c12335' }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#efedff',
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 4,
+    borderWidth: 1,
+    color: '#2c2e30',
+    contentFontSize: 16,
+    fontName: 'HelveticaNow',
+    fontWeight: '400',
+    icon: null,
+    iconColor: 'rgba(0, 0, 0, 0)',
+    iconGap: 8,
+    iconSize: 24,
+    lineHeight: 1.5,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    space: 2,
+    titleFontSize: 16
+  }
+}

package/build/rn/Fieldset.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { error: { type: 'variant', values: [ true ] } },
+  rules: [ { if: { error: true }, tokens: { outlineColor: '#e12339' } } ],
+  tokens: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    outlineColor: 'rgba(0, 0, 0, 0)',
+    outlineOffset: null,
+    outlineWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0
+  }
+}

package/build/rn/Footnote.js

@@ -0,0 +1,98 @@
+/*
+ *
+ * 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: {
+    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: {
+        footnoteBodyPaddingBottom: 32,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteHeaderPaddingBottom: 16,
+        footnoteHeaderPaddingLeft: 16,
+        footnoteHeaderPaddingRight: 4,
+        footnoteHeaderPaddingTop: 16
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg' ] },
+      tokens: {
+        footnoteBodyPaddingBottom: 40,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteHeaderPaddingBottom: 24,
+        footnoteHeaderPaddingLeft: 16,
+        footnoteHeaderPaddingRight: 4,
+        footnoteHeaderPaddingTop: 24
+      }
+    },
+    {
+      if: { viewport: [ 'xl' ] },
+      tokens: {
+        footnoteBodyPaddingBottom: 40,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteHeaderPaddingBottom: 24,
+        footnoteHeaderPaddingLeft: 16,
+        footnoteHeaderPaddingRight: 16,
+        footnoteHeaderPaddingTop: 24
+      }
+    }
+  ],
+  tokens: {
+    closeButtonBackgroundColor: '#f4f4f7',
+    closeButtonBorderColor: '#676e73',
+    closeButtonBorderSize: 1,
+    closeButtonHeight: 24,
+    closeButtonIconSize: 16,
+    closeButtonMarginBottom: 12,
+    closeButtonMarginLeft: 4,
+    closeButtonMarginRight: 4,
+    closeButtonMarginTop: 12,
+    closeButtonWidth: 24,
+    closeIcon: PaletteIconClose,
+    footnoteBackground: '#f4f4f7',
+    footnoteBodyBackground: '#f4f4f7',
+    footnoteBodyPaddingBottom: 40,
+    footnoteBodyPaddingLeft: 16,
+    footnoteBodyPaddingRight: 16,
+    footnoteBodyPaddingTop: 0,
+    footnoteBorderColorMd: '#b2b9bf',
+    footnoteBorderTopSizeMd: 1,
+    footnoteHeaderPaddingBottom: 24,
+    footnoteHeaderPaddingLeft: 16,
+    footnoteHeaderPaddingRight: 4,
+    footnoteHeaderPaddingTop: 24,
+    headerFontName: 'HelveticaNow',
+    headerFontSize: 16,
+    headerFontWeight: '500',
+    headerLineHeight: 1.5,
+    headerMargin: 16,
+    listItemColor: '#414547',
+    listItemFontName: 'HelveticaNow',
+    listItemFontSize: 16,
+    listItemFontWeight: '400',
+    listItemLineHeight: 1.5,
+    listItemMarkerFontSize: 16,
+    listItemMarkerLineHeight: 1.5,
+    listItemPaddingLeft: 8,
+    listPaddingLeft: 32
+  }
+}

package/build/rn/FootnoteLink.js

@@ -0,0 +1,22 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    color: null,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 1,
+    paddingLeft: 2,
+    paddingRight: 2
+  }
+}

package/build/rn/HorizontalScrollButton.js

@@ -0,0 +1,63 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 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 ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { borderColor: '#414547', iconColor: '#414547' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#676e73', iconColor: '#ffffff' }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#b2b9bf',
+    borderRadius: 32,
+    borderWidth: 1,
+    iconColor: '#676e73',
+    iconScale: 1,
+    iconSize: 16,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    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
+    }
+  }
+}

package/build/rn/Icon.js

@@ -0,0 +1,48 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:54 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    color: {
+      type: 'variant',
+      values: [
+        'brand',   'default',
+        'subtle',  'success',
+        'danger',  'warning',
+        'inverse'
+      ]
+    },
+    rank: { type: 'variant', values: [ 'primary' ] },
+    size: {
+      type: 'variant',
+      values: [ 'micro', 'small', 'large', 'extraLarge' ]
+    }
+  },
+  rules: [
+    { if: { size: 'micro' }, tokens: { size: 16 } },
+    { if: { size: 'small' }, tokens: { size: 20 } },
+    { if: { size: 'large' }, tokens: { size: 32 } },
+    { if: { color: 'brand' }, tokens: { color: '#4b286d' } },
+    { if: { color: 'default' }, tokens: { color: '#414547' } },
+    { if: { color: 'subtle' }, tokens: { color: '#676e73' } },
+    { if: { color: 'success' }, tokens: { color: '#2b8000' } },
+    { if: { color: 'danger' }, tokens: { color: '#c12335' } },
+    { if: { color: 'warning' }, tokens: { color: '#b4872c' } },
+    { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
+    { if: { size: 'extraLarge' }, tokens: { size: 48 } },
+    { if: { rank: 'primary' }, tokens: { color: '#4b286d' } }
+  ],
+  tokens: {
+    color: '#414547',
+    scale: 1,
+    size: 24,
+    translateX: 0,
+    translateY: 0
+  }
+}