@telus-uds/theme-allium 4.13.1 → 4.15.0

package/theme.json

@@ -31,6 +31,10 @@
           "type": "variant",
           "values": [true]
         },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
         "outline": {
           "type": "variant",
           "values": [true]
@@ -41,6 +45,16 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "color": "{palette.color.white}"
+          }
+        },
         {
           "if": {
             "outline": true
@@ -1759,6 +1773,154 @@
         "labelMarginLeft": "{palette.size.size10}"
       }
     },
+    "CheckboxCard": {
+      "appearances": {
+        "checked": "{appearances.CheckboxCard.checked}",
+        "error": "{appearances.CheckboxCard.error}",
+        "focus": "{appearances.CheckboxCard.focus}",
+        "hover": "{appearances.CheckboxCard.hover}",
+        "inactive": "{appearances.CheckboxCard.inactive}",
+        "pressed": "{appearances.CheckboxCard.pressed}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size24}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}",
+            "paddingBottom": "{palette.size.size24}",
+            "paddingLeft": "{palette.size.size16}",
+            "paddingRight": "{palette.size.size24}",
+            "paddingTop": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greyShuttle}",
+            "checkboxOuterBorderColor": "{palette.color.greyMystic}",
+            "checkboxOuterBorderWidth": "{palette.border.border2}",
+            "outerBorderColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "checkboxInputBorderColor": "{palette.color.purpleDeluge}",
+            "checkboxInputBorderWidth": "{palette.border.border3}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}"
+          }
+        },
+        {
+          "description": "Pressed state matches hover state plus light grey background",
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "checkboxInputBorderColor": "{palette.color.greyShuttle}",
+            "checkboxInputBorderWidth": "{palette.border.border1}",
+            "checkboxOuterBorderColor": "{palette.color.greyMystic}",
+            "checkboxOuterBorderWidth": "{palette.border.border3}",
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBorderGap": "{palette.size.size0}"
+          }
+        },
+        {
+          "if": {
+            "checked": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "checked": true,
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.red}",
+            "checkboxInputBorderColor": "{palette.color.red}",
+            "color": "{palette.color.red}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.transparent}",
+            "checkboxCheckedBackgroundColor": "{palette.color.greyShuttle}",
+            "checkboxInputBackgroundColor": "{palette.color.greyCloud}",
+            "checkboxInputBorderColor": "{system.color.transparent}",
+            "checkboxInputSize": "{palette.size.size12}",
+            "checkboxOuterBorderColor": "{palette.color.greyCloud}",
+            "checkboxOuterBorderGap": "{palette.size.size2}",
+            "checkboxOuterBorderWidth": "{palette.border.border1}",
+            "color": "{palette.color.greyShuttle}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyCloud}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "checkboxCheckedBackgroundColor": "{palette.color.purpleDeluge}",
+        "checkboxCheckedSize": "{palette.size.size12}",
+        "checkboxInputBackgroundColor": "{palette.color.white}",
+        "checkboxInputBorderColor": "{palette.color.greyShuttle}",
+        "checkboxInputBorderWidth": "{palette.border.border1}",
+        "checkboxInputOutlineColor": "{palette.color.transparent}",
+        "checkboxInputOutlineWidth": "{palette.border.none}",
+        "checkboxInputSize": "{palette.size.size20}",
+        "checkboxOuterBorderColor": "{system.color.transparent}",
+        "checkboxOuterBorderGap": "{system.size.zero}",
+        "checkboxOuterBorderWidth": "{system.border.zero}",
+        "checkboxSpace": "{system.integer.2}",
+        "color": "{palette.color.greyThunder}",
+        "contentAlignItems": "{system.flexAlign.stretch}",
+        "contentFlexGrow": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.1}",
+        "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
+        "contentSpace": "{system.integer.2}",
+        "flex": "{system.integer.1}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontSize": "{palette.fontSize.size20}",
+        "fontWeight": "{palette.fontWeight.weight500}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "lineHeight": "{palette.lineHeight.ratio7to5}",
+        "minWidth": "{palette.size.size264}",
+        "outerBorderColor": "{system.color.transparent}",
+        "outerBorderGap": "{system.size.zero}",
+        "outerBorderWidth": "{palette.border.border2}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size10}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "shadow": "{system.shadow.none}",
+        "textTransform": "{system.textTransform.none}"
+      }
+    },
     "CheckboxGroup": {
       "appearances": {},
       "rules": [],
@@ -2448,8 +2610,8 @@
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.greyAthens}",
-        "borderColor": "{palette.color.greyMystic}",
+        "backgroundColor": "{palette.color.brandLight}",
+        "borderColor": "{palette.color.transparent}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greyThunder}",
@@ -2501,8 +2663,56 @@
       }
     },
     "Footnote": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size32}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size16}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size40}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size4}",
