@telus-uds/theme-public-mobile 2.23.0 → 2.24.1

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 07 Jun 2024 22:34:35 GMT
+ * Generated on Thu, 04 Jul 2024 19:27:06 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,10 +1,12 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 07 Jun 2024 22:34:35 GMT
+ * Generated on Thu, 04 Jul 2024 19:27:06 GMT
  *
  */
 
+import PaletteIconArrowRight from '@telus-uds/palette-public-mobile/build/rn/icons/ArrowRight'
+import PaletteIconWarningError from '@telus-uds/palette-public-mobile/build/rn/icons/WarningError'
 import PaletteIconChevronRight from '@telus-uds/palette-public-mobile/build/rn/icons/ChevronRight'
 import PaletteIconChevronDown from '@telus-uds/palette-public-mobile/build/rn/icons/ChevronDown'
 import PaletteIconChevronUp from '@telus-uds/palette-public-mobile/build/rn/icons/ChevronUp'
@@ -25,7 +27,6 @@ import PaletteIconExpand from '@telus-uds/palette-public-mobile/build/rn/icons/E
 import PaletteIconPlayVideo from '@telus-uds/palette-public-mobile/build/rn/icons/PlayVideo'
 import PaletteIconBulletFill from '@telus-uds/palette-public-mobile/build/rn/icons/BulletFill'
 import PaletteIconMobileXClose from '@telus-uds/palette-public-mobile/build/rn/icons/MobileXClose'
-import PaletteIconWarningError from '@telus-uds/palette-public-mobile/build/rn/icons/WarningError'
 import PaletteIconSearch from '@telus-uds/palette-public-mobile/build/rn/icons/Search'
 import PaletteIconInfo from '@telus-uds/palette-public-mobile/build/rn/icons/Info'
 import PaletteIconXMark from '@telus-uds/palette-public-mobile/build/rn/icons/XMark'
@@ -44,12 +45,94 @@ import PaletteIconClosedCaptions from '@telus-uds/palette-public-mobile/build/rn
 import PaletteIconFullscreenExpand from '@telus-uds/palette-public-mobile/build/rn/icons/FullscreenExpand'
 import PaletteIconFullscreenMinimize from '@telus-uds/palette-public-mobile/build/rn/icons/FullscreenMinimize'
 import PaletteIconSettingsSolid from '@telus-uds/palette-public-mobile/build/rn/icons/SettingsSolid'
