@operato/styles - npm Package Compare versions

Comparing version 2.0.0-alpha.62 to 2.0.0-alpha.68

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
 ## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
@@ -8,0 +17,0 @@

dist/src/button-container-styles.js

@@ -10,2 +10,5 @@ import { css } from 'lit';
   .button-container mwc-button,
+  .button-container md-icon,
+  .button-container md-elevated-button,
+  .button-container md-elevated-button,
   .button-container button {
@@ -19,3 +22,10 @@ margin-left: var(--margin-default);
   }
+
+  md-button[danger],
+  md-elevated-button[danger],
+  md-elevated-button[danger] {
+    --md-theme-primary: var(--md-danger-button-primary-color);
+    --md-button-outline-color: var(--md-danger-button-outline-color);
+  }
 `;
 //# sourceMappingURL=button-container-styles.js.map

dist/src/common-grist-styles.js

@@ -22,3 +22,3 @@ import { css } from 'lit';
 
-    --mdc-icon-size: 24px;
+    --md-icon-size: 24px;
   }
@@ -30,5 +30,5 @@
 
-  #sorters mwc-icon,
-  #modes mwc-icon {
-    --mdc-icon-size: 18px;
+  #sorters md-icon,
+  #modes md-icon {
+    --md-icon-size: 18px;
   }
@@ -58,3 +58,3 @@ #sorters {
 
-  #modes > mwc-icon[active] {
+  #modes > md-icon[active] {
     border-radius: 9px;
@@ -67,3 +67,3 @@ background-color: rgba(var(--primary-color-rgb), 0.05);
 
-  #modes > mwc-icon:hover {
+  #modes > md-icon:hover {
     opacity: 1;
@@ -93,3 +93,3 @@ color: var(--secondary-text-color);
 
-  #add button mwc-icon {
+  #add button md-icon {
     font-size: 2em;
@@ -96,0 +96,0 @@ color: var(--theme-white-color);

dist/src/common-header-styles.js

@@ -24,3 +24,3 @@ import { css } from 'lit';
 
-      mwc-icon,
+      md-icon,
       md-icon {
@@ -27,0 +27,0 @@ color: var(--primary-color);

dist/stories/common-header-styles-actions.stories.d.ts

@@ -1,2 +0,2 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/context/ox-context-page-toolbar.js';
@@ -3,0 +3,0 @@ import { TemplateResult } from 'lit';

dist/stories/common-header-styles-actions.stories.js

@@ -1,2 +0,2 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import '@operato/context/ox-context-page-toolbar.js';
@@ -15,4 +15,16 @@ import { CommonHeaderStyles } from '../src/common-header-styles.js';
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
+
   <style>
@@ -29,3 +41,3 @@ body {
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
@@ -32,0 +44,0 @@ </div>

dist/stories/common-header-styles-pure.stories.d.ts

@@ -1,2 +0,2 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { TemplateResult } from 'lit';
@@ -3,0 +3,0 @@ declare const _default: {

dist/stories/common-header-styles-pure.stories.js

@@ -1,2 +0,2 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
 import { CommonHeaderStyles } from '../src/common-header-styles.js';
@@ -14,4 +14,16 @@ import { html } from 'lit';
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
+
   <style>
@@ -28,3 +40,3 @@ body {
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
@@ -41,4 +53,4 @@ </div>
         <div class="textbtn">Action</div>
-        <div class="iconbtn"><mwc-icon>save</mwc-icon></div>
-        <div class="iconbtn"><mwc-icon>delete</mwc-icon></div>
+        <div class="iconbtn"><md-icon>save</md-icon></div>
+        <div class="iconbtn"><md-icon>delete</md-icon></div>
       </div>
@@ -45,0 +57,0 @@ </div>

package.json

@@ -5,3 +5,3 @@ {
   "author": "heartyoh",
-  "version": "2.0.0-alpha.62",
+  "version": "2.0.0-alpha.68",
   "main": "dist/src/index.js",
@@ -54,3 +54,3 @@ "module": "dist/src/index.js",
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "0265a1407b7a20729845d67410297cc50975e2a8"
+  "gitHead": "147f2ca9e09180c6851dccacf340fc660e7548ab"
 }

src/button-container-styles.ts

@@ -11,2 +11,5 @@ import { css } from 'lit'
   .button-container mwc-button,
+  .button-container md-icon,
+  .button-container md-elevated-button,
+  .button-container md-elevated-button,
   .button-container button {
@@ -20,2 +23,9 @@ margin-left: var(--margin-default);
   }
+
+  md-button[danger],
+  md-elevated-button[danger],
+  md-elevated-button[danger] {
+    --md-theme-primary: var(--md-danger-button-primary-color);
+    --md-button-outline-color: var(--md-danger-button-outline-color);
+  }
 `

src/common-grist-styles.ts

@@ -23,3 +23,3 @@ import { css } from 'lit'
 
-    --mdc-icon-size: 24px;
+    --md-icon-size: 24px;
   }
@@ -31,5 +31,5 @@
 
-  #sorters mwc-icon,
-  #modes mwc-icon {
-    --mdc-icon-size: 18px;
+  #sorters md-icon,
+  #modes md-icon {
+    --md-icon-size: 18px;
   }
@@ -59,3 +59,3 @@ #sorters {
 
-  #modes > mwc-icon[active] {
+  #modes > md-icon[active] {
     border-radius: 9px;
@@ -68,3 +68,3 @@ background-color: rgba(var(--primary-color-rgb), 0.05);
 
-  #modes > mwc-icon:hover {
+  #modes > md-icon:hover {
     opacity: 1;
@@ -94,3 +94,3 @@ color: var(--secondary-text-color);
 
-  #add button mwc-icon {
+  #add button md-icon {
     font-size: 2em;
@@ -97,0 +97,0 @@ color: var(--theme-white-color);

src/common-header-styles.ts

@@ -25,3 +25,3 @@ import { css } from 'lit'
 
-      mwc-icon,
+      md-icon,
       md-icon {
@@ -28,0 +28,0 @@ color: var(--primary-color);

stories/common-header-styles-actions.stories.ts

@@ -1,2 +0,2 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/context/ox-context-page-toolbar.js'
@@ -29,4 +29,16 @@
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
+
   <style>
@@ -43,3 +55,3 @@ body {
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
@@ -46,0 +58,0 @@ </div>

stories/common-header-styles-pure.stories.ts

@@ -1,2 +0,2 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import { CommonHeaderStyles } from '../src/common-header-styles.js'
@@ -27,4 +27,16 @@
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
 
+
   <style>
@@ -41,3 +53,3 @@ body {
       <div class="title">
-        <mwc-icon>summarize</mwc-icon>
+        <md-icon>summarize</md-icon>
         ${label}
@@ -54,4 +66,4 @@ </div>
         <div class="textbtn">Action</div>
-        <div class="iconbtn"><mwc-icon>save</mwc-icon></div>
-        <div class="iconbtn"><mwc-icon>delete</mwc-icon></div>
+        <div class="iconbtn"><md-icon>save</md-icon></div>
+        <div class="iconbtn"><md-icon>delete</md-icon></div>
       </div>
@@ -58,0 +70,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

174196

increased by0.49%

Lines of code

2420

increased by2.63%

No dependency changes