Add appearance setting for rounded corners. Closes #2471

web/pages/admin/config/appearance/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 
-import { Button, Col, Collapse, Row, Space } from 'antd';
+import { Button, Col, Collapse, Row, Slider, Space } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import Title from 'antd/lib/typography/Title';
 import { EditCustomStyles } from '../../../../components/config/EditCustomStyles';
@@ -97,6 +97,8 @@ export default function Appearance() {
     { name: 'theme-color-components-scrollbar-thumb', description: 'Scrollbar Thumb' },
   ];
 
+  const others = [{ name: 'theme-rounded-corners', description: 'Corner radius' }];
+
   const [colors, setColors] = useState<Record<string, AppearanceVariable>>();
   const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
 
@@ -109,12 +111,14 @@ export default function Appearance() {
 
   const setColorDefaults = () => {
     const c = {};
-    [...paletteVariables, ...componentColorVariables, ...chatColorVariables].forEach(color => {
-      const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(
-        `--${color.name}`,
-      );
-      c[color.name] = { value: resolvedColor.trim(), description: color.description };
-    });
+    [...paletteVariables, ...componentColorVariables, ...chatColorVariables, ...others].forEach(
+      color => {
+        const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(
+          `--${color.name}`,
+        );
+        c[color.name] = { value: resolvedColor.trim(), description: color.description };
+      },
+    );
     setColors(c);
   };
 
@@ -179,6 +183,12 @@ export default function Appearance() {
     return <div>Loading...</div>;
   }
 
+  const onBorderRadiusChange = (value: string) => {
+    const variableName = 'theme-rounded-corners';
+
+    updateColor(variableName, `${value.toString()}px`, '');
+  };
+
   return (
     <Space direction="vertical">
       <Title>Customize Appearance</Title>
@@ -239,6 +249,32 @@ export default function Appearance() {
               })}
             </Row>
           </Panel>
+          <Panel header={<Title level={3}>Other Settings</Title>} key="4">
+            How rounded should corners be?
+            <Row gutter={[16, 16]}>
+              <Col span={12}>
+                <Slider
+                  min={0}
+                  max={20}
+                  tooltip={{ formatter: null }}
+                  onChange={v => {
+                    onBorderRadiusChange(v);
+                  }}
+                  value={Number(colors['theme-rounded-corners']?.value?.replace('px', '') || 0)}
+                />
+              </Col>
+              <Col span={4}>
+                <div
+                  style={{
+                    width: '100px',
+                    height: '30px',
+                    borderRadius: `${colors['theme-rounded-corners']?.value}`,
+                    backgroundColor: 'var(--theme-color-palette-7)',
+                  }}
+                />
+              </Col>
+            </Row>
+          </Panel>
         </Collapse>
       </div>
 

web/style-definitions/tokens/color/default-theme.yaml

@@ -5,7 +5,7 @@
 
 theme:
   rounded-corners:
-    value: 0.5rem
+    value: 9px
     comment: 'How much corners are rounded in places in the UI.'
   unknown-1:
     value: 'green'

web/styles/theme.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Sun, 13 Nov 2022 20:49:29 GMT
+// Generated on Wed, 21 Dec 2022 07:38:01 GMT
 // 
 // How to edit these values:
 // Edit the corresponding token file under the style-definitions directory
@@ -30,7 +30,7 @@
 @primary-8: #da9eff; // Fun color 2
 @component-background: #e2e8f0; // Light primary
 @body-background: #e2e8f0; // Light primary
-@theme-rounded-corners: 0.5rem; // How much corners are rounded in places in the UI.
+@theme-rounded-corners: 9px; // How much corners are rounded in places in the UI.
 @theme-unknown-1: green; // This should never be used and it means something is wrong.
 @theme-unknown-2: red; // This should never be used and it means something is wrong.
 @theme-text-body-font-family: var(--font-owncast-body); // The font family used for the body text.

web/styles/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 13 Nov 2022 20:49:29 GMT
+ * Generated on Wed, 21 Dec 2022 07:38:01 GMT
  * 
  * How to edit these values:
  * Edit the corresponding token file under the style-definitions directory
@@ -32,7 +32,7 @@
   --primary-8: #da9eff; /* Fun color 2 */
   --component-background: #e2e8f0; /* Light primary */
   --body-background: #e2e8f0; /* Light primary */
-  --theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */
+  --theme-rounded-corners: 9px; /* How much corners are rounded in places in the UI. */
   --theme-unknown-1: green; /* This should never be used and it means something is wrong. */
   --theme-unknown-2: red; /* This should never be used and it means something is wrong. */
   --theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */