### How to handle zoom in application level.

To provide customization used sizes in UCL components.

I have decied rename the themeProvider as UCLProvider.   

1. CSS Transform scale tried
2. https://www.youtube.com/watch?v=4-wjP0JCUSU&t=232s - working trail.
   Looking At How Browser Zoom Affects CSS Media Queries And Pixel-Density
   https://www.bennadel.com/blog/3811-looking-at-how-browser-zoom-affects-css-media-queries-and-pixel-density.htm 

3. Discussion with BK 
Zoom:-  zd_baseSize
Border => X  ( more than 1 ).
==>  padding,  margin, width,  height
==> top,left,right,bottom , box-shadow  => X 
===> zd_baseFontSize will changed based on Zoom

--zd_size26: calc((26 / var(--zd_baseSize)) * var(--zd_baseUnit));


4. https://usability.yale.edu/web-accessibility/articles/zoom-resizing-text
How Browsers Zoom and Resize Text
Avoid Clipped, Truncated, Obscured, and Overlapping Text
Avoid Horizontal Scrolling
Development Best Practices


https://www.w3schools.com/accessibility/accessibility_page_zoom.php
1. Page zoom often triggers mobile view on responsive sites, which is good.
2. All content and functionality is available No content should be hidden when zoomed.
3. https://www.w3schools.com/accessibility/accessibility_page_zoom.php


5. Accessiblity Level Rules
https://www.boia.org/blog/give-yourself-an-accessibility-test-zoom-your-page-to-200

https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

6. meta viewport allows for zoom
https://www.w3.org/WAI/standards-guidelines/act/rules/meta-viewport-b4f0c3/


8. What is pixel devicePixelRatio and PPI on Zooming.  window.devicePixelRatio
 
