@trinityui/design-system-css 2.1.0 → 2.1.2

package/dist/trinity.css

@@ -358,7 +358,7 @@
      ============================================ */
   --trinity-radius-button: 9999px;
   --trinity-radius-input: 6px;
-  --trinity-radius-card: 8px;
+  --trinity-radius-card: 12px;
   --trinity-radius-modal: 12px;
   --trinity-radius-modal-large: 16px;
   --trinity-radius-badge: 6px;
@@ -664,20 +664,27 @@
   /* Button Colors - Primary */
   --trinity-button-primary-bg: #050742;
   --trinity-button-primary-bg-hover: #FF6150;
+  --trinity-button-primary-bg-active: #282964;
   --trinity-button-primary-text: #FFFFFF;
 
   /* Button Colors - Secondary */
   --trinity-button-secondary-bg: #3816A0;
-  --trinity-button-secondary-bg-hover: #FF6150;
+  --trinity-button-secondary-bg-hover: #4A24E5;
+  --trinity-button-secondary-bg-active: #542CE8;
   --trinity-button-secondary-text: #FFFFFF;
 
   /* Button Colors - Outlined */
   --trinity-button-outlined-bg: transparent;
   --trinity-button-outlined-bg-hover: #FF6150;
+  --trinity-button-outlined-bg-active: #282964;
   --trinity-button-outlined-border: #050742;
   --trinity-button-outlined-text: #050742;
   --trinity-button-outlined-text-hover: #FFFFFF;
 
+  /* Button Colors - Disabled */
+  --trinity-button-disabled-bg: #E5E7EB;
+  --trinity-button-disabled-text: #9CA3AF;
+
   /* ============================================
      COMPONENT TOKENS - INPUT
      ============================================ */
@@ -718,7 +725,7 @@
   --trinity-card-border-radius: 12px;
   --trinity-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --trinity-card-bg: #FFFFFF;
-  --trinity-card-border: #F4F4F5;
+  --trinity-card-border: #E5E7EB;
 
   /* ============================================
      COMPONENT TOKENS - AVATAR
@@ -784,14 +791,17 @@
   /* ============================================
      COMPONENT TOKENS - SWITCH
      ============================================ */
-  --trinity-switch-width-sm: 36px;
-  --trinity-switch-width-md: 48px;
-  --trinity-switch-height-sm: 20px;
-  --trinity-switch-height-md: 28px;
-  --trinity-switch-thumb-sm: 16px;
-  --trinity-switch-thumb-md: 24px;
+  --trinity-switch-width-sm: 40px;
+  --trinity-switch-width-md: 52px;
+  --trinity-switch-height-sm: 24px;
+  --trinity-switch-height-md: 32px;
+  --trinity-switch-thumb-sm: 12px;
+  --trinity-switch-thumb-md: 16px;
+  --trinity-switch-thumb-checked-sm: 18px;
+  --trinity-switch-thumb-checked-md: 24px;
   --trinity-switch-track-off: #E5E7EB;
   --trinity-switch-track-on: #050742;
+  --trinity-switch-track-border: #D4D4D8;
 
   /* ============================================
      COMPONENT TOKENS - NAVIGATION
@@ -874,6 +884,20 @@
   --trinity-nav-menu-min-width: 240px;
   --trinity-nav-menu-item-padding-y: 12px;
 
+  /* Footer */
+  --trinity-nav-footer-height: 40px;
+  --trinity-nav-footer-padding-x: 24px;
+  --trinity-nav-footer-padding-y: 8px;
+  --trinity-nav-footer-bg: #F3F4F6;
+  --trinity-nav-footer-text: #6B7280;
+  --trinity-nav-footer-divider: #E5E7EB;
+  --trinity-nav-footer-link-hover: #050742;
+  /* Footer dark variant (navy bg) */
+  --trinity-nav-footer-dark-bg: #050742;
+  --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
+  --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
+  --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
+
   /* ============================================
      SEMANTIC SHADOWS (Component-Specific)
      ============================================ */
@@ -986,7 +1010,33 @@
   --trinity-tooltip-bg: #FAFAFA;
   --trinity-tooltip-text: #18181B;
 
-  --trinity-switch-track-off: #3F3F46;
+  --trinity-switch-track-off: #374151;
+  --trinity-switch-track-on: #FF8D85;
+  --trinity-switch-track-border: #6B7280;
+
+  --trinity-modal-bg: #1C1C1F;
+  --trinity-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.07);
+
+  /* Button Dark Mode Overrides */
+  --trinity-button-primary-bg: #FF7167;
+  --trinity-button-primary-bg-hover: #FF796F;
+  --trinity-button-primary-bg-active: #FF665C;
+  --trinity-button-primary-text: #FFFFFF;
+
+  --trinity-button-secondary-bg: #9950D3;
+  --trinity-button-secondary-bg-hover: #A96ADA;
+  --trinity-button-secondary-bg-active: #8D49CE;
+  --trinity-button-secondary-text: #FFFFFF;
+
+  --trinity-button-outlined-bg: transparent;
+  --trinity-button-outlined-bg-hover: #FF7167;
+  --trinity-button-outlined-bg-active: #FF665C;
+  --trinity-button-outlined-border: #FF8D85;
+  --trinity-button-outlined-text: #FF8D85;
+  --trinity-button-outlined-text-hover: #FFFFFF;
+
+  --trinity-button-disabled-bg: #374151;
+  --trinity-button-disabled-text: #6B7280;
   
   /* Navigation Dark Mode Overrides */
   --trinity-nav-sidebar-bg-light: #1C1C1F;
@@ -998,6 +1048,16 @@
   --trinity-nav-item-text-hover: #F9FAFB;
   --trinity-nav-item-icon-default: #A96ADA;
   --trinity-nav-divider-light: #3F3F46;
+
+  /* Footer Dark Mode Overrides */
+  --trinity-nav-footer-bg: #262629;
+  --trinity-nav-footer-text: #D1D5DB;
+  --trinity-nav-footer-divider: #3F3F46;
+  --trinity-nav-footer-link-hover: #F9FAFB;
+  --trinity-nav-footer-dark-bg: #121214;
+  --trinity-nav-footer-dark-text: rgba(255, 255, 255, 0.7);
+  --trinity-nav-footer-dark-divider: rgba(255, 255, 255, 0.24);
+  --trinity-nav-footer-dark-link-hover: rgba(255, 255, 255, 0.95);
 }
 
 /* System preference detection */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trinityui/design-system-css",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "private": false,
   "description": "Trinity Design System CSS package for non-React frameworks (Angular, Vue, static HTML).",
   "license": "MIT",