refactor: clean variables

materializecss · May 27, 2024 · 0accd10 · 0accd10
1 parent 0d49e72
commit 0accd10
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 157 deletions.
diff --git a/demo-page.html b/demo-page.html
@@ -30,7 +30,6 @@ <h1>Test</h1>
         asperiores nihil similique minima voluptas.
       </p>
       <button onclick="toggleTheme()">Toggle Theme</button>
-      <br />
       <p class="error-text">This is an Error</p>
 
       <p>

diff --git a/getting-started.html b/getting-started.html
@@ -28,8 +28,9 @@ <h5>Materialize</h5>
                     are unfamiliar with Sass.
                   </p>
                   <a
+                    tabindex="0"
                     id="download-source"
-                    class="btn waves-effect waves-light icon-right"
+                    class="btn filled waves-effect waves-light icon-right"
                     href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-v2.0.3-alpha.zip"
                   >
                     Materialize<i class="material-icons">file_download</i>
@@ -42,8 +43,9 @@ <h5>Sass</h5>
                     you choose this option.
                   </p>
                   <a
+                    tabindex="0"
                     id="download-sass"
-                    class="btn waves-effect waves-light icon-right"
+                    class="btn outlined waves-effect waves-light icon-right"
                     href="https://github.com/materializecss/materialize/releases/download/2.0.3-alpha/materialize-src-v2.0.3-alpha.zip"
                   >
                     Source<i class="material-icons right">file_download</i>
@@ -79,32 +81,23 @@ <h5>CDN</h5>
                     <a href="https://www.jsdelivr.com/package/npm/@materializecss/materialize">jsDelivr</a>.
                   </p>
                   <pre style="padding-top: 0px">
-              <span class="copyMessage">Copied!</span>
-              <i class="material-icons copyButton">content_copy</i>
-              <code class="language-markup copiedText"><xmp>
-    <!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css">
-    <!-- Compiled and minified JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script>
-            </xmp></code></pre>
+<span class="copyMessage">Copied!</span>
+<i class="material-icons copyButton">content_copy</i>
+<code class="language-markup copiedText"><xmp><!-- Compiled and minified CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css">
+<!-- Compiled and minified JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script>
+</xmp></code></pre>
                 </div>
                 <div class="col s12">
                   <h5>NPM</h5>
                   <p>You can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.</p>
-                  <pre><code class="language-bash">
-    npm install @materializecss/materialize
-            </code></pre>
+                  <pre><code class="language-bash">npm install @materializecss/materialize</code></pre>
                 </div>
                 <div class="col s12">
                   <h5>Yarn</h5>
-                  <p>
-                    Since
-                    <strong><a href="https://bower.io/blog/2017/how-to-migrate-away-from-bower/">Bower is deprecated</a></strong
-                    >, you can get the latest release using yarn as your favorite package manager.
-                  </p>
-                  <pre><code class="language-bash">
-    yarn add @materializecss/materialize
-            </code></pre>
+                  <p>Or you can get the latest release using yarn as your favorite package manager.</p>
+                  <pre><code class="language-bash">yarn add @materializecss/materialize</code></pre>
                 </div>
               </div>
             </div>
@@ -142,25 +135,22 @@ <h5>HTML Setup</h5>
                 <pre style="padding-top: 0px">
 <span class="copyMessage">Copied!</span>
 <i class="material-icons copyButton">content_copy</i>
-<code class="language-markup copiedText"><xmp>
-  <!DOCTYPE html>
-  <html>
-    <head>
-      <!--Import Google Icon Font-->
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      <!--Import materialize.css-->
-      <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
-      <!--Let browser know website is optimized for mobile-->
-      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    </head>
-    <body>
-      <!--JavaScript at end of body for optimized loading-->
-      <script type="text/javascript" src="js/materialize.min.js"></script>
-    </body>
-  </html>
-</xmp>
-</code>
- </pre>
+<code class="language-markup copiedText"><xmp><!DOCTYPE html>
+<html>
+  <head>
+    <!--Import Google Icon Font-->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!--Import materialize.css-->
+    <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
+    <!--Let browser know website is optimized for mobile-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <!--JavaScript at end of body for optimized loading-->
+    <script type="text/javascript" src="js/materialize.min.js"></script>
+  </body>
+</html>
+</xmp></code></pre>
               </div>
             </div>
 
