@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/build/web/PreviewCard.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#efefef',
+    borderRadius: 8,
+    borderWidth: 1,
+    flex: 1,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    separatorColor: '#000000'
+  }
+}
+export default theme

package/build/web/PriceLockup.js

@@ -0,0 +1,104 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    size: { type: 'variant', values: [ 'small', 'medium', 'large' ] },
+    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: { size: 'small' },
+      tokens: {
+        amountFontSize: 36,
+        centsFontSize: 20,
+        centsLineHeight: 1.25,
+        currencySymbolFontSize: 20,
+        rateFontSize: 16,
+        rateLineHeight: 1.5,
+        strikeThroughHeight: 2,
+        strikeThroughPosition: 18,
+        topTextFontSize: 14,
+        topTextLineHeight: 1.42857142857
+      }
+    },
+    {
+      if: { size: 'large' },
+      tokens: {
+        amountFontSize: 54,
+        centsFontName: 'StagSans',
+        centsFontSize: 24,
+        centsFontWeight: '600',
+        currencySymbolFontSize: 32,
+        rateFontName: 'StagSans',
+        rateFontSize: 16,
+        rateFontWeight: '600',
+        rateLineHeight: 1.5,
+        strikeThroughPosition: 27,
+        topTextFontSize: 20,
+        topTextLineHeight: 1.4
+      }
+    },
+    {
+      if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+      tokens: {
+        centsFontName: 'StagSans',
+        centsFontSize: 32,
+        centsFontWeight: '700'
+      }
+    }
+  ],
+  tokens: {
+    amountFontName: 'StagSans',
+    amountFontSize: 44,
+    amountFontWeight: '700',
+    amountLetterSpacing: 0,
+    amountLineHeight: 1,
+    bottomLinksMarginLeft: 4,
+    bottomTextFontSize: 14,
+    bottomTextLineHeight: 1.42857142857,
+    bottomTextMarginTop: 0,
+    centsFontName: 'StagSans',
+    centsFontSize: 24,
+    centsFontWeight: '700',
+    centsLineHeight: 1,
+    currencySymbolFontName: 'StagSans',
+    currencySymbolFontSize: 24,
+    currencySymbolFontWeight: '700',
+    currencySymbolLineHeight: 1,
+    dividerColor: null,
+    fontColor: '#000000',
+    fontName: 'StagSans',
+    fontWeight: '700',
+    footnoteGap: 4,
+    footnoteLinkColor: '#000000',
+    footnoteLinkFontName: 'StagSans',
+    footnoteLinkFontSize: 14,
+    footnoteLinkFontWeight: '600',
+    footnoteLinkLineHeight: 1.42857142857,
+    footnoteMarginTop: 4,
+    priceMarginBottom: 0,
+    rateFontName: 'StagSans',
+    rateFontSize: 16,
+    rateFontWeight: '700',
+    rateLineHeight: 1.5,
+    strikeThroughColor: '#000000',
+    strikeThroughHeight: 3,
+    strikeThroughPosition: 21,
+    topTextFontName: 'StagSans',
+    topTextFontSize: 16,
+    topTextFontWeight: '700',
+    topTextLineHeight: 1.5,
+    topTextMarginBottom: 4
+  }
+}
+export default theme

package/build/web/Progress.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: { size: { type: 'variant', values: [ 'mini' ] } },
+  rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
+  tokens: {
+    backgroundColor: '#fafafa',
+    borderColor: '#666666',
+    borderRadius: 12,
+    borderWidth: 1,
+    height: 16
+  }
+}
+export default theme

package/build/web/ProgressBar.js

@@ -0,0 +1,36 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    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 ]
+    },
+    negative: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { inactive: true },
+      tokens: { backgroundColor: '#c9c8c8', outlineColor: '#595959' }
+    },
+    {
+      if: { negative: true },
+      tokens: { backgroundColor: '#c9370b', outlineColor: '#595959' }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#000000',
+    borderRadius: 12,
+    gradient: null,
+    outlineColor: '#595959',
+    outlineWidth: 1
+  }
+}
+export default theme

