@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/rn/Toast.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+
+
+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: { animationPaddingBottomAfter: 8, animationPaddingTopAfter: 8 }
+    }
+  ],
+  tokens: {
+    animationBackgroundColorAfter: '#efefef',
+    animationBackgroundColorBefore: '#000000',
+    animationColorAfter: '#000000',
+    animationColorBefore: '#ffffff',
+    animationDivColorAfter: '#000000',
+    animationDivColorBefore: '#ffffff',
+    animationHeightAfter: 24,
+    animationHeightBefore: 0,
+    animationPaddingBottomAfter: 16,
+    animationPaddingBottomBefore: 0,
+    animationPaddingTopAfter: 16,
+    animationPaddingTopBefore: 0,
+    chevronlinkFontName: 'StagSans',
+    chevronlinkFontWeight: '400',
+    containerBackgroundColor: '#000000',
+    containerGap: 12,
+    padding: 16
+  }
+}

package/build/rn/ToggleSwitch.js

@@ -0,0 +1,176 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
+
+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 ]
+    },
+    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 ]
+    },
+    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: { hover: true },
+      tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', switchColor: '#595959' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1,
+        switchColor: '#666666'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#fafafa',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#efefef', switchColor: '#404040' }
+    },
+    {
+      if: { pressed: true, selected: true },
+      tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderWidth: 1,
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchColor: '#000000'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1,
+        switchColor: '#666666'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        opacity: 0.5,
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchColor: '#c9c8c8'
+      }
+    },
+    {
+      if: { inactive: true, selected: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        icon: PaletteIconCheck,
+        iconColor: '#ffffff',
+        opacity: 0.5,
+        switchBorderColor: 'rgba(0, 0, 0, 0)',
+        switchColor: '#c9c8c8'
+      }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#c9c8c8',
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    borderWidth: 0,
+    icon: null,
+    iconColor: null,
+    iconSize: 12,
+    labelColor: '#000000',
+    labelFontName: 'StagSans',
+    labelFontSize: 16,
+    labelFontWeight: '600',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderGapButton: 4,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    shadow: null,
+    space: 2,
+    switchBorderColor: 'rgba(0, 0, 0, 0)',
+    switchBorderRadius: 32,
+    switchBorderWidth: 0,
+    switchColor: '#595959',
+    switchShadow: {
+      blur: 2,
+      color: 'rgba(0, 0, 0, 0.2)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 2,
+      spread: 0
+    },
+    switchSize: 24,
+    trackBorderColor: 'rgba(0, 0, 0, 0)',
+    trackBorderRadius: 12,
+    trackBorderWidth: 3,
+    trackHeight: 20,
+    width: 40
+  }
+}

package/build/rn/ToggleSwitchGroup.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+
+
+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: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
+  tokens: {
+    alignItems: 'flex-start',
+    direction: 'column',
+    fieldSpace: 2,
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    space: 3
+  }
+}

package/build/rn/Tooltip.js

@@ -0,0 +1,42 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: { backgroundColor: '#ffffff', color: '#000000' }
+    }
+  ],
+  tokens: {
+    arrowBorderRadius: 0,
+    arrowOffset: 4,
+    arrowWidth: 8,
+    backgroundColor: '#e0d8fc',
+    borderRadius: 4,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.4,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: {
+      blur: 0,
+      color: 'rgba(0, 0, 0, 0)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 0,
+      spread: 0
+    }
+  }
+}

package/build/rn/TooltipButton.js

