@telus-uds/theme-koodo 3.14.0 → 3.15.0

package/theme.json

@@ -25,6 +25,100 @@
         "thickness": "{palette.border.border4}"
       }
     },
+    "Badge": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "outline": {
+          "type": "variant",
+          "values": [true]
+        },
+        "purpose": {
+          "type": "variant",
+          "values": ["offer", "editorial"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "outline": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.carouselPink}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.mosque}",
+            "color": "{palette.color.mosque}",
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.onahau}",
+            "color": "{palette.color.black}",
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.onahau}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.carouselPink}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.pill32}",
+        "borderWidth": "{palette.border.border2}",
+        "color": "{palette.color.flirt}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontWeight": "{palette.fontWeight.weight600}",
+        "gradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size2}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size2}"
+      }
+    },
     "Box": {
       "appearances": {
         "background": {
@@ -911,7 +1005,7 @@
         "icon": "{palette.icon.Check}",
         "iconBackgroundColor": "{palette.color.white}",
         "iconColor": "{palette.color.mosque}",
-        "iconSize": "{palette.size.size16}",
+        "iconSize": "{palette.size.size20}",
         "inputBackgroundColor": "{palette.color.white}",
         "inputBorderColor": "{palette.color.mosque}",
         "inputBorderRadius": "{palette.radius.none}",
@@ -1231,24 +1325,12 @@
         "validation": "{appearances.Feedback.validation}"
       },
       "rules": [
-        {
-          "if": {
-            "validation": "success"
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}",
-            "borderColor": "{palette.color.mintTulip}",
-            "color": "{palette.color.bilbao}"
-          }
-        },
         {
           "if": {
             "validation": "error"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.carouselPink}",
-            "borderColor": "{palette.color.carouselPink}",
-            "color": "{palette.color.trinidad}"
+            "backgroundColor": "{palette.color.piggyPink}"
           }
         },
         {
@@ -1258,7 +1340,7 @@
           },
           "tokens": {
             "icon": "{palette.icon.CheckCircledFilled}",
-            "iconColor": "{palette.color.bilbao}"
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -1267,29 +1349,29 @@
             "validation": "error"
           },
           "tokens": {
-            "icon": "{palette.icon.ExclamationTriangle}",
-            "iconColor": "{palette.color.trinidad}"
+            "icon": "{palette.icon.Caution}",
+            "iconColor": "{palette.color.amaranth}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.gallery}",
-        "borderColor": "{palette.color.silver}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.mortar}",
+        "backgroundColor": "{palette.color.icicle}",
+        "borderColor": "{palette.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
+        "borderWidth": "{palette.border.none}",
+        "color": "{palette.color.black}",
         "contentFontSize": "{palette.fontSize.size14}",
         "fontName": "{palette.fontName.StagSans}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.transparent}",
         "iconGap": "{palette.size.size8}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size20}",
         "lineHeight": "{palette.lineHeight.multiply150}",
-        "paddingBottom": "{palette.size.size10}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size10}",
+        "paddingTop": "{palette.size.size12}",
         "space": "{system.integer.2}",
         "titleFontSize": "{palette.fontSize.size16}"
       }
@@ -1580,10 +1662,10 @@
         "gap": "{palette.size.size8}",
         "hintColor": "{palette.color.black}",
         "hintFontName": "{palette.fontName.StagSans}",
-        "hintFontSize": "{palette.fontSize.size16}",
+        "hintFontSize": "{palette.fontSize.size14}",
         "hintFontWeight": "{palette.fontWeight.weight400}",
-        "hintLineHeight": "{palette.lineHeight.multiply140}",
-        "lineHeight": "{palette.lineHeight.multiply140}"
+        "hintLineHeight": "{palette.lineHeight.ratio10to7}",
+        "lineHeight": "{palette.lineHeight.multiply150}"
       }
     },
     "InputSupports": {
@@ -1595,12 +1677,22 @@
     },
     "Link": {
       "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": "{appearances.Link.focus}",
         "hover": "{appearances.Link.hover}",
         "iconPosition": "{appearances.Link.iconPosition}",
-        "rank": {
-          "description": "Prominence of the link.",
+        "inverse": {
           "type": "variant",
-          "values": ["secondary"]
+          "values": [true]
+        },
+        "pressed": "{appearances.Link.pressed}",
+        "size": {
+          "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
+          "type": "variant",
+          "values": ["micro", "small", "large"]
         }
       },
       "rules": [
@@ -1612,6 +1704,26 @@
             "iconSpace": "{system.integer.2}"
           }
         },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderOutline": "{system.borderStyle.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
         {
           "if": {
             "hover": true
@@ -1623,19 +1735,137 @@
         },
         {
           "if": {
-            "rank": "secondary"
+            "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blue}"
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.doveDark}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicle}",
+            "outerBorderColor": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.silver}"
           }
         },
         {
           "if": {
             "hover": true,
-            "rank": "secondary"
+            "inverse": true
+          },
+          "tokens": {
+            "color": "{palette.color.icicleDark}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "blockFontName": "{palette.fontName.StagSans}",
+            "blockFontSize": "{palette.fontSize.size12}",
+            "blockFontWeight": "{palette.fontWeight.weight600}",
+            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
+            "iconSize": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "blockFontSize": "{palette.fontSize.size14}",
+            "blockLineHeight": "{palette.lineHeight.ratio10to7}",
+            "iconSize": "{palette.size.size20}"
+          }
+        },
+        {
+          "if": {
+            "size": "large"
           },
           "tokens": {
-            "color": "{palette.color.darkBlue}"
+            "blockFontSize": "{palette.fontSize.size20}",
+            "blockLineHeight": "{palette.lineHeight.ratio7to5}",
+            "iconSize": "{palette.size.size24}"
           }
         }
       ],