package/build/web/QuantitySelector.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    alternative: { type: 'variant', values: [ true ] },
+    disabled: { type: 'variant', values: [ true ] },
+    focus: { type: 'variant', values: [ true ] },
+    hover: { type: 'variant', values: [ true ] },
+    pressed: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { alternative: true },
+      tokens: { paddingBottom: 8, paddingTop: 8 }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputBackgroundColor: '#efefef' }
+    },
+    {
+      if: { disabled: true },
+      tokens: { inputBackgroundColor: '#efefef', textColor: '#c9c8c8' }
+    },
+    { if: { focus: true }, tokens: { inputBorderWidth: 3 } }
+  ],
+  tokens: {
+    fontSize: 16,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#666666',
+    inputBorderWidth: 1,
+    inputWidth: 64,
+    lineHeight: 1.5,
+    padding: 12,
+    paddingBottom: 12,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 12,
+    textColor: '#000000'
+  }
+}
+export default theme

package/build/web/QuantitySelectorSideButton.js

@@ -0,0 +1,102 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+import PaletteIconSubtract from '@telus-uds/palette-koodo/build/rn/icons/Subtract'
+import PaletteIconAdd from '@telus-uds/palette-koodo/build/rn/icons/Add'
+const theme = {
+  appearances: {
+    alternative: { type: 'variant', values: [ true ] },
+    decrease: { type: 'variant', values: [ true ] },
+    disabled: { type: 'variant', values: [ true ] },
+    focus: { type: 'variant', values: [ true ] },
+    hover: { type: 'variant', values: [ true ] },
+    increase: { type: 'variant', values: [ true ] },
+    pressed: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', borderWidth: 3 }
+    },
+    {
+      if: { decrease: true },
+      tokens: {
+        borderBottomLeftRadius: 4,
+        borderRightWidth: 0,
+        borderTopLeftRadius: 4,
+        icon: PaletteIconSubtract
+      }
+    },
+    {
+      if: { increase: true },
+      tokens: {
+        borderBottomRightRadius: 4,
+        borderLeftWidth: 0,
+        borderTopRightRadius: 4,
+        icon: PaletteIconAdd
+      }
+    },
+    {
+      if: { focus: true, increase: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderLeftWidth: 2,
+        borderRightWidth: 3,
+        borderTopWidth: 3
+      }
+    },
+    {
+      if: { decrease: true, focus: true },
+      tokens: {
+        borderBottomWidth: 3,
+        borderLeftWidth: 3,
+        borderRightWidth: 2,
+        borderTopWidth: 3
+      }
+    },
+    {
+      if: { disabled: true },
+      tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
+    },
+    {
+      if: { alternative: true },
+      tokens: { paddingBottom: 12, paddingTop: 12 }
+    },
+    {
+      if: { alternative: true, increase: true },
+      tokens: { borderBottomRightRadius: 24, borderTopRightRadius: 24 }
+    },
+    {
+      if: { alternative: true, decrease: true },
+      tokens: { borderBottomLeftRadius: 24, borderTopLeftRadius: 24 }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomWidth: 1,
+    borderColor: '#666666',
+    borderLeftWidth: 1,
+    borderRadius: 0,
+    borderRightWidth: 1,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderTopWidth: 1,
+    borderWidth: 1,
+    icon: null,
+    iconColor: '#000000',
+    iconSize: 16,
+    padding: 16,
+    paddingBottom: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16
+  }
+}
+export default theme

package/build/web/QuickLinks.js

@@ -0,0 +1,32 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 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: [ 'md', 'lg', 'xl' ] },
+      tokens: { card: false, dividers: true, list: false }
+    }
+  ],
+  tokens: {
+    card: true,
+    dividers: true,
+    list: true,
+    stackGap: 2,
+    stackJustify: 'center',
+    stackSpace: 4
+  }
+}
+export default theme

package/build/web/QuickLinksButton.js

@@ -0,0 +1,57 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 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 ]
+    }
+  },
+  rules: [
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#666666',
+        iconColor: '#666666'
+      }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#666666',
+    borderRadius: 48,
+    borderWidth: 1,
+    color: '#666666',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    icon: null,
+    iconColor: '#000000',
+    iconSize: 24,
+    iconSpace: 2,
+    lineHeight: 1.5,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: '#ffffff',
+    outerBorderGap: 2,
+    outerBorderWidth: 2,
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 12,
+    shadow: null,
+    textAlign: 'center',
+    width: null
+  }
+}
+export default theme

