@telus-uds/theme-allium 3.6.1 → 3.7.2

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 17 Aug 2022 20:48:35 GMT
+ * Generated on Tue, 06 Sep 2022 16:33:13 GMT
  *
  */
 
@@ -1308,6 +1308,11 @@ module.exports = {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
           values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        },
+        width: {
+          description: 'The width of the modal',
+          type: 'state',
+          values: [ 's', 'm', 'l', 'xl' ]
         }
       },
       rules: [
@@ -1324,11 +1329,59 @@ module.exports = {
           }
         },
         {
-          if: { maxWidth: true, viewport: [ 'md', 'lg', 'xl' ] },
+          if: { viewport: [ 'md', 'lg', 'xl' ], width: 's' },
+          tokens: {
+            containerPaddingBottom: 32,
+            containerPaddingTop: 32,
+            maxWidth: 320
+          }
+        },
+        {
+          if: { viewport: [ 'md', 'lg', 'xl' ], width: 'm' },
+          tokens: {
+            containerPaddingBottom: 32,
+            containerPaddingTop: 32,
+            maxWidth: 480
+          }
+        },
+        {
+          if: { viewport: [ 'lg', 'xl' ], width: 'l' },
+          tokens: {
+            containerPaddingBottom: 32,
+            containerPaddingTop: 32,
+            maxWidth: 630
+          }
+        },
+        {
+          if: { viewport: 'xl', width: 'xl' },
+          tokens: {
+            containerPaddingBottom: 32,
+            containerPaddingTop: 32,
+            maxWidth: 768
+          }
+        },
+        {
+          if: { maxWidth: true, viewport: 'md' },
+          tokens: {
+            containerPaddingLeft: 16,
+            containerPaddingRight: 16,
+            maxWidth: 480
+          }
+        },
+        {
+          if: { maxWidth: true, viewport: 'lg' },
           tokens: {
             containerPaddingLeft: 16,
             containerPaddingRight: 16,
-            maxWidth: '66.67%'
+            maxWidth: 630
+          }
+        },
+        {
+          if: { maxWidth: true, viewport: 'xl' },
+          tokens: {
+            containerPaddingLeft: 16,
+            containerPaddingRight: 16,
+            maxWidth: 768
           }
         }
       ],
