Telegram UI kit guidlines - border radius and secondary button

kubk · Nov 15, 2023 · ae003af · ae003af
1 parent a58265c
commit ae003af
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 34 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,5 +1,6 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
   font-synthesis: none;

diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
@@ -64,7 +64,7 @@ export const DeckForm = observer(() => {
           className={css({
             cursor: "pointer",
             backgroundColor: theme.secondaryBgColor,
-            borderRadius: 8,
+            borderRadius: theme.borderRadius,
             padding: 12,
           })}
         >

diff --git a/src/screens/deck-list/deck-loading.tsx b/src/screens/deck-list/deck-loading.tsx
@@ -11,7 +11,7 @@ export const DeckLoading = () => {
         justifyContent: "space-between",
         cursor: "pointer",
         gap: 4,
-        borderRadius: 8,
+        borderRadius: theme.borderRadius,
         padding: "13px 12px",
         background: theme.secondaryBgColor,
       })}

diff --git a/src/screens/deck-list/my-deck.tsx b/src/screens/deck-list/my-deck.tsx
@@ -27,7 +27,7 @@ export const MyDeck = observer((props: Props) => {
         alignItems: "center",
         cursor: "pointer",
         gap: 4,
-        borderRadius: 8,
+        borderRadius: theme.borderRadius,
         padding: 12,
         background: theme.secondaryBgColor,
       })}

diff --git a/src/screens/deck-list/public-deck.tsx b/src/screens/deck-list/public-deck.tsx
@@ -20,7 +20,7 @@ export const PublicDeck = observer((props: Props) => {
         display: "flex",
         flexDirection: "column",
         gap: 4,
-        borderRadius: 8,
+        borderRadius: theme.borderRadius,
         padding: 12,
         cursor: "pointer",
         background: theme.secondaryBgColor,

diff --git a/src/screens/deck-review/deck-preview.tsx b/src/screens/deck-review/deck-preview.tsx
@@ -35,15 +35,16 @@ export const DeckPreview = observer(() => {
         display: "flex",
         flexDirection: "column",
         gap: 16,
+        paddingTop: 12,
       })}
     >
       <div
         className={css({
           display: "flex",
           flexDirection: "column",
           gap: 16,
-          borderRadius: 8,
-          padding: "8px 12px",
+          borderRadius: theme.borderRadius,
+          padding: "8px 16px",
           paddingBottom: 12,
           background: theme.secondaryBgColor,
         })}
@@ -74,9 +75,8 @@ export const DeckPreview = observer(() => {
           {deckListStore.myId && deck.author_id === deckListStore.myId ? (
             <Button
               icon={"mdi-pencil"}
+              noPseudoClasses
               outline
-              mainColor={theme.textColor}
-              transparent
               onClick={() => {
                 screenStore.navigateToDeckForm(deck.id);
               }}

diff --git a/src/screens/deck-review/share-deck-button.tsx b/src/screens/deck-review/share-deck-button.tsx
@@ -22,13 +22,7 @@ export const ShareDeckButton = (props: Props) => {
   };
 
   return (
-    <Button
-      icon={"mdi-share"}
-      mainColor={theme.textColor}
-      onClick={onClick}
-      transparent
-      outline
-    >
+    <Button icon={"mdi-share"} noPseudoClasses outline onClick={onClick}>
       Share deck
     </Button>
   );

diff --git a/src/ui/button.tsx b/src/ui/button.tsx
@@ -7,7 +7,7 @@ import { theme } from "./theme.tsx";
 type Props = {
   mainColor?: string;
   outline?: boolean;
-  transparent?: boolean;
+  noPseudoClasses?: boolean;
   icon?: string;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -18,6 +18,7 @@ export const Button = (props: Props) => {
     outline,
     children,
     icon,
+    noPseudoClasses,
     ...restProps
   } = props;
 
@@ -36,17 +37,17 @@ export const Button = (props: Props) => {
           alignItems: "center",
           backgroundColor: mainColor,
           cursor: "pointer",
-          ":hover": props.transparent
+          ":hover": noPseudoClasses
             ? undefined
             : {
                 backgroundColor: parsedColor.darken(0.1).toHex(),
               },
-          ":focus": props.transparent
+          ":focus": noPseudoClasses
             ? undefined
             : {
                 boxShadow: `0 0 0 0.2rem ${parsedColor.alpha(0.4).toHex()}`,
               },
-          ":active": props.transparent
+          ":active": noPseudoClasses
             ? undefined
             : {
                 backgroundColor: parsedColor.darken(0.1).toHex(),
@@ -69,17 +70,15 @@ export const Button = (props: Props) => {
         }),
         outline &&
           css({
-            backgroundColor: props.transparent
-              ? "rgba(0,0,0,0)"
-              : theme.bgColor,
+            backgroundColor: parsedColor.lighten(0.4).toHex(),
             color: mainColor,
-            transform: "scale(0.98)",
-            outline: `1px solid ${mainColor}`,
-            ":hover": props.transparent
+            ":hover": noPseudoClasses
               ? undefined
               : {
-                  backgroundColor: parsedColor.darken(0.08).toHex(),
-                  color: theme.bgColor,
+                  backgroundColor: parsedColor
+                    .lighten(0.4)
+                    .darken(0.08)
+                    .toHex(),
                 },
           }),
         className,

diff --git a/src/ui/progress-bar.tsx b/src/ui/progress-bar.tsx
@@ -11,7 +11,7 @@ export const ProgressBar = ({ value, max }: Props) => {
       className={css({
         width: "100%",
         backgroundColor: theme.secondaryBgColor,
-        borderRadius: 8,
+        borderRadius: theme.borderRadius,
         position: "relative",
         overflow: "hidden",
       })}

diff --git a/src/ui/theme.tsx b/src/ui/theme.tsx
@@ -15,12 +15,17 @@ const cssVarToValue = (cssProperty: string) => {
 const secondaryBgColor = "var(--tg-theme-secondary-bg-color)";
 const buttonColor = "var(--tg-theme-button-color)";
 const buttonTextColor = "var(--tg-theme-button-text-color)";
+const bgColor = "var(--tg-theme-bg-color)";
+const textColor = "var(--tg-theme-text-color)";
+const hintColor = "var(--tg-theme-hint-color)";
+const linkColor = "var(--tg-theme-link-color)";
 
 export const theme = {
-  bgColor: "var(--tg-theme-bg-color)",
-  textColor: "var(--tg-theme-text-color)",
-  hintColor: "var(--tg-theme-hint-color)",
-  linkColor: "var(--tg-theme-link-color)",
+  bgColor,
+  textColor,
+  hintColor,
+  hintColorComputed: cssVarToValue(hintColor),
+  linkColor,
   buttonColor,
   buttonTextColor,
   secondaryBgColor,
@@ -35,5 +40,5 @@ export const theme = {
   danger: "#fc2025",
   dangerLight: colord("#fc2025").alpha(0.4).toHex(),
 
-  borderRadius: 8,
+  borderRadius: 12,
 };