@telus-uds/theme-koodo 5.14.0 → 5.16.0

package/build/web/spacingScale.js

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

package/build/web/theme.js

@@ -1,10 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 17 May 2024 16:23:49 GMT
+ * Generated on Mon, 24 Jun 2024 16:17:42 GMT
  *
  */
 
+import PaletteIconArrowRight from '@telus-uds/palette-koodo/build/rn/icons/ArrowRight'
+import PaletteIconExclamationTriangle from '@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle'
+import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
 import PaletteIconChevronRight from '@telus-uds/palette-koodo/build/rn/icons/ChevronRight'
 import PaletteIconChevronDown from '@telus-uds/palette-koodo/build/rn/icons/ChevronDown'
 import PaletteIconChevronUp from '@telus-uds/palette-koodo/build/rn/icons/ChevronUp'
@@ -13,7 +16,6 @@ import PaletteIconPause from '@telus-uds/palette-koodo/build/rn/icons/Pause'
 import PaletteIconPlay from '@telus-uds/palette-koodo/build/rn/icons/Play'
 import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/ChevronLeft'
 import PaletteIconCheckCircleFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled'
-import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
 import PaletteIconClose from '@telus-uds/palette-koodo/build/rn/icons/Close'
 import PaletteIconAdd from '@telus-uds/palette-koodo/build/rn/icons/Add'
 import PaletteIconSubtract from '@telus-uds/palette-koodo/build/rn/icons/Subtract'
@@ -21,7 +23,6 @@ import PaletteIconExpand from '@telus-uds/palette-koodo/build/rn/icons/Expand'
 import PaletteIconPlayVideo from '@telus-uds/palette-koodo/build/rn/icons/PlayVideo'
 import PaletteIconBulletFill from '@telus-uds/palette-koodo/build/rn/icons/BulletFill'
 import PaletteIconTimes from '@telus-uds/palette-koodo/build/rn/icons/Times'
-import PaletteIconExclamationTriangle from '@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle'
 import PaletteIconSpyglass from '@telus-uds/palette-koodo/build/rn/icons/Spyglass'
 import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 import PaletteIconQuoteLeft from '@telus-uds/palette-koodo/build/rn/icons/QuoteLeft'
@@ -39,12 +40,92 @@ import PaletteIconClosedCaptions from '@telus-uds/palette-koodo/build/rn/icons/C
 import PaletteIconFullscreenExpand from '@telus-uds/palette-koodo/build/rn/icons/FullscreenExpand'
 import PaletteIconFullscreenMinimize from '@telus-uds/palette-koodo/build/rn/icons/FullscreenMinimize'
 import PaletteIconSettingsSolid from '@telus-uds/palette-koodo/build/rn/icons/SettingsSolid'
-import PaletteIconArrowRight from '@telus-uds/palette-koodo/build/rn/icons/ArrowRight'
 import PaletteIconArrowLeft from '@telus-uds/palette-koodo/build/rn/icons/ArrowLeft'
 import PaletteIconMuted from '@telus-uds/palette-koodo/build/rn/icons/Muted'
 import PaletteIconUnmuted from '@telus-uds/palette-koodo/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: '#fff5d2',
