@telus-uds/theme-allium 3.11.2 → 3.12.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 06 Jan 2023 01:58:32 GMT
+ * Generated on Thu, 09 Feb 2023 23:33:39 GMT
  *
  */
 
@@ -29,8 +29,8 @@ module.exports = {
           values: [ 'large' ]
         }
       },
-      rules: [ { if: { size: 'large' }, tokens: { size: 40, thickness: 4 } } ],
-      tokens: { color: '#2b8000', size: 20, thickness: 2 }
+      rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
+      tokens: { color: '#2b8000', size: 24, thickness: 2 }
     },
     Box: {
       appearances: {
@@ -539,6 +539,7 @@ module.exports = {
         borderRadius: 32,
         borderWidth: 1,
         color: '#676e73',
+        dividerColor: '#e3e6e8',
         fontName: 'HelveticaNow',
         fontSize: 14,
         fontWeight: '700',
@@ -565,6 +566,7 @@ module.exports = {
         paddingRight: 8,
         paddingTop: 8,
         shadow: null,
+        subtitleColor: '#676e73',
         textAlign: 'center',
         width: null
       }
@@ -602,6 +604,11 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        iconPosition: {
+          description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
+          type: 'state',
+          values: [ 'left', 'right' ]
+        },
         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.',
           type: 'state',
@@ -669,7 +676,8 @@ module.exports = {
             borderWidth: 0,
             color: '#ffffff'
           }
-        }
+        },
+        { if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } }
       ],
       tokens: {
         alignSelf: 'flex-start',
@@ -681,9 +689,10 @@ module.exports = {
         fontName: 'HelveticaNow',
         fontSize: 14,
         fontWeight: '700',
+        height: 36,
         iconSize: 20,
         iconSpace: 2,
-        lineHeight: 1.5,
+        lineHeight: 1.42857142857,
         minWidth: 0,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
@@ -916,7 +925,7 @@ module.exports = {
           if: { selected: true },
           tokens: {
             borderBottomColor: '#676e73',
-            borderBottomWidth: 2,
+            borderBottomWidth: 4,
             color: '#676e73',
             fontName: 'HelveticaNow',
             fontWeight: '400'
@@ -925,23 +934,43 @@ module.exports = {
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
         {
           if: { hover: true, inverse: true },
-          tokens: { borderBottomColor: '#66cc00', color: '#66cc00' }
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 2,
+            color: '#ffffff'
+          }
         },
         {
           if: { inverse: true, pressed: true },
-          tokens: { borderBottomColor: '#676e73', color: '#676e73' }
+          tokens: {
+            borderBottomColor: '#676e73',
+            borderBottomWidth: 2,
+            color: '#676e73'
+          }
         },
         {
           if: { focus: true, inverse: true },
-          tokens: { borderBottomColor: '#66cc00', color: '#66cc00' }
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 4,
+            color: '#ffffff'
+          }
         },
         {
           if: { focus: true, inverse: true, pressed: true },
-          tokens: { borderBottomColor: '#676e73', color: '#676e73' }
+          tokens: {
+            borderBottomColor: '#676e73',
+            borderBottomWidth: 4,
+            color: '#676e73'
+          }
         },
         {
           if: { inverse: true, selected: true },
-          tokens: { borderBottomColor: '#bfe797', color: '#66cc00' }
+          tokens: {
+            borderBottomColor: '#ffffff',
+            borderBottomWidth: 4,
+            color: '#ffffff'
+          }
         }
       ],
       tokens: {
@@ -1012,6 +1041,15 @@ module.exports = {
         {
           if: { hover: true },
           tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
+        },
+        {
+          if: { checked: true, focus: true },
+          tokens: {
+            inputBorderColor: '#ffffff',
+            inputBorderWidth: 2,
+            inputOutlineColor: '#7c53a5',
+            inputOutlineWidth: 3
+          }
         }
       ],
       tokens: {
@@ -1620,6 +1658,7 @@ module.exports = {
           tokens: {
             iconMarginTop: 8,
             itemFontSize: 20,
+            itemIconSize: 20,
             itemLineHeight: 1.6,
             listGutter: 12
           }
@@ -1629,6 +1668,7 @@ module.exports = {
           tokens: {
             iconMarginTop: 2,
             itemFontSize: 14,
+            itemIconSize: 14,
             itemLineHeight: 1.42857142857,
             listGutter: 12
           }
@@ -4033,5 +4073,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.9.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.10.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.11.2",
+  "version": "3.12.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -8,12 +8,12 @@
   "main": "build/rn/theme.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.9.2",
-    "@telus-uds/system-theme-tokens": "^2.9.0",
-    "@telus-uds/system-tokens": "^0.6.1"
+    "@telus-uds/palette-allium": "^2.10.0",
+    "@telus-uds/system-theme-tokens": "^2.10.0",
+    "@telus-uds/system-tokens": "^0.6.2"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.9.2"
+    "@telus-uds/palette-allium": "^2.10.0"
   },
   "files": [
     "build",

package/theme.json

@@ -14,14 +14,14 @@
             "size": "large"
           },
           "tokens": {
-            "size": "{palette.size.size40}",
+            "size": "{palette.size.size48}",
             "thickness": "{palette.border.border4}"
           }
         }
       ],
       "tokens": {
         "color": "{palette.color.greenAccessible}",
-        "size": "{palette.size.size20}",
+        "size": "{palette.size.size24}",
         "thickness": "{palette.border.border2}"
       }
     },
@@ -740,6 +740,7 @@
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greyShuttle}",
+        "dividerColor": "{palette.color.greyMystic}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight700}",
@@ -766,6 +767,7 @@
         "paddingRight": "{palette.size.size8}",
         "paddingTop": "{palette.size.size8}",
         "shadow": "{system.shadow.none}",
+        "subtitleColor": "{palette.color.greyShuttle}",
         "textAlign": "{system.flexJustifyContent.center}",
         "width": "{system.size.none}"
       }
