@bfs2/style 0.0.1

package/scss/typography/mixins.scss

@@ -0,0 +1,114 @@
+/*
+	Typography Mixins
+ */
+$font-styles: (
+	h1: (
+		color: var(--bfs-heading-1-color),
+		font: var(--bfs-heading-1-font),
+		line-height: var(--bfs-heading-1-line-height),
+		size: var(--bfs-heading-1-size),
+		style: var(--bfs-heading-1-style),
+		weight: var(--bfs-heading-1-weight),
+	),
+	h2: (
+		color: var(--bfs-heading-2-color),
+		font: var(--bfs-heading-2-font),
+		line-height: var(--bfs-heading-2-line-height),
+		size: var(--bfs-heading-2-size),
+		style: var(--bfs-heading-2-style),
+		weight: var(--bfs-heading-2-weight),
+	),
+	h3: (
+		color: var(--bfs-heading-3-color),
+		font: var(--bfs-heading-3-font),
+		line-height: var(--bfs-heading-3-line-height),
+		size: var(--bfs-heading-3-size),
+		style: var(--bfs-heading-3-style),
+		weight: var(--bfs-heading-3-weight),
+	),
+	h4: (
+		color: var(--bfs-heading-4-color),
+		font: var(--bfs-heading-4-font),
+		line-height: var(--bfs-heading-4-line-height),
+		size: var(--bfs-heading-4-size),
+		style: var(--bfs-heading-4-style),
+		weight: var(--bfs-heading-4-weight),
+	),
+	h5: (
+		color: var(--bfs-heading-5-color),
+		font: var(--bfs-heading-5-font),
+		line-height: var(--bfs-heading-5-line-height),
+		size: var(--bfs-heading-5-size),
+		style: var(--bfs-heading-5-style),
+		weight: var(--bfs-heading-5-weight),
+	),
+	p: (
+		color: var(--bfs-paragraph-color),
+		font: var(--bfs-paragraph-font),
+		line-height: var(--bfs-paragraph-line-height),
+		size: var(--bfs-paragraph-size),
+		style: var(--bfs-paragraph-style),
+		weight: var(--bfs-paragraph-weight),
+	),
+);
+
+@mixin bfs-font($style) {
+	@if map-has-key($font-styles, $style) {
+		$config: map-get($font-styles, $style);
+
+		color: map-get($config, 'color');
+		font-family: map-get($config, 'font');
+		font-size: map-get($config, 'size');
+		font-style: map-get($config, 'style');
+		font-weight: map-get($config, 'weight');
+		line-height: map-get($config, 'line-height');
+		margin: 0;
+		-webkit-font-smoothing: antialiased;
+	}
+}
+
+@mixin bfs-font-family() {
+	font-family: var(--bfs-font-family);
+	-webkit-font-smoothing: antialiased;
+}
+
+@mixin bfs-text-truncate() {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@mixin bfs-text-link() {
+	@include bfs-font('p');
+
+	color: var(--bfs-text-link-color);
+	text-decoration: none;
+	position: relative;
+	transition: color 100ms ease-out;
+	border: 1px solid transparent;
+
+	&:hover:not(.bfs-text-link--disabled) {
+		color: var(--bfs-text-link-hover-color);
+	}
+
+	&:focus:not(.bfs-text-link--disabled) {
+		border-color: var(--bfs-text-link-focus-border-color);
+		border-radius: 4px;
+		outline: none;
+	}
+
+	&:active:not(.bfs-text-link--disabled) {
+		background: var(--bfs-text-link-active-background-color);
+		border-color: var(--bfs-text-link-active-border-color);
+		border-radius: 4px;
+		color: var(--bfs-text-link-active-color);
+
+		&:hover {
+			color: var(--bfs-text-link-active-hover-color);
+		}
+	}
+
+	&:visited:not(.bfs-text-link--disabled) {
+		color: var(--bfs-text-link-visited-color);
+	}
+}