refactor: update details margin + padding tokens to match new design (#…

…259)
cds-snc · Apr 30, 2024 · 9019e9b · 9019e9b
1 parent 2071bb2
commit 9019e9b
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 20 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -1839,11 +1839,11 @@
           }
         },
         "margin": {
-          "value": "0.75rem 0 0 0",
+          "value": "0.75rem 0 0 0.75rem",
           "type": "spacing"
         },
         "padding": {
-          "value": "0.5625rem 2.25rem",
+          "value": "0.75rem 0.75rem 0.75rem 1.125rem",
           "type": "spacing"
         },
         "slotted": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -353,8 +353,8 @@
   --gcds-details-hover-decoration-thickness: 0.125rem;
   --gcds-details-panel-border-color: #7d828b;
   --gcds-details-panel-border-width: 0.375rem;
-  --gcds-details-panel-margin: 0.75rem 0 0 0;
-  --gcds-details-panel-padding: 0.5625rem 2.25rem;
+  --gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+  --gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -211,8 +211,8 @@
   --gcds-details-hover-decoration-thickness: 0.125rem;
   --gcds-details-panel-border-color: #7d828b;
   --gcds-details-panel-border-width: 0.375rem;
-  --gcds-details-panel-margin: 0.75rem 0 0 0;
-  --gcds-details-panel-padding: 0.5625rem 2.25rem;
+  --gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+  --gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/css/components/details.css b/build/web/css/components/details.css
@@ -17,8 +17,8 @@
   --gcds-details-hover-decoration-thickness: 0.125rem;
   --gcds-details-panel-border-color: #7d828b;
   --gcds-details-panel-border-width: 0.375rem;
-  --gcds-details-panel-margin: 0.75rem 0 0 0;
-  --gcds-details-panel-padding: 0.5625rem 2.25rem;
+  --gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+  --gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -353,8 +353,8 @@
   --gcds-details-hover-decoration-thickness: 0.125rem;
   --gcds-details-panel-border-color: #7d828b;
   --gcds-details-panel-border-width: 0.375rem;
-  --gcds-details-panel-margin: 0.75rem 0 0 0;
-  --gcds-details-panel-padding: 0.5625rem 2.25rem;
+  --gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+  --gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -351,8 +351,8 @@ $gcds-details-hover-text: #0535d2;
 $gcds-details-hover-decoration-thickness: 0.125rem;
 $gcds-details-panel-border-color: #7d828b;
 $gcds-details-panel-border-width: 0.375rem;
-$gcds-details-panel-margin: 0.75rem 0 0 0;
-$gcds-details-panel-padding: 0.5625rem 2.25rem;
+$gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+$gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -209,8 +209,8 @@ $gcds-details-hover-text: #0535d2;
 $gcds-details-hover-decoration-thickness: 0.125rem;
 $gcds-details-panel-border-color: #7d828b;
 $gcds-details-panel-border-width: 0.375rem;
-$gcds-details-panel-margin: 0.75rem 0 0 0;
-$gcds-details-panel-padding: 0.5625rem 2.25rem;
+$gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+$gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/scss/components/details.scss b/build/web/scss/components/details.scss
@@ -15,8 +15,8 @@ $gcds-details-hover-text: #0535d2;
 $gcds-details-hover-decoration-thickness: 0.125rem;
 $gcds-details-panel-border-color: #7d828b;
 $gcds-details-panel-border-width: 0.375rem;
-$gcds-details-panel-margin: 0.75rem 0 0 0;
-$gcds-details-panel-padding: 0.5625rem 2.25rem;
+$gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+$gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -351,8 +351,8 @@ $gcds-details-hover-text: #0535d2;
 $gcds-details-hover-decoration-thickness: 0.125rem;
 $gcds-details-panel-border-color: #7d828b;
 $gcds-details-panel-border-width: 0.375rem;
-$gcds-details-panel-margin: 0.75rem 0 0 0;
-$gcds-details-panel-padding: 0.5625rem 2.25rem;
+$gcds-details-panel-margin: 0.75rem 0 0 0.75rem;
+$gcds-details-panel-padding: 0.75rem 0.75rem 0.75rem 1.125rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;

diff --git a/tokens/components/details/tokens.json b/tokens/components/details/tokens.json
@@ -80,11 +80,11 @@
         }
       },
       "margin": {
-        "value": "{spacing.200.value} 0 0 0",
+        "value": "{spacing.200.value} 0 0 {spacing.200.value}",
         "type": "spacing"
       },
       "padding": {
-        "value": "{spacing.150.value} {spacing.450.value}",
+        "value": "{spacing.200.value} {spacing.200.value} {spacing.200.value} {spacing.300.value}",
         "type": "spacing"
       },
       "slotted": {