@nectary/theme-base - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

comp/accordion.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-accordion-color-default-border-initial: var(--sinch-sys-color-border-default);
@@ -4,0 +3,0 @@ --sinch-comp-accordion-color-default-icon-initial: var(--sinch-sys-color-text-default);

comp/action-menu.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-action-menu-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
@@ -4,0 +3,0 @@ --sinch-comp-action-menu-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);

comp/alert.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-alert-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
@@ -4,0 +3,0 @@ --sinch-comp-alert-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);

comp/avatar.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-avatar-border-color-default-initial: var(--sinch-sys-color-border-light);
@@ -4,0 +3,0 @@ --sinch-comp-avatar-container-color-blue-background: var(--sinch-ref-color-complementary-night-400);

comp/badge.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-badge-color-background: var(--sinch-sys-color-status-busy-contrast);
@@ -4,0 +3,0 @@ --sinch-comp-badge-color-border: var(--sinch-sys-color-border-light);

comp/button.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-button-color-cta-primary-default-background-active: var(--sinch-sys-color-cta-active);
@@ -4,0 +3,0 @@ --sinch-comp-button-color-cta-primary-default-background-hover: var(--sinch-sys-color-cta-hover);

comp/card.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-card-color-blue-default-background-initial: var(--sinch-sys-color-container-complement-tertiary-default);
@@ -4,0 +3,0 @@ --sinch-comp-card-color-gray-default-background-initial: var(--sinch-sys-color-container-contrast-primary-default);

comp/chat.css

@@ -1,4 +0,3 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-chat-shape-radius: var(--sinch-sys-shape-radius-l);
 }

comp/checkbox.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-checkbox-color-checked-background-active: var(--sinch-sys-color-primary-active);
@@ -4,0 +3,0 @@ --sinch-comp-checkbox-color-checked-background-hover: var(--sinch-sys-color-primary-hover);

comp/chip.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-chip-color-blue-default-background-initial: var(--sinch-ref-color-complementary-night-400);
@@ -4,0 +3,0 @@ --sinch-comp-chip-color-blue-default-foreground-initial: var(--sinch-ref-color-main-snow-100);

comp/code-snippet.css

@@ -1,5 +0,4 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-code-snippet-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
   --sinch-comp-code-snippet-shape-radius: var(--sinch-sys-shape-radius-l);
 }

comp/code-tag.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-code-tag-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);
@@ -4,0 +3,0 @@ --sinch-comp-code-tag-color-default-border-initial: var(--sinch-sys-color-border-light);

comp/color-menu-option.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-color-menu-option-color-default-border-active: var(--sinch-ref-color-main-stormy-400);
@@ -4,0 +3,0 @@ --sinch-comp-color-menu-option-color-default-border-focus: var(--sinch-sys-color-border-focus);

comp/color-swatch.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-color-swatch-color-blue-background: var(--sinch-ref-color-complementary-night-400);
@@ -4,0 +3,0 @@ --sinch-comp-color-swatch-color-brown-background: var(--sinch-ref-color-complementary-mud-400);

comp/date-picker.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-date-picker-day-color-checked-background-initial: var(--sinch-sys-color-primary-default);
@@ -4,0 +3,0 @@ --sinch-comp-date-picker-day-color-checked-border-initial: transparent;

comp/dialog.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-dialog-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-dialog-color-default-icon-initial: var(--sinch-sys-color-text-default);

comp/emoji-picker.css

@@ -1,5 +0,4 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-emoji-picker-color-default-text-not-found: var(--sinch-sys-color-text-muted);
   --sinch-comp-emoji-picker-font-not-found: var(--sinch-sys-font-body-m);
 }

comp/field.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-field-color-default-additional-initial: var(--sinch-sys-color-text-muted);
@@ -4,0 +3,0 @@ --sinch-comp-field-color-default-label-initial: var(--sinch-sys-color-text-default);

comp/file-drop.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-file-drop-color-default-background-active: var(--sinch-sys-color-container-complement-tertiary-default);
@@ -4,0 +3,0 @@ --sinch-comp-file-drop-color-default-background-initial: var(--sinch-sys-color-container-contrast-secondary-default);

comp/file-status.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-file-status-color-error-background: var(--sinch-sys-color-container-complement-quaternary-default);
@@ -4,0 +3,0 @@ --sinch-comp-file-status-color-error-icon: var(--sinch-sys-color-feedback-invalid-contrast);

comp/icon-button.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-icon-button-color-primary-default-background-active: var(--sinch-sys-color-primary-active);
@@ -4,0 +3,0 @@ --sinch-comp-icon-button-color-primary-default-background-hover: var(--sinch-sys-color-primary-hover);

comp/inline-alert.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-inline-alert-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
@@ -4,0 +3,0 @@ --sinch-comp-inline-alert-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);

comp/input.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-input-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-input-color-default-border-focus: var(--sinch-sys-color-border-focus);

comp/link.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-link-color-default-icon-hover: var(--sinch-sys-color-primary-active);
@@ -4,0 +3,0 @@ --sinch-comp-link-color-default-icon-initial: var(--sinch-sys-color-text-link);