-import PaletteIconArrowRight from '@telus-uds/palette-public-mobile/build/rn/icons/ArrowRight'
 import PaletteIconArrowLeft from '@telus-uds/palette-public-mobile/build/rn/icons/ArrowLeft'
 import PaletteIconMuted from '@telus-uds/palette-public-mobile/build/rn/icons/Muted'
 import PaletteIconUnmuted from '@telus-uds/palette-public-mobile/build/rn/icons/Unmuted'
 const theme = {
   components: {
+    ActionCard: {
+      appearances: {
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          platforms: [ 'rn', 'web' ],
+          type: 'state',
+          values: [ true, false ]
+        },
+        validation: {
+          description: 'Validation states for form inputs',
+          type: 'state',
+          values: [ 'error', 'success', 'warning' ]
+        }
+      },
+      rules: [
+        { if: { hover: true }, tokens: { actionIconTranslate: 4 } },
+        {
+          if: { validation: 'warning' },
+          tokens: {
+            actionIconMarginLeft: 8,
+            backgroundColor: '#fce6df',
+            statusIcon: PaletteIconWarningError,
+            statusIconColor: '#394056'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            actionIconColor: '#ffffff',
+            actionIconMarginLeft: 8,
+            backgroundColor: '#bf1722',
+            contentFontColor: '#ffffff',
+            iconColor: '#ffffff',
+            statusIcon: PaletteIconWarningError,
+            statusIconColor: '#ffffff',
+            titleFontColor: '#ffffff'
+          }
+        }
+      ],
+      tokens: {
+        actionIcon: PaletteIconArrowRight,
+        actionIconColor: '#394056',
+        actionIconMarginBottom: 8,
+        actionIconMarginLeft: 0,
+        actionIconMarginRight: 0,
+        actionIconMarginTop: 8,
+        actionIconTranslate: 4,
+        backgroundColor: null,
+        borderColor: null,
+        borderRadius: null,
+        borderWidth: null,
+        contentFontColor: '#394056',
+        contentFontName: 'SofiaPro',
+        contentFontSize: 16,
+        contentFontWeight: '400',
+        contentLineHeight: 1.25,
+        contentMarginBottom: 8,
+        contentMarginLeft: 0,
+        contentMarginRight: 0,
+        contentMarginTop: 0,
+        iconBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        iconColor: '#394056',
+        iconMarginBottom: 0,
+        iconMarginLeft: 0,
+        iconMarginRight: 8,
+        iconMarginTop: 0,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        statusIcon: null,
+        statusIconColor: null,
+        titleFontColor: '#394056',
+        titleFontName: 'SofiaPro',
+        titleFontSize: 16,
+        titleFontWeight: '700',
+        titleLineHeight: 1.5,
+        titleMarginBottom: 8,
+        titleMarginLeft: 0,
+        titleMarginRight: 8,
+        titleMarginTop: 8
+      }
+    },
     ActivityIndicator: {
       appearances: {
         size: {
@@ -3919,8 +4002,12 @@ const theme = {
       },
       rules: [
         {
-          if: { viewport: [ 'xl' ] },
-          tokens: { justifyContent: 'center' }
+          if: { system: true, viewport: [ 'xl' ] },
+          tokens: {
+            containerPaddingLeft: 16,
+            containerPaddingRight: 16,
+            justifyContent: 'center'
+          }
         },
         {
           if: { system: true },
@@ -4033,6 +4120,8 @@ const theme = {
         borderRightWidth: 0,
         borderTopWidth: 0,
         color: '#394056',
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
         dismissButtonGap: 12,
         dismissIcon: PaletteIconMobileXClose,
         dismissIconColor: '#394056',
@@ -4044,7 +4133,7 @@ const theme = {
         iconGap: 16,
         iconSize: 24,
         justifyContent: 'flex-start',
-        lineHeight: 2.5,
+        lineHeight: 1.55555555,
         paddingBottom: 12,
         paddingLeft: 12,
         paddingRight: 12,
@@ -4090,8 +4179,9 @@ const theme = {
         headerFontName: 'SofiaPro',
         headerFontWeight: '700',
         interItemMargin: 8,
-        itemBulletContainerWidth: 16,
+        itemBulletContainerWidth: 20,
         itemBulletHeight: 4,
+        itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
         itemColor: '#394056',
         itemFontName: 'SofiaPro',
@@ -7453,6 +7543,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.57.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.59.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "2.23.0",
+  "version": "2.24.1",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -14,11 +14,11 @@
     "theme.json"
   ],
   "devDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.9.0",
-    "@telus-uds/system-theme-tokens": "^2.57.0"
+    "@telus-uds/palette-public-mobile": "^1.10.0",
+    "@telus-uds/system-theme-tokens": "^2.59.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.9.0"
+    "@telus-uds/palette-public-mobile": "^1.10.0"
   },
   "repository": {
     "type": "git",

package/theme.json

@@ -1,5 +1,90 @@
 {
   "components": {
+    "ActionCard": {
+      "appearances": {
+        "hover": "{appearances.ActionCard.hover}",
+        "validation": "{appearances.ActionCard.validation}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "actionIconTranslate": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "validation": "warning"
+          },
+          "tokens": {
+            "actionIconMarginLeft": "{palette.size.size8}",
+            "backgroundColor": "{palette.color.apricot25}",
+            "statusIcon": "{palette.icon.WarningError}",
+            "statusIconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "actionIconColor": "{palette.color.white}",
+            "actionIconMarginLeft": "{palette.size.size8}",
+            "backgroundColor": "{palette.color.danger100}",
+            "contentFontColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "statusIcon": "{palette.icon.WarningError}",
+            "statusIconColor": "{palette.color.white}",
+            "titleFontColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "actionIcon": "{palette.icon.ArrowRight}",
+        "actionIconColor": "{palette.color.slate100}",
+        "actionIconMarginBottom": "{palette.size.size8}",
+        "actionIconMarginLeft": "{palette.size.size0}",
+        "actionIconMarginRight": "{palette.size.size0}",
+        "actionIconMarginTop": "{palette.size.size8}",
+        "actionIconTranslate": "{palette.size.size4}",
+        "backgroundColor": "{system.color.none}",
+        "borderColor": "{system.color.none}",
+        "borderRadius": "{system.radius.none}",
+        "borderWidth": "{system.border.none}",
+        "contentFontColor": "{palette.color.slate100}",
+        "contentFontName": "{palette.fontName.SofiaPro}",
+        "contentFontSize": "{palette.fontSize.size16}",
+        "contentFontWeight": "{palette.fontWeight.weight400}",
+        "contentLineHeight": "{palette.lineHeight.ratio5to4}",
+        "contentMarginBottom": "{palette.size.size8}",
+        "contentMarginLeft": "{palette.size.size0}",
+        "contentMarginRight": "{palette.size.size0}",
+        "contentMarginTop": "{palette.size.size0}",
+        "iconBackgroundColor": "{palette.color.dark5}",
+        "iconColor": "{palette.color.slate100}",
+        "iconMarginBottom": "{palette.size.size0}",
+        "iconMarginLeft": "{palette.size.size0}",
+        "iconMarginRight": "{palette.size.size8}",
+        "iconMarginTop": "{palette.size.size0}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "statusIcon": "{system.icon.none}",
+        "statusIconColor": "{system.color.none}",
+        "titleFontColor": "{palette.color.slate100}",
+        "titleFontName": "{palette.fontName.SofiaPro}",
+        "titleFontSize": "{palette.fontSize.size16}",
+        "titleFontWeight": "{palette.fontWeight.weight700}",
+        "titleLineHeight": "{palette.lineHeight.ratio3to2}",
+        "titleMarginBottom": "{palette.size.size8}",
+        "titleMarginLeft": "{palette.size.size0}",
+        "titleMarginRight": "{palette.size.size8}",
+        "titleMarginTop": "{palette.size.size8}"
+      }
+    },
     "ActivityIndicator": {
       "appearances": {
         "size": {
@@ -5072,9 +5157,12 @@
       "rules": [
         {
           "if": {
+            "system": true,
             "viewport": ["xl"]
           },
           "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
             "justifyContent": "{system.flexJustifyContent.center}"
           }
         },
@@ -5207,6 +5295,8 @@
         "borderRightWidth": "{system.border.zero}",
         "borderTopWidth": "{system.border.zero}",
         "color": "{palette.color.slate100}",
+        "containerPaddingLeft": "{palette.size.size16}",
+        "containerPaddingRight": "{palette.size.size16}",
         "dismissButtonGap": "{palette.size.size12}",
         "dismissIcon": "{palette.icon.MobileXClose}",
         "dismissIconColor": "{palette.color.slate100}",
@@ -5218,7 +5308,7 @@
         "iconGap": "{palette.size.size16}",
         "iconSize": "{palette.size.size24}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "lineHeight": "{palette.lineHeight.ratio5to2}",
+        "lineHeight": "{palette.lineHeight.ratio14to9}",
         "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size12}",
         "paddingRight": "{palette.size.size12}",
@@ -5288,8 +5378,9 @@
         "headerFontName": "{palette.fontName.SofiaPro}",
         "headerFontWeight": "{palette.fontWeight.weight700}",
         "interItemMargin": "{palette.size.size8}",
-        "itemBulletContainerWidth": "{palette.size.size16}",
+        "itemBulletContainerWidth": "{palette.size.size20}",
         "itemBulletHeight": "{palette.size.size4}",
+        "itemBulletTextAlign": "{system.textAlign.right}",
         "itemBulletWidth": "{palette.size.size4}",
         "itemColor": "{palette.color.slate100}",
         "itemFontName": "{palette.fontName.SofiaPro}",