@telus-uds/theme-koodo 3.15.0 → 3.16.0

package/theme.json

@@ -290,45 +290,68 @@
     },
     "Button": {
       "appearances": {
-        "clear": {
-          "description": "Gives a button borders and a transparent background",
+        "danger": {
+          "description": "Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.",
           "type": "variant",
           "values": [true]
         },
         "focus": "{appearances.Button.focus}",
         "hover": "{appearances.Button.hover}",
         "inactive": "{appearances.Button.inactive}",
+        "inverse": {
+          "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.",
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.Button.pressed}",
-        "rank": {
-          "description": "Prominence of the button. Use the default (\"primary\") button style for the main action on a page or in a form, and \"secondary\" style for secondary actions.",
+        "priority": {
+          "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
           "type": "variant",
-          "values": ["secondary"]
+          "values": ["high", "low"]
         },
-        "rounded": {
-          "description": "Gives a button \"pill-style\" rounded sides",
+        "size": {
+          "type": "variant",
+          "values": ["small"]
+        },
+        "text": {
+          "description": "Text variant visually deprioritize the button styles",
           "type": "variant",
           "values": [true]
         },
-        "selected": "{appearances.Button.selected}"
+        "width": {
+          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "type": "variant",
+          "values": ["full"]
+        }
       },
       "rules": [
         {
           "if": {
-            "rounded": true
+            "priority": "high"
           },
           "tokens": {
-            "borderRadius": "{palette.radius.pill32}"
+            "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "clear": true
+            "danger": true
           },
           "tokens": {
-            "backgroundColor": "{system.color.none}",
-            "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border2}",
-            "color": "{palette.color.mosque}"
+            "borderColor": "{palette.color.trinidad}",
+            "color": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}",
+            "outerBackgroundColor": "{palette.color.transparent}"
           }
         },
         {
@@ -337,153 +360,495 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.mosqueDark}",
-            "borderColor": "{palette.color.mosqueDark}",
             "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "clear": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.none}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidad}",
+            "outerBorderColor": "{palette.color.trinidad}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.none}"
+            "backgroundColor": "{palette.color.trinidadDark}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.whiteDark}",
+            "borderColor": "{palette.color.whiteDark}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
+            "inverse": true,
             "pressed": true
           },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "color": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "priority": "high"
+          },
           "tokens": {
             "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
             "borderColor": "{palette.color.mosque}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size2}"
           }
         },
         {
           "if": {
-            "focus": true
+            "danger": true,
+            "pressed": true,
+            "priority": "high"
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.mortar}",
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "rank": "secondary"
+            "hover": true,
+            "inverse": true,
+            "priority": "high"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.blue}",
-            "borderColor": "{palette.color.blue}",
-            "color": "{palette.color.white}"
+            "backgroundColor": "{palette.color.whiteDark}",
+            "color": "{palette.color.mosque}"
           }
         },
         {
           "if": {
-            "clear": true,
-            "rank": "secondary"
+            "focus": true,
+            "inverse": true,
+            "priority": "high"
           },
           "tokens": {
             "backgroundColor": "{palette.color.white}",
-            "borderColor": "{palette.color.blue}",
-            "color": "{palette.color.blue}"
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mortar}",
+            "borderColor": "{palette.color.trinidad}",
+            "color": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.silver}",
+            "color": "{palette.color.dove}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "if": {
+            "width": "full"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "minWidth": "{system.size.zero}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "description": "Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.",
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "borderColor": "{palette.color.silver}",
+            "borderWidth": "{palette.border.none}",
+            "color": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "text": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.chathamsBlue}",
+            "minWidth": "{system.size.zero}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
             "hover": true,
