@telus-uds/theme-koodo 6.4.0 → 7.1.0

package/build/rn/SideNavItemsGroup.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 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 = {
+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',
@@ -37,4 +38,3 @@ const theme = {
     verticalAlign: 'middle'
   }
 }
-export default theme

package/build/rn/Skeleton.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {},
   rules: [],
   tokens: {
@@ -22,4 +23,3 @@ const theme = {
     squareRadius: 4
   }
 }
-export default theme

package/build/rn/SkipLink.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+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.",
@@ -43,4 +44,3 @@ const theme = {
     textLine: 'underline'
   }
 }
-export default theme

package/build/rn/Spinner.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: { size: { type: 'variant', values: [ 'small' ] } },
   rules: [ { if: { size: 'small' }, tokens: { size: 24, thickness: 2 } } ],
   tokens: {
@@ -15,4 +16,3 @@ const theme = {
     thickness: 4
   }
 }
-export default theme

package/build/rn/SplashButton.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
-const theme = {
+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.",
@@ -23,4 +24,3 @@ const theme = {
     playIconColor: '#ffffff'
   }
 }
-export default theme

package/build/rn/SplashButtonWithDetails.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
-const theme = {
+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.",
@@ -40,4 +41,3 @@ const theme = {
     playIconContainerBackground: '#000000'
   }
 }
-export default theme

package/build/rn/StackView.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {},
   rules: [],
   tokens: {
@@ -17,4 +18,3 @@ const theme = {
     width: null
   }
 }
-export default theme

package/build/rn/Status.js

@@ -1,17 +1,18 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconToolTipFilled from '@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled'
-import PaletteIconTooltip from '@telus-uds/palette-koodo/build/rn/icons/Tooltip'
-import PaletteIconCheckCircledFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled'
-import PaletteIconExclamationTriangle from '@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle'
-import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
-import PaletteIconTagFilled from '@telus-uds/palette-koodo/build/rn/icons/TagFilled'
-const theme = {
+const PaletteIconToolTipFilled = require('@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled')
+const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
+const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
+const PaletteIconExclamationTriangle = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle')
+const PaletteIconExclamationOctagon = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon')
+const PaletteIconTagFilled = require('@telus-uds/palette-koodo/build/rn/icons/TagFilled')
+
+module.exports = {
   appearances: {
     inverse: {
       description: 'Inverts the status colors',
@@ -178,4 +179,3 @@ const theme = {
     textLineHeight: 1.14285714286
   }
 }
-export default theme

package/build/rn/StepTracker.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
-const theme = {
+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.',
@@ -95,4 +96,3 @@ const theme = {
     textStepTrackerLabel: 2
   }
 }
-export default theme

package/build/rn/StoryCard.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+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.",
@@ -66,4 +67,3 @@ const theme = {
     }
   }
 }
-export default theme

package/build/rn/TabBar.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   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.',
@@ -31,4 +32,3 @@ const theme = {
     paddingTop: 4
   }
 }
-export default theme

