@telus-uds/theme-koodo 5.3.0 → 5.5.0

package/build/web/RadioCard.js

@@ -0,0 +1,132 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    checked: {
+      description: 'Corresponds to a selected state for a checkbox or radio',
+      type: 'state',
+      values: [ true ]
+    },
+    error: { type: 'state', 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 ]
+    },
+    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: { checked: true },
+      tokens: {
+        borderColor: '#c9c8c8',
+        radioCheckedBackgroundColor: '#7a3dfc',
+        radioInputBorderColor: '#000000',
+        radioInputBorderWidth: 2
+      }
+    },
+    {
+      description: 'Pressed state matches hover state plus light grey background',
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#666666',
+        outerBorderColor: '#c9c8c8',
+        outerBorderGap: 0,
+        outerBorderWidth: 1,
+        radioOuterBorderColor: '#000000',
+        radioOuterBorderGap: 2
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: 'transparent',
+        color: '#666666',
+        radioCheckedBackgroundColor: '#c9c8c8',
+        radioInputBackgroundColor: '#c9c8c8',
+        radioInputBorderColor: '#c9c8c8',
+        radioInputSize: 16,
+        radioOuterBorderColor: '#c9c8c8',
+        radioOuterBorderGap: 2,
+        radioOuterBorderWidth: 1
+      }
+    },
+    {
+      if: { error: true },
+      tokens: {
+        borderColor: '#df3d0c',
+        color: '#df3d0c',
+        radioInputBorderColor: '#df3d0c'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#c9c8c8',
+    borderRadius: 4,
+    borderWidth: 1,
+    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,
+    radioCheckedBackgroundColor: '#000000',
+    radioCheckedSize: 16,
+    radioInputBackgroundColor: '#ffffff',
+    radioInputBorderColor: '#000000',
+    radioInputBorderWidth: 2,
+    radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
+    radioInputOutlineWidth: 0,
+    radioInputSize: 24,
+    radioOuterBorderColor: 'transparent',
+    radioOuterBorderGap: 0,
+    radioOuterBorderWidth: 0,
+    radioSpace: 2,
+    shadow: null,
+    textTransform: 'none'
+  }
+}
+export default theme

package/build/web/RadioCardGroup.js

@@ -0,0 +1,41 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    fullWidth: {
+      description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+      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: { fullWidth: null, viewport: [ 'md', 'lg', 'xl' ] },
+      tokens: { direction: 'row', space: 5 }
+    }
+  ],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    direction: 'column',
+    fieldSpace: 3,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 3
+  }
+}
+export default theme

package/build/web/RadioGroup.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+    borderTopLeftRadius: 1,
+    borderTopRightRadius: 1,
+    fieldSpace: 2,
+    outlineOffset: 8,
+    outlineWidth: 1,
+    showIcon: true,
+    space: 2
+  }
+}
+export default theme

package/build/web/Ribbon.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {
+    purpose: {
+      type: 'variant',
+      values: [ 'offer', 'default', 'editorial', 'subtle' ]
+    },
+    wrap: { type: 'variant', values: [ true ] }
+  },
+  rules: [
+    {
+      if: { purpose: 'editorial' },
+      tokens: { backgroundColor: '#ffad00' }
+    },
+    {
+      if: { purpose: 'offer' },
+      tokens: { backgroundColor: '#7a3dfc' }
+    },
+    {
+      if: { purpose: 'subtle' },
+      tokens: { backgroundColor: '#a1ed00' }
+    },
+    { if: { wrap: true }, tokens: { paddingBottom: 6, paddingTop: 6 } }
+  ],
+  tokens: {
+    backgroundColor: '#a1ed00',
+    borderRadius: 4,
+    borderRadiusBottomLeft: null,
+    borderRadiusBottomRight: null,
+    boxShadowColor: null,
+    boxShadowPaddingBottom: null,
+    boxShadowPaddingLeft: null,
+    boxShadowPaddingRight: null,
+    boxShadowPaddingTop: null,
+    curveAfterBackgroundColor: null,
+    curveAfterHeight: null,
+    curveAfterRadius: null,
+    curveAfterWidth: null,
+    curveBackgroundColor: null,
+    curveHeight: null,
+    curveMarginTop: null,
+    curveWidth: null,
+    fontColor: '#000000',
+    fontName: 'StagSans',
+    fontSize: 14,
+    fontWeight: '600',
+    gradient: null,
+    lineHeight: 1.42857142857,
+    paddingBottom: 2,
+    paddingLeft: 12,
+    paddingRight: 12,
+    paddingTop: 2
+  }
+}
+export default theme

package/build/web/Search.js

