@redvars/peacock 3.0.1 → 3.1.1

package/{demo → assets}/tokens.css

@@ -3,7 +3,6 @@
  * ------------------------------------------- */
 
 :root {
-  --color-background: #fffbff;
   --color-black: #000000;
   --color-blue: #305cde;
   --color-blue-0: #000000;
@@ -33,7 +32,7 @@
   --color-error-95: var(--color-red-95);
   --color-error-98: var(--color-red-98);
   --color-error-100: var(--color-red-100);
-  --color-error-container: #ffdad6;
+  --color-error-container: var(--color-error-90);
   --color-green: #2e6f40;
   --color-green-0: #000000;
   --color-green-10: #00210b;
@@ -48,9 +47,12 @@
   --color-green-95: #c4ffcb;
   --color-green-98: #eaffe9;
   --color-green-100: #ffffff;
-  --color-inverse-on-surface: #fbeeec;
-  --color-inverse-primary: #aec6ff;
-  --color-inverse-surface: #362f2e;
+  --color-inverse-error: var(--color-error-80);
+  --color-inverse-on-surface: var(--color-neutral-95);
+  --color-inverse-primary: var(--color-primary-80);
+  --color-inverse-secondary: var(--color-secondary-80);
+  --color-inverse-surface: var(--color-neutral-20);
+  --color-inverse-tertiary: var(--color-tertiary-80);
   --color-neutral: #747878;
   --color-neutral-0: #000000;
   --color-neutral-4: #0b0f0f;
@@ -99,17 +101,16 @@
   --color-neutral-variant-98: #f2fbfd;
   --color-neutral-variant-99: #f6feff;
   --color-neutral-variant-100: #ffffff;
-  --color-on-background: #201a19;
-  --color-on-error: #ffffff;
-  --color-on-error-container: #410002;
-  --color-on-primary: #ffffff;
-  --color-on-primary-container: #001a42;
-  --color-on-secondary: #ffffff;
-  --color-on-secondary-container: #141b2c;
+  --color-on-error: var(--color-error-100);
+  --color-on-error-container: var(--color-error-10);
+  --color-on-primary: var(--color-primary-100);
+  --color-on-primary-container: var(--color-primary-10);
+  --color-on-secondary: var(--color-secondary-100);
+  --color-on-secondary-container: var(--color-secondary-10);
   --color-on-surface: var(--color-neutral-10);
-  --color-on-surface-variant: var(--color-neutral-30);
-  --color-on-tertiary: #ffffff;
-  --color-on-tertiary-container: #29132d;
+  --color-on-surface-variant: var(--color-neutral-variant-30);
+  --color-on-tertiary: var(--color-tertiary-100);
+  --color-on-tertiary-container: var(--color-tertiary-10);
   --color-orange: #ff7518;
   --color-orange-0: #000000;
   --color-orange-10: #341100;
@@ -126,7 +127,7 @@
   --color-orange-100: #ffffff;
   --color-outline: var(--color-neutral-variant-50);
   --color-outline-variant: var(--color-neutral-variant-80);
-  --color-primary: #4589ff;
+  --color-primary: var(--color-primary-40);
   --color-primary-0: #000000;
   --color-primary-10: #001a42;
   --color-primary-20: #002e6b;
@@ -140,7 +141,7 @@
   --color-primary-95: #edf0ff;
   --color-primary-98: #faf9ff;
   --color-primary-100: #ffffff;
-  --color-primary-container: #d8e2ff;
+  --color-primary-container: var(--color-primary-90);
   --color-purple: #e40078;
   --color-purple-0: #000000;
   --color-purple-10: #3f001c;
@@ -169,8 +170,8 @@
   --color-red-95: #ffedea;
   --color-red-98: #fff8f6;
   --color-red-100: #ffffff;
-  --color-scrim: #000000;
-  --color-secondary: #6f778b;
+  --color-scrim: var(--color-neutral-0);
+  --color-secondary: var(--color-secondary-40);
   --color-secondary-0: #000000;
   --color-secondary-10: #141b2c;
   --color-secondary-20: #293041;
@@ -184,8 +185,8 @@
   --color-secondary-95: #edf0ff;
   --color-secondary-98: #faf9ff;
   --color-secondary-100: #ffffff;
-  --color-secondary-container: #dbe2f9;
-  --color-shadow: #000000;
+  --color-secondary-container: var(--color-secondary-90);
+  --color-shadow: var(--color-neutral-0);
   --color-success: var(--color-green);
   --color-success-0: var(--color-green-0);
   --color-success-10: var(--color-green-10);
@@ -200,15 +201,15 @@
   --color-success-95: var(--color-green-95);
   --color-success-98: var(--color-green-98);
   --color-success-100: var(--color-green-100);
-  --color-surface: var(--color-neutral-98);
+  --color-surface: var(--color-neutral-99);
   --color-surface-container: var(--color-neutral-94);
   --color-surface-container-high: var(--color-neutral-92);
   --color-surface-container-highest: var(--color-neutral-90);
   --color-surface-container-low: var(--color-neutral-96);
   --color-surface-container-lowest: var(--color-neutral-100);
   --color-surface-dim: var(--color-neutral-87);
-  --color-surface-variant: var(--color-neutral-90);
-  --color-tertiary: #8b6d8d;
+  --color-surface-variant: var(--color-neutral-variant-90);
+  --color-tertiary: var(--color-tertiary-40);
   --color-tertiary-0: #000000;
   --color-tertiary-10: #29132d;
   --color-tertiary-20: #402843;
@@ -222,7 +223,7 @@
   --color-tertiary-95: #ffebfc;
   --color-tertiary-98: #fff7fa;
   --color-tertiary-100: #ffffff;
-  --color-tertiary-container: #fcd7fb;
+  --color-tertiary-container: var(--color-tertiary-90);
   --color-warning: var(--color-yellow);
   --color-warning-0: var(--color-yellow-0);
   --color-warning-10: var(--color-yellow-10);
@@ -274,7 +275,13 @@
   --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */
   --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */
   --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */
+  --global-avatar-border-radius: var(--shape-corner-full);
   --global-badge-color: var(--color-error-40);
+  --shape-corner-full: 9999px;
+  --shape-corner-large: 12px;
+  --shape-corner-medium: 8px;
+  --shape-corner-none: 0;
+  --shape-corner-small: 4px;
   --spacing-000: 0; /* No spacing (base × 0). */
   --spacing-025: 0.125rem; /* 2px - Smallest increment (base × 0.125). */
   --spacing-050: 0.25rem; /* 4px - Extra small spacing (base × 0.25). */
@@ -474,37 +481,42 @@
 }
 
 [data-theme='dark'] {
-  --color-background: #201a19;
-  --color-error-container: #93000a;
-  --color-inverse-on-surface: #362f2e;
-  --color-inverse-primary: #005ac4;
-  --color-inverse-surface: #ede0dd;
-  --color-on-background: #ede0dd;
-  --color-on-error: #690005;
-  --color-on-error-container: #ffb4ab;
-  --color-on-primary: #002e6b;
-  --color-on-primary-container: #d8e2ff;
-  --color-on-secondary: #293041;
-  --color-on-secondary-container: #dbe2f9;
-  --color-on-surface: #ede0dd;
-  --color-on-surface-variant: #d8c2be;
-  --color-on-tertiary: #402843;
-  --color-on-tertiary-container: #fcd7fb;
+  --color-error: var(--color-error-80);
+  --color-error-container: var(--color-error-30);
+  --color-inverse-error: var(--color-error-40);
+  --color-inverse-on-surface: var(--color-neutral-20);
+  --color-inverse-primary: var(--color-primary-40);
+  --color-inverse-secondary: var(--color-secondary-40);
+  --color-inverse-surface: var(--color-neutral-90);
+  --color-inverse-tertiary: var(--color-tertiary-40);
+  --color-on-error: var(--color-error-20);
+  --color-on-error-container: var(--color-error-90);
+  --color-on-primary: var(--color-primary-20);
+  --color-on-primary-container: var(--color-primary-90);
+  --color-on-secondary: var(--color-secondary-20);
+  --color-on-secondary-container: var(--color-secondary-90);
+  --color-on-surface: var(--color-neutral-90);
+  --color-on-surface-variant: var(--color-neutral-variant-80);
+  --color-on-tertiary: var(--color-tertiary-20);
+  --color-on-tertiary-container: var(--color-tertiary-90);
   --color-outline: var(--color-neutral-variant-60);
   --color-outline-variant: var(--color-neutral-variant-30);
-  --color-primary-container: #004396;
-  --color-scrim: #000000;
-  --color-secondary-container: #3f4759;
-  --color-shadow: #000000;
-  --color-surface: #201a19;
+  --color-primary: var(--color-primary-80);
+  --color-primary-container: var(--color-primary-30);
+  --color-scrim: var(--color-neutral-0);
+  --color-secondary: var(--color-secondary-80);
+  --color-secondary-container: var(--color-secondary-30);
+  --color-shadow: var(--color-neutral-0);
+  --color-surface: var(--color-neutral-10);
   --color-surface-container: var(--color-neutral-12);
   --color-surface-container-high: var(--color-neutral-17);
   --color-surface-container-highest: var(--color-neutral-22);
   --color-surface-container-low: var(--color-neutral-10);
   --color-surface-container-lowest: var(--color-neutral-4);
   --color-surface-dim: var(--color-neutral-6);
-  --color-surface-variant: #534341;
-  --color-tertiary-container: #583e5a;
+  --color-surface-variant: var(--color-neutral-variant-30);
+  --color-tertiary: var(--color-tertiary-80);
+  --color-tertiary-container: var(--color-tertiary-30);
   --global-badge-color: var(--color-error-80);
 }
 

