feat: text utility classes

components/content/Text/Text.css

@@ -0,0 +1,188 @@
+/* Font */
+
+.diamond-text-font-body {
+  font-size: var(--diamond-font-size-base);
+  font-weight: var(--diamond-font-weight-base);
+  line-height: var(--diamond-font-line-height);
+  text-wrap: pretty;
+}
+
+.diamond-text-font-heading,
+.diamond-text-font-h1,
+.diamond-text-font-h2,
+.diamond-text-font-h3,
+.diamond-text-font-h4 {
+  font-weight: var(--diamond-font-weight-bold);
+  line-height: var(--diamond-font-line-height-sm);
+  text-wrap: balance;
+}
+
+.diamond-text-font-h1 {
+  font-size: var(--diamond-font-size-h1);
+}
+
+.diamond-text-font-h2 {
+  font-size: var(--diamond-font-size-h2);
+}
+
+.diamond-text-font-h3 {
+  font-size: var(--diamond-font-size-h3);
+}
+
+.diamond-text-font-h4 {
+  font-size: var(--diamond-font-size-h4);
+}
+
+/* Size */
+
+.diamond-text-size-default {
+  font-size: var(--diamond-font-size-default);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-xs {
+  font-size: var(--diamond-font-size-xs);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-sm {
+  font-size: var(--diamond-font-size-sm);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-base {
+  font-size: var(--diamond-font-size-base);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-md {
+  font-size: var(--diamond-font-size-md);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-lg {
+  font-size: var(--diamond-font-size-lg);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-xl {
+  font-size: var(--diamond-font-size-xl);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-xxl {
+  font-size: var(--diamond-font-size-xxl);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-xxxl {
+  font-size: var(--diamond-font-size-xxxl);
+  line-height: var(--diamond-font-line-height);
+}
+
+.diamond-text-size-h1 {
+  font-size: var(--diamond-font-size-h1);
+  line-height: var(--diamond-font-line-height-sm);
+}
+
+.diamond-text-size-h2 {
+  font-size: var(--diamond-font-size-h2);
+  line-height: var(--diamond-font-line-height-sm);
+}
+
+.diamond-text-size-h3 {
+  font-size: var(--diamond-font-size-h3);
+  line-height: var(--diamond-font-line-height-sm);
+}
+
+.diamond-text-size-h4 {
+  font-size: var(--diamond-font-size-h4);
+  line-height: var(--diamond-font-line-height-sm);
+}
+
+/* Weight */
+
+.diamond-text-weight-light {
+  font-weight: var(--diamond-font-weight-light);
+}
+
+.diamond-text-weight-medium {
+  font-weight: var(--diamond-font-weight-medium);
+}
+
+.diamond-text-weight-bold {
+  font-weight: var(--diamond-font-weight-bold);
+}
+
+.diamond-text-weight-black {
+  font-weight: var(--diamond-font-weight-black);
+}
+
+.diamond-text-weight-body {
+  font-weight: var(--diamond-font-weight-base);
+}
+
+.diamond-text-weight-heading {
+  font-weight: var(--diamond-font-weight-bold);
+}
+
+/* Alignment */
+
+.diamond-text-align-left {
+  text-align: left;
+}
+
+.diamond-text-align-center {
+  text-align: center;
+}
+
+.diamond-text-align-right {
+  text-align: right;
+}
+
+/* Wrap */
+
+.diamond-text-wrap-balance {
+  text-wrap: balance;
+}
+
+.diamond-text-wrap-pretty {
+  text-wrap: pretty;
+}
+
+/* Truncate */
+
+.diamond-text-truncate,
+.diamond-text-line-limit-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Line limit */
+.diamond-text-line-limit-2,
+.diamond-text-line-limit-3,
+.diamond-text-line-limit-4 {
+  -webkit-box-orient: vertical;
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.diamond-text-line-limit-2 {
+  -webkit-line-clamp: 2;
+}
+
+.diamond-text-line-limit-3 {
+  -webkit-line-clamp: 3;
+}
+
+.diamond-text-line-limit-4 {
+  -webkit-line-clamp: 4;
+}
+
+/* Decoration */
+
+.diamond-text-decoration-none {
+  text-decoration: none;
+}