Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add base styles for colors and typography
Rūdolfs Ošiņš committed 1 year ago
commit 38eb8a6f28c936ec62712fb6ecd351e3b5d92ed4
parent 7e666475d1907f0b9f65418a2c83f139b3c64b85
3 files changed +268 -23
modified index.html
@@ -1,24 +1,66 @@
<!doctype html>

<html lang="en">
+ 
  <head>
+ 
    <meta charset="UTF-8" />
+ 
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ 
    <title>Radicle</title>
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/Inter-Regular.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/Inter-Medium.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/Inter-SemiBold.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/Inter-Bold.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/JetBrainsMono-Regular.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/JetBrainsMono-Medium.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/JetBrainsMono-SemiBold.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
+ 
    <link
+ 
      rel="preload"
+ 
      href="/fonts/JetBrainsMono-Bold.woff2"
+ 
      as="font"
+ 
      type="font/woff2"
+ 
      crossorigin="anonymous" />
- 
<head>
- 
  <meta charset="UTF-8" />
- 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- 
  <title>Radicle</title>
+ 
    <link rel="stylesheet" type="text/css" href="/index.css" />
+ 
    <link rel="stylesheet" type="text/css" href="/typography.css" />
+ 
    <link rel="stylesheet" type="text/css" href="/colors.css" />
+ 
  </head>
- 
  <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
- 
  <link rel="preload" href="/fonts/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
- 
  <link rel="preload" href="/fonts/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
- 
  <link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-
- 
  <link rel="stylesheet" href="/index.css">
- 
  <link rel="stylesheet" href="/colors.css">
- 
  <link rel="stylesheet" href="/typography.css">
- 
</head>
-
- 
<body>
- 
  <div id="app"></div>
- 
  <script type="module" src="/src/main.ts"></script>
- 
</body>
-
- 
</html>
 

\ No newline at end of file
+ 
  <body>
+ 
    <div id="app"></div>
+ 
    <script type="module" src="/src/main.ts"></script>
+ 
  </body>