package/copyDesignFiles.js

@@ -0,0 +1,11 @@
+import fs from 'fs';
+
+fs.cpSync('../design-tokens/dist/', './assets', {
+  recursive: true,
+  force: true,
+});
+
+fs.cpSync('../design-tokens/dist/', './dist/assets/styles/', {
+  recursive: true,
+  force: true,
+});

package/custom-elements-manifest.config.mjs

@@ -1,16 +1,4 @@
-import { lazyLoaderPlugin } from '@wc-toolkit/lazy-loader';
-
-const formatComponentName = str => {
-  return (
-    str
-      // 1. Remove the word "Component" if it exists at the end
-      .replace(/Component$/, '')
-      // 2. Find uppercase letters and replace with "-lowercase"
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      // 3. Convert the whole string to lowercase
-      .toLowerCase()
-  );
-};
+import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
 
 export default {
   /** Globs to analyze */
@@ -21,14 +9,14 @@ export default {
   /** Enable special handling for litelement */
   litelement: true,
 
-  /*plugins: [
-    lazyLoaderPlugin({
-      importPathTemplate: (name, tagName) => {
-        console.log(`./src/${formatComponentName(name)}/${tagName}.js`);
-        return `./src/${formatComponentName(name)}/${tagName}.js`;
-      },
-      outdir: 'dist',
-      eagerLoad: ['p-icon'],
+  packageJson: true,
+
+  plugins: [
+    customElementJetBrainsPlugin({
+      // Optional configuration options
+      outdir: 'dist', // Output directory for web-types.json
+      fileName: 'web-types.json', // Output file name
+      packageJson: true, // Automatically update the "web-types" property in package.json
     }),
-  ],*/
+  ],
 };

