Accent Color, wow

teacat · Feb 27, 2023 · e56c86b · e56c86b
1 parent d6caccc
commit e56c86b
Show file tree

Hide file tree

Showing 40 changed files with 558 additions and 164 deletions.
diff --git a/languages/zh-tw/components/colors.yml b/languages/zh-tw/components/colors.yml
diff --git a/src/app-navbar.css b/src/app-navbar.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-app-navbar {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -73,7 +78,12 @@
  */
 
 .ts-app-navbar .item.is-active {
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
+}
+
+.ts-app-navbar .item.is-active .ts-icon {
+    --accent-color: inherit;
+    --accent-foreground-color: inherit;
 }
 
 /**
@@ -126,8 +136,8 @@
 }
 
 .ts-app-navbar.is-indicated .item.is-active .ts-icon {
-    background: var(--ts-gray-800);
-    color: var(--ts-gray-50);
+    background: var(--accent-color, var(--ts-gray-800));
+    color: var(--accent-foreground-color, var(--ts-gray-50));
 }
 
 /**

diff --git a/src/app-sidebar.css b/src/app-sidebar.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-app-sidebar {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -47,8 +52,8 @@
  */
 
 .ts-app-sidebar .item.is-active {
-    background: var(--ts-gray-800);
-    color: var(--ts-gray-50);
+    background: var(--accent-color, var(--ts-gray-800));
+    color: var(--accent-foreground-color, var(--ts-gray-50));
     border-radius: 0px 100rem 100rem 0;
 }
 

diff --git a/src/app-topbar.css b/src/app-topbar.css
@@ -3,8 +3,8 @@
    ========================================================================== */
 
 .ts-app-topbar {
-    --ts-app-topbar-background-color: var(--ts-static-gray-900);
-    --ts-app-topbar-foreground-color: var(--ts-white);
+    --accent-color: initial;
+    --accent-foreground-color: initial;
 }
 
 /* ==========================================================================
@@ -16,8 +16,8 @@
     grid-template-columns: 1fr auto 1fr;
     padding: 0.5rem 1rem;
     line-height: 1;
-    background: var(--ts-app-topbar-background-color);
-    color: var(--ts-app-topbar-foreground-color);
+    background: var(--accent-color, var(--ts-static-gray-900));
+    color: var(--accent-foreground-color, var(--ts-white));
     min-height: 50px;
     align-items: center;
     gap: 0.5rem;

diff --git a/src/avatar.css b/src/avatar.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-avatar {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -46,11 +51,11 @@
  */
 
 .ts-avatar.is-text {
-    background: var(--ts-gray-200);
+    background: var(--accent-color, var(--ts-gray-200));
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--ts-gray-600);
+    color: var(--accent-foreground-color, var(--ts-gray-600));
     font-weight: 500;
     font-size: 1.1rem;
 }

