@telus-uds/theme-koodo 5.3.0 → 5.5.0

package/build/rn/ExpandCollapsePanel.js

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

package/build/rn/Feedback.js

@@ -0,0 +1,67 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 GMT
+ *
+ */
+
+const PaletteIconCheckCircleFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled')
+const PaletteIconCaution = require('@telus-uds/palette-koodo/build/rn/icons/Caution')
+
+module.exports = {
+  appearances: {
+    icon: { type: 'variant', values: [ true ] },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    }
+  },
+  rules: [
+    {
+      if: { validation: 'error' },
+      tokens: { backgroundColor: '#fcd3c6' }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: { backgroundColor: '#c5f2cc' }
+    },
+    {
+      if: { icon: true, validation: 'success' },
+      tokens: {
+        backgroundColor: '#c5f2cc',
+        icon: PaletteIconCheckCircleFilled,
+        iconColor: '#1c7b2b'
+      }
+    },
+    {
+      if: { icon: true, validation: 'error' },
+      tokens: {
+        backgroundColor: '#fcd3c6',
+        icon: PaletteIconCaution,
+        iconColor: '#c9370b'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#efefef',
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 0,
+    borderWidth: 0,
+    color: '#000000',
+    contentFontSize: 16,
+    fontName: 'StagSans',
+    fontWeight: '400',
+    icon: null,
+    iconColor: 'rgba(0, 0, 0, 0)',
+    iconGap: 8,
+    iconSize: 20,
+    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:40:57 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { error: { type: 'variant', values: [ true ] } },
+  rules: [ { if: { error: true }, tokens: { outlineColor: '#ee2c74' } } ],
+  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,85 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 GMT
+ *
+ */
+
+const PaletteIconClose = require('@telus-uds/palette-koodo/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', 'xl' ] },
+      tokens: {
+        footnoteBodyPaddingBottom: 40,
+        footnoteBodyPaddingLeft: 16,
+        footnoteBodyPaddingRight: 16,
+        footnoteBodyPaddingTop: 0,
+        footnoteHeaderPaddingBottom: 24,
+        footnoteHeaderPaddingLeft: 16,
+        footnoteHeaderPaddingRight: 4,
+        footnoteHeaderPaddingTop: 24
+      }
+    }
+  ],
+  tokens: {
+    closeButtonBackgroundColor: '#ffffff',
+    closeButtonBorderColor: '#000000',
+    closeButtonBorderSize: 0,
+    closeButtonHeight: 16,
+    closeButtonIconSize: 16,
+    closeButtonMarginBottom: 4,
+    closeButtonMarginLeft: 4,
+    closeButtonMarginRight: 12,
+    closeButtonMarginTop: 4,
+    closeButtonWidth: 16,
+    closeIcon: PaletteIconClose,
+    footnoteBackground: '#ffffff',
+    footnoteBodyBackground: '#ffffff',
+    footnoteBodyPaddingBottom: 40,
+    footnoteBodyPaddingLeft: 16,
+    footnoteBodyPaddingRight: 16,
+    footnoteBodyPaddingTop: 0,
+    footnoteBorderColorMd: '#c9c8c8',
+    footnoteBorderTopSizeMd: 1,
+    footnoteHeaderPaddingBottom: 24,
+    footnoteHeaderPaddingLeft: 16,
+    footnoteHeaderPaddingRight: 4,
+    footnoteHeaderPaddingTop: 24,
+    headerFontName: 'StagSans',
+    headerFontSize: 16,
+    headerFontWeight: '700',
+    headerLineHeight: 1.25,
+    headerMargin: 16,
+    listItemColor: '#000000',
+    listItemFontName: 'StagSans',
+    listItemFontSize: 14,
+    listItemFontWeight: '400',
+    listItemLineHeight: 1.42857142857,
+    listItemMarkerFontSize: 14,
+    listItemMarkerLineHeight: 1.45,
+    listItemPaddingLeft: 8,
+    listPaddingLeft: 32
+  }
+}

package/build/rn/FootnoteLink.js

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