comp/list.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-list-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
@@ -4,0 +3,0 @@ --sinch-comp-list-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);

comp/pagination.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-pagination-color-checked-background-hover: var(--sinch-sys-color-container-transparent-active);
@@ -4,0 +3,0 @@ --sinch-comp-pagination-color-checked-background-initial: var(--sinch-sys-color-container-transparent-active);

comp/popover.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-popover-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-popover-color-default-border-initial: var(--sinch-sys-color-border-light);

comp/progress-stepper.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-progress-stepper-step-color-complete-background-hover: var(--sinch-sys-color-container-transparent-hover);
@@ -4,0 +3,0 @@ --sinch-comp-progress-stepper-step-color-complete-label-default: var(--sinch-sys-color-text-muted);

comp/progress.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-progress-color-default-background-initial: var(--sinch-sys-color-container-complement-secondary-hover);
@@ -4,0 +3,0 @@ --sinch-comp-progress-color-default-bar-initial: var(--sinch-sys-color-primary-default);

comp/radio.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-radio-color-checked-border-active: var(--sinch-sys-color-border-dark);
@@ -4,0 +3,0 @@ --sinch-comp-radio-color-checked-border-hover: var(--sinch-sys-color-border-dark);

comp/segment.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-segment-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-segment-color-default-border-initial: var(--sinch-sys-color-border-default);

comp/segmented-control.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-segmented-control-color-checked-background-initial: var(--sinch-sys-color-container-main-active);
@@ -4,0 +3,0 @@ --sinch-comp-segmented-control-color-checked-border-initial: var(--sinch-sys-color-border-active);

comp/select-button.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-select-button-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-select-button-color-default-border-focus: var(--sinch-sys-color-border-focus);

comp/select-menu.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-select-menu-color-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
@@ -4,0 +3,0 @@ --sinch-comp-select-menu-color-default-background-initial: var(--sinch-sys-color-container-transparent-default);

comp/tab.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-tab-color-checked-border-initial: var(--sinch-sys-color-border-active);
@@ -4,0 +3,0 @@ --sinch-comp-tab-color-checked-icon-initial: var(--sinch-sys-color-primary-default);

comp/table.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-table-color-cell-default-border-initial: var(--sinch-sys-color-border-light);
@@ -4,0 +3,0 @@ --sinch-comp-table-color-head-cell-default-border-initial: var(--sinch-sys-color-border-default);

comp/tag.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-tag-color-blue-background: var(--sinch-ref-color-complementary-night-400);
@@ -4,0 +3,0 @@ --sinch-comp-tag-color-blue-foreground: var(--sinch-ref-color-main-snow-100);

comp/textarea.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-textarea-color-default-background-initial: var(--sinch-sys-color-container-main-default);
@@ -4,0 +3,0 @@ --sinch-comp-textarea-color-default-border-focus: var(--sinch-sys-color-border-focus);

comp/tile-control.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-tile-control-color-checked-background-initial: var(--sinch-sys-color-container-main-active);
@@ -4,0 +3,0 @@ --sinch-comp-tile-control-color-checked-border-initial: var(--sinch-sys-color-border-active);

comp/time-picker.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-time-picker-digit-color-checked-h12-default: var(--sinch-sys-color-primary-default);
@@ -4,0 +3,0 @@ --sinch-comp-time-picker-digit-color-checked-h24-initial: var(--sinch-sys-color-primary-default);

comp/toast.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-toast-color-error-default-background: var(--sinch-sys-color-feedback-invalid-background);
@@ -4,0 +3,0 @@ --sinch-comp-toast-color-error-default-icon: var(--sinch-sys-color-feedback-invalid-contrast);

comp/toggle.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-toggle-color-checked-background-initial: var(--sinch-sys-color-primary-default);
@@ -4,0 +3,0 @@ --sinch-comp-toggle-color-checked-disabled-background-initial: var(--sinch-sys-color-primary-disabled);

comp/tooltip.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-comp-tooltip-color-background: var(--sinch-sys-color-container-contrast-secondary-default);
@@ -4,0 +3,0 @@ --sinch-comp-tooltip-color-text: var(--sinch-sys-color-text-default);

package.json

 {
   "name": "@nectary/theme-base",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "files": [
@@ -9,3 +9,6 @@ "**/*.css",
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "index.css"
 }

ref.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-ref-color-complementary-bolt-200: #FFE6B3;
@@ -4,0 +3,0 @@ --sinch-ref-color-complementary-bolt-400: #FFBE3C;

sys.css

@@ -1,3 +0,2 @@
-:root,
-:host {
+.nectary-theme-base {
   --sinch-sys-color-border-active: var(--sinch-sys-color-primary-default);
@@ -4,0 +3,0 @@ --sinch-sys-color-border-dark: var(--sinch-ref-color-main-stormy-100);

No alert changes

Improved metrics

Total package byte prevSize

120805

0.3%

Worsened metrics

Lines of code

1913

-2.3%

No dependency changes