@nectary/theme-base - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

comp/button.css

@@ -40,3 +40,3 @@ .nectary-theme-base {
   --sinch-comp-button-color-primary-default-icon-initial: var(--sinch-sys-color-primary-foreground);
-  --sinch-comp-button-color-primary-default-outilne-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-primary-default-outline-focus: var(--sinch-sys-color-border-focus);
   --sinch-comp-button-color-primary-default-text-initial: var(--sinch-sys-color-primary-foreground);
@@ -58,16 +58,34 @@ --sinch-comp-button-color-primary-disabled-background-initial: var(--sinch-sys-color-primary-disabled);
   --sinch-comp-button-color-secondary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-button-color-tertiary-default-background-active: var(--sinch-sys-color-container-transparent-active);
-  --sinch-comp-button-color-tertiary-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
-  --sinch-comp-button-color-tertiary-default-background-initial: var(--sinch-sys-color-container-transparent-default);
-  --sinch-comp-button-color-tertiary-default-border-initial: transparent;
-  --sinch-comp-button-color-tertiary-default-icon-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-tertiary-default-outline-focus: var(--sinch-sys-color-border-focus);
-  --sinch-comp-button-color-tertiary-default-text-initial: var(--sinch-sys-color-primary-default);
-  --sinch-comp-button-color-tertiary-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
-  --sinch-comp-button-color-tertiary-disabled-border-initial: transparent;
-  --sinch-comp-button-color-tertiary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
-  --sinch-comp-button-color-tertiary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
+  --sinch-comp-button-color-subtle-primary-default-background-active: var(--sinch-sys-color-container-transparent-active);
+  --sinch-comp-button-color-subtle-primary-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-button-color-subtle-primary-default-background-initial: var(--sinch-sys-color-container-transparent-default);
+  --sinch-comp-button-color-subtle-primary-default-border-initial: transparent;
+  --sinch-comp-button-color-subtle-primary-default-icon-initial: var(--sinch-sys-color-primary-default);
+  --sinch-comp-button-color-subtle-primary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-subtle-primary-default-text-initial: var(--sinch-sys-color-primary-default);
+  --sinch-comp-button-color-subtle-primary-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
+  --sinch-comp-button-color-subtle-primary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-subtle-primary-disabled-icon-initial: var(--sinch-sys-color-primary-disabled);
+  --sinch-comp-button-color-subtle-primary-disabled-text-initial: var(--sinch-sys-color-primary-disabled);
+  --sinch-comp-button-color-subtle-primary-toggled-background-active: #24242433;
+  --sinch-comp-button-color-subtle-primary-toggled-background-hover: #24242426;
+  --sinch-comp-button-color-subtle-primary-toggled-background-initial: #2424241A;
+  --sinch-comp-button-color-subtle-secondary-default-background-active: var(--sinch-sys-color-container-transparent-active);
+  --sinch-comp-button-color-subtle-secondary-default-background-hover: var(--sinch-sys-color-container-transparent-hover);
+  --sinch-comp-button-color-subtle-secondary-default-background-initial: var(--sinch-sys-color-container-transparent-default);
+  --sinch-comp-button-color-subtle-secondary-default-border-initial: transparent;
+  --sinch-comp-button-color-subtle-secondary-default-icon-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-button-color-subtle-secondary-default-outline-focus: var(--sinch-sys-color-border-focus);
+  --sinch-comp-button-color-subtle-secondary-default-text-initial: var(--sinch-sys-color-text-default);
+  --sinch-comp-button-color-subtle-secondary-disabled-background-initial: var(--sinch-sys-color-container-transparent-disabled);
+  --sinch-comp-button-color-subtle-secondary-disabled-border-initial: transparent;
+  --sinch-comp-button-color-subtle-secondary-disabled-icon-initial: var(--sinch-sys-color-text-disabled);
+  --sinch-comp-button-color-subtle-secondary-disabled-text-initial: var(--sinch-sys-color-text-disabled);
+  --sinch-comp-button-color-subtle-secondary-toggled-background-active: #24242433;
+  --sinch-comp-button-color-subtle-secondary-toggled-background-hover: #24242426;
+  --sinch-comp-button-color-subtle-secondary-toggled-background-initial: #2424241A;
   --sinch-comp-button-font-size-l-text: var(--sinch-sys-font-body-emphasize);
   --sinch-comp-button-font-size-m-text: var(--sinch-sys-font-body-emphasize);
   --sinch-comp-button-font-size-s-text: var(--sinch-sys-font-body-emphasize-s);
+  --sinch-comp-button-font-size-xs-text: var(--sinch-sys-font-body-emphasize-s);
   --sinch-comp-button-shadow-cta-primary-active: var(--sinch-ref-shadow-level-0);
@@ -98,16 +116,19 @@ --sinch-comp-button-shadow-cta-primary-disabled: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shadow-secondary-initial: var(--sinch-ref-shadow-level-1);
-  --sinch-comp-button-shadow-tertiary-active: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-tertiary-disabled: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-tertiary-focus: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-tertiary-hover: var(--sinch-ref-shadow-level-0);
-  --sinch-comp-button-shadow-tertiary-initial: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-subtle-active: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-subtle-disabled: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-subtle-focus: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-subtle-hover: var(--sinch-ref-shadow-level-0);
+  --sinch-comp-button-shadow-subtle-initial: var(--sinch-ref-shadow-level-0);
   --sinch-comp-button-shape-radius-size-l: var(--sinch-sys-shape-radius-l);
   --sinch-comp-button-shape-radius-size-m: var(--sinch-sys-shape-radius-m);
   --sinch-comp-button-shape-radius-size-s: var(--sinch-sys-shape-radius-s);
+  --sinch-comp-button-shape-radius-size-xs: var(--sinch-sys-shape-radius-xs);
   --sinch-comp-button-size-container-l: var(--sinch-sys-size-l);
   --sinch-comp-button-size-container-m: var(--sinch-sys-size-m);
   --sinch-comp-button-size-container-s: var(--sinch-sys-size-s);
-  --sinch-comp-button-size-icon-l: 24px;
+  --sinch-comp-button-size-container-xs: var(--sinch-sys-size-xs);
+  --sinch-comp-button-size-icon-l: 32px;
   --sinch-comp-button-size-icon-m: 24px;
-  --sinch-comp-button-size-icon-s: 16px;
+  --sinch-comp-button-size-icon-s: 24px;
+  --sinch-comp-button-size-icon-xs: 16px;
 }

index.css

@@ -24,3 +24,2 @@ @import "./fonts.css";
 @import "./comp/file-status.css";
-@import "./comp/icon-button.css";
 @import "./comp/inline-alert.css";
@@ -27,0 +26,0 @@ @import "./comp/input.css";

index.js

@@ -24,3 +24,2 @@ import './fonts.css'
 import './comp/file-status.css'
-import './comp/icon-button.css'
 import './comp/inline-alert.css'
@@ -27,0 +26,0 @@ import './comp/input.css'

package.json

 {
   "name": "@nectary/theme-base",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "files": [
@@ -5,0 +5,0 @@ "**/*.css",

No alert changes

Improved metrics

Total package byte prevSize

122749

1.61%

Lines of code

1932

0.99%

No dependency changes