<commit_before>/*doc
---
title: Text utils
name: textUtil
category: Sass Utils | Mixins & Placeholders
---
*/


//
// PRIVATE
// standard breakpoint for
// text style changes
//
@mixin _textBp() {
	@include atMediaUp(medium) {
		@content
	}
}


/*doc
---
title: Heading placeholders
name: headingPlaceholders
parent: textUtil
---

Placeholder             | Description
----------------------- | --------------------------------
`%text--display1`       | Top level display heading
`%text--display2`       | Second level display heading
`%text--display3`       | Third level display heading
*/
%text--display1,
%text--display2,
%text--display3 {
	@include color-all($C_textPrimary);
	font-weight: $W_bold;
	letter-spacing: -0.02em;

	.inverted & {
		@include color-all($C_textPrimaryInverted);
		font-weight: $W_medium;
	}
}
%text--display1 {
	font-size: $font-size-display2;
	line-height: $line-height-largeText;

	@include _textBp() {
		font-size: $font-size-display1;
	}
}
%text--display2 {
	font-size: $font-size-display2;
	line-height: $line-height;
}
%text--display3 {
	font-size: $font-size-display3;
	line-height: $line-height-largeText;
	line-height: $line-height;
}


/*doc
---
title: Label placeholders
name: labelPlaceholder
parent: textUtil
---

Placeholder          | Description
-------------------- | --------------------------------
`%text--label`       | Styles for list headers and form field labels
*/
%text--label {
	@include color-all($C_textPrimary);
	font-size: $font-size-small;
	font-weight: $W_bold;
	line-height: $line-height-smallText;
	letter-spacing: -0.02em;
	word-spacing: 0.1em;

	.inverted & {
		@include color-all($C_textPrimaryInverted);
	}

	@include i18n-only('en') {
		text-transform: uppercase;
	}
}
%text--labelSecondary {
	@extend %text--label;
	@include color-all($C_textSecondary);

	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}
}


/*doc
---
title: Weight placeholders
name: weightPlaceholders
parent: textUtil
---

Placeholder             | Description
----------------------- | --------------------------------
`%text--bold`           | Bold text (Medium weight)
`%text--heavy`          | Bolder text (Semibold weight)
*/
%text--bold {
	font-weight: $W_medium;
	.inverted .runningText,
	.inverted.runningText {
		font-weight: $W_bold;
	}
}
%text--heavy {
	font-weight: $W_bold;
}


/*doc
---
title: Color placeholders
name: colorPlaceholders
parent: textUtil
---

Placeholder           | Description
--------------------- | --------------------------------
`%text--secondary`    | Secondary gray text color
`%text--tertiary`     | Tertiary gray text color
*/
%text--secondary {
	@include color-all($C_textSecondary);

	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}
}
%text--tertiary {
	@include color-all($C_textTertiary);

	.inverted & {
		@include color-all($C_textTertiaryInverted);
	}
}