@@ -798,6 +800,7 @@
       "appearances": {
         "focus": "{appearances.ButtonGroupItem.focus}",
         "hover": "{appearances.ButtonGroupItem.hover}",
+        "iconPosition": "{appearances.Link.iconPosition}",
         "inactive": "{appearances.ButtonGroupItem.inactive}",
         "pressed": "{appearances.ButtonGroupItem.pressed}",
         "selected": "{appearances.ButtonGroupItem.selected}"
@@ -889,6 +892,14 @@
             "borderWidth": "{system.border.zero}",
             "color": "{palette.color.white}"
           }
+        },
+        {
+          "if": {
+            "iconPosition": "right"
+          },
+          "tokens": {
+            "iconSpace": "{system.integer.1}"
+          }
         }
       ],
       "tokens": {
@@ -901,9 +912,10 @@
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size14}",
         "fontWeight": "{palette.fontWeight.weight700}",
+        "height": "{palette.size.size36}",
         "iconSize": "{palette.size.size20}",
         "iconSpace": "{system.integer.2}",
-        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "lineHeight": "{palette.lineHeight.ratio10to7}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
@@ -1155,7 +1167,7 @@
           },
           "tokens": {
             "borderBottomColor": "{palette.color.greyShuttle}",
-            "borderBottomWidth": "{palette.border.border2}",
+            "borderBottomWidth": "{palette.border.border4}",
             "color": "{palette.color.greyShuttle}",
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontWeight": "{palette.fontWeight.weight400}"
@@ -1175,8 +1187,9 @@
             "inverse": true
           },
           "tokens": {
-            "borderBottomColor": "{palette.color.greenTelus}",
-            "color": "{palette.color.greenTelus}"
+            "borderBottomColor": "{palette.color.white}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.white}"
           }
         },
         {
@@ -1186,6 +1199,7 @@
           },
           "tokens": {
             "borderBottomColor": "{palette.color.greyShuttle}",
+            "borderBottomWidth": "{palette.border.border2}",
             "color": "{palette.color.greyShuttle}"
           }
         },
@@ -1195,8 +1209,9 @@
             "inverse": true
           },
           "tokens": {
-            "borderBottomColor": "{palette.color.greenTelus}",
-            "color": "{palette.color.greenTelus}"
+            "borderBottomColor": "{palette.color.white}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.white}"
           }
         },
         {
@@ -1207,6 +1222,7 @@
           },
           "tokens": {
             "borderBottomColor": "{palette.color.greyShuttle}",
+            "borderBottomWidth": "{palette.border.border4}",
             "color": "{palette.color.greyShuttle}"
           }
         },
@@ -1216,8 +1232,9 @@
             "selected": true
           },
           "tokens": {
-            "borderBottomColor": "{palette.color.greenYellow}",
-            "color": "{palette.color.greenTelus}"
+            "borderBottomColor": "{palette.color.white}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.white}"
           }
         }
       ],
@@ -1287,6 +1304,18 @@
             "inputOutlineColor": "{palette.color.greyMystic}",
             "inputOutlineWidth": "{palette.border.border2}"
           }
+        },
+        {
+          "if": {
+            "checked": true,
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.white}",
+            "inputBorderWidth": "{palette.border.border2}",
+            "inputOutlineColor": "{palette.color.purpleDeluge}",
+            "inputOutlineWidth": "{palette.border.border3}"
+          }
         }
       ],
       "tokens": {
@@ -2194,6 +2223,7 @@
           "tokens": {
             "iconMarginTop": "{palette.size.size8}",
             "itemFontSize": "{palette.fontSize.size20}",
+            "itemIconSize": "{palette.size.size20}",
             "itemLineHeight": "{palette.lineHeight.ratio8to5}",
             "listGutter": "{palette.size.size12}"
           }
@@ -2205,6 +2235,7 @@
           "tokens": {
             "iconMarginTop": "{palette.size.size2}",
             "itemFontSize": "{palette.fontSize.size14}",
+            "itemIconSize": "{palette.size.size14}",
             "itemLineHeight": "{palette.lineHeight.ratio10to7}",
             "listGutter": "{palette.size.size12}"
           }