fix: Includes the font face by default with the themes files

- Fixes issue with the input and textarea ids - Removes the .json files of the icon libraries - Fixes auto-reload failure on dev mode - Fixes accessibility issue on breadcrumb-item
circular-o · Jul 14, 2023 · 339ad40 · 339ad40
1 parent d26986a
commit 339ad40
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 18 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -28,13 +28,6 @@
     />
     <meta name="twitter:image" content="assets/images/twitter-card.png" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
-      rel="stylesheet"
-    />
-
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/pure.css" />
     <link rel="stylesheet" href="assets/styles/docs.css" />
     <link rel="stylesheet" href="assets/plugins/code-block/code-block.css" />

diff --git a/scripts/build.js b/scripts/build.js
@@ -151,15 +151,17 @@ fs.mkdirSync(outdir, { recursive: true });
 
           execSync(`node scripts/make-metadata.js --outdir "${outdir}"`, { stdio: 'inherit' });
         })
-        .finally(() => {
+        .finally(async () => {
           deleteSync(docsDir);
-          copy(outdir, docsDir, {
+          await copy(outdir, docsDir, {
             overwrite: true
           });
 
           if (copydir) {
             deleteSync(copydir);
-            copy(outdir, copydir);
+            await copy(outdir, copydir, {
+              overwrite: true
+            });
           }
 
           bs.reload();

diff --git a/scripts/make-icons.js b/scripts/make-icons.js
@@ -113,7 +113,7 @@ const iconDir = path.join(outdir, '/assets/icons');
         })
       );
 
-      await writeFile(path.join(iconDir, `${bootstrap}.json`), JSON.stringify(metadata, null, 2), 'utf8');
+      // await writeFile(path.join(iconDir, `${bootstrap}.json`), JSON.stringify(metadata, null, 2), 'utf8');
       iconsToJson = [...iconsToJson, ...metadata];
       console.log(chalk.cyan(`Successfully processed ${bootstrap}! ${numIcons} icons ✨\n`));
     } catch (err) {
@@ -213,7 +213,7 @@ const iconDir = path.join(outdir, '/assets/icons');
         variants: iconVariantsMap[icon.name] || []
       }));
 
-      await writeFile(path.join(iconDir, `${material}.json`), JSON.stringify(metadata, null, 2), 'utf8');
+      // await writeFile(path.join(iconDir, `${material}.json`), JSON.stringify(metadata, null, 2), 'utf8');
       iconsToJson = [...iconsToJson, ...metadata];
       console.log(chalk.cyan(`Successfully processed ${material}! ${metadata.length} icons ✨\n`));
     } catch (err) {

diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -14,7 +14,7 @@ export default css`
     font-family: var(--o-font-sans);
     font-size: var(--o-font-size-small);
     font-weight: var(--o-font-weight-semibold);
-    color: var(--o-color-neutral-600);
+    color: var(--o-color-neutral-700);
     line-height: var(--o-line-height-normal);
     white-space: nowrap;
   }

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -14,6 +14,8 @@ import styles from './input.styles';
 import type { CSSResultGroup } from 'lit';
 import type { LibraryBaseFormControl } from '../../internal/library-base-element';
 
+let libraryInputCounterForIds = 0;
+
 /**
  * @summary Inputs collect data from the user.
  * @documentation https://circular-o.github.io/circular/#/components/input
@@ -58,6 +60,8 @@ export default class OInput extends LibraryBaseElement implements LibraryBaseFor
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly localize = new LocalizeController(this);
 
+  private readonly inputId = `o-input-${libraryInputCounterForIds++}`;
+
   @query('.input__control') input: HTMLInputElement;
 
   @state() private hasFocus = false;
@@ -425,7 +429,7 @@ export default class OInput extends LibraryBaseElement implements LibraryBaseFor
         <label
           part="form-control-label"
           class="form-control__label"
-          for="input"
+          for=${this.inputId}
           aria-hidden=${hasLabel ? 'false' : 'true'}
         >
           <slot name="label">${this.label}</slot>
@@ -455,7 +459,7 @@ export default class OInput extends LibraryBaseElement implements LibraryBaseFor
             <slot name="prefix" part="prefix" class="input__prefix"></slot>
             <input
               part="input"
-              id="input"
+              id=${this.inputId}
               class="input__control"
               type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
@@ -471,7 +475,7 @@ export default class OInput extends LibraryBaseElement implements LibraryBaseFor
               step=${ifDefined(this.step as number)}
               .value=${live(this.value)}
               autocapitalize=${ifDefined(this.autocapitalize)}
-              autocomplete=${ifDefined(this.autocomplete)}
+              autocomplete=${this.autocomplete ? 'on' : 'off'}
               autocorrect=${ifDefined(this.autocorrect)}
               ?autofocus=${this.autofocus}
               spellcheck=${this.spellcheck}

diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
@@ -12,6 +12,8 @@ import styles from './textarea.styles';
 import type { CSSResultGroup } from 'lit';
 import type { LibraryBaseFormControl } from '../../internal/library-base-element';
 
+let libraryTextareaCounterForIds = 0;
+
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
  * @documentation https://circular-o.github.io/circular/#/components/textarea
@@ -44,6 +46,8 @@ export default class OTextarea extends LibraryBaseElement implements LibraryBase
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private resizeObserver: ResizeObserver;
 
+  private readonly textareaId = `o-textarea-${libraryTextareaCounterForIds++}`;
+
   @query('.textarea__control') input: HTMLTextAreaElement;
 
   @state() private hasFocus = false;
@@ -318,7 +322,7 @@ export default class OTextarea extends LibraryBaseElement implements LibraryBase
         <label
           part="form-control-label"
           class="form-control__label"
-          for="input"
+          for=${this.textareaId}
           aria-hidden=${hasLabel ? 'false' : 'true'}
         >
           <slot name="label">${this.label}</slot>
@@ -344,7 +348,7 @@ export default class OTextarea extends LibraryBaseElement implements LibraryBase
           >
             <textarea
               part="textarea"
-              id="input"
+              id=${this.textareaId}
               class="textarea__control"
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}

diff --git a/src/themes/_fonts.css b/src/themes/_fonts.css
@@ -0,0 +1,146 @@
+/* https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap */
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z11lFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1JlFd2JQEl8qw.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1xlFd2JQEk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/themes/dark.css b/src/themes/dark.css
@@ -688,3 +688,4 @@
 }
 
 /* _utility.css */
+/* _fonts.css */
diff --git a/src/themes/light.css b/src/themes/light.css
@@ -688,3 +688,4 @@
 }
 
 /* _utility.css */
+/* _fonts.css */
Original file line number	Diff line number	Diff line change
Expand Up		@@ -688,3 +688,4 @@
		}

		/* _utility.css */
		/* _fonts.css */