javascript/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2026-03-13 10:00:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: merge chat css

Browse Source
This commit is contained in:
Richard Shiue
2025-09-02 13:37:58 +08:00
parent 8951b55e42
commit e0bf9ab40c
8 changed files with 237 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/chat/chat/index.tsx
View File

@@ -2,7 +2,6 @@ import Main from './main';
import { TooltipProvider } from '@/components/chat/components/ui/tooltip';
import { ChatProps } from '@/components/chat/types';
import { Toaster } from '@/components/chat/components/ui/toaster';
import '@/components/chat/styles/index.scss';
export * from '@/components/chat/provider/prompt-modal-provider';
export * from '@/components/chat/provider/view-loader-provider';

199
src/components/chat/styles/index.scss
View File

@@ -1,199 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Light variables */
:root {
--z-ai-popover: 1300;
/* component colors */
--background: 0 0% 100%;
--foreground: 0 0% 9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 9%;
--tooltip: 0 0% 9%;
--tooltip-foreground: 0 0% 100%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 9%;
--primary: 195 100% 47%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 214, 7%, 43%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--placeholder: 213, 9%, 76%;
--accent: 216, 14%, 14%, 0.06;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--success: 136, 57%, 35%;
--border: 216, 14%, 14%, 8%;
--input: 216, 14%, 14%, 8%;
--ring: 195 100% 47%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--icon: 214, 7%, 43%;
--gradient1: linear-gradient(233deg, #34BDAF 0%, #B682D5 100%);
--gradient2: linear-gradient(180deg, #4CC2CC 0%, #E17570 100%);
--gradient3: linear-gradient(180deg, #AF70E1 0%, #ED7196 100%);
--gradient4: linear-gradient(180deg, #A348D6 0%, #45A7DF 100%);
--gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
--gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
--gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
--tint-purple: #E8E0FF;
--badge-purple: #AB8DFF;
--tint-pink: #FFE7FD;
--badge-pink: #FF8EF5;
--tint-red: #FFE7EE;
--badge-red: #FF85A9;
--tint-lime: #F5FFDC;
--badge-lime: #C6EC41;
--tint-green: #DDFFD6;
--badge-green: #74F37D;
--tint-aqua: #DEFFF1;
--badge-aqua: #40F0D1;
--tint-blue: #E1FBFF;
--badge-blue: #00C8FF;
--tint-orange: #FFEFE3;
--badge-orange: #FFBC7E;
--tint-yellow: #FFF2CD;
--badge-yellow: #FCD86F;
--selection: #e0f8ff;
--button-disabled: 216, 12%, 83%;
--secondary-background: #faf9fd;
--input-background: #ffffff;
/* !shadows */
--shadows-sm: 0px 4px 20px 0px rgba(31, 35, 41, 0.10);
--shadows-md: 0px 4px 32px 0px rgba(31, 34, 37, 0.12);
--scrollbar-thumb: #d1d5db;
}
/* Dark variables */
:root[data-dark-mode="true"] {
--background: 220 26% 14%;
--foreground: 0 0% 98%;
--input-background: #1B1A22;
--card: 220 26% 14%;
--card-foreground: 0 0% 98%;
--tooltip: 231 30% 8%;
--tooltip-foreground: 0 0% 98%;
--popover: 220 26% 14%;
--popover-foreground: 0 0% 98%;
--primary: 193 100% 47%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-background: #23242F;
--secondary-foreground: 234, 11%, 64%;
--muted: 214.55 27.73% 23.33%;
--muted-foreground: 240 5% 64.9%;
--placeholder: 234, 15%, 28%;
--accent: 215 28% 23%;
--accent-foreground: 0 0% 98%;
--destructive: 334, 100%, 49%;
--destructive-foreground: 0 0% 98%;
--success: 120 100% 50%;
--border: 214, 38%, 92%, 0.06;
--input: 214, 38%, 92%, 0.06;
--ring: 193 100% 47%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--icon: 214, 7%, 43%;
--gradient1: linear-gradient(233deg, #34BDAF 0%, #B682D5 100%);
--gradient2: linear-gradient(180deg, #4CC2CC 0%, #E17570 100%);
--gradient3: linear-gradient(180deg, #AF70E1 0%, #ED7196 100%);
--gradient4: linear-gradient(180deg, #A348D6 0%, #45A7DF 100%);
--gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
--gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
--gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
--tint-red: #C42A534D;
--badge-red: #C42A53;
--tint-green: #23CA2E4D;
--badge-green: #23CA2E;
--tint-purple: #502FD64D;
--badge-purple: #502FD6;
--tint-blue: #04A9D74D;
--badge-blue: #04A9D7;
--tint-yellow: #C59A1A4D;
--badge-yellow: #C59A1A;
--tint-pink: #BF1CC04D;
--badge-pink: #BF1CC0;
--tint-lime: #A4C8244D;
--badge-lime: #A4C824;
--tint-aqua: #19CCAC4D;
--badge-aqua: #19CCAC;
--tint-orange: #D779224D;
--badge-orange: #D77922;
--selection: #005174;
--scrollbar-thumb: #4b5563;
--button-disabled: 213, 9%, 76%;
--shadows-sm: 0px 2px 16px 0px rgba(0, 0, 0, 0.48);
--shadows-md: 0px 4px 32px 0px rgba(0, 0, 0, 0.48);
}
@mixin scrollbar-style {
::-webkit-scrollbar, &::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&:hover {
&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--scrollbar-thumb);
}
}
}
@mixin hidden-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.appflowy-scrollbar {
@include scrollbar-style;
}
.appflowy-hidden-scrollbar {
@include hidden-scrollbar;
}
#appflowy-chat, #ai-assistant {
#appflowy-editor > div {
padding-left: 4px;
padding-right: 4px;
}
#appflowy-editor {
[data-block-type="bulleted_list"] .h-6 {
height: 1.25rem;
}
}
}
@keyframes dots-loading {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}

5
src/components/editor/EditorOverlay.tsx
View File

@@ -8,7 +8,6 @@ import { insertDataAfterBlock } from '@/components/ai-chat/utils';
import { useEditorContext } from '@/components/editor/EditorContext';
import { getScrollParent } from '@/components/global-comment/utils';
import { notify } from '@/components/_shared/notify';
import '@/components/chat/styles/index.scss';
import { AIAssistantProvider, ContextPlaceholder, PromptModalProvider, WriterRequest } from '@/components/chat';
import { EditorData } from '@appflowyinc/editor';
@@ -65,7 +64,7 @@ function EditorOverlay({ viewId, workspaceId }: { viewId: string; workspaceId: s
ReactEditor.focus(editor);
const entry = findSlateEntryByBlockId(editor, blockId);
if(!entry) return;
if (!entry) return;
const [, path] = entry;
@@ -126,7 +125,7 @@ function EditorOverlay({ viewId, workspaceId }: { viewId: string; workspaceId: s
ReactEditor.focus(editor);
const entry = findSlateEntryByBlockId(editor, blockId);
if(!entry) return;
if (!entry) return;
const [, path] = entry;

60
src/styles/app.scss
View File

@@ -192,3 +192,63 @@ body {
}
@mixin scrollbar-style {
::-webkit-scrollbar, &::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&:hover {
&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: var(--scrollbar-thumb);
}
}
}
@mixin hidden-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.appflowy-scrollbar {
@include scrollbar-style;
}
.appflowy-hidden-scrollbar {
@include hidden-scrollbar;
}
#appflowy-chat, #ai-assistant {
#appflowy-editor > div {
padding-left: 4px;
padding-right: 4px;
}
#appflowy-editor {
[data-block-type="bulleted_list"] .h-6 {
height: 1.25rem;
}
}
}
@keyframes dots-loading {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}

1
src/styles/global.css
View File

@@ -4,7 +4,6 @@
@import "./variables/semantic.light.css";
@import "./variables/semantic.dark.css";
@import "./template.css";
@import "../components/chat/styles/index.scss";
:root {
/* new shadow */

129
src/styles/variables/dark.variables.css
View File

@@ -1,8 +1,7 @@
:root[data-dark-mode=true] {
:root[data-dark-mode='true'] {
--bg-selection: #2383e247;
--text-title: #e2e9f2;
--text-caption: #87A0BF;
--text-caption: #87a0bf;
--text-placeholder: #6f748c;
--text-link-default: #00bcf0;
--text-link-hover: #52d1f4;
@@ -10,7 +9,7 @@
--text-link-disabled: #005174;
--icon-primary: #e2e9f2;
--icon-secondary: #59647a;
--icon-disabled: #525A69;
--icon-disabled: #525a69;
--icon-on-toolbar: white;
--line-border: #59647a;
--line-divider: #384967;
@@ -19,7 +18,7 @@
--line-card: #384967;
--fill-default: #00bcf0;
--fill-hover: #005174;
--fill-toolbar: #0F111C;
--fill-toolbar: #0f111c;
--fill-selector: #232b38;
--fill-list-active: #3c4557;
--fill-list-hover: #2b394c;
@@ -27,7 +26,7 @@
--content-blue-300: #52d1f4;
--content-blue-600: #009fd1;
--content-blue-100: #005174;
--content-blue-200: #49CFF480;
--content-blue-200: #49cff480;
--content-blue-50: #024562;
--content-blue-700: #0079a5;
--content-blue-800: #00597a;
@@ -37,7 +36,7 @@
--bg-body: #1a202c;
--bg-base: #232b38;
--bg-mask: #000000B2;
--bg-mask: #000000b2;
--bg-tips: #005174;
--bg-brand: #2c144b;
--function-error: #d32772;
@@ -50,49 +49,85 @@
--function-success-hover: #5dbb7a;
--function-success-opacity: rgba(59, 168, 86, 0.1);
--function-info: #2e9dbb;
--tint-red: #C42A534D;
--badge-red: #C42A53;
--tint-green: #23CA2E4D;
--badge-green: #23CA2E;
--tint-purple: #502FD64D;
--badge-purple: #502FD6;
--tint-blue: #04A9D74D;
--badge-blue: #04A9D7;
--tint-yellow: #C59A1A4D;
--badge-yellow: #C59A1A;
--tint-pink: #BF1CC04D;
--badge-pink: #BF1CC0;
--tint-lime: #A4C8244D;
--badge-lime: #A4C824;
--tint-aqua: #19CCAC4D;
--badge-aqua: #19CCAC;
--tint-orange: #D779224D;
--badge-orange: #D77922;
--tint-red: #c42a534d;
--badge-red: #c42a53;
--tint-green: #23ca2e4d;
--badge-green: #23ca2e;
--tint-purple: #502fd64d;
--badge-purple: #502fd6;
--tint-blue: #04a9d74d;
--badge-blue: #04a9d7;
--tint-yellow: #c59a1a4d;
--badge-yellow: #c59a1a;
--tint-pink: #bf1cc04d;
--badge-pink: #bf1cc0;
--tint-lime: #a4c8244d;
--badge-lime: #a4c824;
--tint-aqua: #19ccac4d;
--badge-aqua: #19ccac;
--tint-orange: #d779224d;
--badge-orange: #d77922;
--shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
--scrollbar-track: #252F41;
--scrollbar-track: #252f41;
--scrollbar-thumb: #3c4557;
--gradient1: linear-gradient(233deg, #34BDAF 0%, #B682D5 100%);
--gradient2: linear-gradient(180deg, #4CC2CC 0%, #E17570 100%);
--gradient3: linear-gradient(180deg, #AF70E1 0%, #ED7196 100%);
--gradient4: linear-gradient(180deg, #A348D6 0%, #45A7DF 100%);
--gradient5: linear-gradient(56.2deg, #5749CA 0%, #BB4A97 100%);
--gradient6: linear-gradient(180deg, #036FFA 0%, #00B8E5 100%);
--gradient7: linear-gradient(38.2deg, #F0C6CF 0%, #DECCE2 40.4754%, #CAD3F9 100%);
--new-gradient1: linear-gradient(180deg, #6DD5FF 0%, #D0A2FF 100%);
--new-gradient2: linear-gradient(180deg, #D0A2FF 0%, #FF84BF 100%);
--new-gradient3: linear-gradient(180deg, #FF84BF 0%, #FFDD7B 100%);
--new-gradient4: linear-gradient(180deg, #FFDD7B 0%, #87FFAB 100%);
--new-gradient5: linear-gradient(180deg, #89D7FE 0%, #7A81FF 100%);
--new-gradient6: linear-gradient(180deg, #00B5FF 0%, #9225FF 100%);
--new-gradient7: linear-gradient(180deg, #9327FF 0%, #E7348A 100%);
--new-gradient8: linear-gradient(180deg, #E3006D 0%, #FFBD00 100%);
--new-gradient9: linear-gradient(180deg, #FFBD00 0%, #00BC38 100%);
--new-gradient10: linear-gradient(180deg, #1CF8E3 0%, #4B32FE 100%);
--gradient1: linear-gradient(233deg, #34bdaf 0%, #b682d5 100%);
--gradient2: linear-gradient(180deg, #4cc2cc 0%, #e17570 100%);
--gradient3: linear-gradient(180deg, #af70e1 0%, #ed7196 100%);
--gradient4: linear-gradient(180deg, #a348d6 0%, #45a7df 100%);
--gradient5: linear-gradient(56.2deg, #5749ca 0%, #bb4a97 100%);
--gradient6: linear-gradient(180deg, #036ffa 0%, #00b8e5 100%);
--gradient7: linear-gradient(38.2deg, #f0c6cf 0%, #decce2 40.4754%, #cad3f9 100%);
--new-gradient1: linear-gradient(180deg, #6dd5ff 0%, #d0a2ff 100%);
--new-gradient2: linear-gradient(180deg, #d0a2ff 0%, #ff84bf 100%);
--new-gradient3: linear-gradient(180deg, #ff84bf 0%, #ffdd7b 100%);
--new-gradient4: linear-gradient(180deg, #ffdd7b 0%, #87ffab 100%);
--new-gradient5: linear-gradient(180deg, #89d7fe 0%, #7a81ff 100%);
--new-gradient6: linear-gradient(180deg, #00b5ff 0%, #9225ff 100%);
--new-gradient7: linear-gradient(180deg, #9327ff 0%, #e7348a 100%);
--new-gradient8: linear-gradient(180deg, #e3006d 0%, #ffbd00 100%);
--new-gradient9: linear-gradient(180deg, #ffbd00 0%, #00bc38 100%);
--new-gradient10: linear-gradient(180deg, #1cf8e3 0%, #4b32fe 100%);
--bg-header: #1a202ccc;
--bg-footer: #00000000;
--note-header: #232b38;
--billing-primary: #601DAA;
--billing-primary-hover: #7A2EBF;
--ai-primary: #D08EED;
--writer-placeholder: #49CFF4;
--billing-primary: #601daa;
--billing-primary-hover: #7a2ebf;
--ai-primary: #d08eed;
--writer-placeholder: #49cff4;
--background: 220 26% 14%;
--foreground: 0 0% 98%;
--input-background: #1b1a22;
--card: 220 26% 14%;
--card-foreground: 0 0% 98%;
--tooltip: 231 30% 8%;
--tooltip-foreground: 0 0% 98%;
--popover: 220 26% 14%;
--popover-foreground: 0 0% 98%;
--primary: 193 100% 47%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-background: #23242f;
--secondary-foreground: 234, 11%, 64%;
--muted: 214.55 27.73% 23.33%;
--muted-foreground: 240 5% 64.9%;
--placeholder: 234, 15%, 28%;
--accent: 215 28% 23%;
--accent-foreground: 0 0% 98%;
--destructive: 334, 100%, 49%;
--destructive-foreground: 0 0% 98%;
--success: 120 100% 50%;
--border: 214, 38%, 92%, 0.06;
--input: 214, 38%, 92%, 0.06;
--ring: 193 100% 47%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
--icon: 214, 7%, 43%;
--selection: #005174;
--scrollbar-thumb: #4b5563;
--button-disabled: 213, 9%, 76%;
--shadows-sm: 0px 2px 16px 0px rgba(0, 0, 0, 0.48);
--shadows-md: 0px 4px 32px 0px rgba(0, 0, 0, 0.48);
}

42
src/styles/variables/light.variables.css
View File

@@ -97,4 +97,44 @@
--billing-primary-hover: #9f3ae6;
--ai-primary: #D08EED;
--writer-placeholder: #007296;
}
--z-ai-popover: 1300;
/* component colors */
--background: 0 0% 100%;
--foreground: 0 0% 9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 9%;
--tooltip: 0 0% 9%;
--tooltip-foreground: 0 0% 100%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 9%;
--primary: 195 100% 47%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 214, 7%, 43%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--placeholder: 213, 9%, 76%;
--accent: 216, 14%, 14%, 0.06;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--success: 136, 57%, 35%;
--border: 216, 14%, 14%, 8%;
--input: 216, 14%, 14%, 8%;
--ring: 195 100% 47%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
--icon: 214, 7%, 43%;
--selection: #e0f8ff;
--button-disabled: 216, 12%, 83%;
--secondary-background: #faf9fd;
--input-background: #ffffff;
/* !shadows */
--shadows-sm: 0px 4px 20px 0px rgba(31, 35, 41, 0.10);
--shadows-md: 0px 4px 32px 0px rgba(31, 34, 37, 0.12);
--scrollbar-thumb: #d1d5db;
}

109
tailwind/colors.cjs
View File

@@ -1,60 +1,6 @@
const newColors = require('./new-colors.cjs');
module.exports = {
// Chat-specific colors
background: {
DEFAULT: 'hsl(var(--background))',
...newColors['background'],
},
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
background: 'var(--secondary-background)',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
button: {
disabled: 'hsl(var(--button-disabled))',
},
placeholder: {
DEFAULT: 'hsl(var(--placeholder))',
},
success: {
DEFAULT: 'hsl(var(--success))',
},
input: {
DEFAULT: 'hsl(var(--input))',
background: 'var(--input-background)',
},
ring: 'hsl(var(--ring))',
tooltip: {
DEFAULT: 'hsl(var(--tooltip))',
foreground: 'hsl(var(--tooltip-foreground))',
},
// Existing AppFlowy colors
'bg': {
'selection': 'var(--bg-selection)',
@@ -66,7 +12,6 @@ module.exports = {
'header': 'var(--bg-header)',
'footer': 'var(--bg-footer)',
},
'line': {
'border': 'var(--line-border)',
'divider': 'var(--line-divider)',
@@ -126,8 +71,6 @@ module.exports = {
'writer': {
'placeholder': 'var(--writer-placeholder)',
},
// Merged colors with new-colors.cjs (duplicates removed)
...newColors,
'fill': {
'toolbar': 'var(--fill-toolbar)',
@@ -174,4 +117,56 @@ module.exports = {
'yellow': 'var(--badge-yellow)',
...newColors['badge'],
},
background: {
DEFAULT: 'hsl(var(--background))',
...newColors['background'],
},
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
background: 'var(--secondary-background)',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
button: {
disabled: 'hsl(var(--button-disabled))',
},
placeholder: {
DEFAULT: 'hsl(var(--placeholder))',
},
success: {
DEFAULT: 'hsl(var(--success))',
},
input: {
DEFAULT: 'hsl(var(--input))',
background: 'var(--input-background)',
},
ring: 'hsl(var(--ring))',
tooltip: {
DEFAULT: 'hsl(var(--tooltip))',
foreground: 'hsl(var(--tooltip-foreground))',
},
};