elia/twjit: [wip]

Author: elia

Procfile.dev

@@ -1,2 +1 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-admin_tailwind: bin/rails solidus_admin:tailwindcss:watch

admin/README.md

@@ -4,7 +4,6 @@ A Rails engine that provides an administrative interface to the Solidus ecommerc
 
 ## Development
 
-- [Customizing tailwind](docs/customizing_tailwind.md)
 - [Customizing view components](docs/customizing_view_components.md)
 - [Customizing the main navigation](docs/customizing_main_navigation.md)
 

admin/app/assets/stylesheets/solidus_admin/application.css

@@ -1,3 +1,2 @@
 /*
- * = require solidus_admin/tailwind.css
 */

admin/app/assets/stylesheets/solidus_admin/application.tailwind.css.erb

@@ -0,0 +1,134 @@
+<script src="https://cdn.tailwindcss.com/3.3.3?plugins=typography,aspect-ratio"></script>
+
+<style type="text/tailwindcss">
+  @layer base {
+
+    .body-tiny {
+      @apply font-sans font-normal text-xs;
+    }
+
+    .body-tiny-bold {
+      @apply font-sans font-semibold text-xs;
+    }
+
+    .body-small {
+      @apply font-sans font-normal text-sm;
+    }
+
+    .body-small-bold {
+      @apply font-sans font-semibold text-sm;
+    }
+
+    .body-text {
+      @apply font-sans font-normal text-base;
+    }
+
+    .body-text-bold {
+      @apply font-sans font-semibold text-base;
+    }
+
+    .body-title {
+      @apply font-sans font-semibold text-xl;
+    }
+}
+</style>
+
+<script type="module">
+  import forms from '@tailwindcss/forms'
+  import containerQueries from '@tailwindcss/forms'
+  const {defaultTheme} = tailwind
+  tailwind.config = {
+    theme: {
+      extend: {
+        aria: {
+          'current': 'current="true"',
+        },
+        fontFamily: {
+          sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        },
+        colors: {
+          transparent: "transparent",
+          current: "currentColor",
+
+          // Primary palette
+          'solidus-red': "#ef3023",
+          black: "#222222",
+          graphite: "#c7ccc7",
+          'graphite-light': "#d8dad8",
+          sand: "#f5f3f0",
+          white: "#ffffff",
+
+          // Secondary palette
+          yellow: "#fdc071",
+          orange: "#f68050",
+          blue: "#2554b1",
+          moss: "#2d3925",
+          forest: "#096756",
+          midnight: "#163449",
+          pink: "#f6d7e2",
+          plum: "#3a0e31",
+          sky: "#cbdff1",
+          seafoam: "#c1e0de",
+          dune: "#e6bf9b",
+          'full-black': "#000000",
+
+          // Extra colors (not part of the original palette)
+          'papaya-whip': "#f9e3d9",
+
+          // UI Red
+          red: {
+            100: "#f8d6d3",
+            200: "#f1ada7",
+            300: "#ea8980",
+            400: "#e36054",
+            500: "#dc3728",
+            600: "#b12c20",
+            700: "#862219",
+            800: "#561610",
+            900: "#2b0b08",
+          },
+
+          // Grayscale
+          gray: {
+            15: "#fafafa",
+            25: "#f5f5f5",
+            50: "#f0f0f0",
+            100: "#dedede",
+            200: "#cfcfcf",
+            300: "#bababa",
+            400: "#a3a3a3",
+            500: "#737373",
+            600: "#616161",
+            700: "#4a4a4a",
+            800: "#333333",
+          },
+        },
+        borderRadius: {
+          sm: '4px',
+        },
+        backgroundImage: {
+          'arrow-right-up-line': "url('solidus_admin/arrow_right_up_line.svg')",
+          'arrow-down-s-fill-gray-700': "url('solidus_admin/arrow_down_s_fill_gray_700.svg')",
+          'arrow-down-s-fill-red-400': "url('solidus_admin/arrow_down_s_fill_red_400.svg')",
+        },
+        boxShadow: {
+          sm: '0px 1px 2px 0px rgba(0, 0, 0, 0.04)',
+          base: '0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.04)'
+        },
+      },
+    },
+    plugins: [
+      ({ addVariant }) => {
+        addVariant("hidden", "&([hidden])")
+        addVariant("visible", "&:not([hidden])")
+        addVariant("search-cancel", "&::-webkit-search-cancel-button")
+      },
+      forms({ strategy: "class" }),
+      containerQueries(),
+    ],
+  }
+
+  document.addEventListener("turbo:render", () => {
+    document.body.className += " " // This is a hack to trigger TW's JIT compiler
+  })
+</script>

admin/app/views/layouts/solidus_admin/_tailwindcss_cdn.html.erb

@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="<%= current_locale %>">
   <head>
-    <%= favicon_link_tag 'solidus_admin/favicon.ico' %>
+    <%= favicon_link_tag "solidus_admin/favicon.ico" %>
     <title><%= solidus_admin_title %></title>
     <%= stylesheet_link_tag "solidus_admin/application.css", "inter-font", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
   </head>
 
   <body class="bg-gray-15">
+    <%= render 'layouts/solidus_admin/tailwindcss_cdn' %>
+
     <%= render component("skip_link").new(href: "#main") %>
+
     <div class="flex gap-0">
       <div class="min-w-[240px] border-r border-r-gray-100 relative">
         <div class="min-h-screen top-0 sticky flex">

admin/app/views/layouts/solidus_admin/application.html.erb

@@ -5,6 +5,7 @@
     <%= javascript_importmap_tags "solidus_admin/application", shim: false, importmap: SolidusAdmin.importmap %>
   </head>
   <body class="p-3">
+    <%= render 'layouts/solidus_admin/tailwindcss_cdn' %>
     <%= yield %>
   </body>
 </html>

admin/app/views/layouts/solidus_admin/preview.html.erb

@@ -7,6 +7,18 @@
 
 pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.52.0/dist/index.js"
 
+pin "tailwindcss", to: "https://cdn.tailwindcss.com/3.3.3?plugins=typography,aspect-ratio"
+pin "@tailwindcss/aspect-ratio", to: "https://ga.jspm.io/npm:@tailwindcss/aspect-ratio@0.4.2/src/index.js"
+pin "@tailwindcss/container-queries", to: "https://ga.jspm.io/npm:@tailwindcss/container-queries@0.1.1/dist/index.js"
+pin "@tailwindcss/forms", to: "https://ga.jspm.io/npm:@tailwindcss/forms@0.5.6/src/index.js"
+pin "@tailwindcss/typography", to: "https://ga.jspm.io/npm:@tailwindcss/typography@0.5.10/src/index.js"
+
+pin "mini-svg-data-uri", to: "https://ga.jspm.io/npm:mini-svg-data-uri@1.4.4/index.js"
+pin "picocolors", to: "https://ga.jspm.io/npm:picocolors@1.0.0/picocolors.browser.js"
+pin "tailwindcss/colors", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/colors.js"
+pin "tailwindcss/defaultTheme", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/defaultTheme.js"
+pin "tailwindcss/plugin", to: "https://ga.jspm.io/npm:tailwindcss@3.3.3/plugin.js"
+
 pin "solidus_admin/application", preload: true
 pin "solidus_admin/utils"
 pin_all_from SolidusAdmin::Engine.root.join("app/javascript/solidus_admin/controllers"), under: "solidus_admin/controllers"