package/build/web/QuickLinksCard.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#c9c8c8',
+    borderRadius: 8,
+    borderWidth: 1,
+    flex: 1,
+    minWidth: null,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 8,
+    shadow: null
+  }
+}
+export default theme

package/build/web/QuickLinksFeature.js

@@ -0,0 +1,14 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: { stackGap: 5, stackJustify: 'center', stackSpace: 5 }
+}
+export default theme

package/build/web/QuickLinksFeatureItem.js

@@ -0,0 +1,52 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 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 ]
+    },
+    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: 'xl' },
+      tokens: { contentMaxDimension: 184, imageDimension: 168 }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        color: '#595959',
+        outerBorderColor: '#595959',
+        textLine: 'underline'
+      }
+    }
+  ],
+  tokens: {
+    color: '#000000',
+    contentAlignItems: 'center',
+    contentDirection: 'column',
+    contentMaxDimension: 168,
+    contentSpace: 3,
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    gap: 32,
+    imageDimension: 128,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    textAlign: 'center',
+    textLine: 'none'
+  }
+}
+export default theme

package/build/web/QuickLinksList.js

@@ -0,0 +1,50 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 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 ]
+    }
+  },
+  rules: [
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', itemIconColor: '#000000' }
+    }
+  ],
+  tokens: {
+    backgroundColor: null,
+    dividerColor: '#c9c8c8',
+    dividerSize: 1,
+    iconMarginTop: 0,
+    interItemMargin: null,
+    interItemMarginWithDivider: null,
+    itemBulletColor: '#7c1366',
+    itemBulletContainerAlign: 'center',
+    itemBulletContainerWidth: 0,
+    itemBulletHeight: 0,
+    itemBulletWidth: 0,
+    itemFontColor: '#000000',
+    itemFontName: 'StagSans',
+    itemFontSize: 16,
+    itemFontWeight: '600',
+    itemIconColor: '#000000',
+    itemIconSize: 24,
+    itemLineHeight: 1.6,
+    itemUnderline: 'none',
+    listGutter: 12,
+    paddingBottom: 12,
+    paddingLeft: 4,
+    paddingRight: 4,
+    paddingTop: 12
+  }
+}
+export default theme

package/build/web/Radio.js

@@ -0,0 +1,92 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:25 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', values: [ true ] },
+    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 ]
+    }
+  },
+  rules: [
+    {
+      if: { error: true },
+      tokens: {
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#ffffff',
+        inputOutlineColor: '#000000',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderGap: 0,
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBackgroundColor: '#c9c8c8',
+        inputBorderColor: '#c9c8c8',
+        inputOutlineColor: '#c9c8c8',
+        labelColor: '#666666',
+        outerBorderGap: 0
+      }
+    },
+    {
+      if: { checked: true, inactive: true },
+      tokens: {
+        checkedBackgroundColor: '#c9c8c8',
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#efefef',
+        inputBorderWidth: 3,
+        inputOutlineColor: '#c9c8c8',
+        inputOutlineWidth: 1,
+        labelColor: '#666666',
+        outerBorderColor: '#c9c8c8'
+      }
+    }
+  ],
+  tokens: {
+    checkedBackgroundColor: '#7a3dfc',
+    checkedSize: 16,
+    containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    containerBorderRadius: 0,
+    containerOpacity: 1,
+    containerPaddingBottom: 6,
+    containerPaddingLeft: 8,
+    containerPaddingRight: 0,
+    containerPaddingTop: 6,
+    containerShadow: null,
+    descriptionFontName: 'StagSans',
+    descriptionFontSize: 14,
+    descriptionFontWeight: '400',
+    descriptionLineHeight: 1.4,
+    descriptionMarginLeft: null,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#ffffff',
+    inputBorderWidth: 2,
+    inputOutlineColor: '#000000',
+    inputOutlineWidth: 2,
+    inputSize: 20,
+    labelColor: '#000000',
+    labelFontName: 'StagSans',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 8,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 5,
+    outerBorderWidth: 1
+  }
+}
+export default theme