/*doc
---
title: Other text placeholders
name: otherTextPlaceholders
parent: textUtil
---

Placeholder           | Description
--------------------- | --------------------------------
`%text--big`          | Sets styles for big text
`%text--small`        | Sets styles for small text
`%text--hint`         | "hint" text
`%text--link`         | Link text color
`%text--caption`      | Small secondary text for captions
`%text--attention`    | Small text to draw attention (ie. error text)
`%text--mono`         | Monospaced text
*/
%text--big {
	font-size: $font-size-big;
	line-height: $line-height;
	font-weight: $W_bold;
}
%text--small {
	font-size: $font-size-small;
	line-height: $line-height-smallText;
}
%text--hint {
	@extend %text--tertiary;
}
%text--link {
	@include color-all($C_link);

	&:hover,
	&:focus,
	&:active {
		text-decoration: underline;
	}
	&.button {
		text-decoration: none;
	}<commit_msg>update trackign for big text<commit_after>/*doc
---
title: Text utils
name: textUtil
category: Sass Utils | Mixins & Placeholders
---
*/


//
// PRIVATE
// standard breakpoint for
// text style changes
//
@mixin _textBp() {
	@include atMediaUp(medium) {
		@content
	}
}


/*doc
---
title: Heading placeholders
name: headingPlaceholders
parent: textUtil
---

Placeholder             | Description
----------------------- | --------------------------------
`%text--display1`       | Top level display heading
`%text--display2`       | Second level display heading
`%text--display3`       | Third level display heading
*/
%text--display1,
%text--display2,
%text--display3 {
	@include color-all($C_textPrimary);
	font-weight: $W_bold;
	letter-spacing: -0.02em;

	.inverted & {
		@include color-all($C_textPrimaryInverted);
		font-weight: $W_medium;
	}
}
%text--display1 {
	font-size: $font-size-display2;
	line-height: $line-height-largeText;

	@include _textBp() {
		font-size: $font-size-display1;
	}
}
%text--display2 {
	font-size: $font-size-display2;
	line-height: $line-height;
}
%text--display3 {
	font-size: $font-size-display3;
	line-height: $line-height-largeText;
	line-height: $line-height;
}


/*doc
---
title: Label placeholders
name: labelPlaceholder
parent: textUtil
---

Placeholder          | Description
-------------------- | --------------------------------
`%text--label`       | Styles for list headers and form field labels
*/
%text--label {
	@include color-all($C_textPrimary);
	font-size: $font-size-small;
	font-weight: $W_bold;
	line-height: $line-height-smallText;
	letter-spacing: -0.02em;
	word-spacing: 0.1em;

	.inverted & {
		@include color-all($C_textPrimaryInverted);
	}

	@include i18n-only('en') {
		text-transform: uppercase;
	}
}
%text--labelSecondary {
	@extend %text--label;
	@include color-all($C_textSecondary);

	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}
}


/*doc
---
title: Weight placeholders
name: weightPlaceholders
parent: textUtil
---

Placeholder             | Description
----------------------- | --------------------------------
`%text--bold`           | Bold text (Medium weight)
`%text--heavy`          | Bolder text (Semibold weight)
*/
%text--bold {
	font-weight: $W_medium;
	.inverted .runningText,
	.inverted.runningText {
		font-weight: $W_bold;
	}
}
%text--heavy {
	font-weight: $W_bold;
}


/*doc
---
title: Color placeholders
name: colorPlaceholders
parent: textUtil
---

Placeholder           | Description
--------------------- | --------------------------------
`%text--secondary`    | Secondary gray text color
`%text--tertiary`     | Tertiary gray text color
*/
%text--secondary {
	@include color-all($C_textSecondary);

	.inverted & {
		@include color-all($C_textSecondaryInverted);
	}
}
%text--tertiary {
	@include color-all($C_textTertiary);

	.inverted & {
		@include color-all($C_textTertiaryInverted);
	}
}


/*doc
---
title: Other text placeholders
name: otherTextPlaceholders
parent: textUtil
---

Placeholder           | Description
--------------------- | --------------------------------
`%text--big`          | Sets styles for big text
`%text--small`        | Sets styles for small text
`%text--hint`         | "hint" text
`%text--link`         | Link text color
`%text--caption`      | Small secondary text for captions
`%text--attention`    | Small text to draw attention (ie. error text)
`%text--mono`         | Monospaced text
*/
%text--big {
	font-size: $font-size-big;
	line-height: $line-height;
	font-weight: $W_bold;
	letter-spacing: -0.02em;
}
%text--small {
	font-size: $font-size-small;
	line-height: $line-height-smallText;
}
%text--hint {
	@extend %text--tertiary;
}
%text--link {
	@include color-all($C_link);

	&:hover,
	&:focus,
	&:active {
		text-decoration: underline;
	}
	&.button {
		text-decoration: none;
	}
{'fraction_non_alphanumeric': 0.2157943067033976, 'fraction_numerical': 0.006427915518824609, 'mean_word_length': 2.423439604849573, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1835611', 'n_tokens_mistral': 2652, 'n_tokens_neox': 2550, 'n_words': 540}