@redvars/peacock 3.2.7 → 3.2.9

package/scss/styles.scss

@@ -1,4 +1,60 @@
 @use 'tokens.css';
 @use '../src/text/text.css-component.scss';
 @use '../src/link/link.css-component.scss';
-@use '../src/popover/tooltip.css-component.scss';
+@use '../src/popover/tooltip.css-component.scss';
+
+.surface, .surface-container-high, .surface-container-highest, .surface-container, .surface-container-low, .surface-container-lowest, .surface-dim {
+  color: var(--color-on-surface);
+  --icon-color: var(--color-on-surface);
+}
+
+.surface {
+  background: var(--color-surface);
+}
+
+.surface-container-high {
+  background: var(--color-surface-container-high);
+}
+
+.surface-container-highest {
+  background: var(--color-surface-container-highest);
+}
+
+.surface-container {
+  background: var(--color-surface-container);
+}
+
+.surface-container-low {
+  background: var(--color-surface-container-low);
+}
+
+.surface-container-lowest {
+  background: var(--color-surface-container-lowest);
+}
+
+.surface-dim {
+  background: var(--color-surface-dim);
+}
+
+.surface-variant {
+  background: var(--color-surface-variant);
+  color: var(--color-on-surface-variant);
+  --icon-color: var(--color-on-surface-variant);
+}
+
+::selection {
+  color: var(--color-surface);
+  background: var(--color-primary);
+}
+
+/* width */
+::-webkit-scrollbar {
+    background-color: transparent;
+    width: var(--scrollbar-width);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: calc(var(--scrollbar-width) / 2);
+}

package/scss/tokens.css

@@ -258,6 +258,7 @@
   --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);
+  --scrollbar-width: 8px;
   --shape-corner-extra-large: 28px;
   --shape-corner-extra-small: 4px;
   --shape-corner-full: 9999px;

package/src/PeacockComponent.ts

@@ -0,0 +1,3 @@
+// Class decorator
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function PeacockComponent(constructor: Function) {}

package/src/accordion/accordion-item/accordion-item.scss

@@ -22,6 +22,7 @@
     display: flex;
     flex-direction: row-reverse;
     align-items: center;
+    color: var(--color-on-surface);
     justify-content: flex-start;
     gap: 0.5rem;
     @include mixin.get-typography(title-medium);
@@ -57,7 +58,6 @@
 
   &.disabled .accordion-heading {
     cursor: not-allowed;
-    color: var(--color-on-surface);
     opacity: 0.38;
   }
 

package/src/button/BaseButton.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { dispatchActivationClick, isActivationClick } from '../utils.js';
+import { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';
 
 export class BaseButton extends LitElement {
   #id = crypto.randomUUID();

package/src/button/button/button.ts

@@ -1,6 +1,7 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import PeacockComponent from 'src/PeacockComponent.js';
 import styles from './button.scss';
 import colorStyles from './button-colors.scss';
 import sizeStyles from './button-sizes.scss';
@@ -50,6 +51,7 @@ import { BaseButton } from '../BaseButton.js';
  * ```
  * @tags display
  */
+@PeacockComponent
 export class Button extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 

package/src/button/button-group/button-group.ts

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import PeacockComponent from 'src/PeacockComponent.js';
 import styles from './button-group.scss';
 
 /**
@@ -20,6 +21,7 @@ import styles from './button-group.scss';
  *
  * @tags controls
  */
+@PeacockComponent
 export class ButtonGroup extends LitElement {
   // Lit prefers CSS-in-JS for better performance and scoping.
   // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)

package/src/clock/clock.ts

@@ -1,8 +1,10 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './clock.scss';
+import PeacockComponent from 'src/PeacockComponent.js';
 import { ClockController } from './ClockController.js';
 
+import styles from './clock.scss';
+
 /**
  * @label Clock
  * @tag base-clock
@@ -19,6 +21,7 @@ import { ClockController } from './ClockController.js';
  * ```
  * @tags display
  */
+@PeacockComponent
 export class Clock extends LitElement {
   static styles = [styles];