package/custom-elements.md

@@ -1,88 +1,3 @@
-# `src/index.ts`:
-
-## Exports
-
-| Kind | Name     | Declaration | Module             | Package |
-| ---- | -------- | ----------- | ------------------ | ------- |
-| `js` | `Icon`   | Icon        | ./icon/icon.js     |         |
-| `js` | `Avatar` | Avatar      | ./avatar/avatar.js |         |
-
-# `src/LoaderUtils.ts`:
-
-## class: `LoaderUtils`
-
-### Static Methods
-
-| Name                | Privacy | Description | Parameters                                 | Return | Inherited From |
-| ------------------- | ------- | ----------- | ------------------------------------------ | ------ | -------------- |
-| `registerComponent` |         |             | `tagName: string, CustomElementClass: any` |        |                |
-
-### Methods
-
-| Name                  | Privacy | Description | Parameters                  | Return          | Inherited From |
-| --------------------- | ------- | ----------- | --------------------------- | --------------- | -------------- |
-| `start`               |         |             |                             |                 |                |
-| `eagerLoadComponents` |         |             |                             |                 |                |
-| `getFullTagName`      |         |             | `name: string`              |                 |                |
-| `registerAsync`       |         |             | `tagName: string`           | `Promise<void>` |                |
-| `load`                |         |             | `root: Element \| Document` | `Promise<void>` |                |
-| `lazyLoadComponents`  |         |             | `root: any`                 |                 |                |
-
-<hr/>
-
-## Variables
-
-| Name                 | Description | Type |
-| -------------------- | ----------- | ---- |
-| `CustomElementClass` |             |      |
-
-<hr/>
-
-## Exports
-
-| Kind                        | Name           | Declaration        | Module             | Package |
-| --------------------------- | -------------- | ------------------ | ------------------ | ------- |
-| `js`                        | `LoaderConfig` | LoaderConfig       | src/LoaderUtils.ts |         |
-| `js`                        | `LoaderUtils`  | LoaderUtils        | src/LoaderUtils.ts |         |
-| `custom-element-definition` | `tagName`      | CustomElementClass | src/LoaderUtils.ts |         |
-| `custom-element-definition` | `tagName`      | CustomElementClass | src/LoaderUtils.ts |         |
-
-# `src/utils.ts`:
-
-## Functions
-
-| Name               | Description | Parameters       | Return |
-| ------------------ | ----------- | ---------------- | ------ |
-| `createCacheFetch` |             | `name: string`   |        |
-| `sanitizeSvg`      |             | `rawSvg: string` |        |
-| `getTypography`    |             | `name: string`   |        |
-
-<hr/>
-
-## Exports
-
-| Kind | Name               | Declaration      | Module       | Package |
-| ---- | ------------------ | ---------------- | ------------ | ------- |
-| `js` | `createCacheFetch` | createCacheFetch | src/utils.ts |         |
-| `js` | `sanitizeSvg`      | sanitizeSvg      | src/utils.ts |         |
-| `js` | `getTypography`    | getTypography    | src/utils.ts |         |
-
-# `src/avatar/avatar.css.ts`:
-
-## Variables
-
-| Name     | Description | Type |
-| -------- | ----------- | ---- |
-| `styles` |             |      |
-
-<hr/>
-
-## Exports
-
-| Kind | Name     | Declaration | Module                   | Package |
-| ---- | -------- | ----------- | ------------------------ | ------- |
-| `js` | `styles` | styles      | src/avatar/avatar.css.ts |         |
-
 # `src/avatar/avatar.ts`:
 
 ## class: `Avatar`