package/build/rn/TabBarItem.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {
     focus: {
       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.',
@@ -64,4 +65,3 @@ const theme = {
     paddingTop: 4
   }
 }
-export default theme

package/build/rn/Table.js

@@ -1,13 +1,15 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {
+    highlight: { type: 'variant', values: [ 'row' ] },
     spacing: {
       description: 'Adjusts the height of the table cell',
       type: 'variant',
@@ -20,6 +22,13 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { highlight: 'row' },
+      tokens: {
+        cellBackground: 'rgba(0, 0, 0, 0)',
+        rowHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)'
+      }
+    },
     {
       if: { spacing: 'compact' },
       tokens: {
@@ -126,6 +135,9 @@ const theme = {
     borderColor: '#efefef',
     borderWidth: 1,
     cellBackground: '#ffffff',
+    cellBorderColor: 'rgba(0, 0, 0, 0)',
+    cellBorderTopWidth: 0,
+    cellBorderWidth: 0,
     cellBoxShadowColor: '#efefef',
     cellMinWidth: 0,
     cellPaddingBottom: 16,
@@ -146,8 +158,11 @@ const theme = {
     fontSize: 16,
     fontWeight: '400',
     lineHeight: 1.5,
+    rowBorderColor: 'rgba(0, 0, 0, 0)',
+    rowBorderTopWidth: 0,
+    rowBorderWidth: 0,
+    rowHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
     stickyBackgroundColor: '#ffffff',
     tablePaddingBottom: 24
   }
 }
-export default theme

package/build/rn/Tabs.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 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 = {
+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`',
@@ -26,4 +27,3 @@ const theme = {
     space: 0
   }
 }
-export default theme

package/build/rn/TabsItem.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {
     equalWidth: {
       description: 'Divide the available width equally among `TabsItem`',
@@ -41,7 +42,8 @@ const theme = {
     {
       if: { selected: true },
       tokens: {
-        backgroundColor: '#ffffff',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderRadius: 99,
         color: '#000000',
         highlightBarBorderWidth: 1,
         highlightBarHeight: 1,
@@ -51,28 +53,50 @@ const theme = {
     {
       if: { hover: true },
       tokens: {
-        backgroundColor: '#efefef',
-        highlightBarBorderWidth: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderRadius: 99,
+        highlightBarBorderWidth: 0,
         highlightBarHeight: 1,
         highlightColor: '#c9c8c8'
       }
     },
     {
-      if: { focus: true },
+      if: { pressed: true },
       tokens: {
-        backgroundColor: '#ffffff',
+        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        borderRadius: 99,
+        highlightBarBorderWidth: 0
+      }
+    },
+    {
+      if: { focus: true, selected: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        borderColor: '#000000',
+        borderRadius: 99,
+        borderWidth: 2,
+        color: '#000000',
         highlightBarBorderWidth: 1,
         highlightBarHeight: 1,
-        highlightColor: '#666666'
+        highlightColor: '#000000'
       }
     },
     {
-      if: { pressed: true },
-      tokens: { backgroundColor: '#c9c8c8', highlightBarBorderWidth: 0 }
+      if: { hover: true, selected: true },
+      tokens: {
+        highlightBarBorderWidth: 1,
+        highlightBarHeight: 1,
+        highlightColor: '#000000'
+      }
     },
     {
-      if: { focus: true, selected: true },
-      tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
+      if: { focus: true },
+      tokens: {
+        borderColor: '#000000',
+        borderRadius: 99,
+        borderWidth: 2,
+        color: '#000000'
+      }
     },
     {
       if: { inverse: true },
@@ -81,38 +105,58 @@ const theme = {
     {
       if: { inverse: true, selected: true },
       tokens: {
-        color: '#c9c8c8',
+        backgroundColor: '#ffffff',
+        borderRadius: 99,
+        color: '#000000',
         highlightBarBorderWidth: 1,
         highlightBarHeight: 1,
-        highlightColor: '#c9c8c8'
+        highlightColor: '#ffffff'
       }
     },
     {
       if: { hover: true, inverse: true },
-      tokens: { color: '#efefef' }
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderRadius: 99,
+        color: '#ffffff'
+      }
+    },
+    {
+      if: { focus: true, inverse: true, selected: true },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        borderColor: '#ffffff',
+        borderRadius: 99,
+        borderWidth: 2,
+        color: '#000000'
+      }
     },
     {
       if: { focus: true, inverse: true },
       tokens: {
-        color: '#ffffff',
-        highlightBarBorderWidth: 1,
-        highlightBarHeight: 1,
-        highlightColor: '#ffffff'
+        borderColor: '#ffffff',
+        borderRadius: 99,
+        borderWidth: 2,
+        color: '#ffffff'
       }
     },
     {
       if: { inverse: true, pressed: true },
-      tokens: { color: '#c9c8c8', highlightBarBorderWidth: 0 }
+      tokens: {
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        borderRadius: 99,
+        highlightBarBorderWidth: 0
+      }
     },
     { if: { focus: true, inverse: true, selected: true }, tokens: {} },
     { if: { equalWidth: true }, tokens: { maxWidth: null } }
   ],
   tokens: {
-    backgroundColor: '#ffffff',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
     borderColor: 'transparent',
     borderRadius: 0,
     borderWidth: 0,
-    color: '#666666',
+    color: '#000000',
     fontName: 'StagSans',
     fontScaleCap: 64,
     fontSize: 16,
@@ -124,12 +168,13 @@ const theme = {
     highlightTriangleSize: 0,
     letterSpacing: 0,
     lineHeight: 1.5,
+    marginHorizontal: 4,
+    marginVertical: 0,
     maxWidth: null,
     paddingHorizontal: 24,
     paddingVertical: 4,
-    space: 0,
+    space: 1,
     textAlign: 'center',
     textTransform: 'none'
   }
 }
-export default theme

package/build/rn/Tags.js

@@ -1,12 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = {
+
+module.exports = {
   appearances: {
     viewport: {
       description: 'The size label for the current screen viewport based on the current screen width',
@@ -24,4 +25,3 @@ const theme = {
     space: 1
   }
 }
-export default theme

package/build/rn/TagsItem.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconAdd from '@telus-uds/palette-koodo/build/rn/icons/Add'
-import PaletteIconClose from '@telus-uds/palette-koodo/build/rn/icons/Close'
-const theme = {
+const PaletteIconAdd = require('@telus-uds/palette-koodo/build/rn/icons/Add')
+const PaletteIconClose = require('@telus-uds/palette-koodo/build/rn/icons/Close')
+
+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.",
@@ -156,4 +157,3 @@ const theme = {
     textAlign: 'center'
   }
 }
-export default theme

package/build/rn/TermsAndConditions.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 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 = {
+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',
@@ -138,4 +139,3 @@ const theme = {
     unorderedPadding: 12
   }
 }
-export default theme

package/build/rn/Testimonial.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
-import PaletteIconQuoteLeft from '@telus-uds/palette-koodo/build/rn/icons/QuoteLeft'
-import PaletteIconQuoteRightArrow from '@telus-uds/palette-koodo/build/rn/icons/QuoteRightArrow'
-const theme = {
+const PaletteIconQuoteLeft = require('@telus-uds/palette-koodo/build/rn/icons/QuoteLeft')
+const PaletteIconQuoteRightArrow = require('@telus-uds/palette-koodo/build/rn/icons/QuoteRightArrow')
+
+module.exports = {
   appearances: {
     viewport: {
       description: 'The size label for the current screen viewport based on the current screen width',
@@ -55,4 +56,3 @@ const theme = {
     textColor: '#000000'
   }
 }
-export default theme

package/build/rn/TextArea.js

@@ -1,10 +1,10 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jan 2025 21:04:33 GMT
+ * Generated on Mon, 10 Feb 2025 17:29:04 GMT
  *
  */
 
 
-const theme = { appearances: {}, rules: [], tokens: { maxLines: 4, minLines: 2 } }
-export default theme
+
+module.exports = { appearances: {}, rules: [], tokens: { maxLines: 4, minLines: 2 } }