+ 
</html>
modified public/colors.css
@@ -1,9 +1,121 @@
:root {
+ 
  --color-background-default: #f5f5ff;
+ 
  --color-background-float: #fafaff;
+ 
  --color-background-dip: #f5f5ff;
+ 
  --color-foreground-contrast: #232563;
+ 
  --color-foreground-dim: #6a6a81;
+ 
  --color-foreground-emphasized: #8585ff;
+ 
  --color-foreground-emphasized-hover: #7070ff;
+ 
  --color-foreground-match-background: #f5f5ff;
+ 
  --color-foreground-white: #ffffff;
+ 
  --color-foreground-black: #000000;
+ 
  --color-foreground-primary: #ff55ff;
+ 
  --color-foreground-primary-hover: #ff8fff;
+ 
  --color-foreground-success: #4fa877;
+ 
  --color-foreground-red: #aa5078;
+ 
  --color-foreground-yellow: #b29401;
+ 
  --color-foreground-disabled: #9b9bb1;
+ 
  --color-border-hint: #dbdbff;
+ 
  --color-border-default: #dbdbff;
+ 
  --color-border-focus: #7070ff;
+ 
  --color-border-contrast: #24252d;
+ 
  --color-border-error: #ce97af;
+ 
  --color-border-merged: #ffe5ff;
+ 
  --color-border-match-background: #f5f5ff;
+ 
  --color-border-primary: #ff1aff;
+ 
  --color-border-primary-hover: #ff55ff;
+ 
  --color-border-selected: #dbdbff;
+ 
  --color-border-warning: #ffe609;
+ 
  --color-border-success: #97ceb0;
+ 
  --color-fill-secondary: #7070ff;
+ 
  --color-fill-secondary-hover: #8585ff;
+ 
  --color-fill-ghost: #ebebff;
+ 
  --color-fill-ghost-hover: #f5f5ff;
+ 
  --color-fill-separator: #dbdbff;
+ 
  --color-fill-primary: #ff55ff;
+ 
  --color-fill-primary-hover: #ff70ff;
+ 
  --color-fill-primary-shade: #ff1aff;
+ 
  --color-fill-danger: #be7495;
+ 
  --color-fill-yellow: #ffe609;
+ 
  --color-fill-yellow-iconic: #ffff55;
+ 
  --color-fill-gray: #9b9bb1;
+ 
  --color-fill-secondary-shade: #5555ff;
+ 
  --color-fill-diff-red: #efdce4;
+ 
  --color-fill-diff-red-light: #f7eef2;
+ 
  --color-fill-success: #4fa877;
+ 
  --color-fill-diff-green: #badeca;
+ 
  --color-fill-diff-green-light: #dcefe5;
+ 
  --color-fill-float: #fafaff;
+ 
  --color-fill-float-hover: #dbdbff;
+ 
  --color-fill-merged: #ffeeff;
+ 
  --color-fill-selected: #ebebff;
+ 
  --color-fill-warning: #ffffe5;
+ 
  --color-fill-counter: #fafaff;
+ 
  --color-fill-counter-emphasized: #dbdbff;
+ 
  --color-fill-delegate: #ffe5ff;
+ 
  --color-fill-private: #fff5d6;
+ 
  --color-fill-secondary-counter: #9497ff;
+ 
  --color-fill-primary-counter: #ff8fff;
+ 
  --color-fill-ghost-shade: #dbdbff;
+ 
}
+
+ 
:root[data-theme="dark"] {

  --color-background-default: #0a0d10;
+ 
  --color-background-float: #14151a;
+ 
  --color-background-dip: #000000;

  --color-foreground-contrast: #f9f9fb;
+ 
  --color-foreground-dim: #9b9bb1;
+ 
  --color-foreground-emphasized: #7070ff;
+ 
  --color-foreground-emphasized-hover: #8585ff;
+ 
  --color-foreground-match-background: #0a0d10;
+ 
  --color-foreground-white: #ffffff;
+ 
  --color-foreground-black: #000000;
+ 
  --color-foreground-primary: #ff55ff;
+ 
  --color-foreground-primary-hover: #ff8fff;
+ 
  --color-foreground-success: #4fa877;
+ 
  --color-foreground-red: #aa5078;
+ 
  --color-foreground-yellow: #e5c001;

  --color-foreground-disabled: #6a6a81;
+ 
  --color-border-hint: #24252d;

  --color-border-default: #2e2f38;
- 
  --color-background-float: #14151a;
- 
  --color-fill-float-hover: #1b1c22;
+ 
  --color-border-focus: #7070ff;
+ 
  --color-border-contrast: #ebebff;
+ 
  --color-border-error: #6b2b42;
+ 
  --color-border-merged: #6b006b;
+ 
  --color-border-match-background: #0a0d10;
+ 
  --color-border-primary: #ff1aff;
+ 
  --color-border-primary-hover: #ff55ff;
+ 
  --color-border-selected: #232563;
+ 
  --color-border-warning: #4c4000;
+ 
  --color-border-success: #2a5a40;
+ 
  --color-fill-secondary: #7070ff;
+ 
  --color-fill-secondary-hover: #8585ff;
+ 
  --color-fill-secondary-shade: #5555ff;

  --color-fill-ghost: #24252d;
+ 
  --color-fill-ghost-hover: #2e2f38;
+ 
  --color-fill-separator: #24252d;
+ 
  --color-fill-primary: #ff1aff;
+ 
  --color-fill-primary-hover: #ff4dff;
+ 
  --color-fill-primary-shade: #e500e5;
+ 
  --color-fill-danger: #aa5078;
+ 
  --color-fill-yellow: #ffe609;
+ 
  --color-fill-yellow-iconic: #ffff55;
+ 
  --color-fill-gray: #9b9bb1;
+ 
  --color-fill-diff-red: #4d1929;
+ 
  --color-fill-diff-red-light: #2d060d;
+ 
  --color-fill-success: #4fa877;
+ 
  --color-fill-diff-green: #183425;
+ 
  --color-fill-diff-green-light: #142a1d;
+ 
  --color-fill-float: #14151a;
+ 
  --color-fill-float-hover: #1b1c22;
+ 
  --color-fill-merged: #1a001a;
+ 
  --color-fill-selected: #16173d;
+ 
  --color-fill-warning: #191500;
+ 
  --color-fill-counter: #393a46;
+ 
  --color-fill-counter-emphasized: #16173d;
+ 
  --color-fill-delegate: #3d003d;
+ 
  --color-fill-private: #4c4000;
+ 
  --color-fill-secondary-counter: #9497ff;
+ 
  --color-fill-primary-counter: #ff8fff;
+ 
  --color-fill-ghost-shade: #1b1c22;

}
modified public/typography.css
@@ -5,18 +5,21 @@
  font-display: swap;

  src: url("fonts/Inter-Regular.woff2");

}
+ 


