Today I finished my portfolio Material 3 components for Vue 3.

• material-color-utilities

  9 1,493 2.3 Dart

  Color libraries for Material You

  

If you mean if I customized any existing component library to look like Material 3. No, everything from scratch. Only used one external npm dependency https://github.com/material-foundation/material-color-utilities for HCT color model to generate Monet colors tones. At first I was using native CSS HSL adjusting lightness value, then Google recently released this HCT algorithm and I replaced HSL with HCT as this giving more accurate shade. And I took some inspiration from official Material 3 docs, Flutter Material 3 like https://github.com/flutter/flutter/issues/91605, Material UI (React), Vuetify, Equal UI, Vuesax, Muse UI, PrimeVue, Quasar, Angular Material, Chakra UI (React) and implemented in own new ways. Like the ripple implementation is completely different, improved in mine. Material UI internally usage PopperJS dependency (new name Floating UI) to position Tooltips, Menus https://github.com/mui/material-ui/blob/master/packages/mui-base/package.json#L58. Didn't used Floating UI (minified CDN 10KB) instead I created custom more lightweight (minified 1KB) positioning engine which internally used as Vue composables for now, yet to be documented.

• Flutter

  1,203 161,934 10.0 Dart

  Flutter makes it easy and fast to build beautiful apps for mobile and beyond

  

If you mean if I customized any existing component library to look like Material 3. No, everything from scratch. Only used one external npm dependency https://github.com/material-foundation/material-color-utilities for HCT color model to generate Monet colors tones. At first I was using native CSS HSL adjusting lightness value, then Google recently released this HCT algorithm and I replaced HSL with HCT as this giving more accurate shade. And I took some inspiration from official Material 3 docs, Flutter Material 3 like https://github.com/flutter/flutter/issues/91605, Material UI (React), Vuetify, Equal UI, Vuesax, Muse UI, PrimeVue, Quasar, Angular Material, Chakra UI (React) and implemented in own new ways. Like the ripple implementation is completely different, improved in mine. Material UI internally usage PopperJS dependency (new name Floating UI) to position Tooltips, Menus https://github.com/mui/material-ui/blob/master/packages/mui-base/package.json#L58. Didn't used Floating UI (minified CDN 10KB) instead I created custom more lightweight (minified 1KB) positioning engine which internally used as Vue composables for now, yet to be documented.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project