feat: Start button component tokens (#416)

Author: ethanWallace

build/figma/figma.tokens.json

@@ -81,6 +81,10 @@
         "700": {
           "value": "#03662A",
           "type": "color"
+        },
+        "800": {
+          "value": "#023b1a",
+          "type": "color"
         }
       },
       "purple": {
@@ -1464,16 +1468,36 @@
         }
       },
       "font": {
-        "value": {
-          "fontFamily": "'Noto Sans', sans-serif",
-          "fontWeight": "500",
-          "lineHeight": "140%",
-          "fontSize": "1.25rem"
+        "-": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
         },
-        "type": "typography"
+        "desktop": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
+        },
+        "mobile": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.125rem"
+          },
+          "type": "typography"
+        }
       },
       "padding": {
-        "value": "0.625rem 0.75rem",
+        "value": "0.625rem 1rem",
         "type": "spacing"
       },
       "primary": {
@@ -1567,21 +1591,87 @@
           "text": {
             "value": "#545961",
             "type": "color"
+          },
+          "opacity": {
+            "value": "50%",
+            "type": "other"
           }
         }
       },
       "small": {
         "font": {
-          "value": {
-            "fontFamily": "'Noto Sans', sans-serif",
-            "fontWeight": "400",
-            "lineHeight": "160%",
-            "fontSize": "80%"
+          "-": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "160%",
+              "fontSize": "80%"
+            },
+            "type": "typography"
           },
-          "type": "typography"
+          "desktop": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "155%",
+              "fontSize": "1.125rem"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "150%",
+              "fontSize": "1rem"
+            },
+            "type": "typography"
+          }
         },
         "padding": {
-          "value": "0.75rem",
+          "value": "0.375rem 1rem",
+          "type": "spacing"
+        }
+      },
+      "start": {
+        "default": {
+          "background": {
+            "value": "#03662A",
+            "type": "color"
+          },
+          "text": {
+            "value": "#FFF",
+            "type": "color"
+          }
+        },
+        "hover": {
+          "background": {
+            "value": "#023b1a",
+            "type": "color"
+          }
+        },
+        "font": {
+          "desktop": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "600",
+              "lineHeight": "145%",
+              "fontSize": "1.375rem"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "500",
+              "lineHeight": "140%",
+              "fontSize": "1.25rem"
+            },
+            "type": "typography"
+          }
+        },
+        "padding": {
+          "value": "0.75rem 2rem",
           "type": "spacing"
         }
       },

build/tailwind/tailwind.tokens.json

@@ -81,6 +81,10 @@
         "700": {
           "value": "#03662A",
           "type": "color"
+        },
+        "800": {
+          "value": "#023b1a",
+          "type": "color"
         }
       },
       "purple": {
@@ -1464,16 +1468,36 @@
         }
       },
       "font": {
-        "value": {
-          "fontFamily": "'Noto Sans', sans-serif",
-          "fontWeight": "500",
-          "lineHeight": "140%",
-          "fontSize": "1.25rem"
+        "-": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
         },
-        "type": "typography"
+        "desktop": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.25rem"
+          },
+          "type": "typography"
+        },
+        "mobile": {
+          "value": {
+            "fontFamily": "'Noto Sans', sans-serif",
+            "fontWeight": "500",
+            "lineHeight": "140%",
+            "fontSize": "1.125rem"
+          },
+          "type": "typography"
+        }
       },
       "padding": {
-        "value": "0.625rem 0.75rem",
+        "value": "0.625rem 1rem",
         "type": "spacing"
       },
       "primary": {
@@ -1567,21 +1591,87 @@
           "text": {
             "value": "#545961",
             "type": "color"
+          },
+          "opacity": {
+            "value": "50%",
+            "type": "other"
           }
         }
       },
       "small": {
         "font": {
-          "value": {
-            "fontFamily": "'Noto Sans', sans-serif",
-            "fontWeight": "400",
-            "lineHeight": "160%",
-            "fontSize": "80%"
+          "-": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "160%",
+              "fontSize": "80%"
+            },
+            "type": "typography"
           },
-          "type": "typography"
+          "desktop": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "155%",
+              "fontSize": "1.125rem"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "400",
+              "lineHeight": "150%",
+              "fontSize": "1rem"
+            },
+            "type": "typography"
+          }
         },
         "padding": {
-          "value": "0.75rem",
+          "value": "0.375rem 1rem",
+          "type": "spacing"
+        }
+      },
+      "start": {
+        "default": {
+          "background": {
+            "value": "#03662A",
+            "type": "color"
+          },
+          "text": {
+            "value": "#FFF",
+            "type": "color"
+          }
+        },
+        "hover": {
+          "background": {
+            "value": "#023b1a",
+            "type": "color"
+          }
+        },
+        "font": {
+          "desktop": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "600",
+              "lineHeight": "145%",
+              "fontSize": "1.375rem"
+            },
+            "type": "typography"
+          },
+          "mobile": {
+            "value": {
+              "fontFamily": "'Noto Sans', sans-serif",
+              "fontWeight": "500",
+              "lineHeight": "140%",
+              "fontSize": "1.25rem"
+            },
+            "type": "typography"
+          }
+        },
+        "padding": {
+          "value": "0.75rem 2rem",
           "type": "spacing"
         }
       },

build/web/css/base.css

@@ -22,6 +22,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-green-800: #023b1a;
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;

build/web/css/base/color.css

