@telus-uds/theme-allium 4.21.0 → 4.23.0

package/build/web/Typography.js

@@ -0,0 +1,338 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    bold: {
+      description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+      type: 'variant',
+      values: [ true ]
+    },
+    colour: {
+      description: 'Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n' +
+        '  use the tokens prop.',
+      type: 'variant',
+      values: [
+        'default',      'brand',
+        'dark',         'light',
+        'positive',     'warning',
+        'danger',       'black',
+        'white',        'brand2',
+        'brand3',       'alternative1',
+        'alternative2', 'alternative3'
+      ]
+    },
+    compact: {
+      description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
+      type: 'variant',
+      values: [ true ]
+    },
+    inverse: {
+      description: 'Styles the link white for use on dark backgrounds.',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: {
+      description: 'Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,\n' +
+        '"display" headings are larger than "h" headings. Default is medium size body text. Does not change\n' +
+        'accessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.',
+      type: 'variant',
+      values: [
+        'micro',    'small',
+        'large',    'eyebrow',
+        'h1',       'h2',
+        'h3',       'h4',
+        'h5',       'h6',
+        'display1', 'display2'
+      ]
+    },
+    viewport: {
+      description: 'The size label for the current screen viewport based on the current screen width',
+      type: 'state',
+      values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+    },
+    weight: {
+      description: 'Sets the font weight, default is regular 400 weight. Does not change accessibility properties.',
+      type: 'variant',
+      values: [ 'semibold', 'bold' ]
+    }
+  },
+  rules: [
+    {
+      if: { size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ] },
+      tokens: { color: '#4b286d' }
+    },
+    {
+      if: {
+        colour: 'dark',
+        size: [ 'display1', 'display2', 'h1', 'h2', 'h3' ]
+      },
+      tokens: { color: '#2c2e30' }
+    },
+    {
+      if: { colour: 'light', size: 'h6' },
+      tokens: { color: '#676e73' }
+    },
+    {
+      if: { colour: 'dark', size: 'eyebrow' },
+      tokens: { color: '#7c53a5' }
+    },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { size: 'display1' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 40,
+        fontWeight: '300',
+        letterSpacing: -0.035,
+        lineHeight: 1.2,
+        superScriptFontSize: 24
+      }
+    },
+    {
+      if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 64, lineHeight: 1.125, superScriptFontSize: 32 }
+    },
+    {
+      if: { size: 'display2' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 36,
+        fontWeight: '400',
+        letterSpacing: -0.035,
+        lineHeight: 1.22222222222,
+        superScriptFontSize: 24
+      }
+    },
+    {
+      if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 56,
+        fontWeight: '300',
+        letterSpacing: -0.039,
+        lineHeight: 1.14285714286,
+        superScriptFontSize: 32
+      }
+    },
+    {
+      if: { size: 'h1' },
+      tokens: {
+        fontSize: 28,
+        letterSpacing: -0.017,
+        lineHeight: 1.28571428571,
+        superScriptFontSize: 20
+      }
+    },
+    {
+      if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 40,
+        fontWeight: '300',
+        letterSpacing: -0.035,
+        lineHeight: 1.2,
+        superScriptFontSize: 24
+      }
+    },
+    {
+      if: { size: 'h2' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 24,
+        fontWeight: '400',
+        lineHeight: 1.33333333333,
+        superScriptFontSize: 16
+      }
+    },
+    {
+      if: { size: 'h2', viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        fontSize: 28,
+        letterSpacing: -0.017,
+        lineHeight: 1.28571428571,
+        superScriptFontSize: 20
+      }
+    },
+    {
+      if: { size: 'h3' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 20,
+        fontWeight: '500',
+        lineHeight: 1.4,
+        superScriptFontSize: 16
+      }
+    },
+    {
+      if: { size: 'h3', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 24, lineHeight: 1.33333333333 }
+    },
+    {
+      if: { size: 'h4' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 16,
+        fontWeight: '500',
+        lineHeight: 1.5,
+        superScriptFontSize: 16
+      }
+    },
+    {
+      if: { size: 'h5' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 14,
+        fontWeight: '500',
+        lineHeight: 1.28571428571
+      }
+    },
+    {
+      if: { size: [ 'h5', 'h6' ] },
+      tokens: { superScriptFontSize: 12 }
+    },
+    {
+      if: { size: 'h6' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 12,
+        fontWeight: '700',
+        lineHeight: 1.33333333333
+      }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { fontSize: 20, lineHeight: 1.6, superScriptFontSize: 16 }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: { lineHeight: 1.2 }
+    },
+    {
+      description: "The compact line height for the 'default' font size, but doesn't apply for any other styles",
+      if: { compact: true, size: null },
+      tokens: { lineHeight: 1.25 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: {
+        fontSize: 14,
+        lineHeight: 1.42857142857,
+        superScriptFontSize: 12
+      }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: { lineHeight: 1.14285714286 }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: {
+        fontName: 'HelveticaNow',
+        fontSize: 12,
+        fontWeight: '500',
+        lineHeight: 1.33333333333,
+        superScriptFontSize: 12
+      }
+    },
+    {
+      if: { size: 'eyebrow' },
+      tokens: {
+        color: '#7c53a5',
+        fontName: 'HelveticaNow',
+        fontSize: 14,
+        fontWeight: '700',
+        lineHeight: 1.42857142857,
+        textTransform: 'uppercase'
+      }
+    },
+    {
+      description: 'Please only bold single words while using with headings',
+      if: { bold: true },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+    },
+    {
+      if: { bold: true, size: 'micro' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+    },
+    {
+      if: { bold: true, size: 'display1' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '400' }
+    },
+    {
+      if: {
+        bold: true,
+        size: [ 'display2' ],
+        viewport: [ 'xs', 'sm', 'md' ]
+      },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+    },
+    {
+      if: { bold: true, size: [ 'display2' ], viewport: [ 'lg', 'xl' ] },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '400' }
+    },
+    {
+      if: { bold: true, size: 'h1', viewport: [ 'xs', 'sm', 'md' ] },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+    },
+    {
+      if: { bold: true, size: 'h1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '400' }
+    },
+    {
+      if: { bold: true, size: 'h2' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+    },
+    {
+      if: { bold: true, size: 'h3' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+    },
+    {
+      if: {
+        bold: true,
+        size: [ 'h4', 'h5', 'h6' ],
+        viewport: [ 'xs', 'sm', 'md' ]
+      },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+    },
+    {
+      if: { weight: 'semibold' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '500' }
+    },
+    {
+      if: { weight: 'bold' },
+      tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
+    },
+    { if: { colour: 'default' }, tokens: { color: '#414547' } },
+    { if: { colour: 'brand' }, tokens: { color: '#4b286d' } },
+    { if: { colour: 'dark' }, tokens: { color: '#2c2e30' } },
+    { if: { colour: 'light' }, tokens: { color: '#676e73' } },
+    { if: { colour: 'positive' }, tokens: { color: '#2b8000' } },
+    { if: { colour: 'warning' }, tokens: { color: '#b4872c' } },
+    { if: { colour: 'danger' }, tokens: { color: '#c12335' } },
+    { if: { colour: 'black' }, tokens: { color: '#000000' } },
+    { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+    { if: { colour: 'brand2' }, tokens: { color: '#2b8000' } },
+    { if: { colour: 'brand3' }, tokens: { color: '#7c53a5' } },
+    { if: { colour: 'alternative1' }, tokens: { color: '#4b286d' } },
+    { if: { colour: 'alternative2' }, tokens: { color: '#4b286d' } },
+    { if: { colour: 'alternative3' }, tokens: { color: '#4b286d' } }
+  ],
+  tokens: {
+    color: '#414547',
+    fontName: 'HelveticaNow',
+    fontScaleCap: 64,
+    fontSize: 16,
+    fontWeight: '400',
+    letterSpacing: 0,
+    lineHeight: 1.5,
+    superScriptFontSize: 16,
+    textTransform: 'none'
+  }
+}
+export default theme

package/build/web/Video.js

@@ -0,0 +1,21 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+import PaletteIconPause from '@telus-uds/palette-allium/build/rn/icons/Pause'
+import PaletteIconPlaySolid from '@telus-uds/palette-allium/build/rn/icons/PlaySolid'
+import PaletteIconReplay from '@telus-uds/palette-allium/build/rn/icons/Replay'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderColor: '#b2b9bf',
+    pauseIcon: PaletteIconPause,
+    playIcon: PaletteIconPlaySolid,
+    replayIcon: PaletteIconReplay
+  }
+}
+export default theme

package/build/web/VideoButton.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+
+const theme = { appearances: {}, rules: [], tokens: { color: '#ffffff' } }
+export default theme

package/build/web/VideoControlBar.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+import PaletteIconClosedCaptions from '@telus-uds/palette-allium/build/rn/icons/ClosedCaptions'
+import PaletteIconFullscreenExpand from '@telus-uds/palette-allium/build/rn/icons/FullscreenExpand'
+import PaletteIconFullscreenMinimize from '@telus-uds/palette-allium/build/rn/icons/FullscreenMinimize'
+import PaletteIconSettingsSolid from '@telus-uds/palette-allium/build/rn/icons/SettingsSolid'
+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: [ 'xs', 'sm' ] },
+      tokens: {
+        height: 40,
+        paddingBottom: 8,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 8
+      }
+    }
+  ],
+  tokens: {
+    captionsIcon: PaletteIconClosedCaptions,
+    height: 56,
+    maximizeIcon: PaletteIconFullscreenExpand,
+    menuBottom: 64,
+    menuMarginLeft: 16,
+    menuRight: 32,
+    minimizeIcon: PaletteIconFullscreenMinimize,
+    paddingBottom: 16,
+    paddingLeft: 48,
+    paddingRight: 48,
+    paddingTop: 16,
+    settingsIcon: PaletteIconSettingsSolid
+  }
+}
+export default theme

