@operato/styles - npm Package Compare versions

Comparing version 2.0.0-alpha.56 to 2.0.0-alpha.57

CHANGELOG.md

@@ -6,3 +6,3 @@ # Change Log
 
-## [2.0.0-alpha.56](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.55...v2.0.0-alpha.56) (2024-04-04)
+## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
 
@@ -12,6 +12,15 @@
 
-* common-header-styles ([5a34264](https://github.com/hatiolab/operato/commit/5a3426437fbebb60c69555fd76307c3db5a21cf9))
+* common header style capitalize ([f4cceda](https://github.com/hatiolab/operato/commit/f4ccedabb7f15e0b240750a97308be438483bc0f))
+* header style ([097c493](https://github.com/hatiolab/operato/commit/097c49368023c74090c91b199dcb12bf6a249efb))
 
 
 
+
+
+**Note:** Version bump only for package @operato/styles
+
+
+
+
+
 ## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
@@ -18,0 +27,0 @@

dist/src/common-header-styles.js

@@ -10,27 +10,20 @@ import { css } from 'lit';
     padding: calc(var(--padding-default) / 2) var(--padding-default);
-    background-color: transparent;
-    box-shadow: none;
-    font-size: 0.9em;
 
     align-items: center;
-    --mdc-icon-size: 24px;
-    --mdc-theme-primary: var(--primary-color);
 
-    mwc-icon {
-      color: var(--primary-color);
-      font-size: var(--fontsize-large);
-    }
-
     .title {
       grid-area: title;
-
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-intra-title, 4px);
+      gap: var(--padding-narrow);
 
-      font-weight: bold;
-      font-size: var(--fontsize-default);
+      font: var(--subtitle-font);
       color: var(--primary-text-color);
       text-transform: capitalize;
+
+      mwc-icon {
+        color: var(--primary-color);
+        font-size: calc(var(--icon-default-size) / 2);
+      }
     }
@@ -40,24 +33,23 @@
       grid-area: filters;
-      border: 1px solid rgba(var(--primary-color-rgb), 0.3);
+      border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+      border-radius: var(--border-radius);
       background-color: rgba(var(--primary-color-rgb), 0.1);
       padding: var(--padding-default);
-
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-inter-filter, 10px);
-    }
+      gap: var(--padding-wide);
 
-    label {
-      font-weight: bold;
-      font-size: var(--fontsize-default);
-      color: var(--primary-text-color);
-    }
+      .filter {
+        display: flex;
+        flex-direction: row;
 
-    .filter {
-      display: flex;
-      flex-direction: row;
+        align-items: center;
+        gap: var(--padding-narrow);
+      }
 
-      align-items: center;
-      gap: var(--gap-intra-filter, 4px);
+      label {
+        font: 600 var(--fontsize-default) var(--theme-font);
+        color: var(--label-color);
+      }
     }
@@ -72,7 +64,6 @@
       margin-left: auto;
-
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
-      gap: var(--gap-inter-action, 6px);
+      gap: var(--padding-narrow);
 
@@ -83,26 +74,27 @@ * {
 
-      .textbtn {
-        background-color: var(--button-primary-background-color);
-        border: 0;
-        border-radius: 2px;
+      .textbtn,
+      .iconbtn {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
 
-        color: var(--button-primary-color);
-        font-size: var(--fontsize-default);
-      }
+        color: var(--button-color);
+        font: var(--button-font);
 
-      .textbtn:hover {
-        background-color: var(--button-primary-active-background-color);
+        &:hover {
+          border: var(--button-activ-border);
+          background-color: var(--button-activ-background-color);
+          box-shadow: var(--button-active-box-shadow);
+
+          color: var(--button-activ-color);
+        }
       }
-
       .iconbtn {
-        --mdc-icon-size: 20px;
-        background-color: var(--theme-white-color);
-        border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-        padding: 1px;
-        color: var(--primary-color);
-      }
+        padding: var(--iconbtn-padding);
+        line-height: 0.9;
 
-      .iconbtn:hover {
-        background-color: var(--button-primary-active-background-color);
-        color: var(--theme-white-color);
+        mwc-icon {
+          --mdc-icon-size: var(--iconbtn-size);
+        }
       }
@@ -119,8 +111,9 @@ }
       grid-template-areas:
-        'title actions'
+        'title'
+        'actions'
         'filters';
 
       .filters {
-        flex-direction: column;
-        align-items: start;
+        flex-wrap: wrap;
+        gap: var(--padding-default);
       }
@@ -127,0 +120,0 @@ }

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

@@ -32,3 +32,5 @@ import '@material/mwc-icon';
       <div class="filters">
-        <label>Filter</label><input type="text"></input>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
       </div>
@@ -38,4 +40,4 @@
         <div class="textbtn">Action</div>
-        <div class="iconbtn"><mwc-icon class="iconbtn">save</mwc-icon></div>
-        <div class="iconbtn"><mwc-icon class="iconbtn">delete</mwc-icon></div>
+        <div class="iconbtn"><mwc-icon>save</mwc-icon></div>
+        <div class="iconbtn"><mwc-icon>delete</mwc-icon></div>
       </div>
@@ -42,0 +44,0 @@ </div>

package.json

@@ -5,3 +5,3 @@ {
   "author": "heartyoh",
-  "version": "2.0.0-alpha.56",
+  "version": "2.0.0-alpha.57",
   "main": "dist/src/index.js",
@@ -54,3 +54,3 @@ "module": "dist/src/index.js",
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "e264846b050ee04d528011fc11d4d2b838fb7755"
+  "gitHead": "2786e62dc37ead8c5a858869baa5c083dce24e93"
 }

src/common-header-styles.ts

@@ -11,27 +11,20 @@ import { css } from 'lit'
     padding: calc(var(--padding-default) / 2) var(--padding-default);
-    background-color: transparent;
-    box-shadow: none;
-    font-size: 0.9em;
 
     align-items: center;
-    --mdc-icon-size: 24px;
-    --mdc-theme-primary: var(--primary-color);
 
-    mwc-icon {
-      color: var(--primary-color);
-      font-size: var(--fontsize-large);
-    }
-
     .title {
       grid-area: title;
-
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-intra-title, 4px);
+      gap: var(--padding-narrow);
 
-      font-weight: bold;
-      font-size: var(--fontsize-default);
+      font: var(--subtitle-font);
       color: var(--primary-text-color);
       text-transform: capitalize;
+
+      mwc-icon {
+        color: var(--primary-color);
+        font-size: calc(var(--icon-default-size) / 2);
+      }
     }
@@ -41,24 +34,23 @@
       grid-area: filters;
-      border: 1px solid rgba(var(--primary-color-rgb), 0.3);
+      border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+      border-radius: var(--border-radius);
       background-color: rgba(var(--primary-color-rgb), 0.1);
       padding: var(--padding-default);
-
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-inter-filter, 10px);
-    }
+      gap: var(--padding-wide);
 
