mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
christin
5cce3ee5f4
Renames the `--border-hover` design token to `--border-secondary` and
updates the color values to work well on `surface-secondary`
backgrounds, preparing for the template creation flow.
- Light theme: `240 5% 65%` (`#A1A1AA`)
- Dark theme: `240 5% 26%` (`#3F3F46`)
All 7 component usages updated to use the new token name.
<details>
<summary>Context</summary>
The previous `border-hover` token used a single value (`#52525B`) for
both themes, which didn't provide enough contrast on `surface-secondary`
backgrounds. The rename to `border-secondary` better reflects its
semantic role as a secondary border color rather than a hover-specific
one, and the updated values give proper contrast in both light and dark
themes. This change is a prerequisite for the upcoming template creation
flow work.
</details>
> 🤖 Generated by Coder Agents
172 lines
5.2 KiB
JavaScript
172 lines
5.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
darkMode: ["selector"],
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
"./node_modules/streamdown/dist/**/*.js",
|
|
"./node_modules/@streamdown/*/dist/**/*.js",
|
|
],
|
|
important: ["#root", "#storybook-root"],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: `"Geist Variable", system-ui, sans-serif`,
|
|
// `monospace, monospace` resets the font-size to 16px with the fallback.
|
|
mono: `"Geist Mono Variable", monospace, monospace`,
|
|
},
|
|
size: {
|
|
"icon-lg": "1.5rem",
|
|
"icon-sm": "1.125rem",
|
|
"icon-xs": "0.875rem",
|
|
},
|
|
fontSize: {
|
|
"2xs": ["0.625rem", "0.875rem"],
|
|
xs: ["0.75rem", { lineHeight: "1rem", fontWeight: "500" }],
|
|
sm: ["0.875rem", { lineHeight: "1.5rem", fontWeight: "500" }],
|
|
base: ["1rem", { lineHeight: "1.5rem", fontWeight: "400" }],
|
|
"3xl": ["2rem", "2.5rem"],
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
xs: "calc(var(--radius) - 6px)",
|
|
},
|
|
colors: {
|
|
content: {
|
|
primary: "hsl(var(--content-primary))",
|
|
secondary: "hsl(var(--content-secondary))",
|
|
disabled: "hsl(var(--content-disabled))",
|
|
invert: "hsl(var(--content-invert))",
|
|
success: "hsl(var(--content-success))",
|
|
link: "hsl(var(--content-link))",
|
|
destructive: "hsl(var(--content-destructive))",
|
|
warning: "hsl(var(--content-warning))",
|
|
},
|
|
surface: {
|
|
primary: "hsl(var(--surface-primary))",
|
|
secondary: "hsl(var(--surface-secondary))",
|
|
tertiary: "hsl(var(--surface-tertiary))",
|
|
quaternary: "hsl(var(--surface-quaternary))",
|
|
invert: {
|
|
primary: "hsl(var(--surface-invert-primary))",
|
|
secondary: "hsl(var(--surface-invert-secondary))",
|
|
},
|
|
destructive: "hsl(var(--surface-destructive))",
|
|
green: "hsl(var(--surface-green))",
|
|
grey: "hsl(var(--surface-grey))",
|
|
orange: "hsl(var(--surface-orange))",
|
|
sky: "hsl(var(--surface-sky))",
|
|
red: "hsl(var(--surface-red))",
|
|
purple: "hsl(var(--surface-purple))",
|
|
magenta: "hsl(var(--surface-magenta))",
|
|
"git-added": "hsl(var(--surface-git-added))",
|
|
"git-deleted": "hsl(var(--surface-git-deleted))",
|
|
"git-merged": "hsl(var(--surface-git-merged))",
|
|
},
|
|
border: {
|
|
DEFAULT: "hsl(var(--border-default))",
|
|
warning: "hsl(var(--border-warning))",
|
|
green: "hsl(var(--border-green))",
|
|
pending: "hsl(var(--border-sky))",
|
|
destructive: "hsl(var(--border-destructive))",
|
|
success: "hsl(var(--border-success))",
|
|
secondary: "hsl(var(--border-secondary))",
|
|
purple: "hsl(var(--border-purple))",
|
|
magenta: "hsl(var(--border-magenta))",
|
|
},
|
|
overlay: "hsla(var(--overlay-default))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
highlight: {
|
|
purple: "hsl(var(--highlight-purple))",
|
|
green: "hsl(var(--highlight-green))",
|
|
orange: "hsl(var(--highlight-orange))",
|
|
grey: "hsl(var(--highlight-grey))",
|
|
sky: "hsl(var(--highlight-sky))",
|
|
red: "hsl(var(--highlight-red))",
|
|
magenta: "hsl(var(--highlight-magenta))",
|
|
},
|
|
syntax: {
|
|
key: "hsl(var(--syntax-key))",
|
|
string: "hsl(var(--syntax-string))",
|
|
number: "hsl(var(--syntax-number))",
|
|
boolean: "hsl(var(--syntax-boolean))",
|
|
},
|
|
git: {
|
|
added: "hsl(var(--git-added))",
|
|
deleted: "hsl(var(--git-deleted))",
|
|
modified: "hsl(var(--git-modified))",
|
|
merged: "hsl(var(--git-merged))",
|
|
"added-bright": "hsl(var(--git-added-bright))",
|
|
"deleted-bright": "hsl(var(--git-deleted-bright))",
|
|
"merged-bright": "hsl(var(--git-merged-bright))",
|
|
},
|
|
},
|
|
keyframes: {
|
|
loading: {
|
|
"0%": { opacity: 0.85 },
|
|
"25%": { opacity: 0.7 },
|
|
"50%": { opacity: 0.4 },
|
|
"75%": { opacity: 0.3 },
|
|
"100%": { opacity: 0.2 },
|
|
},
|
|
"caret-scan": {
|
|
"0%": { left: "0%" },
|
|
"100%": { left: "100%" },
|
|
},
|
|
"zip-right": {
|
|
"0%": { left: "0%", width: "0%" },
|
|
"30%": { left: "0%", width: "40%" },
|
|
"100%": { left: "100%", width: "0%" },
|
|
},
|
|
// Matches MUI LinearProgress bar1/bar2 indeterminate keyframes; two
|
|
// staggered bars are required so one is visible while the other resets.
|
|
"bar-indeterminate": {
|
|
"0%": {
|
|
left: "-35%",
|
|
right: "100%",
|
|
},
|
|
"60%": {
|
|
left: "100%",
|
|
right: "-90%",
|
|
},
|
|
"100%": {
|
|
left: "100%",
|
|
right: "-90%",
|
|
},
|
|
},
|
|
"bar-indeterminate-2": {
|
|
"0%": {
|
|
left: "-200%",
|
|
right: "100%",
|
|
},
|
|
"60%": {
|
|
left: "107%",
|
|
right: "-8%",
|
|
},
|
|
"100%": {
|
|
left: "107%",
|
|
right: "-8%",
|
|
},
|
|
},
|
|
},
|
|
animation: {
|
|
loading: "loading 2s ease-in-out infinite alternate",
|
|
"caret-scan": "caret-scan 3s ease-in-out infinite",
|
|
"spin-once": "spin 1s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
"zip-right": "zip-right 1s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
"bar-indeterminate":
|
|
"bar-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite",
|
|
"bar-indeterminate-2":
|
|
"bar-indeterminate-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
|
|
};
|