Recommended Styles

Author: KTibow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "3.5.1",
+  "version": "3.6.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -37,6 +37,9 @@
     },
     "./misc/styles.css": {
       "import": "./package/misc/styles.css"
+    },
+    "./misc/recommended-styles.css": {
+      "import": "./package/misc/recommended-styles.css"
     }
   },
   "devDependencies": {

src/app.css

@@ -1,4 +1,5 @@
 @import url("$lib/misc/styles.css");
+@import url("$lib/misc/recommended-styles.css");
 
 body {
   margin: 0;

src/lib/forms/TextField.svelte

@@ -28,7 +28,7 @@
   {...extraWrapperOptions}
 >
   <input
-    class="m3-font-body-large"
+    class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
     on:keydown={(e) => e.key == "Enter" && dispatch("enter")}

src/lib/forms/TextFieldMultiline.svelte

@@ -39,7 +39,7 @@
   {...extraWrapperOptions}
 >
   <textarea
-    class="m3-font-body-large"
+    class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
     {id}

src/lib/forms/TextFieldOutlined.svelte

@@ -28,7 +28,7 @@
   {...extraWrapperOptions}
 >
   <input
-    class="m3-font-body-large"
+    class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
     {id}

src/lib/forms/TextFieldOutlinedMultiline.svelte

@@ -39,7 +39,7 @@
   {...extraWrapperOptions}
 >
   <textarea
-    class="m3-font-body-large"
+    class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
     {id}

src/lib/misc/recommended-styles.css

@@ -0,0 +1,39 @@
+:root {
+  --m3-util-refocus: refocus-one 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
+}
+:focus-visible:not(.focus-inset, .focus-none) {
+  animation: var(--m3-util-refocus);
+  outline: none;
+}
+:focus-visible:is(.focus-inset):not(.focus-none) {
+  animation: refocus-simple 0.3s forwards cubic-bezier(0.05, 0.7, 0.1, 1);
+  outline: none;
+}
+:focus-visible.focus-none {
+  outline: none;
+}
+@keyframes refocus-one {
+  0% {
+    box-shadow: 0 0 0 0px rgb(var(--m3-scheme-primary));
+  }
+  100% {
+    box-shadow: 0 0 0 3px rgb(var(--m3-scheme-primary));
+  }
+}
+@keyframes refocus-simple {
+  0% {
+    box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-primary));
+  }
+  100% {
+    box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-primary));
+  }
+}
+
+::placeholder {
+  color: rgb(var(--m3-scheme-on-background) / 0.5);
+  opacity: 1;
+}
+::selection {
+  background-color: rgb(var(--m3-scheme-tertiary));
+  color: rgb(var(--m3-scheme-on-tertiary));
+}

src/routes/theme/SchemeShowcase.svelte

@@ -23,6 +23,7 @@
 
   const copyUsage = () =>
     navigator.clipboard.writeText(`@import url("m3-svelte/misc/styles.css");
+@import url("m3-svelte/misc/recommended-styles.css");
 ${$styling}`);
 
   onMount(() => {

src/routes/theme/TransformChooser.svelte

@@ -99,7 +99,7 @@
     transition: all 200ms;
   }
   input:focus-visible + label {
-    outline: 2px solid rgb(var(--m3-scheme-primary));
+    animation: var(--m3-util-refocus);
   }
   input:checked + label {
     border-radius: 1rem;