@telus-uds/theme-koodo 5.16.0 → 5.16.2

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 24 Jun 2024 16:17:42 GMT
+ * Generated on Fri, 19 Jul 2024 18:12:19 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 24 Jun 2024 16:17:42 GMT
+ * Generated on Fri, 19 Jul 2024 18:12:20 GMT
  *
  */
 
@@ -839,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',
@@ -4209,8 +4209,8 @@ const theme = {
         borderRightWidth: 1,
         borderTopWidth: 1,
         color: '#000000',
-        containerPaddingLeft: 16,
-        containerPaddingRight: 16,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
         dismissButtonGap: 24,
         dismissIcon: PaletteIconClose,
         dismissIconColor: '#000000',
@@ -4265,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',
@@ -4573,7 +4574,10 @@ const theme = {
     },
     PriceLockup: {
       appearances: {
-        size: { type: 'variant', values: [ 'small', 'medium', 'large' ] },
+        size: {
+          type: 'variant',
+          values: [ 'micro', 'small', 'medium', 'large' ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -4581,6 +4585,27 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { size: 'micro' },
+          tokens: {
+            amountFontSize: 24,
+            bottomTextFontSize: 12,
+            bottomTextLineHeight: 1.2,
+            centsFontSize: 16,
+            centsLineHeight: 1.72,
+            currencySymbolFontSize: 16,
+            currencySymbolLineHeight: 1.72,
+            footnoteLinkFontSize: 12,
+            footnoteLinkLineHeight: 1,
+            footnoteMarginTop: 0,
+            rateFontSize: 12,
+            rateLineHeight: 2,
+            strikeThroughHeight: 2,
+            strikeThroughPosition: 18,
+            topTextFontSize: 12,
+            topTextLineHeight: 1.2
+          }
+        },
         {
           if: { size: 'small' },
           tokens: {
@@ -4588,12 +4613,13 @@ const theme = {
             centsFontSize: 20,
             centsLineHeight: 1.25,
             currencySymbolFontSize: 20,
+            footnoteLinkLineHeight: 1.14285714286,
             rateFontSize: 16,
             rateLineHeight: 1.5,
             strikeThroughHeight: 2,
             strikeThroughPosition: 18,
             topTextFontSize: 14,
-            topTextLineHeight: 1.42857142857
+            topTextLineHeight: 1.14285714286
           }
         },
         {
@@ -4604,13 +4630,14 @@ const theme = {
             centsFontSize: 24,
             centsFontWeight: '600',
             currencySymbolFontSize: 32,
+            footnoteLinkLineHeight: 1.2,
             rateFontName: 'StagSans',
             rateFontSize: 16,
             rateFontWeight: '600',
             rateLineHeight: 1.5,
             strikeThroughPosition: 27,
             topTextFontSize: 20,
-            topTextLineHeight: 1.4
+            topTextLineHeight: 1.2
           }
         },
         {
@@ -4630,7 +4657,7 @@ const theme = {
         amountLineHeight: 1,
         bottomLinksMarginLeft: 4,
         bottomTextFontSize: 14,
-        bottomTextLineHeight: 1.42857142857,
+        bottomTextLineHeight: 1.14285714286,
         bottomTextMarginTop: 0,
         centsFontName: 'StagSans',
         centsFontSize: 24,
@@ -4649,7 +4676,7 @@ const theme = {
         footnoteLinkFontName: 'StagSans',
         footnoteLinkFontSize: 14,
         footnoteLinkFontWeight: '600',
-        footnoteLinkLineHeight: 1.42857142857,
+        footnoteLinkLineHeight: 1.25,
         footnoteMarginTop: 4,
         priceMarginBottom: 0,
         rateFontName: 'StagSans',
@@ -4662,7 +4689,7 @@ const theme = {
         topTextFontName: 'StagSans',
         topTextFontSize: 16,
         topTextFontWeight: '700',
-        topTextLineHeight: 1.5,
+        topTextLineHeight: 1.25,
         topTextMarginBottom: 4
       }
     },
@@ -5202,8 +5229,8 @@ const theme = {
         iconBackgroundColor: 'rgba(0, 0, 0, 0)',
         iconColor: 'rgba(0, 0, 0, 0)',
         inputBackgroundColor: '#ffffff',
-        inputBorderColor: '#ffffff',
-        inputBorderWidth: 2,
+        inputBorderColor: '#000000',
+        inputBorderWidth: 1,
         inputOutlineColor: '#000000',
         inputOutlineWidth: 2,
         inputSize: 20,
@@ -7472,7 +7499,7 @@ const theme = {
         },
         { if: { inverse: true }, tokens: { color: '#ffffff' } },
         { if: { colour: 'default' }, tokens: { color: '#000000' } },
-        { if: { colour: 'brand' }, tokens: { color: '#ff0076' } },
+        { if: { colour: 'brand' }, tokens: { color: '#000000' } },
         { if: { colour: 'dark' }, tokens: { color: '#595959' } },
         { if: { colour: 'light' }, tokens: { color: '#666666' } },
         { if: { colour: 'positive' }, tokens: { color: '#1c7b2b' } },
@@ -7488,11 +7515,11 @@ const theme = {
         },
         {
           if: { colour: 'alternative2' },
-          tokens: { color: '#dd0066' }
+          tokens: { color: '#ff0076' }
         },
         {
           if: { colour: 'alternative3' },
-          tokens: { color: '#1c7b2b' }
+          tokens: { color: '#dd0066' }
         }
       ],
       tokens: {
@@ -7779,6 +7806,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.58.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.59.0' }
 }
 export default theme

package/package.json

@@ -6,7 +6,7 @@
   "description": "Koodo theme",
   "devDependencies": {
     "@telus-uds/palette-koodo": "^1.5.0",
-    "@telus-uds/system-theme-tokens": "^2.58.0"
+    "@telus-uds/system-theme-tokens": "^2.59.0"
   },
   "files": [
     "build",
@@ -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.16.0"
+  "version": "5.16.2"
 }

package/theme.json

@@ -1100,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}",
@@ -5402,8 +5402,8 @@
         "borderRightWidth": "{palette.border.border1}",
         "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
-        "containerPaddingLeft": "{palette.size.size16}",
-        "containerPaddingRight": "{palette.size.size16}",
+        "containerPaddingLeft": "{palette.size.size0}",
+        "containerPaddingRight": "{palette.size.size0}",
         "dismissButtonGap": "{palette.size.size24}",
         "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.black}",
@@ -5485,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}",
@@ -5794,11 +5795,34 @@
       "appearances": {
         "size": {
           "type": "variant",
-          "values": ["small", "medium", "large"]
+          "values": ["micro", "small", "medium", "large"]
         },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "amountFontSize": "{palette.fontSize.size24}",
+            "bottomTextFontSize": "{palette.fontSize.size12}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio6to5}",
+            "centsFontSize": "{palette.fontSize.size16}",
+            "centsLineHeight": "{palette.lineHeight.multiply172}",
+            "currencySymbolFontSize": "{palette.fontSize.size16}",
+            "currencySymbolLineHeight": "{palette.lineHeight.multiply172}",
+            "footnoteLinkFontSize": "{palette.fontSize.size12}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio1to1}",
+            "footnoteMarginTop": "{palette.size.size0}",
+            "rateFontSize": "{palette.fontSize.size12}",
+            "rateLineHeight": "{palette.lineHeight.ratio16to2}",
+            "strikeThroughHeight": "{palette.size.size2}",
+            "strikeThroughPosition": "{palette.size.size18}",
+            "topTextFontSize": "{palette.fontSize.size12}",
+            "topTextLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -5808,12 +5832,13 @@
             "centsFontSize": "{palette.fontSize.size20}",
             "centsLineHeight": "{palette.lineHeight.ratio5to4}",
             "currencySymbolFontSize": "{palette.fontSize.size20}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio8to7}",
             "rateFontSize": "{palette.fontSize.size16}",
             "rateLineHeight": "{palette.lineHeight.ratio3to2}",
             "strikeThroughHeight": "{palette.size.size2}",
             "strikeThroughPosition": "{palette.size.size18}",
             "topTextFontSize": "{palette.fontSize.size14}",
-            "topTextLineHeight": "{palette.lineHeight.ratio10to7}"
+            "topTextLineHeight": "{palette.lineHeight.ratio8to7}"
           }
         },
         {
@@ -5826,13 +5851,14 @@
             "centsFontSize": "{palette.fontSize.size24}",
             "centsFontWeight": "{palette.fontWeight.weight600}",
             "currencySymbolFontSize": "{palette.fontSize.size32}",
+            "footnoteLinkLineHeight": "{palette.lineHeight.ratio6to5}",
             "rateFontName": "{palette.fontName.StagSans}",
             "rateFontSize": "{palette.fontSize.size16}",
             "rateFontWeight": "{palette.fontWeight.weight600}",
             "rateLineHeight": "{palette.lineHeight.ratio3to2}",
             "strikeThroughPosition": "{palette.size.size27}",
             "topTextFontSize": "{palette.fontSize.size20}",
-            "topTextLineHeight": "{palette.lineHeight.ratio7to5}"
+            "topTextLineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
@@ -5855,7 +5881,7 @@
         "amountLineHeight": "{palette.lineHeight.ratio1to1}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
         "bottomTextFontSize": "{palette.fontSize.size14}",
-        "bottomTextLineHeight": "{palette.lineHeight.ratio10to7}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio8to7}",
         "bottomTextMarginTop": "{palette.size.size0}",
         "centsFontName": "{palette.fontName.StagSans}",
         "centsFontSize": "{palette.fontSize.size24}",
@@ -5874,7 +5900,7 @@
         "footnoteLinkFontName": "{palette.fontName.StagSans}",
         "footnoteLinkFontSize": "{palette.fontSize.size14}",
         "footnoteLinkFontWeight": "{palette.fontWeight.weight600}",
-        "footnoteLinkLineHeight": "{palette.lineHeight.ratio10to7}",
+        "footnoteLinkLineHeight": "{palette.lineHeight.ratio5to4}",
         "footnoteMarginTop": "{palette.size.size4}",
         "priceMarginBottom": "{palette.size.size0}",
         "rateFontName": "{palette.fontName.StagSans}",
@@ -5887,7 +5913,7 @@
         "topTextFontName": "{palette.fontName.StagSans}",
         "topTextFontSize": "{palette.fontSize.size16}",
         "topTextFontWeight": "{palette.fontWeight.weight700}",
-        "topTextLineHeight": "{palette.lineHeight.ratio3to2}",
+        "topTextLineHeight": "{palette.lineHeight.ratio5to4}",
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
@@ -6568,8 +6594,8 @@
         "iconBackgroundColor": "{palette.color.transparent}",
         "iconColor": "{palette.color.transparent}",
         "inputBackgroundColor": "{palette.color.white}",
-        "inputBorderColor": "{palette.color.white}",
-        "inputBorderWidth": "{palette.border.border2}",
+        "inputBorderColor": "{palette.color.black}",
+        "inputBorderWidth": "{palette.border.border1}",
         "inputOutlineColor": "{palette.color.black}",
         "inputOutlineWidth": "{palette.border.border2}",
         "inputSize": "{palette.size.size20}",
@@ -9119,7 +9145,7 @@
             "colour": "brand"
           },
           "tokens": {
-            "color": "{palette.color.pink}"
+            "color": "{palette.color.black}"
           }
         },
         {
@@ -9207,7 +9233,7 @@
             "colour": "alternative2"
           },
           "tokens": {
-            "color": "{palette.color.pinkDark}"
+            "color": "{palette.color.pink}"
           }
         },
         {
@@ -9215,7 +9241,7 @@
             "colour": "alternative3"
           },
           "tokens": {
-            "color": "{palette.color.success}"
+            "color": "{palette.color.pinkDark}"
           }
         }
       ],