@@ -107,13 +22,6 @@
 | `name` | name  |                |
 | `src`  | src   |                |
 
-### CSS Properties
-
-| Name           | Default | Description                     |
-| -------------- | ------- | ------------------------------- |
-| `--icon-color` |         | Controls the color of the icon. |
-| `--icon-size`  |         | Controls the size of the icon.  |
-
 <hr/>
 
 ## Exports
@@ -122,47 +30,78 @@
 | ---- | -------- | ----------- | -------------------- | ------- |
 | `js` | `Avatar` | Avatar      | src/avatar/avatar.ts |         |
 
-# `src/avatar/index.ts`:
+# `src/avatar/p-avatar.ts`:
 
-## Exports
+## class: `PAvatar`, `p-avatar`
 
-| Kind | Name     | Declaration | Module      | Package |
-| ---- | -------- | ----------- | ----------- | ------- |
-| `js` | `Avatar` | Avatar      | ./avatar.js |         |
+### Superclass
 
-# `src/icon/datasource.ts`:
+| Name     | Module                | Package |
+| -------- | --------------------- | ------- |
+| `Avatar` | /src/avatar/avatar.js |         |
 
-## Functions
+### Fields
+
+| Name   | Privacy | Type                  | Default | Description | Inherited From |
+| ------ | ------- | --------------------- | ------- | ----------- | -------------- |
+| `name` |         | `string`              | `''`    |             | Avatar         |
+| `src`  |         | `string \| undefined` |         |             | Avatar         |
+
+### Attributes
+
+| Name   | Field | Inherited From |
+| ------ | ----- | -------------- |
+| `name` | name  | Avatar         |
+| `src`  | src   | Avatar         |
+
+### CSS Properties
 
