mirror of
https://github.com/coder/coder.git
synced 2026-06-02 20:48:20 +00:00
Jaayden Halko
d4131badb6
resolves coder/internal#176 This is a proof of concept to showcase the use of Tailwind + shadcn/ui. The goal here was to implement a lower complexity page to reduce the initial risk and highlight the specific global changes needed. Changes: - Create a separate version of Premium features content for Enterprise and OSS users - Use shadcn/ui button component and setup styling and variants to match the buttons defined in the Coder Kit Figma. https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756 - Setup theming using CSS variables and custom Tailwind colors by using the dark class name on the root element. - CSS variable design token naming and colors defined in Figma. https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1-2 <img width="1199" alt="Screenshot 2024-11-01 at 12 46 03 PM" src="https://github.com/user-attachments/assets/a251450f-8447-405a-9cc4-9f6aad9cd19f"> <img width="1197" alt="Screenshot 2024-11-01 at 12 45 36 PM" src="https://github.com/user-attachments/assets/e78a5a40-cbdf-4d85-9ffe-873505800fcc">
21 lines
377 B
JSON
21 lines
377 B
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema.json",
|
|
"style": "new-york",
|
|
"rsc": false,
|
|
"tsx": true,
|
|
"tailwind": {
|
|
"config": "tailwind.config.js",
|
|
"css": "src/index.css",
|
|
"baseColor": "zinc",
|
|
"cssVariables": true,
|
|
"prefix": ""
|
|
},
|
|
"aliases": {
|
|
"components": "/components",
|
|
"utils": "/utils",
|
|
"ui": "/components/ui",
|
|
"lib": "/lib",
|
|
"hooks": "/hooks"
|
|
}
|
|
}
|