@telus-uds/theme-koodo 7.3.0 → 7.4.0

package/build/rn/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:09 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:14 GMT
  *
  */
 

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:09 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:14 GMT
  *
  */
 
@@ -136,6 +136,7 @@ module.exports = {
     },
     ActivityIndicator: {
       appearances: {
+        dots: { type: 'variant', values: [ true ] },
         size: {
           description: 'used for full-screen spinners',
           type: 'variant',
@@ -143,7 +144,13 @@ module.exports = {
         }
       },
       rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
-      tokens: { color: '#ff0076', size: 24, thickness: 2 }
+      tokens: {
+        color: '#ff0076',
+        dotSize: 6,
+        indicatorBackgroundColor: '#ffd1e6',
+        size: 24,
+        thickness: 3
+      }
     },
     Autocomplete: {
       appearances: {},
@@ -1328,6 +1335,10 @@ module.exports = {
         }
       },
       rules: [
+        {
+          if: { interactive: true },
+          tokens: { backgroundColor: 'transparent' }
+        },
         {
           if: { interactive: true, isControl: true },
           tokens: { borderColor: '#c9c8c8', borderWidth: 1 }
@@ -1559,7 +1570,7 @@ module.exports = {
         {
           if: { hover: true, interactive: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
             borderColor: 'transparent'
           }
         },
@@ -1570,7 +1581,7 @@ module.exports = {
         {
           if: { interactive: true, pressed: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0.2)',
+            backgroundColor: 'rgba(0, 0, 0, 0.1)',
             borderColor: '#c9c8c8',
             borderWidth: 2
           }
@@ -1582,6 +1593,30 @@ module.exports = {
             borderColor: '#000000',
             borderWidth: 1
           }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'dark' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'darker' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'darkest' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'dark' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'darker' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'darkest' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
         }
       ],
       tokens: {
@@ -3615,6 +3650,10 @@ module.exports = {
           description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
           type: 'variant',
           values: [ 'micro', 'small', 'large' ]
+        },
+        style: {
+          type: 'variant',
+          values: [ 'inline', 'subtle', 'feature', 'danger', 'inverse' ]
         }
       },
       rules: [
@@ -3701,6 +3740,18 @@ module.exports = {
           if: { hover: true, quiet: true },
           tokens: { color: '#404040', textLine: 'underline' }
         },
+        {
+          if: { focus: true, quiet: true },
+          tokens: { color: '#000000', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, quiet: true },
+          tokens: { color: '#595959', textLine: 'underline' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true },
+          tokens: { color: '#595959', textLine: 'underline' }
+        },
         {
           if: { alternative: true, hover: true, quiet: true },
           tokens: { color: '#595959', textLine: 'underline' }
@@ -3708,6 +3759,236 @@ module.exports = {
         {
           if: { hover: true, inverse: true, quiet: true },
           tokens: { color: '#efefef', textLine: 'underline' }
+        },
+        { if: { style: 'inline' }, tokens: { color: '#000000' } },
+        {
+          if: { focus: true, style: 'inline' },
+          tokens: {
+            color: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'inline' },
+          tokens: { color: '#404040', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inline' },
+          tokens: { color: '#595959', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inline' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        { if: { style: 'subtle' }, tokens: { color: '#595959' } },
+        {
+          if: { focus: true, style: 'subtle' },
+          tokens: {
+            color: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'subtle' },
+          tokens: { color: '#404040', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'subtle' },
+          tokens: { color: '#595959', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        { if: { style: 'feature' }, tokens: { color: '#7a3dfc' } },
+        {
+          if: { focus: true, style: 'feature' },
+          tokens: {
+            color: '#7a3dfc',
+            outerBorderColor: '#7a3dfc',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'feature' },
+          tokens: { color: '#5b2bc2', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'feature' },
+          tokens: { color: '#595959', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'feature' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        { if: { style: 'danger' }, tokens: { color: '#c9370b' } },
+        {
+          if: { focus: true, style: 'danger' },
+          tokens: {
+            color: '#c9370b',
+            outerBorderColor: '#c9370b',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'danger' },
+          tokens: { color: '#c9370b', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'danger' },
+          tokens: { color: '#595959', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'danger' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        { if: { style: 'inverse' }, tokens: { color: '#ffffff' } },
+        {
+          if: { focus: true, style: 'inverse' },
+          tokens: {
+            color: '#ffffff',
+            outerBorderColor: '#ffffff',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'inverse' },
+          tokens: { color: '#efefef', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inverse' },
+          tokens: { color: '#666666', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#666666' }
+        },
+        {
+          if: { quiet: true, style: 'inline' },
+          tokens: { color: '#000000', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'inline' },
+          tokens: {
+            color: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderOutline: 'none',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inline' },
+          tokens: { color: '#404040', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inline' },
+          tokens: { color: '#595959' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inline' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        {
+          if: { quiet: true, style: 'subtle' },
+          tokens: { color: '#595959', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'subtle' },
+          tokens: {
+            color: '#000000',
+            outerBorderColor: '#000000',
+            outerBorderOutline: 'none',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#404040', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#595959' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        {
+          if: { quiet: true, style: 'feature' },
+          tokens: { color: '#7a3dfc', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'feature' },
+          tokens: {
+            color: '#7a3dfc',
+            outerBorderColor: '#7a3dfc',
+            outerBorderOutline: 'none',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'feature' },
+          tokens: { color: '#5b2bc2', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'feature' },
+          tokens: { color: '#595959' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'feature' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        {
+          if: { quiet: true, style: 'danger' },
+          tokens: { color: '#c9370b', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'danger' },
+          tokens: {
+            color: '#c9370b',
+            outerBorderColor: '#c9370b',
+            outerBorderOutline: 'none',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'danger' },
+          tokens: { color: '#c9370b', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'danger' },
+          tokens: { color: '#595959' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'danger' },
+          tokens: { outerBorderColor: '#595959' }
+        },
+        {
+          if: { quiet: true, style: 'inverse' },
+          tokens: { color: '#ffffff', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'inverse' },
+          tokens: {
+            color: '#ffffff',
+            outerBorderColor: '#ffffff',
+            outerBorderOutline: 'none',
+            textLine: 'none'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#efefef', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#666666' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#666666' }
         }
       ],
       tokens: {
@@ -4194,6 +4475,7 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        selected: { type: 'state', values: [ true ] },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -4216,6 +4498,13 @@ module.exports = {
         {
           if: { maxWidth: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
           tokens: { maxWidthSize: 544 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            buttonIconBackgroundColor: '#000000',
+            labelColor: '#ffffff'
+          }
         }
       ],
       tokens: {
@@ -4244,7 +4533,7 @@ module.exports = {
         labelPaddingLeft: 24,
         labelPaddingRight: 16,
         labelPaddingTop: 8,
-        maxHeightSize: 0,
+        maxHeightSize: 480,
         maxWidthSize: 0,
         minHeight: 0,
         minWidth: 320,
@@ -4417,7 +4706,7 @@ module.exports = {
       rules: [
         {
           if: { system: true, viewport: [ 'xl' ] },
-          tokens: { containerPaddingLeft: 16, containerPaddingRight: 16 }
+          tokens: { containerPaddingLeft: 0, containerPaddingRight: 0 }
         },
         {
           if: { system: true },
@@ -5610,10 +5899,10 @@ module.exports = {
         containerBackgroundColor: 'rgba(0, 0, 0, 0)',
         containerBorderRadius: 0,
         containerOpacity: 1,
-        containerPaddingBottom: 6,
-        containerPaddingLeft: 8,
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
         containerPaddingRight: 0,
-        containerPaddingTop: 6,
+        containerPaddingTop: 0,
         containerShadow: null,
         descriptionFontName: 'StagSans',
         descriptionFontSize: 14,
@@ -8535,5 +8824,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '4.2.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '4.3.0' }
 }

package/build/web/ActionCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/ActivityIndicator.js

@@ -1,13 +1,14 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 
 
 const theme = {
   appearances: {
+    dots: { type: 'variant', values: [ true ] },
     size: {
       description: 'used for full-screen spinners',
       type: 'variant',
@@ -15,6 +16,12 @@ const theme = {
     }
   },
   rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
-  tokens: { color: '#ff0076', size: 24, thickness: 2 }
+  tokens: {
+    color: '#ff0076',
+    dotSize: 6,
+    indicatorBackgroundColor: '#ffd1e6',
+    size: 24,
+    thickness: 3
+  }
 }
 export default theme

package/build/web/Autocomplete.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Badge.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/BlockQuote.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Box.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Breadcrumbs.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Button.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/ButtonDropdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/ButtonGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/ButtonGroupItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Callout.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Card.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 
@@ -61,6 +61,10 @@ const theme = {
     }
   },
   rules: [
+    {
+      if: { interactive: true },
+      tokens: { backgroundColor: 'transparent' }
+    },
     {
       if: { interactive: true, isControl: true },
       tokens: { borderColor: '#c9c8c8', borderWidth: 1 }
@@ -276,7 +280,7 @@ const theme = {
     {
       if: { hover: true, interactive: true },
       tokens: {
-        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
         borderColor: 'transparent'
       }
     },
@@ -287,7 +291,7 @@ const theme = {
     {
       if: { interactive: true, pressed: true },
       tokens: {
-        backgroundColor: 'rgba(0, 0, 0, 0.2)',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
         borderColor: '#c9c8c8',
         borderWidth: 2
       }
@@ -299,6 +303,30 @@ const theme = {
         borderColor: '#000000',
         borderWidth: 1
       }
+    },
+    {
+      if: { hover: true, interactive: true, style: 'dark' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+    },
+    {
+      if: { hover: true, interactive: true, style: 'darker' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+    },
+    {
+      if: { hover: true, interactive: true, style: 'darkest' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+    },
+    {
+      if: { interactive: true, pressed: true, style: 'dark' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+    },
+    {
+      if: { interactive: true, pressed: true, style: 'darker' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+    },
+    {
+      if: { interactive: true, pressed: true, style: 'darkest' },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
     }
   ],
   tokens: {

package/build/web/CardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Carousel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/CarouselTabsPanelItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/CarouselThumbnail.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */
 

package/build/web/Checkbox.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 04 Mar 2025 23:59:32 GMT
+ * Generated on Mon, 24 Mar 2025 16:22:40 GMT
  *
  */