update t-shirt tokens

docs/assets/styles/docs.css

@@ -339,7 +339,7 @@ strong {
 }
 
 .markdown-section h1 {
-  font-size: var(--sl-font-size-xx-large);
+  font-size: var(--sl-font-size-2x-large);
 }
 
 .markdown-section h2 {
@@ -676,7 +676,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
 .color-palette {
   display: grid;
   grid-template-columns: 200px repeat(11, 1fr);
-  gap: 1rem var(--sl-spacing-xx-small);
+  gap: 1rem var(--sl-spacing-2x-small);
   margin: 2rem 0;
 }
 

docs/components/details.md

@@ -57,7 +57,7 @@ Details are designed to function independently, but you can simulate a group or
 
 <style>
   .details-group-example sl-details:not(:last-of-type) {
-    margin-bottom: var(--sl-spacing-xx-small);
+    margin-bottom: var(--sl-spacing-2x-small);
   }
 </style>
 ```

docs/resources/changelog.md

@@ -8,6 +8,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+A number of users had trouble counting characters that repeat, so this release improves design token pattern so "t-shirt sizes" are more accessible. For example, `--sl-font-size-xxx-large` has become `--sl-font-size-3x-large`. This change applies to all design tokens that use this scale.
+
+- 🚨 BREAKING: all t-shirt size design tokens now use `2x`, `3x`, `4x` instead of `xx`, `xxx`, `xxxx`
 - Added missing `--sl-focus-ring-*` tokens to dark theme
 - Added a subtle elevation to default buttons to make them more easily identifiable
 - Improved the documentation search with a custom plugin powered by [Lunr](https://lunrjs.com/)

docs/tokens/spacing.md

@@ -4,13 +4,13 @@ Spacing tokens are used to provide consistent spacing between components and con
 
 | Token                     | Value          | Example                                                                                                             |
 | ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `--sl-spacing-xxx-small`  | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-small); height: var(--sl-spacing-xxx-small);"></div>   |
-| `--sl-spacing-xx-small`   | 0.25rem (4px)  | <div class="spacing-demo" style="width: var(--sl-spacing-xx-small); height: var(--sl-spacing-xx-small);"></div>     |
+| `--sl-spacing-3x-small`   | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div>     |
+| `--sl-spacing-2x-small`   | 0.25rem (4px)  | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-small);"></div>     |
 | `--sl-spacing-x-small`    | 0.5rem (8px)   | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div>       |
 | `--sl-spacing-small`      | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div>           |
 | `--sl-spacing-medium`     | 1rem (16px)    | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div>         |
 | `--sl-spacing-large`      | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div>           |
 | `--sl-spacing-x-large`    | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div>       |
-| `--sl-spacing-xx-large`   | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-large); height: var(--sl-spacing-xx-large);"></div>     |
-| `--sl-spacing-xxx-large`  | 3rem (48px)    | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-large); height: var(--sl-spacing-xxx-large);"></div>   |
-| `--sl-spacing-xxxx-large` | 4.5rem (72px)  | <div class="spacing-demo" style="width: var(--sl-spacing-xxxx-large); height: var(--sl-spacing-xxxx-large);"></div> |
+| `--sl-spacing-2x-large`   | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div>     |
+| `--sl-spacing-3x-large`   | 3rem (48px)    | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div>     |
+| `--sl-spacing-4x-large`   | 4.5rem (72px)  | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div>     |

docs/tokens/typography.md

@@ -18,15 +18,15 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
 
 | Token                       | Value           | Example                                                           |
 | --------------------------- | --------------- | ----------------------------------------------------------------- |
-| `--sl-font-size-xx-small`   | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-xx-small)">Aa</span>   |
+| `--sl-font-size-2x-small`   | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-small)">Aa</span>   |
 | `--sl-font-size-x-small`    | 0.75rem (12px)  | <span style="font-size: var(--sl-font-size-x-small)">Aa</span>    |
 | `--sl-font-size-small`      | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span>      |
 | `--sl-font-size-medium`     | 1rem (16px)     | <span style="font-size: var(--sl-font-size-medium)">Aa</span>     |
 | `--sl-font-size-large`      | 1.25rem (20px)  | <span style="font-size: var(--sl-font-size-large)">Aa</span>      |
 | `--sl-font-size-x-large`    | 1.5rem (24px)   | <span style="font-size: var(--sl-font-size-x-large)">Aa</span>    |
-| `--sl-font-size-xx-large`   | 2.25rem (36px)  | <span style="font-size: var(--sl-font-size-xx-large)">Aa</span>   |
-| `--sl-font-size-xxx-large`  | 3rem (48px)     | <span style="font-size: var(--sl-font-size-xxx-large)">Aa</span>  |
-| `--sl-font-size-xxxx-large` | 4.5rem (72px)   | <span style="font-size: var(--sl-font-size-xxxx-large)">Aa</span> |
+| `--sl-font-size-2x-large`   | 2.25rem (36px)  | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span>   |
+| `--sl-font-size-3x-large`   | 3rem (48px)     | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span>   |
+| `--sl-font-size-4x-large`   | 4.5rem (72px)   | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span>  |
 
 ## Font Weight
 

src/components/dialog/dialog.styles.ts

@@ -30,8 +30,8 @@ export default css`
     flex-direction: column;
     z-index: 2;
     width: var(--width);
-    max-width: calc(100% - var(--sl-spacing-xx-large));
-    max-height: calc(100% - var(--sl-spacing-xx-large));
+    max-width: calc(100% - var(--sl-spacing-2x-large));
+    max-height: calc(100% - var(--sl-spacing-2x-large));
     background-color: rgb(var(--sl-panel-background-color));
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--sl-shadow-x-large);

