@telus-uds/theme-koodo 5.3.0 → 5.5.0

package/build/web/Button.js

@@ -0,0 +1,253 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ *
+ */
+
+
+const theme = {
+  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 ]
+    },
+    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: { inverse: true, pressed: true },
+      tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
+    },
+    {
+      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: { 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: { danger: true, text: true }, tokens: { color: '#c9370b' } },
+    {
+      if: { pressed: true, text: true },
+      tokens: {
+        borderColor: 'rgba(0, 0, 0, 0)',
+        color: '#595959',
+        textLine: 'none'
+      }
+    },
+    {
+      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: { 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: { 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
+  }
+}
+export default theme

package/build/web/ButtonDropdown.js

@@ -0,0 +1,102 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ *
+ */
+
+import PaletteIconChevronDown from '@telus-uds/palette-koodo/build/rn/icons/ChevronDown'
+import PaletteIconChevronUp from '@telus-uds/palette-koodo/build/rn/icons/ChevronUp'
+const theme = {
+  appearances: {
+    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: { pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderColor: '#404040',
+        color: '#666666',
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#c9c8c8',
+        borderColor: '#c9c8c8',
+        color: '#ffffff',
+        iconColor: '#ffffff'
+      }
+    },
+    {
+      if: { selected: true },
+      tokens: {
+        backgroundColor: '#000000',
+        color: '#ffffff',
+        iconColor: '#ffffff',
+        outerBorderColor: 'transparent'
+      }
+    }
+  ],
+  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
+  }
+}
+export default theme

package/build/web/ButtonGroup.js

@@ -0,0 +1,40 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ *
+ */
+
+
+const theme = {
+  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' ]
+    },
+    width: {
+      description: 'Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.',
+      type: 'variant',
+      values: [ 'responsive' ]
+    }
+  },
+  rules: [
+    { if: { viewport: [ 'xs', 'sm' ] }, tokens: { space: 2 } },
+    { if: { viewport: [ 'md', 'lg', 'xl' ] }, tokens: { space: 3 } },
+    {
+      if: { viewport: [ 'xs' ], width: 'responsive' },
+      tokens: { alignItems: 'stretch', direction: 'column' }
+    }
+  ],
+  tokens: {
+    alignItems: 'center',
+    direction: 'row',
+    fieldSpace: 2,
+    flexGrow: 0,
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    space: 2
+  }
+}
+export default theme

package/build/web/ButtonGroupItem.js

@@ -0,0 +1,86 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    iconPosition: {
+      description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
+      type: 'state',
+      values: [ 'left', 'right' ]
+    },
+    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 ]
+    },
+    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 ]
+    },
+    width: {
+      description: 'Available in default, or responsive. Default-width expands based on content. Responsive automatically applies full-width when is displayed on the XS viewport.',
+      type: 'variant',
+      values: [ 'responsive' ]
+    }
+  },
+  rules: [
+    {
+      if: { selected: true },
+      tokens: { backgroundColor: '#7a3dfc', color: '#ffffff' }
+    },
+    {
+      if: { pressed: true },
+      tokens: { backgroundColor: '#404040', color: '#666666' }
+    },
+    {
+      if: { pressed: true, selected: true },
+      tokens: { backgroundColor: '#404040', color: '#666666' }
+    },
+    {
+      if: { inactive: true },
+      tokens: { backgroundColor: '#c9c8c8', borderWidth: 0, color: '#ffffff' }
+    },
+    { if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } },
+    { if: { width: 'responsive' }, tokens: { width: '100%' } }
+  ],
+  tokens: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    color: '#000000',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '600',
+    height: 48,
+    iconSize: 20,
+    iconSpace: 2,
+    lineHeight: 1.5,
+    minWidth: 0,
+    opacity: 1,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderGap: 3,
+    outerBorderWidth: 1,
+    paddingBottom: 8,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingTop: 8,
+    shadow: null,
+    textAlign: 'center',
+    width: null
+  }
+}
+export default theme

package/build/web/Callout.js

@@ -0,0 +1,32 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:19 GMT
+ *
+ */
+
+
+const theme = {
+  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
+  }
+}
+export default theme

package/build/web/Card.js

@@ -0,0 +1,148 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    background: {
+      description: 'Defines background related attributes of Card',
+      type: 'variant',
+      values: [ 'alternative', 'subtle', 'grid', 'feature' ]
+    },
+    borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
+    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: { interactive: true, pressed: false },
+      tokens: { borderColor: '#ffffff', 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
+  }
+}
+export default theme

package/build/web/Carousel.js

@@ -0,0 +1,36 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/ChevronRight'
+import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/ChevronLeft'
+const theme = {
+  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'
+  }
+}
+export default theme