mirror of
https://seed.radicle.dev/rad:z4D5UCArafTzTQpDZNQRuqswh3ury.git
synced 2026-10-18 19:10:45 +08:00
Add base styles for colors and typography
This commit is contained in:
Rūdolfs Ošiņš
+62
-20
@@ -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>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+114
-2
@@ -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-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-ghost: #24252d;
|
||||
--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;
|
||||
}
|
||||
|
||||
+92
-1
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user