coveragebook_components 0.15.0 → 0.16.0

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

@@ -65,7 +65,7 @@
     }
 
     .divider {
-      @apply h-0 border-t border-gray-300;
+      @apply h-0 border-t border-coco-gray-300;
     }
   }
 }

data/app/components/coco/buttons/menu_items/user_profile/user_profile.css

@@ -16,7 +16,7 @@
     }
 
     .user-profile-email {
-      @apply text-gray-500 label-sm italic truncate;
+      @apply text-coco-gray-500 label-sm italic truncate;
     }
   }
 }

data/app/components/coco/indicators/badge/badge.css

@@ -24,7 +24,7 @@
     }
 
     &[data-theme="neutral-muted"] {
-      @apply bg-gray-300 text-content-dark-3;
+      @apply bg-coco-gray-300 text-content-dark-3;
     }
 
     &[data-theme="primary"] {

data/app/components/coco/layout/panel/panel.css

@@ -8,7 +8,7 @@
 
     /* Only style Coco panels that are not rendered inside legacy panel components */
     &:not([data-component="panel"] [data-component="panel"]) {
-      @apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
+      @apply block bg-content-light-1 border border-coco-gray-300 shadow-md rounded-xl;
 
       .panel-content {
         @apply block;

data/app/components/coco/modals/modal/modal.css

@@ -82,7 +82,7 @@
     @apply max-w-2xl mx-auto;
 
     [data-component="modal-dialog"] {
-      @apply border border-gray-300 shadow-md rounded-xl;
+      @apply border border-coco-gray-300 shadow-md rounded-xl;
     }
   }
 }

data/app/components/coco/modals/modal_dialog/modal_dialog.css

@@ -9,7 +9,7 @@
 
     .modal-dialog-header {
       @apply relative flex items-center;
-      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-coco-gray-300 rounded-t-xl bg-white;
     }
 
     .modal-dialog-title {

data/app/components/coco/utilities/placeholder/placeholder.css

@@ -3,7 +3,7 @@
     @apply p-4;
 
     &[data-boxed="true"] {
-      @apply border border-dashed border-gray-400 bg-gray-50;
+      @apply border border-dashed border-coco-gray-400 bg-coco-gray-50;
     }
 
     &[data-prose="true"] {

data/app/helpers/coco/integration_helper.rb

@@ -1,11 +1,33 @@
 module Coco
   module IntegrationHelper
-    def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
+    def coco_stylesheet_tag(context = "coco", dev: ENV["COCO_PATH"], **)
       stylesheet_link_tag("coco#{"/dev" if dev}/#{context}", **)
     end
 
-    def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)
-      File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
+    def coco_stylesheet_file_path(...)
+      IntegrationHelper.stylesheet_file_path(...)
+    end
+
+    def coco_javascript_file_path(...)
+      IntegrationHelper.javascript_file_path(...)
+    end
+
+    def coco_tailwind_preset_path(...)
+      IntegrationHelper.tailwind_preset_path(...)
+    end
+
+    class << self
+      def stylesheet_file_path(context = "coco", dev: ENV["COCO_PATH"], **opts)
+        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
+      end
+
+      def javascript_file_path(context = "coco", dev: ENV["COCO_PATH"], **opts)
+        File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.js")
+      end
+
+      def tailwind_preset_path
+        File.join(Coco::Engine.root, "app/assets/build/coco/tailwind.preset.js")
+      end
     end
   end
 end

data/config/tailwind.config.js

@@ -1,94 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 
-const defaultTheme = require("tailwindcss/defaultTheme");
 const { cocoPath } = require("./utils.js");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
 
 module.exports = {
+  presets: [require("./tailwind.preset.js")],
   content: [
     cocoPath("@components/**/*.{erb,rb,js}", true),
     cocoPath("@assets/**/*.{erb,rb}", true),
-    cocoPath("@previews/**/*.{erb,rb}", true),
-  ],
-  safelist: [
-    {
-      pattern: /tippy-.+/,
-    },
   ],
   blocklist: ["container"],
-  theme: {
-    colors,
-    screens,
-    fontFamily: {
-      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
-      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
-      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
-    },
-    extend: {
-      fontSize,
-      containers: {
-        "slide-fluid": "700px",
-      },
-      aspectRatio: {
-        slide: "16 / 10",
-      },
-      animation: {
-        spin: "spin 1.5s linear infinite",
-        "spin-reverse": "spin 1.5s linear infinite reverse",
-      },
-      spacing: {
-        13: "3.25rem",
-        15: "3.75rem",
-        18: "4.5rem",
-      },
-      customForms: () => ({
-        DEFAULT: {
-          checkbox: {
-            "&:indeterminate": {
-              background:
-                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
-              borderColor: "transparent",
-              backgroundColor: "currentColor",
-              backgroundSize: "100% 100%",
-              backgroundPosition: "center",
-              backgroundRepeat: "no-repeat",
-            },
-          },
-        },
-      }),
-    },
-  },
-  corePlugins: {
-    aspectRatio: false,
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/container-queries"),
-
-    ({ matchUtilities, theme }) => {
-      // Safari 14-compatible aspect ratio
-      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/config/tailwind.preset.js

@@ -0,0 +1,66 @@
+/** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require("tailwindcss/defaultTheme");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
+
+module.exports = {
+  theme: {
+    colors,
+    screens,
+    fontFamily: {
+      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
+      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+    },
+    extend: {
+      fontSize,
+      containers: {
+        "slide-fluid": "700px",
+      },
+      aspectRatio: {
+        slide: "16 / 10",
+      },
+      animation: {
+        spin: "spin 1.5s linear infinite",
+        "spin-reverse": "spin 1.5s linear infinite reverse",
+      },
+      spacing: {
+        4.5: "1.125rem",
+        5.5: "1.375rem",
+        6.5: "1.675rem",
+        7.5: "1.875rem",
+        13: "3.25rem",
+        15: "3.75rem",
+        17: "4.25rem",
+        18: "4.5rem",
+      },
+      customForms: () => ({
+        DEFAULT: {
+          checkbox: {
+            "&:indeterminate": {
+              background:
+                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
+              borderColor: "transparent",
+              backgroundColor: "currentColor",
+              backgroundSize: "100% 100%",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+            },
+          },
+        },
+      }),
+    },
+  },
+  corePlugins: {
+    aspectRatio: false,
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/container-queries"),
+    require("../app/assets/css/plugins/colors.js"),
+    require("../app/assets/css/plugins/icons.js"),
+    require("../app/assets/css/plugins/layout.js"),
+    require("../app/assets/css/plugins/text.js"),
+    require("../app/assets/css/plugins/aspect.js"),
+  ],
+};

data/config/tokens.js

@@ -3,17 +3,21 @@ const colors = {
   current: "currentColor",
   black: "#000000",
   white: "#FFFFFF",
+  coco: {
+    gray: {
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      300: "#D1D5DB",
+      400: "#9CA3AF",
+      500: "#6B7280",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937",
+      900: "#111827",
+    },
+  },
   gray: {
-    50: "#F9FAFB",
-    100: "#F3F4F6",
-    200: "#E5E7EB",
-    300: "#D1D5DB",
-    400: "#9CA3AF",
-    500: "#6B7280",
-    600: "#4B5563",
-    700: "#374151",
-    800: "#1F2937",
-    900: "#111827",
     transparent: {
       50: "rgba(0, 12, 39, 0.06)",
       100: "rgba(0, 12, 39, 0.1)",
@@ -104,13 +108,13 @@ const colorAliases = {
     },
     light: {
       1: colors.white,
-      2: colors.gray[50],
-      3: colors.gray[100],
+      2: colors.coco.gray[50],
+      3: colors.coco.gray[100],
     },
     dark: {
-      1: colors.gray[900],
-      2: colors.gray[800],
-      3: colors.gray[700],
+      1: colors.coco.gray[900],
+      2: colors.coco.gray[800],
+      3: colors.coco.gray[700],
     },
     primary: {
       DEFAULT: colors.green[500],
@@ -135,15 +139,15 @@ const colorAliases = {
   },
   content: {
     dark: {
-      1: colors.gray[900],
-      2: colors.gray[800],
-      3: colors.gray[600],
-      muted: colors.gray[400],
+      1: colors.coco.gray[900],
+      2: colors.coco.gray[800],
+      3: colors.coco.gray[600],
+      muted: colors.coco.gray[400],
     },
     light: {
       1: colors.white,
-      2: colors.gray[200],
-      muted: colors.gray[400],
+      2: colors.coco.gray[200],
+      muted: colors.coco.gray[400],
     },
     primary: {
       DEFAULT: colors.green[500],

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.15.0"
+  VERSION = "0.16.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.15.0
+  version: 0.16.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-18 00:00:00.000000000 Z
+date: 2024-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -63,6 +63,7 @@ files:
 - app/assets/build/coco/app.js
 - app/assets/build/coco/book.css
 - app/assets/build/coco/book.js
+- app/assets/build/coco/coco.css
 - app/assets/build/coco/coco.js
 - app/assets/build/coco/icons/a-arrow-down.svg
 - app/assets/build/coco/icons/a-arrow-up.svg
@@ -1451,16 +1452,20 @@ files:
 - app/assets/build/coco/img/test/slides/slide-bg.jpg
 - app/assets/build/coco/img/test/slides/slide-foreground-landscape.jpg
 - app/assets/build/coco/img/test/slides/slide-foreground-portrait.jpg
+- app/assets/build/coco/tailwind.preset.js
 - app/assets/config/coco/manifest.js
 - app/assets/css/app.css
 - app/assets/css/base/config.css
 - app/assets/css/base/setup.css
 - app/assets/css/base/tippy.css
-- app/assets/css/base/utils/colors.css
-- app/assets/css/base/utils/icons.css
-- app/assets/css/base/utils/layout.css
 - app/assets/css/base/utils/text.css
 - app/assets/css/book.css
+- app/assets/css/coco.css
+- app/assets/css/plugins/aspect.js
+- app/assets/css/plugins/colors.js
+- app/assets/css/plugins/icons.js
+- app/assets/css/plugins/layout.js
+- app/assets/css/plugins/text.js
 - app/assets/custom_icons/other/eye-off-red.svg
 - app/assets/custom_icons/other/google-sso.svg
 - app/assets/custom_icons/other/layout-overlay.svg
@@ -1763,9 +1768,11 @@ files:
 - app/helpers/coco/integration_helper.rb
 - app/helpers/coco/modal_helper.rb
 - app/helpers/coco/tag_helper.rb
+- config/exports.js
 - config/icons.json
 - config/locales/coco.en.yml
 - config/tailwind.config.js
+- config/tailwind.preset.js
 - config/tokens.js
 - config/utils.js
 - lib/coco.rb

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

@@ -1,30 +0,0 @@
-@layer utilities {
-  /* Transparent gray blend-mode background utilities */
-
-  .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;
-  }
-
-  .border-gray-blend-100 {
-    @apply border-gray-transparent-100;
-  }
-
-  .border-gray-blend-200 {
-    @apply border-gray-transparent-200;
-  }
-}

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

@@ -1,16 +0,0 @@
-@layer utilities {
-  .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/base/utils/layout.css

@@ -1,13 +0,0 @@
-@layer utilities {
-  .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;
-  }
-}