Merge branch 'main' into feat/rag-2

api/core/rag/datasource/vdb/tencent/tencent_vector.py

@@ -122,7 +122,6 @@ class TencentVector(BaseVector):
                 metric_type,
                 params,
             )
-            index_text = vdb_index.FilterIndex(self.field_text, enum.FieldType.String, enum.IndexType.FILTER)
             index_metadate = vdb_index.FilterIndex(self.field_metadata, enum.FieldType.Json, enum.IndexType.FILTER)
             index_sparse_vector = vdb_index.SparseIndex(
                 name="sparse_vector",
@@ -130,7 +129,7 @@ class TencentVector(BaseVector):
                 index_type=enum.IndexType.SPARSE_INVERTED,
                 metric_type=enum.MetricType.IP,
             )
-            indexes = [index_id, index_vector, index_text, index_metadate]
+            indexes = [index_id, index_vector, index_metadate]
             if self._enable_hybrid_search:
                 indexes.append(index_sparse_vector)
             try:
@@ -149,7 +148,7 @@ class TencentVector(BaseVector):
                 index_metadate = vdb_index.FilterIndex(
                     self.field_metadata, enum.FieldType.String, enum.IndexType.FILTER
                 )
-                indexes = [index_id, index_vector, index_text, index_metadate]
+                indexes = [index_id, index_vector, index_metadate]
                 if self._enable_hybrid_search:
                     indexes.append(index_sparse_vector)
                 self._client.create_collection(

api/core/repositories/sqlalchemy_workflow_execution_repository.py

@@ -17,6 +17,7 @@ from core.workflow.entities.workflow_execution import (
 )
 from core.workflow.repositories.workflow_execution_repository import WorkflowExecutionRepository
 from core.workflow.workflow_type_encoder import WorkflowRuntimeTypeConverter
+from libs.helper import extract_tenant_id
 from models import (
     Account,
     CreatorUserRole,
@@ -67,7 +68,7 @@ class SQLAlchemyWorkflowExecutionRepository(WorkflowExecutionRepository):
             )
 
         # Extract tenant_id from user
-        tenant_id: str | None = user.tenant_id if isinstance(user, EndUser) else user.current_tenant_id
+        tenant_id = extract_tenant_id(user)
         if not tenant_id:
             raise ValueError("User must have a tenant_id or current_tenant_id")
         self._tenant_id = tenant_id

api/core/repositories/sqlalchemy_workflow_node_execution_repository.py

@@ -20,6 +20,7 @@ from core.workflow.entities.workflow_node_execution import (
 from core.workflow.nodes.enums import NodeType
 from core.workflow.repositories.workflow_node_execution_repository import OrderConfig, WorkflowNodeExecutionRepository
 from core.workflow.workflow_type_encoder import WorkflowRuntimeTypeConverter
+from libs.helper import extract_tenant_id
 from models import (
     Account,
     CreatorUserRole,
@@ -70,7 +71,7 @@ class SQLAlchemyWorkflowNodeExecutionRepository(WorkflowNodeExecutionRepository)
             )
 
         # Extract tenant_id from user
-        tenant_id: str | None = user.tenant_id if isinstance(user, EndUser) else user.current_tenant_id
+        tenant_id = extract_tenant_id(user)
         if not tenant_id:
             raise ValueError("User must have a tenant_id or current_tenant_id")
         self._tenant_id = tenant_id

api/extensions/ext_otel.py

@@ -12,6 +12,7 @@ from flask_login import user_loaded_from_request, user_logged_in  # type: ignore
 
 from configs import dify_config
 from dify_app import DifyApp
+from libs.helper import extract_tenant_id
 from models import Account, EndUser
 
 
@@ -24,11 +25,8 @@ def on_user_loaded(_sender, user: Union["Account", "EndUser"]):
         if user:
             try:
                 current_span = get_current_span()
-                if isinstance(user, Account) and user.current_tenant_id:
-                    tenant_id = user.current_tenant_id
-                elif isinstance(user, EndUser):
-                    tenant_id = user.tenant_id
-                else:
+                tenant_id = extract_tenant_id(user)
+                if not tenant_id:
                     return
                 if current_span:
                     current_span.set_attribute("service.tenant.id", tenant_id)

api/libs/helper.py

@@ -25,6 +25,31 @@ from extensions.ext_redis import redis_client
 
 if TYPE_CHECKING:
     from models.account import Account
+    from models.model import EndUser
+
+
+def extract_tenant_id(user: Union["Account", "EndUser"]) -> str | None:
+    """
+    Extract tenant_id from Account or EndUser object.
+
+    Args:
+        user: Account or EndUser object
+
+    Returns:
+        tenant_id string if available, None otherwise
+
+    Raises:
+        ValueError: If user is neither Account nor EndUser
+    """
+    from models.account import Account
+    from models.model import EndUser
+
+    if isinstance(user, Account):
+        return user.current_tenant_id
+    elif isinstance(user, EndUser):
+        return user.tenant_id
+    else:
+        raise ValueError(f"Invalid user type: {type(user)}. Expected Account or EndUser.")
 
 
 def run(script):

api/models/workflow.py

@@ -15,6 +15,7 @@ from core.variables import utils as variable_utils
 from core.workflow.constants import CONVERSATION_VARIABLE_NODE_ID, SYSTEM_VARIABLE_NODE_ID
 from core.workflow.nodes.enums import NodeType
 from factories.variable_factory import TypeMismatchError, build_segment_with_type
+from libs.helper import extract_tenant_id
 
 from ._workflow_exc import NodeNotFoundError, WorkflowDataError
 
@@ -364,12 +365,7 @@ class Workflow(Base):
             self._environment_variables = "{}"
 
         # Get tenant_id from current_user (Account or EndUser)
-        if isinstance(current_user, Account):
-            # Account user
-            tenant_id = current_user.current_tenant_id
-        else:
-            # EndUser
-            tenant_id = current_user.tenant_id
+        tenant_id = extract_tenant_id(current_user)
 
         if not tenant_id:
             return []
@@ -396,12 +392,7 @@ class Workflow(Base):
             return
 
         # Get tenant_id from current_user (Account or EndUser)
-        if isinstance(current_user, Account):
-            # Account user
-            tenant_id = current_user.current_tenant_id
-        else:
-            # EndUser
-            tenant_id = current_user.tenant_id
+        tenant_id = extract_tenant_id(current_user)
 
         if not tenant_id:
             self._environment_variables = "{}"

api/services/file_service.py

@@ -18,6 +18,7 @@ from core.file import helpers as file_helpers
 from core.rag.extractor.extract_processor import ExtractProcessor
 from extensions.ext_database import db
 from extensions.ext_storage import storage
+from libs.helper import extract_tenant_id
 from models.account import Account
 from models.enums import CreatorUserRole
 from models.model import EndUser, UploadFile
@@ -61,11 +62,7 @@ class FileService:
         # generate file key
         file_uuid = str(uuid.uuid4())
 
-        if isinstance(user, Account):
-            current_tenant_id = user.current_tenant_id
-        else:
-            # end_user
-            current_tenant_id = user.tenant_id
+        current_tenant_id = extract_tenant_id(user)
 
         file_key = "upload_files/" + (current_tenant_id or "") + "/" + file_uuid + "." + extension
 

api/tasks/clean_document_task.py

@@ -72,6 +72,7 @@ def clean_document_task(document_id: str, dataset_id: str, doc_form: str, file_i
             DatasetMetadataBinding.dataset_id == dataset_id,
             DatasetMetadataBinding.document_id == document_id,
         ).delete()
+        db.session.commit()
 
         end_at = time.perf_counter()
         logging.info(

api/tests/unit_tests/core/helper/test_encrypter.py

@@ -0,0 +1,280 @@
+import base64
+import binascii
+from unittest.mock import MagicMock, patch
+
+import pytest
+
+from core.helper.encrypter import (
+    batch_decrypt_token,
+    decrypt_token,
+    encrypt_token,
+    get_decrypt_decoding,
+    obfuscated_token,
+)
+from libs.rsa import PrivkeyNotFoundError
+
+
+class TestObfuscatedToken:
+    @pytest.mark.parametrize(
+        ("token", "expected"),
+        [
+            ("", ""),  # Empty token
+            ("1234567", "*" * 20),  # Short token (<8 chars)
+            ("12345678", "*" * 20),  # Boundary case (8 chars)
+            ("123456789abcdef", "123456" + "*" * 12 + "ef"),  # Long token
+            ("abc!@#$%^&*()def", "abc!@#" + "*" * 12 + "ef"),  # Special chars
+        ],
+    )
+    def test_obfuscation_logic(self, token, expected):
+        """Test core obfuscation logic for various token lengths"""
+        assert obfuscated_token(token) == expected
+
+    def test_sensitive_data_protection(self):
+        """Ensure obfuscation never reveals full sensitive data"""
+        token = "api_key_secret_12345"
+        obfuscated = obfuscated_token(token)
+        assert token not in obfuscated
+        assert "*" * 12 in obfuscated
+
+
+class TestEncryptToken:
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_successful_encryption(self, mock_encrypt, mock_query):
+        """Test successful token encryption"""
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "mock_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+        mock_encrypt.return_value = b"encrypted_data"
+
+        result = encrypt_token("tenant-123", "test_token")
+
+        assert result == base64.b64encode(b"encrypted_data").decode()
+        mock_encrypt.assert_called_with("test_token", "mock_public_key")
+
+    @patch("models.engine.db.session.query")
+    def test_tenant_not_found(self, mock_query):
+        """Test error when tenant doesn't exist"""
+        mock_query.return_value.filter.return_value.first.return_value = None
+
+        with pytest.raises(ValueError) as exc_info:
+            encrypt_token("invalid-tenant", "test_token")
+
+        assert "Tenant with id invalid-tenant not found" in str(exc_info.value)
+
+
+class TestDecryptToken:
+    @patch("libs.rsa.decrypt")
+    def test_successful_decryption(self, mock_decrypt):
+        """Test successful token decryption"""
+        mock_decrypt.return_value = "decrypted_token"
+        encrypted_data = base64.b64encode(b"encrypted_data").decode()
+
+        result = decrypt_token("tenant-123", encrypted_data)
+
+        assert result == "decrypted_token"
+        mock_decrypt.assert_called_once_with(b"encrypted_data", "tenant-123")
+
+    def test_invalid_base64(self):
+        """Test handling of invalid base64 input"""
+        with pytest.raises(binascii.Error):
+            decrypt_token("tenant-123", "invalid_base64!!!")
+
+
+class TestBatchDecryptToken:
+    @patch("libs.rsa.get_decrypt_decoding")
+    @patch("libs.rsa.decrypt_token_with_decoding")
+    def test_batch_decryption(self, mock_decrypt_with_decoding, mock_get_decoding):
+        """Test batch decryption functionality"""
+        mock_rsa_key = MagicMock()
+        mock_cipher_rsa = MagicMock()
+        mock_get_decoding.return_value = (mock_rsa_key, mock_cipher_rsa)
+
+        # Test multiple tokens
+        mock_decrypt_with_decoding.side_effect = ["token1", "token2", "token3"]
+        tokens = [
+            base64.b64encode(b"encrypted1").decode(),
+            base64.b64encode(b"encrypted2").decode(),
+            base64.b64encode(b"encrypted3").decode(),
+        ]
+        result = batch_decrypt_token("tenant-123", tokens)
+
+        assert result == ["token1", "token2", "token3"]
+        # Key should only be loaded once
+        mock_get_decoding.assert_called_once_with("tenant-123")
+
+
+class TestGetDecryptDecoding:
+    @patch("extensions.ext_redis.redis_client.get")
+    @patch("extensions.ext_storage.storage.load")
+    def test_private_key_not_found(self, mock_storage_load, mock_redis_get):
+        """Test error when private key file doesn't exist"""
+        mock_redis_get.return_value = None
+        mock_storage_load.side_effect = FileNotFoundError()
+
+        with pytest.raises(PrivkeyNotFoundError) as exc_info:
+            get_decrypt_decoding("tenant-123")
+
+        assert "Private key not found, tenant_id: tenant-123" in str(exc_info.value)
+
+
+class TestEncryptDecryptIntegration:
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    @patch("libs.rsa.decrypt")
+    def test_should_encrypt_and_decrypt_consistently(self, mock_decrypt, mock_encrypt, mock_query):
+        """Test that encryption and decryption are consistent"""
+        # Setup mock tenant
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "mock_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+
+        # Setup mock encryption/decryption
+        original_token = "test_token_123"
+        mock_encrypt.return_value = b"encrypted_data"
+        mock_decrypt.return_value = original_token
+
+        # Test encryption
+        encrypted = encrypt_token("tenant-123", original_token)
+
+        # Test decryption
+        decrypted = decrypt_token("tenant-123", encrypted)
+
+        assert decrypted == original_token
+
+
+class TestSecurity:
+    """Critical security tests for encryption system"""
+
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_cross_tenant_isolation(self, mock_encrypt, mock_query):
+        """Ensure tokens encrypted for one tenant cannot be used by another"""
+        # Setup mock tenant
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "tenant1_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+        mock_encrypt.return_value = b"encrypted_for_tenant1"
+
+        # Encrypt token for tenant1
+        encrypted = encrypt_token("tenant-123", "sensitive_data")
+
+        # Attempt to decrypt with different tenant should fail
+        with patch("libs.rsa.decrypt") as mock_decrypt:
+            mock_decrypt.side_effect = Exception("Invalid tenant key")
+
+            with pytest.raises(Exception, match="Invalid tenant key"):
+                decrypt_token("different-tenant", encrypted)
+
+    @patch("libs.rsa.decrypt")
+    def test_tampered_ciphertext_rejection(self, mock_decrypt):
+        """Detect and reject tampered ciphertext"""
+        valid_encrypted = base64.b64encode(b"valid_data").decode()
+
+        # Tamper with ciphertext
+        tampered_bytes = bytearray(base64.b64decode(valid_encrypted))
+        tampered_bytes[0] ^= 0xFF
+        tampered = base64.b64encode(bytes(tampered_bytes)).decode()
+
+        mock_decrypt.side_effect = Exception("Decryption error")
+
+        with pytest.raises(Exception, match="Decryption error"):
+            decrypt_token("tenant-123", tampered)
+
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_encryption_randomness(self, mock_encrypt, mock_query):
+        """Ensure same plaintext produces different ciphertext"""
+        mock_tenant = MagicMock(encrypt_public_key="key")
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+
+        # Different outputs for same input
+        mock_encrypt.side_effect = [b"enc1", b"enc2", b"enc3"]
+
+        results = [encrypt_token("tenant-123", "token") for _ in range(3)]
+
+        # All results should be different
+        assert len(set(results)) == 3
+
+
+class TestEdgeCases:
+    """Additional security-focused edge case tests"""
+
+    def test_should_handle_empty_string_in_obfuscation(self):
+        """Test handling of empty string in obfuscation"""
+        # Test empty string (which is a valid str type)
+        assert obfuscated_token("") == ""
+
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_should_handle_empty_token_encryption(self, mock_encrypt, mock_query):
+        """Test encryption of empty token"""
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "mock_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+        mock_encrypt.return_value = b"encrypted_empty"
+
+        result = encrypt_token("tenant-123", "")
+
+        assert result == base64.b64encode(b"encrypted_empty").decode()
+        mock_encrypt.assert_called_with("", "mock_public_key")
+
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_should_handle_special_characters_in_token(self, mock_encrypt, mock_query):
+        """Test tokens containing special/unicode characters"""
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "mock_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+        mock_encrypt.return_value = b"encrypted_special"
+
+        # Test various special characters
+        special_tokens = [
+            "token\x00with\x00null",  # Null bytes
+            "token_with_emoji_😀🎉",  # Unicode emoji
+            "token\nwith\nnewlines",  # Newlines
+            "token\twith\ttabs",  # Tabs
+            "token_with_中文字符",  # Chinese characters
+        ]
+
+        for token in special_tokens:
+            result = encrypt_token("tenant-123", token)
+            assert result == base64.b64encode(b"encrypted_special").decode()
+            mock_encrypt.assert_called_with(token, "mock_public_key")
+
+    @patch("models.engine.db.session.query")
+    @patch("libs.rsa.encrypt")
+    def test_should_handle_rsa_size_limits(self, mock_encrypt, mock_query):
+        """Test behavior when token exceeds RSA encryption limits"""
+        mock_tenant = MagicMock()
+        mock_tenant.encrypt_public_key = "mock_public_key"
+        mock_query.return_value.filter.return_value.first.return_value = mock_tenant
+
+        # RSA 2048-bit can only encrypt ~245 bytes
+        # The actual limit depends on padding scheme
+        mock_encrypt.side_effect = ValueError("Message too long for RSA key size")
+
+        # Create a token that would exceed RSA limits
+        long_token = "x" * 300
+
+        with pytest.raises(ValueError, match="Message too long for RSA key size"):
+            encrypt_token("tenant-123", long_token)
+
+    @patch("libs.rsa.get_decrypt_decoding")
+    @patch("libs.rsa.decrypt_token_with_decoding")
+    def test_batch_decrypt_loads_key_only_once(self, mock_decrypt_with_decoding, mock_get_decoding):
+        """Verify batch decryption optimization - loads key only once"""
+        mock_rsa_key = MagicMock()
+        mock_cipher_rsa = MagicMock()
+        mock_get_decoding.return_value = (mock_rsa_key, mock_cipher_rsa)
+
+        # Test with multiple tokens
+        mock_decrypt_with_decoding.side_effect = ["token1", "token2", "token3", "token4", "token5"]
+        tokens = [base64.b64encode(f"encrypted{i}".encode()).decode() for i in range(5)]
+
+        result = batch_decrypt_token("tenant-123", tokens)
+
+        assert result == ["token1", "token2", "token3", "token4", "token5"]
+        # Key should only be loaded once regardless of token count
+        mock_get_decoding.assert_called_once_with("tenant-123")
+        assert mock_decrypt_with_decoding.call_count == 5

api/tests/unit_tests/libs/test_helper.py

@@ -0,0 +1,65 @@
+import pytest
+
+from libs.helper import extract_tenant_id
+from models.account import Account
+from models.model import EndUser
+
+
+class TestExtractTenantId:
+    """Test cases for the extract_tenant_id utility function."""
+
+    def test_extract_tenant_id_from_account_with_tenant(self):
+        """Test extracting tenant_id from Account with current_tenant_id."""
+        # Create a mock Account object
+        account = Account()
+        # Mock the current_tenant_id property
+        account._current_tenant = type("MockTenant", (), {"id": "account-tenant-123"})()
+
+        tenant_id = extract_tenant_id(account)
+        assert tenant_id == "account-tenant-123"
+
+    def test_extract_tenant_id_from_account_without_tenant(self):
+        """Test extracting tenant_id from Account without current_tenant_id."""
+        # Create a mock Account object
+        account = Account()
+        account._current_tenant = None
+
+        tenant_id = extract_tenant_id(account)
+        assert tenant_id is None
+
+    def test_extract_tenant_id_from_enduser_with_tenant(self):
+        """Test extracting tenant_id from EndUser with tenant_id."""
+        # Create a mock EndUser object
+        end_user = EndUser()
+        end_user.tenant_id = "enduser-tenant-456"
+
+        tenant_id = extract_tenant_id(end_user)
+        assert tenant_id == "enduser-tenant-456"
+
+    def test_extract_tenant_id_from_enduser_without_tenant(self):
+        """Test extracting tenant_id from EndUser without tenant_id."""
+        # Create a mock EndUser object
+        end_user = EndUser()
+        end_user.tenant_id = None
+
+        tenant_id = extract_tenant_id(end_user)
+        assert tenant_id is None
+
+    def test_extract_tenant_id_with_invalid_user_type(self):
+        """Test extracting tenant_id with invalid user type raises ValueError."""
+        invalid_user = "not_a_user_object"
+
+        with pytest.raises(ValueError, match="Invalid user type.*Expected Account or EndUser"):
+            extract_tenant_id(invalid_user)
+
+    def test_extract_tenant_id_with_none_user(self):
+        """Test extracting tenant_id with None user raises ValueError."""
+        with pytest.raises(ValueError, match="Invalid user type.*Expected Account or EndUser"):
+            extract_tenant_id(None)
+
+    def test_extract_tenant_id_with_dict_user(self):
+        """Test extracting tenant_id with dict user raises ValueError."""
+        dict_user = {"id": "123", "tenant_id": "456"}
+
+        with pytest.raises(ValueError, match="Invalid user type.*Expected Account or EndUser"):
+            extract_tenant_id(dict_user)

api/tests/unit_tests/models/test_workflow.py

@@ -9,6 +9,7 @@ from core.file.models import File
 from core.variables import FloatVariable, IntegerVariable, SecretVariable, StringVariable
 from core.variables.segments import IntegerSegment, Segment
 from factories.variable_factory import build_segment
+from models.model import EndUser
 from models.workflow import Workflow, WorkflowDraftVariable, WorkflowNodeExecutionModel, is_system_variable_editable
 
 
@@ -43,7 +44,7 @@ def test_environment_variables():
     )
 
     # Mock current_user as an EndUser
-    mock_user = mock.Mock()
+    mock_user = mock.Mock(spec=EndUser)
     mock_user.tenant_id = "tenant_id"
 
     with (
@@ -90,7 +91,7 @@ def test_update_environment_variables():
     )
 
     # Mock current_user as an EndUser
-    mock_user = mock.Mock()
+    mock_user = mock.Mock(spec=EndUser)
     mock_user.tenant_id = "tenant_id"
 
     with (
@@ -136,7 +137,7 @@ def test_to_dict():
     # Create some EnvironmentVariable instances
 
     # Mock current_user as an EndUser
-    mock_user = mock.Mock()
+    mock_user = mock.Mock(spec=EndUser)
     mock_user.tenant_id = "tenant_id"
 
     with (

web/app/components/base/chat/chat/question.tsx

@@ -98,7 +98,7 @@ const Question: FC<QuestionProps> = ({
 
   return (
     <div className='mb-2 flex justify-end last:mb-0'>
-      <div className={cn('group relative mr-4 flex max-w-full items-start pl-14', isEditing && 'flex-1')}>
+      <div className={cn('group relative mr-4 flex max-w-full items-start pl-14 overflow-x-hidden', isEditing && 'flex-1')}>
         <div className={cn('mr-2 gap-1', isEditing ? 'hidden' : 'flex')}>
           <div
             className="absolute hidden gap-0.5 rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 shadow-md backdrop-blur-sm group-hover:flex"

web/app/components/base/tooltip/index.tsx

@@ -101,7 +101,7 @@ const Tooltip: FC<TooltipProps> = ({
       >
         {popupContent && (<div
           className={cn(
-            !noDecoration && 'system-xs-regular relative break-words rounded-md bg-components-panel-bg px-3 py-2 text-text-tertiary shadow-lg',
+            !noDecoration && 'system-xs-regular relative max-w-[300px] break-words rounded-md bg-components-panel-bg px-3 py-2 text-left text-text-tertiary shadow-lg',
             popupClassName,
           )}
           onMouseEnter={() => triggerMethod === 'hover' && setHoverPopup()}

web/app/components/plugins/plugin-page/index.tsx

@@ -136,7 +136,7 @@ const PluginPage = ({
   const options = usePluginPageContext(v => v.options)
   const activeTab = usePluginPageContext(v => v.activeTab)
   const setActiveTab = usePluginPageContext(v => v.setActiveTab)
-  const { enable_marketplace, branding } = useGlobalPublicStore(s => s.systemFeatures)
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
 
   const isPluginsTab = useMemo(() => activeTab === PLUGIN_PAGE_TABS_MAP.plugins, [activeTab])
   const isExploringMarketplace = useMemo(() => {
@@ -225,7 +225,7 @@ const PluginPage = ({
               )
             }
             {
-              canSetPermissions && !branding.enabled && (
+              canSetPermissions && (
                 <Tooltip
                   popupContent={t('plugin.privilege.title')}
                 >

web/app/components/workflow/nodes/http/default.ts

@@ -26,6 +26,7 @@ const nodeDefault: NodeDefault<HttpNodeType> = {
       type: BodyType.none,
       data: [],
     },
+    ssl_verify: true,
     timeout: {
       max_connect_timeout: 0,
       max_read_timeout: 0,

web/app/components/workflow/nodes/http/panel.tsx

@@ -10,6 +10,7 @@ import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
 import CurlPanel from './components/curl-panel'
 import cn from '@/utils/classnames'
+import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -47,6 +48,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     showCurlPanel,
     hideCurlPanel,
     handleCurlImport,
+    handleSSLVerifyChange,
   } = useConfig(id, data)
   // To prevent prompt editor in body not update data.
   if (!isDataReady)
@@ -124,6 +126,18 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
             onChange={setBody}
           />
         </Field>
+        <Field
+          title={t(`${i18nPrefix}.verifySSL.title`)}
+          tooltip={t(`${i18nPrefix}.verifySSL.warningTooltip`)}
+          operations={
+            <Switch
+              defaultValue={!!inputs.ssl_verify}
+              onChange={handleSSLVerifyChange}
+              size='md'
+              disabled={readOnly}
+            />
+          }>
+        </Field>
       </div>
       <Split />
       <Timeout

web/app/components/workflow/nodes/http/types.ts

@@ -81,4 +81,5 @@ export type HttpNodeType = CommonNodeType & {
   body: Body
   authorization: Authorization
   timeout: Timeout
+  ssl_verify?: boolean
 }

web/app/components/workflow/nodes/http/use-config.ts

@@ -141,6 +141,13 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleSSLVerifyChange = useCallback((checked: boolean) => {
+    const newInputs = produce(inputs, (draft: HttpNodeType) => {
+      draft.ssl_verify = checked
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   return {
     readOnly,
     isDataReady,
@@ -164,6 +171,8 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     toggleIsParamKeyValueEdit,
     // body
     setBody,
+    // ssl verify
+    handleSSLVerifyChange,
     // authorization
     isShowAuthorization,
     showAuthorization,

web/app/components/workflow/nodes/question-classifier/components/class-item.tsx

@@ -11,6 +11,8 @@ import { uniqueId } from 'lodash-es'
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 type Props = {
+  className?: string
+  headerClassName?: string
   nodeId: string
   payload: Topic
   onChange: (payload: Topic) => void
@@ -21,6 +23,8 @@ type Props = {
 }
 
 const ClassItem: FC<Props> = ({
+  className,
+  headerClassName,
   nodeId,
   payload,
   onChange,
@@ -49,6 +53,8 @@ const ClassItem: FC<Props> = ({
 
   return (
     <Editor
+      className={className}
+      headerClassName={headerClassName}
       title={`${t(`${i18nPrefix}.class`)} ${index}`}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
       value={payload.name}

web/app/components/workflow/nodes/question-classifier/components/class-list.tsx

@@ -8,6 +8,9 @@ import AddButton from '../../_base/components/add-button'
 import Item from './class-item'
 import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { ReactSortable } from 'react-sortablejs'
+import { noop } from 'lodash-es'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
@@ -17,6 +20,7 @@ type Props = {
   onChange: (list: Topic[]) => void
   readonly?: boolean
   filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
+  handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
 }
 
 const ClassList: FC<Props> = ({
@@ -25,6 +29,7 @@ const ClassList: FC<Props> = ({
   onChange,
   readonly,
   filterVar,
+  handleSortTopic = noop,
 }) => {
   const { t } = useTranslation()
   const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
@@ -55,22 +60,48 @@ const ClassList: FC<Props> = ({
     }
   }, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
 
+  const topicCount = list.length
+  const handleSideWidth = 3
   // Todo Remove; edit topic name
   return (
-    <div className='space-y-2'>
+    <ReactSortable
+      list={list.map(item => ({ ...item }))}
+      setList={handleSortTopic}
+      handle='.handle'
+      ghostClass='bg-components-panel-bg'
+      animation={150}
+      disabled={readonly}
+      className='space-y-2'
+    >
       {
         list.map((item, index) => {
+          const canDrag = (() => {
+            if (readonly)
+              return false
+
+            return topicCount >= 2
+          })()
           return (
-            <Item
-              nodeId={nodeId}
-              key={list[index].id}
-              payload={item}
-              onChange={handleClassChange(index)}
-              onRemove={handleRemoveClass(index)}
-              index={index + 1}
-              readonly={readonly}
-              filterVar={filterVar}
-            />
+            <div key={item.id}
+                className={cn(
+                  'group relative rounded-[10px] bg-components-panel-bg',
+                  `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
+            )}>
+              <div >
+                <Item
+                  className={cn(canDrag && 'handle')}
+                  headerClassName={cn(canDrag && 'cursor-grab')}
+                  nodeId={nodeId}
+                  key={list[index].id}
+                  payload={item}
+                  onChange={handleClassChange(index)}
+                  onRemove={handleRemoveClass(index)}
+                  index={index + 1}
+                  readonly={readonly}
+                  filterVar={filterVar}
+                />
+              </div>
+            </div>
           )
         })
       }
@@ -81,7 +112,7 @@ const ClassList: FC<Props> = ({
         />
       )}
 
-    </div>
+    </ReactSortable>
   )
 }
 export default React.memo(ClassList)

web/app/components/workflow/nodes/question-classifier/panel.tsx

@@ -40,6 +40,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
     handleVisionResolutionChange,
     handleVisionResolutionEnabledChange,
     filterVar,
+    handleSortTopic,
   } = useConfig(id, data)
 
   const model = inputs.model
@@ -99,6 +100,7 @@ const Panel: FC<NodePanelProps<QuestionClassifierNodeType>> = ({
             onChange={handleTopicsChange}
             readonly={readOnly}
             filterVar={filterVar}
+            handleSortTopic={handleSortTopic}
           />
         </Field>
         <Split />

web/app/components/workflow/nodes/question-classifier/use-config.ts

@@ -9,13 +9,15 @@ import {
 import { useStore } from '../../store'
 import useAvailableVarList from '../_base/hooks/use-available-var-list'
 import useConfigVision from '../../hooks/use-config-vision'
-import type { QuestionClassifierNodeType } from './types'
+import type { QuestionClassifierNodeType, Topic } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { checkHasQueryBlock } from '@/app/components/base/prompt-editor/constants'
+import { useUpdateNodeInternals } from 'reactflow'
 
 const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
+  const updateNodeInternals = useUpdateNodeInternals()
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const isChatMode = useIsChatMode()
   const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
@@ -166,6 +168,17 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     return varPayload.type === VarType.string
   }, [])
 
+  const handleSortTopic = useCallback((newTopics: (Topic & { id: string })[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.classes = newTopics.filter(Boolean).map(item => ({
+        id: item.id,
+        name: item.name,
+      }))
+    })
+    setInputs(newInputs)
+    updateNodeInternals(id)
+  }, [id, inputs, setInputs, updateNodeInternals])
+
   return {
     readOnly,
     inputs,
@@ -185,6 +198,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     isVisionModel,
     handleVisionResolutionEnabledChange,
     handleVisionResolutionChange,
+    handleSortTopic,
   }
 }
 

web/i18n/de-DE/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         title: 'Importieren von cURL',
         placeholder: 'Fügen Sie hier die cURL-Zeichenfolge ein',
       },
+      verifySSL: {
+        title: 'SSL-Zertifikat überprüfen',
+        warningTooltip: 'Das Deaktivieren der SSL-Überprüfung wird für Produktionsumgebungen nicht empfohlen. Dies sollte nur in der Entwicklung oder im Test verwendet werden, da es die Verbindung anfällig für Sicherheitsbedrohungen wie Man-in-the-Middle-Angriffe macht.',
+      },
     },
     code: {
       inputVars: 'Eingabevariablen',

web/i18n/en-US/workflow.ts

@@ -552,6 +552,10 @@ const translation = {
         title: 'Import from cURL',
         placeholder: 'Paste cURL string here',
       },
+      verifySSL: {
+        title: 'Verify SSL Certificate',
+        warningTooltip: 'Disabling SSL verification is not recommended for production environments. This should only be used in development or testing, as it makes the connection vulnerable to security threats like man-in-the-middle attacks.',
+      },
     },
     code: {
       inputVars: 'Input Variables',

web/i18n/es-ES/workflow.ts

@@ -537,6 +537,10 @@ const translation = {
         title: 'Importar desde cURL',
         placeholder: 'Pegar la cadena cURL aquí',
       },
+      verifySSL: {
+        title: 'Verificar el certificado SSL',
+        warningTooltip: 'Deshabilitar la verificación SSL no se recomienda para entornos de producción. Esto solo debe utilizarse en desarrollo o pruebas, ya que hace que la conexión sea vulnerable a amenazas de seguridad como ataques de intermediario.',
+      },
     },
     code: {
       inputVars: 'Variables de entrada',

web/i18n/fa-IR/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         title: 'وارد کردن از cURL',
         placeholder: 'رشته cURL را اینجا بچسبانید',
       },
+      verifySSL: {
+        title: 'گواهی SSL را تأیید کنید',
+        warningTooltip: 'غیرفعال کردن تأیید SSL برای محیط‌های تولید توصیه نمی‌شود. این فقط باید در توسعه یا آزمایش استفاده شود، زیرا این کار اتصال را در معرض تهدیدات امنیتی مانند حملات میانی قرار می‌دهد.',
+      },
     },
     code: {
       inputVars: 'متغیرهای ورودی',

web/i18n/fr-FR/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: 'Collez la chaîne cURL ici',
         title: 'Importer à partir de cURL',
       },
+      verifySSL: {
+        title: 'Vérifier le certificat SSL',
+        warningTooltip: 'Désactiver la vérification SSL n\'est pas recommandé pour les environnements de production. Cela ne devrait être utilisé que dans le développement ou les tests, car cela rend la connexion vulnérable aux menaces de sécurité telles que les attaques de type \'man-in-the-middle\'.',
+      },
     },
     code: {
       inputVars: 'Variables de saisie',

web/i18n/hi-IN/workflow.ts

@@ -552,6 +552,10 @@ const translation = {
         placeholder: 'यहां cURL स्ट्रिंग पेस्ट करें',
         title: 'cURL से आयात करें',
       },
+      verifySSL: {
+        title: 'SSL प्रमाणपत्र की पुष्टि करें',
+        warningTooltip: 'SSL सत्यापन को अक्षम करना उत्पादन वातावरण के लिए अनुशंसित नहीं है। इसका उपयोग केवल विकास या परीक्षण में किया जाना चाहिए, क्योंकि यह कनेक्शन को मिडल-मैन हमलों जैसे सुरक्षा खतरों के लिए कमजोर बना देता है।',
+      },
     },
     code: {
       inputVars: 'इनपुट वेरिएबल्स',

web/i18n/it-IT/workflow.ts

@@ -555,6 +555,10 @@ const translation = {
         placeholder: 'Incolla qui la stringa cURL',
         title: 'Importazione da cURL',
       },
+      verifySSL: {
+        title: 'Verifica il certificato SSL',
+        warningTooltip: 'Disabilitare la verifica SSL non è raccomandato per gli ambienti di produzione. Questo dovrebbe essere utilizzato solo in sviluppo o test, poiché rende la connessione vulnerabile a minacce alla sicurezza come gli attacchi man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'Variabili di Input',

web/i18n/ja-JP/workflow.ts

@@ -545,6 +545,10 @@ const translation = {
         title: 'cURL からインポート',
         placeholder: 'ここに cURL 文字列を貼り付けます',
       },
+      verifySSL: {
+        title: 'SSL証明書を確認する',
+        warningTooltip: 'SSL検証を無効にすることは、本番環境では推奨されません。これは開発またはテストのみに使用すべきであり、中間者攻撃などのセキュリティ脅威に対して接続を脆弱にするためです。',
+      },
     },
     code: {
       inputVars: '入力変数',

web/i18n/ko-KR/workflow.ts

@@ -567,6 +567,10 @@ const translation = {
         title: 'cURL 에서 가져오기',
         placeholder: '여기에 cURL 문자열 붙여 넣기',
       },
+      verifySSL: {
+        title: 'SSL 인증서 확인',
+        warningTooltip: 'SSL 검증을 비활성화하는 것은 프로덕션 환경에서는 권장되지 않습니다. 이는 연결이 중간자 공격과 같은 보안 위협에 취약하게 만들므로 개발 또는 테스트에서만 사용해야 합니다.',
+      },
     },
     code: {
       inputVars: '입력 변수',

web/i18n/pl-PL/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: 'Wklej tutaj ciąg cURL',
         title: 'Importowanie z cURL',
       },
+      verifySSL: {
+        title: 'Zweryfikuj certyfikat SSL',
+        warningTooltip: 'Wyłączenie weryfikacji SSL nie jest zalecane w środowiskach produkcyjnych. Powinno to być używane tylko w rozwoju lub testowaniu, ponieważ naraża połączenie na zagrożenia bezpieczeństwa, takie jak ataki typu man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'Zmienne wejściowe',

web/i18n/pt-BR/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: 'Cole a string cURL aqui',
         title: 'Importar do cURL',
       },
+      verifySSL: {
+        title: 'Verificar o certificado SSL',
+        warningTooltip: 'Desabilitar a verificação SSL não é recomendado para ambientes de produção. Isso deve ser usado apenas em desenvolvimento ou teste, pois torna a conexão vulnerável a ameaças de segurança, como ataques man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'Variáveis de entrada',

web/i18n/ro-RO/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: 'Lipiți șirul cURL aici',
         title: 'Importați din cURL',
       },
+      verifySSL: {
+        title: 'Verifică certificatul SSL',
+        warningTooltip: 'Dezactivarea verificării SSL nu este recomandată pentru medii de producție. Acest lucru ar trebui să fie folosit doar în dezvoltare sau testare, deoarece face conexiunea vulnerabilă la amenințări de securitate, cum ar fi atacurile man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'Variabile de intrare',

web/i18n/ru-RU/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: 'Вставьте сюда строку cURL',
         title: 'Импорт из cURL',
       },
+      verifySSL: {
+        title: 'Проверить SSL-сертификат',
+        warningTooltip: 'Отключение проверки SSL не рекомендуется для производственных сред. Это следует использовать только в разработке или тестировании, так как это делает соединение уязвимым для угроз безопасности, таких как атаки «человек посередине».',
+      },
     },
     code: {
       inputVars: 'Входные переменные',

web/i18n/sl-SI/workflow.ts

@@ -541,6 +541,10 @@ const translation = {
       value: 'Vrednost',
       params: 'Parametri',
       insertVarPlaceholder: 'vnesite \'/\' za vstavljanje spremenljivke',
+      verifySSL: {
+        title: 'Preverite SSL certifikat',
+        warningTooltip: 'Onemogočanje preverjanja SSL ni priporočljivo za proizvodna okolja. To bi se moralo uporabljati le pri razvoju ali testiranju, saj povezavo izpostavi varnostnim grožnjam, kot so napadi človek-v-sredini.',
+      },
     },
     code: {
       searchDependencies: 'Išči odvisnosti',

web/i18n/th-TH/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         title: 'นําเข้าจาก cURL',
         placeholder: 'วางสตริง cURL ที่นี่',
       },
+      verifySSL: {
+        title: 'ตรวจสอบใบรับรอง SSL',
+        warningTooltip: 'การปิดการตรวจสอบ SSL ไม่แนะนำให้ใช้ในสภาพแวดล้อมการผลิต ควรใช้เฉพาะในระหว่างการพัฒนาหรือการทดสอบเท่านั้น เนื่องจากจะทำให้การเชื่อมต่อมีความเสี่ยงต่อภัยคุกคามด้านความปลอดภัย เช่น การโจมตีแบบ Man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'ตัวแปรอินพุต',

web/i18n/tr-TR/workflow.ts

@@ -540,6 +540,10 @@ const translation = {
         placeholder: 'cURL dizesini buraya yapıştırın',
         title: 'cURL\'den içe aktar',
       },
+      verifySSL: {
+        title: 'SSL Sertifikasını Doğrula',
+        warningTooltip: 'SSL doğrulamasını devre dışı bırakmak, üretim ortamları için önerilmez. Bu yalnızca geliştirme veya test aşamalarında kullanılmalıdır, çünkü bağlantıyı adam ortada saldırıları gibi güvenlik tehditlerine karşı savunmasız hale getirir.',
+      },
     },
     code: {
       inputVars: 'Giriş Değişkenleri',

web/i18n/uk-UA/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         title: 'Імпорт з cURL',
         placeholder: 'Вставте сюди рядок cURL',
       },
+      verifySSL: {
+        title: 'Перевірити SSL сертифікат',
+        warningTooltip: 'Вимкнення перевірки SSL не рекомендується для виробничих середовищ. Це слід використовувати лише в розробці або тестуванні, оскільки це робить з\'єднання вразливим до загроз безпеці, таких як атаки «людина посередині».',
+      },
     },
     code: {
       inputVars: 'Вхідні змінні',

web/i18n/vi-VN/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         title: 'Nhập từ cURL',
         placeholder: 'Dán chuỗi cURL vào đây',
       },
+      verifySSL: {
+        title: 'Xác thực chứng chỉ SSL',
+        warningTooltip: 'Việc vô hiệu hóa xác minh SSL không được khuyến khích cho các môi trường sản xuất. Điều này chỉ nên được sử dụng trong phát triển hoặc thử nghiệm, vì nó làm cho kết nối dễ bị tổn thương trước các mối đe dọa an ninh như cuộc tấn công man-in-the-middle.',
+      },
     },
     code: {
       inputVars: 'Biến đầu vào',

web/i18n/zh-Hans/workflow.ts

@@ -553,6 +553,10 @@ const translation = {
         title: '导入 cURL',
         placeholder: '粘贴 cURL 字符串',
       },
+      verifySSL: {
+        title: '验证 SSL 证书',
+        warningTooltip: '不建议在生产环境中禁用 SSL 验证。这仅应在开发或测试中使用，因为它会使连接容易受到诸如中间人攻击等安全威胁。',
+      },
     },
     code: {
       inputVars: '输入变量',

web/i18n/zh-Hant/workflow.ts

@@ -539,6 +539,10 @@ const translation = {
         placeholder: '在此處粘貼 cURL 字串',
         title: '從 cURL 導入',
       },
+      verifySSL: {
+        title: '驗證 SSL 證書',
+        warningTooltip: '不建議在生產環境中禁用SSL驗證。這僅應用於開發或測試，因為這樣會使連接容易受到中間人攻擊等安全威脅的威脅。',
+      },
     },
     code: {
       inputVars: '輸入變量',

web/themes/dark.css

@@ -1,274 +1,278 @@
 /* Attention: Generate by code. Don't update by hand!!! */
 html[data-theme="dark"] {
-  --color-components-input-bg-normal: #ffffff14;
-  --color-components-input-text-placeholder: #c8ceda4d;
-  --color-components-input-bg-hover: #ffffff08;
-  --color-components-input-bg-active: #ffffff0d;
+  --color-components-input-bg-normal: rgb(255 255 255 / 0.08);
+  --color-components-input-text-placeholder: rgb(200 206 218 / 0.3);
+  --color-components-input-bg-hover: rgb(255 255 255 / 0.03);
+  --color-components-input-bg-active: rgb(255 255 255 / 0.05);
   --color-components-input-border-active: #747481;
   --color-components-input-border-destructive: #f97066;
   --color-components-input-text-filled: #f4f4f5;
-  --color-components-input-bg-destructive: #ffffff03;
-  --color-components-input-bg-disabled: #ffffff08;
-  --color-components-input-text-disabled: #c8ceda4d;
-  --color-components-input-text-filled-disabled: #c8ceda99;
+  --color-components-input-bg-destructive: rgb(255 255 255 / 0.01);
+  --color-components-input-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-input-text-disabled: rgb(200 206 218 / 0.3);
+  --color-components-input-text-filled-disabled: rgb(200 206 218 / 0.6);
   --color-components-input-border-hover: #3a3a40;
   --color-components-input-border-active-prompt-1: #36bffa;
   --color-components-input-border-active-prompt-2: #296dff;
 
-  --color-components-kbd-bg-gray: #ffffff08;
-  --color-components-kbd-bg-white: #ffffff1f;
+  --color-components-kbd-bg-gray: rgb(255 255 255 / 0.03);
+  --color-components-kbd-bg-white: rgb(255 255 255 / 0.12);
 
-  --color-components-tooltip-bg: #18181bf2;
+  --color-components-tooltip-bg: rgb(24 24 27 / 0.95);
 
-  --color-components-button-primary-text: #fffffff2;
+  --color-components-button-primary-text: rgb(255 255 255 / 0.95);
   --color-components-button-primary-bg: #155aef;
-  --color-components-button-primary-border: #ffffff1f;
+  --color-components-button-primary-border: rgb(255 255 255 / 0.12);
   --color-components-button-primary-bg-hover: #296dff;
-  --color-components-button-primary-border-hover: #ffffff33;
-  --color-components-button-primary-bg-disabled: #ffffff08;
-  --color-components-button-primary-border-disabled: #ffffff14;
-  --color-components-button-primary-text-disabled: #ffffff33;
+  --color-components-button-primary-border-hover: rgb(255 255 255 / 0.2);
+  --color-components-button-primary-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-button-primary-border-disabled: rgb(255 255 255 / 0.08);
+  --color-components-button-primary-text-disabled: rgb(255 255 255 / 0.2);
 
-  --color-components-button-secondary-text: #ffffffcc;
-  --color-components-button-secondary-text-disabled: #ffffff33;
-  --color-components-button-secondary-bg: #ffffff1f;
-  --color-components-button-secondary-bg-hover: #ffffff33;
-  --color-components-button-secondary-bg-disabled: #ffffff08;
-  --color-components-button-secondary-border: #ffffff14;
-  --color-components-button-secondary-border-hover: #ffffff1f;
-  --color-components-button-secondary-border-disabled: #ffffff0d;
+  --color-components-button-secondary-text: rgb(255 255 255 / 0.8);
+  --color-components-button-secondary-text-disabled: rgb(255 255 255 / 0.2);
+  --color-components-button-secondary-bg: rgb(255 255 255 / 0.12);
+  --color-components-button-secondary-bg-hover: rgb(255 255 255 / 0.2);
+  --color-components-button-secondary-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-button-secondary-border: rgb(255 255 255 / 0.08);
+  --color-components-button-secondary-border-hover: rgb(255 255 255 / 0.12);
+  --color-components-button-secondary-border-disabled: rgb(255 255 255 / 0.05);
 
   --color-components-button-tertiary-text: #d9d9de;
-  --color-components-button-tertiary-text-disabled: #ffffff33;
-  --color-components-button-tertiary-bg: #ffffff14;
-  --color-components-button-tertiary-bg-hover: #ffffff1f;
-  --color-components-button-tertiary-bg-disabled: #ffffff08;
+  --color-components-button-tertiary-text-disabled: rgb(255 255 255 / 0.2);
+  --color-components-button-tertiary-bg: rgb(255 255 255 / 0.08);
+  --color-components-button-tertiary-bg-hover: rgb(255 255 255 / 0.12);
+  --color-components-button-tertiary-bg-disabled: rgb(255 255 255 / 0.03);
 
   --color-components-button-ghost-text: #d9d9de;
-  --color-components-button-ghost-text-disabled: #ffffff33;
-  --color-components-button-ghost-bg-hover: #c8ceda14;
+  --color-components-button-ghost-text-disabled: rgb(255 255 255 / 0.2);
+  --color-components-button-ghost-bg-hover: rgb(200 206 218 / 0.08);
 
-  --color-components-button-destructive-primary-text: #fffffff2;
-  --color-components-button-destructive-primary-text-disabled: #ffffff33;
+  --color-components-button-destructive-primary-text: rgb(255 255 255 / 0.95);
+  --color-components-button-destructive-primary-text-disabled: rgb(255 255 255 / 0.2);
   --color-components-button-destructive-primary-bg: #d92d20;
   --color-components-button-destructive-primary-bg-hover: #f04438;
-  --color-components-button-destructive-primary-bg-disabled: #f0443824;
-  --color-components-button-destructive-primary-border: #ffffff1f;
-  --color-components-button-destructive-primary-border-hover: #ffffff33;
-  --color-components-button-destructive-primary-border-disabled: #ffffff14;
+  --color-components-button-destructive-primary-bg-disabled: rgb(240 68 56 / 0.14);
+  --color-components-button-destructive-primary-border: rgb(255 255 255 / 0.12);
+  --color-components-button-destructive-primary-border-hover: rgb(255 255 255 / 0.2);
+  --color-components-button-destructive-primary-border-disabled: rgb(255 255 255 / 0.08);
 
   --color-components-button-destructive-secondary-text: #f97066;
-  --color-components-button-destructive-secondary-text-disabled: #f0443833;
-  --color-components-button-destructive-secondary-bg: #ffffff1f;
-  --color-components-button-destructive-secondary-bg-hover: #f0443824;
-  --color-components-button-destructive-secondary-bg-disabled: #f0443814;
-  --color-components-button-destructive-secondary-border: #ffffff14;
-  --color-components-button-destructive-secondary-border-hover: #ffffff1f;
-  --color-components-button-destructive-secondary-border-disabled: #f0443814;
+  --color-components-button-destructive-secondary-text-disabled: rgb(240 68 56 / 0.2);
+  --color-components-button-destructive-secondary-bg: rgb(255 255 255 / 0.12);
+  --color-components-button-destructive-secondary-bg-hover: rgb(240 68 56 / 0.14);
+  --color-components-button-destructive-secondary-bg-disabled: rgb(240 68 56 / 0.08);
+  --color-components-button-destructive-secondary-border: rgb(255 255 255 / 0.08);
+  --color-components-button-destructive-secondary-border-hover: rgb(255 255 255 / 0.12);
+  --color-components-button-destructive-secondary-border-disabled: rgb(240 68 56 / 0.08);
 
   --color-components-button-destructive-tertiary-text: #f97066;
-  --color-components-button-destructive-tertiary-text-disabled: #f0443833;
-  --color-components-button-destructive-tertiary-bg: #f0443824;
-  --color-components-button-destructive-tertiary-bg-hover: #f0443840;
-  --color-components-button-destructive-tertiary-bg-disabled: #f0443814;
+  --color-components-button-destructive-tertiary-text-disabled: rgb(240 68 56 / 0.2);
+  --color-components-button-destructive-tertiary-bg: rgb(240 68 56 / 0.14);
+  --color-components-button-destructive-tertiary-bg-hover: rgb(240 68 56 / 0.25);
+  --color-components-button-destructive-tertiary-bg-disabled: rgb(240 68 56 / 0.08);
 
   --color-components-button-destructive-ghost-text: #f97066;
-  --color-components-button-destructive-ghost-text-disabled: #f0443833;
-  --color-components-button-destructive-ghost-bg-hover: #f0443824;
+  --color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2);
+  --color-components-button-destructive-ghost-bg-hover: rgb(240 68 56 / 0.14);
 
-  --color-components-button-secondary-accent-text: #ffffffcc;
-  --color-components-button-secondary-accent-text-disabled: #ffffff33;
-  --color-components-button-secondary-accent-bg: #ffffff0d;
-  --color-components-button-secondary-accent-bg-hover: #ffffff14;
-  --color-components-button-secondary-accent-bg-disabled: #ffffff08;
-  --color-components-button-secondary-accent-border: #ffffff14;
-  --color-components-button-secondary-accent-border-hover: #ffffff1f;
-  --color-components-button-secondary-accent-border-disabled: #ffffff0d;
+  --color-components-button-secondary-accent-text: rgb(255 255 255 / 0.8);
+  --color-components-button-secondary-accent-text-disabled: rgb(255 255 255 / 0.2);
+  --color-components-button-secondary-accent-bg: rgb(255 255 255 / 0.05);
+  --color-components-button-secondary-accent-bg-hover: rgb(255 255 255 / 0.08);
+  --color-components-button-secondary-accent-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-button-secondary-accent-border: rgb(255 255 255 / 0.08);
+  --color-components-button-secondary-accent-border-hover: rgb(255 255 255 / 0.12);
+  --color-components-button-secondary-accent-border-disabled: rgb(255 255 255 / 0.05);
 
   --color-components-button-indigo-bg: #444ce7;
   --color-components-button-indigo-bg-hover: #6172f3;
-  --color-components-button-indigo-bg-disabled: #ffffff08;
+  --color-components-button-indigo-bg-disabled: rgb(255 255 255 / 0.03);
 
-  --color-components-checkbox-icon: #fffffff2;
-  --color-components-checkbox-icon-disabled: #ffffff33;
+  --color-components-checkbox-icon: rgb(255 255 255 / 0.95);
+  --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.2);
   --color-components-checkbox-bg: #296dff;
   --color-components-checkbox-bg-hover: #5289ff;
-  --color-components-checkbox-bg-disabled: #ffffff08;
-  --color-components-checkbox-border: #ffffff66;
-  --color-components-checkbox-border-hover: #ffffff99;
-  --color-components-checkbox-border-disabled: #ffffff03;
-  --color-components-checkbox-bg-unchecked: #ffffff08;
-  --color-components-checkbox-bg-unchecked-hover: #ffffff0d;
-  --color-components-checkbox-bg-disabled-checked: #155aef33;
+  --color-components-checkbox-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-checkbox-border: rgb(255 255 255 / 0.4);
+  --color-components-checkbox-border-hover: rgb(255 255 255 / 0.6);
+  --color-components-checkbox-border-disabled: rgb(255 255 255 / 0.01);
+  --color-components-checkbox-bg-unchecked: rgb(255 255 255 / 0.03);
+  --color-components-checkbox-bg-unchecked-hover: rgb(255 255 255 / 0.05);
+  --color-components-checkbox-bg-disabled-checked: rgb(21 90 239 / 0.2);
 
   --color-components-radio-border-checked: #296dff;
   --color-components-radio-border-checked-hover: #5289ff;
-  --color-components-radio-border-checked-disabled: #155aef33;
-  --color-components-radio-bg-disabled: #ffffff08;
-  --color-components-radio-border: #ffffff66;
-  --color-components-radio-border-hover: #ffffff99;
-  --color-components-radio-border-disabled: #ffffff03;
-  --color-components-radio-bg: #ffffff00;
-  --color-components-radio-bg-hover: #ffffff0d;
+  --color-components-radio-border-checked-disabled: rgb(21 90 239 / 0.2);
+  --color-components-radio-bg-disabled: rgb(255 255 255 / 0.03);
+  --color-components-radio-border: rgb(255 255 255 / 0.4);
+  --color-components-radio-border-hover: rgb(255 255 255 / 0.6);
+  --color-components-radio-border-disabled: rgb(255 255 255 / 0.01);
+  --color-components-radio-bg: rgb(255 255 255 / 0);
+  --color-components-radio-bg-hover: rgb(255 255 255 / 0.05);
 
   --color-components-toggle-knob: #f4f4f5;
-  --color-components-toggle-knob-disabled: #ffffff33;
+  --color-components-toggle-knob-disabled: rgb(255 255 255 / 0.2);
   --color-components-toggle-bg: #296dff;
   --color-components-toggle-bg-hover: #5289ff;
-  --color-components-toggle-bg-disabled: #ffffff14;
-  --color-components-toggle-bg-unchecked: #ffffff33;
-  --color-components-toggle-bg-unchecked-hover: #ffffff4d;
-  --color-components-toggle-bg-unchecked-disabled: #ffffff14;
+  --color-components-toggle-bg-disabled: rgb(255 255 255 / 0.08);
+  --color-components-toggle-bg-unchecked: rgb(255 255 255 / 0.2);
+  --color-components-toggle-bg-unchecked-hover: rgb(255 255 255 / 0.3);
+  --color-components-toggle-bg-unchecked-disabled: rgb(255 255 255 / 0.08);
   --color-components-toggle-knob-hover: #fefefe;
 
   --color-components-card-bg: #222225;
-  --color-components-card-border: #ffffff08;
+  --color-components-card-border: rgb(255 255 255 / 0.03);
   --color-components-card-bg-alt: #27272b;
+  --color-components-card-bg-transparent: rgb(34 34 37 / 0);
+  --color-components-card-bg-alt-transparent: rgb(39 39 43 / 0);
 
-  --color-components-menu-item-text: #c8ceda99;
-  --color-components-menu-item-text-active: #fffffff2;
-  --color-components-menu-item-text-hover: #c8cedacc;
-  --color-components-menu-item-text-active-accent: #fffffff2;
+  --color-components-menu-item-text: rgb(200 206 218 / 0.6);
+  --color-components-menu-item-text-active: rgb(255 255 255 / 0.95);
+  --color-components-menu-item-text-hover: rgb(200 206 218 / 0.8);
+  --color-components-menu-item-text-active-accent: rgb(255 255 255 / 0.95);
+  --color-components-menu-item-bg-active: rgb(200 206 218 / 0.14);
+  --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.08);
 
   --color-components-panel-bg: #222225;
-  --color-components-panel-bg-blur: #2c2c30f2;
-  --color-components-panel-border: #c8ceda24;
-  --color-components-panel-border-subtle: #c8ceda14;
+  --color-components-panel-bg-blur: rgb(44 44 48 / 0.95);
+  --color-components-panel-border: rgb(200 206 218 / 0.14);
+  --color-components-panel-border-subtle: rgb(200 206 218 / 0.08);
   --color-components-panel-gradient-2: #222225;
   --color-components-panel-gradient-1: #27272b;
   --color-components-panel-bg-alt: #222225;
   --color-components-panel-on-panel-item-bg: #27272b;
   --color-components-panel-on-panel-item-bg-hover: #3a3a40;
   --color-components-panel-on-panel-item-bg-alt: #3a3a40;
-  --color-components-panel-on-panel-item-bg-transparent: #2c2c30f2;
-  --color-components-panel-on-panel-item-bg-hover-transparent: #3a3a4000;
-  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #fffbfa00;
+  --color-components-panel-on-panel-item-bg-transparent: rgb(44 44 48 / 0.95);
+  --color-components-panel-on-panel-item-bg-hover-transparent: rgb(58 58 64 / 0);
+  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0);
 
-  --color-components-panel-bg-transparent: #22222500;
+  --color-components-panel-bg-transparent: rgb(34 34 37 / 0);
 
-  --color-components-main-nav-nav-button-text: #c8ceda99;
+  --color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6);
   --color-components-main-nav-nav-button-text-active: #f4f4f5;
-  --color-components-main-nav-nav-button-bg: #ffffff00;
-  --color-components-main-nav-nav-button-bg-active: #c8ceda24;
-  --color-components-main-nav-nav-button-border: #ffffff14;
-  --color-components-main-nav-nav-button-bg-hover: #c8ceda0a;
+  --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0);
+  --color-components-main-nav-nav-button-bg-active: rgb(200 206 218 / 0.14);
+  --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.08);
+  --color-components-main-nav-nav-button-bg-hover: rgb(200 206 218 / 0.04);
 
-  --color-components-main-nav-nav-user-border: #ffffff0d;
+  --color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05);
 
   --color-components-slider-knob: #f4f4f5;
   --color-components-slider-knob-hover: #fefefe;
-  --color-components-slider-knob-disabled: #ffffff33;
+  --color-components-slider-knob-disabled: rgb(255 255 255 / 0.2);
   --color-components-slider-range: #296dff;
-  --color-components-slider-track: #ffffff33;
-  --color-components-slider-knob-border-hover: #1018284d;
-  --color-components-slider-knob-border: #10182833;
+  --color-components-slider-track: rgb(255 255 255 / 0.2);
+  --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.3);
+  --color-components-slider-knob-border: rgb(16 24 40 / 0.2);
 
-  --color-components-segmented-control-item-active-bg: #ffffff14;
-  --color-components-segmented-control-item-active-border: #c8ceda14;
-  --color-components-segmented-control-bg-normal: #18181bb3;
-  --color-components-segmented-control-item-active-accent-bg: #155aef33;
-  --color-components-segmented-control-item-active-accent-border: #155aef4d;
+  --color-components-segmented-control-item-active-bg: rgb(255 255 255 / 0.08);
+  --color-components-segmented-control-item-active-border: rgb(200 206 218 / 0.08);
+  --color-components-segmented-control-bg-normal: rgb(24 24 27 / 0.7);
+  --color-components-segmented-control-item-active-accent-bg: rgb(21 90 239 / 0.2);
+  --color-components-segmented-control-item-active-accent-border: rgb(21 90 239 / 0.3);
 
-  --color-components-option-card-option-bg: #c8ceda0a;
-  --color-components-option-card-option-selected-bg: #ffffff0d;
+  --color-components-option-card-option-bg: rgb(200 206 218 / 0.04);
+  --color-components-option-card-option-selected-bg: rgb(255 255 255 / 0.05);
   --color-components-option-card-option-selected-border: #5289ff;
-  --color-components-option-card-option-border: #c8ceda33;
-  --color-components-option-card-option-bg-hover: #c8ceda24;
-  --color-components-option-card-option-border-hover: #c8ceda4d;
+  --color-components-option-card-option-border: rgb(200 206 218 / 0.2);
+  --color-components-option-card-option-bg-hover: rgb(200 206 218 / 0.14);
+  --color-components-option-card-option-border-hover: rgb(200 206 218 / 0.3);
 
   --color-components-tab-active: #296dff;
 
-  --color-components-badge-white-to-dark: #18181bcc;
+  --color-components-badge-white-to-dark: rgb(24 24 27 / 0.8);
   --color-components-badge-status-light-success-bg: #17b26a;
   --color-components-badge-status-light-success-border-inner: #47cd89;
-  --color-components-badge-status-light-success-halo: #17b26a4d;
+  --color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.3);
 
   --color-components-badge-status-light-border-outer: #222225;
-  --color-components-badge-status-light-high-light: #ffffff4d;
+  --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3);
   --color-components-badge-status-light-warning-bg: #f79009;
   --color-components-badge-status-light-warning-border-inner: #fdb022;
-  --color-components-badge-status-light-warning-halo: #f790094d;
+  --color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.3);
 
   --color-components-badge-status-light-error-bg: #f04438;
   --color-components-badge-status-light-error-border-inner: #f97066;
-  --color-components-badge-status-light-error-halo: #f044384d;
+  --color-components-badge-status-light-error-halo: rgb(240 68 56 / 0.3);
 
   --color-components-badge-status-light-normal-bg: #0ba5ec;
   --color-components-badge-status-light-normal-border-inner: #36bffa;
-  --color-components-badge-status-light-normal-halo: #0ba5ec4d;
+  --color-components-badge-status-light-normal-halo: rgb(11 165 236 / 0.3);
 
   --color-components-badge-status-light-disabled-bg: #676f83;
   --color-components-badge-status-light-disabled-border-inner: #98a2b2;
-  --color-components-badge-status-light-disabled-halo: #c8ceda14;
+  --color-components-badge-status-light-disabled-halo: rgb(200 206 218 / 0.08);
 
-  --color-components-badge-bg-green-soft: #17b26a24;
-  --color-components-badge-bg-orange-soft: #f7900924;
-  --color-components-badge-bg-red-soft: #f0443824;
-  --color-components-badge-bg-blue-light-soft: #0ba5ec24;
-  --color-components-badge-bg-gray-soft: #c8ceda14;
-  --color-components-badge-bg-dimm: #ffffff08;
+  --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.14);
+  --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.14);
+  --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.14);
+  --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.14);
+  --color-components-badge-bg-gray-soft: rgb(200 206 218 / 0.08);
+  --color-components-badge-bg-dimm: rgb(255 255 255 / 0.03);
 
   --color-components-chart-line: #5289ff;
-  --color-components-chart-area-1: #155aef33;
-  --color-components-chart-area-2: #155aef0a;
+  --color-components-chart-area-1: rgb(21 90 239 / 0.2);
+  --color-components-chart-area-2: rgb(21 90 239 / 0.04);
   --color-components-chart-current-1: #5289ff;
-  --color-components-chart-current-2: #155aef4d;
-  --color-components-chart-bg: #18181bf2;
+  --color-components-chart-current-2: rgb(21 90 239 / 0.3);
+  --color-components-chart-bg: rgb(24 24 27 / 0.95);
 
   --color-components-actionbar-bg: #222225;
-  --color-components-actionbar-border: #c8ceda14;
+  --color-components-actionbar-border: rgb(200 206 218 / 0.08);
   --color-components-actionbar-bg-accent: #27272b;
   --color-components-actionbar-border-accent: #5289ff;
 
-  --color-components-dropzone-bg-alt: #18181bcc;
-  --color-components-dropzone-bg: #18181b66;
-  --color-components-dropzone-bg-accent: #155aef33;
-  --color-components-dropzone-border: #c8ceda24;
-  --color-components-dropzone-border-alt: #c8ceda33;
+  --color-components-dropzone-bg-alt: rgb(24 24 27 / 0.8);
+  --color-components-dropzone-bg: rgb(24 24 27 / 0.4);
+  --color-components-dropzone-bg-accent: rgb(21 90 239 / 0.2);
+  --color-components-dropzone-border: rgb(200 206 218 / 0.14);
+  --color-components-dropzone-border-alt: rgb(200 206 218 / 0.2);
   --color-components-dropzone-border-accent: #84abff;
 
   --color-components-progress-brand-progress: #5289ff;
   --color-components-progress-brand-border: #5289ff;
-  --color-components-progress-brand-bg: #155aef0a;
+  --color-components-progress-brand-bg: rgb(21 90 239 / 0.04);
 
   --color-components-progress-white-progress: #ffffff;
-  --color-components-progress-white-border: #fffffff2;
-  --color-components-progress-white-bg: #ffffff03;
+  --color-components-progress-white-border: rgb(255 255 255 / 0.95);
+  --color-components-progress-white-bg: rgb(255 255 255 / 0.01);
 
   --color-components-progress-gray-progress: #98a2b2;
   --color-components-progress-gray-border: #98a2b2;
-  --color-components-progress-gray-bg: #c8ceda05;
+  --color-components-progress-gray-bg: rgb(200 206 218 / 0.02);
 
   --color-components-progress-warning-progress: #fdb022;
   --color-components-progress-warning-border: #fdb022;
-  --color-components-progress-warning-bg: #f790090a;
+  --color-components-progress-warning-bg: rgb(247 144 9 / 0.04);
 
   --color-components-progress-error-progress: #f97066;
   --color-components-progress-error-border: #f97066;
-  --color-components-progress-error-bg: #f044380a;
+  --color-components-progress-error-bg: rgb(240 68 56 / 0.04);
 
-  --color-components-chat-input-audio-bg: #155aef33;
-  --color-components-chat-input-audio-wave-default: #c8ceda24;
-  --color-components-chat-input-bg-mask-1: #18181b0a;
-  --color-components-chat-input-bg-mask-2: #18181b99;
-  --color-components-chat-input-border: #c8ceda33;
+  --color-components-chat-input-audio-bg: rgb(21 90 239 / 0.2);
+  --color-components-chat-input-audio-wave-default: rgb(200 206 218 / 0.14);
+  --color-components-chat-input-bg-mask-1: rgb(24 24 27 / 0.04);
+  --color-components-chat-input-bg-mask-2: rgb(24 24 27 / 0.6);
+  --color-components-chat-input-border: rgb(200 206 218 / 0.2);
   --color-components-chat-input-audio-wave-active: #84abff;
-  --color-components-chat-input-audio-bg-alt: #18181be6;
+  --color-components-chat-input-audio-bg-alt: rgb(24 24 27 / 0.9);
 
-  --color-components-avatar-shape-fill-stop-0: #fffffff2;
-  --color-components-avatar-shape-fill-stop-100: #ffffffcc;
+  --color-components-avatar-shape-fill-stop-0: rgb(255 255 255 / 0.95);
+  --color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.8);
 
-  --color-components-avatar-bg-mask-stop-0: #ffffff33;
-  --color-components-avatar-bg-mask-stop-100: #ffffff08;
+  --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.2);
+  --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.03);
 
   --color-components-avatar-default-avatar-bg: #222225;
-  --color-components-avatar-mask-darkmode-dimmed: #0000001f;
+  --color-components-avatar-mask-darkmode-dimmed: rgb(0 0 0 / 0.12);
 
-  --color-components-label-gray: #c8ceda24;
+  --color-components-label-gray: rgb(200 206 218 / 0.14);
 
   --color-components-premium-badge-blue-bg-stop-0: #5289ff;
   --color-components-premium-badge-blue-bg-stop-100: #296dff;
-  --color-components-premium-badge-blue-stroke-stop-0: #ffffff33;
+  --color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.2);
   --color-components-premium-badge-blue-stroke-stop-100: #296dff;
   --color-components-premium-badge-blue-text-stop-0: #eff4ff;
   --color-components-premium-badge-blue-text-stop-100: #b2caff;
@@ -276,14 +280,14 @@ html[data-theme="dark"] {
   --color-components-premium-badge-blue-bg-stop-0-hover: #84abff;
   --color-components-premium-badge-blue-bg-stop-100-hover: #004aeb;
   --color-components-premium-badge-blue-glow-hover: #d1e0ff;
-  --color-components-premium-badge-blue-stroke-stop-0-hover: #ffffff80;
+  --color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
   --color-components-premium-badge-blue-stroke-stop-100-hover: #296dff;
 
-  --color-components-premium-badge-highlight-stop-0: #ffffff1f;
-  --color-components-premium-badge-highlight-stop-100: #ffffff33;
+  --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12);
+  --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.2);
   --color-components-premium-badge-indigo-bg-stop-0: #6172f3;
   --color-components-premium-badge-indigo-bg-stop-100: #3538cd;
-  --color-components-premium-badge-indigo-stroke-stop-0: #ffffff33;
+  --color-components-premium-badge-indigo-stroke-stop-0: rgb(255 255 255 / 0.2);
   --color-components-premium-badge-indigo-stroke-stop-100: #444ce7;
   --color-components-premium-badge-indigo-text-stop-0: #eef4ff;
   --color-components-premium-badge-indigo-text-stop-100: #c7d7fe;
@@ -291,12 +295,12 @@ html[data-theme="dark"] {
   --color-components-premium-badge-indigo-glow-hover: #e0eaff;
   --color-components-premium-badge-indigo-bg-stop-0-hover: #a4bcfd;
   --color-components-premium-badge-indigo-bg-stop-100-hover: #3538cd;
-  --color-components-premium-badge-indigo-stroke-stop-0-hover: #ffffff80;
+  --color-components-premium-badge-indigo-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
   --color-components-premium-badge-indigo-stroke-stop-100-hover: #444ce7;
 
   --color-components-premium-badge-grey-bg-stop-0: #676f83;
   --color-components-premium-badge-grey-bg-stop-100: #495464;
-  --color-components-premium-badge-grey-stroke-stop-0: #ffffff1f;
+  --color-components-premium-badge-grey-stroke-stop-0: rgb(255 255 255 / 0.12);
   --color-components-premium-badge-grey-stroke-stop-100: #495464;
   --color-components-premium-badge-grey-text-stop-0: #f9fafb;
   --color-components-premium-badge-grey-text-stop-100: #e9ebf0;
@@ -304,12 +308,12 @@ html[data-theme="dark"] {
   --color-components-premium-badge-grey-glow-hover: #f2f4f7;
   --color-components-premium-badge-grey-bg-stop-0-hover: #98a2b2;
   --color-components-premium-badge-grey-bg-stop-100-hover: #354052;
-  --color-components-premium-badge-grey-stroke-stop-0-hover: #ffffff80;
+  --color-components-premium-badge-grey-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
   --color-components-premium-badge-grey-stroke-stop-100-hover: #676f83;
 
   --color-components-premium-badge-orange-bg-stop-0: #ff692e;
   --color-components-premium-badge-orange-bg-stop-100: #e04f16;
-  --color-components-premium-badge-orange-stroke-stop-0: #ffffff33;
+  --color-components-premium-badge-orange-stroke-stop-0: rgb(255 255 255 / 0.2);
   --color-components-premium-badge-orange-stroke-stop-100: #ff4405;
   --color-components-premium-badge-orange-text-stop-0: #fef6ee;
   --color-components-premium-badge-orange-text-stop-100: #f9dbaf;
@@ -317,14 +321,14 @@ html[data-theme="dark"] {
   --color-components-premium-badge-orange-glow-hover: #fdead7;
   --color-components-premium-badge-orange-bg-stop-0-hover: #ff692e;
   --color-components-premium-badge-orange-bg-stop-100-hover: #b93815;
-  --color-components-premium-badge-orange-stroke-stop-0-hover: #ffffff80;
+  --color-components-premium-badge-orange-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
   --color-components-premium-badge-orange-stroke-stop-100-hover: #ff4405;
 
-  --color-components-progress-bar-bg: #c8ceda14;
-  --color-components-progress-bar-progress: #c8ceda24;
-  --color-components-progress-bar-border: #ffffff08;
-  --color-components-progress-bar-progress-solid: #fffffff2;
-  --color-components-progress-bar-progress-highlight: #c8ceda33;
+  --color-components-progress-bar-bg: rgb(200 206 218 / 0.08);
+  --color-components-progress-bar-progress: rgb(200 206 218 / 0.14);
+  --color-components-progress-bar-border: rgb(255 255 255 / 0.03);
+  --color-components-progress-bar-progress-solid: rgb(255 255 255 / 0.95);
+  --color-components-progress-bar-progress-highlight: rgb(200 206 218 / 0.2);
 
   --color-components-icon-bg-red-solid: #d92d20;
   --color-components-icon-bg-rose-solid: #e31b54;
@@ -338,25 +342,25 @@ html[data-theme="dark"] {
   --color-components-icon-bg-indigo-solid: #444ce7;
   --color-components-icon-bg-violet-solid: #7839ee;
   --color-components-icon-bg-midnight-solid: #5d698d;
-  --color-components-icon-bg-rose-soft: #f63d6833;
-  --color-components-icon-bg-pink-soft: #ee46bc33;
-  --color-components-icon-bg-orange-dark-soft: #ff440533;
-  --color-components-icon-bg-yellow-soft: #eaaa0833;
-  --color-components-icon-bg-green-soft: #66c61c33;
-  --color-components-icon-bg-teal-soft: #15b79e33;
-  --color-components-icon-bg-blue-light-soft: #0ba5ec33;
-  --color-components-icon-bg-blue-soft: #155aef33;
-  --color-components-icon-bg-indigo-soft: #6172f333;
-  --color-components-icon-bg-violet-soft: #875bf733;
-  --color-components-icon-bg-midnight-soft: #828dad33;
-  --color-components-icon-bg-red-soft: #f0443833;
+  --color-components-icon-bg-rose-soft: rgb(246 61 104 / 0.2);
+  --color-components-icon-bg-pink-soft: rgb(238 70 188 / 0.2);
+  --color-components-icon-bg-orange-dark-soft: rgb(255 68 5 / 0.2);
+  --color-components-icon-bg-yellow-soft: rgb(234 170 8 / 0.2);
+  --color-components-icon-bg-green-soft: rgb(102 198 28 / 0.2);
+  --color-components-icon-bg-teal-soft: rgb(21 183 158 / 0.2);
+  --color-components-icon-bg-blue-light-soft: rgb(11 165 236 / 0.2);
+  --color-components-icon-bg-blue-soft: rgb(21 90 239 / 0.2);
+  --color-components-icon-bg-indigo-soft: rgb(97 114 243 / 0.2);
+  --color-components-icon-bg-violet-soft: rgb(135 91 247 / 0.2);
+  --color-components-icon-bg-midnight-soft: rgb(130 141 173 / 0.2);
+  --color-components-icon-bg-red-soft: rgb(240 68 56 / 0.2);
   --color-components-icon-bg-orange-solid: #f79009;
-  --color-components-icon-bg-orange-soft: #f7900933;
+  --color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2);
 
   --color-text-primary: #fbfbfc;
   --color-text-secondary: #d9d9de;
-  --color-text-tertiary: #c8ceda99;
-  --color-text-quaternary: #c8ceda66;
+  --color-text-tertiary: rgb(200 206 218 / 0.6);
+  --color-text-quaternary: rgb(200 206 218 / 0.4);
   --color-text-destructive: #f97066;
   --color-text-success: #17b26a;
   --color-text-warning: #f79009;
@@ -364,80 +368,85 @@ html[data-theme="dark"] {
   --color-text-success-secondary: #47cd89;
   --color-text-warning-secondary: #fdb022;
   --color-text-accent: #5289ff;
-  --color-text-primary-on-surface: #fffffff2;
-  --color-text-placeholder: #c8ceda4d;
-  --color-text-disabled: #c8ceda4d;
+  --color-text-primary-on-surface: rgb(255 255 255 / 0.95);
+  --color-text-placeholder: rgb(200 206 218 / 0.3);
+  --color-text-disabled: rgb(200 206 218 / 0.3);
   --color-text-accent-secondary: #84abff;
   --color-text-accent-light-mode-only: #d9d9de;
-  --color-text-text-selected: #155aef4d;
-  --color-text-secondary-on-surface: #ffffffe6;
+  --color-text-text-selected: rgb(21 90 239 / 0.3);
+  --color-text-secondary-on-surface: rgb(255 255 255 / 0.9);
   --color-text-logo-text: #e9e9ec;
-  --color-text-empty-state-icon: #c8ceda4d;
+  --color-text-empty-state-icon: rgb(200 206 218 / 0.3);
   --color-text-inverted: #ffffff;
-  --color-text-inverted-dimmed: #ffffffcc;
+  --color-text-inverted-dimmed: rgb(255 255 255 / 0.8);
 
   --color-background-body: #1d1d20;
   --color-background-default-subtle: #222225;
   --color-background-neutral-subtle: #1d1d20;
-  --color-background-sidenav-bg: #27272aeb;
+  --color-background-sidenav-bg: rgb(39 39 42 / 0.92);
   --color-background-default: #222225;
-  --color-background-soft: #18181b40;
+  --color-background-soft: rgb(24 24 27 / 0.25);
   --color-background-gradient-bg-fill-chat-bg-1: #222225;
   --color-background-gradient-bg-fill-chat-bg-2: #1d1d20;
-  --color-background-gradient-bg-fill-chat-bubble-bg-1: #c8ceda14;
-  --color-background-gradient-bg-fill-chat-bubble-bg-2: #c8ceda05;
-  --color-background-gradient-bg-fill-chat-bubble-bg-3: #27314d;
-  --color-background-gradient-bg-fill-debug-bg-1: #c8ceda14;
-  --color-background-gradient-bg-fill-debug-bg-2: #18181b0a;
+  --color-background-gradient-bg-fill-chat-bubble-bg-1: rgb(200 206 218 / 0.08);
+  --color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(200 206 218 / 0.02);
+  --color-background-gradient-bg-fill-debug-bg-1: rgb(200 206 218 / 0.08);
+  --color-background-gradient-bg-fill-debug-bg-2: rgb(24 24 27 / 0.04);
 
-  --color-background-gradient-mask-gray: #18181b14;
-  --color-background-gradient-mask-transparent: #00000000;
-  --color-background-gradient-mask-input-clear-2: #393a3e00;
+  --color-background-gradient-mask-gray: rgb(24 24 27 / 0.08);
+  --color-background-gradient-mask-transparent: rgb(0 0 0 / 0);
+  --color-background-gradient-mask-input-clear-2: rgb(57 58 62 / 0);
   --color-background-gradient-mask-input-clear-1: #393a3e;
-  --color-background-gradient-mask-transparent-dark: #00000000;
-  --color-background-gradient-mask-side-panel-2: #18181be6;
-  --color-background-gradient-mask-side-panel-1: #18181b0a;
+  --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0);
+  --color-background-gradient-mask-side-panel-2: rgb(24 24 27 / 0.9);
+  --color-background-gradient-mask-side-panel-1: rgb(24 24 27 / 0.04);
 
   --color-background-default-burn: #1d1d20;
-  --color-background-overlay-fullscreen: #27272af7;
-  --color-background-default-lighter: #c8ceda0a;
-  --color-background-section: #18181b66;
-  --color-background-interaction-from-bg-1: #18181b66;
-  --color-background-interaction-from-bg-2: #18181b24;
-  --color-background-section-burn: #18181b99;
+  --color-background-overlay-fullscreen: rgb(39 39 42 / 0.97);
+  --color-background-default-lighter: rgb(200 206 218 / 0.04);
+  --color-background-section: rgb(24 24 27 / 0.4);
+  --color-background-interaction-from-bg-1: rgb(24 24 27 / 0.4);
+  --color-background-interaction-from-bg-2: rgb(24 24 27 / 0.14);
+  --color-background-section-burn: rgb(24 24 27 / 0.6);
   --color-background-default-dodge: #3a3a40;
-  --color-background-overlay: #18181bcc;
+  --color-background-overlay: rgb(24 24 27 / 0.8);
   --color-background-default-dimmed: #27272b;
   --color-background-default-hover: #27272b;
-  --color-background-overlay-alt: #18181b66;
-  --color-background-surface-white: #ffffffe6;
-  --color-background-overlay-destructive: #f044384d;
-  --color-background-overlay-backdrop: #18181bf2;
+  --color-background-overlay-alt: rgb(24 24 27 / 0.4);
+  --color-background-surface-white: rgb(255 255 255 / 0.9);
+  --color-background-overlay-destructive: rgb(240 68 56 / 0.3);
+  --color-background-overlay-backdrop: rgb(24 24 27 / 0.95);
+  --color-background-body-transparent: rgb(29 29 32 / 0);
 
-  --color-shadow-shadow-1: #0000000d;
-  --color-shadow-shadow-3: #0000001a;
-  --color-shadow-shadow-4: #0000001f;
-  --color-shadow-shadow-5: #00000029;
-  --color-shadow-shadow-6: #00000033;
-  --color-shadow-shadow-7: #0000003d;
-  --color-shadow-shadow-8: #00000047;
-  --color-shadow-shadow-9: #0000005c;
-  --color-shadow-shadow-2: #00000014;
-  --color-shadow-shadow-10: #00000066;
+  --color-shadow-shadow-1: rgb(0 0 0 / 0.05);
+  --color-shadow-shadow-3: rgb(0 0 0 / 0.1);
+  --color-shadow-shadow-4: rgb(0 0 0 / 0.12);
+  --color-shadow-shadow-5: rgb(0 0 0 / 0.16);
+  --color-shadow-shadow-6: rgb(0 0 0 / 0.2);
+  --color-shadow-shadow-7: rgb(0 0 0 / 0.24);
+  --color-shadow-shadow-8: rgb(0 0 0 / 0.28);
+  --color-shadow-shadow-9: rgb(0 0 0 / 0.36);
+  --color-shadow-shadow-2: rgb(0 0 0 / 0.08);
+  --color-shadow-shadow-10: rgb(0 0 0 / 0.4);
 
-  --color-workflow-block-border: #ffffff14;
-  --color-workflow-block-parma-bg: #ffffff0d;
+  --color-workflow-block-border: rgb(255 255 255 / 0.08);
+  --color-workflow-block-parma-bg: rgb(255 255 255 / 0.05);
   --color-workflow-block-bg: #27272b;
-  --color-workflow-block-bg-transparent: #27272bf5;
-  --color-workflow-block-border-highlight: #c8ceda33;
+  --color-workflow-block-bg-transparent: rgb(39 39 43 / 0.96);
+  --color-workflow-block-border-highlight: rgb(200 206 218 / 0.2);
+  --color-workflow-block-wrapper-bg-1: #27272b;
+  --color-workflow-block-wrapper-bg-2: rgb(39 39 43 / 0.2);
 
-  --color-workflow-canvas-workflow-dot-color: #8585ad1c;
+  --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11);
   --color-workflow-canvas-workflow-bg: #1d1d20;
+  --color-workflow-canvas-workflow-top-bar-1: #1d1d20;
+  --color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08);
+  --color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8);
 
   --color-workflow-link-line-active: #5289ff;
   --color-workflow-link-line-normal: #676f83;
   --color-workflow-link-line-handle: #5289ff;
-  --color-workflow-link-line-normal-transparent: #676f8333;
+  --color-workflow-link-line-normal-transparent: rgb(103 111 131 / 0.2);
   --color-workflow-link-line-failure-active: #fdb022;
   --color-workflow-link-line-failure-handle: #fdb022;
   --color-workflow-link-line-failure-button-bg: #f79009;
@@ -450,87 +459,90 @@ html[data-theme="dark"] {
   --color-workflow-link-line-error-handle: #f97066;
 
   --color-workflow-minimap-bg: #27272b;
-  --color-workflow-minimap-block: #c8ceda14;
+  --color-workflow-minimap-block: rgb(200 206 218 / 0.08);
 
-  --color-workflow-display-success-bg: #17b26a33;
-  --color-workflow-display-success-border-1: #17b26ae6;
-  --color-workflow-display-success-border-2: #17b26acc;
-  --color-workflow-display-success-vignette-color: #17b26a40;
-  --color-workflow-display-success-bg-line-pattern: #18181bcc;
+  --color-workflow-display-success-bg: rgb(23 178 106 / 0.2);
+  --color-workflow-display-success-border-1: rgb(23 178 106 / 0.9);
+  --color-workflow-display-success-border-2: rgb(23 178 106 / 0.8);
+  --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.25);
+  --color-workflow-display-success-bg-line-pattern: rgb(24 24 27 / 0.8);
 
-  --color-workflow-display-glass-1: #ffffff08;
-  --color-workflow-display-glass-2: #ffffff0d;
-  --color-workflow-display-vignette-dark: #00000066;
-  --color-workflow-display-highlight: #ffffff1f;
-  --color-workflow-display-outline: #18181bf2;
-  --color-workflow-display-error-bg: #f0443833;
-  --color-workflow-display-error-bg-line-pattern: #18181bcc;
-  --color-workflow-display-error-border-1: #f04438e6;
-  --color-workflow-display-error-border-2: #f04438cc;
-  --color-workflow-display-error-vignette-color: #f0443840;
+  --color-workflow-display-glass-1: rgb(255 255 255 / 0.03);
+  --color-workflow-display-glass-2: rgb(255 255 255 / 0.05);
+  --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.4);
+  --color-workflow-display-highlight: rgb(255 255 255 / 0.12);
+  --color-workflow-display-outline: rgb(24 24 27 / 0.95);
+  --color-workflow-display-error-bg: rgb(240 68 56 / 0.2);
+  --color-workflow-display-error-bg-line-pattern: rgb(24 24 27 / 0.8);
+  --color-workflow-display-error-border-1: rgb(240 68 56 / 0.9);
+  --color-workflow-display-error-border-2: rgb(240 68 56 / 0.8);
+  --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.25);
 
-  --color-workflow-display-warning-bg: #f7900933;
-  --color-workflow-display-warning-bg-line-pattern: #18181bcc;
-  --color-workflow-display-warning-border-1: #f79009e6;
-  --color-workflow-display-warning-border-2: #f79009cc;
-  --color-workflow-display-warning-vignette-color: #f7900940;
+  --color-workflow-display-warning-bg: rgb(247 144 9 / 0.2);
+  --color-workflow-display-warning-bg-line-pattern: rgb(24 24 27 / 0.8);
+  --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.9);
+  --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.8);
+  --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.25);
 
-  --color-workflow-display-normal-bg: #0ba5ec33;
-  --color-workflow-display-normal-bg-line-pattern: #18181bcc;
-  --color-workflow-display-normal-border-1: #0ba5ece6;
-  --color-workflow-display-normal-border-2: #0ba5eccc;
-  --color-workflow-display-normal-vignette-color: #0ba5ec40;
+  --color-workflow-display-normal-bg: rgb(11 165 236 / 0.2);
+  --color-workflow-display-normal-bg-line-pattern: rgb(24 24 27 / 0.8);
+  --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.9);
+  --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.8);
+  --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.25);
 
-  --color-workflow-display-disabled-bg: #c8ceda33;
-  --color-workflow-display-disabled-bg-line-pattern: #18181bcc;
-  --color-workflow-display-disabled-border-1: #c8ceda99;
-  --color-workflow-display-disabled-border-2: #c8ceda40;
-  --color-workflow-display-disabled-vignette-color: #c8ceda40;
-  --color-workflow-display-disabled-outline: #18181bf2;
+  --color-workflow-display-disabled-bg: rgb(200 206 218 / 0.2);
+  --color-workflow-display-disabled-bg-line-pattern: rgb(24 24 27 / 0.8);
+  --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6);
+  --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.25);
+  --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.25);
+  --color-workflow-display-disabled-outline: rgb(24 24 27 / 0.95);
 
-  --color-workflow-workflow-progress-bg-1: #18181b40;
-  --color-workflow-workflow-progress-bg-2: #18181b0a;
+  --color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25);
+  --color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04);
 
-  --color-divider-subtle: #c8ceda14;
-  --color-divider-regular: #c8ceda24;
-  --color-divider-deep: #c8ceda33;
-  --color-divider-burn: #18181bf2;
-  --color-divider-intense: #c8ceda66;
+  --color-divider-subtle: rgb(200 206 218 / 0.08);
+  --color-divider-regular: rgb(200 206 218 / 0.14);
+  --color-divider-deep: rgb(200 206 218 / 0.2);
+  --color-divider-burn: rgb(24 24 27 / 0.95);
+  --color-divider-intense: rgb(200 206 218 / 0.4);
   --color-divider-solid: #3a3a40;
   --color-divider-solid-alt: #747481;
 
-  --color-state-base-hover: #c8ceda14;
-  --color-state-base-active: #c8ceda33;
-  --color-state-base-hover-alt: #c8ceda24;
-  --color-state-base-handle: #c8ceda4d;
-  --color-state-base-handle-hover: #c8ceda80;
-  --color-state-base-hover-subtle: #c8ceda0a;
+  --color-state-base-hover: rgb(200 206 218 / 0.08);
+  --color-state-base-active: rgb(200 206 218 / 0.2);
+  --color-state-base-hover-alt: rgb(200 206 218 / 0.14);
+  --color-state-base-handle: rgb(200 206 218 / 0.3);
+  --color-state-base-handle-hover: rgb(200 206 218 / 0.5);
+  --color-state-base-hover-subtle: rgb(200 206 218 / 0.04);
 
-  --color-state-accent-hover: #155aef24;
-  --color-state-accent-active: #155aef24;
-  --color-state-accent-hover-alt: #155aef40;
+  --color-state-accent-hover: rgb(21 90 239 / 0.14);
+  --color-state-accent-active: rgb(21 90 239 / 0.14);
+  --color-state-accent-hover-alt: rgb(21 90 239 / 0.25);
   --color-state-accent-solid: #5289ff;
-  --color-state-accent-active-alt: #155aef33;
+  --color-state-accent-active-alt: rgb(21 90 239 / 0.2);
 
-  --color-state-destructive-hover: #f0443824;
-  --color-state-destructive-hover-alt: #f0443840;
-  --color-state-destructive-active: #f044384d;
+  --color-state-destructive-hover: rgb(240 68 56 / 0.14);
+  --color-state-destructive-hover-alt: rgb(240 68 56 / 0.25);
+  --color-state-destructive-active: rgb(240 68 56 / 0.3);
   --color-state-destructive-solid: #f97066;
   --color-state-destructive-border: #f97066;
+  --color-state-destructive-hover-transparent: rgb(240 68 56 / 0);
 
-  --color-state-success-hover: #17b26a24;
-  --color-state-success-hover-alt: #17b26a40;
-  --color-state-success-active: #17b26a4d;
+  --color-state-success-hover: rgb(23 178 106 / 0.14);
+  --color-state-success-hover-alt: rgb(23 178 106 / 0.25);
+  --color-state-success-active: rgb(23 178 106 / 0.3);
   --color-state-success-solid: #47cd89;
 
-  --color-state-warning-hover: #f7900924;
-  --color-state-warning-hover-alt: #f7900940;
-  --color-state-warning-active: #f790094d;
+  --color-state-warning-hover: rgb(247 144 9 / 0.14);
+  --color-state-warning-hover-alt: rgb(247 144 9 / 0.25);
+  --color-state-warning-active: rgb(247 144 9 / 0.3);
   --color-state-warning-solid: #f79009;
+  --color-state-warning-hover-transparent: rgb(247 144 9 / 0);
 
-  --color-effects-highlight: #c8ceda14;
-  --color-effects-highlight-lightmode-off: #c8ceda14;
+  --color-effects-highlight: rgb(200 206 218 / 0.08);
+  --color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08);
   --color-effects-image-frame: #ffffff;
+  --color-effects-icon-border: rgb(255 255 255 / 0.15);
 
   --color-util-colors-orange-dark-orange-dark-50: #57130a;
   --color-util-colors-orange-dark-orange-dark-100: #771a0d;
@@ -549,7 +561,7 @@ html[data-theme="dark"] {
   --color-util-colors-orange-orange-500: #ef6820;
   --color-util-colors-orange-orange-600: #f38744;
   --color-util-colors-orange-orange-700: #f7b27a;
-  --color-util-colors-orange-orange-100-transparent: #77291700;
+  --color-util-colors-orange-orange-100-transparent: rgb(119 41 23 / 0);
 
   --color-util-colors-pink-pink-50: #4e0d30;
   --color-util-colors-pink-pink-100: #851651;
@@ -722,21 +734,22 @@ html[data-theme="dark"] {
   --color-util-colors-midnight-midnight-600: #a7aec5;
   --color-util-colors-midnight-midnight-700: #c6cbd9;
 
-  --color-third-party-Arize: #ffffff;
-  --color-third-party-Phoenix: #ffffff;
   --color-third-party-LangChain: #ffffff;
   --color-third-party-Langfuse: #ffffff;
   --color-third-party-Github: #ffffff;
-  --color-third-party-Github-tertiary: #c8ceda99;
+  --color-third-party-Github-tertiary: rgb(200 206 218 / 0.6);
   --color-third-party-Github-secondary: #d9d9de;
   --color-third-party-model-bg-openai: #121212;
   --color-third-party-model-bg-anthropic: #1d1917;
-  --color-third-party-model-bg-default: #0b0b0e;
+  --color-third-party-model-bg-default: #1d1d20;
 
   --color-third-party-aws: #141f2e;
   --color-third-party-aws-alt: #192639;
 
   --color-saas-background: #0b0b0e;
-  --color-saas-pricing-grid-bg: #c8ceda33;
+  --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.2);
+
+  --color-dify-logo-dify-logo-blue: #e8e8e8;
+  --color-dify-logo-dify-logo-black: #e8e8e8;
 
 }

web/themes/light.css

@@ -1,79 +1,79 @@
 /* Attention: Generate by code. Don't update by hand!!! */
 html[data-theme="light"] {
-  --color-components-input-bg-normal: #c8ceda40;
+  --color-components-input-bg-normal: rgb(200 206 218 / 0.25);
   --color-components-input-text-placeholder: #98a2b2;
-  --color-components-input-bg-hover: #c8ceda24;
+  --color-components-input-bg-hover: rgb(200 206 218 / 0.14);
   --color-components-input-bg-active: #f9fafb;
   --color-components-input-border-active: #d0d5dc;
   --color-components-input-border-destructive: #fda29b;
   --color-components-input-text-filled: #101828;
   --color-components-input-bg-destructive: #ffffff;
-  --color-components-input-bg-disabled: #c8ceda24;
+  --color-components-input-bg-disabled: rgb(200 206 218 / 0.14);
   --color-components-input-text-disabled: #d0d5dc;
   --color-components-input-text-filled-disabled: #676f83;
   --color-components-input-border-hover: #d0d5dc;
   --color-components-input-border-active-prompt-1: #0ba5ec;
   --color-components-input-border-active-prompt-2: #155aef;
 
-  --color-components-kbd-bg-gray: #1018280a;
-  --color-components-kbd-bg-white: #ffffff1f;
+  --color-components-kbd-bg-gray: rgb(16 24 40 / 0.04);
+  --color-components-kbd-bg-white: rgb(255 255 255 / 0.12);
 
-  --color-components-tooltip-bg: #fffffff2;
+  --color-components-tooltip-bg: rgb(255 255 255 / 0.95);
 
   --color-components-button-primary-text: #ffffff;
   --color-components-button-primary-bg: #155aef;
-  --color-components-button-primary-border: #1018280a;
+  --color-components-button-primary-border: rgb(16 24 40 / 0.04);
   --color-components-button-primary-bg-hover: #004aeb;
-  --color-components-button-primary-border-hover: #10182814;
-  --color-components-button-primary-bg-disabled: #155aef24;
-  --color-components-button-primary-border-disabled: #ffffff00;
-  --color-components-button-primary-text-disabled: #ffffff99;
+  --color-components-button-primary-border-hover: rgb(16 24 40 / 0.08);
+  --color-components-button-primary-bg-disabled: rgb(21 90 239 / 0.14);
+  --color-components-button-primary-border-disabled: rgb(255 255 255 / 0);
+  --color-components-button-primary-text-disabled: rgb(255 255 255 / 0.6);
 
   --color-components-button-secondary-text: #354052;
-  --color-components-button-secondary-text-disabled: #10182840;
+  --color-components-button-secondary-text-disabled: rgb(16 24 40 / 0.25);
   --color-components-button-secondary-bg: #ffffff;
   --color-components-button-secondary-bg-hover: #f9fafb;
   --color-components-button-secondary-bg-disabled: #f9fafb;
-  --color-components-button-secondary-border: #10182824;
-  --color-components-button-secondary-border-hover: #10182833;
-  --color-components-button-secondary-border-disabled: #1018280a;
+  --color-components-button-secondary-border: rgb(16 24 40 / 0.14);
+  --color-components-button-secondary-border-hover: rgb(16 24 40 / 0.2);
+  --color-components-button-secondary-border-disabled: rgb(16 24 40 / 0.04);
 
   --color-components-button-tertiary-text: #354052;
-  --color-components-button-tertiary-text-disabled: #10182840;
+  --color-components-button-tertiary-text-disabled: rgb(16 24 40 / 0.25);
   --color-components-button-tertiary-bg: #f2f4f7;
   --color-components-button-tertiary-bg-hover: #e9ebf0;
   --color-components-button-tertiary-bg-disabled: #f9fafb;
 
   --color-components-button-ghost-text: #354052;
-  --color-components-button-ghost-text-disabled: #10182840;
-  --color-components-button-ghost-bg-hover: #c8ceda33;
+  --color-components-button-ghost-text-disabled: rgb(16 24 40 / 0.25);
+  --color-components-button-ghost-bg-hover: rgb(200 206 218 / 0.2);
 
   --color-components-button-destructive-primary-text: #ffffff;
-  --color-components-button-destructive-primary-text-disabled: #ffffff99;
+  --color-components-button-destructive-primary-text-disabled: rgb(255 255 255 / 0.6);
   --color-components-button-destructive-primary-bg: #d92d20;
   --color-components-button-destructive-primary-bg-hover: #b42318;
   --color-components-button-destructive-primary-bg-disabled: #fee4e2;
-  --color-components-button-destructive-primary-border: #18181b0a;
-  --color-components-button-destructive-primary-border-hover: #18181b14;
-  --color-components-button-destructive-primary-border-disabled: #ffffff00;
+  --color-components-button-destructive-primary-border: rgb(24 24 27 / 0.04);
+  --color-components-button-destructive-primary-border-hover: rgb(24 24 27 / 0.08);
+  --color-components-button-destructive-primary-border-disabled: rgb(255 255 255 / 0);
 
   --color-components-button-destructive-secondary-text: #d92d20;
-  --color-components-button-destructive-secondary-text-disabled: #f0443833;
+  --color-components-button-destructive-secondary-text-disabled: rgb(240 68 56 / 0.2);
   --color-components-button-destructive-secondary-bg: #ffffff;
   --color-components-button-destructive-secondary-bg-hover: #fef3f2;
   --color-components-button-destructive-secondary-bg-disabled: #fef3f2;
-  --color-components-button-destructive-secondary-border: #18181b14;
-  --color-components-button-destructive-secondary-border-hover: #f0443840;
-  --color-components-button-destructive-secondary-border-disabled: #f044380a;
+  --color-components-button-destructive-secondary-border: rgb(24 24 27 / 0.08);
+  --color-components-button-destructive-secondary-border-hover: rgb(240 68 56 / 0.25);
+  --color-components-button-destructive-secondary-border-disabled: rgb(240 68 56 / 0.04);
 
   --color-components-button-destructive-tertiary-text: #d92d20;
-  --color-components-button-destructive-tertiary-text-disabled: #f0443833;
+  --color-components-button-destructive-tertiary-text-disabled: rgb(240 68 56 / 0.2);
   --color-components-button-destructive-tertiary-bg: #fee4e2;
   --color-components-button-destructive-tertiary-bg-hover: #fecdca;
-  --color-components-button-destructive-tertiary-bg-disabled: #f044380a;
+  --color-components-button-destructive-tertiary-bg-disabled: rgb(240 68 56 / 0.04);
 
   --color-components-button-destructive-ghost-text: #d92d20;
-  --color-components-button-destructive-ghost-text-disabled: #f0443833;
+  --color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2);
   --color-components-button-destructive-ghost-bg-hover: #fee4e2;
 
   --color-components-button-secondary-accent-text: #155aef;
@@ -81,22 +81,22 @@ html[data-theme="light"] {
   --color-components-button-secondary-accent-bg: #ffffff;
   --color-components-button-secondary-accent-bg-hover: #f2f4f7;
   --color-components-button-secondary-accent-bg-disabled: #f9fafb;
-  --color-components-button-secondary-accent-border: #10182824;
-  --color-components-button-secondary-accent-border-hover: #10182824;
-  --color-components-button-secondary-accent-border-disabled: #1018280a;
+  --color-components-button-secondary-accent-border: rgb(16 24 40 / 0.14);
+  --color-components-button-secondary-accent-border-hover: rgb(16 24 40 / 0.14);
+  --color-components-button-secondary-accent-border-disabled: rgb(16 24 40 / 0.04);
 
   --color-components-button-indigo-bg: #444ce7;
   --color-components-button-indigo-bg-hover: #3538cd;
-  --color-components-button-indigo-bg-disabled: #6172f324;
+  --color-components-button-indigo-bg-disabled: rgb(97 114 243 / 0.14);
 
   --color-components-checkbox-icon: #ffffff;
-  --color-components-checkbox-icon-disabled: #ffffff80;
+  --color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5);
   --color-components-checkbox-bg: #155aef;
   --color-components-checkbox-bg-hover: #004aeb;
   --color-components-checkbox-bg-disabled: #f2f4f7;
   --color-components-checkbox-border: #d0d5dc;
   --color-components-checkbox-border-hover: #98a2b2;
-  --color-components-checkbox-border-disabled: #18181b0a;
+  --color-components-checkbox-border-disabled: rgb(24 24 27 / 0.04);
   --color-components-checkbox-bg-unchecked: #ffffff;
   --color-components-checkbox-bg-unchecked-hover: #ffffff;
   --color-components-checkbox-bg-disabled-checked: #b2caff;
@@ -104,15 +104,15 @@ html[data-theme="light"] {
   --color-components-radio-border-checked: #155aef;
   --color-components-radio-border-checked-hover: #004aeb;
   --color-components-radio-border-checked-disabled: #b2caff;
-  --color-components-radio-bg-disabled: #ffffff00;
+  --color-components-radio-bg-disabled: rgb(255 255 255 / 0);
   --color-components-radio-border: #d0d5dc;
   --color-components-radio-border-hover: #98a2b2;
-  --color-components-radio-border-disabled: #18181b0a;
-  --color-components-radio-bg: #ffffff00;
-  --color-components-radio-bg-hover: #ffffff00;
+  --color-components-radio-border-disabled: rgb(24 24 27 / 0.04);
+  --color-components-radio-bg: rgb(255 255 255 / 0);
+  --color-components-radio-bg-hover: rgb(255 255 255 / 0);
 
   --color-components-toggle-knob: #ffffff;
-  --color-components-toggle-knob-disabled: #fffffff2;
+  --color-components-toggle-knob-disabled: rgb(255 255 255 / 0.95);
   --color-components-toggle-bg: #155aef;
   --color-components-toggle-bg-hover: #004aeb;
   --color-components-toggle-bg-disabled: #d1e0ff;
@@ -124,48 +124,52 @@ html[data-theme="light"] {
   --color-components-card-bg: #fcfcfd;
   --color-components-card-border: #ffffff;
   --color-components-card-bg-alt: #ffffff;
+  --color-components-card-bg-transparent: rgb(252 252 253 / 0);
+  --color-components-card-bg-alt-transparent: rgb(255 255 255 / 0);
 
   --color-components-menu-item-text: #495464;
   --color-components-menu-item-text-active: #18222f;
   --color-components-menu-item-text-hover: #354052;
   --color-components-menu-item-text-active-accent: #18222f;
+  --color-components-menu-item-bg-active: rgb(21 90 239 / 0.08);
+  --color-components-menu-item-bg-hover: rgb(200 206 218 / 0.2);
 
   --color-components-panel-bg: #ffffff;
-  --color-components-panel-bg-blur: #fffffff2;
-  --color-components-panel-border: #10182814;
-  --color-components-panel-border-subtle: #10182814;
+  --color-components-panel-bg-blur: rgb(255 255 255 / 0.95);
+  --color-components-panel-border: rgb(16 24 40 / 0.08);
+  --color-components-panel-border-subtle: rgb(16 24 40 / 0.08);
   --color-components-panel-gradient-2: #f9fafb;
   --color-components-panel-gradient-1: #ffffff;
   --color-components-panel-bg-alt: #f9fafb;
   --color-components-panel-on-panel-item-bg: #ffffff;
   --color-components-panel-on-panel-item-bg-hover: #f9fafb;
   --color-components-panel-on-panel-item-bg-alt: #f9fafb;
-  --color-components-panel-on-panel-item-bg-transparent: #fffffff2;
-  --color-components-panel-on-panel-item-bg-hover-transparent: #f9fafb00;
-  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: #fef3f200;
+  --color-components-panel-on-panel-item-bg-transparent: rgb(255 255 255 / 0.95);
+  --color-components-panel-on-panel-item-bg-hover-transparent: rgb(249 250 251 / 0);
+  --color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0);
 
-  --color-components-panel-bg-transparent: #ffffff00;
+  --color-components-panel-bg-transparent: rgb(255 255 255 / 0);
 
   --color-components-main-nav-nav-button-text: #495464;
   --color-components-main-nav-nav-button-text-active: #155aef;
-  --color-components-main-nav-nav-button-bg: #ffffff00;
+  --color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0);
   --color-components-main-nav-nav-button-bg-active: #fcfcfd;
-  --color-components-main-nav-nav-button-border: #fffffff2;
-  --color-components-main-nav-nav-button-bg-hover: #1018280a;
+  --color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.95);
+  --color-components-main-nav-nav-button-bg-hover: rgb(16 24 40 / 0.04);
 
   --color-components-main-nav-nav-user-border: #ffffff;
 
   --color-components-slider-knob: #ffffff;
   --color-components-slider-knob-hover: #ffffff;
-  --color-components-slider-knob-disabled: #fffffff2;
+  --color-components-slider-knob-disabled: rgb(255 255 255 / 0.95);
   --color-components-slider-range: #296dff;
   --color-components-slider-track: #e9ebf0;
-  --color-components-slider-knob-border-hover: #10182833;
-  --color-components-slider-knob-border: #10182824;
+  --color-components-slider-knob-border-hover: rgb(16 24 40 / 0.2);
+  --color-components-slider-knob-border: rgb(16 24 40 / 0.14);
 
   --color-components-segmented-control-item-active-bg: #ffffff;
   --color-components-segmented-control-item-active-border: #ffffff;
-  --color-components-segmented-control-bg-normal: #c8ceda33;
+  --color-components-segmented-control-bg-normal: rgb(200 206 218 / 0.2);
   --color-components-segmented-control-item-active-accent-bg: #ffffff;
   --color-components-segmented-control-item-active-accent-border: #ffffff;
 
@@ -181,94 +185,94 @@ html[data-theme="light"] {
   --color-components-badge-white-to-dark: #ffffff;
   --color-components-badge-status-light-success-bg: #47cd89;
   --color-components-badge-status-light-success-border-inner: #17b26a;
-  --color-components-badge-status-light-success-halo: #17b26a40;
+  --color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.25);
 
   --color-components-badge-status-light-border-outer: #ffffff;
-  --color-components-badge-status-light-high-light: #ffffff4d;
+  --color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3);
   --color-components-badge-status-light-warning-bg: #fdb022;
   --color-components-badge-status-light-warning-border-inner: #f79009;
-  --color-components-badge-status-light-warning-halo: #f7900940;
+  --color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.25);
 
   --color-components-badge-status-light-error-bg: #f97066;
   --color-components-badge-status-light-error-border-inner: #f04438;
-  --color-components-badge-status-light-error-halo: #f0443840;
+  --color-components-badge-status-light-error-halo: rgb(240 68 56 / 0.25);
 
   --color-components-badge-status-light-normal-bg: #36bffa;
   --color-components-badge-status-light-normal-border-inner: #0ba5ec;
-  --color-components-badge-status-light-normal-halo: #0ba5ec40;
+  --color-components-badge-status-light-normal-halo: rgb(11 165 236 / 0.25);
 
   --color-components-badge-status-light-disabled-bg: #98a2b2;
   --color-components-badge-status-light-disabled-border-inner: #676f83;
-  --color-components-badge-status-light-disabled-halo: #1018280a;
+  --color-components-badge-status-light-disabled-halo: rgb(16 24 40 / 0.04);
 
-  --color-components-badge-bg-green-soft: #17b26a14;
-  --color-components-badge-bg-orange-soft: #f7900914;
-  --color-components-badge-bg-red-soft: #f0443814;
-  --color-components-badge-bg-blue-light-soft: #0ba5ec14;
-  --color-components-badge-bg-gray-soft: #1018280a;
-  --color-components-badge-bg-dimm: #ffffff0d;
+  --color-components-badge-bg-green-soft: rgb(23 178 106 / 0.08);
+  --color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.08);
+  --color-components-badge-bg-red-soft: rgb(240 68 56 / 0.08);
+  --color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.08);
+  --color-components-badge-bg-gray-soft: rgb(16 24 40 / 0.04);
+  --color-components-badge-bg-dimm: rgb(255 255 255 / 0.05);
 
   --color-components-chart-line: #296dff;
-  --color-components-chart-area-1: #155aef24;
-  --color-components-chart-area-2: #155aef0a;
+  --color-components-chart-area-1: rgb(21 90 239 / 0.14);
+  --color-components-chart-area-2: rgb(21 90 239 / 0.04);
   --color-components-chart-current-1: #155aef;
   --color-components-chart-current-2: #d1e0ff;
   --color-components-chart-bg: #ffffff;
 
-  --color-components-actionbar-bg: #fffffff2;
-  --color-components-actionbar-border: #1018280a;
+  --color-components-actionbar-bg: rgb(255 255 255 / 0.95);
+  --color-components-actionbar-border: rgb(16 24 40 / 0.04);
   --color-components-actionbar-bg-accent: #f5f7ff;
   --color-components-actionbar-border-accent: #b2caff;
 
   --color-components-dropzone-bg-alt: #f2f4f7;
   --color-components-dropzone-bg: #f9fafb;
-  --color-components-dropzone-bg-accent: #155aef24;
-  --color-components-dropzone-border: #10182814;
-  --color-components-dropzone-border-alt: #10182833;
+  --color-components-dropzone-bg-accent: rgb(21 90 239 / 0.14);
+  --color-components-dropzone-border: rgb(16 24 40 / 0.08);
+  --color-components-dropzone-border-alt: rgb(16 24 40 / 0.2);
   --color-components-dropzone-border-accent: #84abff;
 
   --color-components-progress-brand-progress: #296dff;
   --color-components-progress-brand-border: #296dff;
-  --color-components-progress-brand-bg: #155aef0a;
+  --color-components-progress-brand-bg: rgb(21 90 239 / 0.04);
 
   --color-components-progress-white-progress: #ffffff;
-  --color-components-progress-white-border: #fffffff2;
-  --color-components-progress-white-bg: #ffffff03;
+  --color-components-progress-white-border: rgb(255 255 255 / 0.95);
+  --color-components-progress-white-bg: rgb(255 255 255 / 0.01);
 
   --color-components-progress-gray-progress: #98a2b2;
   --color-components-progress-gray-border: #98a2b2;
-  --color-components-progress-gray-bg: #c8ceda05;
+  --color-components-progress-gray-bg: rgb(200 206 218 / 0.02);
 
   --color-components-progress-warning-progress: #f79009;
   --color-components-progress-warning-border: #f79009;
-  --color-components-progress-warning-bg: #f790090a;
+  --color-components-progress-warning-bg: rgb(247 144 9 / 0.04);
 
   --color-components-progress-error-progress: #f04438;
   --color-components-progress-error-border: #f04438;
-  --color-components-progress-error-bg: #f044380a;
+  --color-components-progress-error-bg: rgb(240 68 56 / 0.04);
 
   --color-components-chat-input-audio-bg: #eff4ff;
-  --color-components-chat-input-audio-wave-default: #155aef33;
-  --color-components-chat-input-bg-mask-1: #ffffff03;
+  --color-components-chat-input-audio-wave-default: rgb(21 90 239 / 0.2);
+  --color-components-chat-input-bg-mask-1: rgb(255 255 255 / 0.01);
   --color-components-chat-input-bg-mask-2: #f2f4f7;
   --color-components-chat-input-border: #ffffff;
   --color-components-chat-input-audio-wave-active: #296dff;
   --color-components-chat-input-audio-bg-alt: #fcfcfd;
 
   --color-components-avatar-shape-fill-stop-0: #ffffff;
-  --color-components-avatar-shape-fill-stop-100: #ffffffe6;
+  --color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.9);
 
-  --color-components-avatar-bg-mask-stop-0: #ffffff1f;
-  --color-components-avatar-bg-mask-stop-100: #ffffff14;
+  --color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.12);
+  --color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.08);
 
   --color-components-avatar-default-avatar-bg: #d0d5dc;
-  --color-components-avatar-mask-darkmode-dimmed: #ffffff00;
+  --color-components-avatar-mask-darkmode-dimmed: rgb(255 255 255 / 0);
 
   --color-components-label-gray: #f2f4f7;
 
   --color-components-premium-badge-blue-bg-stop-0: #5289ff;
   --color-components-premium-badge-blue-bg-stop-100: #155aef;
-  --color-components-premium-badge-blue-stroke-stop-0: #fffffff2;
+  --color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-blue-stroke-stop-100: #155aef;
   --color-components-premium-badge-blue-text-stop-0: #f5f7ff;
   --color-components-premium-badge-blue-text-stop-100: #d1e0ff;
@@ -276,14 +280,14 @@ html[data-theme="light"] {
   --color-components-premium-badge-blue-bg-stop-0-hover: #296dff;
   --color-components-premium-badge-blue-bg-stop-100-hover: #004aeb;
   --color-components-premium-badge-blue-glow-hover: #84abff;
-  --color-components-premium-badge-blue-stroke-stop-0-hover: #fffffff2;
+  --color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-blue-stroke-stop-100-hover: #00329e;
 
-  --color-components-premium-badge-highlight-stop-0: #ffffff1f;
-  --color-components-premium-badge-highlight-stop-100: #ffffff4d;
+  --color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12);
+  --color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.3);
   --color-components-premium-badge-indigo-bg-stop-0: #8098f9;
   --color-components-premium-badge-indigo-bg-stop-100: #444ce7;
-  --color-components-premium-badge-indigo-stroke-stop-0: #fffffff2;
+  --color-components-premium-badge-indigo-stroke-stop-0: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-indigo-stroke-stop-100: #6172f3;
   --color-components-premium-badge-indigo-text-stop-0: #f5f8ff;
   --color-components-premium-badge-indigo-text-stop-100: #e0eaff;
@@ -291,12 +295,12 @@ html[data-theme="light"] {
   --color-components-premium-badge-indigo-glow-hover: #a4bcfd;
   --color-components-premium-badge-indigo-bg-stop-0-hover: #6172f3;
   --color-components-premium-badge-indigo-bg-stop-100-hover: #2d31a6;
-  --color-components-premium-badge-indigo-stroke-stop-0-hover: #fffffff2;
+  --color-components-premium-badge-indigo-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-indigo-stroke-stop-100-hover: #2d31a6;
 
   --color-components-premium-badge-grey-bg-stop-0: #98a2b2;
   --color-components-premium-badge-grey-bg-stop-100: #676f83;
-  --color-components-premium-badge-grey-stroke-stop-0: #fffffff2;
+  --color-components-premium-badge-grey-stroke-stop-0: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-grey-stroke-stop-100: #676f83;
   --color-components-premium-badge-grey-text-stop-0: #fcfcfd;
   --color-components-premium-badge-grey-text-stop-100: #f2f4f7;
@@ -304,12 +308,12 @@ html[data-theme="light"] {
   --color-components-premium-badge-grey-glow-hover: #d0d5dc;
   --color-components-premium-badge-grey-bg-stop-0-hover: #676f83;
   --color-components-premium-badge-grey-bg-stop-100-hover: #354052;
-  --color-components-premium-badge-grey-stroke-stop-0-hover: #fffffff2;
+  --color-components-premium-badge-grey-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-grey-stroke-stop-100-hover: #354052;
 
   --color-components-premium-badge-orange-bg-stop-0: #ff692e;
   --color-components-premium-badge-orange-bg-stop-100: #e04f16;
-  --color-components-premium-badge-orange-stroke-stop-0: #fffffff2;
+  --color-components-premium-badge-orange-stroke-stop-0: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-orange-stroke-stop-100: #e62e05;
   --color-components-premium-badge-orange-text-stop-0: #fefaf5;
   --color-components-premium-badge-orange-text-stop-100: #fdead7;
@@ -317,14 +321,14 @@ html[data-theme="light"] {
   --color-components-premium-badge-orange-glow-hover: #f7b27a;
   --color-components-premium-badge-orange-bg-stop-0-hover: #ff4405;
   --color-components-premium-badge-orange-bg-stop-100-hover: #b93815;
-  --color-components-premium-badge-orange-stroke-stop-0-hover: #fffffff2;
+  --color-components-premium-badge-orange-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
   --color-components-premium-badge-orange-stroke-stop-100-hover: #bc1b06;
 
-  --color-components-progress-bar-bg: #155aef0a;
-  --color-components-progress-bar-progress: #155aef24;
-  --color-components-progress-bar-border: #1018280a;
+  --color-components-progress-bar-bg: rgb(21 90 239 / 0.04);
+  --color-components-progress-bar-progress: rgb(21 90 239 / 0.14);
+  --color-components-progress-bar-border: rgb(16 24 40 / 0.04);
   --color-components-progress-bar-progress-solid: #296dff;
-  --color-components-progress-bar-progress-highlight: #155aef33;
+  --color-components-progress-bar-progress-highlight: rgb(21 90 239 / 0.2);
 
   --color-components-icon-bg-red-solid: #d92d20;
   --color-components-icon-bg-rose-solid: #e31b54;
@@ -356,7 +360,7 @@ html[data-theme="light"] {
   --color-text-primary: #101828;
   --color-text-secondary: #354052;
   --color-text-tertiary: #676f83;
-  --color-text-quaternary: #1018284d;
+  --color-text-quaternary: rgb(16 24 40 / 0.3);
   --color-text-destructive: #d92d20;
   --color-text-success: #079455;
   --color-text-warning: #dc6803;
@@ -369,75 +373,80 @@ html[data-theme="light"] {
   --color-text-disabled: #d0d5dc;
   --color-text-accent-secondary: #296dff;
   --color-text-accent-light-mode-only: #155aef;
-  --color-text-text-selected: #155aef24;
-  --color-text-secondary-on-surface: #ffffffe6;
+  --color-text-text-selected: rgb(21 90 239 / 0.14);
+  --color-text-secondary-on-surface: rgb(255 255 255 / 0.9);
   --color-text-logo-text: #18222f;
   --color-text-empty-state-icon: #d0d5dc;
   --color-text-inverted: #000000;
-  --color-text-inverted-dimmed: #000000f2;
+  --color-text-inverted-dimmed: rgb(0 0 0 / 0.95);
 
   --color-background-body: #f2f4f7;
   --color-background-default-subtle: #fcfcfd;
   --color-background-neutral-subtle: #f9fafb;
-  --color-background-sidenav-bg: #ffffffcc;
+  --color-background-sidenav-bg: rgb(255 255 255 / 0.8);
   --color-background-default: #ffffff;
   --color-background-soft: #f9fafb;
   --color-background-gradient-bg-fill-chat-bg-1: #f9fafb;
   --color-background-gradient-bg-fill-chat-bg-2: #f2f4f7;
   --color-background-gradient-bg-fill-chat-bubble-bg-1: #ffffff;
-  --color-background-gradient-bg-fill-chat-bubble-bg-2: #ffffff99;
-  --color-background-gradient-bg-fill-chat-bubble-bg-3: #e1effe;
-  --color-background-gradient-bg-fill-debug-bg-1: #ffffff00;
-  --color-background-gradient-bg-fill-debug-bg-2: #c8ceda24;
+  --color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(255 255 255 / 0.6);
+  --color-background-gradient-bg-fill-debug-bg-1: rgb(255 255 255 / 0);
+  --color-background-gradient-bg-fill-debug-bg-2: rgb(200 206 218 / 0.14);
 
-  --color-background-gradient-mask-gray: #c8ceda33;
-  --color-background-gradient-mask-transparent: #ffffff00;
-  --color-background-gradient-mask-input-clear-2: #e9ebf000;
+  --color-background-gradient-mask-gray: rgb(200 206 218 / 0.2);
+  --color-background-gradient-mask-transparent: rgb(255 255 255 / 0);
+  --color-background-gradient-mask-input-clear-2: rgb(233 235 240 / 0);
   --color-background-gradient-mask-input-clear-1: #e9ebf0;
-  --color-background-gradient-mask-transparent-dark: #00000000;
-  --color-background-gradient-mask-side-panel-2: #1018284d;
-  --color-background-gradient-mask-side-panel-1: #10182805;
+  --color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0);
+  --color-background-gradient-mask-side-panel-2: rgb(16 24 40 / 0.3);
+  --color-background-gradient-mask-side-panel-1: rgb(16 24 40 / 0.02);
 
   --color-background-default-burn: #e9ebf0;
-  --color-background-overlay-fullscreen: #f9fafbf2;
-  --color-background-default-lighter: #ffffff80;
+  --color-background-overlay-fullscreen: rgb(249 250 251 / 0.95);
+  --color-background-default-lighter: rgb(255 255 255 / 0.5);
   --color-background-section: #f9fafb;
-  --color-background-interaction-from-bg-1: #c8ceda33;
-  --color-background-interaction-from-bg-2: #c8ceda24;
+  --color-background-interaction-from-bg-1: rgb(200 206 218 / 0.2);
+  --color-background-interaction-from-bg-2: rgb(200 206 218 / 0.14);
   --color-background-section-burn: #f2f4f7;
   --color-background-default-dodge: #ffffff;
-  --color-background-overlay: #10182899;
+  --color-background-overlay: rgb(16 24 40 / 0.6);
   --color-background-default-dimmed: #e9ebf0;
   --color-background-default-hover: #f9fafb;
-  --color-background-overlay-alt: #10182866;
-  --color-background-surface-white: #fffffff2;
-  --color-background-overlay-destructive: #f044384d;
-  --color-background-overlay-backdrop: #f2f4f7f2;
+  --color-background-overlay-alt: rgb(16 24 40 / 0.4);
+  --color-background-surface-white: rgb(255 255 255 / 0.95);
+  --color-background-overlay-destructive: rgb(240 68 56 / 0.3);
+  --color-background-overlay-backdrop: rgb(242 244 247 / 0.95);
+  --color-background-body-transparent: rgb(242 244 247 / 0);
 
-  --color-shadow-shadow-1: #09090b08;
-  --color-shadow-shadow-3: #09090b0d;
-  --color-shadow-shadow-4: #09090b0f;
-  --color-shadow-shadow-5: #09090b14;
-  --color-shadow-shadow-6: #09090b1a;
-  --color-shadow-shadow-7: #09090b1f;
-  --color-shadow-shadow-8: #09090b24;
-  --color-shadow-shadow-9: #09090b2e;
-  --color-shadow-shadow-2: #09090b0a;
-  --color-shadow-shadow-10: #09090b0d;
+  --color-shadow-shadow-1: rgb(9 9 11 / 0.03);
+  --color-shadow-shadow-3: rgb(9 9 11 / 0.05);
+  --color-shadow-shadow-4: rgb(9 9 11 / 0.06);
+  --color-shadow-shadow-5: rgb(9 9 11 / 0.08);
+  --color-shadow-shadow-6: rgb(9 9 11 / 0.1);
+  --color-shadow-shadow-7: rgb(9 9 11 / 0.12);
+  --color-shadow-shadow-8: rgb(9 9 11 / 0.14);
+  --color-shadow-shadow-9: rgb(9 9 11 / 0.18);
+  --color-shadow-shadow-2: rgb(9 9 11 / 0.04);
+  --color-shadow-shadow-10: rgb(9 9 11 / 0.05);
 
   --color-workflow-block-border: #ffffff;
   --color-workflow-block-parma-bg: #f2f4f7;
   --color-workflow-block-bg: #fcfcfd;
-  --color-workflow-block-bg-transparent: #fcfcfde6;
-  --color-workflow-block-border-highlight: #155aef24;
+  --color-workflow-block-bg-transparent: rgb(252 252 253 / 0.9);
+  --color-workflow-block-border-highlight: rgb(21 90 239 / 0.14);
+  --color-workflow-block-wrapper-bg-1: #e9ebf0;
+  --color-workflow-block-wrapper-bg-2: rgb(233 235 240 / 0.2);
 
-  --color-workflow-canvas-workflow-dot-color: #8585ad26;
+  --color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15);
   --color-workflow-canvas-workflow-bg: #f2f4f7;
+  --color-workflow-canvas-workflow-top-bar-1: #f2f4f7;
+  --color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.24);
+  --color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8);
 
   --color-workflow-link-line-active: #296dff;
   --color-workflow-link-line-normal: #d0d5dc;
   --color-workflow-link-line-handle: #296dff;
-  --color-workflow-link-line-normal-transparent: #d0d5dc33;
+  --color-workflow-link-line-normal-transparent: rgb(208 213 220 / 0.2);
   --color-workflow-link-line-failure-active: #f79009;
   --color-workflow-link-line-failure-handle: #f79009;
   --color-workflow-link-line-failure-button-bg: #dc6803;
@@ -450,73 +459,74 @@ html[data-theme="light"] {
   --color-workflow-link-line-error-handle: #f04438;
 
   --color-workflow-minimap-bg: #e9ebf0;
-  --color-workflow-minimap-block: #c8ceda4d;
+  --color-workflow-minimap-block: rgb(200 206 218 / 0.3);
 
   --color-workflow-display-success-bg: #ecfdf3;
-  --color-workflow-display-success-border-1: #17b26acc;
-  --color-workflow-display-success-border-2: #17b26a80;
-  --color-workflow-display-success-vignette-color: #17b26a33;
-  --color-workflow-display-success-bg-line-pattern: #17b26a4d;
+  --color-workflow-display-success-border-1: rgb(23 178 106 / 0.8);
+  --color-workflow-display-success-border-2: rgb(23 178 106 / 0.5);
+  --color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.2);
+  --color-workflow-display-success-bg-line-pattern: rgb(23 178 106 / 0.3);
 
-  --color-workflow-display-glass-1: #ffffff1f;
-  --color-workflow-display-glass-2: #ffffff80;
-  --color-workflow-display-vignette-dark: #0000001f;
-  --color-workflow-display-highlight: #ffffff80;
-  --color-workflow-display-outline: #0000000d;
+  --color-workflow-display-glass-1: rgb(255 255 255 / 0.12);
+  --color-workflow-display-glass-2: rgb(255 255 255 / 0.5);
+  --color-workflow-display-vignette-dark: rgb(0 0 0 / 0.12);
+  --color-workflow-display-highlight: rgb(255 255 255 / 0.5);
+  --color-workflow-display-outline: rgb(0 0 0 / 0.05);
   --color-workflow-display-error-bg: #fef3f2;
-  --color-workflow-display-error-bg-line-pattern: #f044384d;
-  --color-workflow-display-error-border-1: #f04438cc;
-  --color-workflow-display-error-border-2: #f0443880;
-  --color-workflow-display-error-vignette-color: #f0443833;
+  --color-workflow-display-error-bg-line-pattern: rgb(240 68 56 / 0.3);
+  --color-workflow-display-error-border-1: rgb(240 68 56 / 0.8);
+  --color-workflow-display-error-border-2: rgb(240 68 56 / 0.5);
+  --color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.2);
 
   --color-workflow-display-warning-bg: #fffaeb;
-  --color-workflow-display-warning-bg-line-pattern: #f790094d;
-  --color-workflow-display-warning-border-1: #f79009cc;
-  --color-workflow-display-warning-border-2: #f7900980;
-  --color-workflow-display-warning-vignette-color: #f7900933;
+  --color-workflow-display-warning-bg-line-pattern: rgb(247 144 9 / 0.3);
+  --color-workflow-display-warning-border-1: rgb(247 144 9 / 0.8);
+  --color-workflow-display-warning-border-2: rgb(247 144 9 / 0.5);
+  --color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.2);
 
   --color-workflow-display-normal-bg: #f0f9ff;
-  --color-workflow-display-normal-bg-line-pattern: #0ba5ec4d;
-  --color-workflow-display-normal-border-1: #0ba5eccc;
-  --color-workflow-display-normal-border-2: #0ba5ec80;
-  --color-workflow-display-normal-vignette-color: #0ba5ec33;
+  --color-workflow-display-normal-bg-line-pattern: rgb(11 165 236 / 0.3);
+  --color-workflow-display-normal-border-1: rgb(11 165 236 / 0.8);
+  --color-workflow-display-normal-border-2: rgb(11 165 236 / 0.5);
+  --color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.2);
 
   --color-workflow-display-disabled-bg: #f9fafb;
-  --color-workflow-display-disabled-bg-line-pattern: #c8ceda4d;
-  --color-workflow-display-disabled-border-1: #c8ceda99;
-  --color-workflow-display-disabled-border-2: #c8ceda66;
-  --color-workflow-display-disabled-vignette-color: #c8ceda66;
-  --color-workflow-display-disabled-outline: #00000000;
+  --color-workflow-display-disabled-bg-line-pattern: rgb(200 206 218 / 0.3);
+  --color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6);
+  --color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.4);
+  --color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.4);
+  --color-workflow-display-disabled-outline: rgb(0 0 0 / 0);
 
-  --color-workflow-workflow-progress-bg-1: #c8ceda33;
-  --color-workflow-workflow-progress-bg-2: #c8ceda0a;
+  --color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2);
+  --color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04);
 
-  --color-divider-subtle: #1018280a;
-  --color-divider-regular: #10182814;
-  --color-divider-deep: #10182824;
-  --color-divider-burn: #1018280a;
-  --color-divider-intense: #1018284d;
+  --color-divider-subtle: rgb(16 24 40 / 0.04);
+  --color-divider-regular: rgb(16 24 40 / 0.08);
+  --color-divider-deep: rgb(16 24 40 / 0.14);
+  --color-divider-burn: rgb(16 24 40 / 0.04);
+  --color-divider-intense: rgb(16 24 40 / 0.3);
   --color-divider-solid: #d0d5dc;
   --color-divider-solid-alt: #98a2b2;
 
-  --color-state-base-hover: #c8ceda33;
-  --color-state-base-active: #c8ceda66;
-  --color-state-base-hover-alt: #c8ceda66;
-  --color-state-base-handle: #10182833;
-  --color-state-base-handle-hover: #1018284d;
-  --color-state-base-hover-subtle: #c8ceda14;
+  --color-state-base-hover: rgb(200 206 218 / 0.2);
+  --color-state-base-active: rgb(200 206 218 / 0.4);
+  --color-state-base-hover-alt: rgb(200 206 218 / 0.4);
+  --color-state-base-handle: rgb(16 24 40 / 0.2);
+  --color-state-base-handle-hover: rgb(16 24 40 / 0.3);
+  --color-state-base-hover-subtle: rgb(200 206 218 / 0.08);
 
   --color-state-accent-hover: #eff4ff;
-  --color-state-accent-active: #155aef14;
+  --color-state-accent-active: rgb(21 90 239 / 0.08);
   --color-state-accent-hover-alt: #d1e0ff;
   --color-state-accent-solid: #296dff;
-  --color-state-accent-active-alt: #155aef24;
+  --color-state-accent-active-alt: rgb(21 90 239 / 0.14);
 
   --color-state-destructive-hover: #fef3f2;
   --color-state-destructive-hover-alt: #fee4e2;
   --color-state-destructive-active: #fecdca;
   --color-state-destructive-solid: #f04438;
   --color-state-destructive-border: #fda29b;
+  --color-state-destructive-hover-transparent: rgb(254 243 242 / 0);
 
   --color-state-success-hover: #ecfdf3;
   --color-state-success-hover-alt: #dcfae6;
@@ -527,10 +537,12 @@ html[data-theme="light"] {
   --color-state-warning-hover-alt: #fef0c7;
   --color-state-warning-active: #fedf89;
   --color-state-warning-solid: #f79009;
+  --color-state-warning-hover-transparent: rgb(255 250 235 / 0);
 
   --color-effects-highlight: #ffffff;
-  --color-effects-highlight-lightmode-off: #ffffff00;
+  --color-effects-highlight-lightmode-off: rgb(255 255 255 / 0);
   --color-effects-image-frame: #ffffff;
+  --color-effects-icon-border: rgb(16 24 40 / 0.08);
 
   --color-util-colors-orange-dark-orange-dark-50: #fff4ed;
   --color-util-colors-orange-dark-orange-dark-100: #ffe6d5;
@@ -549,7 +561,7 @@ html[data-theme="light"] {
   --color-util-colors-orange-orange-500: #ef6820;
   --color-util-colors-orange-orange-600: #e04f16;
   --color-util-colors-orange-orange-700: #b93815;
-  --color-util-colors-orange-orange-100-transparent: #fdead700;
+  --color-util-colors-orange-orange-100-transparent: rgb(253 234 215 / 0);
 
   --color-util-colors-pink-pink-50: #fdf2fa;
   --color-util-colors-pink-pink-100: #fce7f6;
@@ -722,8 +734,6 @@ html[data-theme="light"] {
   --color-util-colors-midnight-midnight-600: #5d698d;
   --color-util-colors-midnight-midnight-700: #3e465e;
 
-  --color-third-party-Arize: #000000;
-  --color-third-party-Phoenix: #000000;
   --color-third-party-LangChain: #1c3c3c;
   --color-third-party-Langfuse: #000000;
   --color-third-party-Github: #1b1f24;
@@ -737,6 +747,9 @@ html[data-theme="light"] {
   --color-third-party-aws-alt: #0f1824;
 
   --color-saas-background: #fcfcfd;
-  --color-saas-pricing-grid-bg: #c8ceda80;
+  --color-saas-pricing-grid-bg: rgb(200 206 218 / 0.5);
+
+  --color-dify-logo-dify-logo-blue: #0033ff;
+  --color-dify-logo-dify-logo-black: #000000;
 
 }

web/themes/tailwind-theme-var-define.ts

@@ -124,11 +124,15 @@ const vars = {
   'components-card-bg': 'var(--color-components-card-bg)',
   'components-card-border': 'var(--color-components-card-border)',
   'components-card-bg-alt': 'var(--color-components-card-bg-alt)',
+  'components-card-bg-transparent': 'var(--color-components-card-bg-transparent)',
+  'components-card-bg-alt-transparent': 'var(--color-components-card-bg-alt-transparent)',
 
   'components-menu-item-text': 'var(--color-components-menu-item-text)',
   'components-menu-item-text-active': 'var(--color-components-menu-item-text-active)',
   'components-menu-item-text-hover': 'var(--color-components-menu-item-text-hover)',
   'components-menu-item-text-active-accent': 'var(--color-components-menu-item-text-active-accent)',
+  'components-menu-item-bg-active': 'var(--color-components-menu-item-bg-active)',
+  'components-menu-item-bg-hover': 'var(--color-components-menu-item-bg-hover)',
 
   'components-panel-bg': 'var(--color-components-panel-bg)',
   'components-panel-bg-blur': 'var(--color-components-panel-bg-blur)',
@@ -386,7 +390,6 @@ const vars = {
   'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)',
   'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)',
   'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)',
-  'background-gradient-bg-fill-chat-bubble-bg-3': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-3)',
   'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)',
   'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)',
 
@@ -413,6 +416,7 @@ const vars = {
   'background-surface-white': 'var(--color-background-surface-white)',
   'background-overlay-destructive': 'var(--color-background-overlay-destructive)',
   'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)',
+  'background-body-transparent': 'var(--color-background-body-transparent)',
 
   'shadow-shadow-1': 'var(--color-shadow-shadow-1)',
   'shadow-shadow-3': 'var(--color-shadow-shadow-3)',
@@ -430,9 +434,14 @@ const vars = {
   'workflow-block-bg': 'var(--color-workflow-block-bg)',
   'workflow-block-bg-transparent': 'var(--color-workflow-block-bg-transparent)',
   'workflow-block-border-highlight': 'var(--color-workflow-block-border-highlight)',
+  'workflow-block-wrapper-bg-1': 'var(--color-workflow-block-wrapper-bg-1)',
+  'workflow-block-wrapper-bg-2': 'var(--color-workflow-block-wrapper-bg-2)',
 
   'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)',
   'workflow-canvas-workflow-bg': 'var(--color-workflow-canvas-workflow-bg)',
+  'workflow-canvas-workflow-top-bar-1': 'var(--color-workflow-canvas-workflow-top-bar-1)',
+  'workflow-canvas-workflow-top-bar-2': 'var(--color-workflow-canvas-workflow-top-bar-2)',
+  'workflow-canvas-canvas-overlay': 'var(--color-workflow-canvas-canvas-overlay)',
 
   'workflow-link-line-active': 'var(--color-workflow-link-line-active)',
   'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)',
@@ -517,6 +526,7 @@ const vars = {
   'state-destructive-active': 'var(--color-state-destructive-active)',
   'state-destructive-solid': 'var(--color-state-destructive-solid)',
   'state-destructive-border': 'var(--color-state-destructive-border)',
+  'state-destructive-hover-transparent': 'var(--color-state-destructive-hover-transparent)',
 
   'state-success-hover': 'var(--color-state-success-hover)',
   'state-success-hover-alt': 'var(--color-state-success-hover-alt)',
@@ -527,10 +537,12 @@ const vars = {
   'state-warning-hover-alt': 'var(--color-state-warning-hover-alt)',
   'state-warning-active': 'var(--color-state-warning-active)',
   'state-warning-solid': 'var(--color-state-warning-solid)',
+  'state-warning-hover-transparent': 'var(--color-state-warning-hover-transparent)',
 
   'effects-highlight': 'var(--color-effects-highlight)',
   'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)',
   'effects-image-frame': 'var(--color-effects-image-frame)',
+  'effects-icon-border': 'var(--color-effects-icon-border)',
 
   'util-colors-orange-dark-orange-dark-50': 'var(--color-util-colors-orange-dark-orange-dark-50)',
   'util-colors-orange-dark-orange-dark-100': 'var(--color-util-colors-orange-dark-orange-dark-100)',
@@ -722,8 +734,6 @@ const vars = {
   'util-colors-midnight-midnight-600': 'var(--color-util-colors-midnight-midnight-600)',
   'util-colors-midnight-midnight-700': 'var(--color-util-colors-midnight-midnight-700)',
 
-  'third-party-Arize': 'var(--color-third-party-Arize)',
-  'third-party-Phoenix': 'var(--color-third-party-Phoenix)',
   'third-party-LangChain': 'var(--color-third-party-LangChain)',
   'third-party-Langfuse': 'var(--color-third-party-Langfuse)',
   'third-party-Github': 'var(--color-third-party-Github)',
@@ -739,5 +749,8 @@ const vars = {
   'saas-background': 'var(--color-saas-background)',
   'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)',
 
+  'dify-logo-dify-logo-blue': 'var(--color-dify-logo-dify-logo-blue)',
+  'dify-logo-dify-logo-black': 'var(--color-dify-logo-dify-logo-black)',
+
 }
 export default vars