Skip to content

Conversation

aaronccasanova
Copy link
Member

WHY are these changes introduced?

Fixes #10510
Fixes #10514

WHAT is this pull request doing?

Adds the following composite text tokens:

New Token Value
--p-text-heading-3xl-font-family --p-font-family-sans
--p-text-heading-3xl-font-size --p-font-size-900
--p-text-heading-3xl-font-weight --p-font-weight-bold
--p-text-heading-3xl-font-letter-spacing --p-font-letter-spacing-densest
--p-text-heading-3xl-font-line-height --p-font-line-height-1200
--p-text-heading-2xl-font-family --p-font-family-sans
--p-text-heading-2xl-font-size --p-font-size-750
--p-text-heading-2xl-font-weight --p-font-weight-bold
--p-text-heading-2xl-font-letter-spacing --p-font-letter-spacing-denser
--p-text-heading-2xl-font-line-height --p-font-size-1000
--p-text-heading-xl-font-family --p-font-family-sans
--p-text-heading-xl-font-size --p-font-size-600
--p-text-heading-xl-font-weight --p-font-weight-bold
--p-text-heading-xl-font-letter-spacing --p-font-letter-spacing-dense
--p-text-heading-xl-font-line-height --p-font-line-height-800
--p-text-heading-lg-font-family --p-font-family-sans
--p-text-heading-lg-font-size --p-font-size-500
--p-text-heading-lg-font-weight --p-font-weight-semibold
--p-text-heading-lg-font-letter-spacing --p-font-letter-spacing-dense
--p-text-heading-lg-font-line-height --p-font-size-600
--p-text-heading-md-font-family --p-font-family-sans
--p-text-heading-md-font-size --p-font-size-350
--p-text-heading-md-font-weight --p-font-weight-semibold
--p-text-heading-md-font-letter-spacing --p-font-letter-spacing-normal
--p-text-heading-md-font-line-height --p-font-size-500
--p-text-heading-sm-font-family --p-font-family-sans
--p-text-heading-sm-font-size --p-font-size-325
--p-text-heading-sm-font-weight --p-font-weight-semibold
--p-text-heading-sm-font-letter-spacing --p-font-letter-spacing-normal
--p-text-heading-sm-font-line-height --p-font-size-500
--p-text-body-lg-font-family --p-font-family-sans
--p-text-body-lg-font-size --p-font-size-350
--p-text-body-lg-font-weight --p-font-weight-regular
--p-text-body-lg-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-lg-font-line-height --p-font-size-500
--p-text-body-md-font-family --p-font-family-sans
--p-text-body-md-font-size --p-font-size-325
--p-text-body-md-font-weight --p-font-weight-regular
--p-text-body-md-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-md-font-line-height --p-font-size-500
--p-text-body-sm-font-family --p-font-family-sans
--p-text-body-sm-font-size --p-font-size-300
--p-text-body-sm-font-weight --p-font-weight-regular
--p-text-body-sm-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-sm-font-line-height --p-font-size-400
--p-text-body-xs-font-family --p-font-family-sans
--p-text-body-xs-font-size --p-font-size-275
--p-text-body-xs-font-weight --p-font-weight-regular
--p-text-body-xs-font-letter-spacing --p-font-letter-spacing-normal
--p-text-body-xs-font-line-height --p-font-size-300

Adds the following composite font-letter-spacing tokens:

New Token Value
--p-font-letter-spacing-densest -0.54px
--p-font-letter-spacing-denser -0.3px
--p-font-letter-spacing-dense -0.2px
--p-font-letter-spacing-normal 0px

Copy link
Contributor

@lgriffee lgriffee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super slick how you set this up 🔥✨💯🚢 🎉

Copy link

@bernardojoaogarcia bernardojoaogarcia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing 🙌

Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@aaronccasanova aaronccasanova merged commit f26cebe into main Sep 25, 2023
@aaronccasanova aaronccasanova deleted the add-composite-text-tokens branch September 25, 2023 15:50
sophschneider pushed a commit that referenced this pull request Sep 25, 2023
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-tokens@7.11.0

### Minor Changes