+            borderColor: '#f8c100',
+            statusIcon: PaletteIconExclamationTriangle,
+            statusIconColor: '#c9370b'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            actionIconMarginLeft: 8,
+            backgroundColor: '#fcd3c6',
+            borderColor: '#c9370b',
+            statusIcon: PaletteIconExclamationOctagon,
+            statusIconColor: '#c9370b'
+          }
+        }
+      ],
+      tokens: {
+        actionIcon: PaletteIconArrowRight,
+        actionIconColor: '#000000',
+        actionIconMarginBottom: 8,
+        actionIconMarginLeft: 0,
+        actionIconMarginRight: 0,
+        actionIconMarginTop: 8,
+        actionIconTranslate: 4,
+        backgroundColor: null,
+        borderColor: null,
+        borderRadius: null,
+        borderWidth: null,
+        contentFontColor: '#000000',
+        contentFontName: 'StagSans',
+        contentFontSize: 16,
+        contentFontWeight: '400',
+        contentLineHeight: 1.25,
+        contentMarginBottom: 8,
+        contentMarginLeft: 0,
+        contentMarginRight: 0,
+        contentMarginTop: 0,
+        iconBackgroundColor: 'rgba(0, 0, 0, 0.05)',
+        iconColor: '#000000',
+        iconMarginBottom: 0,
+        iconMarginLeft: 0,
+        iconMarginRight: 8,
+        iconMarginTop: 0,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingTop: 16,
+        statusIcon: null,
+        statusIconColor: null,
+        titleFontColor: '#000000',
+        titleFontName: 'StagSans',
+        titleFontSize: 16,
+        titleFontWeight: '700',
+        titleLineHeight: 1.5,
+        titleMarginBottom: 8,
+        titleMarginLeft: 0,
+        titleMarginRight: 8,
+        titleMarginTop: 8
+      }
+    },
     ActivityIndicator: {
       appearances: {
         size: {
@@ -2327,7 +2408,7 @@ const theme = {
           if: { mini: true },
           tokens: {
             borderColor: 'rgba(0, 0, 0, 0)',
-            borderWidth: 0,
+            borderWidth: null,
             icon: PaletteIconChevronDown,
             iconColor: '#000000',
             iconGap: 8,
@@ -2357,6 +2438,17 @@ const theme = {
             borderWidth: 2
           }
         },
+        {
+          if: { focus: true, mini: true },
+          tokens: {
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4,
+            borderColor: '#000000',
+            borderTopLeftRadius: 4,
+            borderTopRightRadius: 4,
+            borderWidth: null
+          }
+        },
         {
           if: { hover: true },
           tokens: { backgroundColor: 'rgba(0, 0, 0, 0.1)' }
@@ -2377,6 +2469,18 @@ const theme = {
             borderWidth: 2
           }
         },
+        {
+          if: { focus: true, mini: true, pressed: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0.2)',
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4,
+            borderColor: '#000000',
+            borderTopLeftRadius: 4,
+            borderTopRightRadius: 4,
+            borderWidth: null
+          }
+        },
         { if: { compact: true }, tokens: {} }
       ],
       tokens: {
@@ -2482,7 +2586,10 @@ const theme = {
             contentPaddingLeft: 0,
             contentPaddingRight: 0,
             contentPaddingTop: 0,
-            contentPanelBackgroundColor: 'rgba(0, 0, 0, 0)'
+            contentPanelBackgroundColor: 'rgba(0, 0, 0, 0)',
+            contentPanelPaddingBottom: 0,
+            contentPanelPaddingTop: 0,
+            marginBottom: 0
           }
         }
       ],
@@ -3390,6 +3497,7 @@ const theme = {
         itemIconColor: '#ff0076',
         itemIconSize: 16,
         itemLineHeight: 1.3,
+        itemTextColor: '#000000',
         listGutter: 10
       }
     },
@@ -3977,8 +4085,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 },
@@ -4097,6 +4209,8 @@ const theme = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#000000',
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#000000',
@@ -7238,17 +7352,18 @@ const theme = {
             textTransform: 'uppercase'
           }
         },
-        {
-          if: { compact: true, size: 'large' },
-          tokens: { lineHeight: 1.2 }
-        },
         {
           if: { size: 'medium' },
           tokens: { fontSize: 16, lineHeight: 1.5 }
         },
+        { if: { compact: true }, tokens: { lineHeight: 1.25 } },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: { lineHeight: 1.2 }
+        },
         {
-          if: { compact: true, size: 'medium' },
-          tokens: { lineHeight: 1.25 }
+          if: { bold: true, compact: true, size: 'large' },
+          tokens: { lineHeight: 1.2 }
         },
         {
           if: { size: 'small' },
@@ -7264,7 +7379,11 @@ const theme = {
         },
         {
           if: { compact: true, size: 'micro' },
-          tokens: { lineHeight: 1.33333333333 }
+          tokens: { lineHeight: 1.2 }
+        },
+        {
+          if: { bold: true, compact: true, size: 'micro' },
+          tokens: { lineHeight: 1.2 }
         },
         {
           if: { size: 'display1' },
@@ -7660,6 +7779,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.56.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.58.0' }
 }
 export default theme

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.56.0"
+    "@telus-uds/palette-koodo": "^1.5.0",
+    "@telus-uds/system-theme-tokens": "^2.58.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^1.3.0"
+    "@telus-uds/palette-koodo": "^1.5.0"
   },
   "repository": {
     "type": "git",
@@ -31,5 +31,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "5.14.0"
+  "version": "5.16.0"
 }

