@operato/context 2.0.0-alpha.93 → 2.0.0-alpha.94

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+
+### :sparkles: Styling
+
+* material-theme tokens ([e12ad16](https://github.com/hatiolab/operato/commit/e12ad16f89c2e11ee7044883e1c4391cdd9d4372))
+
+
+
 ## [2.0.0-alpha.93](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.92...v2.0.0-alpha.93) (2024-04-19)
 
 **Note:** Version bump only for package @operato/context

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/context",
   "description": "Webcomponent context following open-wc recommendations",
   "author": "heartyoh",
-  "version": "2.0.0-alpha.93",
+  "version": "2.0.0-alpha.94",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -64,11 +64,11 @@
   },
   "dependencies": {
     "@material/web": "^1.4.0",
-    "@operato/help": "^2.0.0-alpha.93",
-    "@operato/input": "^2.0.0-alpha.92",
-    "@operato/layout": "^2.0.0-alpha.92",
-    "@operato/shell": "^2.0.0-alpha.92",
-    "@operato/styles": "^2.0.0-alpha.92",
+    "@operato/help": "^2.0.0-alpha.94",
+    "@operato/input": "^2.0.0-alpha.94",
+    "@operato/layout": "^2.0.0-alpha.94",
+    "@operato/shell": "^2.0.0-alpha.94",
+    "@operato/styles": "^2.0.0-alpha.94",
     "@operato/utils": "^2.0.0-alpha.68",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -106,5 +106,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "347b925d015c39a6531a3f67d9f48e44cc9c2ca7"
+  "gitHead": "cc04167fe6e9e7663aec78414fcb821b79f7b918"
 }

package/themes/material-theme.css

@@ -2,20 +2,27 @@ body {
   font-variation-settings: 'FILL' 1;
 
   /* meterial theme color */
-  --md-sys-color-primary: var(--theme-white-color);
+  --md-sys-color-primary: var(--primary-color);
   --md-sys-color-secondary: var(--secondary-color);
+  --md-sys-color-outline: rgba(var(--primary-color-rgb), 0.5);
+  --md-sys-color-on-primary: var(--theme-white-color);
+  --md-sys-color-on-surface-variant: var(--secondary-background-color);
+  --md-sys-color-on-surface: var(--primary-background-color);
+  --md-sys-color-outline-variant:rgba(var(--primary-color-rgb), 0.3);
 
-  --md-sys-shape-corner-small: 4px;
+  --md-sys-shape-corner-small: var(--border-radius);
   --md-sys-shape-corner-medium: 6px;
   --md-sys-shape-corner-large: 8px;
 
   --md-sys-shape-corner-full: var(--md-sys-shape-corner-small);
 
+  --md-sys-color-surface: var(--theme-white-color);
+  --md-sys-color-surface-container: var(--md-sys-color-surface);
   --md-sys-color-surface-container-high: var(--primary-color);
   --md-sys-color-surface-container-low: var(--secondary-color);
-  --md-sys-color-surface-container-highest: #e0e3e2;
+  --md-sys-color-surface-container-highest: var(--theme-white-color);
   --md-sys-color-surface-container-lowest: var(--secondary-color);
-  --md-sys-typescale-body-large: 400 1rem system-ui;
+  --md-sys-typescale-body-large: 400 1rem var(--theme-font);
 
   --md-filled-text-field-container-shape: 0px;
   --md-filled-text-field-label-text-color: #3f4948;
@@ -30,9 +37,52 @@ body {
   --md-outlined-select-text-field-input-text-color: #005353;
   --md-outlined-select-text-field-input-text-font: system-ui;
 
-  --md-menu-container-color: #f4f7fb;
-  --md-menu-container-shape: 0px;
-
   --md-fab-container-color: var(--primary-color);
   --md-fab-icon-color: var(--focus-color);
+
+  /* icon button tokens */
+  --md-icon-button-icon-size: 20px;
+
+  --md-filled-icon-button-container-width : 30px;
+  --md-filled-icon-button-container-height : 30px;
+  --md-filled-icon-button-icon-size: 20px;
+  --md-filled-icon-button-icon-size : var(--md-icon-button-icon-size);
+
+  --md-filled-tonal-icon-button-selected-container-color: var(--md-sys-color-primary);
+  --md-filled-tonal-icon-button-container-width:30px;
+  --md-filled-tonal-icon-button-container-height:30px;
+  --md-filled-tonal-icon-button-icon-size:var(--md-icon-button-icon-size);
+
+  --md-outlined-icon-button-container-width:30px;
+  --md-outlined-icon-button-container-height:30px;
+  --md-outlined-icon-button-icon-size:var(--md-icon-button-icon-size);
+
+
+  /* list tokens */
+  --md-list-item-leading-icon-color:var(--md-sys-color-primary);
+  --md-list-container-color: var(--md-sys-color-surface-container);
+  --md-list-item-container-shape: var(--md-sys-shape-corner-small);
+  --md-list-item-label-text-color: var(--primary-text-color);
+  --md-list-item-supporting-text-color: var(--secondary-text-color);
+  --md-list-item-trailing-supporting-text-color: var(--secondary-text-color);
+  --md-list-item-leading-icon-size:var(--md-icon-button-icon-size);
+  --md-list-item-trailing-icon-size:var(--md-icon-button-icon-size);
+
+  /* menu tokens */
+  --md-menu-container-color: var(--md-sys-color-surface-container);
+  --md-menu-container-shape: var(--md-sys-shape-corner-small);
+  --md-menu-item-selected-container-color: rgba(var(--primary-color-rgb), 0.2);
+
+  /* progress tokens */
+  --md-linear-progress-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* slider tokens */
+  --md-slider-inactive-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* switch tokens */
+  --md-switch-selected-handle-color: var(--md-sys-color-primary);
+  --md-switch-track-color: rgba(var(--secondary-color-rgb), 0.2);
+
+  /* tab tokens */
+  --md-primary-tab-icon-color: var(--md-sys-color-primary);
 }