@@ -0,0 +1,62 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+import PaletteIconTimes from '@telus-uds/palette-koodo/build/rn/icons/Times'
+import PaletteIconSpyglass from '@telus-uds/palette-koodo/build/rn/icons/Spyglass'
+const theme = {
+  appearances: {
+    focus: {
+      description: 'Focus states for some input elements are well supported across web, RN, ios and android',
+      type: 'state',
+      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 ]
+    }
+  },
+  rules: [
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#7a3dfc', borderWidth: 3, outerBorderWidth: 0 }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#efefef',
+        color: '#666666',
+        placeholderColor: '#000000'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    buttonsGap: 2,
+    clearButtonIcon: PaletteIconTimes,
+    color: '#666666',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    outerBackgroundColor: '#404040',
+    outerBorderColor: '#404040',
+    outerBorderRadius: 32,
+    outerBorderWidth: 0,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 6,
+    paddingTop: 12,
+    placeholderColor: '#000000',
+    submitButtonIcon: PaletteIconSpyglass
+  }
+}
+export default theme

package/build/web/SearchButton.js

@@ -0,0 +1,67 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+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 ]
+    },
+    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: '', type: 'variant', values: [ 'high' ] }
+  },
+  rules: [
+    {
+      if: { priority: 'high' },
+      tokens: { backgroundColor: '#000000', iconColor: '#ffffff' }
+    },
+    {
+      if: { pressed: true },
+      tokens: {
+        backgroundColor: '#404040',
+        borderWidth: 0,
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { inactive: true, priority: 'high' },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderWidth: 0,
+        iconColor: '#666666'
+      }
+    },
+    {
+      if: { inactive: true, priority: null },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        iconColor: 'rgba(0, 0, 0, 0)'
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: null,
+    borderColor: 'rgba(0, 0, 0, 0)',
+    borderRadius: 32,
+    borderWidth: 0,
+    iconColor: '#000000',
+    iconSize: 20,
+    opacity: 1,
+    paddingBottom: 8,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 8,
+    shadow: null
+  }
+}
+export default theme

package/build/web/Select.js

@@ -0,0 +1,87 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+import PaletteIconChevronDown from '@telus-uds/palette-koodo/build/rn/icons/ChevronDown'
+import PaletteIconCheckCircleFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled'
+import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
+const theme = {
+  appearances: {
+    focus: {
+      description: 'Focus states for some input elements are well supported across web, RN, ios and android',
+      type: 'state',
+      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 ]
+    },
+    validation: {
+      description: 'Validation states for form inputs',
+      type: 'state',
+      values: [ 'error', 'success', 'warning' ]
+    }
+  },
+  rules: [
+    {
+      if: { focus: true },
+      tokens: { borderColor: '#7a3dfc', borderWidth: 3 }
+    },
+    {
+      if: { validation: 'success' },
+      tokens: {
+        borderColor: '#1c7b2b',
+        feedbackBackgroundColor: '#c5f2cc',
+        validationIcon: PaletteIconCheckCircleFilled,
+        validationIconColor: '#1c7b2b'
+      }
+    },
+    {
+      if: { validation: 'error' },
+      tokens: {
+        borderColor: '#c9370b',
+        feedbackBackgroundColor: '#fcd3c6',
+        validationIcon: PaletteIconExclamationOctagon,
+        validationIconColor: '#c9370b'
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: '#efefef',
+        borderColor: '#efefef',
+        icon: null
+      }
+    }
+  ],
+  tokens: {
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 4,
+    borderWidth: 1,
+    color: '#666666',
+    feedbackBackgroundColor: '#e0d8fc',
+    fontName: 'StagSans',
+    fontSize: 16,
+    fontWeight: '400',
+    height: 48,
+    icon: PaletteIconChevronDown,
+    iconColor: '#000000',
+    iconSize: 24,
+    outerBackgroundColor: 'rgba(0, 0, 0, 0)',
+    outerBorderColor: 'rgba(0, 0, 0, 0)',
+    outerBorderWidth: 2,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    validationIcon: null,
+    validationIconColor: 'rgba(0, 0, 0, 0)',
+    validationIconSize: 24
+  }
+}
+export default theme

package/build/web/SideNav.js

@@ -0,0 +1,14 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: { borderColor: '#c9c8c8', borderStyle: 'solid', borderWidth: 1 }
+}
+export default theme

package/build/web/SideNavItem.js

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

package/build/web/SideNavItemsGroup.js

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

package/build/web/Skeleton.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Do not edit directly
+ * Generated on Thu, 18 Jan 2024 22:41:20 GMT
+ *
+ */
+
+
+const theme = {
+  appearances: {},
+  rules: [],
+  tokens: {
+    animationDuration: 2000,
+    baseWidth: 40,
+    characters: 10,
+    color: '#c9c8c8',
+    radius: 99999999999999,
+    secondColor: '#efefef',
+    size: 3,
+    spaceBetweenLines: 2,
+    squareRadius: 4
+  }
+}
+export default theme

package/build/web/SkipLink.js

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

package/build/web/Spinner.js

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