From cdfe524518cf249299963acc92b45436ae41b64a Mon Sep 17 00:00:00 2001
From: Takuya Matsuyama <hi@craftz.dog>
Date: Tue, 22 Oct 2024 12:55:51 +0900
Subject: [PATCH] feat(segments): add some variables for special types

---
 src/definitions/elements/segment.less | 6 +++---
 src/site/globals/site.overrides       | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less
index a153b3b..36a0de0 100644
--- a/src/definitions/elements/segment.less
+++ b/src/definitions/elements/segment.less
@@ -198,7 +198,7 @@
 .ui.piled.segments:before,
 .ui.piled.segment:after,
 .ui.piled.segment:before {
-  background-color: @white;
+  background-color: var(--piled-segments-background, @white);
   visibility: visible;
   content: '';
   display: block;
@@ -206,7 +206,7 @@
   left: 0px;
   position: absolute;
   width: 100%;
-  border: @piledBorder;
+  border: var(--piled-segments-border, 1px solid var(--border-color));
   box-shadow: @piledBoxShadow;
 }
 
@@ -261,7 +261,7 @@
   left: 0%;
 
   border-top: 1px solid @borderColor;
-  background: @stackedPageBackground;
+  background: var(--stacked-segment-page-background, @stackedPageBackground);
 
   width: 100%;
   height: @stackedHeight;
diff --git a/src/site/globals/site.overrides b/src/site/globals/site.overrides
index 233414f..db86cb4 100644
--- a/src/site/globals/site.overrides
+++ b/src/site/globals/site.overrides
@@ -1180,6 +1180,7 @@
     0 8px 12px -1px hsl(var(--hsl-neutral-900) / .03);
   --grouped-segment-group-border-radius: var(--default-border-radius);
   --grouped-segment-hover-background: var(--off-white);
+  --piled-segments-background: var(--subtle-transparent-black);
 
 
   /*-------------------
@@ -2238,6 +2239,9 @@ body.acrylic-window {
     0 8px 12px -1px hsl(var(--hsl-neutral-900) / .03);
   --grouped-segment-group-border-radius: var(--default-border-radius);
   --grouped-segment-hover-background: hsl(var(--hsl-neutral-800) / 80%);
+  --stacked-segment-page-background: var(var(--subtle-transparent-black));
+  --piled-segments-background: var(--strong-transparent-white);
+
   /*-------------------
         Form
   --------------------*/