@telus-uds/theme-koodo 3.9.0 → 3.11.0

package/build/android/theme.json

@@ -1558,13 +1558,21 @@
     },
     "Icon": {
       "appearances": {
-        "colour": {
+        "color": {
           "type": "variant",
-          "values": ["primary", "secondary", "black", "white"]
+          "values": [
+            "brand",
+            "subtle",
+            "offer",
+            "success",
+            "danger",
+            "warning",
+            "inverse"
+          ]
         },
         "size": {
           "type": "variant",
-          "values": ["small"]
+          "values": ["micro", "small", "large", "extraLarge"]
         },
         "status": {
           "description": "Uses icon colour to communicate meaning to the user",
@@ -1573,6 +1581,14 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "size": 16
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1583,46 +1599,101 @@
         },
         {
           "if": {
-            "colour": "primary"
+            "size": "large"
+          },
+          "tokens": {
+            "size": 32
+          }
+        },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": 48
+          }
+        },
+        {
+          "if": {
+            "color": "brand"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "secondary"
+            "color": "subtle"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0.63137,
-              "blue": 0.85882,
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "black"
+            "color": "offer"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "white"
+            "color": "success"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "danger"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "warning"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "inverse"
           },
           "tokens": {
             "color": {
@@ -1662,9 +1733,9 @@
       ],
       "tokens": {
         "color": {
-          "red": 0.4,
-          "green": 0.4,
-          "blue": 0.4,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "scale": 1,
@@ -1750,7 +1821,7 @@
         },
         "fontName": "StagSans",
         "fontSize": 16,
-        "fontWeight": 700,
+        "fontWeight": 600,
         "gap": 8,
         "hintColor": {
           "red": 0,
@@ -1759,7 +1830,7 @@
           "alpha": 1
         },
         "hintFontName": "StagSans",
-        "hintFontSize": 14,
+        "hintFontSize": 16,
         "hintFontWeight": 400,
         "hintLineHeight": 1.4,
         "lineHeight": 1.4

package/build/ios/theme.json

@@ -1558,13 +1558,21 @@
     },
     "Icon": {
       "appearances": {
-        "colour": {
+        "color": {
           "type": "variant",
-          "values": ["primary", "secondary", "black", "white"]
+          "values": [
+            "brand",
+            "subtle",
+            "offer",
+            "success",
+            "danger",
+            "warning",
+            "inverse"
+          ]
         },
         "size": {
           "type": "variant",
-          "values": ["small"]
+          "values": ["micro", "small", "large", "extraLarge"]
         },
         "status": {
           "description": "Uses icon colour to communicate meaning to the user",
@@ -1573,6 +1581,14 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "size": 16
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1583,46 +1599,101 @@
         },
         {
           "if": {
-            "colour": "primary"
+            "size": "large"
+          },
+          "tokens": {
+            "size": 32
+          }
+        },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": 48
+          }
+        },
+        {
+          "if": {
+            "color": "brand"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "secondary"
+            "color": "subtle"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0.63137,
-              "blue": 0.85882,
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "black"
+            "color": "offer"
           },
           "tokens": {
             "color": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "colour": "white"
+            "color": "success"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "danger"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "warning"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "color": "inverse"
           },
           "tokens": {
             "color": {
@@ -1662,9 +1733,9 @@
       ],
       "tokens": {
         "color": {
-          "red": 0.4,
-          "green": 0.4,
-          "blue": 0.4,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "scale": 1,
@@ -1750,7 +1821,7 @@
         },
         "fontName": "StagSans",
         "fontSize": 16,
-        "fontWeight": 700,
+        "fontWeight": 600,
         "gap": 8,
         "hintColor": {
           "red": 0,
@@ -1759,7 +1830,7 @@
           "alpha": 1
         },
         "hintFontName": "StagSans",
-        "hintFontSize": 14,
+        "hintFontSize": 16,
         "hintFontWeight": 400,
         "hintLineHeight": 1.4,
         "lineHeight": 1.4

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 23 Feb 2023 17:19:37 GMT
+ * Generated on Thu, 02 Mar 2023 22:28:35 GMT
  *
  */
 
@@ -958,11 +958,19 @@ module.exports = {
     },
     Icon: {
       appearances: {
-        colour: {
+        color: {
           type: 'variant',
-          values: [ 'primary', 'secondary', 'black', 'white' ]
+          values: [
+            'brand',   'subtle',
+            'offer',   'success',
+            'danger',  'warning',
+            'inverse'
+          ]
+        },
+        size: {
+          type: 'variant',
+          values: [ 'micro', 'small', 'large', 'extraLarge' ]
         },
-        size: { type: 'variant', values: [ 'small' ] },
         status: {
           description: 'Uses icon colour to communicate meaning to the user',
           type: 'variant',
@@ -970,16 +978,22 @@ module.exports = {
         }
       },
       rules: [
+        { if: { size: 'micro' }, tokens: { size: 16 } },
         { if: { size: 'small' }, tokens: { size: 20 } },
-        { if: { colour: 'primary' }, tokens: { color: '#000000' } },
-        { if: { colour: 'secondary' }, tokens: { color: '#00a1db' } },
-        { if: { colour: 'black' }, tokens: { color: '#000000' } },
-        { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
+        { if: { size: 'large' }, tokens: { size: 32 } },
+        { if: { size: 'extraLarge' }, tokens: { size: 48 } },
+        { if: { color: 'brand' }, tokens: { color: '#016b6a' } },
+        { if: { color: 'subtle' }, tokens: { color: '#666666' } },
+        { if: { color: 'offer' }, tokens: { color: '#016b6a' } },
+        { if: { color: 'success' }, tokens: { color: '#016b6a' } },
+        { if: { color: 'danger' }, tokens: { color: '#ee2c74' } },
+        { if: { color: 'warning' }, tokens: { color: '#595959' } },
+        { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
         { if: { status: 'success' }, tokens: { color: '#016b6a' } },
         { if: { status: 'error' }, tokens: { color: '#ee2c74' } }
       ],
       tokens: {
-        color: '#666666',
+        color: '#000000',
         scale: 1,
         size: 24,
         translateX: 0,
@@ -1041,11 +1055,11 @@ module.exports = {
         color: '#000000',
         fontName: 'StagSans',
         fontSize: 16,
-        fontWeight: '700',
+        fontWeight: '600',
         gap: 8,
         hintColor: '#000000',
         hintFontName: 'StagSans',
-        hintFontSize: 14,
+        hintFontSize: 16,
         hintFontWeight: '400',
         hintLineHeight: 1.4,
         lineHeight: 1.4

package/package.json

@@ -31,5 +31,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "3.9.0"
+  "version": "3.11.0"
 }

package/theme.json

@@ -1097,13 +1097,13 @@
     },
     "Icon": {
       "appearances": {
-        "colour": {
+        "color": {
           "type": "variant",
-          "values": ["primary", "secondary", "black", "white"]
+          "values": ["brand", "subtle", "offer", "success", "danger", "warning", "inverse"]
         },
         "size": {
           "type": "variant",
-          "values": ["small"]
+          "values": ["micro", "small", "large", "extraLarge"]
         },
         "status": {
           "description": "Uses icon colour to communicate meaning to the user",
@@ -1112,6 +1112,14 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "size": "{palette.size.size16}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1122,31 +1130,71 @@
         },
         {
           "if": {
-            "colour": "primary"
+            "size": "large"
           },
           "tokens": {
-            "color": "{palette.color.black}"
+            "size": "{palette.size.size32}"
           }
         },
         {
           "if": {
-            "colour": "secondary"
+            "size": "extraLarge"
           },
           "tokens": {
-            "color": "{palette.color.blue}"
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "color": "brand"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
           }
         },
         {
           "if": {
-            "colour": "black"
+            "color": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.black}"
+            "color": "{palette.color.dove}"
           }
         },
         {
           "if": {
-            "colour": "white"
+            "color": "offer"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "color": "success"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "color": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.amaranth}"
+          }
+        },
+        {
+          "if": {
+            "color": "warning"
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "color": "inverse"
           },
           "tokens": {
             "color": "{palette.color.white}"
@@ -1170,7 +1218,7 @@
         }
       ],
       "tokens": {
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.black}",
         "scale": "{system.integer.1}",
         "size": "{palette.size.size24}",
         "translateX": "{system.size.zero}",
@@ -1223,11 +1271,11 @@
         "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight700}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "gap": "{palette.size.size8}",
         "hintColor": "{palette.color.black}",
         "hintFontName": "{palette.fontName.StagSans}",
-        "hintFontSize": "{palette.fontSize.size14}",
+        "hintFontSize": "{palette.fontSize.size16}",
         "hintFontWeight": "{palette.fontWeight.weight400}",
         "hintLineHeight": "{palette.lineHeight.multiply140}",
         "lineHeight": "{palette.lineHeight.multiply140}"