coveragebook_components 0.15.0 → 0.17.0

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

@@ -1,43 +0,0 @@
-@import "./config";
-
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "./utils/layout";
-@import "./utils/colors";
-@import "./utils/icons";
-@import "./utils/text";
-@import "./tippy";
-
-@layer base {
-  :root {
-    --app-height: 100%;
-  }
-
-  html {
-    @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;
-  }
-
-  [x-cloak] {
-    display: none !important;
-  }
-
-  [x-dropdown] {
-    [x-dropdown\:content] {
-      @apply hidden;
-    }
-  }
-}

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,34 @@
+@import "./base/config";
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./base/utils/text";
+@import "./base/tippy";
+
+@import-glob "@components/**/*.css";
+
+@layer base {
+  :root {
+    --app-height: 100%;
+  }
+
+  html {
+    @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
+  }
+
+  a {
+    @apply text-current underline underline-offset-2;
+  }
+
+  [x-cloak] {
+    display: none !important;
+  }
+
+  [x-dropdown] {
+    [x-dropdown\:content] {
+      @apply hidden;
+    }
+  }
+}

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/assets/js/base/tippy/plugins/hide_on_esc.js

@@ -1,4 +1,4 @@
-export default hideOnEsc = {
+const hideOnEsc = {
   name: "hideOnEsc",
 
   defaultValue: true,
@@ -21,3 +21,5 @@ export default hideOnEsc = {
     };
   },
 };
+
+export default hideOnEsc;

data/app/assets/js/coco/coco.js

@@ -1,8 +1,6 @@
 import Alpine from "../base/alpine";
 import packageJSON from "@/package.json" assert { type: "json" };
 import { registerComponents } from "@helpers/alpine.js";
-import CocoComponent from "./component";
-import * as helpers from "@helpers/index";
 
 const Coco = {
   version: packageJSON.version,
@@ -24,16 +22,9 @@ const Coco = {
     this._components.push(...components);
   },
 
-  component(...args) {
-    return CocoComponent(...args);
-  },
-
   _components: [],
 
   _started: false,
 };
 
-Coco.Component = CocoComponent;
-Coco.helpers = helpers;
-
 export default Coco;