@@ -181,10 +171,10 @@ <h5>Starter Template</h5>
                     <img class="z-depth-1" style="width: 100%" src="images/starter-template.gif" />
                   </a>
                   <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features.</p>
-                  <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template/preview.html">
+                  <a tabindex="0" class="btn filled waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template/preview.html">
                     Demo <i class="material-icons">search</i>
                   </a>
-                  <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template.zip">
+                  <a tabindex="0" class="btn outlined waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/starter-template.zip">
                     Download<i class="material-icons">file_download</i>
                   </a>
                 </div>
@@ -195,35 +185,16 @@ <h5>Parallax Template</h5>
                     <img class="z-depth-1" style="width: 100%" src="images/parallax-template.jpg" />
                   </a>
                   <p>This is the simplest starter page with a Header, Call-to-Action, and Icon Features.</p>
-                  <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template/preview.html">
+                  <a tabindex="0" class="btn filled waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template/preview.html">
                     Demo<i class="material-icons">search</i>
                   </a>
-                  <a class="btn waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template.zip">
+                  <a tabindex="0" class="btn outlined waves-effect waves-light icon-right" style="margin-top: 8px" href="templates/parallax-template.zip">
                     Download<i class="material-icons">file_download</i>
                   </a>
                 </div>
               </div>
             </div>
 
-            <!-- Third Party Options -->
-            <div id="third-party-options" class="row scrollspy">
-              <div class="col s12">
-                <h3 class="header">Third-party Options</h3>
-                <p class="caption">
-                  There are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date.
-                </p>
-                <h5>Ruby Gem</h5>
-                <p>
-                  See
-                  <a href="https://github.com/mkhairi/materialize-sass">here</a>
-                  for documentation on this gem.
-                </p>
-                <pre><code class="language-bash">
-  gem 'materialize-sass'
-          </code></pre>
-              </div>
-            </div>
-
             <div id="sass" class="row scrollspy">
               <div class="col s12">
                 <h3 class="header">Sass Setup</h3>
@@ -234,10 +205,8 @@ <h5>Compiling Sass</h5>
                   Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you
                   can link this newly outputted file in your HTML page.
                 </p>
-
                 <pre><code class="language-markup directory-markup">
-<xmp>
-MyWebsite/
+<xmp>MyWebsite/
 |--css/
 |  |--materialize.css <-- compiled from scss/materialize.scss
 |
@@ -262,9 +231,6 @@ <h5>Compiling Sass</h5>
                   <li><a href="#download">Download</a></li>
                   <li><a href="#setup">Setup</a></li>
                   <li><a href="#templates">Templates</a></li>
-                  <li>
-                    <a href="#third-party-options">Third-party Options</a>
-                  </li>
                   <li><a href="#sass">Sass</a></li>
                 </ul>
               </div>

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
   <body>
     {{> navbar }}
     <main>
-      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--background-color))">
+      <div id="index-banner" style="position: relative; background-color: color-mix(in srgb, var(--primary-color) 30%, var(--md-sys-color-background))">
         <!-- Background -->
         <div style="position: absolute; top: 0; height: 100%; overflow: hidden; width: 100%; z-index: 0">
           <div class="gradient"></div>
@@ -22,14 +22,16 @@ <h1 class="header mb-0">Materialize</h1>
             </div>
             <!-- Call to Action -->
             <div style="justify-content: center; display: flex; gap: 0.5rem; flex-wrap: wrap">
