coveragebook_components 0.15.0 → 0.16.0

data/app/assets/css/base/setup.css

@@ -4,9 +4,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "./utils/layout";
-@import "./utils/colors";
-@import "./utils/icons";
 @import "./utils/text";
 @import "./tippy";
 
@@ -19,14 +16,6 @@
     @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
   }
 
-  html.app-layout,
-  html.app-layout body {
-    width: 100vw;
-    height: 100vh;
-    height: var(—-app-height);
-    overflow: hidden;
-  }
-
   a {
     @apply text-current underline underline-offset-2;
   }

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

@@ -2,63 +2,60 @@
 @import "tippy.js/dist/svg-arrow";
 @import "tippy.js/dist/border.css";
 
-/* Tippy  */
-@layer components {
-  [data-tippy-root] {
-    @apply !z-[10010];
+@layer utilities {
+  .tippy-dropdown-box {
+    @apply bg-background-light-2 text-coco-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
   }
+}
 
-  .tippy-box[data-theme^="coco-"] {
-    @apply bg-transparent text-gray-900 label-md whitespace-normal;
-
-    .tippy-content {
-      @apply p-0;
-    }
+[data-tippy-root] {
+  @apply !z-[10010];
+}
 
-    /* arrow border */
-    .tippy-svg-arrow > svg:first-child {
-      @apply fill-transparent;
-    }
+.tippy-box[data-theme^="coco-"] {
+  @apply bg-transparent text-coco-gray-900 label-md whitespace-normal;
 
-    /* arrow background */
-    .tippy-svg-arrow > svg:last-child {
-      @apply fill-transparent;
-    }
+  .tippy-content {
+    @apply p-0;
   }
 
-  /* Tooltip theme */
-  .tippy-box[data-theme~="coco-tooltip"] {
-    @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
+  /* arrow border */
+  .tippy-svg-arrow > svg:first-child {
+    @apply fill-transparent;
+  }
 
-    .tippy-content {
-      @apply px-3 py-2 truncate max-w-[240px];
-    }
+  /* arrow background */
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-transparent;
+  }
+}
 
-    /* arrow background */
-    .tippy-svg-arrow > svg:first-child {
-      @apply hidden;
-    }
+/* Tooltip theme */
+.tippy-box[data-theme~="coco-tooltip"] {
+  @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
 
-    .tippy-svg-arrow > svg:last-child {
-      @apply fill-gray-900;
-    }
+  .tippy-content {
+    @apply px-3 py-2 truncate max-w-[240px];
   }
 
-  /*
-   * Tippy dropdown theme
-   */
-  .tippy-box[data-theme~="coco-app-dropdown"],
-  .tippy-box[data-theme~="coco-menu"] {
-    @apply tippy-dropdown-box;
+  /* arrow background */
+  .tippy-svg-arrow > svg:first-child {
+    @apply hidden;
   }
 
-  .tippy-box[data-theme~="coco-naked-dropdown"] {
-    width: min-content;
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-coco-gray-900;
   }
 }
 
-@layer utilities {
-  .tippy-dropdown-box {
-    @apply bg-background-light-2 text-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
-  }
+/*
+  * Tippy dropdown theme
+  */
+.tippy-box[data-theme~="coco-app-dropdown"],
+.tippy-box[data-theme~="coco-menu"] {
+  @apply tippy-dropdown-box;
+}
+
+.tippy-box[data-theme~="coco-naked-dropdown"] {
+  width: min-content;
 }

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

@@ -1,213 +1,3 @@
-/*
- * Internal text utilities
- * These are *not* exported for use outside of components.
- */
-@layer utilities {
-  /* paragraphs */
-
-  .para-lg,
-  .para-md,
-  .para-sm,
-  .para-xs {
-    @apply font-body;
-  }
-
-  .para-lg {
-    @apply text-para-lg;
-  }
-
-  .para-md {
-    @apply text-para-md;
-  }
-
-  .para-sm {
-    @apply text-para-sm;
-  }
-
-  .para-xs {
-    @apply text-para-xs;
-  }
-
-  /* labels */
-
-  .label-lg,
-  .label-md,
-  .label-sm,
-  .label-xs,
-  .label-xxs {
-    @apply font-body font-semibold;
-  }
-
-  .label-lg {
-    @apply text-label-lg;
-  }
-
-  .label-md {
-    @apply text-label-md;
-  }
-
-  .label-sm {
-    @apply text-label-sm;
-  }
-
-  .label-xs {
-    @apply text-label-xs;
-  }
-
-  .label-xxs {
-    @apply text-label-xxs;
-  }
-
-  /* standard subheadings */
-
-  .subheading-1,
-  .subheading-2,
-  .subheading-3,
-  .subheading-4 {
-    @apply font-body font-[500];
-  }
-
-  .subheading-1 {
-    @apply text-subheading-1;
-  }
-
-  .subheading-2 {
-    @apply text-subheading-2;
-  }
-
-  .subheading-3 {
-    @apply text-subheading-3;
-  }
-
-  .subheading-4 {
-    @apply text-subheading-4;
-  }
-
-  /* standard headings */
-
-  .heading-1,
-  .heading-2,
-  .heading-3,
-  .heading-4,
-  .heading-5,
-  .heading-6 {
-    @apply font-body font-bold;
-  }
-
-  .heading-1 {
-    @apply text-heading-1;
-  }
-
-  .heading-2 {
-    @apply text-heading-2;
-  }
-
-  .heading-3 {
-    @apply text-heading-3;
-  }
-
-  .heading-4 {
-    @apply text-heading-4;
-  }
-
-  .heading-5 {
-    @apply text-heading-5;
-  }
-
-  .heading-6 {
-    @apply text-heading-6;
-  }
-
-  /* display headings */
-
-  .display-1,
-  .display-2,
-  .display-3,
-  .display-4 {
-    @apply font-display font-bold;
-  }
-
-  .display-1 {
-    @apply text-display-1;
-  }
-
-  .display-2 {
-    @apply text-display-2;
-  }
-
-  .display-3 {
-    @apply text-display-3;
-  }
-
-  .display-4 {
-    @apply text-display-4;
-  }
-
-  /* branded headings */
-
-  .branded-heading-1,
-  .branded-heading-2,
-  .branded-heading-3,
-  .branded-heading-4,
-  .branded-heading-5,
-  .branded-heading-6 {
-    @apply font-branded font-bold;
-  }
-
-  .branded-heading-1 {
-    @apply text-heading-1;
-  }
-
-  .branded-heading-2 {
-    @apply text-heading-2;
-  }
-
-  .branded-heading-3 {
-    @apply text-heading-3;
-  }
-
-  .branded-heading-4 {
-    @apply text-heading-4;
-  }
-
-  .branded-heading-5 {
-    @apply text-heading-5;
-  }
-
-  .branded-heading-6 {
-    @apply text-heading-6;
-  }
-
-  .coco-branded-heading-6 {
-    @apply font-branded text-heading-6 font-bold;
-  }
-
-  /* branded display headings */
-
-  .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.

data/app/assets/css/coco.css

@@ -0,0 +1,3 @@
+@import "./base/setup";
+
+@import-glob "@components/!(app|book)/**/*.css";

data/app/assets/css/plugins/aspect.js

@@ -0,0 +1,27 @@
+const plugin = require("tailwindcss/plugin");
+
+// Safari 14-compatible aspect ratio
+module.exports = plugin(function ({ matchUtilities, theme }) {
+  matchUtilities(
+    {
+      aspect: (value) => ({
+        "@supports (aspect-ratio: 1 / 1)": {
+          aspectRatio: value,
+        },
+        "@supports not (aspect-ratio: 1 / 1)": {
+          "&::before": {
+            content: '""',
+            float: "left",
+            paddingTop: `calc(100% / (${value}))`,
+          },
+          "&::after": {
+            clear: "left",
+            content: '""',
+            display: "block",
+          },
+        },
+      }),
+    },
+    { values: theme("aspectRatio") }
+  );
+});

data/app/assets/css/plugins/colors.js

@@ -0,0 +1,30 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".bg-gray-blend-50": {
+      "@apply bg-gray-transparent-50": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".bg-gray-blend-100": {
+      "@apply bg-gray-transparent-100": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".bg-gray-blend-200": {
+      "@apply bg-gray-transparent-200": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-50": {
+      "@apply border-gray-transparent-50": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-100": {
+      "@apply border-gray-transparent-100": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-200": {
+      "@apply border-gray-transparent-200": {},
+      "background-blend-mode": "hard-light",
+    },
+  });
+});

data/app/assets/css/plugins/icons.js

@@ -0,0 +1,17 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".icon": {},
+    ".icon-stroke": {
+      "@apply fill-none stroke-2 stroke-current text-current": {},
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    },
+    ".icon-fill": {
+      "@apply fill-current text-current": {},
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    },
+  });
+});

