@telus-uds/theme-public-mobile 2.22.0 → 2.24.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 17 May 2024 16:23:53 GMT
+ * Generated on Mon, 24 Jun 2024 16:17:46 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,10 +1,12 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 17 May 2024 16:23:53 GMT
+ * Generated on Mon, 24 Jun 2024 16:17:47 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: {
@@ -2236,6 +2319,7 @@ const theme = {
           if: { mini: true },
           tokens: {
             borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: null,
             paddingBottom: 0,
             paddingLeft: 0,
             paddingRight: 0,
@@ -2251,6 +2335,15 @@ const theme = {
             textLine: 'underline'
           }
         },
+        {
+          if: { focus: true, mini: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#394056',
+            borderWidth: null,
+            textLine: 'underline'
+          }
+        },
         {
           if: { expanded: false, hover: true },
           tokens: {
@@ -2406,7 +2499,10 @@ const theme = {
             contentPaddingLeft: 0,
             contentPaddingRight: 0,
             contentPaddingTop: 0,
-            expandDividerColor: 'rgba(0, 0, 0, 0)'
+            contentPanelPaddingBottom: 0,
+            contentPanelPaddingTop: 0,
+            expandDividerColor: 'rgba(0, 0, 0, 0)',
+            marginBottom: 0
           }
         }
       ],
@@ -3387,6 +3483,7 @@ const theme = {
         itemIconColor: '#394056',
         itemIconSize: 16,
         itemLineHeight: 1.5,
+        itemTextColor: '#394056',
         listGutter: 16
       }
     },
@@ -3905,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 },
@@ -4019,6 +4120,8 @@ const theme = {
         borderRightWidth: 0,
         borderTopWidth: 0,
         color: '#394056',
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
         dismissButtonGap: 12,
         dismissIcon: PaletteIconMobileXClose,
         dismissIconColor: '#394056',
@@ -4030,7 +4133,7 @@ const theme = {
         iconGap: 16,
         iconSize: 24,
         justifyContent: 'flex-start',
-        lineHeight: 2.5,
+        lineHeight: 1.55555555,
         paddingBottom: 12,
         paddingLeft: 12,
         paddingRight: 12,
@@ -7439,6 +7542,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.56.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.58.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "2.22.0",
+  "version": "2.24.0",
   "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.56.0"
+    "@telus-uds/palette-public-mobile": "^1.10.0",
+    "@telus-uds/system-theme-tokens": "^2.58.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": {
@@ -2753,6 +2838,7 @@
           },
           "tokens": {
             "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.none}",
             "paddingBottom": "{palette.size.size0}",
             "paddingLeft": "{palette.size.size0}",
             "paddingRight": "{palette.size.size0}",
@@ -2770,6 +2856,18 @@
             "textLine": "{system.textLine.underline}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "mini": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{system.border.none}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "expanded": false,
@@ -2992,7 +3090,10 @@
             "contentPaddingLeft": "{palette.size.size0}",
             "contentPaddingRight": "{palette.size.size0}",
             "contentPaddingTop": "{palette.size.size0}",
-            "expandDividerColor": "{palette.color.transparent}"
+            "contentPanelPaddingBottom": "{palette.size.size0}",
+            "contentPanelPaddingTop": "{palette.size.size0}",
+            "expandDividerColor": "{palette.color.transparent}",
+            "marginBottom": "{palette.size.size0}"
           }
         }
       ],
@@ -4534,6 +4635,7 @@
         "itemIconColor": "{palette.color.slate100}",
         "itemIconSize": "{palette.size.size16}",
         "itemLineHeight": "{palette.lineHeight.ratio3to2}",
+        "itemTextColor": "{palette.color.slate100}",
         "listGutter": "{palette.size.size16}"
       }
     },
@@ -5055,9 +5157,12 @@
       "rules": [
         {
           "if": {
+            "system": true,
             "viewport": ["xl"]
           },
           "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
             "justifyContent": "{system.flexJustifyContent.center}"
           }
         },
@@ -5190,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}",
@@ -5201,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}",