Merge pull request #134 from cds-snc/add-border-to-container

Add border to container component
cds-snc · Jul 10, 2023 · d085566 · d085566
2 parents 0e3ec4f + 2cbd18a
commit d085566
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 31 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -255,6 +255,10 @@
         "value": "100%",
         "type": "sizing"
       },
+      "border": {
+        "value": "0.0625rem solid #7D828B",
+        "type": "border"
+      },
       "size": {
         "xs": {
           "value": "20rem",
@@ -269,11 +273,11 @@
           "type": "sizing"
         },
         "lg": {
-          "value": "64rem",
+          "value": "62rem",
           "type": "sizing"
         },
         "xl": {
-          "value": "75rem",
+          "value": "71.25rem",
           "type": "sizing"
         },
         "full": {
@@ -1118,7 +1122,7 @@
         "type": "color"
       },
       "border": {
-        "value": "0.0625rem solid #7D828B",
+        "value": "0.125rem solid #7D828B",
         "type": "border"
       },
       "borderRadius": {

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 12:42:15 GMT
+ * Generated on Thu, 06 Jul 2023 22:12:42 GMT
  */
 
 :root {
@@ -60,11 +60,12 @@
   --gcds-container-lg: 62rem;
   --gcds-container-xl: 71.25rem;
   --gcds-container-full: 100%;
+  --gcds-container-border: 0.0625rem solid #7d828b;
   --gcds-container-size-xs: 20rem;
   --gcds-container-size-sm: 30rem;
   --gcds-container-size-md: 48rem;
-  --gcds-container-size-lg: 64rem;
-  --gcds-container-size-xl: 75rem;
+  --gcds-container-size-lg: 62rem;
+  --gcds-container-size-xl: 71.25rem;
   --gcds-container-size-full: 100%;
   --gcds-container-spacing-0: 0;
   --gcds-container-spacing-50: 0.1875rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -1,14 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 12:42:15 GMT
+ * Generated on Thu, 06 Jul 2023 22:12:42 GMT
  */
 
 :root {
+  --gcds-container-border: 0.0625rem solid #7d828b;
   --gcds-container-size-xs: 20rem;
   --gcds-container-size-sm: 30rem;
   --gcds-container-size-md: 48rem;
-  --gcds-container-size-lg: 64rem;
-  --gcds-container-size-xl: 75rem;
+  --gcds-container-size-lg: 62rem;
+  --gcds-container-size-xl: 71.25rem;
   --gcds-container-size-full: 100%;
   --gcds-container-spacing-0: 0;
   --gcds-container-spacing-50: 0.1875rem;

diff --git a/build/web/css/components/container.css b/build/web/css/components/container.css
@@ -1,14 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Jun 2023 20:51:42 GMT
+ * Generated on Thu, 06 Jul 2023 22:12:42 GMT
  */
 
 :root {
+  --gcds-container-border: 0.0625rem solid #7d828b;
   --gcds-container-size-xs: 20rem;
   --gcds-container-size-sm: 30rem;
   --gcds-container-size-md: 48rem;
-  --gcds-container-size-lg: 64rem;
-  --gcds-container-size-xl: 75rem;
+  --gcds-container-size-lg: 62rem;
+  --gcds-container-size-xl: 71.25rem;
   --gcds-container-size-full: 100%;
   --gcds-container-spacing-0: 0;
   --gcds-container-spacing-50: 0.1875rem;

diff --git a/build/web/css/tokens.css b/build/web/css/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Jul 2023 12:42:15 GMT
+ * Generated on Thu, 06 Jul 2023 22:12:42 GMT
  */
 
 :root {
@@ -60,11 +60,12 @@
   --gcds-container-lg: 62rem;
   --gcds-container-xl: 71.25rem;
   --gcds-container-full: 100%;
+  --gcds-container-border: 0.0625rem solid #7d828b;
   --gcds-container-size-xs: 20rem;
   --gcds-container-size-sm: 30rem;
   --gcds-container-size-md: 48rem;
-  --gcds-container-size-lg: 64rem;
-  --gcds-container-size-xl: 75rem;
+  --gcds-container-size-lg: 62rem;
+  --gcds-container-size-xl: 71.25rem;
   --gcds-container-size-full: 100%;
   --gcds-container-spacing-0: 0;
   --gcds-container-spacing-50: 0.1875rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 12:42:15 GMT
+// Generated on Thu, 06 Jul 2023 22:12:42 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -58,11 +58,12 @@ $gcds-container-md: 48rem;
 $gcds-container-lg: 62rem;
 $gcds-container-xl: 71.25rem;
 $gcds-container-full: 100%;
+$gcds-container-border: 0.0625rem solid #7d828b;
 $gcds-container-size-xs: 20rem;
 $gcds-container-size-sm: 30rem;
 $gcds-container-size-md: 48rem;
-$gcds-container-size-lg: 64rem;
-$gcds-container-size-xl: 75rem;
+$gcds-container-size-lg: 62rem;
+$gcds-container-size-xl: 71.25rem;
 $gcds-container-size-full: 100%;
 $gcds-container-spacing-0: 0;
 $gcds-container-spacing-50: 0.1875rem;
@@ -657,4 +658,4 @@ $gcds-verify-banner-summary-padding: 0.75rem;
 $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0;
 $gcds-verify-banner-text: #333333;
 $gcds-verify-banner-toggle-text: #2b4380;
-$gcds-verify-banner-toggle-font-weight: 700;
+$gcds-verify-banner-toggle-font-weight: 700;
diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -1,12 +1,13 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 12:42:15 GMT
+// Generated on Thu, 06 Jul 2023 22:12:42 GMT
 
+$gcds-container-border: 0.0625rem solid #7d828b;
 $gcds-container-size-xs: 20rem;
 $gcds-container-size-sm: 30rem;
 $gcds-container-size-md: 48rem;
-$gcds-container-size-lg: 64rem;
-$gcds-container-size-xl: 75rem;
+$gcds-container-size-lg: 62rem;
+$gcds-container-size-xl: 71.25rem;
 $gcds-container-size-full: 100%;
 $gcds-container-spacing-0: 0;
 $gcds-container-spacing-50: 0.1875rem;
@@ -546,4 +547,4 @@ $gcds-verify-banner-summary-padding: 0.75rem;
 $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0;
 $gcds-verify-banner-text: #333333;
 $gcds-verify-banner-toggle-text: #2b4380;
-$gcds-verify-banner-toggle-font-weight: 700;
+$gcds-verify-banner-toggle-font-weight: 700;
diff --git a/build/web/scss/components/container.scss b/build/web/scss/components/container.scss
@@ -1,12 +1,13 @@
 
 // Do not edit directly
-// Generated on Thu, 29 Jun 2023 20:51:42 GMT
+// Generated on Thu, 06 Jul 2023 22:12:42 GMT
 
+$gcds-container-border: 0.0625rem solid #7d828b;
 $gcds-container-size-xs: 20rem;
 $gcds-container-size-sm: 30rem;
 $gcds-container-size-md: 48rem;
-$gcds-container-size-lg: 64rem;
-$gcds-container-size-xl: 75rem;
+$gcds-container-size-lg: 62rem;
+$gcds-container-size-xl: 71.25rem;
 $gcds-container-size-full: 100%;
 $gcds-container-spacing-0: 0;
 $gcds-container-spacing-50: 0.1875rem;

diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 04 Jul 2023 12:42:15 GMT
+// Generated on Thu, 06 Jul 2023 22:12:42 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -58,11 +58,12 @@ $gcds-container-md: 48rem;
 $gcds-container-lg: 62rem;
 $gcds-container-xl: 71.25rem;
 $gcds-container-full: 100%;
+$gcds-container-border: 0.0625rem solid #7d828b;
 $gcds-container-size-xs: 20rem;
 $gcds-container-size-sm: 30rem;
 $gcds-container-size-md: 48rem;
-$gcds-container-size-lg: 64rem;
-$gcds-container-size-xl: 75rem;
+$gcds-container-size-lg: 62rem;
+$gcds-container-size-xl: 71.25rem;
 $gcds-container-size-full: 100%;
 $gcds-container-spacing-0: 0;
 $gcds-container-spacing-50: 0.1875rem;
@@ -657,4 +658,4 @@ $gcds-verify-banner-summary-padding: 0.75rem;
 $gcds-verify-banner-summary-content-margin: 0 1.125rem 0 0;
 $gcds-verify-banner-text: #333333;
 $gcds-verify-banner-toggle-text: #2b4380;
-$gcds-verify-banner-toggle-font-weight: 700;
+$gcds-verify-banner-toggle-font-weight: 700;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cdssnc/gcds-tokens",
-  "version": "1.4.0",
+  "version": "1.4.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/container/tokens.json b/tokens/components/container/tokens.json
@@ -1,5 +1,9 @@
 {
   "container": {
+    "border": {
+      "value": "{border.width.sm.value} solid {border.default.value}",
+      "type": "border"
+    },
     "size": {
       "xs": {
         "value": "{container.xs.value}",