package/build/rn/HorizontalScrollButton.js

@@ -0,0 +1,64 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 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: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        iconColor: '#ffffff'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 32,
+    borderWidth: 1,
+    iconColor: '#000000',
+    iconScale: 1,
+    iconSize: 16,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    padding: 8,
+    shadow: null
+  }
+}

package/build/rn/Icon.js

@@ -0,0 +1,53 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    color: {
+      type: 'variant',
+      values: [
+        'brand',   'subtle',
+        'offer',   'success',
+        'danger',  'warning',
+        'inverse'
+      ]
+    },
+    size: {
+      type: 'variant',
+      values: [ 'micro', 'small', 'large', 'extraLarge' ]
+    },
+    status: {
+      description: 'Uses icon colour to communicate meaning to the user',
+      type: 'variant',
+      values: [ 'success', 'error' ]
+    }
+  },
+  rules: [
+    { if: { size: 'micro' }, tokens: { size: 16 } },
+    { if: { size: 'small' }, tokens: { size: 20 } },
+    { if: { size: 'large' }, tokens: { size: 32 } },
+    { if: { size: 'extraLarge' }, tokens: { size: 48 } },
+    { if: { color: 'brand' }, tokens: { color: '#ff0076' } },
+    { if: { color: 'subtle' }, tokens: { color: '#666666' } },
+    { if: { color: 'offer' }, tokens: { color: '#ff0076' } },
+    { if: { color: 'success' }, tokens: { color: '#1c7b2b' } },
+    { if: { color: 'danger' }, tokens: { color: '#c9370b' } },
+    { if: { color: 'warning' }, tokens: { color: '#c9370b' } },
+    { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
+    { if: { status: 'success' }, tokens: { color: '#1c7b2b' } },
+    { if: { status: 'error' }, tokens: { color: '#c9370b' } }
+  ],
+  tokens: {
+    color: '#000000',
+    scale: 1,
+    size: 24,
+    translateX: 0,
+    translateY: 0
+  }
+}

package/build/rn/IconButton.js

