-
Notifications
You must be signed in to change notification settings - Fork 54
fix(Text): refactor variables to match size
prop
#762
Changes from all commits
71ae876
8b8b935
ac77c86
921b7b5
5622380
121f545
5287ab6
9b54236
77acfd7
794fc2c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,17 +13,21 @@ export interface TextVariables { | |
errorColor: string | ||
successColor: string | ||
|
||
fontSizeExtraSmall: string | ||
fontSizeSmallest: string | ||
fontSizeSmaller: string | ||
fontSizeSmall: string | ||
fontSizeMedium: string | ||
fontSizeLarge: string | ||
fontSizeExtraLarge: string | ||
fontSizeLarger: string | ||
fontSizeLargest: string | ||
|
||
fontLineHeightExtraSmall: number | ||
fontLineHeightSmallest: number | ||
fontLineHeightSmaller: number | ||
fontLineHeightSmall: number | ||
fontLineHeightMedium: number | ||
fontLineHeightLarge: number | ||
fontLineHeightExtraLarge: number | ||
fontLineHeightLarger: number | ||
fontLineHeightLargest: number | ||
|
||
fontWeightLight: number | ||
fontWeightSemilight: number | ||
|
@@ -47,20 +51,26 @@ export default (siteVariables): TextVariables => { | |
errorColor: siteVariables.colors.red[500], | ||
successColor: siteVariables.colors.green[500], | ||
|
||
fontSizeExtraSmall: siteVariables.fontSizes.smaller, | ||
fontLineHeightExtraSmall: siteVariables.lineHeightExtraSmall, | ||
fontSizeSmallest: siteVariables.fontSizes.smallest, | ||
fontLineHeightSmallest: siteVariables.lineHeightSmallest, | ||
|
||
fontSizeSmaller: siteVariables.fontSizes.smaller, | ||
fontLineHeightSmaller: siteVariables.lineHeightSmaller, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. just to be sure - thus, speaking of the |
||
|
||
fontSizeSmall: siteVariables.fontSizes.small, | ||
fontLineHeightSmall: siteVariables.lineHeightSmall, | ||
|
||
fontSizeMedium: siteVariables.fontSizes.medium, | ||
fontLineHeightMedium: siteVariables.lineHeightBase, | ||
fontLineHeightMedium: siteVariables.lineHeightMedium, | ||
|
||
fontSizeLarge: siteVariables.fontSizes.large, | ||
fontLineHeightLarge: siteVariables.lineHeightSmall, | ||
fontLineHeightLarge: siteVariables.lineHeightLarge, | ||
|
||
fontSizeLarger: siteVariables.fontSizes.larger, | ||
fontLineHeightLarger: siteVariables.lineHeightLarger, | ||
|
||
fontSizeExtraLarge: siteVariables.fontSizes.larger, | ||
fontLineHeightExtraLarge: siteVariables.lineHeightSmall, | ||
fontSizeLargest: siteVariables.fontSizes.largest, | ||
fontLineHeightLargest: siteVariables.lineHeightLargest, | ||
|
||
fontWeightLight: siteVariables.fontWeightLight, | ||
fontWeightSemilight: siteVariables.fontWeightSemilight, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,11 +8,13 @@ export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } | |
// FONT SIZES | ||
// | ||
export const fontSizes = { | ||
smallest: '0.8rem', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. while it seems to be logical, the counterpoint is that we, generally, will 'close' the interval of possible values in terms of extensibility - especially when we are talking about The problem is that, with this being, essentially, a finite set, we cannot guarantee that client's scenario won't require additional sizes added to the set - and, in that case, we cannot ensure that client will be able to extend So, because of that I am a bit reluctant to introduce this change now. |
||
smaller: '1rem', | ||
small: '1.2rem', | ||
medium: '1.4rem', | ||
large: '1.8rem', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. frankly, to me it is not absolutely intuitive whether <Button size='larger' /> Further thoughtsIt would be much better to have some range where each value's name would immediately deliver insights on what is the name of next larger item and next smaller one, like, say, in the following case: xx-small // or x2-small, to reduce amount of x's
x-small
medium
large
x-large
xx-large Amongst other things it would be great if this range would be extendable, so that client's theme may easily provide additional sizes to it while maintaining the overall order of values. With this order being established, we might be able to decently handle scenarios when one theme, with wider range of sizes, is switched on another one where this range is smaller: // original theme
const fontSizes = {
xx-small
x-small
medium
large
x-large
xx-large
}
// theme to switch on - note, no values for xx-large/small
const fontSizes = {
x-small
medium
large
x-large
} The idea here is just to allow next theme to choose nearest size to the one that is requested (so, for To concludeThis was just one of the approaches we might think about - definitely, there may be lots of other ones. At the same time, if we would like to provide client with an intuitive range of values, as well as to support theme switching between two that have different set of sizes defined, we would need to satisfy the following conditions:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. thanks for these references and clarifications! |
||
larger: '2.4rem', | ||
largest: '3rem', | ||
} | ||
|
||
// | ||
|
@@ -27,6 +29,10 @@ export const fontWeightBold = 700 | |
// | ||
// LINE HEIGHTS | ||
// | ||
export const lineHeightBase = 1.4286 | ||
export const lineHeightSmallest = 1.2 | ||
export const lineHeightSmaller = 1.2 | ||
export const lineHeightSmall = 1.3333 | ||
export const lineHeightExtraSmall = 1.2 | ||
export const lineHeightMedium = 1.4286 | ||
export const lineHeightLarge = 1.3333 | ||
export const lineHeightLarger = 1.3333 | ||
export const lineHeightLargest = 1.3333 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixes
key
warning 👍