xto-fronted 0.6.2 → 0.7.0

package/src/assets/styles/_reset.scss

@@ -27,8 +27,8 @@ body {
   font-family: var(--xto-font-family, 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif);
   font-size: var(--xto-font-size-base, 14px);
   line-height: 1.5;
-  color: var(--xto-color-text-primary, #1F2937);
-  background-color: var(--xto-bg-color-page, #F9FAFB);
+  color: var(--xto-color-text-primary, #1F2329);
+  background-color: var(--xto-bg-color-page, #F7F8FA);
 }
 
 #app {
@@ -37,7 +37,7 @@ body {
 }
 
 a {
-  color: var(--xto-color-primary, #4F46E5);
+  color: var(--xto-color-primary, #12B6AF);
   text-decoration: none;
   cursor: pointer;
   transition: color var(--xto-transition-duration-fast, 150ms);
@@ -92,7 +92,7 @@ h5,
 h6 {
   margin: 0;
   font-weight: 500;
-  color: var(--xto-color-text-primary, #1F2937);
+  color: var(--xto-color-text-primary, #1F2329);
 }
 
 p {
@@ -106,21 +106,21 @@ p {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--xto-fill-color-light, #F9FAFB);
+  background-color: var(--xto-fill-color-light, #F7F8FA);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--xto-border-color, #D1D5DB);
+  background-color: var(--xto-border-color, #D9DCE1);
   border-radius: 3px;
 
   &:hover {
-    background-color: var(--xto-color-text-secondary, #6B7280);
+    background-color: var(--xto-color-text-secondary, #86909C);
   }
 }
 
 // 选中文本样式
 ::selection {
   background-color: var(--xto-color-primary-light-8, #D4D7FE);
-  color: var(--xto-color-primary, #4F46E5);
+  color: var(--xto-color-primary, #12B6AF);
 }

package/src/assets/styles/_root.scss

@@ -5,68 +5,69 @@
 
 :root {
   // 主色调 - Gauss 品牌深蓝
-  --xto-color-primary: #1D4ED8;
-  --xto-color-primary-light-1: #2563EB;
-  --xto-color-primary-light-2: #3B82F6;
-  --xto-color-primary-light-3: #60A5FA;
-  --xto-color-primary-light-4: #82B4FB;
-  --xto-color-primary-light-5: #93C5FD;
-  --xto-color-primary-light-6: #BFDBFE;
-  --xto-color-primary-light-7: #D0E1FE;
-  --xto-color-primary-light-8: #DBEAFE;
-  --xto-color-primary-light-9: #EFF6FF;
-  --xto-color-primary-dark-1: #1E40AF;
-  --xto-color-primary-dark-2: #1E3A8A;
-  --xto-color-primary-dark-3: #172E6E;
+  --xto-color-primary: #12B6AF;
+  --xto-color-on-primary: #04302D;
+  --xto-color-primary-light-1: #17C3BB;
+  --xto-color-primary-light-2: #2ED2CA;
+  --xto-color-primary-light-3: #51DAD3;
+  --xto-color-primary-light-4: #7AE1DC;
+  --xto-color-primary-light-5: #A0E8E4;
+  --xto-color-primary-light-6: #BCEEEA;
+  --xto-color-primary-light-7: #CFF3F0;
+  --xto-color-primary-light-8: #DDF6F4;
+  --xto-color-primary-light-9: #EAF9F8;
+  --xto-color-primary-dark-1: #0D7F7A;
+  --xto-color-primary-dark-2: #0B6B67;
+  --xto-color-primary-dark-3: #095755;
 
   // 功能色 - 精致调和
-  --xto-color-success: #10B981;
-  --xto-color-success-light: #6EE7B7;
-  --xto-color-success-lighter: #ECFDF5;
-  --xto-color-success-dark: #059669;
-
-  --xto-color-warning: #F59E0B;
-  --xto-color-warning-light: #FCD34D;
-  --xto-color-warning-lighter: #FFFBEB;
-  --xto-color-warning-dark: #D97706;
-
-  --xto-color-danger: #EF4444;
-  --xto-color-danger-light: #FCA5A5;
+  --xto-color-success: #2BC48A;
+  --xto-color-success-light: #94E6BF;
+  --xto-color-success-lighter: #EAFBF3;
+  --xto-color-success-dark: #00A870;
+
+  --xto-color-warning: #FF7D00;
+  --xto-color-warning-light: #FFB36E;
+  --xto-color-warning-lighter: #FFF3E8;
+  --xto-color-warning-dark: #CC6200;
+
+  --xto-color-danger: #F53F3F;
+  --xto-color-danger-light: #FAAFAF;
   --xto-color-danger-lighter: #FEF2F2;
-  --xto-color-danger-dark: #DC2626;
+  --xto-color-danger-dark: #F53F3F;
 
-  --xto-color-info: #64748B;
-  --xto-color-info-light: #94A3B8;
-  --xto-color-info-lighter: #F1F5F9;
-  --xto-color-info-dark: #475569;
+  --xto-color-info: #86909C;
+  --xto-color-info-light: #A9AEB8;
+  --xto-color-info-lighter: #F2F3F5;
+  --xto-color-info-dark: #4E5566;
 
   // 文字颜色 - slate 蓝灰体系
-  --xto-color-text-primary: #0F172A;
-  --xto-color-text-regular: #334155;
-  --xto-color-text-secondary: #64748B;
-  --xto-color-text-placeholder: #94A3B8;
-  --xto-color-text-disabled: #CBD5E1;
+  --xto-color-text-primary: #1F2329;
+  --xto-color-text-regular: #4E5566;
+  --xto-color-text-secondary: #86909C;
+  --xto-color-text-placeholder: #A9AEB8;
+  --xto-color-text-disabled: #D9DCE1;
 
   // 边框颜色 - 蓝灰边框
-  --xto-border-color: #CBD5E1;
-  --xto-border-color-light: #E2E8F0;
-  --xto-border-color-lighter: #EDF2F7;
-  --xto-border-color-extra-light: #F8FAFC;
-  --xto-border-color-dark: #94A3B8;
+  --xto-border-color: #D9DCE1;
+  --xto-border-color-light: #E5E6EB;
+  --xto-border-color-lighter: #EDEEF1;
+  --xto-border-color-extra-light: #F7F8FA;
+  --xto-border-color-dark: #A9AEB8;
 
   // 填充颜色 - 背景层次
-  --xto-fill-color: #F1F5F9;
-  --xto-fill-color-light: #F8FAFC;
+  --xto-fill-color: #F2F3F5;
+  --xto-fill-color-light: #F7F8FA;
   --xto-fill-color-lighter: #FFFFFF;
   --xto-fill-color-blank: #FFFFFF;
-  --xto-fill-color-dark: #E2E8F0;
+  --xto-fill-color-dark: #E5E6EB;
 
   // 背景颜色 - 页面层级（浅灰蓝页面底）
   --xto-bg-color: #FFFFFF;
-  --xto-bg-color-page: #F5F7FA;
+  --xto-bg-color-page: #F7F8FA;
   --xto-bg-color-component: #FFFFFF;
   --xto-bg-color-overlay: #FFFFFF;
-  --xto-bg-color-spotlight: #EFF6FF;
+  --xto-bg-color-spotlight: #EAF9F8;
 
   // 盒子阴影 - slate 基调多层柔和阴影
   --xto-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04);
@@ -80,7 +81,7 @@
   --xto-shadow-card-hover: var(--xto-shadow-elevated);
 
   // 字体 - 企业级字体栈
-  --xto-font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --xto-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --xto-font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
     Consolas, 'Courier New', monospace;
   --xto-font-size-base: 14px;
@@ -92,7 +93,7 @@
   --xto-font-line-height: 1.5714285714285714;
 
   // 圆角 - 精致圆润（卡片与弹层更圆润）
-  --xto-border-radius-base: 6px;
+  --xto-border-radius-base: 8px;
   --xto-border-radius-small: 4px;
   --xto-border-radius-large: 10px;
   --xto-border-radius-extra-large: 16px;
@@ -109,9 +110,9 @@
   --xto-spacing-xxl: 48px;
 
   // 尺寸 - 组件规格
-  --component-size-large: 40px;
-  --component-size-default: 32px;
-  --component-size-small: 24px;
+  --component-size-large: 44px;
+  --component-size-default: 36px;
+  --component-size-small: 28px;
 
   // 过渡 - 流畅动效
   --xto-transition-duration: 0.2s;
@@ -137,51 +138,52 @@
   --footer-height: 32px;
 
   // 特殊效果
-  --xto-gradient-primary: linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #172E6E 0%, #1D4ED8 50%, #3B82F6 100%);
+  --xto-gradient-primary: linear-gradient(135deg, #12B6AF 0%, #2ED2CA 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #095755 0%, #12B6AF 50%, #2ED2CA 100%);
   --xto-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-  --xto-gradient-mask: linear-gradient(180deg, rgba(29, 78, 216, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  --xto-gradient-mask: linear-gradient(180deg, rgba(18, 182, 175, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
 }
 
 // 暗色主题 - 深蓝黑科技感（与 @xto/core 暗色令牌对齐）
 html.dark {
-  --xto-color-primary: #4C8DFF;
-  --xto-color-primary-light-1: #3B82F6;
-  --xto-color-primary-light-2: #2F6FE4;
-  --xto-color-primary-light-3: #2563EB;
-  --xto-color-primary-light-4: #1D4ED8;
-  --xto-color-primary-light-5: #1E40AF;
-  --xto-color-primary-light-6: #1E3A8A;
-  --xto-color-primary-light-7: #172E6E;
-  --xto-color-primary-light-8: #122554;
-  --xto-color-primary-light-9: #0D1B3E;
-  --xto-color-primary-dark-1: #60A5FA;
-  --xto-color-primary-dark-2: #82B4FB;
-  --xto-color-primary-dark-3: #93C5FD;
-
-  --xto-color-text-primary: #F1F5F9;
-  --xto-color-text-regular: #CBD5E1;
-  --xto-color-text-secondary: #94A3B8;
-  --xto-color-text-placeholder: #64748B;
-  --xto-color-text-disabled: #475569;
-
-  --xto-border-color: #334155;
-  --xto-border-color-light: #1E293B;
-  --xto-border-color-lighter: #16213B;
-  --xto-border-color-extra-light: #0F172A;
-  --xto-border-color-dark: #475569;
-
-  --xto-fill-color: #1E293B;
-  --xto-fill-color-light: #16213B;
-  --xto-fill-color-lighter: #0F172A;
-  --xto-fill-color-blank: #111A2C;
-  --xto-fill-color-dark: #334155;
-
-  --xto-bg-color: #111A2C;
-  --xto-bg-color-page: #0B1220;
-  --xto-bg-color-component: #1E293B;
-  --xto-bg-color-overlay: #182338;
-  --xto-bg-color-spotlight: #0D1B3E;
+  --xto-color-primary: #2ED3CB;
+  --xto-color-on-primary: #04302D;
+  --xto-color-primary-light-1: #2ED2CA;
+  --xto-color-primary-light-2: #12B6AF;
+  --xto-color-primary-light-3: #17C3BB;
+  --xto-color-primary-light-4: #12B6AF;
+  --xto-color-primary-light-5: #0D7F7A;
+  --xto-color-primary-light-6: #0B6B67;
+  --xto-color-primary-light-7: #095755;
+  --xto-color-primary-light-8: #074442;
+  --xto-color-primary-light-9: #05302F;
+  --xto-color-primary-dark-1: #51DAD3;
+  --xto-color-primary-dark-2: #7AE1DC;
+  --xto-color-primary-dark-3: #A0E8E4;
+
+  --xto-color-text-primary: #F2F3F5;
+  --xto-color-text-regular: #D9DCE1;
+  --xto-color-text-secondary: #A9AEB8;
+  --xto-color-text-placeholder: #86909C;
+  --xto-color-text-disabled: #4E5566;
+
+  --xto-border-color: #4E5566;
+  --xto-border-color-light: #1E242B;
+  --xto-border-color-lighter: #1C232B;
+  --xto-border-color-extra-light: #1F2329;
+  --xto-border-color-dark: #4E5566;
+
+  --xto-fill-color: #1E242B;
+  --xto-fill-color-light: #1C232B;
+  --xto-fill-color-lighter: #1F2329;
+  --xto-fill-color-blank: #161B21;
+  --xto-fill-color-dark: #4E5566;
+
+  --xto-bg-color: #161B21;
+  --xto-bg-color-page: #0E1216;
+  --xto-bg-color-component: #1E242B;
+  --xto-bg-color-overlay: #1A2027;
+  --xto-bg-color-spotlight: #05302F;
 
   --xto-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
   --xto-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3),
@@ -193,7 +195,7 @@ html.dark {
   --xto-shadow-card: var(--xto-shadow-base);
   --xto-shadow-card-hover: var(--xto-shadow-elevated);
 
-  --xto-gradient-primary: linear-gradient(135deg, #4C8DFF 0%, #2563EB 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #4C8DFF 100%);
-  --xto-gradient-card: linear-gradient(180deg, rgba(17, 26, 44, 0) 0%, rgba(17, 26, 44, 0.8) 100%);
+  --xto-gradient-primary: linear-gradient(135deg, #2ED3CB 0%, #17C3BB 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #0B6B67 0%, #12B6AF 50%, #2ED3CB 100%);
+  --xto-gradient-card: linear-gradient(180deg, rgba(22, 27, 33, 0) 0%, rgba(22, 27, 33, 0.8) 100%);
 }

package/src/assets/styles/_variables.scss

@@ -4,32 +4,32 @@
 // ==============================================
 
 // 主题色 - Gauss 品牌深蓝
-$color-primary: #1D4ED8;
-$color-primary-light: #3B82F6;
-$color-primary-lighter: #60A5FA;
-$color-primary-dark: #1E40AF;
-$color-primary-darker: #1E3A8A;
+$color-primary: #12B6AF;
+$color-primary-light: #2ED2CA;
+$color-primary-lighter: #51DAD3;
+$color-primary-dark: #0D7F7A;
+$color-primary-darker: #0B6B67;
 
 // 功能色
-$color-success: #10B981;
-$color-warning: #F59E0B;
-$color-danger: #EF4444;
-$color-info: #64748B;
+$color-success: #2BC48A;
+$color-warning: #FF7D00;
+$color-danger: #F53F3F;
+$color-info: #86909C;
 
 // 文字颜色 - slate 蓝灰体系
-$color-text-primary: #0F172A;
-$color-text-regular: #334155;
-$color-text-secondary: #64748B;
-$color-text-placeholder: #94A3B8;
+$color-text-primary: #1F2329;
+$color-text-regular: #4E5566;
+$color-text-secondary: #86909C;
+$color-text-placeholder: #A9AEB8;
 
 // 边框颜色 - 蓝灰边框
-$color-border: #CBD5E1;
-$color-border-light: #E2E8F0;
-$color-border-lighter: #EDF2F7;
+$color-border: #D9DCE1;
+$color-border-light: #E5E6EB;
+$color-border-lighter: #EDEEF1;
 
 // 背景颜色
 $bg-color: #FFFFFF;
-$bg-color-page: #F5F7FA;
+$bg-color-page: #F7F8FA;
 $bg-color-component: #FFFFFF;
 
 // 字体

package/src/assets/styles/index.scss

@@ -117,52 +117,52 @@
 
 // 颜色
 .text-primary {
-  color: var(--xto-color-primary, #1D4ED8);
+  color: var(--xto-color-primary, #12B6AF);
 }
 
 .text-success {
-  color: var(--xto-color-success, #10B981);
+  color: var(--xto-color-success, #2BC48A);
 }
 
 .text-warning {
-  color: var(--xto-color-warning, #F59E0B);
+  color: var(--xto-color-warning, #FF7D00);
 }
 
 .text-danger {
-  color: var(--xto-color-danger, #EF4444);
+  color: var(--xto-color-danger, #F53F3F);
 }
 
 .text-info {
-  color: var(--xto-color-info, #64748B);
+  color: var(--xto-color-info, #86909C);
 }
 
 .text-secondary {
-  color: var(--xto-color-text-secondary, #64748B);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .text-placeholder {
-  color: var(--xto-color-text-placeholder, #94A3B8);
+  color: var(--xto-color-text-placeholder, #A9AEB8);
 }
 
 // 背景
 .bg-primary {
-  background-color: var(--xto-color-primary, #1D4ED8);
+  background-color: var(--xto-color-primary, #12B6AF);
 }
 
 .bg-success {
-  background-color: var(--xto-color-success, #10B981);
+  background-color: var(--xto-color-success, #2BC48A);
 }
 
 .bg-warning {
-  background-color: var(--xto-color-warning, #F59E0B);
+  background-color: var(--xto-color-warning, #FF7D00);
 }
 
 .bg-danger {
-  background-color: var(--xto-color-danger, #EF4444);
+  background-color: var(--xto-color-danger, #F53F3F);
 }
 
 .bg-page {
-  background-color: var(--xto-bg-color-page, #F5F7FA);
+  background-color: var(--xto-bg-color-page, #F7F8FA);
 }
 
 .bg-card {
@@ -233,14 +233,14 @@
   background-color: var(--xto-bg-color, #FFFFFF);
   border-radius: var(--xto-border-radius-large, 10px);
   padding: var(--xto-spacing-lg, 24px);
-  border: 1px solid var(--xto-border-color-lighter, #EDF2F7);
+  border: 1px solid var(--xto-border-color-lighter, #EDEEF1);
 }
 
 // 页面容器（浅灰蓝底 + 统一 16px 页边距）
 .page-container {
   padding: 16px;
   min-height: 100%;
-  background: var(--xto-bg-color-page, #F5F7FA);
+  background: var(--xto-bg-color-page, #F7F8FA);
 }
 
 // 搜索栏（企业级）
@@ -261,7 +261,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 12px;
-  border-bottom: 1px solid var(--xto-border-color-lighter, #F1F5F9);
+  border-bottom: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 }
 
 .toolbar-left {
@@ -289,7 +289,7 @@
   display: flex;
   justify-content: flex-end;
   padding: 12px;
-  border-top: 1px solid var(--xto-border-color-lighter, #F1F5F9);
+  border-top: 1px solid var(--xto-border-color-lighter, #F2F3F5);
 }
 
 // 标签徽章
@@ -303,41 +303,41 @@
   font-size: 12px;
   font-weight: 500;
   border-radius: 10px;
-  background: var(--xto-fill-color, #F1F5F9);
-  color: var(--xto-color-text-secondary, #64748B);
+  background: var(--xto-fill-color, #F2F3F5);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 
 .badge-primary {
-  background: var(--xto-color-primary-light-6, #BFDBFE);
-  color: var(--xto-color-primary, #1D4ED8);
+  background: var(--xto-color-primary-light-6, #BCEEEA);
+  color: var(--xto-color-primary, #12B6AF);
 }
 
 .badge-success {
-  background: var(--xto-color-success-light-9, #ECFDF5);
-  color: var(--xto-color-success, #10B981);
+  background: var(--xto-color-success-light-9, #EAFBF3);
+  color: var(--xto-color-success, #2BC48A);
 }
 
 .badge-warning {
-  background: var(--xto-color-warning-light-9, #FFFBEB);
-  color: var(--xto-color-warning, #F59E0B);
+  background: var(--xto-color-warning-light-9, #FFF3E8);
+  color: var(--xto-color-warning, #FF7D00);
 }
 
 .badge-danger {
   background: var(--xto-color-danger-light-9, #FEF2F2);
-  color: var(--xto-color-danger, #EF4444);
+  color: var(--xto-color-danger, #F53F3F);
 }
 
 // 分隔线
 .divider {
   height: 1px;
-  background: var(--xto-border-color-lighter, #F1F5F9);
+  background: var(--xto-border-color-lighter, #F2F3F5);
   margin: var(--xto-spacing-md, 12px) 0;
 }
 
 .divider-vertical {
   width: 1px;
   height: 100%;
-  background: var(--xto-border-color-lighter, #F1F5F9);
+  background: var(--xto-border-color-lighter, #F2F3F5);
   margin: 0 var(--xto-spacing-md, 12px);
 }
 
@@ -348,7 +348,7 @@
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: var(--xto-color-text-placeholder, #94A3B8);
+  color: var(--xto-color-text-placeholder, #A9AEB8);
 
   .empty-icon {
     width: 64px;
@@ -373,8 +373,8 @@
   .loading-spinner {
     width: 32px;
     height: 32px;
-    border: 3px solid var(--xto-border-color-lighter, #F1F5F9);
-    border-top-color: var(--xto-color-primary, #1D4ED8);
+    border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
+    border-top-color: var(--xto-color-primary, #12B6AF);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -382,7 +382,7 @@
   .loading-text {
     margin-top: 16px;
     font-size: 14px;
-    color: var(--xto-color-text-secondary, #64748B);
+    color: var(--xto-color-text-secondary, #86909C);
   }
 }
 
@@ -392,22 +392,22 @@
 
 // 链接样式
 .link {
-  color: var(--xto-color-primary, #1D4ED8);
+  color: var(--xto-color-primary, #12B6AF);
   text-decoration: none;
   transition: color 0.2s ease;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #2563EB);
+    color: var(--xto-color-primary-light-1, #17C3BB);
   }
 }
 
 .link-underline {
-  color: var(--xto-color-primary, #1D4ED8);
+  color: var(--xto-color-primary, #12B6AF);
   text-decoration: underline;
   text-underline-offset: 2px;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #2563EB);
+    color: var(--xto-color-primary-light-1, #17C3BB);
   }
 }
 
@@ -417,16 +417,16 @@
 // ==============================================
 .x-menu-item {
   &.is-active {
-    color: var(--xto-color-primary, #1D4ED8) !important;
-    background-color: var(--xto-color-primary-light-9, #EFF6FF) !important;
+    color: var(--xto-color-primary, #12B6AF) !important;
+    background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
     font-weight: 600;
   }
 }
 
 // SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
 .x-sub-menu__menu .x-menu-item.is-active {
-  color: var(--xto-color-primary, #1D4ED8) !important;
-  background-color: var(--xto-color-primary-light-9, #EFF6FF) !important;
+  color: var(--xto-color-primary, #12B6AF) !important;
+  background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
   font-weight: 600;
 }
 

package/src/components/Layout/Footer.vue

@@ -12,6 +12,6 @@
   width: 100%;
   text-align: center;
   font-size: 12px;
-  color: var(--xto-color-text-secondary, #6B7280);
+  color: var(--xto-color-text-secondary, #86909C);
 }
 </style>