package/theme.json

@@ -1,5 +1,88 @@
 {
   "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.cautionLight}",
+            "borderColor": "{palette.color.caution}",
+            "statusIcon": "{palette.icon.ExclamationTriangle}",
+            "statusIconColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "validation": "error"
+          },
+          "tokens": {
+            "actionIconMarginLeft": "{palette.size.size8}",
+            "backgroundColor": "{palette.color.dangerLight}",
+            "borderColor": "{palette.color.danger}",
+            "statusIcon": "{palette.icon.ExclamationOctagon}",
+            "statusIconColor": "{palette.color.danger}"
+          }
+        }
+      ],
+      "tokens": {
+        "actionIcon": "{palette.icon.ArrowRight}",
+        "actionIconColor": "{palette.color.black}",
+        "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.black}",
+        "contentFontName": "{palette.fontName.StagSans}",
+        "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.black}",
+        "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.black}",
+        "titleFontName": "{palette.fontName.StagSans}",
+        "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": {
@@ -2868,7 +2951,7 @@
           },
           "tokens": {
             "borderColor": "{palette.color.transparent}",
-            "borderWidth": "{system.border.zero}",
+            "borderWidth": "{system.border.none}",
             "icon": "{palette.icon.ChevronDown}",
             "iconColor": "{palette.color.black}",
             "iconGap": "{palette.size.size8}",
@@ -2904,6 +2987,20 @@
             "borderWidth": "{palette.border.border2}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "mini": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
         {
           "if": {
             "hover": true
@@ -2935,6 +3032,22 @@
             "borderWidth": "{palette.border.border2}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "mini": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
         {
           "if": {
             "compact": true
@@ -3096,7 +3209,10 @@
             "contentPaddingLeft": "{palette.size.size0}",
             "contentPaddingRight": "{palette.size.size0}",
             "contentPaddingTop": "{palette.size.size0}",
-            "contentPanelBackgroundColor": "{palette.color.transparent}"
+            "contentPanelBackgroundColor": "{palette.color.transparent}",
+            "contentPanelPaddingBottom": "{palette.size.size0}",
+            "contentPanelPaddingTop": "{palette.size.size0}",
+            "marginBottom": "{palette.size.size0}"
           }
         }
       ],
@@ -4534,6 +4650,7 @@
         "itemIconColor": "{palette.color.pink}",
         "itemIconSize": "{palette.size.size16}",
         "itemLineHeight": "{palette.lineHeight.multiply130}",
+        "itemTextColor": "{palette.color.black}",
         "listGutter": "{palette.size.size10}"
       }
     },
@@ -5141,9 +5258,12 @@
       "rules": [
         {
           "if": {
+            "system": true,
             "viewport": ["xl"]
           },
           "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
             "justifyContent": "{system.flexJustifyContent.center}"
           }
         },
@@ -5282,6 +5402,8 @@
         "borderRightWidth": "{palette.border.border1}",
         "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
+        "containerPaddingLeft": "{palette.size.size16}",
+        "containerPaddingRight": "{palette.size.size16}",
         "dismissButtonGap": "{palette.size.size24}",
         "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.black}",
@@ -8777,29 +8899,38 @@
         },
         {
           "if": {
-            "compact": true,
-            "size": "large"
+            "size": "medium"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "fontSize": "{palette.fontSize.size16}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
           }
         },
         {
           "if": {
-            "size": "medium"
+            "compact": true
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size16}",
-            "lineHeight": "{palette.lineHeight.ratio3to2}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
           "if": {
             "compact": true,
-            "size": "medium"
+            "size": "large"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio5to4}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "bold": true,
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
@@ -8835,7 +8966,17 @@
             "size": "micro"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "bold": true,
+            "compact": true,
+            "size": "micro"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {