@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/rn/Callout.js

@@ -0,0 +1,32 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    rounded: { type: 'variant', values: [ true ] },
+    size: { type: 'variant', values: [ 'small' ] }
+  },
+  rules: [
+    {
+      if: { size: 'small' },
+      tokens: { paddingBottom: 4, paddingTop: 4 }
+    },
+    { if: { rounded: true }, tokens: { borderRadius: 4 } }
+  ],
+  tokens: {
+    background: '#7a3dfc',
+    borderRadius: 0,
+    color: '#ffffff',
+    gap: 16,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 8
+  }
+}

package/build/rn/Card.js

@@ -0,0 +1,171 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    background: {
+      description: 'Defines background related attributes of Card',
+      type: 'variant',
+      values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+    },
+    borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
+    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 ]
+    },
+    interactive: { type: 'variant', values: [ true ] },
+    padding: {
+      type: 'variant',
+      values: [ 'narrow', 'intermediate', 'compact', 'custom' ]
+    },
+    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: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
+    { if: { borderRadius: 'small' }, tokens: { borderRadius: 4 } },
+    { if: { borderRadius: 'large' }, tokens: { borderRadius: 8 } },
+    {
+      if: { background: 'alternative' },
+      tokens: { backgroundColor: '#e0d8fc', borderRadius: 8, borderWidth: 0 }
+    },
+    {
+      if: { background: 'subtle' },
+      tokens: { backgroundColor: '#a1ed00', borderWidth: 0 }
+    },
+    {
+      if: { background: 'grid' },
+      tokens: { borderColor: '#000000', borderWidth: 1 }
+    },
+    {
+      if: { background: 'feature' },
+      tokens: { backgroundColor: '#ffad00', borderRadius: 8, borderWidth: 0 }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        paddingBottom: 48,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 48
+      }
+    },
+    {
+      if: { padding: 'narrow' },
+      tokens: {
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 24
+      }
+    },
+    {
+      if: { padding: 'narrow', viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        paddingBottom: 32,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 32
+      }
+    },
+    {
+      if: { padding: 'intermediate' },
+      tokens: {
+        paddingBottom: 24,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24
+      }
+    },
+    {
+      if: { padding: 'intermediate', viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        paddingBottom: 32,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 32
+      }
+    },
+    {
+      if: { padding: 'compact' },
+      tokens: {
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16
+      }
+    },
+    {
+      if: { padding: 'custom' },
+      tokens: {
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0
+      }
+    },
+    {
+      if: { focus: false, interactive: true, pressed: false },
+      tokens: { borderColor: '#ffffff', borderWidth: 2 }
+    },
+    {
+      if: { hover: true, interactive: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderColor: 'transparent'
+      }
+    },
+    {
+      if: { focus: true, interactive: true },
+      tokens: { borderColor: '#000000', borderWidth: 2 }
+    },
+    {
+      if: { interactive: true, pressed: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        borderColor: '#c9c8c8',
+        borderWidth: 2
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#c9c8c8',
+    borderRadius: 8,
+    borderWidth: 1,
+    contentAlignItems: 'stretch',
+    contentFlexGrow: 0,
+    contentFlexShrink: 1,
+    contentJustifyContent: 'flex-start',
+    flex: 1,
+    gradient: null,
+    minWidth: null,
+    paddingBottom: 32,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 32,
+    shadow: null
+  }
+}

package/build/rn/Carousel.js

@@ -0,0 +1,36 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconChevronRight = require('@telus-uds/palette-koodo/build/rn/icons/ChevronRight')
+const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
+
+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: { showPanelTabs: false, showPreviousNextNavigation: false }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    nextIcon: PaletteIconChevronRight,
+    previousIcon: PaletteIconChevronLeft,
+    showPanelNavigation: true,
+    showPanelTabs: true,
+    showPreviousNextNavigation: true,
+    spaceBetweenSlideAndPanelNavigation: 32,
+    spaceBetweenSlideAndPreviousNextNavigation: 24,
+    stepTrackerCurrentBackgroundColor: '#ffffff'
+  }
+}

package/build/rn/CarouselTabsPanelItem.js

@@ -0,0 +1,151 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 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 ]
+    },
+    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: { 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 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: {
+        borderBottomColor: '#404040',
+        borderBottomWidth: 2,
+        color: '#404040'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomColor: '#000000',
+        borderBottomWidth: 4,
+        color: '#000000'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        borderBottomColor: '#666666',
+        borderBottomWidth: 2,
+        color: '#666666'
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: { borderBottomWidth: 4 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        borderBottomColor: '#c9c8c8',
+        borderBottomWidth: 4,
+        color: '#c9c8c8'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        borderBottomColor: '#000000',
+        borderBottomWidth: 2,
+        color: '#000000'
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 2,
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 4,
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: {
+        borderBottomColor: '#666666',
+        borderBottomWidth: 2,
+        color: '#666666'
+      }
+    },
+    { if: { inverse: true }, tokens: { color: '#ffffff' } },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: { borderBottomWidth: 4 }
+    },
+    {
+      if: { inactive: true, inverse: true },
+      tokens: {
+        borderBottomColor: '#c9c8c8',
+        borderBottomWidth: 4,
+        color: '#c9c8c8'
+      }
+    },
+    {
+      if: { inverse: true, selected: true },
+      tokens: {
+        borderBottomColor: '#ffffff',
+        borderBottomWidth: 4,
+        color: '#ffffff'
+      }
+    }
+  ],
+  tokens: {
+    alignItems: 'flex-start',
+    borderBottomColor: 'transparent',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
+    color: '#000000',
+    flex: 1,
+    fontName: 'StagSans',
+    fontScaleCap: 64,
+    fontSize: 14,
+    fontWeight: '600',
+    justifyContent: 'flex-start',
+    letterSpacing: 0,
+    lineHeight: 1.45,
+    paddingBottom: 16,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0
+  }
+}