@@ -1805,7 +1858,6 @@ module.exports = {
           tokens: {
             borderColor: '#676e73',
             outerBorderColor: '#e3e6e8',
-            outerBorderWidth: 2,
             radioOuterBorderColor: '#e3e6e8',
             radioOuterBorderWidth: 2
           }
@@ -1816,8 +1868,7 @@ module.exports = {
           tokens: {
             backgroundColor: '#f4f4f7',
             borderColor: '#676e73',
-            outerBorderColor: '#e3e6e8',
-            outerBorderWidth: 2
+            outerBorderColor: '#e3e6e8'
           }
         },
         {
@@ -1825,7 +1876,6 @@ module.exports = {
           tokens: {
             outerBorderColor: '#676e73',
             outerBorderGap: 2,
-            outerBorderWidth: 2,
             radioInputBorderColor: '#7c53a5',
             radioInputBorderWidth: 3
           }
@@ -1874,7 +1924,7 @@ module.exports = {
         minWidth: 264,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
-        outerBorderWidth: 0,
+        outerBorderWidth: 2,
         paddingBottom: 16,
         paddingLeft: 10,
         paddingRight: 16,
@@ -3256,5 +3306,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.3.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.4.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.6.1",
+  "version": "3.7.2",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -8,12 +8,12 @@
   "main": "build/theme.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.4.0",
-    "@telus-uds/system-theme-tokens": "^2.3.0",
-    "@telus-uds/system-tokens": "^0.1.5"
+    "@telus-uds/palette-allium": "^2.6.0",
+    "@telus-uds/system-theme-tokens": "^2.4.0",
+    "@telus-uds/system-tokens": "^0.2.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.4.0"
+    "@telus-uds/palette-allium": "^2.6.0"
   },
   "files": [
     "build",

package/theme.json

@@ -1774,7 +1774,8 @@
     "Modal": {
       "appearances": {
         "maxWidth": "{appearances.Modal.maxWidth}",
-        "viewport": "{appearances.system.viewport}"
+        "viewport": "{appearances.system.viewport}",
+        "width": "{appearances.Modal.width}"
       },
       "rules": [
         {
@@ -1792,18 +1793,84 @@
           "tokens": {
             "containerPaddingBottom": "{palette.size.size32}",
             "containerPaddingTop": "{palette.size.size32}",
-            "maxWidth": "{system.size.viewportSm}"
+            "maxWidth": "{palette.size.size576}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"],
+            "width": "s"
+          },
+          "tokens": {
+            "containerPaddingBottom": "{palette.size.size32}",
+            "containerPaddingTop": "{palette.size.size32}",
+            "maxWidth": "{palette.size.size320}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"],
+            "width": "m"
+          },
+          "tokens": {
+            "containerPaddingBottom": "{palette.size.size32}",
+            "containerPaddingTop": "{palette.size.size32}",
+            "maxWidth": "{palette.size.size480}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["lg", "xl"],
+            "width": "l"
+          },
+          "tokens": {
+            "containerPaddingBottom": "{palette.size.size32}",
+            "containerPaddingTop": "{palette.size.size32}",
+            "maxWidth": "{palette.size.size630}"
+          }
+        },
+        {
+          "if": {
+            "viewport": "xl",
+            "width": "xl"
+          },
+          "tokens": {
+            "containerPaddingBottom": "{palette.size.size32}",
+            "containerPaddingTop": "{palette.size.size32}",
+            "maxWidth": "{palette.size.size768}"
           }
         },
         {
           "if": {
             "maxWidth": true,
-            "viewport": ["md", "lg", "xl"]
+            "viewport": "md"
+          },
+          "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
+            "maxWidth": "{palette.size.size480}"
+          }
+        },
+        {
+          "if": {
+            "maxWidth": true,
+            "viewport": "lg"
           },
           "tokens": {
             "containerPaddingLeft": "{palette.size.size16}",
             "containerPaddingRight": "{palette.size.size16}",
-            "maxWidth": "{system.size.twoThirds}"
+            "maxWidth": "{palette.size.size630}"
+          }
+        },
+        {
+          "if": {
+            "maxWidth": true,
+            "viewport": "xl"
+          },
+          "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
+            "maxWidth": "{palette.size.size768}"
           }
         }
       ],
@@ -2276,7 +2343,6 @@
           "tokens": {
             "borderColor": "{palette.color.greyShuttle}",
             "outerBorderColor": "{palette.color.greyMystic}",
-            "outerBorderWidth": "{palette.border.border2}",
             "radioOuterBorderColor": "{palette.color.greyMystic}",
             "radioOuterBorderWidth": "{palette.border.border2}"
           }
@@ -2289,8 +2355,7 @@
           "tokens": {
             "backgroundColor": "{palette.color.greyAthens}",
             "borderColor": "{palette.color.greyShuttle}",
-            "outerBorderColor": "{palette.color.greyMystic}",
-            "outerBorderWidth": "{palette.border.border2}"
+            "outerBorderColor": "{palette.color.greyMystic}"
           }
         },
         {
@@ -2300,7 +2365,6 @@
           "tokens": {
             "outerBorderColor": "{palette.color.greyShuttle}",
             "outerBorderGap": "{palette.size.size2}",
-            "outerBorderWidth": "{palette.border.border2}",
             "radioInputBorderColor": "{palette.color.purpleDeluge}",
             "radioInputBorderWidth": "{palette.border.border3}"
           }
@@ -2370,7 +2434,7 @@
         "minWidth": "{palette.size.size264}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.zero}",
+        "outerBorderWidth": "{palette.border.border2}",
         "paddingBottom": "{palette.size.size16}",
         "paddingLeft": "{palette.size.size10}",
         "paddingRight": "{palette.size.size16}",