@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/build/rn/Box.js

@@ -0,0 +1,108 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    background: {
+      description: 'Background colour of box. White if not specified.',
+      type: 'variant',
+      values: [
+        'lightest',         'lighter',
+        'light',            'dark',
+        'darker',           'darkest',
+        'critical',         'danger',
+        'warning',          'positive',
+        'brand',            'white',
+        'black',            'featurePrimary',
+        'featureSecondary', 'featureNeutral',
+        'featureBrand'
+      ]
+    }
+  },
+  rules: [
+    {
+      if: { background: 'lightest' },
+      tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
+    },
+    {
+      if: { background: 'lighter' },
+      tokens: { backgroundColor: '#fafafa', borderColor: '#fafafa' }
+    },
+    {
+      if: { background: 'light' },
+      tokens: { backgroundColor: '#efefef', borderColor: '#efefef' }
+    },
+    {
+      if: { background: 'dark' },
+      tokens: { backgroundColor: '#666666', borderColor: '#666666' }
+    },
+    {
+      if: { background: 'darker' },
+      tokens: { backgroundColor: '#595959', borderColor: '#595959' }
+    },
+    {
+      if: { background: 'darkest' },
+      tokens: { backgroundColor: '#000000', borderColor: '#000000' }
+    },
+    {
+      if: { background: 'critical' },
+      tokens: { backgroundColor: '#c9370b', borderColor: '#c9370b' }
+    },
+    {
+      if: { background: 'danger' },
+      tokens: { backgroundColor: '#fcd3c6', borderColor: '#fcd3c6' }
+    },
+    {
+      if: { background: 'warning' },
+      tokens: { backgroundColor: '#fff5d2', borderColor: '#fff5d2' }
+    },
+    {
+      if: { background: 'positive' },
+      tokens: { backgroundColor: '#c5f2cc', borderColor: '#c5f2cc' }
+    },
+    {
+      if: { background: 'brand' },
+      tokens: { backgroundColor: '#7a3dfc', borderColor: '#7a3dfc' }
+    },
+    {
+      if: { background: 'white' },
+      tokens: { backgroundColor: '#ffffff', borderColor: '#ffffff' }
+    },
+    {
+      if: { background: 'black' },
+      tokens: { backgroundColor: '#000000', borderColor: '#000000' }
+    },
+    {
+      if: { background: 'featurePrimary' },
+      tokens: { backgroundColor: '#a1ed00', borderColor: '#a1ed00' }
+    },
+    {
+      if: { background: 'featureSecondary' },
+      tokens: { backgroundColor: '#ff0076', borderColor: '#ff0076' }
+    },
+    {
+      if: { background: 'featureNeutral' },
+      tokens: { backgroundColor: '#ffad00', borderColor: '#ffad00' }
+    },
+    {
+      if: { background: 'featureBrand' },
+      tokens: { backgroundColor: '#e0d8fc', borderColor: '#e0d8fc' }
+    }
+  ],
+  tokens: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderWidth: 0,
+    gradient: null
+  }
+}

package/build/rn/Breadcrumbs.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * 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')
+
+module.exports = {
+  appearances: { inverse: { type: 'variant', values: [ true ] } },
+  rules: [
+    {
+      if: { inverse: true },
+      tokens: {
+        color: '#ffffff',
+        currentColor: '#ffffff',
+        iconColor: '#c9c8c8'
+      }
+    }
+  ],
+  tokens: {
+    color: '#000000',
+    currentColor: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    icon: PaletteIconChevronRight,
+    iconColor: '#000000',
+    iconPadding: 4,
+    iconSize: 20,
+    listItemPadding: 0
+  }
+}

package/build/rn/Button.js

