@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/rn/TabsItem.js

@@ -0,0 +1,135 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    equalWidth: {
+      description: 'Divide the available width equally among `TabsItem`',
+      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 ]
+    },
+    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 ]
+    },
+    selected: {
+      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: { selected: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        color: '#000000',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#c9c8c8'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#666666'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', highlightBarBorderWidth: 0 }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
+    },
+    {
+      if: { inverse: true },
+      tokens: { backgroundColor: 'transparent', color: '#ffffff' }
+    },
+    {
+      if: { inverse: true, selected: true },
+      tokens: {
+        color: '#c9c8c8',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#c9c8c8'
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: { color: '#efefef' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        color: '#ffffff',
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#ffffff'
+      }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { color: '#c9c8c8', highlightBarBorderWidth: 0 }
+    },
+    { if: { focus: true, inverse: true, selected: true }, tokens: {} },
+    { if: { equalWidth: true }, tokens: { maxWidth: null } }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: 'transparent',
+    borderRadius: 0,
+    borderWidth: 0,
+    color: '#666666',
+    fontName: 'StagSans',
+    fontScaleCap: 64,
+    fontSize: 16,
+    fontWeight: '600',
+    highlightBarBorderRadius: 0,
+    highlightBarBorderWidth: 0,
+    highlightBarHeight: 0,
+    highlightColor: 'transparent',
+    highlightTriangleSize: 0,
+    letterSpacing: 0,
+    lineHeight: 1.5,
+    maxWidth: null,
+    paddingHorizontal: 24,
+    paddingVertical: 4,
+    space: 0,
+    textAlign: 'center',
+    textTransform: 'none'
+  }
+}

package/build/rn/Tags.js

@@ -0,0 +1,27 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 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: 'center',
+    direction: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    space: 1
+  }
+}

package/build/rn/TagsItem.js

@@ -0,0 +1,159 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconAdd = require('@telus-uds/palette-koodo/build/rn/icons/Add')
+const PaletteIconClose = require('@telus-uds/palette-koodo/build/rn/icons/Close')
+
+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: { pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        borderWidth: 0,
+        color: '#ffffff',
+        iconBackground: '#404040',
+        iconColor: '#ffffff',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#000000',
+        color: '#000000',
+        iconBackground: 'rgba(0, 0, 0, 0)',
+        iconColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderGap: 3,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        borderWidth: 0,
+        color: '#ffffff',
+        iconBackground: '#404040',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+        color: '#ffffff',
+        icon: PaletteIconClose,
+        iconBackground: '#000000',
+        iconColor: '#ffffff',
+        iconPadding: 4,
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { focus: true, hover: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderWidth: 0,
+        color: '#c9c8c8',
+        iconBackground: '#efefef',
+        iconColor: '#c9c8c8'
+      }
+    }
+  ],
+  tokens: {
+    alignSelf: 'center',
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    icon: PaletteIconAdd,
+    iconAlignSelf: 'center',
+    iconBackground: '#ffffff',
+    iconBorderRadius: 32,
+    iconColor: '#000000',
+    iconPadding: 2,
+    iconPosition: 'right',
+    iconSize: 16,
+    iconSpace: 2,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    lineHeight: 1.5,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderWidth: 0,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: null,
+    textAlign: 'center'
+  }
+}

package/build/rn/TermsAndConditions.js

