@telus-uds/theme-koodo 5.15.0 → 5.16.1

package/build/web/spacingScale.js

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

package/build/web/theme.js

@@ -1,10 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 07 Jun 2024 22:34:32 GMT
+ * Generated on Thu, 04 Jul 2024 19:26:59 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: {
@@ -758,8 +839,8 @@ const theme = {
         outerBorderGap: null,
         outerBorderWidth: 1,
         paddingBottom: 12,
-        paddingLeft: 32,
-        paddingRight: 32,
+        paddingLeft: 16,
+        paddingRight: 16,
         paddingTop: 12,
         shadow: null,
         textAlign: 'center',
@@ -4004,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 },
@@ -4124,6 +4209,8 @@ const theme = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#000000',
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#000000',
@@ -4178,8 +4265,9 @@ const theme = {
         headerFontName: 'StagSans',
         headerFontWeight: '600',
         interItemMargin: 8,
-        itemBulletContainerWidth: 16,
+        itemBulletContainerWidth: 20,
         itemBulletHeight: 4,
+        itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
         itemColor: '#000000',
         itemFontName: 'StagSans',
@@ -7692,6 +7780,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.57.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.59.0' }
 }
 export default theme

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^1.4.0",
-    "@telus-uds/system-theme-tokens": "^2.57.0"
+    "@telus-uds/palette-koodo": "^1.5.0",
+    "@telus-uds/system-theme-tokens": "^2.59.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^1.4.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.15.0"
+  "version": "5.16.1"
 }

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": {
@@ -1017,8 +1100,8 @@
         "outerBorderGap": "{system.size.none}",
         "outerBorderWidth": "{palette.border.border1}",
         "paddingBottom": "{palette.size.size12}",
-        "paddingLeft": "{palette.size.size32}",
-        "paddingRight": "{palette.size.size32}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
         "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
@@ -5175,9 +5258,12 @@
       "rules": [
         {
           "if": {
+            "system": true,
             "viewport": ["xl"]
           },
           "tokens": {
+            "containerPaddingLeft": "{palette.size.size16}",
+            "containerPaddingRight": "{palette.size.size16}",
             "justifyContent": "{system.flexJustifyContent.center}"
           }
         },
@@ -5316,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}",
@@ -5397,8 +5485,9 @@
         "headerFontName": "{palette.fontName.StagSans}",
         "headerFontWeight": "{palette.fontWeight.weight600}",
         "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.black}",
         "itemFontName": "{palette.fontName.StagSans}",