-              <a class="btn filled rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
-              <a class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank"> View on GitHub</a>
+              <a tabindex="0" class="btn filled rounded btn-large z-depth-1 waves-effect waves-light" href="getting-started.html" id="download-button">Get started</a>
+              <a tabindex="0" class="btn outlined rounded btn-large waves-effect waves-light" href="https://github.com/materializecss/materialize" target="_blank">
+                View on GitHub</a
+              >
             </div>
           </div>
         </div>
       </div>
 
-      <div class="container" style="background-color: var(--background-color)">
+      <div class="container" style="background-color: var(--md-sys-color-background)">
         <!-- Ads -->
         <div class="row center">
           <div class="s12 m4 offset-m2">
@@ -136,7 +138,7 @@ <h3>Materialize is free and open-source. This is made possible by our awesome sp
                 </div>
               </div>
               <div class="center">
-                <a class="btn" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
+                <a tabindex="0" class="btn tonal" target="_blank" href="https://opencollective.com/materialize">Become a sponsor</a>
               </div>
               <p class="center">Materialize development is provided by an international team. Thanks for supporting us! ❤️</p>
             </div>

diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "glob": "^10.3.3",
     "highlight.js": "^11.9.0",
     "material-icons": "^1.13.8",
-    "prismjs": "^1.29.0",
     "vite-plugin-handlebars": "^1.6.0"
   },
   "devDependencies": {

diff --git a/partials/footer.html b/partials/footer.html
@@ -9,7 +9,7 @@ <h5>Help Materialize Grow</h5>
               We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by opening issues or contributing
               on GitHub.
             </p>
-            <a class="btn waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
+            <a tabindex="0" class="btn text waves-effect waves-light" target="_blank" href="https://github.com/materializecss/materialize">Contribute</a>
           </div>
 
           <div class="s12 m6 l4">
@@ -18,7 +18,7 @@ <h5>Join the Discussion</h5>
               We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else
               you can think of.
             </p>
-            <a class="btn waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
+            <a tabindex="0" class="btn text waves-effect waves-light" href="https://gitter.im/materializecss/materialize" target="_blank">Chat</a>
           </div>
 
           <div class="s12 m6 l4" style="overflow: hidden">

diff --git a/partials/navbar.html b/partials/navbar.html
@@ -67,6 +67,7 @@
     </li>
   </ul>
 </header>
+
 <div id="palette-selector" class="modal">
   <div class="modal-content">
     <h4>Color Scheme</h4>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.ts b/src/main.ts
@@ -1,10 +1,8 @@
 import { config } from "../config.materialize";
 import { M } from "@materializecss/materialize";
 import "./style.scss";
-//import Prism from "prismjs";
-//import "prismjs/themes/prism.min.css";
 import { argbFromHex, themeFromSourceColor } from "@material/material-color-utilities";
-import { Themes } from "./themes";
+//import { Themes } from "./themes";
 import { autocompleteDemoData } from "./data-autocomplete";
 import hljs from "highlight.js";
 
@@ -36,7 +34,7 @@ function is_touch_device() {
 globalThis.M = M;
 
 document.addEventListener("DOMContentLoaded", async function () {
-  const themes = new Themes(document);
+  //const themes = new Themes(document);
 
   // CSS > Colors
   document.querySelectorAll(".dynamic-color .col > div").forEach((el) => {
@@ -165,6 +163,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     (document.querySelector("#nav-mobile") as HTMLElement).style.overflow = "auto";
   }
 
+  /*
   themes.applyThemeProperties();
   const themeSwitch = document.querySelector("#theme-switch");
 
@@ -193,6 +192,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   toggleColorsButton?.addEventListener("change", () => {
     themes.setThemePrimaryColor(toggleColorsButton.value);
   });
+  */
 
   // Copy Button
   const copyBtn = Array.prototype.slice.call(document.querySelectorAll(".copyButton"));
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,7 +30,6 @@ <h1>Test</h1> @@
             asperiores nihil similique minima voluptas.
           </p>
           <button onclick="toggleTheme()">Toggle Theme</button>
-          <br />
           <p class="error-text">This is an Error</p>
           <p>
@@ Expand Down @@