@@ -0,0 +1,85 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/ChevronDown')
+const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
+
+module.exports = {
+  appearances: {
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      type: 'state',
+      values: [ true, false ]
+    },
+    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: {
+        expandContentPaddingRight: 24,
+        listMarginLeft: 2,
+        titlePaddingLeft: 2
+      }
+    },
+    {
+      if: { expanded: true },
+      tokens: { icon: PaletteIconChevronUp }
+    }
+  ],
+  tokens: {
+    contentBorderColor: 'transparent',
+    contentMarginBottom: 0,
+    contentPaddingBottom: 8,
+    contentPaddingLeft: 16,
+    dividerColor: '#c9c8c8',
+    expandBaseBorderWidth: 0,
+    expandContentPaddingBottom: 16,
+    expandContentPaddingLeft: 16,
+    expandContentPaddingRight: 16,
+    expandContentPaddingTop: 16,
+    expandIconContainerAlignItems: 'center',
+    expandIconContainerBorder: 0,
+    expandIconContainerBorderColor: 'rgba(0, 0, 0, 0)',
+    expandIconContainerHeight: 32,
+    expandIconContainerJustifyContent: 'center',
+    expandIconContainerMarginX: 0,
+    expandIconContainerMarginY: 12,
+    expandIconContainerWidth: 32,
+    expandTitleBorder: 0,
+    expandTitleBorderColor: 'rgba(0, 0, 0, 0)',
+    expandTitleColor: '#000000',
+    expandTitleFontName: 'StagSans',
+    expandTitleFontSize: 16,
+    expandTitleFontWeight: '600',
+    expandTitleLineHeight: 1.5,
+    expandTitleMarginX: 4,
+    expandTitleMarginY: 0,
+    expandTitlePaddingLeft: 0,
+    expandTitleUnderline: 'none',
+    icon: PaletteIconChevronDown,
+    listColor: '#000000',
+    listFontName: 'StagSans',
+    listFontSize: 14,
+    listFontWeight: '400',
+    listLineHeight: 1.42857142857,
+    listMarginBottom: 16,
+    listMarginLeft: 32,
+    mdContentPaddingBottom: 16,
+    mdContentPaddingLeft: 48,
+    orderedPadding: 0,
+    titleColor: '#016b6a',
+    titleFontSize: 14,
+    titleLineHeight: 1.42857142857,
+    titlePaddingLeft: 32,
+    unorderedPadding: 12
+  }
+}

package/build/rn/Testimonial.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconQuoteLeft = require('@telus-uds/palette-koodo/build/rn/icons/QuoteLeft')
+const PaletteIconQuoteRightArrow = require('@telus-uds/palette-koodo/build/rn/icons/QuoteRightArrow')
+
+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: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        testimonialFontNameHeading: 'StagSans',
+        testimonialFontSizeHeading: 32,
+        testimonialFontWeightHeading: '700',
+        testimonialLineHeightHeading: 1.25
+      }
+    }
+  ],
+  tokens: {
+    additionalFontName: 'StagSans',
+    additionalFontSize: 14,
+    additionalFontWeight: '400',
+    additionalLineHeight: 1.42857142857,
+    authorFontName: 'StagSans',
+    authorFontSize: 16,
+    authorFontWeight: '600',
+    authorLineHeight: 1.5,
+    dividerBackgroundColor: '#c9c8c8',
+    dividerBorder: 1,
+    figcaptionGap: 12,
+    icon: PaletteIconQuoteLeft,
+    iconColor: '#c9c8c8',
+    iconFr: PaletteIconQuoteRightArrow,
+    imageSize: 48,
+    quoteContainerGap: 4,
+    testimonialContainerGap: 12,
+    testimonialFontNameHeading: 'StagSans',
+    testimonialFontNameLarge: 'StagSans',
+    testimonialFontSizeHeading: 24,
+    testimonialFontSizeLarge: 20,
+    testimonialFontWeightHeading: '700',
+    testimonialFontWeightLarge: '400',
+    testimonialLineHeightHeading: 1.33333333333,
+    testimonialLineHeightLarge: 1.4,
+    textColor: '#000000'
+  }
+}

package/build/rn/TextArea.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = { appearances: {}, rules: [], tokens: { maxLines: 4, minLines: 2 } }

package/build/rn/TextInput.js