-            "rank": "secondary"
+            "text": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.darkBlue}",
-            "borderColor": "{palette.color.darkBlue}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.chathamsBlueDark}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.chathamsBlue}",
+            "outerBorderColor": "{palette.color.chathamsBlue}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.mosque}",
+            "outerBorderColor": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "focus": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.none}",
+            "color": "{palette.color.trinidad}",
+            "outerBorderColor": "{palette.color.trinidad}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "high",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.mosqueDark}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": null,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.chathamsBlueDark}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "priority": "low",
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.chathamsBlueDark}"
+          }
+        },
+        {
+          "if": {
+            "danger": true,
+            "hover": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.trinidadDark}"
           }
         },
         {
           "if": {
             "pressed": true,
-            "rank": "secondary"
+            "text": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.onahau}",
-            "borderColor": "{palette.color.onahau}",
-            "color": "{palette.color.white}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
-            "rank": "secondary"
+            "pressed": true,
+            "text": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.blue}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
             "focus": true,
             "pressed": true,
-            "rank": "secondary"
+            "priority": "high",
+            "text": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.onahau}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "danger": true,
+            "focus": true,
+            "pressed": true,
+            "text": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity3}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.trinidad}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "selected": true
+            "inactive": true,
+            "text": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
-            "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "color": "{palette.color.silver}"
           }
         },
         {
           "if": {
             "focus": true,
-            "selected": true
+            "inverse": true,
+            "text": true
           },
           "tokens": {
-            "outerBorderGap": "{palette.size.size2}"
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "pressed": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.dove}",
+            "outerBorderColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "text": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.silver}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.white}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size24}",
         "iconSpace": "{system.integer.2}",
-        "lineHeight": "{palette.lineHeight.multiply150}",
-        "minWidth": "{system.size.zero}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "minWidth": "{palette.size.size144}",
         "opacity": "{system.opacity.opaque}",
-        "outerBackgroundColor": "{palette.color.transparent}",
-        "outerBorderColor": "{palette.color.white}",
-        "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size24}",
-        "paddingRight": "{palette.size.size24}",
-        "paddingTop": "{palette.size.size8}",
+        "outerBackgroundColor": "{palette.color.white}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{system.size.none}",
+        "outerBorderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size32}",
+        "paddingRight": "{palette.size.size32}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}",
         "textLine": "{system.textLine.none}",
@@ -1246,7 +1611,17 @@
             "decorative": true
           },
           "tokens": {
-            "color": "{palette.color.gallery}"
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "decorative": true,
+            "weight": "thick"
+          },
+          "tokens": {
+            "color": "{palette.color.mosque}",
+            "width": "{palette.size.size2}"
           }
         },
         {
@@ -1256,6 +1631,16 @@
           "tokens": {
             "color": "{palette.color.white}"
           }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "weight": "thick"
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "width": "{palette.size.size2}"
+          }
         }
       ],
       "tokens": {
@@ -1600,7 +1985,18 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.darkMosque}",
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosqueDark}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "borderColor": "{palette.color.mosqueDark}",
             "iconColor": "{palette.color.white}"
           }
         },
@@ -1611,7 +2007,8 @@
           },
           "tokens": {
             "borderColor": "{palette.color.mosque}",
-            "borderWidth": "{palette.border.border3}"
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.mosque}"
           }
         },
         {
@@ -1638,7 +2035,7 @@
         "backgroundColor": "{system.color.transparent}",
         "borderColor": "{palette.color.mosque}",
         "borderRadius": "{system.radius.round}",
-        "borderWidth": "{palette.border.border1}",
+        "borderWidth": "{palette.border.border3}",
         "iconColor": "{palette.color.mosque}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size24}",
@@ -2587,6 +2984,7 @@
         "itemBulletContainerWidth": "{palette.size.size0}",
         "itemBulletHeight": "{palette.size.size0}",
         "itemBulletWidth": "{palette.size.size0}",
+        "itemFontColor": "{palette.color.black}",
         "itemFontName": "{palette.fontName.StagSans}",
         "itemFontSize": "{palette.fontSize.size16}",
         "itemFontWeight": "{palette.fontWeight.weight600}",