From 6882aafc262c8e70c2bceee7338889dd296a7d0b Mon Sep 17 00:00:00 2001 From: Ian Maddaus Date: Mon, 28 Jul 2025 16:16:17 -0400 Subject: [PATCH 1/2] Update theme Signed-off-by: Ian Maddaus --- .../chef-docs-theme/assets/sass/main.scss | 4 +- .../assets/sass/partials/_foundation.scss | 103 +++- .../assets/sass/typography/_lists.scss | 44 +- .../layouts/shortcodes/accordion-item.html | 24 +- .../layouts/shortcodes/accordion-list.html | 23 + .../layouts/shortcodes/foundation_tabs.html | 2 +- _vendor/modules.txt | 2 +- content/style/shortcodes.md | 268 +++++----- content/style/test.md | 472 ++++++++++-------- go.mod | 2 +- go.sum | 4 +- 11 files changed, 567 insertions(+), 381 deletions(-) diff --git a/_vendor/github.com/chef/chef-docs-theme/assets/sass/main.scss b/_vendor/github.com/chef/chef-docs-theme/assets/sass/main.scss index 51f278e129..2f9039ec98 100644 --- a/_vendor/github.com/chef/chef-docs-theme/assets/sass/main.scss +++ b/_vendor/github.com/chef/chef-docs-theme/assets/sass/main.scss @@ -30,8 +30,8 @@ body { @import "partials/inspec_resources"; @import "partials/sidebar"; @import "partials/swiftype_search"; -@import "partials/foundation"; @import "partials/toc"; @import "partials/utility-bar"; @import "partials/breadcrumbs"; -@import "partials/version_selector" +@import "partials/version_selector"; +@import "partials/foundation"; diff --git a/_vendor/github.com/chef/chef-docs-theme/assets/sass/partials/_foundation.scss b/_vendor/github.com/chef/chef-docs-theme/assets/sass/partials/_foundation.scss index 375bd2a3f2..8bff677643 100644 --- a/_vendor/github.com/chef/chef-docs-theme/assets/sass/partials/_foundation.scss +++ b/_vendor/github.com/chef/chef-docs-theme/assets/sass/partials/_foundation.scss @@ -1,33 +1,102 @@ -// Styling for shortcode or layouts that use Foundation Framework elements. +// Foundation Framework component overrides +// Styles for Foundation tabs, accordions, and panels used in shortcodes -// Foundation tabs and panels styling -// foundation_tabs, foundation_tab, foundation_tabs_panels, foundation_tabs_panel +#main-content { -#main-content{ - ul[role=tablist]{ + // Reset list margins for Foundation components + ul.accordion, + ul[role="tablist"] { margin-left: 0; + margin-bottom: 0; } - ul.tabs{ - border: 2px solid $border; - border-bottom: 1px solid $border; + // Tab navigation styling + ul.tabs { margin-bottom: 0; - li:before { - content: none; + + li { + border: rem-calc(1) solid $border; + transition: border-color 0.2s ease-in-out; + + &:hover, + &.is-active { + border-color: $border-dark; + } + + // Improve accessibility with focus styles + &:focus-within { + outline: rem-calc(2) solid $primary-color; + outline-offset: rem-calc(2); + } + + a { + padding: rem-calc(12 16); + text-decoration: none; + color: $body-font-color; + + &:hover { + color: $primary-color; + } + } } } + // Tab content panels .tabs-content { - padding: 1rem; - margin-bottom: 2rem; - border: 2px solid $border; + padding: rem-calc(16); + margin-bottom: rem-calc(32); border-top: 0; + border: rem-calc(1) solid $border; + border-radius: 0 0 $border-radius-base $border-radius-base; + background-color: $white; + + .tabs-panel { + padding: 0; + + // Ensure consistent spacing for content within panels + > *:first-child { + margin-top: 0; + } + + > *:last-child { + margin-bottom: 0; + } + } } -} -// Foundation accordion -#main-content-col { + // Accordion styling improvements ul.accordion { - margin-left: 0; + .accordion-item { + border-bottom: rem-calc(1) solid $border; + + &:last-child { + border-bottom: none; + } + + .accordion-title { + padding: rem-calc(16); + background-color: $ash; + border: none; + cursor: pointer; + transition: background-color 0.2s ease-in-out; + + &:hover { + background-color: darken($ash, 5%); + } + + &:focus { + outline: rem-calc(2) solid $primary-color; + outline-offset: rem-calc(-2); + } + + &::before { + margin-right: rem-calc(8); + } + } + + .accordion-content { + padding: rem-calc(16); + } + } } } diff --git a/_vendor/github.com/chef/chef-docs-theme/assets/sass/typography/_lists.scss b/_vendor/github.com/chef/chef-docs-theme/assets/sass/typography/_lists.scss index ed4de9dd23..c0d70a9477 100644 --- a/_vendor/github.com/chef/chef-docs-theme/assets/sass/typography/_lists.scss +++ b/_vendor/github.com/chef/chef-docs-theme/assets/sass/typography/_lists.scss @@ -1,44 +1,56 @@ +// List styles #main-content-col, .content { - ul, ol { - margin: 1rem 0 1rem 2rem; - } + // Base list styles (exclude UI components) + ul:not([role="tablist"]):not(.accordion):not(.tabs), ol { + margin: rem-calc(16) 0 rem-calc(16) rem-calc(32); - > li > ol { - list-style-type: lower-alpha; + li:not([role="presentation"]):not(.accordion-item) { + margin: rem-calc(12) 0; } + } - > li > ul { - margin: 1rem 0 1rem 1rem; + // Ordered list specific styles + ol { + // Nested ordered lists use alphabetical numbering + li:not([role="presentation"]):not(.accordion-item) > ol { + list-style-type: lower-alpha; } - } - ul > li > p:first-child { - margin: 0; + // Nested unordered lists have reduced left margin + > li:not([role="presentation"]):not(.accordion-item) > ul:not([role="tablist"]):not(.accordion):not(.tabs) { + margin-left: rem-calc(16); + } } + // Definition lists dl { - margin: 1rem 0; + margin: rem-calc(16) 0; + // Definition terms dt { margin-bottom: 0; + em { font-weight: normal; } + code { font-weight: bold; } } - dl { - border-left: 4px solid $light-light-gray; - padding-left: 1rem; + // Definition descriptions + dd { + margin: rem-calc(16); } - dd { - margin: 1rem; + // Nested definition lists + dl { + border-left: rem-calc(4) solid $light-light-gray; + padding-left: rem-calc(16); } } } diff --git a/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-item.html b/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-item.html index 61f7f9645b..e37d568b1a 100644 --- a/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-item.html +++ b/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-item.html @@ -1,7 +1,27 @@ +{{- /* + +See accordion-list.html for usage and options + +Usage: + +{{< accordion-item accordion-title="Title" accordion-title-link="panel-id" is-active="true" >}} +content for the accordion item +{{< /accordion-item >}} + +Options: + +- accordion-title: The title of the accordion item +- accordion-title-link: Optional link for the accordion title. Required if accordion-list has data-deep-link enabled. +- is-active: Set to "true" to make this accordion item active by default + +*/ -}} + +{{- $accordionTitleLink := .Get "accordion-title-link" | default "" -}} +
  • - {{ .Get "accordion-title" }} + {{ .Get "accordion-title" }} -
    +
    {{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
    • diff --git a/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-list.html b/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-list.html index f4549d7397..383abd8b2e 100644 --- a/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-list.html +++ b/_vendor/github.com/chef/chef-docs-theme/layouts/shortcodes/accordion-list.html @@ -1,4 +1,27 @@ +{{- /* +Accordion List Shortcode + +https://get.foundation/sites/docs/accordion.html + +Usage: +{{< accordion-list id="my-accordion" data-multi-expand="true" data-allow-all-closed="true" >}} + {{< accordion-item accordion-title="Item 1" accordion-title-link="item1" is-active="true" >}} + Content for item 1 + {{< /accordion-item >}} + {{< accordion-item accordion-title="Item 2" accordion-title-link="item2" >}} + Content for item 2 + {{< /accordion-item >}} +{{< /accordion-list >}} + +Options: + - id: Optional: Unique identifier for the accordion. This allows deep linking and history updates. https://get.foundation/sites/docs/accordion.html#accordion-and-urls + - data-multi-expand: Allow multiple items to be expanded (default: false) + - data-allow-all-closed: Allow all items to be closed (default: false) + +*/ -}} +