data/app/assets/css/plugins/layout.js

@@ -0,0 +1,15 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".pl-app": {
+      "@apply pl-3 sm:pl-6 md:pl-8 lg:pl-10 xl:pl-11": {},
+    },
+    ".pr-app": {
+      "@apply pr-3 sm:pr-6 md:pr-8 lg:pr-10 xl:pr-11": {},
+    },
+    ".px-app": {
+      "@apply pl-app pr-app": {},
+    },
+  });
+});

data/app/assets/css/plugins/text.js

@@ -0,0 +1,183 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".para-lg, .para-md, .para-sm, .para-xs": {
+      "@apply font-body": {},
+    },
+
+    ".para-lg": {
+      "@apply text-para-lg": {},
+    },
+
+    ".para-md": {
+      "@apply text-para-md": {},
+    },
+
+    ".para-sm": {
+      "@apply text-para-sm": {},
+    },
+
+    ".para-xs": {
+      "@apply text-para-xs": {},
+    },
+
+    /* labels */
+
+    ".label-lg, .label-md, .label-sm, .label-xs, .label-xxs": {
+      "@apply font-body font-semibold": {},
+    },
+
+    ".label-lg": {
+      "@apply text-label-lg": {},
+    },
+
+    ".label-md": {
+      "@apply text-label-md": {},
+    },
+
+    ".label-sm": {
+      "@apply text-label-sm": {},
+    },
+
+    ".label-xs": {
+      "@apply text-label-xs": {},
+    },
+
+    ".label-xxs": {
+      "@apply text-label-xxs": {},
+    },
+
+    /* standard subheadings */
+
+    ".subheading-1, .subheading-2, .subheading-3, .subheading-4": {
+      "@apply font-body font-[500]": {},
+    },
+
+    ".subheading-1": {
+      "@apply text-subheading-1": {},
+    },
+
+    ".subheading-2": {
+      "@apply text-subheading-2": {},
+    },
+
+    ".subheading-3": {
+      "@apply text-subheading-3": {},
+    },
+
+    ".subheading-4": {
+      "@apply text-subheading-4": {},
+    },
+
+    /* standard headings */
+
+    ".heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6": {
+      "@apply font-body font-bold": {},
+    },
+
+    ".heading-1": {
+      "@apply text-heading-1": {},
+    },
+
+    ".heading-2": {
+      "@apply text-heading-2": {},
+    },
+
+    ".heading-3": {
+      "@apply text-heading-3": {},
+    },
+
+    ".heading-4": {
+      "@apply text-heading-4": {},
+    },
+
+    ".heading-5": {
+      "@apply text-heading-5": {},
+    },
+
+    ".heading-6": {
+      "@apply text-heading-6": {},
+    },
+
+    /* display headings */
+
+    ".display-1, .display-2, .display-3, .display-4": {
+      "@apply font-display font-bold": {},
+    },
+
+    ".display-1": {
+      "@apply text-display-1": {},
+    },
+
+    ".display-2": {
+      "@apply text-display-2": {},
+    },
+
+    ".display-3": {
+      "@apply text-display-3": {},
+    },
+
+    ".display-4": {
+      "@apply text-display-4": {},
+    },
+
+    /* branded headings */
+
+    ".branded-heading-1, .branded-heading-2, .branded-heading-3, .branded-heading-4, .branded-heading-5, .branded-heading-6":
+      {
+        "@apply font-branded font-bold": {},
+      },
+
+    ".branded-heading-1": {
+      "@apply text-heading-1": {},
+    },
+
+    ".branded-heading-2": {
+      "@apply text-heading-2": {},
+    },
+
+    ".branded-heading-3": {
+      "@apply text-heading-3": {},
+    },
+
+    ".branded-heading-4": {
+      "@apply text-heading-4": {},
+    },
+
+    ".branded-heading-5": {
+      "@apply text-heading-5": {},
+    },
+
+    ".branded-heading-6": {
+      "@apply text-heading-6": {},
+    },
+
+    ".coco-branded-heading-6": {
+      "@apply font-branded text-heading-6 font-bold": {},
+    },
+
+    /* branded display headings */
+
+    ".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": {},
+    },
+  });
+});

