@zohodesk/theme

How to handle zoom in application level.

To provide customization used sizes in UCL components.

I have decied rename the themeProvider as ThemeProvider.

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));

1. 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

4. 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

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

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