package/build/web/VideoMenu.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+import PaletteIconCheckmark from '@telus-uds/palette-allium/build/rn/icons/Checkmark'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    background: '#2c2e30',
+    checkMarkFocusColor: '#676e73',
+    checkMarkHeight: 24,
+    checkMarkHoverColor: '#676e73',
+    checkMarkIcon: PaletteIconCheckmark,
+    checkMarkSelectedColor: '#ffffff',
+    checkMarkUnselectedColor: 'rgba(0, 0, 0, 0)',
+    checkMarkWidth: 24,
+    padding: 16
+  }
+}
+export default theme

package/build/web/VideoMiddleControlButton.js

@@ -0,0 +1,19 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    background: '#2c2e30',
+    height: 64,
+    iconColor: '#ffffff',
+    width: 64
+  }
+}
+export default theme

package/build/web/VideoPicker.js

@@ -0,0 +1,22 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    framedContainerBackgroundColor: '#fafafa',
+    framedContainerBorderColor: '#e3e6e8',
+    framedContainerBorderRadius: 4,
+    framedContainerBorderWidth: 1,
+    framedContainerPadding: 24,
+    framedMaxHeight: 640,
+    stackViewDividerColor: '#e3e6e8'
+  }
+}
+export default theme

package/build/web/VideoPickerSlider.js

