Updated disclosure and accordion borders

gsoft-inc · Nov 29, 2024 · 43b43b9 · 43b43b9
1 parent 5188d36
commit 43b43b9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/components/src/Accordion/src/Accordion.module.css b/packages/components/src/Accordion/src/Accordion.module.css
@@ -48,3 +48,7 @@
     border-end-start-radius: var(--disclosure-border-radius-size);
     border-end-end-radius: var(--disclosure-border-radius-size);
 }
+
+.hop-Accordion__disclosure:last-child .hop-Accordion__disclosure-panel {
+    border-block-end-width: var(--disclosure-last-child-border-block-end-size);
+}
diff --git a/packages/components/src/Disclosure/src/Disclosure.module.css b/packages/components/src/Disclosure/src/Disclosure.module.css
@@ -18,9 +18,9 @@
     /* Inline */
     --hop-Disclosure-inline-border-radius: 0;
     --hop-Disclosure-inline-box-shadow: none;
-    --hop-Disclosure-inline-panel-border-size: 0;
-    --hop-Disclosure-inline-panel-border-size-expanded: 0;
-    --hop-Disclosure-inline-panel-border-color: transparent;
+    --hop-Disclosure-inline-panel-border-size: 0 0 var(--hop-space-10) 0;
+    --hop-Disclosure-inline-panel-border-size-expanded: 0 0 var(--hop-space-10) 0;
+    --hop-Disclosure-inline-panel-border-color: var(--hop-neutral-border-weak);
 
     /* Disabled */
     --hop-Disclosure-box-shadow-disabled: none;
@@ -30,6 +30,7 @@
     --panel-background-color: var(--hop-Disclosure-panel-background-color);
     --panel-padding: var(--hop-Disclosure-panel-padding);
     --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size);
+    --panel-border-color: var(--hop-Disclosure-standalone-panel-border-color);
 
     box-sizing: border-box;
     border-radius: var(--border-radius);
@@ -55,12 +56,12 @@
 
 .hop-Disclosure:has(.hop-Disclosure__header)[data-expanded] {
     --panel-border-size: var(--hop-Disclosure-standalone-panel-border-size-expanded);
-    --panel-border-color: var(--hop-Disclosure-standalone-panel-border-color);
     --panel-padding: var(--hop-Disclosure-with-header-panel-padding);
 }
 
 .hop-Disclosure--inline {
     --panel-border-size: var(--hop-Disclosure-inline-panel-border-size);
+    --panel-border-color: var(--hop-Disclosure-inline-panel-border-color);
 }
 
 .hop-Disclosure--inline:has(.hop-Disclosure__header) {
@@ -70,7 +71,6 @@
 
 .hop-Disclosure--inline:has(.hop-Disclosure__header)[data-expanded] {
     --panel-border-size: var(--hop-Disclosure-inline-panel-border-size-expanded);
-    --panel-border-color: var(--hop-Disclosure-inline-panel-border-color);
 }
 
 .hop-Disclosure[data-disabled] {

diff --git a/packages/components/src/Disclosure/src/DisclosureHeader.module.css b/packages/components/src/Disclosure/src/DisclosureHeader.module.css
@@ -21,8 +21,8 @@
     /* Inline */
     --hop-DisclosureHeader-inline-outline-size: 0;
     --hop-DisclosureHeader-inline-outline-color: transparent;
-    --hop-DisclosureHeader-inline-border-size: 0 0 var(--hop-space-10) 0;
-    --hop-DisclosureHeader-inline-border-color: var(--hop-neutral-border-weak);
+    --hop-DisclosureHeader-inline-border-size: 0;
+    --hop-DisclosureHeader-inline-border-color: transparent;
     --hop-DisclosureHeader-inline-border-radius: 0;
 
     /* Expanded */