@@ -0,0 +1,401 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Mon, 08 Jan 2024 20:06:07 GMT
+ *
+ */
+
+
+
+module.exports = {
+  appearances: {
+    danger: {
+      description: 'Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.',
+      type: 'variant',
+      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 ]
+    },
+    inverse: {
+      description: 'Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in 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 ]
+    },
+    priority: {
+      description: 'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
+      type: 'variant',
+      values: [ 'high', 'low' ]
+    },
+    size: { type: 'variant', values: [ 'small' ] },
+    text: {
+      description: 'Text variant visually deprioritize the button styles',
+      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' ]
+    },
+    width: {
+      description: 'Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.',
+      type: 'variant',
+      values: [ 'full', 'responsive' ]
+    }
+  },
+  rules: [
+    {
+      if: { priority: 'high' },
+      tokens: { backgroundColor: '#000000', color: '#ffffff' }
+    },
+    {
+      if: { danger: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderBottomWidth: 1,
+        borderColor: '#c9370b',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#c9370b'
+      }
+    },
+    {
+      if: { inverse: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#000000',
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { priority: 'low' },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        color: '#000000',
+        outerBackgroundColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { hover: true },
+      tokens: { backgroundColor: '#404040', color: '#ffffff' }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#000000',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#ffffff',
+        outerBorderColor: '#000000',
+        outerBorderGap: 4,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true, priority: 'low' },
+      tokens: { borderBottomWidth: 1, outerBorderColor: '#000000' }
+    },
+    {
+      if: { focus: true, priority: 'low' },
+      tokens: { color: '#000000' }
+    },
+    {
+      if: { focus: true, hover: true, priority: 'low' },
+      tokens: { color: '#ffffff' }
+    },
+    {
+      if: { danger: true, focus: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: '#c9370b',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        borderWidth: 1,
+        color: '#c9370b',
+        outerBorderColor: '#c9370b',
+        outerBorderGap: 2
+      }
+    },
+    {
+      if: { hover: true, inverse: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#404040',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { inverse: true, pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
+    },
+    {
+      if: { focus: true, inverse: true },
+      tokens: {
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderTopWidth: 1,
+        color: '#000000',
+        outerBorderColor: '#ffffff',
+        outerBorderGap: 2
+      }
+    },
+    {
+      if: { danger: true, inverse: true },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderBottomWidth: 0,
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderLeftWidth: 0,
+        borderRightWidth: 0,
+        borderTopWidth: 0,
+        color: '#c9370b'
+      }
+    },
+    {
+      if: { focus: true, inverse: true, pressed: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        color: '#666666',
+        outerBorderGap: 2
+      }
+    },
+    { if: { width: 'full' }, tokens: { width: '100%' } },
+    {
+      if: { viewport: [ 'xs' ], width: 'responsive' },
+      tokens: { width: '100%' }
+    },
+    {
+      if: { size: 'small' },
+      tokens: {
+        minWidth: 0,
+        paddingBottom: 4,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 4
+      }
+    },
+    {
+      if: { text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        color: '#000000',
+        minWidth: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        textLine: 'underline'
+      }
+    },
+    {
+      if: { focus: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#000000',
+        outerBorderColor: '#000000'
+      }
+    },
+    {
+      if: { hover: true, text: true },
+      tokens: { color: '#404040', textLine: 'none' }
+    },
+    { if: { danger: true, text: true }, tokens: { color: '#c9370b' } },
+    {
+      if: { danger: true, focus: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#c9370b',
+        outerBorderColor: '#c9370b'
+      }
+    },
+    {
+      if: { hover: true, priority: 'low' },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 }
+    },
+    {
+      if: { pressed: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#595959',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { danger: true, hover: true },
+      tokens: { backgroundColor: '#f3592b', color: '#ffffff' }
+    },
+    {
+      if: { danger: true, hover: true, text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        color: '#f3592b',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { danger: true, pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#666666',
+        outerBorderGap: 0
+      }
+    },
+    {
+      if: { danger: true, pressed: true, text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#666666',
+        textLine: 'none'
+      }
+    },
+    {
+      if: { inverse: true, text: true },
+      tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
+    },
+    {
+      if: { focus: true, inverse: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#ffffff',
+        outerBorderColor: '#ffffff'
+      }
+    },
+    {
+      if: { hover: true, inverse: true, text: true },
+      tokens: { color: '#c9c8c8' }
+    },
+    {
+      if: { inverse: true, pressed: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#666666',
+        outerBorderColor: '#666666'
+      }
+    },
+    {
+      if: { inactive: true, inverse: true, text: true },
+      tokens: { borderColor: 'rgba(0, 0, 0, 0)', color: '#c9c8c8' }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        borderBottomWidth: 0,
+        color: '#666666',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      description: 'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        borderWidth: 0,
+        color: '#ffffff',
+        outerBorderColor: 'rgba(0, 0, 0, 0)'
+      }
+    },
+    {
+      if: { priority: 'low', text: true },
+      tokens: { color: '#7a3dfc' }
+    },
+    {
+      if: { hover: true, priority: 'low', text: true },
+      tokens: { color: '#5b2bc2', outerBorderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { focus: true, priority: 'low', text: true },
+      tokens: {
+        color: '#7a3dfc',
+        outerBorderColor: '#7a3dfc',
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { pressed: true, priority: 'low', text: true },
+      tokens: {
+        color: '#666666',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        outerBorderWidth: 0
+      }
+    },
+    {
+      if: { inactive: true, text: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#c9c8c8',
+        outerBorderColor: 'rgba(0, 0, 0, 0)',
+        textLine: 'none'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#000000',
+    borderBottomWidth: 0,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderLeftWidth: 1,
+    borderRadius: 4,
+    borderRightWidth: 1,
+    borderTopWidth: 1,
+    borderWidth: 1,
+    color: '#ffffff',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    height: null,
+    icon: null,
+    iconSize: 16,
+    iconSpace: 2,
+    lineHeight: 1.5,
+    minWidth: 144,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: null,
+    outerBorderWidth: 1,
+    paddingBottom: 12,
+    paddingLeft: 32,
+    paddingRight: 32,
+    paddingTop: 12,
+    shadow: null,
+    textAlign: 'center',
+    textLine: 'none',
+    textLineStyle: 'solid',
+    width: null
+  }
+}

package/build/rn/ButtonDropdown.js

@@ -0,0 +1,149 @@
+/*
+ *
+ * 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: {
+    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 ]
+    },
+    open: {
+      description: 'Applies when a ButtonDropdown is open.',
+      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 ]
+    },
+    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: { open: true }, tokens: { icon: PaletteIconChevronUp } },
+    { if: { focus: true }, tokens: { outerBorderColor: '#000000' } },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#666666',
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { focus: false, hover: true, pressed: false },
+      tokens: { backgroundColor: '#404040', borderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { focus: true, hover: true, pressed: false },
+      tokens: { backgroundColor: '#404040', borderColor: 'rgba(0, 0, 0, 0)' }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        color: '#ffffff',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        color: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: 'transparent'
+      }
+    },
+    {
+      if: { hover: true, selected: true },
+      tokens: { backgroundColor: '#404040' }
+    },
+    {
+      if: { focus: true, hover: false, selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        outerBorderColor: '#000000',
+        outerBorderGap: 2,
+        outerBorderWidth: 1
+      }
+    },
+    {
+      if: { hover: true, pressed: true, selected: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#666666',
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { focus: true, pressed: true, selected: true },
+      tokens: { backgroundColor: '#404040', outerBorderColor: '#404040' }
+    }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    color: '#000000',
+    dividerColor: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    icon: PaletteIconChevronDown,
+    iconAlignSelf: 'center',
+    iconBackground: 'rgba(0, 0, 0, 0)',
+    iconBorderRadius: 32,
+    iconColor: '#000000',
+    iconPadding: 4,
+    iconPosition: 'right',
+    iconSize: 20,
+    iconSpace: 0,
+    iconTranslateX: 0,
+    iconTranslateY: 0,
+    lineHeight: 1.5,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 2,
+    outerBorderWidth: 1,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingRight: 16,
+    paddingTop: 8,
+    shadow: null,
+    subtitleColor: '#000000',
+    textAlign: 'center',
+    width: null
+  }
+}