@energycap/components 0.42.4-esbuild.20250131-1219 → 0.42.4-esbuild.20250131-1256

package/src/styles/utilities/_text.scss

@@ -0,0 +1,139 @@
+@import "../mixins/overlay-base";
+@import "../mixins/text";
+
+// Text styles
+.text-title-1 {
+  @include text-title-1;
+}
+
+.text-title-2 {
+  @include text-title-2;
+}
+
+.text-heading-1 {
+  @include text-heading-1;
+}
+
+.text-heading-2 {
+  @include text-heading-2;
+}
+
+.text-heading-3 {
+  @include text-heading-3;
+}
+
+.text-body-1 {
+  @include text-body-1;
+}
+
+.text-body-2 {
+  @include text-body-2;
+}
+
+.text-caption-1 {
+  @include text-caption-1;
+}
+
+.text-caption-2 {
+  @include text-caption-2;
+}
+
+.text-display-1 {
+  @include text-display-1;
+}
+
+.text-link {
+  @include text-link;
+}
+
+@each $alignment in (left, right, center) {
+  .text-#{$alignment} {
+    text-align: $alignment !important;
+  }
+}
+
+// Font property utilities
+.font-weight-bold {
+  font-weight: var(--ec-font-weight-bold) !important;
+}
+
+.font-weight-normal {
+  font-weight: var(--ec-font-weight-normal) !important;
+}
+
+.font-size-small {
+  font-size: var(--ec-font-size-label) !important;
+}
+
+.font-size-medium {
+  font-size: var(--ec-font-size-body) !important;
+}
+
+.font-size-base {
+  font-size: var(--ec-font-size) !important;
+}
+
+.font-size-large {
+  font-size: var(--ec-font-size-title) !important;
+}
+
+.font-color-primary {
+  color: var(--ec-color-primary-dark) !important;
+}
+
+.font-color-primary-light {
+  color: var(--ec-color-primary-light) !important;
+}
+
+.font-color-secondary {
+  color: var(--ec-color-secondary-dark) !important;
+}
+
+.font-color-secondary-light {
+  color: var(--ec-color-secondary-light) !important;
+}
+
+// font-color-muted is deprecated, use .font-color-hint instead
+.font-color-muted,
+.font-color-hint {
+  color: var(--ec-color-hint-dark) !important;
+}
+
+// @deprecated, use .text-link instead.
+.font-color-link {
+  color: var(--ec-color-link) !important;
+}
+
+.font-color-error {
+  color: var(--ec-color-danger) !important;
+}
+
+.font-color-success {
+  color: var(--ec-color-success) !important;
+}
+
+.font-color-interactive {
+  color: var(--ec-color-interactive) !important;
+}
+
+// @deprecated use .text-display-1 instead
+.font-message {
+  @include overlay-message;
+}
+
+// @deprecated use .text-display-1 instead
+.font-message-medium {
+  @include overlay-message($font-size: var(--ec-font-size-body));
+}
+
+.text-truncate {
+  @include truncate();
+}
+
+.text-break-all {
+  word-break: break-all;
+}
+
+.text-wrap {
+  white-space: normal;
+}