@font-face {

  font-family: "Inter";

  font-weight: 500;

  font-display: swap;

  src: url("fonts/Inter-Medium.woff2");

}
+ 


@font-face {

  font-family: "Inter";

  font-weight: 600;

  font-display: swap;

  src: url("fonts/Inter-SemiBold.woff2");

}
+ 


@font-face {

  font-family: "Inter";

  font-weight: 700;
@@ -24,20 +27,79 @@
  src: url("fonts/Inter-Bold.woff2");

}
+ 
@font-face {
+ 
  font-family: "JetBrains Mono";
+ 
  font-style: normal;
+ 
  font-weight: 400;
+ 
  font-display: swap;
+ 
  src: url("fonts/JetBrainsMono-Regular.woff2");
+ 
}
+
+ 
@font-face {
+ 
  font-family: "JetBrains Mono";
+ 
  font-style: normal;
+ 
  font-weight: 500;
+ 
  font-display: swap;
+ 
  src: url("fonts/JetBrainsMono-Medium.woff2");
+ 
}
+
+ 
@font-face {
+ 
  font-family: "JetBrains Mono";
+ 
  font-weight: 600;
+ 
  font-display: swap;
+ 
  src: url("fonts/JetBrainsMono-SemiBold.woff2");
+ 
}
+
+ 
@font-face {
+ 
  font-family: "JetBrains Mono";
+ 
  font-weight: 700;
+ 
  font-display: swap;
+ 
  src: url("fonts/JetBrainsMono-Bold.woff2");
+ 
}
+ 


:root {

  --font-family-sans-serif: Inter, sans-serif;
+ 
  --font-family-monospace: monospace;
+ 
  --font-weight-regular: 400;
+ 
  --font-weight-medium: 500;
+ 
  --font-weight-semibold: 600;
+ 
  --font-weight-bold: 700;
+ 
  --font-size-tiny: 0.75rem; /* 12px */

  --font-size-small: 0.875rem; /* 14px */

  --font-size-regular: 1rem; /* 16px */

  --font-size-medium: 1.25rem; /* 20px */
- 
  --font-weight-semibold: 600;
+ 
  --font-size-large: 1.5rem; /* 24px */
+ 
  --font-size-x-large: 2rem; /* 32px */
+ 
  --font-size-xx-large: 3rem; /* 48px */
+ 
}
+
+ 
[data-codefont="system"] {
+ 
  --font-family-monospace: monospace;
+ 
}
+
+ 
[data-codefont="jetbrains"] {
+ 
  --font-family-monospace: "JetBrains Mono";

}



html {
+ 
  -ms-text-size-adjust: 100%;
+ 
  -webkit-font-smoothing: antialiased;
+ 
  -webkit-text-size-adjust: 100%;

  font-family: var(--font-family-sans-serif);
+ 
  font-feature-settings: "zero";
+ 
  /* The root element font size has to be set in px,
+ 
   * otherwise Safari breaks. */

  font-size: 16px;

  font-weight: var(--font-weight-regular);
+ 
  line-height: 1.5;

}
+ 
p {
+ 
  margin: 1rem 0;
+ 
}
+ 
.txt-tiny {
+ 
  font-size: var(--font-size-tiny);
+ 
}

.txt-small {

  font-size: var(--font-size-small);

}
@@ -47,7 +109,36 @@ html {
.txt-medium {

  font-size: var(--font-size-medium);

}
+ 
.txt-large {
+ 
  font-size: var(--font-size-large);
+ 
}
+ 
.txt-huge {
+ 
  font-size: var(--font-size-x-large);
+ 
}
+ 
.txt-humongous {
+ 
  font-size: var(--font-size-xx-large);
+ 
}
+ 
.txt-monospace {
+ 
  font-family: var(--font-family-monospace);
+ 
}
+ 
.txt-bold {
+ 
  font-weight: var(--font-weight-bold) !important;
+ 
}

.txt-semibold {

  font-weight: var(--font-weight-semibold) !important;

}
+ 
.txt-missing {
+ 
  color: var(--color-foreground-dim);
+ 
}
+ 
.txt-emoji {
+ 
  height: 1em;
+ 
  width: 1em;
+ 
  margin: 0 0.05em 0 0.1em;
+ 
  vertical-align: -0.1em;
+ 
}
+ 
.txt-overflow {
+ 
  overflow: hidden;
+ 
  text-overflow: ellipsis;
+ 
  white-space: nowrap;
+ 
}