@telus-uds/theme-koodo 5.3.0 → 5.4.0

package/build/rn/SideNavItem.js

@@ -0,0 +1,107 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    active: {
+      description: 'Used to mark currently active Item or and ItemGroup containing the currently active Item',
+      type: 'state',
+      values: [ true, false ]
+    },
+    expanded: {
+      description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
+      type: 'state',
+      values: [ true, false ]
+    },
+    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 ]
+    },
+    type: {
+      description: '`parent` being the toggle button for an ItemsGroup, and `child` an element of the ItemGroup',
+      type: 'state',
+      values: [ 'child', 'parent' ]
+    }
+  },
+  rules: [
+    {
+      if: { active: true },
+      tokens: { accentBackgroundColor: '#000000', backgroundColor: '#efefef' }
+    },
+    {
+      if: { type: 'child' },
+      tokens: {
+        accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 1.45,
+        paddingBottom: 12,
+        paddingLeft: 32,
+        paddingRight: 16,
+        paddingTop: 12
+      }
+    },
+    {
+      if: { active: true, expanded: true, type: 'parent' },
+      tokens: {
+        accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+        backgroundColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    { if: { hover: true }, tokens: { backgroundColor: '#efefef' } },
+    { if: { focus: true }, tokens: { backgroundColor: '#efefef' } },
+    {
+      if: { active: true, type: 'child' },
+      tokens: {
+        accentBackgroundColor: '#000000',
+        accentOffset: 24,
+        accentPadding: 16,
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        fontName: 'StagSans',
+        fontWeight: '600',
+        lineHeight: 1.5,
+        paddingBottom: 13,
+        paddingTop: 13
+      }
+    },
+    {
+      if: { active: false, hover: true, type: 'child' },
+      tokens: { accentBackgroundColor: 'rgba(0, 0, 0, 0)' }
+    }
+  ],
+  tokens: {
+    accentBackgroundColor: 'rgba(0, 0, 0, 0)',
+    accentOffset: 0,
+    accentPadding: 0,
+    accentWidth: 4,
+    backgroundColor: 'transparent',
+    borderColor: '#c9c8c8',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    justifyContent: 'space-between',
+    lineHeight: 1.5,
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 20,
+    paddingTop: 12
+  }
+}

package/build/rn/SideNavItemsGroup.js

@@ -0,0 +1,40 @@
+/*
+ *
+ * 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 ]
+    }
+  },
+  rules: [
+    {
+      if: { expanded: true },
+      tokens: { icon: PaletteIconChevronUp }
+    }
+  ],
+  tokens: {
+    collapseDuration: 250,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
+    expandDuration: 300,
+    icon: PaletteIconChevronDown,
+    iconColor: '#000000',
+    iconGap: 8,
+    iconPosition: 'right',
+    iconSize: 16,
+    justifyContent: 'space-between',
+    verticalAlign: 'middle'
+  }
+}

package/build/rn/Skeleton.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    animationDuration: 2000,
+    baseWidth: 40,
+    characters: 10,
+    color: '#c9c8c8',
+    radius: 99999999999999,
+    secondColor: '#efefef',
+    size: 3,
+    spaceBetweenLines: 2,
+    squareRadius: 4
+  }
+}

package/build/rn/SkipLink.js

@@ -0,0 +1,46 @@
+/*
+ *
+ * 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 ]
+    },
+    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: { focus: true, pressed: true },
+      tokens: { color: '#595959', outlineColor: '#595959' }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderRadius: 4,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 1.5,
+    outlineColor: '#000000',
+    outlineOffset: 0,
+    outlineStyle: 'solid',
+    outlineWidth: 2,
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+    textLine: 'underline'
+  }
+}

package/build/rn/Spinner.js

@@ -0,0 +1,18 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: { size: { type: 'variant', values: [ 'small' ] } },
+  rules: [ { if: { size: 'small' }, tokens: { size: 24, thickness: 2 } } ],
+  tokens: {
+    fullScreenOverLayBackground: 'rgba(255, 255, 255, 0.8)',
+    size: 48,
+    thickness: 4
+  }
+}

package/build/rn/SplashButton.js

@@ -0,0 +1,26 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
+
+module.exports = {
+  appearances: {
+    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 ]
+    }
+  },
+  rules: [],
+  tokens: {
+    buttonContentBackground: null,
+    buttonContentChildrenBackground: null,
+    playIcon: PaletteIconPlaySolid,
+    playIconColor: '#ffffff'
+  }
+}

package/build/rn/SplashButtonWithDetails.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconPlaySolid = require('@telus-uds/palette-koodo/build/rn/icons/PlaySolid')
+
+module.exports = {
+  appearances: {
+    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 ]
+    }
+  },
+  rules: [
+    {
+      if: { hover: true },
+      tokens: { buttonContentChildrenBackground: null }
+    }
+  ],
+  tokens: {
+    buttonBackground: '#ffffff',
+    buttonBorderColor: null,
+    buttonBottomPosition: 24,
+    buttonContentBackground: null,
+    buttonContentChildrenBackground: null,
+    buttonLeftPosition: 24,
+    buttonMinHeight: 64,
+    buttonPaddingLeft: 16,
+    buttonPaddingRight: 16,
+    buttonRadius: 32,
+    detailsContainerPadding: 8,
+    labelFontName: 'StagSans',
+    labelFontWeight: '600',
+    playIcon: PaletteIconPlaySolid,
+    playIconColor: '#ffffff',
+    playIconContainerBackground: '#000000'
+  }
+}

package/build/rn/StackView.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    alignItems: 'stretch',
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    width: null
+  }
+}

package/build/rn/StepTracker.js

@@ -0,0 +1,98 @@
+/*
+ *
+ * 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: {
+    inverse: {
+      description: 'Styles the step tracker for using on dark backgrounds.',
+      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: { viewport: [ 'lg', 'xl' ] },
+      tokens: { showStepLabel: true, showStepTrackerLabel: false }
+    },
+    {
+      if: { inverse: true },
+      tokens: {
+        completedIconColor: '#666666',
+        connectorColor: '#ffffff',
+        connectorCompletedColor: '#ffffff',
+        knobBackgroundColor: 'transparent',
+        knobBorderColor: '#ffffff',
+        knobCompletedBackgroundColor: '#ffffff',
+        knobCompletedBorderColor: 'transparent',
+        knobCurrentBackgroundColor: 'transparent',
+        knobCurrentBorderColor: '#ffffff',
+        knobCurrentInnerColor: '#ffffff',
+        labelColor: '#ffffff',
+        labelCurrentColor: '#ffffff',
+        stepLabelColor: '#ffffff'
+      }
+    }
+  ],
+  tokens: {
+    completedIcon: PaletteIconCheck,
+    completedIconColor: '#ffffff',
+    completedIconSize: 10,
+    connectorColor: '#000000',
+    connectorCompletedColor: '#000000',
+    connectorCompletedHeight: 3,
+    connectorHeight: 1,
+    connectorMinWidth: 16,
+    containerPaddingBottom: null,
+    containerPaddingLeft: null,
+    containerPaddingRight: null,
+    containerPaddingTop: null,
+    knobBackgroundColor: 'rgba(0, 0, 0, 0)',
+    knobBorderColor: '#000000',
+    knobBorderWidth: 1,
+    knobCompletedBackgroundColor: '#000000',
+    knobCompletedBorderColor: '#000000',
+    knobCompletedPaddingLeft: 1,
+    knobCompletedPaddingTop: 2,
+    knobCurrentBackgroundColor: '#000000',
+    knobCurrentBorderColor: '#000000',
+    knobCurrentBorderWidth: 1,
+    knobCurrentInnerColor: null,
+    knobCurrentInnerSize: null,
+    knobCurrentPaddingLeft: null,
+    knobCurrentPaddingTop: null,
+    knobSize: 15,
+    labelColor: '#000000',
+    labelCurrentColor: '#000000',
+    labelCurrentFontName: 'StagSans',
+    labelCurrentFontWeight: '600',
+    labelDirection: 'row',
+    labelFontName: 'StagSans',
+    labelFontSize: 16,
+    labelFontWeight: '600',
+    labelGap: 4,
+    labelLineHeight: 1.5,
+    labelMarginTop: 10,
+    labelPaddingLeft: 16,
+    labelPaddingRight: 16,
+    showStepLabel: false,
+    showStepName: true,
+    showStepTrackerLabel: true,
+    stepLabelColor: '#000000',
+    stepLabelFontName: 'StagSans',
+    stepLabelFontSize: 16,
+    stepLabelFontWeight: '600',
+    stepLabelLineHeight: 1.5,
+    textStepTrackerLabel: 2
+  }
+}

package/build/rn/StoryCard.js

@@ -0,0 +1,69 @@
+/*
+ *
+ * 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 ]
+    }
+  },
+  rules: [
+    { if: { hover: true }, tokens: { borderWidth: 2 } },
+    { if: { pressed: true }, tokens: { backgroundColor: '#efefef' } },
+    {
+      if: { focus: true },
+      tokens: {
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 2
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#c9c8c8',
+    borderRadius: 8,
+    borderWidth: 1,
+    contentAlignItems: 'stretch',
+    contentFlexGrow: 0,
+    contentFlexShrink: 0,
+    contentJustifyContent: 'flex-start',
+    flex: 1,
+    minWidth: 0,
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    shadow: {
+      blur: 0,
+      color: 'rgba(0, 0, 0, 0)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 0,
+      spread: 0
+    }
+  }
+}

package/build/rn/Table.js

@@ -0,0 +1,153 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    spacing: {
+      description: 'Adjusts the height of the table cell',
+      type: 'variant',
+      values: [ 'compact', 'default' ]
+    },
+    text: { type: 'variant', values: [ 'small' ] },
+    type: {
+      type: 'variant',
+      values: [ 'subHeading', 'rowHeading', 'heading', 'default' ]
+    }
+  },
+  rules: [
+    {
+      if: { spacing: 'compact' },
+      tokens: {
+        cellPaddingBottom: 8,
+        cellPaddingTop: 8,
+        fontSize: 16,
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { spacing: 'compact', type: 'rowHeading' },
+      tokens: {
+        cellPaddingBottom: 8,
+        cellPaddingTop: 8,
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { spacing: 'compact', type: 'subHeading' },
+      tokens: {
+        cellPaddingBottom: 8,
+        cellPaddingTop: 8,
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { spacing: 'default', type: 'heading' },
+      tokens: {
+        cellBackground: '#000000',
+        cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
+        fontColor: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.5
+      }
+    },
+    {
+      if: { spacing: 'compact', type: 'heading' },
+      tokens: {
+        cellBackground: '#000000',
+        cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
+        cellPaddingBottom: 8,
+        cellPaddingTop: 8,
+        fontColor: '#ffffff',
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.25
+      }
+    },
+    {
+      if: { text: 'small', type: 'subHeading' },
+      tokens: { fontName: 'StagSans', fontSize: 16, fontWeight: '600' }
+    },
+    {
+      if: { spacing: 'default', type: 'rowHeading' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '600',
+        lineHeight: 1.5
+      }
+    },
+    {
+      if: { text: 'small', type: 'default' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '400',
+        lineHeight: 1.42857142857
+      }
+    },
+    {
+      if: { text: 'small', type: 'rowHeading' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 1.42857142857
+      }
+    },
+    {
+      if: { spacing: 'compact', text: 'small', type: 'rowHeading' },
+      tokens: {
+        fontName: 'StagSans',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 1.14285714286
+      }
+    },
+    {
+      if: { spacing: 'compact', text: 'small', type: 'default' },
+      tokens: { lineHeight: 1.14285714286 }
+    }
+  ],
+  tokens: {
+    borderColor: '#efefef',
+    borderWidth: 1,
+    cellBackground: '#ffffff',
+    cellBoxShadowColor: '#efefef',
+    cellMinWidth: 0,
+    cellPaddingBottom: 16,
+    cellPaddingLeft: 16,
+    cellPaddingRight: 16,
+    cellPaddingTop: 16,
+    cellStickyShadow: {
+      blur: 8,
+      color: 'rgba(0, 0, 0, 0.1)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 4,
+      spread: 0
+    },
+    display: null,
+    fontColor: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    stickyBackgroundColor: '#ffffff',
+    tablePaddingBottom: 24
+  }
+}

package/build/rn/Tabs.js

@@ -0,0 +1,29 @@
+/*
+ *
+ * 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: {
+    equalWidth: {
+      description: 'Divide the available width equally among `TabsItem`',
+      type: 'variant',
+      values: [ true ]
+    }
+  },
+  rules: [],
+  tokens: {
+    borderBottomColor: 'transparent',
+    borderBottomWidth: 0,
+    buttonClearance: 32,
+    gutter: null,
+    nextIcon: PaletteIconChevronRight,
+    previousIcon: PaletteIconChevronLeft,
+    space: 0
+  }
+}