Add Export toggle

docs/_includes/global/customizer.html

@@ -0,0 +1,39 @@
+<div id="bulma-customizer-app"></div>
+<div id="scope" class="is-hidden">
+  <div class="breadcrumb"></div>
+  <div class="card"></div>
+  <div class="dropdown"></div>
+  <div class="menu"></div>
+  <div class="message"></div>
+  <div class="modal"></div>
+  <div class="navbar"></div>
+  <div class="pagination"></div>
+  <div class="panel"></div>
+  <div class="tabs"></div>
+  <div class="box"></div>
+  <div class="content"></div>
+  <div class="delete"></div>
+  <div class="icon"></div>
+  <div class="notification"></div>
+  <div class="progress"></div>
+  <div class="table"></div>
+  <div class="tag"></div>
+  <div class="title"></div>
+  <input class="input" />
+  <div class="file"></div>
+  <div class="columns"></div>
+  <div class="grid"></div>
+  <div class="footer"></div>
+  <div class="hero"></div>
+  <div class="media"></div>
+  <div class="section"></div>
+</div>
+
+<link
+  rel="stylesheet"
+  href="{{ site.url }}/assets/javascript/bulma-customizer/index.css"
+/>
+<script
+  defer
+  src="{{ site.url }}/assets/javascript/bulma-customizer/index.js"
+></script>

docs/_layouts/default.html

@@ -19,15 +19,16 @@
 
     {% include global/about.html %}
 
-    <script src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
+    <script defer src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-    <script type="text/javascript"> docsearch({
+    <script defer type="text/javascript"> docsearch({
       apiKey: 'cb93c14bebd90678e789c946d95ea94d',
       indexName: 'bulma',
       inputSelector: '#algoliaSearch',
       debug: false // Set debug to true if you want to inspect the dropdown
     });
     </script>
-    <script src="{{ site.url }}/assets/javascript/main.js"></script>
+    <script defer src="{{ site.url }}/assets/javascript/main.js"></script>
+    {% include global/customizer.html %}
   </body>
 </html>

docs/_react/bulma-customizer/src/App.css

@@ -39,7 +39,7 @@
     font-size: 1rem;
     overflow: auto;
     padding: 1em 1.25em;
-    margin: 0.5rem -0.5rem;
+    margin: 0.5rem -0.5rem -0.5rem;
   }
 
   & > .language-css {

docs/_react/bulma-customizer/src/App.jsx

@@ -142,12 +142,15 @@ const PAGE_IDS = {
   Layout: ["footer", "hero", "media", "section"],
   Export: ["export"],
 };
+const LOCAL_STORAGE_KEY = "bulma-customizer-vars"
 
 export const CustomizerContext = createContext({
   isOpen: false,
   cssvars: {},
+  saved: {},
   currentTab: "",
   currentPage: "",
+  showExport: false,
   getVar: () => {},
   changeTab: () => {},
   changePage: () => {},
@@ -159,8 +162,10 @@ function App() {
   const initialContext = {
     isOpen: true,
     cssvars: {},
-    currentTab: "Export",
+    saved: {},
-    currentPage: "export",
+    currentTab: "Global Variables",
+    currentPage: "colors",
+    showExport: true,
     getVar: (id) => {
       return context.cssvars[id];
     },
@@ -195,7 +200,17 @@ function App() {
       });
     },
   };
-  const [context, setContext] = useState(initialContext);
+  const [context, setContext] = useState(() => {
+    const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+    if (saved) {
+      const initialValue = JSON.parse(saved);
+      initialContext.cssvars = initialValue;
+      initialContext.saved = initialValue;
+    }
+
+    return initialContext;
+  });
 
   const handleTabChange = (event) => {
     event.preventDefault();
@@ -220,6 +235,17 @@ function App() {
     });
   };
 
+  const handleExport = (event) => {
+    event.preventDefault();
+    setContext((context) => {
+      return {
+        ...context,
+        showExport: !context.showExport,
+      };
+    });
+  }
+
+  // Get the computed styles of all cssvars
   useEffect(() => {
     const styles = {
       root: window.getComputedStyle(document.documentElement),
@@ -282,6 +308,12 @@ function App() {
         return;
       }
 
+      // Keep the value saved in localStorage
+      if (key in context.saved) {
+        cssvars[key] = context.saved[key];
+        return;
+      }
+
       let original;
       let scope = ":root";
 
@@ -396,10 +428,12 @@ function App() {
         cssvars,
       };
     });
-  }, []);
+  }, [context.saved]);
 
