Use rounded_corners feature flag to enable CSS vars

src/sidebar/components/HypothesisApp.tsx

 import classnames from 'classnames';
-import { useEffect, useMemo } from 'preact/hooks';
+import { useEffect, useLayoutEffect, useMemo } from 'preact/hooks';
 
 import { confirm } from '../../shared/prompts';
 import type { SidebarSettings } from '../../types/config';
@@ -49,6 +49,20 @@ function HypothesisApp({
   const route = store.route();
   const isModalRoute = route === 'notebook' || route === 'profile';
 
+  const roundedCornersEnabled = store.isFeatureEnabled('rounded_corners');
+  useLayoutEffect(() => {
+    const html = document.querySelector('html');
+
+    html?.style.setProperty(
+      '--h-border-radius',
+      roundedCornersEnabled ? '0.25rem' : null,
+    );
+    html?.style.setProperty(
+      '--h-border-radius-lg',
+      roundedCornersEnabled ? '0.5rem' : null,
+    );
+  }, [roundedCornersEnabled]);
+
   const backgroundStyle = useMemo(
     () => applyTheme(['appBackgroundColor'], settings),
     [settings],

src/sidebar/components/test/HypothesisApp-test.js

@@ -142,6 +142,24 @@ describe('HypothesisApp', () => {
     });
   });
 
+  [true, false].forEach(roundedCornersEnabled => {
+    it('defines border-radius CSS vars when the feature flag is enabled', () => {
+      fakeStore.isFeatureEnabled.returns(roundedCornersEnabled);
+      createComponent();
+
+      const styles = document.querySelector('html')?.style;
+
+      assert.equal(
+        styles.getPropertyValue('--h-border-radius'),
+        roundedCornersEnabled ? '0.25rem' : '',
+      );
+      assert.equal(
+        styles.getPropertyValue('--h-border-radius-lg'),
+        roundedCornersEnabled ? '0.5rem' : '',
+      );
+    });
+  });
+
   describe('auto-opening tutorial', () => {
     it('should open tutorial on profile load when criteria are met', () => {
       fakeShouldAutoDisplayTutorial.returns(true);