mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
e45635aab6
During development of #21659 I approved some `<Paywall />` code that had an extensive props system, however, I wasn't a huge fan of this. This approach attempts to take it further like something `shadcn` would, where-in we define the `<Paywall />` (and its subset of components) and we wrap around those when needed for `<PaywallAIGovernance />` and `<PaywallPremium />`. Theoretically there is no real CSS/Design changes here. However screenshot for prosperity. | Previously | Now | | --- | --- | | <img width="2306" height="614" alt="CleanShot 2026-01-29 at 10 56 05@2x" src="https://github.com/user-attachments/assets/83a4aa1b-da74-459d-ae11-fae06c1a8371" /> | <img width="2308" height="622" alt="CleanShot 2026-01-29 at 10 55 05@2x" src="https://github.com/user-attachments/assets/4aa43b09-6705-4af3-86cc-edc0c08e53b1" /> | --------- Co-authored-by: Ben Potter <me@bpmct.net> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
darkMode: ["selector"],
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
important: ["#root", "#storybook-root"],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: `"Inter Variable", system-ui, sans-serif`,
|
|
},
|
|
size: {
|
|
"icon-lg": "1.5rem",
|
|
"icon-sm": "1.125rem",
|
|
"icon-xs": "0.875rem",
|
|
},
|
|
fontSize: {
|
|
"2xs": ["0.625rem", "0.875rem"],
|
|
xs: ["0.75rem", "1rem"],
|
|
sm: ["0.875rem", "1.5rem"],
|
|
"3xl": ["2rem", "2.5rem"],
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
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))",
|
|
},
|
|
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))",
|
|
hover: "hsl(var(--border-hover))",
|
|
purple: "hsl(var(--border-purple))",
|
|
},
|
|
overlay: "hsla(var(--overlay-default))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
highlight: {
|
|
purple: "hsl(var(--highlight-purple))",
|
|
green: "hsl(var(--highlight-green))",
|
|
grey: "hsl(var(--highlight-grey))",
|
|
sky: "hsl(var(--highlight-sky))",
|
|
red: "hsl(var(--highlight-red))",
|
|
},
|
|
},
|
|
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%" },
|
|
},
|
|
},
|
|
animation: {
|
|
loading: "loading 2s ease-in-out infinite alternate",
|
|
"caret-scan": "caret-scan 3s ease-in-out infinite",
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
|
|
};
|