data/app/components/coco/app/nav_drawer/nav_drawer.css

@@ -31,11 +31,11 @@
     }
 
     .nav-drawer-heading {
-      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-gray-300 pb-3;
+      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-coco-gray-300 pb-3;
     }
 
     .nav-drawer-divider {
-      @apply h-0 border-t border-gray-300 my-3;
+      @apply h-0 border-t border-coco-gray-300 my-3;
     }
 
     [data-component="notice"] {

data/app/components/coco/app/plan_card/plan_card.css

@@ -36,7 +36,7 @@
     }
 
     .plan-benefits {
-      @apply space-y-4 py-5 border-t border-gray-300;
+      @apply space-y-4 py-5 border-t border-coco-gray-300;
     }
 
     .plan-benefit {

data/app/components/coco/buttons/button/button.css

@@ -154,10 +154,10 @@
     }
 
     &[data-theme="toolbar-floating"] {
-      @apply bg-white hover:bg-gray-100 active:bg-gray-200 border-gray-300;
+      @apply bg-white hover:bg-coco-gray-100 active:bg-coco-gray-200 border-coco-gray-300;
 
       &[data-state="active"] {
-        @apply bg-gray-200;
+        @apply bg-coco-gray-200;
       }
     }
 
@@ -303,18 +303,18 @@
     }
 
     &[data-theme="neutral-dark"] {
-      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased;
+      @apply bg-background-dark-1 text-content-light-1 hover:bg-coco-gray-700 active:bg-coco-gray-600 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-dark-1;
       }
 
       &[data-state="active"] {
-        @apply bg-gray-600;
+        @apply bg-coco-gray-600;
       }
 
       &[data-disabled="true"] {
-        @apply bg-gray-300;
+        @apply bg-coco-gray-300;
       }
     }
 

data/app/components/coco/buttons/button_group/button_group.css

@@ -17,7 +17,7 @@
     }
 
     .divider {
-      @apply w-0 border-l border-gray-300 self-stretch;
+      @apply w-0 border-l border-coco-gray-300 self-stretch;
     }
 
     &[data-align="end"] {

data/app/components/coco/buttons/color_picker_button/color_picker_button.css

@@ -7,7 +7,7 @@
     }
 
     .picker-button-color {
-      @apply w-full h-full block rounded-full bg-white border border-gray-900;
+      @apply w-full h-full block rounded-full bg-white border border-coco-gray-900;
     }
 
     [data-component="color-picker"] {