src/components/menu-item/menu-item.styles.ts

@@ -20,7 +20,7 @@ export default css`
     letter-spacing: var(--sl-letter-spacing-normal);
     text-align: left;
     color: rgb(var(--sl-color-neutral-700));
-    padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
+    padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
     transition: var(--sl-transition-fast) fill;
     user-select: none;
     white-space: nowrap;

src/components/menu-label/menu-label.styles.ts

@@ -15,7 +15,7 @@ export default css`
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
     color: rgb(var(--sl-color-neutral-500));
-    padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
+    padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
     user-select: none;
   }
 `;

src/components/radio-group/radio-group.styles.ts

@@ -20,12 +20,12 @@ export default css`
     font-size: var(--sl-input-font-size-medium);
     font-weight: var(--sl-input-font-weight);
     color: rgb(var(--sl-input-color));
-    padding: 0 var(--sl-spacing-xx-small);
+    padding: 0 var(--sl-spacing-2x-small);
   }
 
   ::slotted(sl-radio:not(:last-of-type)) {
     display: block;
-    margin-bottom: var(--sl-spacing-xx-small);
+    margin-bottom: var(--sl-spacing-2x-small);
   }
 
   .radio-group:not(.radio-group--has-fieldset) {

src/components/rating/rating.styles.ts

@@ -9,7 +9,7 @@ export default css`
     --symbol-color: rgb(var(--sl-color-neutral-300));
     --symbol-color-active: rgb(var(--sl-color-amber-500));
     --symbol-size: 1.2rem;
-    --symbol-spacing: var(--sl-spacing-xxx-small);
+    --symbol-spacing: var(--sl-spacing-3x-small);
 
     display: inline-flex;
   }

src/components/select/select.styles.ts

@@ -120,7 +120,7 @@ export default css`
     align-items: center;
     flex-wrap: wrap;
     justify-content: left;
-    margin-left: var(--sl-spacing-xx-small);
+    margin-left: var(--sl-spacing-2x-small);
   }
 
   /* Hidden input (for form control validation to show) */
@@ -176,7 +176,7 @@ export default css`
   }
 
   .select--small .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-xx-small);
+    margin-right: var(--sl-spacing-2x-small);
   }
 
   .select--small.select--has-tags .select__label {
@@ -219,7 +219,7 @@ export default css`
   }
 
   .select--medium .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-xx-small);