-    label {
-      font-weight: bold;
-      font-size: var(--fontsize-default);
-      color: var(--primary-text-color);
-    }
+      .filter {
+        display: flex;
+        flex-direction: row;
 
-    .filter {
-      display: flex;
-      flex-direction: row;
+        align-items: center;
+        gap: var(--padding-narrow);
+      }
 
-      align-items: center;
-      gap: var(--gap-intra-filter, 4px);
+      label {
+        font: 600 var(--fontsize-default) var(--theme-font);
+        color: var(--label-color);
+      }
     }
@@ -73,7 +65,6 @@
       margin-left: auto;
-
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
-      gap: var(--gap-inter-action, 6px);
+      gap: var(--padding-narrow);
 
@@ -84,26 +75,27 @@ * {
 
-      .textbtn {
-        background-color: var(--button-primary-background-color);
-        border: 0;
-        border-radius: 2px;
+      .textbtn,
+      .iconbtn {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
 
-        color: var(--button-primary-color);
-        font-size: var(--fontsize-default);
-      }
+        color: var(--button-color);
+        font: var(--button-font);
 
-      .textbtn:hover {
-        background-color: var(--button-primary-active-background-color);
+        &:hover {
+          border: var(--button-activ-border);
+          background-color: var(--button-activ-background-color);
+          box-shadow: var(--button-active-box-shadow);
+
+          color: var(--button-activ-color);
+        }
       }
-
       .iconbtn {
-        --mdc-icon-size: 20px;
-        background-color: var(--theme-white-color);
-        border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-        padding: 1px;
-        color: var(--primary-color);
-      }
+        padding: var(--iconbtn-padding);
+        line-height: 0.9;
 
-      .iconbtn:hover {
-        background-color: var(--button-primary-active-background-color);
-        color: var(--theme-white-color);
+        mwc-icon {
+          --mdc-icon-size: var(--iconbtn-size);
+        }
       }
@@ -120,8 +112,9 @@ }
       grid-template-areas:
-        'title actions'
+        'title'
+        'actions'
         'filters';
 
       .filters {
-        flex-direction: column;
-        align-items: start;
+        flex-wrap: wrap;
+        gap: var(--padding-default);
       }
@@ -128,0 +121,0 @@ }

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

@@ -45,3 +45,5 @@ import '@material/mwc-icon'
       <div class="filters">
-        <label>Filter</label><input type="text"></input>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
       </div>
@@ -51,4 +53,4 @@
         <div class="textbtn">Action</div>
-        <div class="iconbtn"><mwc-icon class="iconbtn">save</mwc-icon></div>
-        <div class="iconbtn"><mwc-icon class="iconbtn">delete</mwc-icon></div>
+        <div class="iconbtn"><mwc-icon>save</mwc-icon></div>
+        <div class="iconbtn"><mwc-icon>delete</mwc-icon></div>
       </div>
@@ -55,0 +57,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

172467

increased by0.52%

No dependency changes