@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/build/rn/Listbox.js

@@ -0,0 +1,249 @@
+/*
+ *
+ * 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: {
+    current: {
+      description: 'When the current item is selected',
+      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 ]
+    },
+    isChild: {
+      description: 'when the item is child of another child',
+      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: false, hover: true, pressed: false },
+      tokens: {
+        groupBackgroundColor: '#efefef',
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        itemBackgroundColor: '#efefef'
+      }
+    },
+    {
+      if: { focus: true, pressed: false },
+      tokens: {
+        groupBorderColor: '#7a3dfc',
+        groupColor: '#7a3dfc',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderTopColor: '#7a3dfc'
+      }
+    },
+    {
+      if: { current: true },
+      tokens: {
+        groupBackgroundColor: '#000000',
+        groupBorderColor: '#000000',
+        groupColor: '#ffffff',
+        itemBackgroundColor: '#000000',
+        itemColor: '#ffffff'
+      }
+    },
+    {
+      if: { current: true, pressed: true },
+      tokens: { itemBackgroundColor: '#b5b4b4', itemColor: '#595959' }
+    },
+    {
+      if: { isChild: true },
+      tokens: {
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#000000',
+        itemBorderLeftWidth: 4,
+        itemBorderTopWidth: 0
+      }
+    },
+    {
+      if: { isChild: true, pressed: true },
+      tokens: {
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#595959',
+        itemBorderTopWidth: 0,
+        itemColor: '#595959'
+      }
+    },
+    {
+      if: { expanded: true },
+      tokens: {
+        groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+        groupBorderColor: 'rgba(0, 0, 0, 0)',
+        groupColor: '#ffffff',
+        groupIcon: PaletteIconChevronUp,
+        itemColor: '#595959'
+      }
+    },
+    {
+      if: { current: true, isChild: true },
+      tokens: {
+        itemBackgroundColor: '#000000',
+        itemBorderLeftColor: '#000000',
+        itemColor: '#ffffff'
+      }
+    },
+    {
+      if: { current: true, focus: false, hover: true },
+      tokens: {
+        itemBackgroundColor: '#efefef',
+        itemBorderLeftColor: '#efefef',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, focus: true, hover: true },
+      tokens: {
+        itemBackgroundColor: '#ffffff',
+        itemBorderLeftColor: '#7a3dfc'
+      }
+    },
+    {
+      if: { focus: true, isChild: true },
+      tokens: {
+        itemBackgroundColor: '#ffffff',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderBottomWidth: 1,
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderRightWidth: 1,
+        itemBorderTopColor: '#7a3dfc',
+        itemBorderTopWidth: 1,
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { hover: true, isChild: true },
+      tokens: {
+        itemBackgroundColor: '#efefef',
+        itemBorderBottomWidth: 0,
+        itemBorderLeftColor: '#666666',
+        itemBorderRightWidth: 0,
+        itemBorderTopWidth: 0,
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, expanded: true, focus: true },
+      tokens: {
+        groupBackgroundColor: '#000000',
+        groupBorderColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { current: true, expanded: true, hover: true },
+      tokens: {
+        groupBackgroundColor: '#efefef',
+        groupColor: '#666666',
+        itemBackgroundColor: '#efefef',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        groupBackgroundColor: '#ffffff',
+        groupBorderColor: '#7a3dfc',
+        groupColor: '#666666',
+        itemBackgroundColor: '#ffffff',
+        itemBorderBottomColor: '#7a3dfc',
+        itemBorderLeftColor: '#7a3dfc',
+        itemBorderRightColor: '#7a3dfc',
+        itemBorderTopColor: '#7a3dfc',
+        itemColor: '#666666'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        groupBackgroundColor: '#404040',
+        groupColor: '#666666',
+        itemBackgroundColor: '#404040',
+        itemBorderLeftColor: '#404040',
+        itemColor: '#666666'
+      }
+    }
+  ],
+  tokens: {
+    groupBackgroundColor: 'rgba(0, 0, 0, 0)',
+    groupBorderColor: 'rgba(0, 0, 0, 0)',
+    groupBorderRadius: 0,
+    groupBorderWidth: 1,
+    groupColor: '#666666',
+    groupFontName: 'StagSans',
+    groupFontSize: 16,
+    groupFontWeight: '400',
+    groupHeight: 32,
+    groupIcon: PaletteIconChevronDown,
+    groupPaddingBottom: 12,
+    groupPaddingLeft: 16,
+    groupPaddingRight: 16,
+    groupPaddingTop: 12,
+    itemBackgroundColor: 'rgba(0, 0, 0, 0)',
+    itemBorderBottomColor: 'rgba(0, 0, 0, 0)',
+    itemBorderBottomWidth: 1,
+    itemBorderLeftColor: 'rgba(0, 0, 0, 0)',
+    itemBorderLeftWidth: 1,
+    itemBorderRadius: 0,
+    itemBorderRightColor: 'rgba(0, 0, 0, 0)',
+    itemBorderRightWidth: 1,
+    itemBorderTopColor: 'rgba(0, 0, 0, 0)',
+    itemBorderTopWidth: 1,
+    itemBorderWidth: 0,
+    itemColor: '#666666',
+    itemDisplay: false,
+    itemFontName: 'StagSans',
+    itemFontSize: 16,
+    itemFontWeight: '400',
+    itemHeight: 32,
+    itemOutline: 0,
+    itemPaddingBottom: 8,
+    itemPaddingLeft: 16,
+    itemPaddingRight: 16,
+    itemPaddingTop: 8,
+    itemTextDecoration: 'none',
+    lineHeight: 1.5,
+    minHeight: '100%',
+    minWidth: '100%',
+    shadow: {
+      blur: 2,
+      color: 'rgba(0, 0, 0, 0.2)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 2,
+      spread: 0
+    }
+  }
+}

package/build/rn/Modal.js

@@ -0,0 +1,147 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
+
+module.exports = {
+  appearances: {
+    maxWidth: {
+      description: 'Whether a modal should expand responsively to the maximum of 8 layout columns width',
+      type: 'state',
+      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' ]
+    },
+    width: {
+      description: 'The width of the modal',
+      type: 'state',
+      values: [ 's', 'm', 'l', 'xl' ]
+    }
+  },
+  rules: [
+    {
+      if: { viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        direction: 'column',
+        height: '100%',
+        paddingBottom: 24,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        direction: 'row',
+        maxWidth: 576,
+        paddingBottom: 32,
+        paddingLeft: 32,
+        paddingRight: 32,
+        paddingTop: 32
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ], width: 's' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 320
+      }
+    },
+    {
+      if: { viewport: [ 'md', 'lg', 'xl' ], width: 'm' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 480
+      }
+    },
+    {
+      if: { viewport: [ 'lg', 'xl' ], width: 'l' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 630
+      }
+    },
+    {
+      if: { viewport: 'xl', width: 'xl' },
+      tokens: {
+        containerPaddingBottom: 32,
+        containerPaddingTop: 32,
+        maxWidth: 768
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'md' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 480
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'lg' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 630
+      }
+    },
+    {
+      if: { maxWidth: true, viewport: 'xl' },
+      tokens: {
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        maxWidth: 768
+      }
+    }
+  ],
+  tokens: {
+    backdropColor: '#000000',
+    backdropOpacity: 0.5,
+    backgroundColor: '#ffffff',
+    borderColor: '#ffffff',
+    borderRadius: 4,
+    cancelButtonColor: '#000000',
+    closeIcon: PaletteIconTimes,
+    closeIconColor: '#000000',
+    closeIconSize: 24,
+    closePadding: 4,
+    containerPaddingBottom: 0,
+    containerPaddingLeft: 0,
+    containerPaddingRight: 0,
+    containerPaddingTop: 0,
+    direction: 'row',
+    gap: 16,
+    headingColor: '#000000',
+    headingPaddingRight: 24,
+    height: null,
+    marginLeft: 24,
+    marginRight: 24,
+    maxWidth: '100%',
+    paddingBottom: 24,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 24,
+    shadow: {
+      blur: 0,
+      color: 'rgba(0, 0, 0, 0)',
+      inset: false,
+      offsetX: 0,
+      offsetY: 0,
+      spread: 0
+    },
+    subHeadingMarginTop: 8
+  }
+}

package/build/rn/MultiSelectFilter.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    maxHeight: {
+      description: 'Whether MultiselectFilter modal should expand responsively to content or a set maximu height',
+      type: 'state',
+      values: [ true ]
+    },
+    maxWidth: {
+      description: 'Whether MultiselectFilter modal should expand to content or a set maximuh width',
+      type: 'state',
+      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: [ 'xs' ] },
+      tokens: {
+        buttonDirection: 'column',
+        minHeight: '100%',
+        minWidth: '100%'
+      }
+    },
+    {
+      if: { maxHeight: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+      tokens: { maxHeightSize: 480 }
+    },
+    {
+      if: { maxWidth: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
+      tokens: { maxWidthSize: 544 }
+    }
+  ],
+  tokens: {
+    buttonDirection: 'row',
+    headerFontColor: '#000000',
+    headerFontName: 'StagSans',
+    headerFontSize: 24,
+    headerFontWeight: '700',
+    headerLineHeight: 1.33333333333,
+    maxHeightSize: 0,
+    maxWidthSize: 0,
+    minHeight: 412,
+    minWidth: 320,
+    subHeaderFontName: 'StagSans',
+    subHeaderFontSize: 16,
+    subHeaderFontWeight: '400',
+    subHeaderLineHeight: 1.5
+  }
+}

package/build/rn/NavigationBar.js

@@ -0,0 +1,144 @@
+/*
+ *
+ * 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 ]
+    },
+    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 ]
+    },
+    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 ]
+    },
+    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: { selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontWeight: '600',
+        outerBorderColor: '#000000'
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#000000', borderWidth: 4 }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        backgroundColor: '#595959',
+        borderColor: '#595959',
+        borderWidth: 1,
+        color: '#c9c8c8'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#595959',
+        borderColor: '#595959',
+        borderWidth: 1,
+        color: '#c9c8c8'
+      }
+    },
+    {
+      if: { viewport: [ 'xs', 'sm', 'md' ] },
+      tokens: { textAlign: 'space-between', width: 288 }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#ffffff',
+        fontName: 'StagSans',
+        fontWeight: '600'
+      }
+    },
+    {
+      if: { pressed: true, selected: true },
+      tokens: {
+        backgroundColor: '#595959',
+        borderColor: '#595959',
+        color: '#c9c8c8',
+        fontName: 'StagSans',
+        fontWeight: '600',
+        outerBorderColor: '#595959'
+      }
+    },
+    {
+      if: { expanded: true },
+      tokens: { icoMenu: PaletteIconChevronUp }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#ffffff',
+    borderRadius: 4,
+    borderWidth: 4,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    icoMenu: PaletteIconChevronDown,
+    lineHeight: 1.45,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 0,
+    outerBorderWidth: 0,
+    paddingBottom: 6,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 6,
+    shadow: null,
+    textAlign: 'center',
+    width: 0
+  }
+}