+    margin-right: var(--sl-spacing-2x-small);
   }
 
   .select--medium.select--has-tags .select__label {
@@ -261,7 +261,7 @@ export default css`
   }
 
   .select--large .select__tags sl-tag:not(:last-of-type) {
-    margin-right: var(--sl-spacing-xx-small);
+    margin-right: var(--sl-spacing-2x-small);
   }
 
   .select--large.select--has-tags .select__label {

src/components/tab/tab.styles.ts

@@ -52,10 +52,10 @@ export default css`
 
   .tab__close-button {
     font-size: var(--sl-font-size-large);
-    margin-left: var(--sl-spacing-xx-small);
+    margin-left: var(--sl-spacing-2x-small);
   }
 
   .tab__close-button::part(base) {
-    padding: var(--sl-spacing-xxx-small);
+    padding: var(--sl-spacing-3x-small);
   }
 `;

src/components/tag/tag.styles.ts

@@ -70,8 +70,8 @@ export default css`
   }
 
   .tag--small .tag__clear {
-    margin-left: var(--sl-spacing-xx-small);
-    margin-right: calc(-1 * var(--sl-spacing-xxx-small));
+    margin-left: var(--sl-spacing-2x-small);
+    margin-right: calc(-1 * var(--sl-spacing-3x-small));
   }
 
   .tag--medium {
@@ -83,8 +83,8 @@ export default css`
   }
 
   .tag__clear {
-    margin-left: var(--sl-spacing-xx-small);
-    margin-right: calc(-1 * var(--sl-spacing-xx-small));
+    margin-left: var(--sl-spacing-2x-small);
+    margin-right: calc(-1 * var(--sl-spacing-2x-small));
   }
 
   .tag--large {
@@ -96,7 +96,7 @@ export default css`
   }
 
   .tag__clear {
-    margin-left: var(--sl-spacing-xx-small);
+    margin-left: var(--sl-spacing-2x-small);
     margin-right: calc(-1 * var(--sl-spacing-x-small));
   }
 

src/styles/form-control.styles.ts