@@ -0,0 +1,18 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+import PaletteIconArrowRight from '@telus-uds/palette-allium/build/rn/icons/ArrowRight'
+import PaletteIconArrowLeft from '@telus-uds/palette-allium/build/rn/icons/ArrowLeft'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    nextIcon: PaletteIconArrowRight,
+    previousIcon: PaletteIconArrowLeft
+  }
+}
+export default theme

package/build/web/VideoPickerThumbnail.js

@@ -0,0 +1,50 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 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: { pressed: true },
+      tokens: { borderColor: '#676e73', borderWidth: 3 }
+    },
+    {
+      if: { selected: true },
+      tokens: { borderColor: '#4b286d', borderWidth: 2, titleColor: '#4b286d' }
+    }
+  ],
+  tokens: {
+    borderColor: '#e3e6e8',
+    borderRadius: 4,
+    borderWidth: 2,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderRadius: 8,
+    outerBorderWidth: 2,
+    pressableBorderTopColor: '#e3e6e8',
+    pressableBorderTopWidth: 1,
+    pressablePaddingBottom: 16,
+    pressablePaddingHorizontal: 24,
+    pressablePaddingVertical: 16,
+    splashButtonRadius: 4,
+    subTitleColor: '#676e73',
+    titleColor: '#414547'
+  }
+}
+export default theme

package/build/web/VideoProgressBar.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    rangeBackground: 'rgba(0, 0, 0, 0)',
+    thumbBackground: '#ffffff',
+    thumbHeight: 8,
+    thumbWidth: 8,
+    timestampMarginLeft: 8,
+    timestampMarginRight: 8,
+    trackGradientEnd: '#66cc00',
+    trackGradientStart: '#66cc00'
+  }
+}
+export default theme

package/build/web/VideoVolumeSlider.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 GMT
+ *
+ */
+
+import PaletteIconMuted from '@telus-uds/palette-allium/build/rn/icons/Muted'
+import PaletteIconUnmuted from '@telus-uds/palette-allium/build/rn/icons/Unmuted'
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    marginLeft: 16,
+    marginRight: 16,
+    mutedIcon: PaletteIconMuted,
+    rangeBackground: 'rgba(0, 0, 0, 0)',
+    thumbBackground: '#ffffff',
+    thumbHeight: 8,
+    thumbWidth: 8,
+    trackGradientEnd: '#ffffff',
+    trackGradientStart: '#ffffff',
+    unmutedIcon: PaletteIconUnmuted
+  }
+}
+export default theme

package/build/web/WaffleGrid.js

@@ -0,0 +1,29 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:42:16 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: [ 'xs' ] }, tokens: { rowSize: 2 } },
+    { if: { viewport: [ 'sm', 'md' ] }, tokens: { rowSize: 3 } },
+    { if: { viewport: [ 'lg', 'xl' ] }, tokens: { rowSize: 6 } }
+  ],
+  tokens: {
+    itemBorderColor: '#b2b9bf',
+    itemPadding: 16,
+    rowBorderWidth: 1,
+    rowSize: 6
+  }
+}
+export default theme