@@ -0,0 +1,131 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+const PaletteIconAmex = require('@telus-uds/palette-koodo/build/rn/icons/Amex')
+const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
+const PaletteIconCreditCard = require('@telus-uds/palette-koodo/build/rn/icons/CreditCard')
+const PaletteIconMasterCard = require('@telus-uds/palette-koodo/build/rn/icons/MasterCard')
+const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeMasked')
+const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
+const PaletteIconVisa = require('@telus-uds/palette-koodo/build/rn/icons/Visa')
+const PaletteIconCheckCircleFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled')
+const PaletteIconExclamationOctagon = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon')
+
+module.exports = {
+  appearances: {
+    focus: {
+      description: 'Focus states for some input elements are well supported across web, RN, ios and android',
+      type: 'state',
+      values: [ true ]
+    },
+    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 ]
+    },
+    numeric: {
+      description: 'capability to only allow numbers',
+      type: 'variant',
+      values: [ true ]
+    },
+    password: {
+      description: 'capability that helps masking and unmasking text',
+      type: 'variant',
+      values: [ true ]
+    },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true, inactive: null },
+      tokens: { backgroundColor: '#efefef', borderColor: '#000000' }
+    },
+    {
+      if: { hover: true, validation: 'success' },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#000000',
+        icon: PaletteIconCheckCircleFilled,
+        iconColor: '#1c7b2b'
+      }
+    },
+    {
+      if: { hover: true, validation: 'error' },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#000000',
+        iconColor: '#c9370b'
+      }
+    },
+    {
+      if: { hover: false, validation: 'success' },
+      tokens: {
+        borderColor: '#1c7b2b',
+        icon: PaletteIconCheckCircleFilled,
+        iconColor: '#1c7b2b'
+      }
+    },
+    {
+      if: { hover: false, validation: 'error' },
+      tokens: {
+        borderColor: '#c9370b',
+        icon: PaletteIconExclamationOctagon,
+        iconColor: '#c9370b'
+      }
+    },
+    {
+      if: { focus: true, inactive: null },
+      tokens: { borderColor: '#000000', borderWidth: 3, icon: null }
+    },
+    {
+      if: { inactive: true },
+      tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+    }
+  ],
+  tokens: {
+    amexIcon: PaletteIconAmex,
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    buttonSize: 32,
+    buttonsGap: 0,
+    buttonsPaddingRight: 0,
+    clearButtonIcon: PaletteIconTimes,
+    color: '#666666',
+    defaultCreditIcon: PaletteIconCreditCard,
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '400',
+    icon: null,
+    iconColor: 'rgba(0, 0, 0, 0)',
+    iconSize: 24,
+    leftIconPaddingBottom: 5,
+    lineHeight: 1.5,
+    masterCardIcon: PaletteIconMasterCard,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderWidth: 0,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    passwordHideButtonIcon: PaletteIconEyeMasked,
+    passwordShowButtonIcon: PaletteIconEyeUnmasked,
+    visaIcon: PaletteIconVisa
+  }
+}

package/build/rn/Timeline.js

@@ -0,0 +1,58 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:08 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    horizontal: {
+      description: 'Use horizontal to display timeline horizontally.',
+      type: 'variant',
+      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: { horizontal: true, viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        connectorHeight: 1,
+        connectorWidth: '100%',
+        itemContentMarginBottom: 0,
+        itemContentMarginRight: 32,
+        lineItemContainerDirection: 'column',
+        lineItemDirection: 'row',
+        lineItemMarginBottom: 24,
+        lineItemMarginRight: 0,
+        timelineContainerDirection: 'row'
+      }
+    }
+  ],
+  tokens: {
+    connectorHeight: '100%',
+    connectorWidth: 1,
+    dotBorderWidth: 2,
+    dotColor: '#ffffff',
+    dotWidth: 12,
+    itemContentFlexSize: 1,
+    itemContentMarginBottom: 32,
+    itemContentMarginRight: 0,
+    lineContainerFlexSize: 1,
+    lineItemAlign: 'center',
+    lineItemContainerDirection: 'row',
+    lineItemDirection: 'column',
+    lineItemMarginBottom: 0,
+    lineItemMarginRight: 24,
+    timelineColor: '#000000',
+    timelineConnectorColor: '#000000',
+    timelineContainerDirection: 'column'
+  }
+}