Skip to content

Commit

Permalink
fix(typography): Use all possible theme values for typography (#89)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tchock
tchock authored Jan 14, 2025
1 parent 0bfa3da commit d44718d
Show file tree
Hide file tree
Showing 18 changed files with 281 additions and 223 deletions.
104 changes: 52 additions & 52 deletions src/Button/__snapshots__/Button.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@ exports[`render button with end icon 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -197,11 +197,11 @@ exports[`render button with start icon 1`] = `
.emotion-2 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -289,11 +289,11 @@ exports[`render primary brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -373,11 +373,11 @@ exports[`render primary negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -457,11 +457,11 @@ exports[`render primary plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -541,11 +541,11 @@ exports[`render primary positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -625,11 +625,11 @@ exports[`render primaryInverted brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -709,11 +709,11 @@ exports[`render primaryInverted negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -793,11 +793,11 @@ exports[`render primaryInverted plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -877,11 +877,11 @@ exports[`render primaryInverted positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -961,11 +961,11 @@ exports[`render secondary brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1045,11 +1045,11 @@ exports[`render secondary negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1129,11 +1129,11 @@ exports[`render secondary plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1213,11 +1213,11 @@ exports[`render secondary positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1297,11 +1297,11 @@ exports[`render secondaryInverted brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1381,11 +1381,11 @@ exports[`render secondaryInverted negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1465,11 +1465,11 @@ exports[`render secondaryInverted plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1549,11 +1549,11 @@ exports[`render secondaryInverted positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1633,11 +1633,11 @@ exports[`render text brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1717,11 +1717,11 @@ exports[`render text negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1801,11 +1801,11 @@ exports[`render text plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1885,11 +1885,11 @@ exports[`render text positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -1969,11 +1969,11 @@ exports[`render textInverted brand color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -2053,11 +2053,11 @@ exports[`render textInverted negative color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -2137,11 +2137,11 @@ exports[`render textInverted plain color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -2221,11 +2221,11 @@ exports[`render textInverted positive color button 1`] = `
.emotion-1 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down
8 changes: 4 additions & 4 deletions src/ButtonBar/__snapshots__/ButtonBar.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,11 +82,11 @@ exports[`Render button bar 1`] = `
.emotion-2 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down Expand Up @@ -203,11 +203,11 @@ exports[`Render button bar with one item 1`] = `
.emotion-2 {
box-sizing: border-box;
font-family: var(--pbl-theme-typography-base-fontFamily);
font-style: normal;
font-weight: var(--pbl-theme-typography-base-fontWeight);
font-style: normal;
margin: 0;
font-size: var(--pbl-theme-typography-button-fontSize);
line-height: var(--pbl-theme-typography-button-lineHeight);
font-size: var(--pbl-theme-typography-button-fontSize);
margin-bottom: var(--pbl-theme-typography-button-marginBottom);
}
Expand Down
Loading

0 comments on commit d44718d

Please sign in to comment.