coveragebook_components 0.10.1.beta.1 → 0.11.0

data/app/assets/build/coco/book.js

@@ -16044,14 +16044,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
   }
 
-  // import-glob:/Users/oliviabonnal/code/coveragebook/coco/app/assets/js/shared|@sharedComponents/**/*.js
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/shared|@sharedComponents/**/*.js
   var modules = [button_exports, button_dropdown_exports, button_group_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports, poll_controller_exports];
   var __default = modules;
 
   // shared/components.js
   var components_default = registerComponents(__default);
 
-  // import-glob:/Users/oliviabonnal/code/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
   var modules2 = [];
   var __default2 = modules2;
 

data/app/assets/css/app/tippy.css

@@ -1,6 +1,6 @@
 @layer utilities {
   .tippy-dropdown-box {
-    @apply bg-background-light-2 text-gray-900 coco-label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
+    @apply bg-background-light-2 text-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
   }
 }
 

data/app/assets/css/base.css

@@ -32,10 +32,6 @@
     display: none !important;
   }
 
-  [data-coco] {
-    @apply text-content-dark-1 font-body;
-  }
-
   [x-dropdown] {
     [x-dropdown\:content] {
       @apply hidden;

data/app/assets/css/shared/tippy.css

@@ -9,7 +9,7 @@
   }
 
   .tippy-box[data-theme^="coco-"] {
-    @apply bg-transparent text-gray-900 coco-label-md whitespace-normal;
+    @apply bg-transparent text-gray-900 label-md whitespace-normal;
 
     .tippy-content {
       @apply p-0;
@@ -28,7 +28,7 @@
 
   /* Tooltip theme */
   .tippy-box[data-theme~="coco-tooltip"] {
-    @apply bg-background-dark-2 text-white coco-label-sm rounded-lg shadow-xl;
+    @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
 
     .tippy-content {
       @apply px-3 py-2 truncate max-w-[240px];

data/app/assets/css/shared/utils/text.css

@@ -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;
+  }
+
+  .heading-2 {
+    @apply text-heading-2;
+  }
 
-  .coco-subheading-1 {
-    @apply font-body text-subheading-1 font-[500];
+  .heading-3 {
+    @apply text-heading-3;
   }
 
-  .coco-subheading-2 {
-    @apply font-body text-subheading-2 font-[500];
+  .heading-4 {
+    @apply text-heading-4;
   }
 
-  .coco-subheading-3 {
-    @apply font-body text-subheading-3 font-[500];
+  .heading-5 {
+    @apply text-heading-5;
   }
 
-  .coco-subheading-4 {
-    @apply font-body text-subheading-4 font-[500];
+  .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;
+  }
+
+  .branded-display-1 {
+    @apply text-display-1;
+  }
+
+  .branded-display-2 {
+    @apply text-display-2;
+  }
+
+  .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;
 
-  .coco-branded-display-2 {
-    @apply font-branded text-relaxed-display-2 font-bold;
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-5 md:max-lg:branded-heading-4;
   }
+}
+
+.coco-heading-4-branded {
+  @apply branded-heading-4;
 
-  .coco-branded-display-3 {
-    @apply font-branded text-relaxed-display-3 font-bold;
+  &: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;
 
-  .coco-branded-display-4 {
-    @apply font-branded text-relaxed-display-4 font-bold;
+  &:not([data-resize="false"]) {
+    @apply max-md:branded-heading-2 md:max-lg:branded-heading-1;
   }
 }

data/app/components/coco/app/blocks/sidebar_nav/item/item.css

@@ -42,7 +42,7 @@
 @layer utilities {
   .app-sidebar-nav-horizontal-item {
     .nav-item-label {
-      @apply coco-label-xxs mt-0.5;
+      @apply label-xxs mt-0.5;
     }
 
     .nav-item-icon .coco-icon {
@@ -81,7 +81,7 @@
     @apply py-4;
 
     .nav-item-label {
-      @apply coco-label-xxs mt-1;
+      @apply label-xxs mt-1;
     }
 
     .nav-item-icon .coco-icon {
@@ -102,7 +102,7 @@
     @apply py-5;
 
     .nav-item-label {
-      @apply coco-label-xs mt-1.5;
+      @apply label-xs mt-1.5;
     }
 
     .nav-item-icon .coco-icon {

data/app/components/coco/app/blocks/sidebar_nav/menu/menu.css

@@ -22,7 +22,7 @@
     }
 
     .menu-item-qualifier {
-      @apply ml-auto coco-label-sm flex-none pl-4;
+      @apply ml-auto label-sm flex-none pl-4;
     }
 
     .menu-item-select {
@@ -47,12 +47,12 @@
       }
 
       h4 {
-        @apply text-content-light-1 font-bold coco-heading-6;
+        @apply text-content-light-1 font-bold heading-6;
         grid-area: title;
       }
 
       div {
-        @apply coco-para-sm;
+        @apply para-sm;
         grid-area: text;
       }
     }

data/app/components/coco/app/elements/alert/alert.css

@@ -23,11 +23,11 @@
     }
 
     .alert-title {
-      @apply coco-heading-6 font-bold;
+      @apply heading-6 font-bold;
     }
 
     .alert-message {
-      @apply coco-para-md;
+      @apply para-md;
 
       a {
         @apply text-current;
@@ -93,11 +93,11 @@
       }
 
       .alert-title {
-        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
+        @apply para-md sm:para-sm xl:para-md;
       }
 
       .alert-message {
-        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
+        @apply para-md sm:para-sm xl:para-md;
       }
     }
 
@@ -126,8 +126,8 @@
         @apply text-content-light-1;
       }
 
-      .coco_link:not([data-theme]) {
-        @apply app-link-neutral-light;
+      .coco-link:not([data-theme]) {
+        @apply link-neutral-light;
       }
     }
 
@@ -151,7 +151,7 @@
       }
 
       .coco-link:not([data-theme]) {
-        @apply app-link-neutral-dark;
+        @apply link-neutral-dark;
       }
     }
 

data/app/components/coco/app/elements/color_picker/color_picker.css

@@ -110,7 +110,7 @@
     }
 
     .picker-display-input {
-      @apply coco-para-sm h-9;
+      @apply para-sm h-9;
     }
 
     .picker-display-color {
@@ -143,7 +143,7 @@
     }
 
     .picker-display-input {
-      @apply coco-para-md h-11;
+      @apply para-md h-11;
     }
 
     .picker-display-color {

data/app/components/coco/app/elements/confirm_panel/confirm_panel.css

@@ -4,7 +4,7 @@
     @apply px-5 py-4 text-center max-w-[200px] space-y-4;
 
     .confirm-text {
-      @apply coco-label-sm font-semibold;
+      @apply label-sm font-semibold;
     }
   }
 }

data/app/components/coco/app/elements/image_picker/image_picker.css

@@ -72,12 +72,12 @@
     }
 
     .picker-placeholder-text {
-      @apply coco-para-sm;
+      @apply para-sm;
       width: 148px;
     }
 
     .picker-file-name {
-      @apply coco-label-sm;
+      @apply label-sm;
     }
 
     .picker-actions {
@@ -94,12 +94,12 @@
     }
 
     .picker-placeholder-text {
-      @apply coco-para-md;
+      @apply para-md;
       width: 172px;
     }
 
     .picker-file-name {
-      @apply coco-label-md;
+      @apply label-md;
     }
 
     .picker-actions {

data/app/components/coco/app/elements/menu/menu.css

@@ -35,7 +35,7 @@
 
       .menu-item {
         [data-component="button"] {
-          @apply px-4 py-2 coco-label-sm;
+          @apply px-4 py-2 label-sm;
 
           .button-inner {
             @apply gap-2;
@@ -53,7 +53,7 @@
 
       .menu-item {
         [data-component="button"] {
-          @apply px-5 py-2.5 coco-label-md;
+          @apply px-5 py-2.5 label-md;
 
           .button-inner {
             @apply gap-2;