+            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["xl"]
+          },
+          "tokens": {
+            "footnoteBodyPaddingBottom": "{palette.size.size40}",
+            "footnoteBodyPaddingLeft": "{palette.size.size16}",
+            "footnoteBodyPaddingRight": "{palette.size.size16}",
+            "footnoteBodyPaddingTop": "{palette.size.size0}",
+            "footnoteHeaderPaddingBottom": "{palette.size.size24}",
+            "footnoteHeaderPaddingLeft": "{palette.size.size16}",
+            "footnoteHeaderPaddingRight": "{palette.size.size16}",
+            "footnoteHeaderPaddingTop": "{palette.size.size24}"
+          }
+        }
+      ],
       "tokens": {
         "closeButtonBackgroundColor": "{palette.color.greyAthens}",
         "closeButtonBorderColor": "{palette.color.greyShuttle}",
@@ -2517,16 +2727,16 @@
         "closeIcon": "{palette.icon.Close}",
         "footnoteBackground": "{palette.color.greyAthens}",
         "footnoteBodyBackground": "{palette.color.greyAthens}",
-        "footnoteBodyPaddingBottom": "{palette.size.size32}",
+        "footnoteBodyPaddingBottom": "{palette.size.size40}",
         "footnoteBodyPaddingLeft": "{palette.size.size16}",
         "footnoteBodyPaddingRight": "{palette.size.size16}",
         "footnoteBodyPaddingTop": "{palette.size.size0}",
         "footnoteBorderColorMd": "{palette.color.greyCloud}",
         "footnoteBorderTopSizeMd": "{palette.border.border1}",
-        "footnoteHeaderPaddingBottom": "{palette.size.size16}",
+        "footnoteHeaderPaddingBottom": "{palette.size.size24}",
         "footnoteHeaderPaddingLeft": "{palette.size.size16}",
-        "footnoteHeaderPaddingRight": "{palette.size.size16}",
-        "footnoteHeaderPaddingTop": "{palette.size.size16}",
+        "footnoteHeaderPaddingRight": "{palette.size.size4}",
+        "footnoteHeaderPaddingTop": "{palette.size.size24}",
         "headerFontName": "{palette.fontName.HelveticaNow}",
         "headerFontSize": "{palette.size.size16}",
         "headerFontWeight": "{palette.fontWeight.weight500}",
@@ -4109,9 +4319,9 @@
         }
       ],
       "tokens": {
-        "backgroundColor": "{palette.color.greyAthens}",
+        "backgroundColor": "{palette.color.brandLight}",
         "borderBottomWidth": "{palette.border.border1}",
-        "borderColor": "{palette.color.greyShuttle}",
+        "borderColor": "{palette.color.purpleDeluge}",
         "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.radius6}",
         "borderRightWidth": "{palette.border.border1}",
@@ -6048,7 +6258,8 @@
         "alignItems": "{system.flexAlign.stretch}",
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
-        "justifyContent": "{system.flexJustifyContent.flexStart}"
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "width": "{system.size.none}"
       }
     },
     "StepTracker": {
@@ -6366,6 +6577,11 @@
     },
     "Tabs": {
       "appearances": {
+        "equalWidth": {
+          "description": "Divide the available width equally among `TabsItem`",
+          "type": "variant",
+          "values": [true]
+        },
         "inverse": {
           "description": "Styles the link white for use on dark backgrounds.",
           "type": "variant",
@@ -6394,6 +6610,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "equalWidth": {
+          "description": "Divide the available width equally among `TabsItem`",
+          "type": "variant",
+          "values": [true]
+        },
         "focus": "{appearances.TabsItem.pressed}",
         "hover": "{appearances.TabsItem.pressed}",
         "inverse": {
@@ -6410,7 +6631,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
+            "backgroundColor": "{palette.color.dark5}",
             "color": "{palette.color.purpleTelus}",
             "highlightBarBorderRadius": "{palette.radius.pill32}",
             "highlightBarBorderWidth": "{palette.border.border1}",
@@ -6507,6 +6728,14 @@
             "borderColor": "{palette.color.white}",
             "highlightColor": "{palette.color.white}"
           }
+        },
+        {
+          "if": {
+            "equalWidth": true
+          },
+          "tokens": {
+            "maxWidth": "{system.size.none}"
+          }
         }
       ],
       "tokens": {