feat: support expressive styles for Button, UnorderedList, OrderedList

COMPONENT_INDEX.md

@@ -351,6 +351,7 @@ None.
 | hasIconOnly      | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` for the icon-only variant                                                                                                                                                       |
 | kind             | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
 | size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</code>                                                                          | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
+| expressive       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
 | isSelected       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
 | icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                              | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Specify the ARIA label for the button icon                                                                                                                                                    |
@@ -2540,10 +2541,11 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                 | Default value      | Description                             |
+| Prop name  | Kind             | Reactive | Type                 | Default value      | Description                                          |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
-| nested    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
+| nested     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
-| native    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles |
+| native     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles              |
+| expressive | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
 
 ### Slots
 
@@ -4563,9 +4565,10 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                 | Default value      | Description                             |
+| Prop name  | Kind             | Reactive | Type                 | Default value      | Description                                          |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
-| nested    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
+| nested     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
+| expressive | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
 
 ### Slots
 

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

@@ -70,3 +70,13 @@ Use the `native` attribute to enable default browser list styles. This is useful
   <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

@@ -48,3 +48,13 @@ components: ["UnorderedList", "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>

src/Button/Button.svelte

@@ -17,6 +17,9 @@
    */
   export let size = "default";
 
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
+
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button
    */
@@ -98,6 +101,13 @@
     ...$$restProps,
     class: [
       "bx--btn",
+      expressive && "bx--btn--expressive",
+      ((size === "small" && !expressive) ||
+        (size === "sm" && !expressive) ||
+        (size === "small" && !expressive)) &&
+        "bx--btn--sm",
+      (size === "field" && !expressive) ||
+        (size === "md" && !expressive && "bx--btn--md"),
       size === "field" && "bx--btn--field",
       size === "small" && "bx--btn--sm",
       size === "xl" && "bx--btn--xl",

src/OrderedList/OrderedList.svelte

@@ -4,12 +4,16 @@
 
   /** Set to `true` to use native list styles */
   export let native = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
 </script>
 
 <ol
   class:bx--list--ordered="{!native}"
   class:bx--list--ordered--native="{native}"
   class:bx--list--nested="{nested}"
+  class:bx--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover

src/UnorderedList/UnorderedList.svelte

@@ -1,11 +1,15 @@
 <script>
   /** Set to `true` to use the nested variant */
   export let nested = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
 </script>
 
 <ul
   class:bx--list--unordered="{true}"
   class:bx--list--nested="{nested}"
+  class:bx--list--expressive="{expressive}"
   {...$$restProps}
   on:click
   on:mouseover

types/Button/Button.d.ts

@@ -26,6 +26,12 @@ export interface ButtonProps
    */
   size?: "default" | "field" | "small" | "xl";
 
+  /**
+   * Set to `true` to use Carbon's expressive typesetting
+   * @default false
+   */
+  expressive?: boolean;
+
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button
    * @default false

types/OrderedList/OrderedList.d.ts

@@ -14,6 +14,12 @@ export interface OrderedListProps
    * @default false
    */
   native?: boolean;
+
+  /**
+   * Set to `true` to use Carbon's expressive typesetting
+   * @default false
+   */
+  expressive?: boolean;
 }
 
 export default class OrderedList extends SvelteComponentTyped<

types/UnorderedList/UnorderedList.d.ts

@@ -8,6 +8,12 @@ export interface UnorderedListProps
    * @default false
    */
   nested?: boolean;
+
+  /**
+   * Set to `true` to use Carbon's expressive typesetting
+   * @default false
+   */
+  expressive?: boolean;
 }
 
 export default class UnorderedList extends SvelteComponentTyped<