GitFOSS
feat(design): add backdrop-filter blur effect on header + commit summary
+ 18
- 4
@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1665547078652,
+  "_generatedAtUnix": 1665548534981,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "islands": {

...
@@ -114,7 +114,7 @@
       "pathSource": "./app/views/repository/RepositoryCreateView.tsx"
     },
     "RepositoryDetailsView": {
-      "hash": "281b2477d757abc076a20ab7c4c4b52be2d47181",
+      "hash": "6b230566a513b666891367b83ed16575106afb8f",
       "pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
     },
     "RepositoryExploreView": {

app/components/Layout.tsx
@@ -119,6 +119,8 @@ const StyledPageHeaderWrapper = styled.div<WithThemeSchemeProp>`
   gap: 20px;
   padding: 0 20px;
 
+  backdrop-filter: blur(8px);
+
   ${({ themeScheme }) => css`
     background-color: ${NamedColors.HEADER[themeScheme]};
     border-bottom: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};

app/utils/style/Colors.ts
@@ -9,13 +9,17 @@ const Colors = {
   GRAY_LIGHT_07: "#D5D5D5",
   GRAY_LIGHT_08: "#D8D8D8",
   GRAY_DARK_01: "#272727",
+  GRAY_DARK_01_ALPHA_01: "#272727a1",
   GRAY_DARK_02: "#444444",
   GRAY_DARK_03: "#333333",
   GRAY_DARK_04: "#222222",
   GRAY_DARK_05: "#171717",
+  GRAY_DARK_05_ALPHA_01: "#171717a1",
   GRAY_DARK_06: "#B6B6B6",
   WHITE_ALPHA_50: "rgba(255, 255, 255, 0.5)",
   WHITE_01: "#FFFFFF",
+  WHITE_ALPHA_01: "#FFFFFFa1",
+  BLACK_ALPHA_01: "#000000a1",
   BLACK_ALPHA_50: "rgba(0, 0, 0, 0.5)",
   BLACK_01: "#111111",
   BLACK_LIGHTER_01: "rgb(34, 34, 34)",

app/utils/style/NamedColors.ts
@@ -29,13 +29,17 @@ const NamedColors = {
     dark: Colors.GRAY_DARK_01,
     light: Colors.WHITE_01,
   },
+  CARD_ALPHA_01: {
+    dark: Colors.GRAY_DARK_01_ALPHA_01,
+    light: Colors.WHITE_ALPHA_01,
+  },
   CARD_OVERLAY: {
     dark: Colors.GRAY_DARK_05,
     light: Colors.GRAY_LIGHT_05,
   },
   HEADER: {
-    light: Colors.WHITE_01,
-    dark: Colors.GRAY_DARK_05,
+    light: Colors.WHITE_ALPHA_01,
+    dark: Colors.GRAY_DARK_05_ALPHA_01,
   },
   INPUT: {
     light: Colors.WHITE_01,

app/views/repository/RepositoryDetailsView.tsx
@@ -13,6 +13,7 @@ import type {
   RepositoryLog,
   RepositoryWithForkedFromRepo,
 } from "../../types";
+import { NamedColors } from "../../utils/style";
 import {
   Card,
   Grid,

...
@@ -123,6 +124,9 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
                 <Card
                   data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
                   style={{
+                    backdropFilter: "blur(8px)",
+                    backgroundColor:
+                      NamedColors.CARD_ALPHA_01[commonProps.themeScheme],
                     width: "100%",
                     padding: 8,
                     position: "sticky",