@nectary/components 0.41.1 → 0.42.1

package/textarea/index.js

@@ -6,14 +6,12 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
   #$input;
   #cursorPos = null;
   #isPendingDk = false;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$input = shadowRoot.querySelector('#input');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'textbox');
     this.setAttribute('aria-multiline', 'true');
@@ -27,7 +25,6 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$input.removeEventListener('input', this.#onInput);
     this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
@@ -39,48 +36,39 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['value', 'placeholder', 'invalid', 'disabled', 'rows'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
           const nextVal = newVal ?? '';
           const prevVal = this.#$input.value;
-
           if (nextVal !== prevVal) {
             const prevCursorPos = this.#$input.selectionEnd;
             const isPrevCursorEnd = prevCursorPos === prevVal.length;
             this.#$input.value = nextVal;
-
             if (!isPrevCursorEnd) {
               this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
-
           break;
         }
-
       case 'placeholder':
         {
           this.#$input.placeholder = newVal ?? '';
           updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
-
       case 'invalid':
         {
           updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -88,7 +76,6 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
-
       case 'rows':
         {
           updateAttribute(this.#$input, 'rows', newVal);
@@ -96,95 +83,72 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
         }
     }
   }
-
   get nodeName() {
     return 'textarea';
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set placeholder(value) {
     updateAttribute(this, 'placeholder', value);
   }
-
   get placeholder() {
     return getAttribute(this, 'placeholder');
   }
-
   set invalid(value) {
     updateBooleanAttribute(this, 'invalid', value);
   }
-
   get invalid() {
     return getBooleanAttribute(this, 'invalid');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set resizable(isResizable) {
     updateBooleanAttribute(this, 'resizable', isResizable);
   }
-
   get resizable() {
     return getBooleanAttribute(this, 'resizable');
   }
-
   set rows(value) {
     updateAttribute(this, 'rows', value);
   }
-
   get rows() {
     return getIntegerAttribute(this, 'rows', 0);
   }
-
   get selectionStart() {
     return this.#$input.selectionStart;
   }
-
   set selectionStart(value) {
     this.#$input.selectionStart = value;
   }
-
   get selectionEnd() {
     return this.#$input.selectionEnd;
   }
-
   set selectionEnd(value) {
     this.#$input.selectionEnd = value;
   }
-
   get selectionDirection() {
     return this.#$input.selectionDirection;
   }
-
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$input.focus();
   }
-
   blur() {
     this.#$input.blur();
   }
-
   #onCompositionStart = () => {
     this.#isPendingDk = true;
   };
@@ -195,20 +159,16 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
-
     if (prevValue !== nextValue) {
       const nextCursorPos = this.#$input.selectionEnd;
-
       if (!this.#isPendingDk) {
         this.#$input.value = prevValue;
         const prevCursorPos = this.#cursorPos;
         const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-
         if (!isPrevCursorEnd) {
           this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
         }
       }
-
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
       this.dispatchEvent(new CustomEvent('change', {

package/theme/avatar.css

@@ -0,0 +1,25 @@
+:root,
+:host {
+  --sinch-avatar-color-light-blue-bg: var(--sinch-color-night-200);
+  --sinch-avatar-color-light-blue-fg: var(--sinch-color-night-700);
+  --sinch-avatar-color-light-brown-bg: var(--sinch-color-mud-200);
+  --sinch-avatar-color-light-brown-fg: var(--sinch-color-mud-700);
+  --sinch-avatar-color-light-gray-bg: var(--sinch-color-dirt-200);
+  --sinch-avatar-color-light-gray-fg: var(--sinch-color-dirt-700);
+  --sinch-avatar-color-light-green-bg: var(--sinch-color-grass-200);
+  --sinch-avatar-color-light-green-fg: var(--sinch-color-grass-700);
+  --sinch-avatar-color-light-orange-bg: var(--sinch-color-orange-200);
+  --sinch-avatar-color-light-orange-fg: var(--sinch-color-orange-700);
+  --sinch-avatar-color-light-pink-bg: var(--sinch-color-candy-200);
+  --sinch-avatar-color-light-pink-fg: var(--sinch-color-candy-700);
+  --sinch-avatar-color-light-violet-bg: var(--sinch-color-violet-200);
+  --sinch-avatar-color-light-violet-fg: var(--sinch-color-violet-700);
+  --sinch-avatar-color-light-yellow-bg: var(--sinch-color-bolt-200);
+  --sinch-avatar-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-avatar-color-default-bg: var(--sinch-avatar-color-light-gray-bg);
+  --sinch-avatar-color-default-fg: var(--sinch-avatar-color-light-gray-fg);
+  --sinch-avatar-status-color-online: var(--sinch-color-grass-400);
+  --sinch-avatar-status-color-away: var(--sinch-color-honey-500);
+  --sinch-avatar-status-color-busy: var(--sinch-color-raspberry-500);
+  --sinch-avatar-status-color-offline: var(--sinch-color-stormy-200);
+}

package/theme/badge.css

@@ -0,0 +1,15 @@
+:root,
+:host {
+  --sinch-badge-color-yellow-bg: var(--sinch-color-bolt-400);
+  --sinch-badge-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-badge-color-red-bg: var(--sinch-color-raspberry-500);
+  --sinch-badge-color-red-fg: var(--sinch-color-snow-100);
+  --sinch-badge-color-black-bg: var(--sinch-color-stormy-500);
+  --sinch-badge-color-black-fg: var(--sinch-color-snow-100);
+  --sinch-badge-color-gray-bg: var(--sinch-color-snow-500);
+  --sinch-badge-color-gray-fg: var(--sinch-color-stormy-500);
+  --sinch-badge-color-green-bg: var(--sinch-color-grass-400);
+  --sinch-badge-color-green-fg: var(--sinch-color-snow-100);
+  --sinch-badge-color-default-bg: var(--sinch-badge-color-red-bg);
+  --sinch-badge-color-default-fg: var(--sinch-badge-color-red-fg);
+}

package/theme/chip.css

@@ -0,0 +1,53 @@
+:root,
+:host {
+  --sinch-chip-color-default-bg: var(--sinch-color-snow-500);
+  --sinch-chip-color-default-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-light-blue-bg: var(--sinch-color-night-200);
+  --sinch-chip-color-light-blue-fg: var(--sinch-color-night-700);
+  --sinch-chip-color-light-brown-bg: var(--sinch-color-mud-200);
+  --sinch-chip-color-light-brown-fg: var(--sinch-color-mud-700);
+  --sinch-chip-color-light-gray-bg: var(--sinch-color-dirt-200);
+  --sinch-chip-color-light-gray-fg: var(--sinch-color-dirt-700);
+  --sinch-chip-color-light-green-bg: var(--sinch-color-grass-200);
+  --sinch-chip-color-light-green-fg: var(--sinch-color-grass-700);
+  --sinch-chip-color-light-orange-bg: var(--sinch-color-orange-200);
+  --sinch-chip-color-light-orange-fg: var(--sinch-color-orange-700);
+  --sinch-chip-color-light-pink-bg: var(--sinch-color-candy-200);
+  --sinch-chip-color-light-pink-fg: var(--sinch-color-candy-700);
+  --sinch-chip-color-light-violet-bg: var(--sinch-color-violet-200);
+  --sinch-chip-color-light-violet-fg: var(--sinch-color-violet-700);
+  --sinch-chip-color-light-yellow-bg: var(--sinch-color-bolt-200);
+  --sinch-chip-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-chip-color-dark-blue-bg: var(--sinch-color-night-700);
+  --sinch-chip-color-dark-blue-fg: var(--sinch-color-night-200);
+  --sinch-chip-color-dark-brown-bg: var(--sinch-color-mud-700);
+  --sinch-chip-color-dark-brown-fg: var(--sinch-color-mud-200);
+  --sinch-chip-color-dark-gray-bg: var(--sinch-color-dirt-700);
+  --sinch-chip-color-dark-gray-fg: var(--sinch-color-dirt-200);
+  --sinch-chip-color-dark-green-bg: var(--sinch-color-grass-700);
+  --sinch-chip-color-dark-green-fg: var(--sinch-color-grass-200);
+  --sinch-chip-color-dark-orange-bg: var(--sinch-color-orange-700);
+  --sinch-chip-color-dark-orange-fg: var(--sinch-color-orange-200);
+  --sinch-chip-color-dark-pink-bg: var(--sinch-color-candy-700);
+  --sinch-chip-color-dark-pink-fg: var(--sinch-color-candy-200);
+  --sinch-chip-color-dark-violet-bg: var(--sinch-color-violet-700);
+  --sinch-chip-color-dark-violet-fg: var(--sinch-color-violet-200);
+  --sinch-chip-color-dark-yellow-bg: var(--sinch-color-bolt-700);
+  --sinch-chip-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-chip-color-blue-bg: var(--sinch-color-night-400);
+  --sinch-chip-color-blue-fg: var(--sinch-color-snow-100);
+  --sinch-chip-color-brown-bg: var(--sinch-color-mud-400);
+  --sinch-chip-color-brown-fg: var(--sinch-color-snow-100);
+  --sinch-chip-color-gray-bg: var(--sinch-color-dirt-400);
+  --sinch-chip-color-gray-fg: var(--sinch-color-snow-100);
+  --sinch-chip-color-green-bg: var(--sinch-color-grass-400);
+  --sinch-chip-color-green-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-orange-bg: var(--sinch-color-orange-400);
+  --sinch-chip-color-orange-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-pink-bg: var(--sinch-color-candy-400);
+  --sinch-chip-color-pink-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-violet-bg: var(--sinch-color-violet-400);
+  --sinch-chip-color-violet-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-yellow-bg: var(--sinch-color-bolt-400);
+  --sinch-chip-color-yellow-fg: var(--sinch-color-stormy-500);
+}

package/theme/color-swatch.css

@@ -0,0 +1,65 @@
+:root,
+:host {
+  --sinch-color-swatch-color-default-bg: var(--sinch-color-snow-500);
+  --sinch-color-swatch-color-default-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-light-blue-bg: var(--sinch-color-night-200);
+  --sinch-color-swatch-color-light-blue-fg: var(--sinch-color-night-700);
+  --sinch-color-swatch-color-light-brown-bg: var(--sinch-color-mud-200);
+  --sinch-color-swatch-color-light-brown-fg: var(--sinch-color-mud-700);
+  --sinch-color-swatch-color-light-gray-bg: var(--sinch-color-dirt-200);
+  --sinch-color-swatch-color-light-gray-fg: var(--sinch-color-dirt-700);
+  --sinch-color-swatch-color-light-green-bg: var(--sinch-color-grass-200);
+  --sinch-color-swatch-color-light-green-fg: var(--sinch-color-grass-700);
+  --sinch-color-swatch-color-light-orange-bg: var(--sinch-color-orange-200);
+  --sinch-color-swatch-color-light-orange-fg: var(--sinch-color-orange-700);
+  --sinch-color-swatch-color-light-pink-bg: var(--sinch-color-candy-200);
+  --sinch-color-swatch-color-light-pink-fg: var(--sinch-color-candy-700);
+  --sinch-color-swatch-color-light-violet-bg: var(--sinch-color-violet-200);
+  --sinch-color-swatch-color-light-violet-fg: var(--sinch-color-violet-700);
+  --sinch-color-swatch-color-light-yellow-bg: var(--sinch-color-bolt-200);
+  --sinch-color-swatch-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-color-swatch-color-dark-blue-bg: var(--sinch-color-night-700);
+  --sinch-color-swatch-color-dark-blue-fg: var(--sinch-color-night-200);
+  --sinch-color-swatch-color-dark-brown-bg: var(--sinch-color-mud-700);
+  --sinch-color-swatch-color-dark-brown-fg: var(--sinch-color-mud-200);
+  --sinch-color-swatch-color-dark-gray-bg: var(--sinch-color-dirt-700);
+  --sinch-color-swatch-color-dark-gray-fg: var(--sinch-color-dirt-200);
+  --sinch-color-swatch-color-dark-green-bg: var(--sinch-color-grass-700);
+  --sinch-color-swatch-color-dark-green-fg: var(--sinch-color-grass-200);
+  --sinch-color-swatch-color-dark-orange-bg: var(--sinch-color-orange-700);
+  --sinch-color-swatch-color-dark-orange-fg: var(--sinch-color-orange-200);
+  --sinch-color-swatch-color-dark-pink-bg: var(--sinch-color-candy-700);
+  --sinch-color-swatch-color-dark-pink-fg: var(--sinch-color-candy-200);
+  --sinch-color-swatch-color-dark-violet-bg: var(--sinch-color-violet-700);
+  --sinch-color-swatch-color-dark-violet-fg: var(--sinch-color-violet-200);
+  --sinch-color-swatch-color-dark-yellow-bg: var(--sinch-color-bolt-700);
+  --sinch-color-swatch-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-color-swatch-color-blue-bg: var(--sinch-color-night-400);
+  --sinch-color-swatch-color-blue-fg: var(--sinch-color-snow-100);
+  --sinch-color-swatch-color-brown-bg: var(--sinch-color-mud-400);
+  --sinch-color-swatch-color-brown-fg: var(--sinch-color-snow-100);
+  --sinch-color-swatch-color-gray-bg: var(--sinch-color-dirt-400);
+  --sinch-color-swatch-color-gray-fg: var(--sinch-color-snow-100);
+  --sinch-color-swatch-color-green-bg: var(--sinch-color-grass-400);
+  --sinch-color-swatch-color-green-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-orange-bg: var(--sinch-color-orange-400);
+  --sinch-color-swatch-color-orange-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-pink-bg: var(--sinch-color-candy-400);
+  --sinch-color-swatch-color-pink-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-violet-bg: var(--sinch-color-violet-400);
+  --sinch-color-swatch-color-violet-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-yellow-bg: var(--sinch-color-bolt-400);
+  --sinch-color-swatch-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
+  --sinch-color-swatch-color-skin-tone-0-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-10-bg: var(--sinch-color-skin-tone-10);
+  --sinch-color-swatch-color-skin-tone-10-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-20-bg: var(--sinch-color-skin-tone-20);
+  --sinch-color-swatch-color-skin-tone-20-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-30-bg: var(--sinch-color-skin-tone-30);
+  --sinch-color-swatch-color-skin-tone-30-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-40-bg: var(--sinch-color-skin-tone-40);
+  --sinch-color-swatch-color-skin-tone-40-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-skin-tone-50-bg: var(--sinch-color-skin-tone-50);
+  --sinch-color-swatch-color-skin-tone-50-fg: var(--sinch-color-snow-100);
+}

package/{utils → theme}/colors.d.ts

@@ -1,4 +1,3 @@
-export declare const NO_COLOR: "";
 export declare const lightColorNames: string;
 export declare const darkColorNames: string;
 export declare const vibrantColorNames: string;

package/{utils → theme}/colors.js

@@ -1,4 +1,3 @@
-export const NO_COLOR = '';
 export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-pink', 'light-brown', 'light-gray'].join(',');
 export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
 export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'pink', 'brown', 'gray'].join(',');

package/theme/elevation.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-elevation-level-0: 0 0 0 0 rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-1: 1px 2px 6px rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-2: 1px 4px 8px rgba(10, 39, 61, 0.1);
+  --sinch-elevation-level-3: 1px 6px 12px rgba(10, 39, 61, 0.15);
+}

package/theme/fonts.css

@@ -0,0 +1,76 @@
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-SemiBold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Gilroy-Bold"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Medium"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMSans-Bold"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("DMMono-Regular"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff") format("woff");
+}

package/theme/fonts.json

@@ -0,0 +1,79 @@
+[
+  {
+    "family": "Gilroy",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Regular.woff"
+    }
+  },
+  {
+    "family": "Gilroy",
+    "weight": 600,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-SemiBold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-SemiBold.woff"
+    }
+  },
+  {
+    "family": "Gilroy",
+    "weight": 700,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "Gilroy-Bold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/Gilroy-Bold.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 500,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Medium",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 700,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Bold",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff"
+    }
+  },
+  {
+    "family": "DM Mono",
+    "weight": 400,
+    "style": "normal",
+    "display": "swap",
+    "src": {
+      "local": "DMMono-Regular",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Mono-400.woff"
+    }
+  }
+]

package/theme/palette.css

@@ -0,0 +1,90 @@
+:root,
+:host {
+  --sinch-color-honey-700: #CC8800;
+  --sinch-color-honey-600: #FFAA00;
+  --sinch-color-honey-500: #FFBE3C;
+  --sinch-color-honey-400: #FFCC66;
+  --sinch-color-honey-300: #FFDF9E;
+  --sinch-color-honey-200: #FCECCB;
+  --sinch-color-honey-100: #FFF7E6;
+  --sinch-color-tropical-700: #003D3D;
+  --sinch-color-tropical-600: #005757;
+  --sinch-color-tropical-500: #007171;
+  --sinch-color-tropical-400: #059688;
+  --sinch-color-tropical-300: #66AAAA;
+  --sinch-color-tropical-200: #A7D5C2;
+  --sinch-color-tropical-100: #DCEDE1;
+  --sinch-color-tropical-50: #E5F1F1;
+  --sinch-color-stormy-700: #000000;
+  --sinch-color-stormy-600: #171717;
+  --sinch-color-stormy-500: #242424;
+  --sinch-color-stormy-400: #595959;
+  --sinch-color-stormy-300: #767676;
+  --sinch-color-stormy-200: #8C8C8C;
+  --sinch-color-stormy-100: #A6A6A6;
+  --sinch-color-ocean-700: #1B3E65;
+  --sinch-color-ocean-600: #1686CB;
+  --sinch-color-ocean-500: #3AA7EA;
+  --sinch-color-ocean-400: #6EBBEE;
+  --sinch-color-ocean-300: #A1D5F5;
+  --sinch-color-ocean-200: #C8E6F9;
+  --sinch-color-ocean-100: #DEF2FF;
+  --sinch-color-ocean-50: #F3FAFE;
+  --sinch-color-snow-700: #CCCCCC;
+  --sinch-color-snow-600: #D9D9D9;
+  --sinch-color-snow-500: #E0E0E0;
+  --sinch-color-snow-400: #F2F2F2;
+  --sinch-color-snow-200: #F8F8F8;
+  --sinch-color-snow-100: #FFFFFF;
+  --sinch-color-raspberry-700: #882024;
+  --sinch-color-raspberry-600: #D13D42;
+  --sinch-color-raspberry-500: #EF5858;
+  --sinch-color-raspberry-400: #F38686;
+  --sinch-color-raspberry-300: #FFB8B8;
+  --sinch-color-raspberry-200: #FBD5D5;
+  --sinch-color-raspberry-100: #FFE8E4;
+  --sinch-color-raspberry-50: #FFF6F5;
+  --sinch-color-night-700: #1223a1;
+  --sinch-color-night-400: #3247E9;
+  --sinch-color-night-200: #D1D6FA;
+  --sinch-color-grass-700: #006602;
+  --sinch-color-grass-400: #39B93D;
+  --sinch-color-grass-200: #B4E4B5;
+  --sinch-color-dirt-700: #363230;
+  --sinch-color-dirt-400: #828282;
+  --sinch-color-dirt-200: #E0DDDC;
+  --sinch-color-candy-700: #981b77;
+  --sinch-color-candy-400: #E467C3;
+  --sinch-color-candy-200: #F6CBEA;
+  --sinch-color-mud-700: #6d4e46;
+  --sinch-color-mud-400: #8B6559;
+  --sinch-color-mud-200: #D7C6C1;
+  --sinch-color-orange-700: #974302;
+  --sinch-color-orange-400: #FF8C34;
+  --sinch-color-orange-200: #FFD4B3;
+  --sinch-color-bolt-700: #805500;
+  --sinch-color-bolt-400: #FFBE3C;
+  --sinch-color-bolt-200: #FFE6B3;
+  --sinch-color-violet-700: #4F1B98;
+  --sinch-color-violet-400: #9E67E4;
+  --sinch-color-violet-200: #DECBF6;
+  --sinch-color-error-700: #882024;
+  --sinch-color-error-500: #D13D42;
+  --sinch-color-error-200: #FBD5D5;
+  --sinch-color-success-700: #275D33;
+  --sinch-color-success-500: #46A65A;
+  --sinch-color-success-200: #D7F1D8;
+  --sinch-color-informative-700: #003B7E;
+  --sinch-color-informative-500: #2071CE;
+  --sinch-color-informative-200: #D5E5F8;
+  --sinch-color-warning-700: #9C2E00;
+  --sinch-color-warning-500: #F35B1C;
+  --sinch-color-warning-200: #FFE8D6;
+  --sinch-color-skin-tone-0: #FFCC4D;
+  --sinch-color-skin-tone-10: #F7DECE;
+  --sinch-color-skin-tone-20: #F3D2A2;
+  --sinch-color-skin-tone-30: #D4AB88;
+  --sinch-color-skin-tone-40: #AF7E57;
+  --sinch-color-skin-tone-50: #7C533E;
+  --sinch-color-transparent: transparent;
+}

package/theme/shapes.css

@@ -0,0 +1,7 @@
+:root,
+:host {
+  --sinch-shape-radius-xs: 2px;
+  --sinch-shape-radius-s: 4px;
+  --sinch-shape-radius-m: 8px;
+  --sinch-shape-radius-l: 12px;
+}