feat: support expressive styles for Button, UnorderedList, OrderedList

docs/src/COMPONENT_API.json

@@ -368,6 +368,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "expressive",
+          "kind": "let",
+          "description": "Set to `true` to use Carbon's expressive typesetting",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "isSelected",
           "kind": "let",
@@ -6347,6 +6357,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "expressive",
+          "kind": "let",
+          "description": "Set to `true` to use Carbon's expressive typesetting",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@@ -11490,6 +11510,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "expressive",
+          "kind": "let",
+          "description": "Set to `true` to use Carbon's expressive typesetting",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

docs/src/pages/components/Button.svx

@@ -106,6 +106,24 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 <Button disabled>Disabled button</Button>
 
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+Note: the expressive styles only apply to the default and `"xl"` size buttons.
+
+<Button expressive size="xl">Primary</Button>
+<Button expressive size="xl" kind="secondary">Secondary</Button>
+<Button expressive size="xl" kind="tertiary">Tertiary</Button>
+<Button expressive size="xl" kind="ghost">Ghost</Button>
+<Button expressive size="xl" kind="danger">Danger</Button>
+<br /><br />
+<Button expressive>Primary</Button>
+<Button expressive kind="secondary">Secondary</Button>
+<Button expressive kind="tertiary">Tertiary</Button>
+<Button expressive kind="ghost">Ghost</Button>
+<Button expressive kind="danger">Danger</Button>
+
 ### Skeleton
 
 <Button skeleton />

docs/src/pages/components/OrderedList.svx

@@ -69,4 +69,14 @@ Use the `native` attribute to enable default browser list styles. This is useful
   </ListItem>
   <ListItem>Ordered list level 1</ListItem>
   <ListItem>Ordered list level 1</ListItem>
+</OrderedList>
+
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+<OrderedList expressive>
+  <ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
 </OrderedList>

docs/src/pages/components/UnorderedList.svx

@@ -47,4 +47,14 @@ components: ["UnorderedList", "ListItem"]
   </ListItem>
   <ListItem>Unordered list level 1</ListItem>
   <ListItem>Unordered list level 1</ListItem>
+</UnorderedList>
+
+### Expressive styles
+
+Set `expressive` to `true` to use Carbon's expressive typesetting.
+
+<UnorderedList expressive>
+  <ListItem><Link size="lg" href="#">Unordered list item</Link></ListItem>
+  <ListItem>Unordered list item</ListItem>
+  <ListItem>Unordered list item</ListItem>
 </UnorderedList>