- [#10647](#10647)
[`f26cebe99`](f26cebe)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
composite `text` and `font-letter-spacing` tokens


- [#10643](#10643)
[`2359e5f5a`](2359e5f)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added semantic
`space` token scale

## @shopify/polaris-migrator@0.22.6

### Patch Changes

- Updated dependencies
\[[`f26cebe99`](f26cebe),
[`2359e5f5a`](2359e5f)]:
    -   @shopify/polaris-tokens@7.11.0
    -   @shopify/stylelint-polaris@14.0.6

## @shopify/polaris@11.20.1

### Patch Changes

- [#10665](#10665)
[`22dbada34`](22dbada)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `Modal`
missing `FrameContext` error


- [#10663](#10663)
[`f6a965102`](f6a9651)
Thanks [@chloerice](https://github.com/chloerice)! - Reverted disabling
of `Page` `secondaryActions` when `IndexFilters` is in filter `mode`


- [#10649](#10649)
[`3bafbea50`](3bafbea)
Thanks [@mattkubej](https://github.com/mattkubej)! - Replace usages of
`bg-secondary-experimental` with `bg-subdued` for Tables

- Updated dependencies
\[[`f26cebe99`](f26cebe),
[`2359e5f5a`](2359e5f)]:
    -   @shopify/polaris-tokens@7.11.0

## @shopify/stylelint-polaris@14.0.6

### Patch Changes

- Updated dependencies
\[[`f26cebe99`](f26cebe),
[`2359e5f5a`](2359e5f)]:
    -   @shopify/polaris-tokens@7.11.0

## polaris-for-vscode@0.8.0

### Minor Changes

- [#10647](#10647)
[`f26cebe99`](f26cebe)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
composite `text` token completions

## polaris.shopify.com@0.57.9

### Patch Changes

- [#10609](#10609)
[`b53189c72`](b53189c)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated component
example backgrounds

- Updated dependencies
\[[`22dbada34`](22dbada),
[`f26cebe99`](f26cebe),
[`f6a965102`](f6a9651),
[`3bafbea50`](3bafbea),
[`2359e5f5a`](2359e5f)]:
    -   @shopify/polaris@11.20.1
    -   @shopify/polaris-tokens@7.11.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
### WHY are these changes introduced?

Fixes Shopify#10510 
Fixes Shopify#10514

### WHAT is this pull request doing?

Adds the following composite `text` tokens:

| New Token          | Value        |
| ------------------------- | ------------------------ |  
| `--p-text-heading-3xl-font-family` | `--p-font-family-sans` |
| `--p-text-heading-3xl-font-size` | `--p-font-size-900` |
| `--p-text-heading-3xl-font-weight` | `--p-font-weight-bold` |
| `--p-text-heading-3xl-font-letter-spacing` |
`--p-font-letter-spacing-densest` |
| `--p-text-heading-3xl-font-line-height` | `--p-font-line-height-1200`
|
| `--p-text-heading-2xl-font-family` | `--p-font-family-sans` |
| `--p-text-heading-2xl-font-size` | `--p-font-size-750` |
| `--p-text-heading-2xl-font-weight` | `--p-font-weight-bold` |
| `--p-text-heading-2xl-font-letter-spacing` |
`--p-font-letter-spacing-denser` |
| `--p-text-heading-2xl-font-line-height` | `--p-font-size-1000` |
| `--p-text-heading-xl-font-family` | `--p-font-family-sans` |
| `--p-text-heading-xl-font-size` | `--p-font-size-600` |
| `--p-text-heading-xl-font-weight` | `--p-font-weight-bold` |
| `--p-text-heading-xl-font-letter-spacing` |
`--p-font-letter-spacing-dense` |
| `--p-text-heading-xl-font-line-height` | `--p-font-line-height-800` |
| `--p-text-heading-lg-font-family` | `--p-font-family-sans` |
| `--p-text-heading-lg-font-size` | `--p-font-size-500` |
| `--p-text-heading-lg-font-weight` | `--p-font-weight-semibold` |
| `--p-text-heading-lg-font-letter-spacing` |
`--p-font-letter-spacing-dense` |
| `--p-text-heading-lg-font-line-height` | `--p-font-size-600` |
| `--p-text-heading-md-font-family` | `--p-font-family-sans` |
| `--p-text-heading-md-font-size` | `--p-font-size-350` |
| `--p-text-heading-md-font-weight` | `--p-font-weight-semibold` |
| `--p-text-heading-md-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-heading-md-font-line-height` | `--p-font-size-500` |
| `--p-text-heading-sm-font-family` | `--p-font-family-sans` |
| `--p-text-heading-sm-font-size` | `--p-font-size-325` |
| `--p-text-heading-sm-font-weight` | `--p-font-weight-semibold` |
| `--p-text-heading-sm-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-heading-sm-font-line-height` | `--p-font-size-500` |
| `--p-text-body-lg-font-family` | `--p-font-family-sans` |
| `--p-text-body-lg-font-size` | `--p-font-size-350` |
| `--p-text-body-lg-font-weight` | `--p-font-weight-regular` |
| `--p-text-body-lg-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-body-lg-font-line-height` | `--p-font-size-500` |
| `--p-text-body-md-font-family` | `--p-font-family-sans` |
| `--p-text-body-md-font-size` | `--p-font-size-325` |
| `--p-text-body-md-font-weight` | `--p-font-weight-regular` |
| `--p-text-body-md-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-body-md-font-line-height` | `--p-font-size-500` |
| `--p-text-body-sm-font-family` | `--p-font-family-sans` |
| `--p-text-body-sm-font-size` | `--p-font-size-300` |
| `--p-text-body-sm-font-weight` | `--p-font-weight-regular` |
| `--p-text-body-sm-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-body-sm-font-line-height` | `--p-font-size-400` |
| `--p-text-body-xs-font-family` | `--p-font-family-sans` |
| `--p-text-body-xs-font-size` | `--p-font-size-275` |
| `--p-text-body-xs-font-weight` | `--p-font-weight-regular` |
| `--p-text-body-xs-font-letter-spacing` |
`--p-font-letter-spacing-normal` |
| `--p-text-body-xs-font-line-height` | `--p-font-size-300` |

Adds the following composite `font-letter-spacing` tokens:
| New Token          | Value        |
| --- | --- |
| `--p-font-letter-spacing-densest` | `-0.54px` |
| `--p-font-letter-spacing-denser` | `-0.3px` |
| `--p-font-letter-spacing-dense` | `-0.2px` |
| `--p-font-letter-spacing-normal` | `0px` |
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-tokens@7.11.0

### Minor Changes

- [Shopify#10647](Shopify#10647)
[`f26cebe99`](Shopify@b384a49)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
composite `text` and `font-letter-spacing` tokens


- [Shopify#10643](Shopify#10643)
[`2359e5f5a`](Shopify@ba2f01a)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added semantic
`space` token scale

## @shopify/polaris-migrator@0.22.6

### Patch Changes

- Updated dependencies
\[[`f26cebe99`](Shopify@b384a49),
[`2359e5f5a`](Shopify@ba2f01a)]:
    -   @shopify/polaris-tokens@7.11.0
    -   @shopify/stylelint-polaris@14.0.6

## @shopify/polaris@11.20.1

### Patch Changes

- [Shopify#10665](Shopify#10665)
[`22dbada34`](Shopify@d4bf751)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `Modal`
missing `FrameContext` error


- [Shopify#10663](Shopify#10663)
[`f6a965102`](Shopify@8a46514)
Thanks [@chloerice](https://github.com/chloerice)! - Reverted disabling
of `Page` `secondaryActions` when `IndexFilters` is in filter `mode`


- [Shopify#10649](Shopify#10649)
[`3bafbea50`](Shopify@6c81246)
Thanks [@mattkubej](https://github.com/mattkubej)! - Replace usages of
`bg-secondary-experimental` with `bg-subdued` for Tables

- Updated dependencies
\[[`f26cebe99`](Shopify@b384a49),
[`2359e5f5a`](Shopify@ba2f01a)]:
    -   @shopify/polaris-tokens@7.11.0

## @shopify/stylelint-polaris@14.0.6

### Patch Changes

- Updated dependencies
\[[`f26cebe99`](Shopify@b384a49),
[`2359e5f5a`](Shopify@ba2f01a)]:
    -   @shopify/polaris-tokens@7.11.0

## polaris-for-vscode@0.8.0

### Minor Changes

- [Shopify#10647](Shopify#10647)
[`f26cebe99`](Shopify@b384a49)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
composite `text` token completions

## polaris.shopify.com@0.57.9

### Patch Changes

- [Shopify#10609](Shopify#10609)
[`b53189c72`](Shopify@82d23cc)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated component
example backgrounds

- Updated dependencies
\[[`22dbada34`](Shopify@d4bf751),
[`f26cebe99`](Shopify@b384a49),
[`f6a965102`](Shopify@8a46514),
[`3bafbea50`](Shopify@6c81246),
[`2359e5f5a`](Shopify@ba2f01a)]:
    -   @shopify/polaris@11.20.1
    -   @shopify/polaris-tokens@7.11.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add public primitive letter-spacing token layer Add composite text token layer
5 participants