@@ -0,0 +1,257 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 GMT
+ *
+ */
+
+const PaletteIconAdd = require('@telus-uds/palette-koodo/build/rn/icons/Add')
+const PaletteIconSubtract = require('@telus-uds/palette-koodo/build/rn/icons/Subtract')
+const PaletteIconClose = require('@telus-uds/palette-koodo/build/rn/icons/Close')
+const PaletteIconExpand = require('@telus-uds/palette-koodo/build/rn/icons/Expand')
+const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/ChevronDown')
+const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
+const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
+const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
+const PaletteIconPlayVideo = require('@telus-uds/palette-koodo/build/rn/icons/PlayVideo')
+
+module.exports = {
+  appearances: {
+    action: {
+      type: 'variant',
+      values: [
+        'add',      'close',
+        'expand',   'moveDown',
+        'moveLeft', 'moveRight',
+        'moveUp',   'play',
+        'subtract'
+      ]
+    },
+    compact: {
+      description: 'Without the outer border gap',
+      type: 'variant',
+      values: [ true ]
+    },
+    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 ]
+    },
+    inverse: {
+      description: 'For use on dark backgrounds',
+      type: 'variant',
+      values: [ true ]
+    },
+    password: {
+      description: 'Password masked or not',
+      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 ]
+    },
+    raised: {
+      description: 'Uses shadow and background colour to appear raised above the page',
+      type: 'variant',
+      values: [ true ]
+    },
+    size: { type: 'variant', values: [ 'small', 'large' ] }
+  },
+  rules: [
+    { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+    {
+      if: { action: 'subtract' },
+      tokens: { icon: PaletteIconSubtract }
+    },
+    { if: { action: 'close' }, tokens: { icon: PaletteIconClose } },
+    { if: { action: 'expand' }, tokens: { icon: PaletteIconExpand } },
+    {
+      if: { action: 'moveDown' },
+      tokens: { icon: PaletteIconChevronDown }
+    },
+    {
+      if: { action: 'moveLeft' },
+      tokens: { icon: PaletteIconChevronLeft }
+    },
+    {
+      if: { action: 'moveRight' },
+      tokens: { icon: PaletteIconChevronRight }
+    },
+    {
+      if: { action: 'moveUp' },
+      tokens: { icon: PaletteIconChevronUp }
+    },
+    {
+      if: { action: 'play' },
+      tokens: { icon: PaletteIconPlayVideo }
+    },
+    { if: { action: 'add' }, tokens: { icon: PaletteIconAdd } },
+    {
+      if: { action: 'subtract' },
+      tokens: { icon: PaletteIconSubtract }
+    },
+    { if: { action: 'close' }, tokens: { icon: PaletteIconClose } },
+    { if: { action: 'expand' }, tokens: { icon: PaletteIconExpand } },
+    {
+      if: { action: 'moveDown' },
+      tokens: { icon: PaletteIconChevronDown }
+    },
+    {
+      if: { action: 'moveLeft' },
+      tokens: { icon: PaletteIconChevronLeft }
+    },
+    {
+      if: { action: 'moveRight' },
+      tokens: { icon: PaletteIconChevronRight }
+    },
+    {
+      if: { action: 'moveUp' },
+      tokens: { icon: PaletteIconChevronUp }
+    },
+    {
+      if: { action: 'play' },
+      tokens: { icon: PaletteIconPlayVideo }
+    },
+    {
+      if: { inverse: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#000000',
+        iconColor: '#ffffff',
+        iconScale: 1.1
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { backgroundColor: '#ffffff', iconColor: '#000000' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#000000',
+        iconColor: '#000000',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        backgroundColor: 'transparent',
+        borderColor: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    },
+    { if: { password: true }, tokens: { borderColor: 'transparent' } },
+    {
+      if: { focus: true, password: true },
+      tokens: { borderColor: '#000000', borderWidth: 3, outerBorderWidth: 0 }
+    },
+    {
+      if: { inactive: null, pressed: true },
+      tokens: { backgroundColor: '#404040', iconColor: '#666666' }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        iconColor: '#000000',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { password: true, pressed: true },
+      tokens: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+        iconColor: '#000000',
+        outerBorderGap: 0
+      }
+    },
+    { if: { size: 'large' }, tokens: { iconSize: 24, padding: 12 } },
+    { if: { size: 'small' }, tokens: { iconSize: 16, padding: 4 } },
+    {
+      description: 'Raised IconButtons follow different design patterns to other variants',
+      if: { raised: true },
+      tokens: {
+        borderColor: '#000000',
+        shadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.2)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        }
+      }
+    },
+    { if: { hover: true, raised: true }, tokens: {} },
+    {
+      if: { raised: true, size: 'large' },
+      tokens: { iconSize: 24, padding: 12 }
+    },
+    { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
+    { if: { focus: true, raised: true }, tokens: { borderWidth: 3 } },
+    {
+      if: { pressed: true, raised: true },
+      tokens: { backgroundColor: '#000000', iconColor: '#666666' }
+    },
+    { if: { compact: true }, tokens: { outerBorderGap: 0 } },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        iconColor: '#c9c8c8',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'transparent',
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    borderBottomWidth: null,
+    borderColor: 'transparent',
+    borderLeftWidth: null,
+    borderRadius: 99999999999999,
+    borderRightWidth: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderTopWidth: null,
+    borderWidth: 1,
+    height: null,
+    icon: PaletteIconAdd,
+    iconColor: '#000000',
+    iconScale: 1,
+    iconSize: 16,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    padding: 4,
+    shadow: null,
+    width: null
+  }
+}

package/build/rn/Image.js

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

package/build/rn/InputLabel.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:40:57 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    gap: 8,
+    hintColor: '#000000',
+    hintFontName: 'StagSans',
+    hintFontSize: 14,
+    hintFontWeight: '400',
+    hintLineHeight: 1.42857142857,
+    lineHeight: 1.5
+  }
+}

package/build/rn/InputSupports.js

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