Skip to content

Commit

Permalink
Add component tokens for gcds-topic-menu (#145)
Browse files Browse the repository at this point in the history
* Add component tokens for gcds-topic-menu

* Update package version

* Update border tokens + add missing border tokens
  • Loading branch information
ethanWallace authored Aug 23, 2023
1 parent bda920d commit dcfffc2
Show file tree
Hide file tree
Showing 11 changed files with 1,414 additions and 10 deletions.
400 changes: 400 additions & 0 deletions build/figma/figma.tokens.json

Large diffs are not rendered by default.

75 changes: 74 additions & 1 deletion build/web/css/.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 23 Aug 2023 01:41:47 GMT
* Generated on Wed, 23 Aug 2023 14:12:27 GMT
*/

:root {
Expand Down Expand Up @@ -665,6 +665,79 @@
--gcds-textarea-padding: 0.75rem;
--gcds-top-nav-background: #f1f2f3;
--gcds-top-nav-max-width: 71.25rem;
--gcds-topic-menu-border-width: 0.0625rem;
--gcds-topic-menu-button-background: #26374a;
--gcds-topic-menu-button-border: #26374a;
--gcds-topic-menu-button-expanded-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-border-color: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-text: #ffffff;
--gcds-topic-menu-button-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-button-home-background: #ffffff;
--gcds-topic-menu-button-home-border-color: #ffffff;
--gcds-topic-menu-button-home-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-button-padding: 0.75rem 1.125rem;
--gcds-topic-menu-button-text: #ffffff;
--gcds-topic-menu-focus-background: #0535d2;
--gcds-topic-menu-focus-text: #ffffff;
--gcds-topic-menu-focus-border-radius: 0.1875rem;
--gcds-topic-menu-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-topic-menu-focus-outline-offset: 0.125rem;
--gcds-topic-menu-focus-outline: 0.1875rem solid #0535d2;
--gcds-topic-menu-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-max-width: 71.25rem;
--gcds-topic-menu-menuitem-border-block-end: #545961;
--gcds-topic-menu-menuitem-border-inline-end: #ffffff;
--gcds-topic-menu-menuitem-expanded-background: #ffffff;
--gcds-topic-menu-menuitem-expanded-text: #333333;
--gcds-topic-menu-menuitem-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-menuitem-padding: 0.9375rem 1.5rem;
--gcds-topic-menu-menuitem-text: #ffffff;
--gcds-topic-menu-menuitem-text-underline-offset: 0.25rem;
--gcds-topic-menu-menuitem-width: 22.5rem;
--gcds-topic-menu-mobile-item-expanded-margin-inline-start: 3.75rem;
--gcds-topic-menu-mobile-item-expanded-padding-inline-start: 3.75rem;
--gcds-topic-menu-mobile-menuitem-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-border: #a8adb4;
--gcds-topic-menu-mobile-mostrequested-expanded-margin-inline-start: 6rem;
--gcds-topic-menu-mobile-mostrequested-hover-text: #000000;
--gcds-topic-menu-mobile-themelist-border: #f1f2f3;
--gcds-topic-menu-mobile-themelist-margin-block-start: 3rem;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-border: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-hover-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-mobile-topiclist-menuitem-border-block-end: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-menuitem-haspopup-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mobile-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-mobile-topiclist-menuitem-padding: 0.9375rem 1.5rem 0.9375rem 0;
--gcds-topic-menu-mostrequested-item-first-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mostrequested-item-last-margin-block-start: 0.9375rem;
--gcds-topic-menu-mostrequested-item-width: 100%;
--gcds-topic-menu-themelist-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-item-border: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-text: #ffffff;
--gcds-topic-menu-themelist-width: 100%;
--gcds-topic-menu-topiclist-background: #ffffff;
--gcds-topic-menu-topiclist-border: #d6d9dd;
--gcds-topic-menu-topiclist-box-shadow: 0.5625rem 0.5625rem 0.5625rem 0.375rem rgba(0,0,0,.1);
--gcds-topic-menu-topiclist-item-first-font: 700 2.00225830078125rem/124.85901539399482% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-item-first-margin-block-end: 2.25rem;
--gcds-topic-menu-topiclist-item-first-width: 100%;
--gcds-topic-menu-topiclist-item-last-left: 25rem;
--gcds-topic-menu-topiclist-item-last-top: 6rem;
--gcds-topic-menu-topiclist-left: 22.5rem;
--gcds-topic-menu-topiclist-margin-block-end: 1.5rem;
--gcds-topic-menu-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-topiclist-menuitem-hover-text-decoration-thickness: 0.125rem;
--gcds-topic-menu-topiclist-menuitem-padding: 0.375rem 0;
--gcds-topic-menu-topiclist-menuitem-popup-font: 700 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-menuitem-popup-text: #000000;
--gcds-topic-menu-topiclist-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-topiclist-min-height: 49.1825rem;
--gcds-topic-menu-topiclist-padding: 0 2.25rem 1.5rem 2.25rem;
--gcds-topic-menu-topiclist-text: #000000;
--gcds-topic-menu-topiclist-width: calc(100% - 22.5rem);
--gcds-verify-banner-background: #d6d9dd;
--gcds-verify-banner-container-xs: 20rem;
--gcds-verify-banner-container-sm: 30rem;
Expand Down
75 changes: 74 additions & 1 deletion build/web/css/components.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Wed, 23 Aug 2023 01:41:47 GMT
* Generated on Wed, 23 Aug 2023 14:12:27 GMT
*/

:root {
Expand Down Expand Up @@ -554,6 +554,79 @@
--gcds-textarea-padding: 0.75rem;
--gcds-top-nav-background: #f1f2f3;
--gcds-top-nav-max-width: 71.25rem;
--gcds-topic-menu-border-width: 0.0625rem;
--gcds-topic-menu-button-background: #26374a;
--gcds-topic-menu-button-border: #26374a;
--gcds-topic-menu-button-expanded-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-border-color: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-text: #ffffff;
--gcds-topic-menu-button-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-button-home-background: #ffffff;
--gcds-topic-menu-button-home-border-color: #ffffff;
--gcds-topic-menu-button-home-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-button-padding: 0.75rem 1.125rem;
--gcds-topic-menu-button-text: #ffffff;
--gcds-topic-menu-focus-background: #0535d2;
--gcds-topic-menu-focus-text: #ffffff;
--gcds-topic-menu-focus-border-radius: 0.1875rem;
--gcds-topic-menu-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-topic-menu-focus-outline-offset: 0.125rem;
--gcds-topic-menu-focus-outline: 0.1875rem solid #0535d2;
--gcds-topic-menu-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-max-width: 71.25rem;
--gcds-topic-menu-menuitem-border-block-end: #545961;
--gcds-topic-menu-menuitem-border-inline-end: #ffffff;
--gcds-topic-menu-menuitem-expanded-background: #ffffff;
--gcds-topic-menu-menuitem-expanded-text: #333333;
--gcds-topic-menu-menuitem-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-menuitem-padding: 0.9375rem 1.5rem;
--gcds-topic-menu-menuitem-text: #ffffff;
--gcds-topic-menu-menuitem-text-underline-offset: 0.25rem;
--gcds-topic-menu-menuitem-width: 22.5rem;
--gcds-topic-menu-mobile-item-expanded-margin-inline-start: 3.75rem;
--gcds-topic-menu-mobile-item-expanded-padding-inline-start: 3.75rem;
--gcds-topic-menu-mobile-menuitem-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-border: #a8adb4;
--gcds-topic-menu-mobile-mostrequested-expanded-margin-inline-start: 6rem;
--gcds-topic-menu-mobile-mostrequested-hover-text: #000000;
--gcds-topic-menu-mobile-themelist-border: #f1f2f3;
--gcds-topic-menu-mobile-themelist-margin-block-start: 3rem;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-border: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-hover-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-mobile-topiclist-menuitem-border-block-end: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-menuitem-haspopup-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mobile-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-mobile-topiclist-menuitem-padding: 0.9375rem 1.5rem 0.9375rem 0;
--gcds-topic-menu-mostrequested-item-first-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mostrequested-item-last-margin-block-start: 0.9375rem;
--gcds-topic-menu-mostrequested-item-width: 100%;
--gcds-topic-menu-themelist-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-item-border: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-text: #ffffff;
--gcds-topic-menu-themelist-width: 100%;
--gcds-topic-menu-topiclist-background: #ffffff;
--gcds-topic-menu-topiclist-border: #d6d9dd;
--gcds-topic-menu-topiclist-box-shadow: 0.5625rem 0.5625rem 0.5625rem 0.375rem rgba(0,0,0,.1);
--gcds-topic-menu-topiclist-item-first-font: 700 2.00225830078125rem/124.85901539399482% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-item-first-margin-block-end: 2.25rem;
--gcds-topic-menu-topiclist-item-first-width: 100%;
--gcds-topic-menu-topiclist-item-last-left: 25rem;
--gcds-topic-menu-topiclist-item-last-top: 6rem;
--gcds-topic-menu-topiclist-left: 22.5rem;
--gcds-topic-menu-topiclist-margin-block-end: 1.5rem;
--gcds-topic-menu-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-topiclist-menuitem-hover-text-decoration-thickness: 0.125rem;
--gcds-topic-menu-topiclist-menuitem-padding: 0.375rem 0;
--gcds-topic-menu-topiclist-menuitem-popup-font: 700 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-menuitem-popup-text: #000000;
--gcds-topic-menu-topiclist-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-topiclist-min-height: 49.1825rem;
--gcds-topic-menu-topiclist-padding: 0 2.25rem 1.5rem 2.25rem;
--gcds-topic-menu-topiclist-text: #000000;
--gcds-topic-menu-topiclist-width: calc(100% - 22.5rem);
--gcds-verify-banner-background: #d6d9dd;
--gcds-verify-banner-container-xs: 20rem;
--gcds-verify-banner-container-sm: 30rem;
Expand Down
80 changes: 80 additions & 0 deletions build/web/css/components/topic-menu.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/**
* Do not edit directly
* Generated on Wed, 23 Aug 2023 14:12:27 GMT
*/

:root {
--gcds-topic-menu-border-width: 0.0625rem;
--gcds-topic-menu-button-background: #26374a;
--gcds-topic-menu-button-border: #26374a;
--gcds-topic-menu-button-expanded-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-border-color: #444; /* Colour mandated by policy */
--gcds-topic-menu-button-expanded-text: #ffffff;
--gcds-topic-menu-button-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-button-home-background: #ffffff;
--gcds-topic-menu-button-home-border-color: #ffffff;
--gcds-topic-menu-button-home-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-button-padding: 0.75rem 1.125rem;
--gcds-topic-menu-button-text: #ffffff;
--gcds-topic-menu-focus-background: #0535d2;
--gcds-topic-menu-focus-text: #ffffff;
--gcds-topic-menu-focus-border-radius: 0.1875rem;
--gcds-topic-menu-focus-box-shadow: 0 0 0 0.125rem #ffffff;
--gcds-topic-menu-focus-outline-offset: 0.125rem;
--gcds-topic-menu-focus-outline: 0.1875rem solid #0535d2;
--gcds-topic-menu-font: 400 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-max-width: 71.25rem;
--gcds-topic-menu-menuitem-border-block-end: #545961;
--gcds-topic-menu-menuitem-border-inline-end: #ffffff;
--gcds-topic-menu-menuitem-expanded-background: #ffffff;
--gcds-topic-menu-menuitem-expanded-text: #333333;
--gcds-topic-menu-menuitem-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-menuitem-padding: 0.9375rem 1.5rem;
--gcds-topic-menu-menuitem-text: #ffffff;
--gcds-topic-menu-menuitem-text-underline-offset: 0.25rem;
--gcds-topic-menu-menuitem-width: 22.5rem;
--gcds-topic-menu-mobile-item-expanded-margin-inline-start: 3.75rem;
--gcds-topic-menu-mobile-item-expanded-padding-inline-start: 3.75rem;
--gcds-topic-menu-mobile-menuitem-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-background: #d6d9dd;
--gcds-topic-menu-mobile-mostrequested-border: #a8adb4;
--gcds-topic-menu-mobile-mostrequested-expanded-margin-inline-start: 6rem;
--gcds-topic-menu-mobile-mostrequested-hover-text: #000000;
--gcds-topic-menu-mobile-themelist-border: #f1f2f3;
--gcds-topic-menu-mobile-themelist-margin-block-start: 3rem;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-border: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-item-first-menuitem-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-hover-text: #000000;
--gcds-topic-menu-mobile-topiclist-item-last-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-mobile-topiclist-menuitem-border-block-end: #d6d9dd;
--gcds-topic-menu-mobile-topiclist-menuitem-haspopup-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mobile-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-mobile-topiclist-menuitem-padding: 0.9375rem 1.5rem 0.9375rem 0;
--gcds-topic-menu-mostrequested-item-first-font: 400 1.1111111111111112rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-mostrequested-item-last-margin-block-start: 0.9375rem;
--gcds-topic-menu-mostrequested-item-width: 100%;
--gcds-topic-menu-themelist-background: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-item-border: #444; /* Colour mandated by policy */
--gcds-topic-menu-themelist-text: #ffffff;
--gcds-topic-menu-themelist-width: 100%;
--gcds-topic-menu-topiclist-background: #ffffff;
--gcds-topic-menu-topiclist-border: #d6d9dd;
--gcds-topic-menu-topiclist-box-shadow: 0.5625rem 0.5625rem 0.5625rem 0.375rem rgba(0,0,0,.1);
--gcds-topic-menu-topiclist-item-first-font: 700 2.00225830078125rem/124.85901539399482% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-item-first-margin-block-end: 2.25rem;
--gcds-topic-menu-topiclist-item-first-width: 100%;
--gcds-topic-menu-topiclist-item-last-left: 25rem;
--gcds-topic-menu-topiclist-item-last-top: 6rem;
--gcds-topic-menu-topiclist-left: 22.5rem;
--gcds-topic-menu-topiclist-margin-block-end: 1.5rem;
--gcds-topic-menu-topiclist-menuitem-hover-text: #0535d2;
--gcds-topic-menu-topiclist-menuitem-hover-text-decoration-thickness: 0.125rem;
--gcds-topic-menu-topiclist-menuitem-padding: 0.375rem 0;
--gcds-topic-menu-topiclist-menuitem-popup-font: 700 1.25rem/120% "Noto Sans", sans-serif;
--gcds-topic-menu-topiclist-menuitem-popup-text: #000000;
--gcds-topic-menu-topiclist-menuitem-text: #284162; /* Colour mandated by policy: link colour */
--gcds-topic-menu-topiclist-min-height: 49.1825rem;
--gcds-topic-menu-topiclist-padding: 0 2.25rem 1.5rem 2.25rem;
--gcds-topic-menu-topiclist-text: #000000;
--gcds-topic-menu-topiclist-width: calc(100% - 22.5rem);
}
Loading

0 comments on commit dcfffc2

Please sign in to comment.