app/assets/css/shared/utils/text.css in coveragebook_components-0.10.1.beta.2 vs app/assets/css/shared/utils/text.css in coveragebook_components-0.11.0

@@ -1,143 +1,400 @@
+/*
+ * Internal text utilities
+ * These are *not* exported for use outside of components.
+ */
 @layer utilities {
   /* paragraphs */
 
-  .coco-para-lg {
-    @apply font-body text-para-lg;
+  .para-lg,
+  .para-md,
+  .para-sm,
+  .para-xs {
+    @apply font-body;
   }
 
-  .coco-para-md {
-    @apply font-body text-para-md;
+  .para-lg {
+    @apply text-para-lg;
   }
 
-  .coco-para-sm {
-    @apply font-body text-para-sm;
+  .para-md {
+    @apply text-para-md;
   }
 
-  .coco-para-xs {
-    @apply font-body text-para-xs;
+  .para-sm {
+    @apply text-para-sm;
   }
 
+  .para-xs {
+    @apply text-para-xs;
+  }
+
   /* labels */
 
-  .coco-label-lg {
-    @apply font-body text-label-lg font-semibold;
+  .label-lg,
+  .label-md,
+  .label-sm,
+  .label-xs,
+  .label-xxs {
+    @apply font-body font-semibold;
   }
 
-  .coco-label-md {
-    @apply font-body text-label-md font-semibold;
+  .label-lg {
+    @apply text-label-lg;
   }
 
-  .coco-label-sm {
-    @apply font-body text-label-sm font-semibold;
+  .label-md {
+    @apply text-label-md;
   }
 
-  .coco-label-xs {
-    @apply font-body text-label-xs font-semibold;
+  .label-sm {
+    @apply text-label-sm;
   }
 
-  .coco-label-xxs {
-    @apply font-body text-label-xxs font-semibold;
+  .label-xs {
+    @apply text-label-xs;
   }
 
-  /* standard headings */
+  .label-xxs {
+    @apply text-label-xxs;
+  }
 
-  .coco-heading-1 {
-    @apply font-body text-heading-1 font-bold;
+  /* standard subheadings */
+
+  .subheading-1,
+  .subheading-2,
+  .subheading-3,
+  .subheading-4 {
+    @apply font-body font-[500];
   }
 
-  .coco-heading-2 {
-    @apply font-body text-heading-2 font-bold;
+  .subheading-1 {
+    @apply text-subheading-1;
   }
 
-  .coco-heading-3 {
-    @apply font-body text-heading-3 font-bold;
+  .subheading-2 {
+    @apply text-subheading-2;
   }
 
-  .coco-heading-4 {
-    @apply font-body text-heading-4 font-bold;
+  .subheading-3 {
+    @apply text-subheading-3;
   }
 
-  .coco-heading-5 {
-    @apply font-body text-heading-5 font-bold;
+  .subheading-4 {
+    @apply text-subheading-4;
   }
 
-  .coco-heading-6 {
-    @apply font-body text-heading-6 font-bold;
+  /* standard headings */
+
+  .heading-1,
+  .heading-2,
+  .heading-3,
+  .heading-4,
+  .heading-5,
+  .heading-6 {
+    @apply font-body font-bold;
   }
 
-  /* standard subheadings */
+  .heading-1 {
+    @apply text-heading-1;
+  }
 
-  .coco-subheading-1 {
-    @apply font-body text-subheading-1 font-[500];
+  .heading-2 {
+    @apply text-heading-2;
   }
 
-  .coco-subheading-2 {
-    @apply font-body text-subheading-2 font-[500];
+  .heading-3 {
+    @apply text-heading-3;
   }
 
-  .coco-subheading-3 {
-    @apply font-body text-subheading-3 font-[500];
+  .heading-4 {
+    @apply text-heading-4;
   }
 
-  .coco-subheading-4 {
-    @apply font-body text-subheading-4 font-[500];
+  .heading-5 {
+    @apply text-heading-5;
   }
 
+  .heading-6 {
+    @apply text-heading-6;
+  }
+
   /* display headings */
 
-  .coco-display-1 {
-    @apply font-display text-display-1 font-bold;
+  .display-1,
+  .display-2,
+  .display-3,
+  .display-4 {
+    @apply font-display font-bold;
   }
 
-  .coco-display-2 {
-    @apply font-display text-display-2 font-bold;
+  .display-1 {
+    @apply text-display-1;
   }
 
-  .coco-display-3 {
-    @apply font-display text-display-3 font-bold;
+  .display-2 {
+    @apply text-display-2;
   }
 
-  .coco-display-4 {
-    @apply font-display text-display-4 font-bold;
+  .display-3 {
+    @apply text-display-3;
   }
 
+  .display-4 {
+    @apply text-display-4;
+  }
+
   /* branded headings */
 
-  .coco-branded-heading-1 {
-    @apply font-branded text-heading-1 font-bold;
+  .branded-heading-1,
+  .branded-heading-2,
+  .branded-heading-3,
+  .branded-heading-4,
+  .branded-heading-5,
+  .branded-heading-6 {
+    @apply font-branded font-bold;
   }
 
-  .coco-branded-heading-2 {
-    @apply font-branded text-heading-2 font-bold;
+  .branded-heading-1 {
+    @apply text-heading-1;
   }
 
-  .coco-branded-heading-3 {
-    @apply font-branded text-heading-3 font-bold;
+  .branded-heading-2 {
+    @apply text-heading-2;
   }
 
-  .coco-branded-heading-4 {
-    @apply font-branded text-heading-4 font-bold;
+  .branded-heading-3 {
+    @apply text-heading-3;
   }
 
-  .coco-branded-heading-5 {
-    @apply font-branded text-heading-5 font-bold;
+  .branded-heading-4 {
+    @apply text-heading-4;
   }
 
+  .branded-heading-5 {
+    @apply text-heading-5;
+  }
+
+  .branded-heading-6 {
+    @apply text-heading-6;
+  }
+
   /* branded display headings */
 
-  .coco-branded-display-1 {
-    @apply font-branded text-relaxed-display-1 font-bold;
+  .branded-display-1,
+  .branded-display-2,
+  .branded-display-3,
+  .branded-display-4 {
+    @apply font-branded font-bold;
   }
 
-  .coco-branded-display-2 {
-    @apply font-branded text-relaxed-display-2 font-bold;
+  .branded-display-1 {
+    @apply text-display-1;
   }
 
-  .coco-branded-display-3 {
-    @apply font-branded text-relaxed-display-3 font-bold;
+  .branded-display-2 {
+    @apply text-display-2;
   }
 
-  .coco-branded-display-4 {
-    @apply font-branded text-relaxed-display-4 font-bold;
+  .branded-display-3 {
+    @apply text-display-3;
+  }
+
+  .branded-display-4 {
+    @apply text-display-4;
+  }
+}
+
+/*
+ * Public text utilities
+ * These are exported as utility classes for use outside of components.
+ */
+
+/* standard subheadings */
+
+.coco-subheading-1 {
+  @apply subheading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-sm:subheading-4 sm:max-md:subheading-3 md:max-lg:subheading-2;
+  }
+}
+
+.coco-subheading-2 {
+  @apply subheading-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:subheading-4 md:max-lg:subheading-3;
+  }
+}
+
+.coco-subheading-3 {
+  @apply subheading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:subheading-4;
+  }
+}
+
+.coco-subheading-4 {
+  @apply subheading-4;
+}
+
+/* standard headings */
+
+.coco-heading-1 {
+  @apply heading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-3 md:max-lg:heading-2;
+  }
+}
+
+.coco-heading-2 {
+  @apply heading-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-4 md:max-lg:heading-3;
+  }
+}
+
+.coco-heading-3 {
+  @apply heading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-5 md:max-lg:heading-4;
+  }
+}
+
+.coco-heading-4 {
+  @apply heading-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-5;
+  }
+}
+
+.coco-heading-5 {
+  @apply heading-5;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-6;
+  }
+}
+
+.coco-heading-6 {
+  @apply heading-6;
+}
+
+/* display headings */
+
+.coco-display-1 {
+  @apply display-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:display-3 md:max-lg:display-2;
+  }
+}
+
+.coco-display-2 {
+  @apply display-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:display-4 md:max-lg:display-3;
+  }
+}
+
+.coco-display-3 {
+  @apply display-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-1 md:max-lg:display-4;
+  }
+}
+
+.coco-display-4 {
+  @apply display-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:heading-2 md:max-lg:heading-1;
+  }
+}
+
+/* branded headings */
+
+.coco-heading-1-branded {
+  @apply branded-heading-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-3 md:max-lg:branded-heading-2;
+  }
+}
+
+.coco-heading-2-branded {
+  @apply branded-heading-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-4 md:max-lg:branded-heading-3;
+  }
+}
+
+.coco-heading-3-branded {
+  @apply branded-heading-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-5 md:max-lg:branded-heading-4;
+  }
+}
+
+.coco-heading-4-branded {
+  @apply branded-heading-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-5;
+  }
+}
+
+.coco-heading-5-branded {
+  @apply branded-heading-5;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-6;
+  }
+}
+
+.coco-heading-6-branded {
+  @apply branded-heading-6;
+}
+
+/* branded display headings */
+
+.coco-display-1-branded {
+  @apply branded-display-1;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-display-3 md:max-lg:branded-display-2;
+  }
+}
+
+.coco-display-2-branded {
+  @apply branded-display-2;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-display-4 md:max-lg:branded-display-3;
+  }
+}
+
+.coco-display-3-branded {
+  @apply branded-display-3;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-1 md:max-lg:branded-display-4;
+  }
+}
+
+.coco-display-4-branded {
+  @apply branded-display-4;
+
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-2 md:max-lg:branded-heading-1;
   }
 }