@codeforamerica/marcomms-design-system 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +141 -1
- package/dist/index.css +2 -2
- package/dist/index.js +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/button.js +0 -4
- package/src/components/button.scss +0 -5
- package/src/components/icon.js +3 -1
- package/src/components/icon.scss +1 -1
- package/src/components/icon.stories.js +22 -0
- package/src/components/tile.js +0 -1
- package/src/core/layout.scss +18 -8
package/README.md
CHANGED
|
@@ -1 +1,141 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Code for America MarComms Design System
|
|
2
|
+
|
|
3
|
+
[](https://www.chromatic.com/library?appId=631e8e64823eeaf059291177)
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This design system helps our team build websites that look and feel consistent with our brand. It's built with SCSS and web components, using modern CSS features like container queries and custom properties. The system includes design tokens, reusable components, and layout utilities.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- **Design Tokens**: Consistent spacing, colors, typography, and layout values
|
|
12
|
+
- **Responsive Grid**: Flexible 12-column grid with CSS gap support
|
|
13
|
+
- **Web Components**: Reusable components built with Lit
|
|
14
|
+
- **Layout Utilities**: Stack, cluster, grid, and section patterns
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @codeforamerica/marcomms-design-system
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### CSS styles
|
|
25
|
+
|
|
26
|
+
Import all styles:
|
|
27
|
+
|
|
28
|
+
```scss
|
|
29
|
+
@import '@codeforamerica/marcomms-design-system/src/styles.scss';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Or import specific parts:
|
|
33
|
+
|
|
34
|
+
```scss
|
|
35
|
+
@import '@codeforamerica/marcomms-design-system/src/core/tokens';
|
|
36
|
+
@import '@codeforamerica/marcomms-design-system/src/core/grid';
|
|
37
|
+
@import '@codeforamerica/marcomms-design-system/src/core/layout';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### JavaScript components
|
|
41
|
+
|
|
42
|
+
Import all components:
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
import '@codeforamerica/marcomms-design-system';
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Or import specific components:
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
import '@codeforamerica/marcomms-design-system/src/components/card.js';
|
|
52
|
+
import '@codeforamerica/marcomms-design-system/src/components/button.js';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Development
|
|
56
|
+
|
|
57
|
+
### Prerequisites
|
|
58
|
+
- Node.js 20+
|
|
59
|
+
- npm
|
|
60
|
+
|
|
61
|
+
### Getting started
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
# Clone the repository
|
|
65
|
+
git clone https://github.com/codeforamerica/marcomms-design-system.git
|
|
66
|
+
cd marcomms-design-system
|
|
67
|
+
|
|
68
|
+
# Install dependencies
|
|
69
|
+
npm install
|
|
70
|
+
|
|
71
|
+
# Start development server
|
|
72
|
+
npm run develop
|
|
73
|
+
|
|
74
|
+
# Start Storybook
|
|
75
|
+
npm run storybook
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Scripts
|
|
79
|
+
|
|
80
|
+
- `npm run build` - Build production assets
|
|
81
|
+
- `npm run develop` - Watch and build development assets
|
|
82
|
+
- `npm run storybook` - Start Storybook development server
|
|
83
|
+
- `npm run build-storybook` - Build static Storybook
|
|
84
|
+
- `npm run chromatic` - Deploy to Chromatic for visual testing
|
|
85
|
+
|
|
86
|
+
## Design tokens
|
|
87
|
+
|
|
88
|
+
The system includes design tokens for:
|
|
89
|
+
|
|
90
|
+
- **Spacing**: Layout and component spacing scales
|
|
91
|
+
- **Colors**: Brand colors, grayscale, and semantic colors
|
|
92
|
+
- **Typography**: Font families, sizes, and line heights
|
|
93
|
+
- **Layout**: Grid breakpoints and container sizes
|
|
94
|
+
|
|
95
|
+
## Browser support
|
|
96
|
+
|
|
97
|
+
- Modern browsers (>0.2% usage)
|
|
98
|
+
- No Internet Explorer support
|
|
99
|
+
- Progressive enhancement for older browsers
|
|
100
|
+
|
|
101
|
+
## Documentation
|
|
102
|
+
|
|
103
|
+
- **Storybook**: [View live documentation](https://codeforamerica.org/storybook)
|
|
104
|
+
- **Chromatic**: Visual testing and component library
|
|
105
|
+
|
|
106
|
+
## Release process
|
|
107
|
+
|
|
108
|
+
This project automatically creates new versions and publishes them:
|
|
109
|
+
|
|
110
|
+
### How it works
|
|
111
|
+
- **Auto Versioning**: Version numbers are created based on your commit messages
|
|
112
|
+
- **NPM Publishing**: New versions publish to NPM automatically when you merge to main
|
|
113
|
+
- **GitHub Actions**: Builds, tests, and publishes everything without manual work
|
|
114
|
+
|
|
115
|
+
### Writing commits
|
|
116
|
+
Use these commit message formats to control version changes:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
119
|
+
feat: add new card component # New feature (1.0.0 → 1.1.0)
|
|
120
|
+
fix: resolve button spacing issue # Bug fix (1.0.0 → 1.0.1)
|
|
121
|
+
feat!: redesign grid system # Breaking change (1.0.0 → 2.0.0)
|
|
122
|
+
docs: update README examples # No version change
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### What happens when you merge
|
|
126
|
+
1. **Pull Request**: Creates a preview build for review
|
|
127
|
+
2. **Merge to Main**: Starts the release process
|
|
128
|
+
3. **Version Check**: Looks at your commits to decide the new version number
|
|
129
|
+
4. **NPM Release**: Publishes the new version to `@codeforamerica/marcomms-design-system`
|
|
130
|
+
5. **Documentation Update**: Updates the live Storybook site
|
|
131
|
+
|
|
132
|
+
### What gets published to NPM
|
|
133
|
+
- Built files ready to use in `/dist`
|
|
134
|
+
- Source files for custom setups in `/src`
|
|
135
|
+
- Documentation and package info
|
|
136
|
+
|
|
137
|
+
## Maintainer
|
|
138
|
+
|
|
139
|
+
**Fritz Jooste**
|
|
140
|
+
Lead Front-end Developer, MarComms Team
|
|
141
|
+
[fjooste@codeforamerica.org](mailto:fjooste@codeforamerica.org)
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.cfa-icon{height:var(--spacing-layout-5);margin-left:auto;margin-right:auto;width:var(--spacing-layout-5)}.cfa-icon img{display:block;height:100%;object-fit:contain;object-position:center center;width:100%}.cfa-button,a.cfa-button,.cfa-button>a,.wp-block-button>*{--bg-color: var(--white);--border-color: transparent;--font-family: var(--font-family-sans-serif);--font-size: var(--font-size-base);--hover-bg-color: var(--blue-20);--hover-border-color: var(--border-color);--line-height: var(--line-height-base);--text-color: var(--purple-80);background-color:var(--bg-color);border:var(--hairline) solid var(--border-color);border-radius:var(--rounded-corners);box-shadow:var(--shadow-small);color:var(--text-color);cursor:pointer;display:block;font-family:var(--font-family);font-size:var(--font-size);font-weight:bold;padding:var(--spacing-component-2) var(--spacing-component-3);text-align:center;text-decoration:none;transition:background-color .5s,box-shadow .5s}.cfa-button:hover,a.cfa-button:hover,.cfa-button>a:hover,.wp-block-button>*:hover{background-color:var(--hover-bg-color);border-color:var(--hover-border-color);box-shadow:var(--shadow-medium);color:var(--text-color)}
|
|
2
|
-
.cfa-icon{height:var(--spacing-layout-5);margin-left:auto;margin-right:auto;width:var(--spacing-layout-5)}.cfa-icon img{display:block;height:100%;object-fit:contain;object-position:center center;width:100%}.cfa-form{--bg-color: var(--white);background-color:var(--bg-color);box-shadow:var(--shadow-medium)}.cfa-fieldset{border:0;margin:0;padding:0}.cfa-fieldset>*+*{margin-block-start:var(--spacing-layout-half)}.cfa-fieldset legend{font-weight:bold}.cfa-form-group>*{display:block}.cfa-form-group+.cfa-form-group{margin-block-start:var(--spacing-layout-1)}.cfa-input-container{max-width:100%;width:min(var(--column-span-6),100%)}.cfa-input-container:focus-within{outline:var(--focus-outline)}.cfa-input-container>*{display:block;width:100%}.cfa-label{flex:1;flex-grow:1;font-weight:bold;padding-inline-end:var(--spacing-component-2);padding-block:var(--spacing-component-2)}.cfa-select{appearance:none;background-color:var(--white, #fff);background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-position-x:calc(100% - 5px);background-position-y:50%;background-repeat:no-repeat;border-radius:0;border:var(--thin) solid var(--black, #000);color:var(--black, #fff);display:block;font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:normal;padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3);max-width:100%;position:relative}.cfa-select:focus{outline:none}.cfa-multiselect{background-color:var(--white);border-radius:0;border:var(--thin) solid var(--black);box-shadow:inset 0 var(--thin) 0 rgba(0,0,0,.15);font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:bold;min-width:var(--column-span-3);max-width:100%}.cfa-multiselect:focus{outline:none}.cfa-multiselect option{padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3)}.cfa-multiselect option:focus,.cfa-multiselect option:checked{background-color:var(--green-20)}.cfa-text-area,.cfa-text-input{background-color:var(--white);border-radius:0;border:var(--thin) solid var(--black);box-shadow:inset 0px var(--thin) 0px rgba(0,0,0,.15);font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:normal;padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3);max-width:100%}.cfa-text-input:focus{outline:none}.cfa-text-area{height:var(--spacing-layout-4);padding:var(--spacing-component-3)}.cfa-text-area:focus{outline:none}.cfa-checkbox{align-items:start;background-color:var(--white);border:var(--thin) solid var(--black);display:flex;flex-direction:row;font-size:var(--font-size-base);gap:var(--spacing-component-2);line-height:var(--line-height-base)}.cfa-checkbox:has(input:checked){background-color:var(--green-20)}.cfa-checkbox+.cfa-checkbox{margin-block-start:var(--spacing-layout-half)}.cfa-checkbox input{appearance:none;flex-basis:1.5rem;flex-grow:0}.cfa-checkbox input:focus{outline:none}.cfa-checkbox input::before{-webkit-font-feature-settings:"liga";direction:ltr;display:inline-block;font-family:"Material Symbols Rounded";font-size:1.4em;font-style:normal;font-weight:normal;letter-spacing:normal;text-transform:none;vertical-align:
|
|
1
|
+
.cfa-icon{height:var(--spacing-layout-5);margin-left:auto;margin-right:auto;width:var(--spacing-layout-5)}.cfa-icon img{display:block;height:100%;object-fit:contain;object-position:center center;width:100%}.cfa-button,a.cfa-button,.cfa-button>a,.wp-block-button>*{--bg-color: var(--white);--border-color: transparent;--font-family: var(--font-family-sans-serif);--font-size: var(--font-size-base);--hover-bg-color: var(--blue-20);--hover-border-color: var(--border-color);--line-height: var(--line-height-base);--text-color: var(--purple-80);background-color:var(--bg-color);border:var(--hairline) solid var(--border-color);border-radius:var(--rounded-corners);box-shadow:var(--shadow-small);color:var(--text-color);cursor:pointer;display:block;font-family:var(--font-family);font-size:var(--font-size);font-weight:bold;padding:var(--spacing-component-2) var(--spacing-component-3);text-align:center;text-decoration:none;transition:background-color .5s,box-shadow .5s}.cfa-button:hover,a.cfa-button:hover,.cfa-button>a:hover,.wp-block-button>*:hover{background-color:var(--hover-bg-color);border-color:var(--hover-border-color);box-shadow:var(--shadow-medium);color:var(--text-color)}@media(max-width: 768px){.cfa-button,a.cfa-button,.cfa-button>a,.wp-block-button>*{width:100%}.cfa-button+.cfa-button,.cfa-button+a.cfa-button,.cfa-button+.cfa-button>a,.cfa-button+.wp-block-button>*,a.cfa-button+.cfa-button,a.cfa-button+a.cfa-button,a.cfa-button+.cfa-button>a,a.cfa-button+.wp-block-button>*,.cfa-button>a+.cfa-button,.cfa-button>a+a.cfa-button,.cfa-button>a+.cfa-button>a,.cfa-button>a+.wp-block-button>*,.wp-block-button>*+.cfa-button,.wp-block-button>*+a.cfa-button,.wp-block-button>*+.cfa-button>a,.wp-block-button>*+.wp-block-button>*{margin-block-start:var(--spacing-layout-half)}.wp-block-button{width:100%}}@media(min-width: 768px){.cfa-button,a.cfa-button,.cfa-button>a,.wp-block-button>*{display:inline-block}.cfa-button,a.cfa-button,.cfa-button>a,.wp-block-button>*{margin-block:var(--spacing-component-2);margin-inline-end:var(--spacing-component-2)}}.cfa-button--primary,a.cfa-button--primary,.cfa-button--primary>a,.wp-block-button.is-style-primary>*{--bg-color: var(--red-60);--hover-bg-color: var(--red-80);--text-color: var(--white,)}.cfa-button--outline,a.cfa-button--outline,.cfa-button--outline>a,.wp-block-button.is-style-outline>*{--border-color: var(--black-20);--bg-color: transparent}.cfa-button--outline-white,a.cfa-button--outline-white,.cfa-button--outline-white>a,.wp-block-button.is-style-outline-white>*{--border-color: var(--white);--bg-color: transparent;--hover-bg-color: var(--black-20);--shadow-color: var(--white-20);--text-color: var(--white)}.cfa-button--prominent-link,a.cfa-button--prominent-link,.cfa-button--prominent-link>a,.wp-block-button.is-style-prominent-link>*{--accent-color: var(--purple-60);background:unset;box-shadow:unset;color:inherit;font-weight:bold;padding:0;text-decoration:underline;text-decoration-color:var(--accent-color);text-decoration-thickness:var(--medium);text-underline-offset:.4em;transition:color .2s ease-in-out,border-color .2s ease-in-out}.cfa-button--prominent-link:hover,a.cfa-button--prominent-link:hover,.cfa-button--prominent-link>a:hover,.wp-block-button.is-style-prominent-link>*:hover{--accent-color: var(--red-60);background:unset;box-shadow:unset}.cfa-button--prominent-link::after,a.cfa-button--prominent-link::after,.cfa-button--prominent-link>a::after,.wp-block-button.is-style-prominent-link>*::after{-webkit-font-feature-settings:"liga";direction:ltr;display:inline-block;font-family:"Material Symbols Rounded";font-size:1.4em;font-style:normal;font-weight:normal;letter-spacing:normal;text-transform:none;vertical-align:text-bottom;white-space:nowrap;word-wrap:normal;content:"arrow_right_alt";padding-inline-start:.1em;text-decoration:none;transition:transform .2s ease-in-out;width:1em}.cfa-button--prominent-link:hover::after,a.cfa-button--prominent-link:hover::after,.cfa-button--prominent-link>a:hover::after,.wp-block-button.is-style-prominent-link>*:hover::after{transform:translateX(0.3em)}.cfa-button--prominent-link cfa-icon,a.cfa-button--prominent-link cfa-icon,.cfa-button--prominent-link>a cfa-icon,.wp-block-button.is-style-prominent-link>* cfa-icon{text-decoration:none}.cfa-button--sm,a.cfa-button--sm,.cfa-button--sm>a{--font-size: var(--font-size-small);--line-height: var(--line-height-small)}.cfa-button--md,a.cfa-button--md,.cfa-button--md>a{--font-size: var(--font-size-base);--line-height: var(--line-height-base)}
|
|
2
|
+
.cfa-icon{height:var(--spacing-layout-5);margin-left:auto;margin-right:auto;width:var(--spacing-layout-5)}.cfa-icon img{display:block;height:100%;object-fit:contain;object-position:center center;width:100%}.cfa-form{--bg-color: var(--white);background-color:var(--bg-color);box-shadow:var(--shadow-medium)}.cfa-fieldset{border:0;margin:0;padding:0}.cfa-fieldset>*+*{margin-block-start:var(--spacing-layout-half)}.cfa-fieldset legend{font-weight:bold}.cfa-form-group>*{display:block}.cfa-form-group+.cfa-form-group{margin-block-start:var(--spacing-layout-1)}.cfa-input-container{max-width:100%;width:min(var(--column-span-6),100%)}.cfa-input-container:focus-within{outline:var(--focus-outline)}.cfa-input-container>*{display:block;width:100%}.cfa-label{flex:1;flex-grow:1;font-weight:bold;padding-inline-end:var(--spacing-component-2);padding-block:var(--spacing-component-2)}.cfa-select{appearance:none;background-color:var(--white, #fff);background-image:url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");background-position-x:calc(100% - 5px);background-position-y:50%;background-repeat:no-repeat;border-radius:0;border:var(--thin) solid var(--black, #000);color:var(--black, #fff);display:block;font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:normal;padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3);max-width:100%;position:relative}.cfa-select:focus{outline:none}.cfa-multiselect{background-color:var(--white);border-radius:0;border:var(--thin) solid var(--black);box-shadow:inset 0 var(--thin) 0 rgba(0,0,0,.15);font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:bold;min-width:var(--column-span-3);max-width:100%}.cfa-multiselect:focus{outline:none}.cfa-multiselect option{padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3)}.cfa-multiselect option:focus,.cfa-multiselect option:checked{background-color:var(--green-20)}.cfa-text-area,.cfa-text-input{background-color:var(--white);border-radius:0;border:var(--thin) solid var(--black);box-shadow:inset 0px var(--thin) 0px rgba(0,0,0,.15);font-family:var(--font-family-sans-serif);font-size:1rem;font-weight:normal;padding-block:var(--spacing-component-2);padding-inline:var(--spacing-component-3);max-width:100%}.cfa-text-input:focus{outline:none}.cfa-text-area{height:var(--spacing-layout-4);padding:var(--spacing-component-3)}.cfa-text-area:focus{outline:none}.cfa-checkbox{align-items:start;background-color:var(--white);border:var(--thin) solid var(--black);display:flex;flex-direction:row;font-size:var(--font-size-base);gap:var(--spacing-component-2);line-height:var(--line-height-base)}.cfa-checkbox:has(input:checked){background-color:var(--green-20)}.cfa-checkbox+.cfa-checkbox{margin-block-start:var(--spacing-layout-half)}.cfa-checkbox input{appearance:none;flex-basis:1.5rem;flex-grow:0}.cfa-checkbox input:focus{outline:none}.cfa-checkbox input::before{-webkit-font-feature-settings:"liga";direction:ltr;display:inline-block;font-family:"Material Symbols Rounded";font-size:1.4em;font-style:normal;font-weight:normal;letter-spacing:normal;text-transform:none;vertical-align:text-bottom;white-space:nowrap;word-wrap:normal;background-color:var(--white);border-radius:10%;content:"check_box_outline_blank";flex-basis:1.5rem;flex-grow:0;font-size:1.2rem;line-height:1em;margin-block-start:calc(var(--line-height-base)/2 - .25rem);margin-inline-start:var(--spacing-component-2);text-align:center;width:1.2rem}.cfa-checkbox input:checked::before{content:"check_box"}.cfa-checkbox label{font-weight:normal}.cfa-radio-button{align-items:start;background-color:var(--white);border:var(--thin) solid var(--black);display:flex;flex-direction:row;font-size:var(--font-size-base);gap:var(--spacing-component-2);line-height:var(--line-height-base)}.cfa-radio-button:has(input:checked){background-color:var(--green-20)}.cfa-radio-button+.cfa-radio-button{margin-block-start:var(--spacing-layout-half)}.cfa-radio-button input{appearance:none;flex-basis:1.5rem;flex-grow:0}.cfa-radio-button input:focus{outline:none}.cfa-radio-button input::before{-webkit-font-feature-settings:"liga";direction:ltr;display:inline-block;font-family:"Material Symbols Rounded";font-size:1.4em;font-style:normal;font-weight:normal;letter-spacing:normal;text-transform:none;vertical-align:text-bottom;white-space:nowrap;word-wrap:normal;background-color:var(--white);border-radius:50%;content:"radio_button_unchecked";margin-inline:var(--spacing-component-2);overflow:hidden;flex-basis:1.5rem;font-size:1.2rem;line-height:1.2rem;margin-block-start:calc(var(--line-height-base)/2 - .25rem);margin-inline:var(--spacing-component-2);text-align:center;width:1.2rem}.cfa-radio-button input:checked::before{content:"radio_button_checked"}.cfa-radio-button label{font-weight:normal}.ui-datepicker{background-color:var(--white);border:solid 1px var(--gray-20);box-shadow:var(--shadow-slight);font-size:var(--font-size-small);letter-spacing:var(--letter-spacing-small);padding:var(--spacing-component-3);text-align:center}.ui-datepicker a:link{text-decoration:none}.ui-datepicker-header{display:flex;flex-direction:row;margin-block-end:var(--spacing-component-3)}.ui-datepicker-header>*{flex-grow:1}.ui-datepicker-header .ui-datepicker-title{flex-grow:0}.ui-datepicker-calendar td{padding:var(--spacing-component-2)}
|
|
3
3
|
.cfa-icon{height:var(--spacing-layout-5);margin-left:auto;margin-right:auto;width:var(--spacing-layout-5)}.cfa-icon img{display:block;height:100%;object-fit:contain;object-position:center center;width:100%}
|
|
4
4
|
.cfa-loader{--size: var(--spacing-component-3);animation:pulse 2s infinite;border-radius:50%;display:block;height:var(--size);margin-left:auto;margin-right:auto;text-indent:-9999px;width:var(--size)}@keyframes pulse{0%{background-color:rgba(0,0,0,0)}50%{background-color:rgba(0,0,0,.3)}100%{background-color:rgba(0,0,0,0)}}
|
|
5
5
|
.link-list,ul.is-style-link-list,.content ul.is-style-link-list{--bg-color: var(--white);--bg-hover-color: var(--purple-10);--border-color: var(--gray-40);--border-hover-color: var(--purple-60);--text-color: var(--black);--text-hover-color: var(--purple-80);--icon-color: var(--gray-40);--icon-hover-color: var(--purple-60);list-style:none;padding:0}.link-list>li,ul.is-style-link-list>li,.content ul.is-style-link-list>li{margin:0;padding:0}.link-list>li>a,ul.is-style-link-list>li>a,.content ul.is-style-link-list>li>a{background-color:var(--bg-color);border:var(--hairline) solid var(--border-color);color:var(--text-color);display:block;padding:var(--spacing-component-3);text-decoration:none}.link-list>li>a:hover,.link-list>li>a:focus,ul.is-style-link-list>li>a:hover,ul.is-style-link-list>li>a:focus,.content ul.is-style-link-list>li>a:hover,.content ul.is-style-link-list>li>a:focus{background-color:var(--bg-hover-color);border-color:var(--border-hover-color);color:var(--text-hover-color);position:relative;z-index:2}.link-list>li:first-child>a,ul.is-style-link-list>li:first-child>a,.content ul.is-style-link-list>li:first-child>a{border-top-left-radius:var(--rounded-corners);border-top-right-radius:var(--rounded-corners)}.link-list>li:last-child>a,ul.is-style-link-list>li:last-child>a,.content ul.is-style-link-list>li:last-child>a{border-bottom-left-radius:var(--rounded-corners);border-bottom-right-radius:var(--rounded-corners)}.link-list>li:not(:has(a)),ul.is-style-link-list>li:not(:has(a)),.content ul.is-style-link-list>li:not(:has(a)){background-color:var(--gray-20);border:var(--hairline) solid var(--border-color);color:var(--text-color);display:block;padding:var(--spacing-component-3)}.link-list>li+li,ul.is-style-link-list>li+li,.content ul.is-style-link-list>li+li{margin-block-start:calc(-1*var(--hairline))}.link-list:has(cfa-icon)>li>a,ul.is-style-link-list:has(cfa-icon)>li>a,.content ul.is-style-link-list:has(cfa-icon)>li>a{padding-left:var(--spacing-component-5);position:relative}.link-list>li>a cfa-icon,ul.is-style-link-list>li>a cfa-icon,.content ul.is-style-link-list>li>a cfa-icon{color:var(--icon-color);display:block;left:var(--spacing-component-3);position:absolute;text-align:center;width:var(--spacing-component-4)}.link-list>li>a:hover cfa-icon,.link-list>li>a:focus cfa-icon,ul.is-style-link-list>li>a:hover cfa-icon,ul.is-style-link-list>li>a:focus cfa-icon,.content ul.is-style-link-list>li>a:hover cfa-icon,.content ul.is-style-link-list>li>a:focus cfa-icon{color:var(--icon-hover-color)}
|