shishantbiswas/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-06-02 20:48:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update colors (#22070)

Browse Source
This commit is contained in:
Jaayden Halko
2026-02-13 15:37:00 +07:00
committed by GitHub
parent ef25baf581
commit b1d5f77cf0
7 changed files with 86 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Badge/Badge.tsx
+2
View File
@@ -25,6 +25,8 @@ const badgeVariants = cva(
"border border-solid border-border-green bg-surface-green text-highlight-green shadow",
purple:
"border border-solid border-border-purple bg-surface-purple text-highlight-purple shadow",
magenta:
"border border-solid border-border-magenta bg-surface-magenta text-highlight-magenta shadow",
info: "border border-solid border-border-pending bg-surface-sky text-highlight-sky shadow",
},
size: {
site/src/components/Badges/Badges.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ export const DisabledBadge: React.FC<React.ComponentPropsWithRef<"div">> = ({
export const EnterpriseBadge: React.FC = () => {
return (
<Badge variant="info" border="solid">
<Badge variant="purple" border="solid">
Enterprise
</Badge>
);
@@ -43,7 +43,7 @@ export const PremiumBadge: React.FC<PremiumBadgeProps> = ({
children = "Premium",
}) => {
return (
<Badge variant="purple" border="solid">
<Badge variant="magenta" border="solid">
{children}
</Badge>
);
site/src/components/Paywall/Paywall.tsx
+3 -6
View File
@@ -13,7 +13,7 @@ export const Paywall = ({
<div
className={cn(
"flex flex-row items-center justify-center min-h-[280px] p-4 rounded-lg gap-8",
"border border-solid border-border-purple bg-[linear-gradient(160deg,transparent,hsl(var(--surface-purple)))]",
"border border-solid border-border-magenta bg-[linear-gradient(160deg,transparent,hsl(var(--surface-magenta)))]",
className,
)}
{...props}
@@ -101,7 +101,7 @@ export const PaywallSeparator: FC<React.ComponentProps<"hr">> = ({
return (
<hr
className={cn(
"w-0 h-[220px] border-0 border-l border-highlight-purple/50 ml-2 mr-0",
"w-0 h-[220px] border-0 border-l border-highlight-magenta/50 ml-2 mr-0",
className,
)}
{...props}
@@ -182,10 +182,7 @@ const FeatureIcon: FC<React.ComponentProps<"svg">> = ({
return (
<CircleCheckBigIcon
aria-hidden="true"
className="size-icon-sm"
css={(theme) => ({
color: theme.branding.premium.border,
})}
className={cn("size-icon-sm text-border-magenta", className)}
{...props}
/>
);
site/src/index.css
+16 -10
View File
@@ -18,7 +18,7 @@
--content-success: 142 72% 29%;
--content-warning: 27 96% 61%;
--content-destructive: 0 84% 60%;
--surface-primary: 0 0% 98%;
--surface-primary: 0 0% 100%;
--surface-secondary: 240 5% 96%;
--surface-tertiary: 240 6% 90%;
--surface-quaternary: 240 5% 84%;
@@ -28,24 +28,27 @@
--surface-green: 141 79% 85%;
--surface-grey: 240 5% 96%;
--surface-orange: 34 100% 92%;
--surface-sky: 201 94% 86%;
--surface-sky: 191, 67%, 89%;
--surface-red: 0 93% 94%;
--surface-purple: 251 91% 95%;
--surface-purple: 259, 100%, 95%;
--surface-magenta: 290, 100%, 95%;
--border-purple: 255 92% 76%;
--border-default: 240 6% 90%;
--border-success: 142 76% 36%;
--border-sky: 203 90% 40%;
--border-green: 138 82% 82%;
--border-magenta: 295, 68%, 46%;
--border-warning: 30.66, 97.16%, 72.35%;
--border-destructive: 0 84% 60%;
--border-hover: 240 5% 34%;
--overlay-default: 240 5% 84% / 80%;
--radius: 0.5rem;
--highlight-purple: 262 83% 58%;
--highlight-purple: 271, 61%, 35%;
--highlight-green: 143 64% 24%;
--highlight-grey: 240 5% 65%;
--highlight-sky: 201 90% 27%;
--highlight-sky: 195, 61%, 22%;
--highlight-red: 0 74% 42%;
--highlight-magenta: 295, 68%, 46%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 10% 3.9%;
@@ -54,7 +57,7 @@
--avatar-sm: 1.125rem;
}
.dark {
--content-primary: 0 0% 98%;
--content-primary: 0 0% 100%;
--content-secondary: 240 5% 65%;
--content-link: 213 94% 68%;
--content-invert: 240 10% 4%;
@@ -72,23 +75,26 @@
--surface-green: 145 80% 10%;
--surface-grey: 240 6% 10%;
--surface-orange: 13 81% 15%;
--surface-sky: 204 80% 16%;
--surface-sky: 196, 67%, 12%;
--surface-red: 0 75% 15%;
--surface-purple: 261 73% 23%;
--surface-purple: 268, 68%, 17%;
--surface-magenta: 291, 74%, 15%;
--border-purple: 255 92% 76%;
--border-default: 240 4% 16%;
--border-success: 142 76% 36%;
--border-magenta: 292, 100%, 78%;
--border-warning: 30.66, 97.16%, 72.35%;
--border-destructive: 0 91% 71%;
--border-sky: 194 90% 62%;
--border-green: 143 77% 87%;
--border-hover: 240, 5%, 34%;
--overlay-default: 240 10% 4% / 80%;
--highlight-purple: 252 95% 85%;
--highlight-purple: 269, 100%, 74%;
--highlight-green: 141 79% 85%;
--highlight-grey: 240 4% 46%;
--highlight-sky: 198 93% 60%;
--highlight-sky: 188, 75%, 80%;
--highlight-red: 0 91% 71%;
--highlight-magenta: 292, 100%, 78%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
+2 -1
View File
@@ -11,6 +11,7 @@ import {
useRef,
} from "react";
import { BODY_FONT_FAMILY } from "theme/constants";
import { cn } from "utils/cn";
const Language = {
seconds: "seconds",
@@ -74,7 +75,7 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
return (
<div
ref={ref}
className="font-mono border border-border rounded-lg"
className={cn("font-mono border border-border rounded-lg", className)}
{...attrs}
>
{Object.entries(groupedLogsByStage).map(([stage, logs]) => {
site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+58 -265
View File
@@ -1,4 +1,3 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import IconButton from "@mui/material/IconButton";
import { getErrorDetail, getErrorMessage } from "api/errors";
import type {
@@ -52,7 +51,7 @@ import {
Link as RouterLink,
unstable_usePrompt as usePrompt,
} from "react-router";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { cn } from "utils/cn";
import {
createFile,
existsFile,
@@ -132,7 +131,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
onActivePathChange,
}) => {
const getLink = useLinks();
const theme = useTheme();
const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
const [fileTree, setFileTree] = useState(defaultFileTree);
const [createFileOpen, setCreateFileOpen] = useState(false);
@@ -212,7 +210,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
return (
<>
<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
<div className="h-full flex flex-col">
<Topbar className="grid grid-cols-[1fr_2fr_1fr]" data-testid="topbar">
<div>
<Tooltip>
@@ -234,32 +232,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
/>
<RouterLink
to={templateLink}
css={{
color: theme.palette.text.primary,
textDecoration: "none",
"&:hover": {
textDecoration: "underline",
},
}}
className="text-content-primary no-underline hover:underline"
>
{template.display_name || template.name}
</RouterLink>
<TopbarDivider />
<span css={{ color: theme.palette.text.secondary }}>
<span className="text-content-secondary">
{templateVersion.name}
</span>
</TopbarData>
<div
css={{
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
gap: 8,
paddingRight: 16,
}}
>
<div className="flex items-center justify-end gap-2 pr-4">
<span className="mr-2">
<Button asChild size="sm" variant="outline">
<a
@@ -303,28 +286,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</div>
</Topbar>
<div
css={{
display: "flex",
flex: 1,
flexBasis: 0,
overflow: "hidden",
position: "relative",
}}
>
<div className="flex flex-1 basis-0 overflow-hidden relative">
{publishedVersion && (
<div
// We need this to reset the dismissable state of the component
// when the published version changes
key={publishedVersion.id}
css={{
position: "absolute",
width: "100%",
display: "flex",
justifyContent: "center",
padding: 12,
zIndex: 10,
}}
className="absolute w-full flex justify-center p-3 z-10"
>
<Alert
severity="success"
@@ -346,31 +314,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
<Sidebar>
<div
css={{
height: 42,
padding: "0 8px 0 16px",
display: "flex",
alignItems: "center",
}}
>
<span
css={{
color: theme.palette.text.primary,
fontSize: 13,
}}
>
Files
</span>
<div className="h-[42px] py-0 pr-2 pl-4 flex items-center">
<span className="text-content-primary text-[13px]">Files</span>
<div
css={{
marginLeft: "auto",
"& svg": {
fill: theme.palette.text.primary,
},
}}
>
<div className="ml-auto [&_svg]:fill-content-primary">
<Tooltip>
<TooltipTrigger asChild>
<IconButton
@@ -452,51 +399,17 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
/>
</Sidebar>
<div
css={{
display: "flex",
flexDirection: "column",
width: "100%",
minHeight: "100%",
overflow: "hidden",
}}
>
<div css={{ flex: 1, overflowY: "auto" }} data-chromatic="ignore">
<div className="flex flex-col w-full min-h-full overflow-hidden">
<div className="flex-1 overflow-y-auto" data-chromatic="ignore">
{activePath ? (
isEditorValueBinary ? (
<div
role="alert"
css={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 40,
}}
className="w-full h-full flex items-center justify-center p-10"
>
<div
css={{
display: "flex",
flexDirection: "column",
alignItems: "center",
maxWidth: 420,
textAlign: "center",
}}
>
<TriangleAlertIcon
css={{
color: theme.roles.warning.fill.outline,
}}
className="size-icon-lg"
/>
<p
css={{
margin: 0,
padding: 0,
marginTop: 24,
}}
>
<div className="flex flex-col items-center max-w-[420px] text-center">
<TriangleAlertIcon className="text-content-warning size-icon-lg" />
<p className="m-0 p-0 mt-6">
The file is not displayed in the text editor because it
is either binary or uses an unsupported text encoding.
</p>
@@ -522,40 +435,18 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
</div>
<div
css={{
borderTop: `1px solid ${theme.palette.divider}`,
overflow: "hidden",
display: "flex",
flexDirection: "column",
}}
>
<div className="border-0 border-t border-solid border-border overflow-hidden flex flex-col">
<div
css={{
display: "flex",
alignItems: "center",
borderBottom: selectedTab
? `1px solid ${theme.palette.divider}`
: 0,
}}
className={cn(
"flex items-center",
selectedTab && "border-0 border-b border-solid border-border",
)}
>
<div
css={{
display: "flex",
"& .MuiTab-root": {
padding: 0,
fontSize: 14,
textTransform: "none",
letterSpacing: "unset",
},
}}
>
<div className="flex">
<button
type="button"
disabled={!buildLogs}
css={styles.tab}
className={selectedTab === "logs" ? "active" : ""}
className={tabClassName(selectedTab === "logs")}
onClick={() => {
setSelectedTab("logs");
}}
@@ -566,8 +457,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<button
type="button"
disabled={!canPublish}
css={styles.tab}
className={selectedTab === "resources" ? "active" : ""}
className={tabClassName(selectedTab === "resources")}
onClick={() => {
setSelectedTab("resources");
}}
@@ -593,15 +483,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
onClick={() => {
setSelectedTab(undefined);
}}
css={{
marginLeft:
selectedTab !== "logs" || !gotBuildLogs
? "auto"
: undefined,
width: 36,
height: 36,
borderRadius: 0,
}}
className={cn(
"w-9 h-9 rounded-none",
(selectedTab !== "logs" || !gotBuildLogs) && "ml-auto",
)}
>
<XIcon className="size-icon-xs" />
</IconButton>
@@ -609,7 +494,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
</div>
{selectedTab === "logs" && (
<div css={[styles.logs, styles.tabContent]}>
<div className="flex flex-col h-[280px] overflow-y-auto">
{templateVersion.job.error ? (
<div>
<ProvisionerAlert
@@ -629,14 +514,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
tags={templateVersion.job.tags}
variant={AlertVariant.Inline}
/>
<Loader css={{ height: "100%" }} />
<Loader className="h-full" />
</>
)
)}
{gotBuildLogs && (
<WorkspaceBuildLogs
css={styles.buildLogs}
className={cn(
"rounded-none border-0",
"[&_.logs-header]:border-0 [&_.logs-header]:px-4 [&_.logs-header]:py-2 [&_.logs-header]:font-mono",
"[&_.logs-header:first-of-type]:pt-4 [&_.logs-header:last-child]:pb-4",
"[&_.logs-line]:pl-4",
"[&_.logs-container]:!border-0",
)}
hideTimestamps
logs={buildLogs}
/>
@@ -649,7 +540,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
{selectedTab === "resources" && (
<div css={[styles.resources, styles.tabContent]}>
<div
className={cn(
"h-[280px] overflow-y-auto",
"[&_.resource-card]:border-l-0 [&_.resource-card]:border-r-0",
"[&_.resource-card:first-of-type]:border-t-0 [&_.resource-card:last-child]:border-b-0",
)}
>
{resources && (
<TemplateResourcesTable
resources={resources.filter(
@@ -716,121 +613,17 @@ const useLeaveSiteWarning = (enabled: boolean) => {
});
};
const styles = {
tab: (theme) => ({
"&:not(:disabled)": {
cursor: "pointer",
},
padding: 12,
fontSize: 10,
textTransform: "uppercase",
letterSpacing: "0.5px",
fontWeight: 500,
background: "transparent",
fontFamily: "inherit",
border: 0,
color: theme.palette.text.secondary,
transition: "150ms ease all",
display: "flex",
gap: 8,
alignItems: "center",
justifyContent: "center",
position: "relative",
"& svg": {
maxWidth: 12,
maxHeight: 12,
},
"&.active": {
color: theme.palette.text.primary,
"&:after": {
content: '""',
display: "block",
width: "100%",
height: 1,
backgroundColor: theme.palette.primary.main,
bottom: -1,
position: "absolute",
},
},
"&:not(:disabled):hover": {
color: theme.palette.text.primary,
},
"&:disabled": {
color: theme.palette.text.disabled,
},
}),
tabBar: (theme) => ({
padding: "8px 16px",
position: "sticky",
top: 0,
background: theme.palette.background.default,
borderBottom: `1px solid ${theme.palette.divider}`,
color: theme.palette.text.primary,
textTransform: "uppercase",
fontSize: 12,
"&.top": {
borderTop: `1px solid ${theme.palette.divider}`,
},
}),
tabContent: {
height: 280,
overflowY: "auto",
},
logs: {
display: "flex",
height: "100%",
flexDirection: "column",
},
buildLogs: {
borderRadius: 0,
border: 0,
// Hack to update logs header and lines
"& .logs-header": {
border: 0,
padding: "8px 16px",
fontFamily: MONOSPACE_FONT_FAMILY,
"&:first-of-type": {
paddingTop: 16,
},
"&:last-child": {
paddingBottom: 16,
},
},
"& .logs-line": {
paddingLeft: 16,
},
"& .logs-container": {
border: "0 !important",
},
},
resources: {
// Hack to access customize resource-card from here
"& .resource-card": {
borderLeft: 0,
borderRight: 0,
"&:first-of-type": {
borderTop: 0,
},
"&:last-child": {
borderBottom: 0,
},
},
},
} satisfies Record<string, Interpolation<Theme>>;
const tabClassName = (isActive: boolean) =>
cn(
"p-3 text-[10px] uppercase tracking-[0.5px] font-medium bg-transparent [font-family:inherit] border-0",
"text-content-secondary transition-all duration-150",
"flex gap-2 items-center justify-center relative",
"[&_svg]:max-w-3 [&_svg]:max-h-3",
"enabled:cursor-pointer",
"hover:enabled:text-content-primary",
"disabled:text-content-disabled",
isActive && [
"text-content-primary",
"after:content-[''] after:block after:w-full after:h-px after:bg-surface-invert-primary after:absolute after:-bottom-px",
],
);
site/tailwind.config.js
+3
View File
@@ -55,6 +55,7 @@ module.exports = {
sky: "hsl(var(--surface-sky))",
red: "hsl(var(--surface-red))",
purple: "hsl(var(--surface-purple))",
magenta: "hsl(var(--surface-magenta))",
},
border: {
DEFAULT: "hsl(var(--border-default))",
@@ -65,6 +66,7 @@ module.exports = {
success: "hsl(var(--border-success))",
hover: "hsl(var(--border-hover))",
purple: "hsl(var(--border-purple))",
magenta: "hsl(var(--border-magenta))",
},
overlay: "hsla(var(--overlay-default))",
input: "hsl(var(--input))",
@@ -75,6 +77,7 @@ module.exports = {
grey: "hsl(var(--highlight-grey))",
sky: "hsl(var(--highlight-sky))",
red: "hsl(var(--highlight-red))",
magenta: "hsl(var(--highlight-magenta))",
},
},
keyframes: {