From 201b32f3fb50fce38410f3903e79a9d175d574ae Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 5 Sep 2023 14:45:33 -0400 Subject: [PATCH] alerts --- docs/_utilities/markdown.cjs | 12 ++++- docs/assets/styles/docs.css | 73 ++-------------------------- docs/pages/components/alert.md | 2 +- src/components/alert/alert.styles.ts | 69 ++++++++++++-------------- src/themes/_utility.css | 6 +-- 5 files changed, 49 insertions(+), 113 deletions(-) diff --git a/docs/_utilities/markdown.cjs b/docs/_utilities/markdown.cjs index 4a73e8f39..d87a645f8 100644 --- a/docs/_utilities/markdown.cjs +++ b/docs/_utilities/markdown.cjs @@ -23,12 +23,20 @@ markdown.use(markdownItReplaceIt); // Callouts ['tip', 'warning', 'danger'].forEach(type => { + const variant = type === 'tip' ? 'brand' : type; + let icon = 'info-circle'; + if (type === 'warning') icon = 'exclamation-circle'; + if (type === 'danger') icon = 'exclamation-triangle'; + markdown.use(markdownItContainer, type, { render: function (tokens, idx) { if (tokens[idx].nesting === 1) { - return `\n'; + return '\n'; } }); }); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index e75fb3ed5..543f155d7 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -512,12 +512,6 @@ pre:hover .copy-code-button, /* Callouts */ .callout { - position: relative; - background-color: var(--wa-color-neutral-container-fill-muted); - border-left: solid 4px var(--wa-color-neutral-container-outline-muted); - border-radius: var(--wa-corners-1x); - color: var(--wa-color-neutral-text-on-muted); - padding: var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-2xl); margin-bottom: var(--docs-content-vertical-spacing); } @@ -529,66 +523,14 @@ pre:hover .copy-code-button, margin-bottom: 0; } -.callout--tip { - background-color: var(--wa-color-brand-container-fill-muted); - border-left-color: var(--wa-color-brand-element-outline-muted); - color: var(--wa-color-brand-text-on-muted); -} - -.callout::before { - content: ''; - position: absolute; - top: calc(50% - 0.8rem); - left: calc(-0.8rem - 2px); - width: 1.6rem; - height: 1.6rem; - display: flex; - align-items: center; - justify-content: center; - font-family: var(--wa-font-family-longform); - font-weight: var(--wa-font-weight-heavy); - clip-path: circle(50% at 50% 50%); -} - -.callout--tip::before { - content: 'i'; - font-style: italic; - background-color: var(--wa-color-brand-element-outline-muted); - color: var(--wa-color-brand-text-on-muted); -} - -.callout--warning { - background-color: var(--wa-color-warning-container-fill-muted); - border-left-color: var(--wa-color-warning-element-outline-muted); - color: var(--wa-color-warning-text-on-muted); -} - -.callout--warning::before { - content: '!'; - background-color: var(--wa-color-warning-element-outline-muted); - color: var(--wa-color-warning-text-on-muted); -} - -.callout--danger { - background-color: var(--wa-color-danger-container-fill-muted); - border-left-color: var(--wa-color-danger-element-outline-muted); - color: var(--wa-color-danger-text-on-muted); -} - -.callout--danger::before { - content: '‼'; - background-color: var(--wa-color-danger-element-outline-muted); - color: var(--wa-color-danger-text-on-muted); -} - -.callout + .callout { - margin-top: calc(-0.5 * var(--docs-content-vertical-spacing)); -} - .callout a { color: inherit; } +.callout p { + margin-top: 0; +} + /* Aside */ .content aside { float: right; @@ -995,8 +937,7 @@ html.sidebar-open #menu-toggle { } details, - pre, - .callout { + pre { border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); } @@ -1013,10 +954,6 @@ html.sidebar-open #menu-toggle { display: none; } - .callout::before { - border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline); - } - .component-page__navigation, .copy-code-button, .code-preview__buttons, diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md index 5c1ad11d2..63a25ae5e 100644 --- a/docs/pages/components/alert.md +++ b/docs/pages/components/alert.md @@ -24,7 +24,7 @@ const App = () => ( ); ``` -:::tip +:::warning Alerts will not be visible if the `open` attribute is not present. ::: diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts index 7ec43931c..158090c9b 100644 --- a/src/components/alert/alert.styles.ts +++ b/src/components/alert/alert.styles.ts @@ -15,15 +15,11 @@ export default css` position: relative; display: flex; align-items: stretch; - background-color: var(--sl-panel-background-color); - border: solid var(--sl-panel-border-width) var(--sl-panel-border-color); - border-top-width: calc(var(--sl-panel-border-width) * 3); - border-radius: var(--sl-border-radius-medium); - font-family: var(--sl-font-sans); - font-size: var(--sl-font-size-small); - font-weight: var(--sl-font-weight-normal); - line-height: 1.6; - color: var(--sl-color-neutral-700); + border-radius: var(--wa-corners-1x); + font-family: var(--wa-font-family-body); + font-size: var(--wa-font-size-m); + font-weight: var(--wa-font-size-normal); + line-height: var(--wa-font-line-height-regular); margin: inherit; } @@ -36,54 +32,44 @@ export default css` flex: 0 0 auto; display: flex; align-items: center; - font-size: var(--sl-font-size-large); - padding-inline-start: var(--sl-spacing-large); + font-size: var(--wa-font-size-l); + padding-inline-start: var(--wa-space-l); } .alert--brand { - border-top-color: var(--sl-color-primary-600); - } - - .alert--brand .alert__icon { - color: var(--sl-color-primary-600); + background-color: var(--wa-color-brand-container-fill-muted); + border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted); + color: var(--wa-color-brand-text-on-muted); } .alert--success { - border-top-color: var(--sl-color-success-600); - } - - .alert--success .alert__icon { - color: var(--sl-color-success-600); + background-color: var(--wa-color-success-container-fill-muted); + border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-container-outline-muted); + color: var(--wa-color-success-text-on-muted); } .alert--neutral { - border-top-color: var(--sl-color-neutral-600); - } - - .alert--neutral .alert__icon { - color: var(--sl-color-neutral-600); + background-color: var(--wa-color-neutral-container-fill-muted); + border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-container-outline-muted); + color: var(--wa-color-neutral-text-on-muted); } .alert--warning { - border-top-color: var(--sl-color-warning-600); - } - - .alert--warning .alert__icon { - color: var(--sl-color-warning-600); + background-color: var(--wa-color-warning-container-fill-muted); + border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-container-outline-muted); + color: var(--wa-color-warning-text-on-muted); } .alert--danger { - border-top-color: var(--sl-color-danger-600); - } - - .alert--danger .alert__icon { - color: var(--sl-color-danger-600); + background-color: var(--wa-color-danger-container-fill-muted); + border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-container-outline-muted); + color: var(--wa-color-danger-text-on-muted); } .alert__message { flex: 1 1 auto; display: block; - padding: var(--sl-spacing-large); + padding: var(--wa-space-m); overflow: hidden; } @@ -91,7 +77,12 @@ export default css` flex: 0 0 auto; display: flex; align-items: center; - font-size: var(--sl-font-size-medium); - padding-inline-end: var(--sl-spacing-medium); + color: currentColor; + font-size: var(--wa-font-size-m); + padding-inline-end: var(--wa-space-m); + } + + .alert__close-button:active { + color: color-mix(in oklch, currentColor, black 6%); } `; diff --git a/src/themes/_utility.css b/src/themes/_utility.css index 1d43f5a4d..639210e6a 100644 --- a/src/themes/_utility.css +++ b/src/themes/_utility.css @@ -13,7 +13,7 @@ position: fixed; top: 0; inset-inline-end: 0; - z-index: var(--sl-z-index-toast); + z-index: var(--wa-z-index-toast); width: 28rem; max-width: 100%; max-height: 100%; @@ -21,9 +21,9 @@ } .sl-toast-stack sl-alert { - margin: var(--sl-spacing-medium); + margin: var(--wa-space-m); } .sl-toast-stack sl-alert::part(base) { - box-shadow: var(--sl-shadow-large); + box-shadow: var(--wa-shadow-level-3); }