diff --git a/src/badge.css b/src/badge.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-badge {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -12,8 +17,8 @@
     padding: 0.225rem 0.5rem;
     line-height: 1;
     border: 1px solid transparent;
-    background: var(--ts-gray-800);
-    color: var(--ts-gray-50);
+    background: var(--accent-color, var(--ts-gray-800));
+    color: var(--accent-foreground-color, var(--ts-gray-50));
     font-weight: 400;
     display: inline-block;
     white-space: nowrap;
@@ -32,7 +37,7 @@
 
 .ts-badge.is-secondary {
     background: var(--ts-gray-200);
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
 }
 
 /**
@@ -42,7 +47,7 @@
 .ts-badge.is-outlined {
     background: transparent;
     border-color: var(--ts-gray-300);
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
 }
 
 /**

diff --git a/src/box.css b/src/box.css
@@ -2,6 +2,12 @@
    Variables
    ========================================================================== */
 
+.ts-box {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+    --ts-indicator-color: var(--accent-color, var(--ts-gray-900));
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -14,8 +20,6 @@
     border-radius: 0.4rem;
     overflow: hidden;
     background: var(--ts-gray-50);
-
-    --ts-indicator-color: var(--ts-gray-900);
 }
 
 a.ts-box:hover {

diff --git a/src/breadcrumb.css b/src/breadcrumb.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-breadcrumb {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -72,7 +77,7 @@
  */
 
 .ts-breadcrumb .item.is-active {
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
     font-weight: 500;
 }
 

diff --git a/src/button.css b/src/button.css
@@ -14,6 +14,9 @@
 .ts-button {
     --horizontal-padding: 1.25em;
     --height: var(--ts-input-height-medium);
+
+    --accent-color: initial;
+    --accent-foreground-color: initial;
 }
 
 /* ==========================================================================
@@ -43,13 +46,13 @@
 }
 
 .ts-button {
-    border: 2px solid var(--ts-gray-800);
+    border: 2px solid var(--accent-color, var(--ts-gray-800));
     min-width: 75px;
     font-size: var(--ts-font-size-14px);
     line-height: 1.5;
     font-weight: 500;
-    color: var(--ts-gray-50);
-    background: var(--ts-gray-800);
+    color: var(--accent-foreground-color, var(--ts-gray-50));
+    background: var(--accent-color, var(--ts-gray-800));
     text-decoration: none;
     display: inline-flex;
     vertical-align: middle;
@@ -75,7 +78,7 @@
  */
 
 .ts-button.is-secondary {
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
     border-color: var(--ts-gray-100);
     background: var(--ts-gray-100);
 }
@@ -97,7 +100,7 @@
 .ts-button.is-outlined {
     background: transparent;
     border: 2px solid var(--ts-gray-300);
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
 }
 
 /**

diff --git a/src/checkbox.css b/src/checkbox.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-checkbox {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -53,8 +58,8 @@
 }
 
 .ts-checkbox input:checked {
-    background: var(--ts-primary-700);
-    border-color: var(--ts-primary-700);
+    background: var(--accent-color, var(--ts-primary-700));
+    border-color: var(--accent-color, var(--ts-primary-700));
 }
 
 .ts-checkbox input:focus {
@@ -82,7 +87,7 @@
     -webkit-font-smoothing: antialiased;
     backface-visibility: hidden;
     font-size: 1rem;
-    color: var(--ts-white);
+    color: var(--accent-foreground-color, var(--ts-white));
 }
 
 .ts-checkbox input:checked::after {

diff --git a/src/chip.css b/src/chip.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-chip {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -26,7 +31,7 @@
     line-height: 1.75;
     min-height: 22px;
     /*min-width: 55px;*/
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
 }
 
 .ts-chip.is-input,
@@ -96,31 +101,31 @@
  */
 
 .ts-chip.is-toggle input:checked + .content {
-    background: var(--ts-gray-800);
-    border-color: var(--ts-gray-800);
-    color: var(--ts-gray-50);
+    background: var(--accent-color, var(--ts-gray-800));
+    border-color: var(--accent-color, var(--ts-gray-800));
+    color: var(--accent-foreground-color, var(--ts-gray-50));
 }
 
 .ts-chip.is-toggle.is-secondary input:checked + .content {
-    color: var(--ts-gray-800);
+    color: var(--accent-color, var(--ts-gray-800));
     background: var(--ts-gray-200);
-    border-color: var(--ts-gray-600);
+    border-color: var(--accent-color, var(--ts-gray-600));
 }
 
 /**
  * Input
  */
 
 .ts-chip.is-input input:checked + .content {
-    background: var(--ts-primary-700);
-    border-color: var(--ts-primary-700);
-    color: var(--ts-white);
+    background: var(--accent-color, var(--ts-primary-700));
+    border-color: var(--accent-color, var(--ts-primary-700));
+    color: var(--accent-foreground-color, var(--ts-white));
 }
 
 .ts-chip.is-input.is-secondary input:checked + .content {
-    color: var(--ts-primary-600);
+    color: var(--accent-color, var(--ts-primary-600));
     background: var(--ts-gray-100);
-    border-color: var(--ts-primary-600);
+    border-color: var(--accent-color, var(--ts-primary-600));
 }
 
 .ts-chip.is-input input:checked + .content::before {

diff --git a/src/close.css b/src/close.css
@@ -2,6 +2,11 @@
    Variables
    ========================================================================== */
 
+.ts-close {
+    --accent-color: initial;
+    --accent-foreground-color: initial;
+}
+
 /* ==========================================================================
    Base
    ========================================================================== */
@@ -47,8 +52,8 @@
     width: 18px;
     font-size: var(--ts-font-size-12px);
     line-height: 1;
-    background: var(--ts-gray-600);
-    color: var(--ts-gray-100);
+    background: var(--accent-color, var(--ts-gray-600));
+    color: var(--accent-foreground-color, var(--ts-gray-100));
     border-radius: 100rem;
 }
 

diff --git a/src/container.css b/src/container.css
@@ -27,12 +27,9 @@
  * Fluid
  */
 
- .ts-container.is-relaxed {
+.ts-container.is-padded {
     --ts-container-gap: 2rem;
 }
-.ts-container.is-compact {
-    --ts-container-gap: 0.5rem;
-}
 .ts-container.is-fitted {
     --ts-container-gap: 0;
 }
@@ -52,6 +49,6 @@
  * Fluid
  */
 
- .ts-container.is-fluid {
+.ts-container.is-fluid {
     max-width: 100%;
 }