+  // Update the styling when the cssvars change
   useEffect(() => {
     const rules = {};
+    const storedVars = {}
 
     Object.values(context.cssvars).forEach((cssvar) => {
       const { id, current, start, scope, unit } = cssvar;
@@ -408,6 +442,8 @@ function App() {
         return;
       }
 
+      storedVars[id] = cssvar;
+
       const computedValue = `${current}${unit}`;
       const declaration = `--bulma-${id}: ${computedValue} !important;`;
 
@@ -429,8 +465,14 @@ function App() {
     if (styleRef) {
       styleRef.current.innerHTML = content;
     }
+
+    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(storedVars));
   }, [context.cssvars]);
 
+  // Computed values
+  const isExportAvailable = Object.values(context.cssvars).some(item => item.current != item.start);
+
+  // Styles
   const tabsStyle = {
     "--bulma-tabs-link-active-color": "var(--bulma-primary)",
   };
@@ -440,6 +482,15 @@ function App() {
     [cn.open]: context.isOpen,
   });
 
+  const controlsClass = classNames({
+    [cn.controls]: true,
+  });
+
+  const exportClass = classNames({
+    [cn.button]: true,
+    "button is-primary is-outlined": true,
+  });
+
   const buttonClass = classNames({
     [cn.button]: true,
     "button is-primary": true,
@@ -451,7 +502,7 @@ function App() {
         <style ref={styleRef} />
 
         <div className={customizerClass}>
-          <div className={cn.controls}>
+          {context.showExport ? PAGE_TO_COMPONENT.export : <> <div className={controlsClass}>
             <div className="select" style={tabsStyle}>
               <select onChange={handleTabChange} value={context.currentTab}>
                 {TAB_IDS.map((tabId) => {
@@ -482,13 +533,19 @@ function App() {
             })}
           </div>
 
-          {PAGE_TO_COMPONENT[context.currentPage]}
+          {PAGE_TO_COMPONENT[context.currentPage]}</>}
         </div>
 
+        <div className={cn.buttons}>
+          {isExportAvailable && <button className={exportClass} onClick={handleExport}>
+            Export
+          </button>}
+
           <button className={buttonClass} onClick={handleOpening}>
             {context.isOpen ? "Close Customizer" : "Open Customizer"}
           </button>
         </div>
+      </div>
     </CustomizerContext.Provider>
   );
 }

docs/_react/bulma-customizer/src/App.module.css

@@ -1,14 +1,13 @@
 .app {
+  background-color: red;
   --var-item-side-width: 12rem;
   --var-item-slider-width: 30rem;
   --var-item-padding: 1rem;
   --var-item-gap: 1rem;
   bottom: 1rem;
-  overflow: auto;
+  overflow: hidden;
   position: fixed;
   right: 1rem;
-  top: 1rem;
-  width: 33rem;
   z-index: 100;
 }
 
@@ -19,10 +18,14 @@
   transition-duration: 300ms;
   transition-property: opacity, transform;
   transform: scale(0.98) translate(2px, 2px);
-  margin-bottom: 4rem;
   opacity: 0;
   pointer-events: none;
-  min-height: 100%;
+  width: 33rem;
+  top: 1rem;
+  position: fixed;
+  bottom: 4.5rem;
+  right: 1rem;
+  overflow-y: auto;
 }
 
 .open {
@@ -38,8 +41,10 @@
   padding: 0.5rem;
 }
 
-.button {
+.buttons {
-  bottom: 1.5rem;
+  display: flex;
-  right: 1.5rem;
+  gap: 0.5rem;
+  bottom: 1rem;
+  right: 1rem;
   position: fixed;
 }

docs/_react/bulma-customizer/src/components/Export.jsx

@@ -45,8 +45,17 @@ function Export() {
     <div className={cn.main}>
       {css ? (
         <>
+          <div className={cn.body}>
+            <p className="title is-5">Export</p>
+
             <div className={cn.explanation}>
-            Insert this CSS <em>after</em> importing Bulma.
+              <p>Insert this CSS <em>after</em> importing Bulma.</p>
+
+              <div className="buttons are-small">
+                <button className="button is-primary">Copy</button>
+                <button className="button is-danger is-outlined">Reset</button>
+              </div>
+            </div>
           </div>
 
           <Highlighter PreTag="div" language="css">

docs/_react/bulma-customizer/src/components/Export.module.css

@@ -2,6 +2,20 @@
   padding: 0.5rem;
 }
 
-.explanation {
+.body {
-  padding: 0 1rem 0.5rem;
+  padding: 0.5rem 1rem ;
+}
+
+.body :global(.title) {
+  margin-bottom: 0;
+}
+
+.explanation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  div {
+    flex-wrap: nowrap;
+  }
 }

docs/assets/javascript/bulma-customizer/index.html

@@ -5,11 +5,15 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
+    <style type="text/css">
+      #bulma-customizer-app {
+      }
+    </style>
     <script type="module" crossorigin src="/index.js"></script>
     <link rel="stylesheet" crossorigin href="/index.css">
   </head>
   <body>
-    <div id="root"></div>
+    <div id="bulma-customizer-app"></div>
     <div id="scope" class="is-hidden">
       <div class="breadcrumb"></div>
       <div class="card"></div>
@@ -27,10 +31,10 @@
       <div class="icon"></div>
       <div class="notification"></div>
       <div class="progress"></div>
-      <div class="table"></div>
+      <table class="table"></table>
       <div class="tag"></div>
       <div class="title"></div>
-      <input class="input">
+      <input class="input" />
       <div class="file"></div>
       <div class="columns"></div>
       <div class="grid"></div>

docs/customizer.html

@@ -4,42 +4,6 @@ theme: customizer
 route: customizer
 ---
 
-{% include global/header.html %} {% include docs/hero.html variant="horizontal" title="The Bulma
+{% include global/header.html %} {% include docs/hero.html variant="horizontal"
-Customizer" subtitle="Easily customize Bulma with your own CSS variables." %}
+title="The Bulma Customizer" subtitle="Easily customize Bulma with your own CSS
-
+variables." %}
-<div id="root"></div>
-<div id="scope" class="is-hidden">
-  <div class="breadcrumb"></div>
-  <div class="card"></div>
-  <div class="dropdown"></div>
-  <div class="menu"></div>
-  <div class="message"></div>
-  <div class="modal"></div>
-  <div class="navbar"></div>
-  <div class="pagination"></div>
-  <div class="panel"></div>
-  <div class="tabs"></div>
-  <div class="box"></div>
-  <div class="content"></div>
-  <div class="delete"></div>
-  <div class="icon"></div>
-  <div class="notification"></div>
-  <div class="progress"></div>
-  <div class="table"></div>
-  <div class="tag"></div>
-  <div class="title"></div>
-  <input class="input">
-  <div class="file"></div>
-  <div class="columns"></div>
-  <div class="grid"></div>
-  <div class="footer"></div>
-  <div class="hero"></div>
-  <div class="media"></div>
-  <div class="section"></div>
-</div>
-
-<link
-  rel="stylesheet"
-  href="{{ site.url }}/assets/javascript/bulma-customizer/index.css"
-/>
-<script src="{{ site.url }}/assets/javascript/bulma-customizer/index.js"></script>