@telus-uds/theme-allium 4.20.0 → 4.22.0

package/build/rn/QuickLinksButton.js

@@ -0,0 +1,68 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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: { borderWidth: 3 } },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#b2b9bf', borderWidth: 3 }
+    },
+    { if: { focus: true }, tokens: { outerBorderColor: '#676e73' } },
+    { if: { focus: true, pressed: true }, tokens: { borderWidth: 1 } }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#676e73',
+    borderRadius: 32,
+    borderWidth: 1,
+    color: '#676e73',
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '700',
+    icon: null,
+    iconColor: '#4b286d',
+    iconSize: 24,
+    iconSpace: 2,
+    lineHeight: 1.5,
+    minWidth: 144,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderWidth: 2,
+    paddingBottom: 12,
+    paddingLeft: 28,
+    paddingRight: 28,
+    paddingTop: 12,
+    shadow: null,
+    textAlign: 'center',
+    width: null
+  }
+}

package/build/rn/QuickLinksCard.js

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

package/build/rn/QuickLinksFeature.js

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

package/build/rn/QuickLinksFeatureItem.js

@@ -0,0 +1,76 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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 ]
+    },
+    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: { focus: true },
+      tokens: { outerBorderColor: '#2b8000', textLine: 'none' }
+    },
+    {
+      if: { hover: true },
+      tokens: { color: '#2b8000', imageDimension: 140, textLine: 'underline' }
+    },
+    {
+      if: { hover: true, viewport: 'xl' },
+      tokens: { imageDimension: 184 }
+    },
+    {
+      if: { pressed: true },
+      tokens: { color: '#1f5c09', textLine: 'none' }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { color: '#1f5c09', outerBorderColor: '#1f5c09' }
+    }
+  ],
+  tokens: {
+    color: '#2c2e30',
+    contentAlignItems: 'center',
+    contentDirection: 'column',
+    contentMaxDimension: 168,
+    contentSpace: 3,
+    fontName: 'HelveticaNow',
+    fontSize: 16,
+    fontWeight: '700',
+    gap: 32,
+    imageDimension: 128,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    textAlign: 'center',
+    textLine: 'none'
+  }
+}

package/build/rn/QuickLinksList.js

@@ -0,0 +1,84 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 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: '#f4f4f7',
+        itemFontColor: '#4b286d',
+        itemUnderline: 'underline'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        backgroundColor: '#e3e6e8',
+        itemFontColor: '#414547',
+        itemUnderline: 'underline'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#b2b9bf',
+        dividerColor: '#b2b9bf',
+        itemFontColor: '#676e73',
+        itemIconColor: '#676e73',
+        itemUnderline: 'underline'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: null,
+    dividerColor: '#676e73',
+    dividerSize: 1,
+    iconMarginTop: 0,
+    interItemMargin: 0,
+    interItemMarginWithDivider: 0,
+    itemBulletColor: '#4b286d',
+    itemBulletContainerAlign: 'center',
+    itemBulletContainerWidth: 16,
+    itemBulletHeight: 4,
+    itemBulletWidth: 4,
+    itemFontColor: '#676e73',
+    itemFontName: 'HelveticaNow',
+    itemFontSize: 16,
+    itemFontWeight: '700',
+    itemIconColor: '#4b286d',
+    itemIconSize: 24,
+    itemLineHeight: 1.5,
+    itemUnderline: 'none',
+    listGutter: 16,
+    paddingBottom: 12,
+    paddingLeft: null,
+    paddingRight: null,
+    paddingTop: 12
+  }
+}

package/build/rn/Radio.js

@@ -0,0 +1,93 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', 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 ]
+    }
+  },
+  rules: [
+    { if: { error: true }, tokens: {} },
+    { if: { hover: true }, tokens: { outerBorderColor: '#e3e6e8' } },
+    {
+      if: { focus: true },
+      tokens: { inputBorderColor: '#7c53a5', inputBorderWidth: 3 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBackgroundColor: '#e3e6e8',
+        inputBorderColor: 'rgba(0, 0, 0, 0)',
+        labelColor: '#676e73'
+      }
+    },
+    {
+      if: { checked: true, inactive: true },
+      tokens: {
+        checkedBackgroundColor: '#b2b9bf',
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#b2b9bf',
+        labelColor: '#676e73'
+      }
+    }
+  ],
+  tokens: {
+    checkedBackgroundColor: '#7c53a5',
+    checkedSize: 12,
+    containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    containerBorderRadius: 0,
+    containerOpacity: 1,
+    containerPaddingBottom: 0,
+    containerPaddingLeft: 2,
+    containerPaddingRight: 0,
+    containerPaddingTop: 0,
+    containerShadow: null,
+    descriptionFontName: 'HelveticaNow',
+    descriptionFontSize: 14,
+    descriptionFontWeight: '400',
+    descriptionLineHeight: 1.42857142857,
+    descriptionMarginLeft: null,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#676e73',
+    inputBorderWidth: 1,
+    inputOutlineColor: 'rgba(0, 0, 0, 0)',
+    inputOutlineWidth: 0,
+    inputSize: 20,
+    labelColor: '#414547',
+    labelFontName: 'HelveticaNow',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 10,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 2
+  }
+}

