@telus-uds/theme-allium 7.3.1 → 7.5.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 11 Mar 2025 21:12:57 GMT
+ * Generated on Fri, 28 Mar 2025 00:59:46 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 11 Mar 2025 21:12:57 GMT
+ * Generated on Fri, 28 Mar 2025 00:59:46 GMT
  *
  */
 
@@ -131,6 +131,7 @@ const theme = {
     },
     ActivityIndicator: {
       appearances: {
+        dots: { type: 'variant', values: [ true ] },
         size: {
           description: 'used for full-screen spinners',
           type: 'variant',
@@ -138,7 +139,13 @@ const theme = {
         }
       },
       rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
-      tokens: { color: '#2b8000', size: 24, thickness: 2 }
+      tokens: {
+        color: '#2b8000',
+        dotSize: 6,
+        indicatorBackgroundColor: '#e3f6d1',
+        size: 24,
+        thickness: 3
+      }
     },
     Autocomplete: {
       appearances: {},
@@ -2269,10 +2276,19 @@ const theme = {
           type: 'state',
           values: [ true, false ]
         },
+        quiet: {
+          description: 'When it is true, it does not show the decoration',
+          type: 'state',
+          values: [ true, false ]
+        },
         size: {
           description: 'Sets the size of the text and icon; these variants are shared with ChevronLink',
           type: 'variant',
           values: [ 'large', 'small', 'micro' ]
+        },
+        style: {
+          type: 'variant',
+          values: [ 'inline', 'subtle', 'feature', 'danger', 'inverse' ]
         }
       },
       rules: [
@@ -2334,6 +2350,215 @@ const theme = {
         {
           if: { alternative: true, focus: true },
           tokens: { color: '#414547', outerBorderColor: '#414547' }
+        },
+        {
+          if: { focus: true, quiet: true },
+          tokens: { color: '#2b8000', textLine: 'underline' }
+        },
+        { if: { style: 'inline' }, tokens: { color: '#414547' } },
+        {
+          if: { focus: true, style: 'inline' },
+          tokens: { color: '#414547', outerBorderColor: '#414547' }
+        },
+        {
+          if: { hover: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inline' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { if: { style: 'subtle' }, tokens: { color: '#676e73' } },
+        {
+          if: { focus: true, style: 'subtle' },
+          tokens: { color: '#676e73', outerBorderColor: '#676e73' }
+        },
+        {
+          if: { hover: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { if: { style: 'feature' }, tokens: { color: '#2b8000' } },
+        {
+          if: { focus: true, style: 'feature' },
+          tokens: { color: '#2b8000', outerBorderColor: '#2b8000' }
+        },
+        {
+          if: { hover: true, style: 'feature' },
+          tokens: { color: '#1f5c09', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'feature' },
+          tokens: { color: '#163e06', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'feature' },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        { if: { style: 'danger' }, tokens: { color: '#c12335' } },
+        {
+          if: { focus: true, style: 'danger' },
+          tokens: { color: '#c12335', outerBorderColor: '#c12335' }
+        },
+        {
+          if: { hover: true, style: 'danger' },
+          tokens: { color: '#560c0c', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'danger' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'danger' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { if: { style: 'inverse' }, tokens: { color: '#ffffff' } },
+        {
+          if: { focus: true, style: 'inverse' },
+          tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
+        },
+        {
+          if: { hover: true, style: 'inverse' },
+          tokens: { color: '#f4f4f7', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inverse' },
+          tokens: { color: '#b2b9bf', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#b2b9bf' }
+        },
+        {
+          if: { quiet: true, style: 'inline' },
+          tokens: { color: '#414547', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'inline' },
+          tokens: {
+            color: '#414547',
+            outerBorderColor: '#414547',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inline' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inline' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { quiet: true, style: 'subtle' },
+          tokens: { color: '#676e73', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'subtle' },
+          tokens: {
+            color: '#676e73',
+            outerBorderColor: '#676e73',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { quiet: true, style: 'feature' },
+          tokens: { color: '#2b8000', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'feature' },
+          tokens: {
+            color: '#2b8000',
+            outerBorderColor: '#2b8000',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'feature' },
+          tokens: { color: '#1f5c09', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'feature' },
+          tokens: { color: '#163e06' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'feature' },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { quiet: true, style: 'danger' },
+          tokens: { color: '#c12335', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'danger' },
+          tokens: {
+            color: '#c12335',
+            outerBorderColor: '#c12335',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'danger' },
+          tokens: { color: '#560c0c', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'danger' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'danger' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { quiet: true, style: 'inverse' },
+          tokens: { color: '#ffffff', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'inverse' },
+          tokens: {
+            color: '#ffffff',
+            outerBorderColor: '#ffffff',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#f4f4f7', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#b2b9bf' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#b2b9bf' }
         }
       ],
       tokens: {
@@ -3678,6 +3903,10 @@ const theme = {
           description: 'Text sizes for block links; similar but not always identical to Typography sizes.',
           type: 'variant',
           values: [ 'large', 'small', 'micro' ]
+        },
+        style: {
+          type: 'variant',
+          values: [ 'inline', 'subtle', 'feature', 'danger', 'inverse' ]
         }
       },
       rules: [
@@ -3762,6 +3991,10 @@ const theme = {
           if: { hover: true, quiet: true },
           tokens: { color: '#1f5c09', textLine: 'underline' }
         },
+        {
+          if: { focus: true, quiet: true },
+          tokens: { color: '#2b8000', textLine: 'underline' }
+        },
         {
           if: { alternative: true, hover: true, quiet: true },
           tokens: { color: '#2c2e30', textLine: 'underline' }
@@ -3773,6 +4006,236 @@ const theme = {
         {
           if: { hover: true, light: true, quiet: true },
           tokens: { color: '#414547', textLine: 'underline' }
+        },
+        { if: { style: 'inline' }, tokens: { color: '#414547' } },
+        {
+          if: { focus: true, style: 'inline' },
+          tokens: {
+            color: '#414547',
+            outerBorderColor: '#414547',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inline' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { if: { style: 'subtle' }, tokens: { color: '#676e73' } },
+        {
+          if: { focus: true, style: 'subtle' },
+          tokens: {
+            color: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { if: { style: 'feature' }, tokens: { color: '#2b8000' } },
+        {
+          if: { focus: true, style: 'feature' },
+          tokens: {
+            color: '#2b8000',
+            outerBorderColor: '#2b8000',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'feature' },
+          tokens: { color: '#1f5c09', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'feature' },
+          tokens: { color: '#163e06', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'feature' },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        { if: { style: 'danger' }, tokens: { color: '#c12335' } },
+        {
+          if: { focus: true, style: 'danger' },
+          tokens: {
+            color: '#c12335',
+            outerBorderColor: '#c12335',
+            outerBorderOutline: 'none'
+          }
+        },
+        {
+          if: { hover: true, style: 'danger' },
+          tokens: { color: '#560c0c', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'danger' },
+          tokens: { color: '#2c2e30', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'danger' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        { 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: '#f4f4f7', textLine: 'none' }
+        },
+        {
+          if: { pressed: true, style: 'inverse' },
+          tokens: { color: '#b2b9bf', textLine: 'none' }
+        },
+        {
+          if: { focus: true, pressed: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#b2b9bf' }
+        },
+        {
+          if: { quiet: true, style: 'inline' },
+          tokens: { color: '#414547', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'inline' },
+          tokens: {
+            color: '#414547',
+            outerBorderColor: '#414547',
+            outerBorderOutline: 'none',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inline' },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inline' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inline' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { quiet: true, style: 'subtle' },
+          tokens: { color: '#676e73', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'subtle' },
+          tokens: {
+            color: '#676e73',
+            outerBorderColor: '#676e73',
+            outerBorderOutline: 'none',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#2c2e30', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'subtle' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'subtle' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          if: { quiet: true, style: 'feature' },
+          tokens: { color: '#2b8000', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'feature' },
+          tokens: {
+            color: '#2b8000',
+            outerBorderColor: '#2b8000',
+            outerBorderOutline: 'none',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'feature' },
+          tokens: { color: '#1f5c09', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'feature' },
+          tokens: { color: '#163e06' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'feature' },
+          tokens: { outerBorderColor: '#163e06' }
+        },
+        {
+          if: { quiet: true, style: 'danger' },
+          tokens: { color: '#c12335', textLine: 'none' }
+        },
+        {
+          if: { focus: true, quiet: true, style: 'danger' },
+          tokens: {
+            color: '#c12335',
+            outerBorderColor: '#c12335',
+            outerBorderOutline: 'none',
+            textLine: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'danger' },
+          tokens: { color: '#560c0c', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'danger' },
+          tokens: { color: '#2c2e30' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'danger' },
+          tokens: { outerBorderColor: '#2c2e30' }
+        },
+        {
+          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: 'underline'
+          }
+        },
+        {
+          if: { hover: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#f4f4f7', textLine: 'underline' }
+        },
+        {
+          if: { pressed: true, quiet: true, style: 'inverse' },
+          tokens: { color: '#b2b9bf' }
+        },
+        {
+          if: { focus: true, pressed: true, quiet: true, style: 'inverse' },
+          tokens: { outerBorderColor: '#b2b9bf' }
         }
       ],
       tokens: {
@@ -4205,6 +4668,7 @@ const theme = {
           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',
@@ -4227,6 +4691,13 @@ const theme = {
         {
           if: { maxWidth: true, viewport: [ 'sm', 'md', 'lg', 'xl' ] },
           tokens: { maxWidthSize: 544 }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            buttonIconBackgroundColor: '#7c53a5',
+            labelColor: '#ffffff'
+          }
         }
       ],
       tokens: {
@@ -5048,7 +5519,7 @@ const theme = {
         }
       ],
       tokens: {
-        backgroundColor: '#f4f4f7',
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
         borderColor: '#b2b9bf',
         borderRadius: 12,
         borderWidth: 1,
@@ -8504,6 +8975,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '4.2.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '4.3.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "7.3.1",
+  "version": "7.5.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -9,12 +9,12 @@
   "module": "build/web/index.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^5.3.0",
-    "@telus-uds/system-theme-tokens": "^4.2.0",
-    "@telus-uds/system-tokens": "^1.2.0"
+    "@telus-uds/palette-allium": "^5.3.1",
+    "@telus-uds/system-theme-tokens": "^4.3.0",
+    "@telus-uds/system-tokens": "^1.2.1"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^5.3.0"
+    "@telus-uds/palette-allium": "^5.3.1"
   },
   "files": [
     "build",