@@ -1644,7 +1874,7 @@
         "blockFontName": "{palette.fontName.StagSans}",
         "blockFontSize": "{palette.fontSize.size16}",
         "blockFontWeight": "{palette.fontWeight.weight600}",
-        "blockLineHeight": "{palette.lineHeight.multiply150}",
+        "blockLineHeight": "{palette.lineHeight.ratio3to2}",
         "borderRadius": "{palette.radius.radius4}",
         "color": "{palette.color.mosque}",
         "icon": "{system.icon.none}",
@@ -1653,9 +1883,9 @@
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
-        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderGap": "{palette.size.size2}",
         "outerBorderOutline": "{system.borderStyle.none}",
-        "outerBorderWidth": "{palette.border.none}",
+        "outerBorderWidth": "{palette.border.border2}",
         "textLine": "{system.textLine.underline}",
         "textLineStyle": "{system.textLineStyle.solid}"
       }
@@ -2179,9 +2409,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
-            "color": "{palette.color.white}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -2189,9 +2417,9 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderColor": "{palette.color.mosque}",
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.dove}",
+            "iconColor": "{palette.color.dove}"
           }
         },
         {
@@ -2199,22 +2427,32 @@
             "focus": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border1}",
+            "outerBorderColor": "{palette.color.dove}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.white}",
-        "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.dove}",
+        "borderRadius": "{palette.radius.radius48}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.dove}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{system.icon.none}",
-        "iconColor": "{palette.color.white}",
+        "iconColor": "{palette.color.mosque}",
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.2}",
         "lineHeight": "{palette.lineHeight.multiply150}",
@@ -2224,10 +2462,10 @@
         "outerBorderColor": "{palette.color.white}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size8}",
+        "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size24}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
         "width": "{system.size.none}"
@@ -2237,16 +2475,16 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "backgroundColor": "{palette.color.texas}",
-        "borderColor": "{system.color.none}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius8}",
+        "borderWidth": "{palette.border.border1}",
         "flex": "{system.integer.1}",
         "minWidth": "{system.size.none}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size8}",
         "shadow": "{system.shadow.none}"
       }
     },
@@ -2316,7 +2554,7 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2324,7 +2562,7 @@
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.texas}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -2332,7 +2570,8 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.silver}",
+            "itemIconColor": "{palette.color.black}"
           }
         }
       ],
@@ -2340,25 +2579,25 @@
         "backgroundColor": "{system.color.none}",
         "dividerColor": "{palette.color.silver}",
         "dividerSize": "{palette.border.border1}",
-        "iconMarginTop": "{palette.size.size4}",
+        "iconMarginTop": "{palette.size.size0}",
         "interItemMargin": "{system.size.none}",
         "interItemMarginWithDivider": "{system.size.none}",
         "itemBulletColor": "{palette.color.flirt}",
         "itemBulletContainerAlign": "{system.textAlign.center}",
-        "itemBulletContainerWidth": "{palette.size.size16}",
-        "itemBulletHeight": "{palette.size.size4}",
-        "itemBulletWidth": "{palette.size.size4}",
+        "itemBulletContainerWidth": "{palette.size.size0}",
+        "itemBulletHeight": "{palette.size.size0}",
+        "itemBulletWidth": "{palette.size.size0}",
         "itemFontName": "{palette.fontName.StagSans}",
         "itemFontSize": "{palette.fontSize.size16}",
         "itemFontWeight": "{palette.fontWeight.weight600}",
-        "itemIconColor": "{palette.color.flirt}",
-        "itemIconSize": "{palette.size.size16}",
-        "itemLineHeight": "{palette.lineHeight.multiply130}",
+        "itemIconColor": "{palette.color.mosque}",
+        "itemIconSize": "{palette.size.size24}",
+        "itemLineHeight": "{palette.lineHeight.multiply160}",
         "listGutter": "{palette.size.size10}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size12}",
-        "paddingRight": "{palette.size.size12}",
-        "paddingTop": "{palette.size.size8}"
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size4}",
+        "paddingRight": "{palette.size.size4}",
+        "paddingTop": "{palette.size.size12}"
       }
     },
     "Radio": {