@@ -13,7 +13,7 @@ export default css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: var(--sl-input-label-color);
-    margin-bottom: var(--sl-spacing-xxx-small);
+    margin-bottom: var(--sl-spacing-3x-small);
   }
 
   .form-control--has-label.form-control--small .form-control__label {
@@ -35,7 +35,7 @@ export default css`
   }
 
   .form-control--has-help-text .form-control__help-text ::slotted(*) {
-    margin-top: var(--sl-spacing-xxx-small);
+    margin-top: var(--sl-spacing-3x-small);
   }
 
   .form-control--has-help-text.form-control--small .form-control__help-text {

src/themes/dark.styles.ts

@@ -393,16 +393,16 @@ export default css`
      * Spacing tokens
      */
 
-    --sl-spacing-xxx-small: 0.125rem; /* 2px */
-    --sl-spacing-xx-small: 0.25rem; /* 4px */
+    --sl-spacing-3x-small: 0.125rem; /* 2px */
+    --sl-spacing-2x-small: 0.25rem; /* 4px */
     --sl-spacing-x-small: 0.5rem; /* 8px */
     --sl-spacing-small: 0.75rem; /* 12px */
     --sl-spacing-medium: 1rem; /* 16px */
     --sl-spacing-large: 1.25rem; /* 20px */
     --sl-spacing-x-large: 1.75rem; /* 28px */
-    --sl-spacing-xx-large: 2.25rem; /* 36px */
-    --sl-spacing-xxx-large: 3rem; /* 48px */
-    --sl-spacing-xxxx-large: 4.5rem; /* 72px */
+    --sl-spacing-2x-large: 2.25rem; /* 36px */
+    --sl-spacing-3x-large: 3rem; /* 48px */
+    --sl-spacing-4x-large: 4.5rem; /* 72px */
 
     /*
      * Transition tokens
@@ -425,15 +425,15 @@ export default css`
     --sl-font-serif: Georgia, 'Times New Roman', serif;
 
     /* Font sizes */
-    --sl-font-size-xx-small: 0.625rem; /* 10px */
+    --sl-font-size-2x-small: 0.625rem; /* 10px */
     --sl-font-size-x-small: 0.75rem; /* 12px */
     --sl-font-size-small: 0.875rem; /* 14px */
     --sl-font-size-medium: 1rem; /* 16px */
     --sl-font-size-large: 1.25rem; /* 20px */
     --sl-font-size-x-large: 1.5rem; /* 24px */
-    --sl-font-size-xx-large: 2.25rem; /* 36px */
-    --sl-font-size-xxx-large: 3rem; /* 48px */
-    --sl-font-size-xxxx-large: 4.5rem; /* 72px */
+    --sl-font-size-2x-large: 2.25rem; /* 36px */
+    --sl-font-size-3x-large: 3rem; /* 48px */
+    --sl-font-size-4x-large: 4.5rem; /* 72px */
 
     /* Font weights */
     --sl-font-weight-light: 300;
@@ -551,7 +551,7 @@ export default css`
     --sl-tooltip-font-weight: var(--sl-font-weight-normal);
     --sl-tooltip-font-size: var(--sl-font-size-small);
     --sl-tooltip-line-height: var(--sl-line-height-dense);
-    --sl-tooltip-padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-small);
+    --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
     --sl-tooltip-arrow-size: 5px;
     --sl-tooltip-arrow-start-end-offset: 8px;
 

src/themes/light.styles.ts

@@ -393,16 +393,16 @@ export default css`
      * Spacing tokens
      */
 
-    --sl-spacing-xxx-small: 0.125rem; /* 2px */
-    --sl-spacing-xx-small: 0.25rem; /* 4px */
+    --sl-spacing-3x-small: 0.125rem; /* 2px */
+    --sl-spacing-2x-small: 0.25rem; /* 4px */
     --sl-spacing-x-small: 0.5rem; /* 8px */
     --sl-spacing-small: 0.75rem; /* 12px */
     --sl-spacing-medium: 1rem; /* 16px */
     --sl-spacing-large: 1.25rem; /* 20px */
     --sl-spacing-x-large: 1.75rem; /* 28px */
-    --sl-spacing-xx-large: 2.25rem; /* 36px */
-    --sl-spacing-xxx-large: 3rem; /* 48px */
-    --sl-spacing-xxxx-large: 4.5rem; /* 72px */
+    --sl-spacing-2x-large: 2.25rem; /* 36px */
+    --sl-spacing-3x-large: 3rem; /* 48px */
+    --sl-spacing-4x-large: 4.5rem; /* 72px */
 
     /*
      * Transition tokens
@@ -425,15 +425,15 @@ export default css`
     --sl-font-serif: Georgia, 'Times New Roman', serif;
 
     /* Font sizes */
-    --sl-font-size-xx-small: 0.625rem; /* 10px */
+    --sl-font-size-2x-small: 0.625rem; /* 10px */
     --sl-font-size-x-small: 0.75rem; /* 12px */
     --sl-font-size-small: 0.875rem; /* 14px */
     --sl-font-size-medium: 1rem; /* 16px */
     --sl-font-size-large: 1.25rem; /* 20px */
     --sl-font-size-x-large: 1.5rem; /* 24px */
-    --sl-font-size-xx-large: 2.25rem; /* 36px */
-    --sl-font-size-xxx-large: 3rem; /* 48px */
-    --sl-font-size-xxxx-large: 4.5rem; /* 72px */
+    --sl-font-size-2x-large: 2.25rem; /* 36px */
+    --sl-font-size-3x-large: 3rem; /* 48px */
+    --sl-font-size-4x-large: 4.5rem; /* 72px */
 
     /* Font weights */
     --sl-font-weight-light: 300;
@@ -551,7 +551,7 @@ export default css`
     --sl-tooltip-font-weight: var(--sl-font-weight-normal);
     --sl-tooltip-font-size: var(--sl-font-size-small);
     --sl-tooltip-line-height: var(--sl-line-height-dense);
-    --sl-tooltip-padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-small);
+    --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
     --sl-tooltip-arrow-size: 5px;
     --sl-tooltip-arrow-start-end-offset: 8px;