Details update (#150)

* Details a11y update * Update version to 1.6.1
cds-snc · Aug 31, 2023 · 1766ece · 1766ece
1 parent 3a71c4c
commit 1766ece
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 49 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -1473,7 +1473,7 @@
           }
         },
         "margin": {
-          "value": "0.375rem 0 0 0",
+          "value": "0.75rem 0 0 0",
           "type": "spacing"
         },
         "padding": {
@@ -1513,14 +1513,8 @@
           }
         },
         "padding": {
-          "value": "0.375rem",
+          "value": "0.375rem 0.375rem 0.375rem 2.25rem",
           "type": "spacing"
-        },
-        "text": {
-          "margin": {
-            "value": "0 0 0 2.25rem",
-            "type": "spacing"
-          }
         }
       }
     },

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 23 Aug 2023 14:12:27 GMT
+ * Generated on Wed, 30 Aug 2023 19:06:21 GMT
  */
 
 :root {
@@ -288,16 +288,15 @@
   --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.375rem 0 0 0;
+  --gcds-details-panel-margin: 0.75rem 0 0 0;
   --gcds-details-panel-padding: 0.5625rem 2.25rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
   --gcds-details-summary-arrow-left: 0.375rem;
   --gcds-details-summary-arrow-top: 0.5625rem;
   --gcds-details-summary-border-width: 0.0625rem;
-  --gcds-details-summary-padding: 0.375rem;
-  --gcds-details-summary-text-margin: 0 0 0 2.25rem;
+  --gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
   --gcds-error-message-background: #fbddda;
   --gcds-error-message-border-color: #d3080c;
   --gcds-error-message-border-width: 0.125rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 23 Aug 2023 14:12:27 GMT
+ * Generated on Wed, 30 Aug 2023 19:06:21 GMT
  */
 
 :root {
@@ -177,16 +177,15 @@
   --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.375rem 0 0 0;
+  --gcds-details-panel-margin: 0.75rem 0 0 0;
   --gcds-details-panel-padding: 0.5625rem 2.25rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
   --gcds-details-summary-arrow-left: 0.375rem;
   --gcds-details-summary-arrow-top: 0.5625rem;
   --gcds-details-summary-border-width: 0.0625rem;
-  --gcds-details-summary-padding: 0.375rem;
-  --gcds-details-summary-text-margin: 0 0 0 2.25rem;
+  --gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
   --gcds-error-message-background: #fbddda;
   --gcds-error-message-border-color: #d3080c;
   --gcds-error-message-border-width: 0.125rem;

diff --git a/build/web/css/components/details.css b/build/web/css/components/details.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 19 Jun 2023 20:28:18 GMT
+ * Generated on Wed, 30 Aug 2023 19:06:21 GMT
  */
 
 :root {
@@ -18,14 +18,13 @@
   --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.375rem 0 0 0;
+  --gcds-details-panel-margin: 0.75rem 0 0 0;
   --gcds-details-panel-padding: 0.5625rem 2.25rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
   --gcds-details-summary-arrow-left: 0.375rem;
   --gcds-details-summary-arrow-top: 0.5625rem;
   --gcds-details-summary-border-width: 0.0625rem;
-  --gcds-details-summary-padding: 0.375rem;
-  --gcds-details-summary-text-margin: 0 0 0 2.25rem;
+  --gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
 }
diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 23 Aug 2023 14:12:27 GMT
+ * Generated on Wed, 30 Aug 2023 19:06:21 GMT
  */
 
 :root {
@@ -288,16 +288,15 @@
   --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.375rem 0 0 0;
+  --gcds-details-panel-margin: 0.75rem 0 0 0;
   --gcds-details-panel-padding: 0.5625rem 2.25rem;
   --gcds-details-panel-slotted-margin: 1.5rem;
   --gcds-details-summary-arrow-border-left: 0.9375rem;
   --gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
   --gcds-details-summary-arrow-left: 0.375rem;
   --gcds-details-summary-arrow-top: 0.5625rem;
   --gcds-details-summary-border-width: 0.0625rem;
-  --gcds-details-summary-padding: 0.375rem;
-  --gcds-details-summary-text-margin: 0 0 0 2.25rem;
+  --gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
   --gcds-error-message-background: #fbddda;
   --gcds-error-message-border-color: #d3080c;
   --gcds-error-message-border-width: 0.125rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 23 Aug 2023 14:12:27 GMT
+// Generated on Wed, 30 Aug 2023 19:06:21 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -286,16 +286,15 @@ $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.375rem 0 0 0;
+$gcds-details-panel-margin: 0.75rem 0 0 0;
 $gcds-details-panel-padding: 0.5625rem 2.25rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
 $gcds-details-summary-arrow-left: 0.375rem;
 $gcds-details-summary-arrow-top: 0.5625rem;
 $gcds-details-summary-border-width: 0.0625rem;
-$gcds-details-summary-padding: 0.375rem;
-$gcds-details-summary-text-margin: 0 0 0 2.25rem;
+$gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
 $gcds-error-message-background: #fbddda;
 $gcds-error-message-border-color: #d3080c;
 $gcds-error-message-border-width: 0.125rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 23 Aug 2023 14:12:27 GMT
+// Generated on Wed, 30 Aug 2023 19:06:21 GMT
 
 $gcds-container-border: 0.0625rem solid #7d828b;
 $gcds-container-size-xs: 20rem;
@@ -175,16 +175,15 @@ $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.375rem 0 0 0;
+$gcds-details-panel-margin: 0.75rem 0 0 0;
 $gcds-details-panel-padding: 0.5625rem 2.25rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
 $gcds-details-summary-arrow-left: 0.375rem;
 $gcds-details-summary-arrow-top: 0.5625rem;
 $gcds-details-summary-border-width: 0.0625rem;
-$gcds-details-summary-padding: 0.375rem;
-$gcds-details-summary-text-margin: 0 0 0 2.25rem;
+$gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
 $gcds-error-message-background: #fbddda;
 $gcds-error-message-border-color: #d3080c;
 $gcds-error-message-border-width: 0.125rem;

diff --git a/build/web/scss/components/details.scss b/build/web/scss/components/details.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 19 Jun 2023 20:28:18 GMT
+// Generated on Wed, 30 Aug 2023 19:06:21 GMT
 
 $gcds-details-default-text: #2b4380;
 $gcds-details-default-decoration-thickness: 0.0625rem;
@@ -16,13 +16,12 @@ $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.375rem 0 0 0;
+$gcds-details-panel-margin: 0.75rem 0 0 0;
 $gcds-details-panel-padding: 0.5625rem 2.25rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
 $gcds-details-summary-arrow-left: 0.375rem;
 $gcds-details-summary-arrow-top: 0.5625rem;
 $gcds-details-summary-border-width: 0.0625rem;
-$gcds-details-summary-padding: 0.375rem;
-$gcds-details-summary-text-margin: 0 0 0 2.25rem;
+$gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 23 Aug 2023 14:12:27 GMT
+// Generated on Wed, 30 Aug 2023 19:06:21 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -286,16 +286,15 @@ $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.375rem 0 0 0;
+$gcds-details-panel-margin: 0.75rem 0 0 0;
 $gcds-details-panel-padding: 0.5625rem 2.25rem;
 $gcds-details-panel-slotted-margin: 1.5rem;
 $gcds-details-summary-arrow-border-left: 0.9375rem;
 $gcds-details-summary-arrow-border-top-bottom: 0.5625rem;
 $gcds-details-summary-arrow-left: 0.375rem;
 $gcds-details-summary-arrow-top: 0.5625rem;
 $gcds-details-summary-border-width: 0.0625rem;
-$gcds-details-summary-padding: 0.375rem;
-$gcds-details-summary-text-margin: 0 0 0 2.25rem;
+$gcds-details-summary-padding: 0.375rem 0.375rem 0.375rem 2.25rem;
 $gcds-error-message-background: #fbddda;
 $gcds-error-message-border-color: #d3080c;
 $gcds-error-message-border-width: 0.125rem;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-tokens",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "author": "Government of Canada | Gouvernement du Canada",
   "description": "GC Design System Tokens",
   "homepage": "https://design-system.alpha.canada.ca/",

diff --git a/tokens/components/details/tokens.json b/tokens/components/details/tokens.json
@@ -80,7 +80,7 @@
         }
       },
       "margin": {
-        "value": "{spacing.100.value} 0 0 0",
+        "value": "{spacing.200.value} 0 0 0",
         "type": "spacing"
       },
       "padding": {
@@ -120,14 +120,8 @@
         }
       },
       "padding": {
-        "value": "{spacing.100.value}",
+        "value": "{spacing.100.value} {spacing.100.value} {spacing.100.value} {spacing.450.value}",
         "type": "spacing"
-      },
-      "text": {
-        "margin": {
-          "value": "0 0 0 {spacing.450.value}",
-          "type": "spacing"
-        }
       }
     }
   }