@@ -0,0 +1,87 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
+const PaletteIconTooltipSymbol = require('@telus-uds/palette-koodo/build/rn/icons/TooltipSymbol')
+
+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 ]
+    },
+    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 ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        iconColor: '#7a3dfc',
+        iconScale: 1.25
+      }
+    },
+    {
+      if: { inverse: true },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { iconColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: { outerBorderColor: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: null },
+      tokens: { outerBorderColor: '#000000' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        icon: PaletteIconTooltipSymbol,
+        iconColor: '#000000',
+        outerBorderColor: '#efefef'
+      }
+    },
+    {
+      if: { inverse: null, pressed: true },
+      tokens: {
+        backgroundColor: '#5b2bc2',
+        iconColor: '#ffffff',
+        outerBorderColor: '#5b2bc2'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    icon: PaletteIconTooltip,
+    iconColor: '#000000',
+    iconScale: 1,
+    iconSize: 16,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 4,
+    outerBorderWidth: 1,
+    width: 16
+  }
+}

package/build/rn/Typography.js

@@ -0,0 +1,231 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    bold: {
+      description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+      type: 'variant',
+      values: [ true ]
+    },
+    colour: {
+      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: {
+      type: 'variant',
+      values: [
+        'micro',    'small',
+        'medium',   '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: { weight: 'semibold' },
+      tokens: { fontName: 'StagSans', fontWeight: '600' }
+    },
+    {
+      if: { weight: 'bold' },
+      tokens: { fontName: 'StagSans', fontWeight: '700' }
+    },
+    {
+      description: 'Please only bold single words while using with headings',
+      if: { bold: true },
+      tokens: { fontName: 'StagSans', fontWeight: '600' }
+    },
+    {
+      if: { size: 'large' },
+      tokens: { fontSize: 20, lineHeight: 1.4 }
+    },
+    {
+      if: { size: 'eyebrow' },
+      tokens: {
+        color: '#000000',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 1.42857142857,
+        textTransform: 'uppercase'
+      }
+    },
+    {
+      if: { compact: true, size: 'large' },
+      tokens: { lineHeight: 1.2 }
+    },
+    {
+      if: { size: 'medium' },
+      tokens: { fontSize: 16, lineHeight: 1.5 }
+    },
+    {
+      if: { compact: true, size: 'medium' },
+      tokens: { lineHeight: 1.25 }
+    },
+    {
+      if: { size: 'small' },
+      tokens: { fontSize: 14, lineHeight: 1.42857142857 }
+    },
+    {
+      if: { compact: true, size: 'small' },
+      tokens: { lineHeight: 1.14285714286 }
+    },
+    {
+      if: { size: 'micro' },
+      tokens: { fontSize: 12, lineHeight: 1.33333333333 }
+    },
+    {
+      if: { compact: true, size: 'micro' },
+      tokens: { lineHeight: 1.33333333333 }
+    },
+    {
+      if: { size: 'display1' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 44,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'display1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 70, lineHeight: 1.2 }
+    },
+    {
+      if: { size: 'display2' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 36,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'display2', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 54, lineHeight: 1.14285714286 }
+    },
+    {
+      if: { size: 'h1' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 34,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'h1', viewport: [ 'lg', 'xl' ] },
+      tokens: { fontSize: 44, lineHeight: 1.22222222222 }
+    },
+    {
+      if: { size: 'h2' },
+      tokens: {
+        color: '#000000',
+        fontName: 'StagSans',
+        fontSize: 32,
+        fontWeight: '700',
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { size: 'h3' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 24,
+        fontWeight: '700',
+        lineHeight: 1.33333333333
+      }
+    },
+    {
+      if: { size: 'h4' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 20,
+        fontWeight: '700',
+        lineHeight: 1.2
+      }
+    },
+    {
+      if: { size: 'h5' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 18,
+        fontWeight: '700',
+        lineHeight: 1.22222222222
+      }
+    },
+    {
+      if: { size: 'h6' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '700',
+        lineHeight: 1.25
+      }
+    },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    { if: { colour: 'default' }, tokens: { color: '#000000' } },
+    { if: { colour: 'brand' }, tokens: { color: '#ff0076' } },
+    { if: { colour: 'dark' }, tokens: { color: '#595959' } },
+    { if: { colour: 'light' }, tokens: { color: '#666666' } },
+    { if: { colour: 'positive' }, tokens: { color: '#1c7b2b' } },
+    { if: { colour: 'warning' }, tokens: { color: '#c9370b' } },
+    { if: { colour: 'danger' }, tokens: { color: '#c9370b' } },
+    { if: { colour: 'black' }, tokens: { color: '#000000' } },
+    { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+    { if: { colour: 'brand2' }, tokens: { color: '#7a3dfc' } },
+    { if: { colour: 'brand3' }, tokens: { color: '#5b2bc2' } },
+    { if: { colour: 'alternative1' }, tokens: { color: '#404040' } },
+    { if: { colour: 'alternative2' }, tokens: { color: '#dd0066' } },
+    { if: { colour: 'alternative3' }, tokens: { color: '#1c7b2b' } }
+  ],
+  tokens: {
+    color: '#000000',
+    fontName: 'StagSans',
+    fontScaleCap: 64,
+    fontSize: 16,
+    fontWeight: '400',
+    letterSpacing: 0,
+    lineHeight: 1.5,
+    superScriptFontSize: null,
+    textTransform: 'none'
+  }
+}

package/build/rn/Video.js

@@ -0,0 +1,21 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+const PaletteIconPause = require('@telus-uds/palette-koodo/build/rn/icons/Pause')
+const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
+const PaletteIconReplay = require('@telus-uds/palette-koodo/build/rn/icons/Replay')
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderColor: '#000000',
+    pauseIcon: PaletteIconPause,
+    playIcon: PaletteIconPlaySolid,
+    replayIcon: PaletteIconReplay
+  }
+}

package/build/rn/VideoButton.js

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

package/build/rn/VideoControlBar.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+const PaletteIconClosedCaptions = require('@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions')
+const PaletteIconFullscreenExpand = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenExpand')
+const PaletteIconFullscreenMinimize = require('@telus-uds/palette-koodo/build/rn/icons/FullscreenMinimize')
+const PaletteIconSettingsSolid = require('@telus-uds/palette-koodo/build/rn/icons/SettingsSolid')
+
+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', '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
+  }
+}