@@ -22,6 +22,7 @@
   --gcds-color-green-100: #e6f6ec;
   --gcds-color-green-500: #289f58; /* Must contrast 3:1 with white */
   --gcds-color-green-700: #03662a; /* Must contrast 7:1 with white */
+  --gcds-color-green-800: #023b1a;
   --gcds-color-purple-700: #7532b8; /* Must contrast 7:1 with white */
   --gcds-color-orange-700: #be5a00; /* Must contrast 7:1 with white */
   --gcds-color-red-100: #fbddda;

build/web/css/components.css

@@ -138,8 +138,10 @@
   --gcds-button-danger-default-background: #a62a1e;
   --gcds-button-danger-default-text: #ffffff;
   --gcds-button-danger-hover-background: #822117;
-  --gcds-button-font: 500 1.25rem/140% 'Noto Sans', sans-serif;
-  --gcds-button-padding: 0.625rem 0.75rem;
+  --gcds-button-font: 500 1.25rem/140% 'Noto Sans', sans-serif; /* To be removed in anouther PR */
+  --gcds-button-font-desktop: 500 1.25rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-font-mobile: 500 1.125rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-padding: 0.625rem 1rem;
   --gcds-button-primary-default-background: #26374a;
   --gcds-button-primary-default-text: #ffffff;
   --gcds-button-primary-hover-background: #2b4380;
@@ -155,10 +157,19 @@
   --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.25rem;
   --gcds-button-shared-focus-text: #ffffff;
-  --gcds-button-shared-disabled-background: #d6d9dd;
-  --gcds-button-shared-disabled-text: #545961;
-  --gcds-button-small-font: 400 80%/160% 'Noto Sans', sans-serif;
-  --gcds-button-small-padding: 0.75rem;
+  --gcds-button-shared-disabled-background: #d6d9dd; /* To be removed in anouther PR */
+  --gcds-button-shared-disabled-text: #545961; /* To be removed in anouther PR */
+  --gcds-button-shared-disabled-opacity: 50%;
+  --gcds-button-small-font: 400 80%/160% 'Noto Sans', sans-serif; /* To be removed in anouther PR */
+  --gcds-button-small-font-desktop: 400 1.125rem/155% 'Noto Sans', sans-serif;
+  --gcds-button-small-font-mobile: 400 1rem/150% 'Noto Sans', sans-serif;
+  --gcds-button-small-padding: 0.375rem 1rem;
+  --gcds-button-start-default-background: #03662a;
+  --gcds-button-start-default-text: #ffffff;
+  --gcds-button-start-hover-background: #023b1a;
+  --gcds-button-start-font-desktop: 600 1.375rem/145% 'Noto Sans', sans-serif;
+  --gcds-button-start-font-mobile: 500 1.25rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-start-padding: 0.75rem 2rem;
   --gcds-button-width: fit-content;
   --gcds-card-background-color: #ffffff;
   --gcds-card-box-shadow: 0 0.125rem 0.5rem 0.125rem #00000019;

build/web/css/components/button.css

@@ -8,8 +8,10 @@
   --gcds-button-danger-default-background: #a62a1e;
   --gcds-button-danger-default-text: #ffffff;
   --gcds-button-danger-hover-background: #822117;
-  --gcds-button-font: 500 1.25rem/140% 'Noto Sans', sans-serif;
-  --gcds-button-padding: 0.625rem 0.75rem;
+  --gcds-button-font: 500 1.25rem/140% 'Noto Sans', sans-serif; /* To be removed in anouther PR */
+  --gcds-button-font-desktop: 500 1.25rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-font-mobile: 500 1.125rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-padding: 0.625rem 1rem;
   --gcds-button-primary-default-background: #26374a;
   --gcds-button-primary-default-text: #ffffff;
   --gcds-button-primary-hover-background: #2b4380;
@@ -25,9 +27,18 @@
   --gcds-button-shared-focus-box-shadow: 0 0 0 0.125rem #ffffff;
   --gcds-button-shared-focus-outline-width: 0.25rem;
   --gcds-button-shared-focus-text: #ffffff;
-  --gcds-button-shared-disabled-background: #d6d9dd;
-  --gcds-button-shared-disabled-text: #545961;
-  --gcds-button-small-font: 400 80%/160% 'Noto Sans', sans-serif;
-  --gcds-button-small-padding: 0.75rem;
+  --gcds-button-shared-disabled-background: #d6d9dd; /* To be removed in anouther PR */
+  --gcds-button-shared-disabled-text: #545961; /* To be removed in anouther PR */
+  --gcds-button-shared-disabled-opacity: 50%;
+  --gcds-button-small-font: 400 80%/160% 'Noto Sans', sans-serif; /* To be removed in anouther PR */
+  --gcds-button-small-font-desktop: 400 1.125rem/155% 'Noto Sans', sans-serif;
+  --gcds-button-small-font-mobile: 400 1rem/150% 'Noto Sans', sans-serif;
+  --gcds-button-small-padding: 0.375rem 1rem;
+  --gcds-button-start-default-background: #03662a;
+  --gcds-button-start-default-text: #ffffff;
+  --gcds-button-start-hover-background: #023b1a;
+  --gcds-button-start-font-desktop: 600 1.375rem/145% 'Noto Sans', sans-serif;
+  --gcds-button-start-font-mobile: 500 1.25rem/140% 'Noto Sans', sans-serif;
+  --gcds-button-start-padding: 0.75rem 2rem;
   --gcds-button-width: fit-content;
 }