-| Name        | Description | Parameters                       | Return |
-| ----------- | ----------- | -------------------------------- | ------ |
-| `fetchSVG`  |             | `url: string`                    |        |
-| `fetchIcon` |             | `name: string, provider: string` |        |
+| Name                        | Default | Description                       |
+| --------------------------- | ------- | --------------------------------- |
+| `--avatar-background-color` |         | Controls the color of the avatar. |
+| `--avatar-size`             |         | Controls the size of the avatar.  |
 
 <hr/>
 
 ## Exports
 
-| Kind | Name        | Declaration | Module                 | Package |
-| ---- | ----------- | ----------- | ---------------------- | ------- |
-| `js` | `fetchSVG`  | fetchSVG    | src/icon/datasource.ts |         |
-| `js` | `fetchIcon` | fetchIcon   | src/icon/datasource.ts |         |
+| Kind                        | Name       | Declaration | Module                 | Package |
+| --------------------------- | ---------- | ----------- | ---------------------- | ------- |
+| `js`                        | `PAvatar`  | PAvatar     | src/avatar/p-avatar.ts |         |
+| `custom-element-definition` | `p-avatar` | PAvatar     | src/avatar/p-avatar.ts |         |
+
+# `src/badge/badge.ts`:
+
+## class: `Badge`
+
+### Superclass
 
-# `src/icon/icon.css.ts`:
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
 
-## Variables
+### Fields
 
-| Name     | Description | Type |
-| -------- | ----------- | ---- |
-| `styles` |             |      |
+| Name             | Privacy | Type                  | Default | Description | Inherited From |
+| ---------------- | ------- | --------------------- | ------- | ----------- | -------------- |
+| `name`           |         | `string`              | `''`    |             |                |
+| `src`            |         | `string \| undefined` |         |             |                |
+| `slotHasContent` |         | `boolean`             | `false` |             |                |
+
+### Attributes
+
+| Name   | Field | Inherited From |
+| ------ | ----- | -------------- |
+| `name` | name  |                |
+| `src`  | src   |                |
 
 <hr/>
 
 ## Exports
 
-| Kind | Name     | Declaration | Module               | Package |
-| ---- | -------- | ----------- | -------------------- | ------- |
-| `js` | `styles` | styles      | src/icon/icon.css.ts |         |
+| Kind | Name    | Declaration | Module             | Package |
+| ---- | ------- | ----------- | ------------------ | ------- |
+| `js` | `Badge` | Badge       | src/badge/badge.ts |         |
 
 # `src/icon/icon.ts`:
 
@@ -178,7 +117,7 @@
 
 | Name       | Privacy | Type                                          | Default              | Description | Inherited From |
 | ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
