@kiva/kv-tokens 3.7.0 → 3.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/configs/kivaTypography.js +23 -7
- package/configs/tailwind.config.js +3 -2
- package/package.json +2 -2
- package/primitives.js +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.7.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.7.1...@kiva/kv-tokens@3.7.2) (2026-02-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* add new tw-text-headline-two semantic text class, shift values for title and subhealine classes ([6c8b345](https://github.com/kiva/kv-ui-elements/commit/6c8b345612bd88d09014b33c020d41075e7c3f57))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [3.7.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.7.0...@kiva/kv-tokens@3.7.1) (2026-02-12)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* remove global button style application and rename class to button-link ([eb37275](https://github.com/kiva/kv-ui-elements/commit/eb37275c62b4730f16bdb9d28e5e35ca8d9650e3))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
# [3.7.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-tokens@3.6.4...@kiva/kv-tokens@3.7.0) (2026-02-11)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -465,26 +465,41 @@ export const textStyles = (() => {
|
|
|
465
465
|
},
|
|
466
466
|
};
|
|
467
467
|
|
|
468
|
-
const
|
|
468
|
+
const textHeadlineTwo = {
|
|
469
469
|
fontFamily: fonts.serif,
|
|
470
470
|
fontWeight: fontWeights.medium,
|
|
471
471
|
fontSize: rem(semanticFontSizes.h2.sm),
|
|
472
|
-
letterSpacing: em(letterSpacings['-
|
|
472
|
+
letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h2.sm),
|
|
473
473
|
lineHeight: em(lineHeightsAbsolute.h2.sm, semanticFontSizes.h2.sm),
|
|
474
474
|
'@screen md': {
|
|
475
475
|
fontSize: rem(semanticFontSizes.h2.md),
|
|
476
|
-
letterSpacing: em(letterSpacings['-
|
|
476
|
+
letterSpacing: em(letterSpacings['-200'], semanticFontSizes.h2.md),
|
|
477
477
|
},
|
|
478
478
|
'@screen lg': {
|
|
479
479
|
fontSize: rem(semanticFontSizes.h2.lg),
|
|
480
|
-
letterSpacing: em(letterSpacings['-
|
|
480
|
+
letterSpacing: em(letterSpacings['-300'], semanticFontSizes.h2.lg),
|
|
481
481
|
lineHeight: em(lineHeightsAbsolute.h2.lg, semanticFontSizes.h2.lg),
|
|
482
482
|
},
|
|
483
483
|
};
|
|
484
484
|
|
|
485
|
+
const textSubHeadline = {
|
|
486
|
+
fontFamily: fonts.sans,
|
|
487
|
+
fontWeight: fontWeights.light,
|
|
488
|
+
fontSize: rem(semanticFontSizes.h3.sm),
|
|
489
|
+
letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
|
|
490
|
+
lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
|
|
491
|
+
'@screen md': {
|
|
492
|
+
fontSize: rem(semanticFontSizes.h3.md),
|
|
493
|
+
},
|
|
494
|
+
'@screen lg': {
|
|
495
|
+
fontSize: rem(semanticFontSizes.h3.lg),
|
|
496
|
+
lineHeight: em(lineHeightsAbsolute.h3.lg, semanticFontSizes.h3.lg),
|
|
497
|
+
},
|
|
498
|
+
};
|
|
499
|
+
|
|
485
500
|
const textTitle = {
|
|
486
501
|
fontFamily: fonts.sans,
|
|
487
|
-
fontWeight: fontWeights.
|
|
502
|
+
fontWeight: fontWeights.normal,
|
|
488
503
|
fontSize: rem(semanticFontSizes.h3.sm),
|
|
489
504
|
letterSpacing: em(letterSpacings.normal, semanticFontSizes.h3.sm),
|
|
490
505
|
lineHeight: em(lineHeightsAbsolute.h3.sm, semanticFontSizes.h3.sm),
|
|
@@ -497,7 +512,7 @@ export const textStyles = (() => {
|
|
|
497
512
|
},
|
|
498
513
|
};
|
|
499
514
|
|
|
500
|
-
const
|
|
515
|
+
const textButtonLink = {
|
|
501
516
|
fontFamily: fonts.sans,
|
|
502
517
|
fontWeight: fontWeights.medium,
|
|
503
518
|
fontSize: rem(semanticFontSizes.button.button),
|
|
@@ -545,9 +560,10 @@ export const textStyles = (() => {
|
|
|
545
560
|
textBlockquote,
|
|
546
561
|
textDisplay,
|
|
547
562
|
textHeadline,
|
|
563
|
+
textHeadlineTwo,
|
|
548
564
|
textSubHeadline,
|
|
549
565
|
textTitle,
|
|
550
|
-
|
|
566
|
+
textButtonLink,
|
|
551
567
|
textUpper,
|
|
552
568
|
textLabel,
|
|
553
569
|
textCaption,
|
|
@@ -204,7 +204,7 @@ export default {
|
|
|
204
204
|
'-moz-osx-font-smoothing': 'grayscale',
|
|
205
205
|
'text-rendering': 'optimizeLegibility',
|
|
206
206
|
},
|
|
207
|
-
button: {
|
|
207
|
+
button: { fontWeight: 'inherit' },
|
|
208
208
|
h1: textStyles.textH1,
|
|
209
209
|
h2: textStyles.textH2,
|
|
210
210
|
h3: textStyles.textH3,
|
|
@@ -253,9 +253,10 @@ export default {
|
|
|
253
253
|
// new (2026) semantic text styles
|
|
254
254
|
'.text-display': textStyles.textDisplay,
|
|
255
255
|
'.text-headline': textStyles.textHeadline,
|
|
256
|
+
'.text-headline-two': textStyles.textHeadlineTwo,
|
|
256
257
|
'.text-subheadline': textStyles.textSubheadline,
|
|
257
258
|
'.text-title': textStyles.textTitle,
|
|
258
|
-
'.text-button': textStyles.
|
|
259
|
+
'.text-button-link': textStyles.textButtonLink,
|
|
259
260
|
'.text-upper': textStyles.textUpper,
|
|
260
261
|
'.text-caption': textStyles.textCaption,
|
|
261
262
|
}, ['responsive']);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-tokens",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"@tailwindcss/typography": "^0.5.1",
|
|
24
24
|
"tailwindcss": "^3.4.3"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "79d1606e5c72b3b1a4e64fe7b94944030d3a23aa"
|
|
27
27
|
}
|
package/primitives.js
CHANGED
|
@@ -518,7 +518,9 @@ export default {
|
|
|
518
518
|
},
|
|
519
519
|
fontWeights: {
|
|
520
520
|
light: 300,
|
|
521
|
+
// Note: this is referred to as "medium" in the figma files for Post Grotesk but matches the font-weight of the font file we load
|
|
521
522
|
normal: 400,
|
|
523
|
+
// Note: this is referred to as "medium" in the figma files for Dovetail but matches the font-weight of the font file we load
|
|
522
524
|
medium: 500,
|
|
523
525
|
},
|
|
524
526
|
lineHeights: {
|