package/build/rn/RadioCard.js

@@ -0,0 +1,159 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', 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 ]
+    },
+    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: [ 'lg', 'xl' ] },
+      tokens: {
+        fontSize: 24,
+        lineHeight: 1.33333333333,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 24,
+        paddingTop: 16
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#676e73',
+        outerBorderColor: '#e3e6e8',
+        radioOuterBorderColor: '#e3e6e8',
+        radioOuterBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#676e73',
+        outerBorderGap: 2,
+        radioInputBorderColor: '#7c53a5',
+        radioInputBorderWidth: 3
+      }
+    },
+    {
+      description: 'Pressed state matches hover state plus light grey background',
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: '#676e73',
+        outerBorderColor: '#e3e6e8',
+        outerBorderGap: 0,
+        radioInputBorderColor: '#676e73',
+        radioInputBorderWidth: 1,
+        radioOuterBorderColor: '#e3e6e8',
+        radioOuterBorderWidth: 3
+      }
+    },
+    { if: { checked: true }, tokens: { borderColor: '#7c53a5' } },
+    {
+      if: { checked: true, hover: true },
+      tokens: { borderColor: '#4b286d' }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '#e12339',
+        color: '#e12339',
+        radioInputBorderColor: '#e12339'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#f4f4f7',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#676e73',
+        radioCheckedBackgroundColor: '#676e73',
+        radioInputBackgroundColor: '#b2b9bf',
+        radioInputBorderColor: 'transparent',
+        radioInputSize: 12,
+        radioOuterBorderColor: '#b2b9bf',
+        radioOuterBorderGap: 2,
+        radioOuterBorderWidth: 1
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#b2b9bf',
+    borderRadius: 6,
+    borderWidth: 1,
+    color: '#2c2e30',
+    contentAlignItems: 'stretch',
+    contentFlexGrow: 0,
+    contentFlexShrink: 1,
+    contentJustifyContent: 'flex-start',
+    contentSpace: 2,
+    flex: 1,
+    fontName: 'HelveticaNow',
+    fontSize: 20,
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 1.4,
+    minWidth: 264,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 2,
+    paddingBottom: 16,
+    paddingLeft: 10,
+    paddingRight: 16,
+    paddingTop: 16,
+    radioCheckedBackgroundColor: '#7c53a5',
+    radioCheckedSize: 12,
+    radioInputBackgroundColor: '#ffffff',
+    radioInputBorderColor: '#676e73',
+    radioInputBorderWidth: 1,
+    radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
+    radioInputOutlineWidth: 0,
+    radioInputSize: 20,
+    radioOuterBorderColor: 'transparent',
+    radioOuterBorderGap: 0,
+    radioOuterBorderWidth: 0,
+    radioSpace: 2,
+    shadow: null,
+    textTransform: 'none'
+  }
+}

package/build/rn/RadioCardGroup.js

@@ -0,0 +1,41 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    fullWidth: {
+      description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+      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: { fullWidth: null, viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: { direction: 'row', space: 5 }
+    }
+  ],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    direction: 'column',
+    fieldSpace: 3,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 3
+  }
+}

package/build/rn/RadioGroup.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    fieldSpace: 2,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 2
+  }
+}

package/build/rn/Ribbon.js

@@ -0,0 +1,74 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:52 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    purpose: {
+      type: 'variant',
+      values: [ 'offer', 'default', 'editorial', 'subtle' ]
+    },
+    wrap: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { purpose: 'editorial' },
+      tokens: { backgroundColor: '#676e73', curveBackgroundColor: '#2c2e30' }
+    },
+    {
+      if: { purpose: 'offer' },
+      tokens: {
+        gradient: {
+          angle: 135,
+          stops: [
+            { color: '#4b286d', stop: 0 },
+            { color: '#e53293', stop: 1 }
+          ],
+          type: 'linear'
+        }
+      }
+    },
+    {
+      if: { wrap: true },
+      tokens: { paddingLeft: 24, paddingRight: 24 }
+    },
+    {
+      if: { purpose: 'subtle' },
+      tokens: { backgroundColor: '#7c53a5' }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#613889',
+    borderRadius: 4,
+    borderRadiusBottomLeft: null,
+    borderRadiusBottomRight: null,
+    boxShadowColor: 'rgba(0, 0, 0, 0.1)',
+    boxShadowPaddingBottom: 2,
+    boxShadowPaddingLeft: 0,
+    boxShadowPaddingRight: 2,
+    boxShadowPaddingTop: 0,
+    curveAfterBackgroundColor: '#613889',
+    curveAfterHeight: 4,
+    curveAfterRadius: 0,
+    curveAfterWidth: 8,
+    curveBackgroundColor: '#3f2a54',
+    curveHeight: 10,
+    curveMarginTop: 4,
+    curveWidth: 8,
+    fontColor: '#ffffff',
+    fontName: 'HelveticaNow',
+    fontSize: 12,
+    fontWeight: '700',
+    gradient: null,
+    lineHeight: 1.33333333333,
+    paddingBottom: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4
+  }
+}