@telus-uds/theme-allium 7.23.1 → 8.0.0-alpha.1

package/build/ios/theme.json

@@ -2564,10 +2564,6 @@
     },
     "Card": {
       "appearances": {
-        "background": {
-          "type": "variant",
-          "values": ["alternative", "subtle", "grid", "feature", "plain"]
-        },
         "borderRadius": {
           "type": "variant",
           "values": ["none", "small", "large"]
@@ -2715,99 +2711,6 @@
             "borderRadius": 12
           }
         },
-        {
-          "if": {
-            "background": "alternative"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.95686,
-              "green": 0.95686,
-              "blue": 0.96863,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "subtle"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.98039,
-              "green": 0.98039,
-              "blue": 0.98039,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "feature"
-          },
-          "tokens": {
-            "borderColor": {
-              "red": 0.29412,
-              "green": 0.15686,
-              "blue": 0.42745,
-              "alpha": 1
-            },
-            "borderWidth": 2,
-            "gradient": {
-              "type": "linear",
-              "angle": 135,
-              "stops": [
-                {
-                  "stop": 0,
-                  "hint": 0.75,
-                  "color": {
-                    "red": 0.29412,
-                    "green": 0.15686,
-                    "blue": 0.42745,
-                    "alpha": 1
-                  }
-                },
-                {
-                  "stop": 1,
-                  "color": {
-                    "red": 0.89804,
-                    "green": 0.19608,
-                    "blue": 0.57647,
-                    "alpha": 1
-                  }
-                }
-              ]
-            }
-          }
-        },
-        {
-          "if": {
-            "background": "grid"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.98039,
-              "green": 0.98039,
-              "blue": 0.98039,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
-        {
-          "if": {
-            "background": "plain"
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderWidth": 0
-          }
-        },
         {
           "if": {
             "style": "grid"
@@ -3788,6 +3691,7 @@
         "containerPaddingTop": 24,
         "margin": 4,
         "padding": 8,
+        "playIcon": "PaletteIconPlaySolid",
         "selectedBorderColor": {
           "red": 0.40392,
           "green": 0.43137,
@@ -4280,14 +4184,6 @@
     },
     "ChevronLink": {
       "appearances": {
-        "alternative": {
-          "type": "variant",
-          "values": [true]
-        },
-        "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.",
           "values": [true, false],
@@ -4322,60 +4218,6 @@
             }
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.2549,
-              "green": 0.27059,
-              "blue": 0.27843,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.17255,
-              "green": 0.18039,
-              "blue": 0.18824,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.8902,
-              "green": 0.90196,
-              "blue": 0.9098,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "size": "large"
@@ -5432,21 +5274,11 @@
     },
     "ExpandCollapseMiniControl": {
       "appearances": {
-        "alternative": {
-          "description": "Replaces the default green colour with a more subtle grey.",
-          "type": "variant",
-          "values": [true]
-        },
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [true, false],
           "type": "state"
         },
-        "inverse": {
-          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
-          "type": "variant",
-          "values": [true]
-        },
         "quiet": {
           "description": "When it is true, it does not show the decoration",
           "type": "state",
@@ -5455,6 +5287,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["subtle", "inverse"]
         }
       },
       "rules": [
@@ -5468,7 +5304,7 @@
         },
         {
           "if": {
-            "alternative": true
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5481,7 +5317,7 @@
         },
         {
           "if": {
-            "inverse": true
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -5538,8 +5374,8 @@
         },
         {
           "if": {
-            "alternative": true,
-            "quiet": true
+            "quiet": true,
+            "style": "subtle"
           },
           "tokens": {
             "color": {
@@ -5553,8 +5389,8 @@
         },
         {
           "if": {
-            "inverse": true,
-            "quiet": true
+            "quiet": true,
+            "style": "inverse"
           },
           "tokens": {
             "color": {
@@ -8240,21 +8076,11 @@
     },
     "Link": {
       "appearances": {
-        "alternative": {
-          "description": "Replaces the default green colour with a more subtle grey.",
-          "type": "variant",
-          "values": [true]
-        },
         "iconPosition": {
           "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
           "values": ["left", "right", "inline"],
           "type": "state"
         },
-        "inverse": {
-          "description": "Styles the link white for use on dark backgrounds.",
-          "type": "variant",
-          "values": [true]
-        },
         "light": {
           "description": "A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)",
           "type": "variant",
@@ -8351,60 +8177,6 @@
             "iconSize": 16
           }
         },
-        {
-          "if": {
-            "alternative": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.17255,
-              "green": 0.18039,
-              "blue": 0.18824,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "alternative": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.17255,
-              "green": 0.18039,
-              "blue": 0.18824,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true
-          },
-          "tokens": {
-            "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inverse": true,
-            "pressed": true
-          },
-          "tokens": {
-            "color": {
-              "red": 0.8902,
-              "green": 0.90196,
-              "blue": 0.9098,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "light": true
@@ -10971,15 +10743,6 @@
     },
     "ProgressBar": {
       "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.",
-          "values": [true],
-          "type": "state"
-        },
-        "negative": {
-          "type": "variant",
-          "values": [true]
-        },
         "style": {
           "description": "Configure `style` variant for `ProgressBar`",
           "type": "variant",
@@ -10987,48 +10750,6 @@
         }
       },
       "rules": [
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.69804,
-              "green": 0.72549,
-              "blue": 0.74902,
-              "alpha": 1
-            },
-            "gradient": null,
-            "outlineColor": {
-              "red": 0.17255,
-              "green": 0.18039,
-              "blue": 0.18824,
-              "alpha": 1
-            },
-            "shadow": null
-          }
-        },
-        {
-          "if": {
-            "negative": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.75686,
-              "green": 0.13725,
-              "blue": 0.20784,
-              "alpha": 1
-            },
-            "gradient": null,
-            "outlineColor": {
-              "red": 0.75686,
-              "green": 0.13725,
-              "blue": 0.20784,
-              "alpha": 1
-            },
-            "shadow": null
-          }
-        },
         {
           "if": {
             "style": "inactive"
@@ -12380,10 +12101,6 @@
         "purpose": {
           "type": "variant",
           "values": ["offer", "default", "editorial", "subtle"]
-        },
-        "wrap": {
-          "type": "variant",
-          "values": [true]
         }
       },
       "rules": [
@@ -12444,15 +12161,6 @@
             }
           }
         },
-        {
-          "if": {
-            "wrap": true
-          },
-          "tokens": {
-            "paddingLeft": 24,
-            "paddingRight": 24
-          }
-        },
         {
           "if": {
             "purpose": "subtle"
@@ -12523,8 +12231,8 @@
         "gradient": null,
         "lineHeight": 1.33333333333,
         "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
+        "paddingLeft": 24,
+        "paddingRight": 24,
         "paddingTop": 4
       }
     },
@@ -17745,7 +17453,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.20.0",
+    "themeTokensVersion": "5.0.0-alpha.1",
     "name": "theme-allium"
   }
 }

package/build/rn/ActionCard.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/ActivityIndicator.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Autocomplete.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Badge.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/BlockQuote.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Box.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Breadcrumbs.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Button.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/ButtonDropdown.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/ButtonGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/ButtonGroupItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Callout.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Card.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 
@@ -9,10 +9,6 @@ const PaletteIconCheckbold = require('@telus-uds/palette-allium/build/rn/icons/C
 
 module.exports = {
   appearances: {
-    background: {
-      type: 'variant',
-      values: [ 'alternative', 'subtle', 'grid', 'feature', 'plain' ]
-    },
     borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
     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.",
@@ -105,37 +101,6 @@ module.exports = {
     { if: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
     { if: { borderRadius: 'small' }, tokens: { borderRadius: 6 } },
     { if: { borderRadius: 'large' }, tokens: { borderRadius: 12 } },
-    {
-      if: { background: 'alternative' },
-      tokens: { backgroundColor: '#f4f4f7' }
-    },
-    {
-      if: { background: 'subtle' },
-      tokens: { backgroundColor: '#fafafa' }
-    },
-    {
-      if: { background: 'feature' },
-      tokens: {
-        borderColor: '#4b286d',
-        borderWidth: 2,
-        gradient: {
-          angle: 135,
-          stops: [
-            { color: '#4b286d', hint: 0.75, stop: 0 },
-            { color: '#e53293', stop: 1 }
-          ],
-          type: 'linear'
-        }
-      }
-    },
-    {
-      if: { background: 'grid' },
-      tokens: { backgroundColor: '#fafafa', borderWidth: 0 }
-    },
-    {
-      if: { background: 'plain' },
-      tokens: { backgroundColor: '#ffffff', borderWidth: 0 }
-    },
     {
       if: { style: 'grid' },
       tokens: { backgroundColor: '#fafafa', borderWidth: 0 }

package/build/rn/CardGroup.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/Carousel.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/CarouselTabsPanelItem.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 

package/build/rn/CarouselThumbnail.js

@@ -1,11 +1,11 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 03 Mar 2026 23:01:33 GMT
+ * Generated on Fri, 10 Apr 2026 17:18:47 GMT
  *
  */
 
-
+const PaletteIconPlaySolid = require('@telus-uds/palette-allium/build/rn/icons/PlaySolid')
 
 module.exports = {
   appearances: {
@@ -55,6 +55,7 @@ module.exports = {
     containerPaddingTop: 24,
     margin: 4,
     padding: 8,
+    playIcon: PaletteIconPlaySolid,
     selectedBorderColor: '#676e73',
     selectedBorderWidth: 2,
     size: 56