@telus-uds/theme-allium 7.12.1 → 7.14.0

package/build/web/TabsItem.js

@@ -1,13 +1,19 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 
-
+import PaletteIconCaretDown from '@telus-uds/palette-allium/build/rn/icons/CaretDown'
+import PaletteIconCaretUp from '@telus-uds/palette-allium/build/rn/icons/CaretUp'
 const theme = {
   appearances: {
+    dropdown: {
+      description: 'activate the dropdown menu',
+      type: 'variant',
+      values: [ true ]
+    },
     equalWidth: {
       description: 'Divide the available width equally among `TabsItem`',
       type: 'variant',
@@ -33,6 +39,11 @@ const theme = {
       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: [
@@ -97,7 +108,97 @@ const theme = {
       if: { focus: true, inverse: true },
       tokens: { borderColor: '#ffffff', highlightColor: '#ffffff' }
     },
-    { if: { equalWidth: true }, tokens: { maxWidth: null } }
+    { if: { equalWidth: true }, tokens: { maxWidth: null } },
+    {
+      if: { dropdown: true, viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        borderColor: 'rgba(0, 0, 0, 0)',
+        borderRadius: 32,
+        borderWidth: 3,
+        color: '#676e73',
+        paddingHorizontal: 21,
+        paddingVertical: 5
+      }
+    },
+    {
+      if: { dropdown: true, hover: true, viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderWidth: 3
+      }
+    },
+    {
+      if: { dropdown: true, focus: true, viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        borderColor: '#4b286d',
+        borderWidth: 2,
+        color: '#4b286d',
+        paddingHorizontal: 22,
+        paddingVertical: 6
+      }
+    },
+    {
+      if: { dropdown: true, pressed: true, viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        backgroundColor: '#4b286d',
+        borderColor: '#4b286d',
+        color: '#ffffff',
+        paddingHorizontal: 24,
+        paddingVertical: 8
+      }
+    },
+    {
+      if: { dropdown: true, selected: true, viewport: [ 'xs', 'sm' ] },
+      tokens: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        borderWidth: 0,
+        color: '#4b286d',
+        paddingHorizontal: 24,
+        paddingVertical: 8
+      }
+    },
+    {
+      if: { dropdown: true, inverse: true, viewport: [ 'xs', 'sm' ] },
+      tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)', color: '#ffffff' }
+    },
+    {
+      if: {
+        dropdown: true,
+        hover: true,
+        inverse: true,
+        viewport: [ 'xs', 'sm' ]
+      },
+      tokens: { borderColor: '#ffffff' }
+    },
+    {
+      if: {
+        dropdown: true,
+        inverse: true,
+        selected: true,
+        viewport: [ 'xs', 'sm' ]
+      },
+      tokens: { backgroundColor: '#ffffff', color: '#414547' }
+    },
+    {
+      if: {
+        dropdown: true,
+        inverse: true,
+        pressed: true,
+        viewport: [ 'xs', 'sm' ]
+      },
+      tokens: { backgroundColor: '#ffffff', color: '#414547' }
+    },
+    {
+      if: {
+        dropdown: true,
+        focus: true,
+        inverse: true,
+        viewport: [ 'xs', 'sm' ]
+      },
+      tokens: { borderColor: '#ffffff' }
+    }
   ],
   tokens: {
     backgroundColor: 'transparent',
@@ -105,6 +206,8 @@ const theme = {
     borderRadius: 32,
     borderWidth: 0,
     color: '#676e73',
+    dropdownIcon: PaletteIconCaretDown,
+    dropdownIconExpanded: PaletteIconCaretUp,
     fontName: 'HNforTELUSSA',
     fontScaleCap: 64,
     fontSize: 14,

package/build/web/Tags.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/TagsItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/TermsAndConditions.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Testimonial.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/TextArea.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/TextInput.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Timeline.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Toast.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/ToggleSwitch.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/ToggleSwitchGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Tooltip.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/TooltipButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Typography.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/Video.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoControlBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoMenu.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoMiddleControlButton.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoPicker.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoPickerSlider.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoPickerThumbnail.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoProgressBar.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/VideoVolumeSlider.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/WaffleGrid.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 25 Jul 2025 04:08:41 GMT
+ * Generated on Thu, 04 Sep 2025 06:45:43 GMT
  *
  */
 

package/build/web/index.js

@@ -116,5 +116,5 @@ export { default as VideoProgressBar } from './VideoProgressBar'
 export { default as VideoVolumeSlider } from './VideoVolumeSlider'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as spacingScale } from './spacingScale'
-export const metadata = { name: 'theme-allium', themeTokensVersion: '4.11.0'}
+export const metadata = { name: 'theme-allium', themeTokensVersion: '4.13.0'}
 export { default } from './theme'