-| `name`     |         | `string \| undefined`                         | `'home'`             |             |                |
+| `name`     |         | `string \| undefined`                         |                      |             |                |
 | `src`      |         | `string \| undefined`                         |                      |             |                |
 | `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             |                |
 
@@ -196,13 +135,6 @@
 | `src`      | src      |                |
 | `provider` | provider |                |
 
-### CSS Properties
-
-| Name           | Default | Description                                       |
-| -------------- | ------- | ------------------------------------------------- |
-| `--icon-color` |         | Controls the color of the icon.                   |
-| `--icon-size`  | `1rem`  | Controls the size of the icon. Defaults to "1rem" |
-
 <hr/>
 
 ## Exports
@@ -211,17 +143,9 @@
 | ---- | ------ | ----------- | ---------------- | ------- |
 | `js` | `Icon` | Icon        | src/icon/icon.ts |         |
 
-# `src/icon/index.ts`:
-
-## Exports
-
-| Kind | Name   | Declaration | Module    | Package |
-| ---- | ------ | ----------- | --------- | ------- |
-| `js` | `Icon` | Icon        | ./icon.js |         |
-
 # `src/icon/p-icon.ts`:
 
-## class: `IconComponent`, `p-icon`
+## class: `PIcon`, `p-icon`
 
 ### Superclass
 
@@ -233,7 +157,7 @@
 
 | Name       | Privacy | Type                                          | Default              | Description | Inherited From |
 | ---------- | ------- | --------------------------------------------- | -------------------- | ----------- | -------------- |
-| `name`     |         | `string \| undefined`                         | `'home'`             |             | Icon           |
+| `name`     |         | `string \| undefined`                         |                      |             | Icon           |
 | `src`      |         | `string \| undefined`                         |                      |             | Icon           |
 | `provider` |         | `'material-symbols' \| 'carbon' \| undefined` | `'material-symbols'` |             | Icon           |
 
@@ -262,7 +186,7 @@
 
 ## Exports
 
-| Kind                        | Name            | Declaration   | Module             | Package |
-| --------------------------- | --------------- | ------------- | ------------------ | ------- |
-| `js`                        | `IconComponent` | IconComponent | src/icon/p-icon.ts |         |
-| `custom-element-definition` | `p-icon`        | IconComponent | src/icon/p-icon.ts |         |
+| Kind                        | Name     | Declaration | Module             | Package |
+| --------------------------- | -------- | ----------- | ------------------ | ------- |
+| `js`                        | `PIcon`  | PIcon       | src/icon/p-icon.ts |         |
+| `custom-element-definition` | `p-icon` | PIcon       | src/icon/p-icon.ts |         |

package/demo/index.html

@@ -3,7 +3,13 @@
 <head>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/demo/tokens.css' />
+
+  <!-- Default font : Noto Sans and Noto Sans Mono -->
+  <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=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+
   <style>
     body {
       background: #fafafa;
@@ -13,17 +19,24 @@
 </head>
 <body>
 
-<a href='/src/icon/demo/index.html'>icon</a>
-
-<p-icon provider='carbon' name='logo--github'></p-icon>
+<div id='tags'></div>
 
-<br/>
 
-<a href='/src/avatar/demo/index.html'>avatar</a>
-<p-avatar name='Test'></p-avatar>
+<script type="module">
+  const res = await fetch('/dist/custom-elements.json');
+  const customElements = await res.json();
+  console.log(customElements)
+  const customTags = customElements.modules.filter(module =>
+    module.declarations.find(d => d.tagName),
+  );
 
+  console.log(customTags);
 
+  const $tags = document.querySelector('#tags');
+  customTags.forEach((tag) => {
+    $tags.innerHTML += `<p><a href='/src/${tag.declarations[0].tagName.split('-')[1]}/demo/index.html'>${tag.declarations[0].tagName}</p></a>`;
+  })
 
-<script type='module' src='/dist/src/peacock-loader.js'></script>
+</script>
 </body>
 </html>

package/demo/int.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/demo/tokens.css' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
   <style>
     body {
       background: #fafafa;