package/build/rn/CarouselThumbnail.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 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: [ 'xs', 'sm' ] },
+      tokens: { alignItems: 'flex-start', size: 48 }
+    },
+    { if: { hover: true }, tokens: { borderColor: '#404040' } },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#000000', borderWidth: 2 }
+    },
+    {
+      if: { pressed: true },
+      tokens: { borderColor: '#666666', borderWidth: 2 }
+    }
+  ],
+  tokens: {
+    alignItems: 'center',
+    borderColor: '#efefef',
+    borderRadius: 8,
+    borderWidth: 1,
+    containerPaddingTop: 24,
+    margin: 4,
+    padding: 8,
+    selectedBorderColor: '#000000',
+    selectedBorderWidth: 2,
+    size: 72
+  }
+}

package/build/rn/Checkbox.js

@@ -0,0 +1,84 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
+
+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: { focus: true },
+      tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+    },
+    {
+      if: { hover: true },
+      tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBackgroundColor: '#c9c8c8',
+        inputBorderColor: 'rgba(0, 0, 0, 0)',
+        labelColor: '#666666'
+      }
+    },
+    {
+      if: { checked: true, inactive: true },
+      tokens: { iconBackgroundColor: '#c9c8c8', iconColor: '#ffffff' }
+    }
+  ],
+  tokens: {
+    containerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    feedbackMarginBottom: 0,
+    feedbackMarginTop: 12,
+    feedbackPosition: 'bottom',
+    icon: PaletteIconCheck,
+    iconBackgroundColor: '#ffffff',
+    iconColor: '#7a3dfc',
+    iconSize: 14,
+    inputBackgroundColor: '#ffffff',
+    inputBorderColor: '#000000',
+    inputBorderRadius: 0,
+    inputBorderWidth: 2,
+    inputHeight: 20,
+    inputOutlineColor: null,
+    inputOutlineOffset: 1,
+    inputOutlineWidth: 0,
+    inputShadow: null,
+    inputWidth: 20,
+    labelColor: '#000000',
+    labelFontName: 'StagSans',
+    labelFontSize: 16,
+    labelFontWeight: '400',
+    labelLineHeight: 1.5,
+    labelMarginLeft: 8
+  }
+}

package/build/rn/CheckboxCard.js

@@ -0,0 +1,168 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 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.3,
+        paddingBottom: 24,
+        paddingLeft: 16,
+        paddingRight: 24,
+        paddingTop: 16
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        borderColor: '#666666',
+        checkboxOuterBorderColor: '#000000',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        outerBorderColor: '#c9c8c8',
+        outerBorderWidth: 2
+      }
+    },
+    {
+      if: { checked: true },
+      tokens: {
+        borderColor: '#c9c8c8',
+        checkboxCheckedBackgroundColor: '#7a3dfc',
+        checkboxInputBorderColor: '#000000',
+        checkboxInputBorderWidth: 2
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: '#666666',
+        checkboxInputBorderColor: '#000000',
+        checkboxOuterBorderColor: '#000000',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    },
+    {
+      description: 'Pressed state matches hover state plus light grey background',
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#666666',
+        checkboxOuterBorderColor: '#000000',
+        checkboxOuterBorderGap: 2,
+        outerBorderColor: '#c9c8c8',
+        outerBorderGap: 0,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: 'transparent',
+        checkboxCheckedBackgroundColor: '#c9c8c8',
+        checkboxInputBackgroundColor: '#c9c8c8',
+        checkboxInputBorderColor: '#c9c8c8',
+        checkboxInputSize: 16,
+        checkboxOuterBorderColor: '#c9c8c8',
+        checkboxOuterBorderGap: 2,
+        checkboxOuterBorderWidth: 1,
+        color: '#666666'
+      }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '#df3d0c',
+        checkboxInputBorderColor: '#df3d0c',
+        color: '#df3d0c'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#c9c8c8',
+    borderRadius: 4,
+    borderWidth: 1,
+    checkboxCheckedBackgroundColor: '#000000',
+    checkboxCheckedSize: 16,
+    checkboxInputBackgroundColor: '#ffffff',
+    checkboxInputBorderColor: '#000000',
+    checkboxInputBorderWidth: 2,
+    checkboxInputOutlineColor: 'rgba(0, 0, 0, 0)',
+    checkboxInputOutlineWidth: 0,
+    checkboxInputSize: 24,
+    checkboxOuterBorderColor: 'transparent',
+    checkboxOuterBorderGap: 0,
+    checkboxOuterBorderWidth: 0,
+    checkboxSpace: 2,
+    color: '#000000',
+    contentAlignItems: 'stretch',
+    contentFlexGrow: 0,
+    contentFlexShrink: 1,
+    contentJustifyContent: 'flex-start',
+    contentSpace: 2,
+    flex: 1,
+    fontName: 'StagSans',
+    fontSize: 20,
+    fontWeight: '700',
+    letterSpacing: 0,
+    lineHeight: 1.4,
+    minWidth: 288,
+    outerBorderColor: 'transparent',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 16,
+    paddingLeft: 8,
+    paddingRight: 16,
+    paddingTop: 12,
+    shadow: null,
+    textTransform: 'none'
+  }
+}