mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: use bx css prefixes for now

Browse source
This commit is contained in:
Enrico Sacchetti 2024-01-11 13:03:10 -05:00
commit aeb05203c5
235 changed files with 1537 additions and 1563 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/COMPONENT_API.json
View file

@ -337,7 +337,7 @@
{
"name": "__default__",
"default": true,
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"cds--link\"; }}"
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
}
],
"events": [
@ -8127,7 +8127,7 @@
{
"name": "menu",
"default": false,
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"cds--overflow-menu__icon {iconClass}\"\n />",
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"bx--overflow-menu__icon {iconClass}\"\n />",
"slot_props": "{}"
}
],
@ -8264,7 +8264,7 @@
{
"name": "__default__",
"default": true,
"fallback": "<div class:cds--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
"fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
"slot_props": "{}"
}
],
@ -9365,8 +9365,8 @@
{
"name": "__default__",
"default": true,
"fallback": "<p class:cds--progress-label=\"{true}\">{label}</p>",
"slot_props": "{ props: { class: 'cds--progress-label' } }"
"fallback": "<p class:bx--progress-label=\"{true}\">{label}</p>",
"slot_props": "{ props: { class: 'bx--progress-label' } }"
}
],
"events": [
@ -12396,7 +12396,7 @@
{
"name": "__default__",
"default": true,
"slot_props": "{ props: { class: 'cds--tag__label' } }"
"slot_props": "{ props: { class: 'bx--tag__label' } }"
},
{
"name": "icon",

22
docs/src/components/ComponentApi.svelte
View file

@ -39,7 +39,7 @@
);
</script>
<p style="margin-bottom: var(--cds-spacing-06)">
<p style="margin-bottom: var(--bx-spacing-06)">
Source code:
<OutboundLink size="lg" inline href="{source}">
{component.filePath}
@ -68,7 +68,7 @@
<InlineSnippet code="{prop.name}" />
{#if prop.reactive}
<div
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
style="white-space: nowrap; margin-top: var(--bx-spacing-03); margin-bottom: var(--bx-spacing-{prop.isRequired
? '01'
: '03'})"
>
@ -134,7 +134,7 @@
{#if component.typedefs.length > 0}
<CodeSnippet
style="margin-top: var(--cds-spacing-08)"
style="margin-top: var(--bx-spacing-08)"
class="my-layout-01-03"
type="multi"
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
@ -216,14 +216,14 @@
<style>
.description {
margin-bottom: var(--cds-spacing-04);
margin-bottom: var(--bx-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
margin-bottom: var(--bx-spacing-02);
}
.overflow {
@ -231,20 +231,20 @@
}
:global(.my-layout-01-03) {
margin-top: var(--cds-spacing-05);
margin-bottom: var(--cds-spacing-07);
margin-top: var(--bx-spacing-05);
margin-bottom: var(--bx-spacing-07);
}
:global(.overflow .cds--structured-list) {
margin-top: var(--cds-spacing-05);
margin-bottom: var(--cds-spacing-09);
:global(.overflow .bx--structured-list) {
margin-top: var(--bx-spacing-05);
margin-bottom: var(--bx-spacing-09);
}
code {
word-break: break-word;
}
:global(.cell .cds--snippet--inline code, .cds--snippet--single pre) {
:global(.cell .bx--snippet--inline code, .bx--snippet--single pre) {
white-space: pre-wrap !important;
}
</style>

2
docs/src/components/InlineSnippet.svelte
View file

@ -11,6 +11,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-03);
margin-bottom: var(--bx-spacing-03);
}
</style>

10
docs/src/components/Preview.svelte
View file

@ -16,9 +16,7 @@
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
<div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
Content loaded in an iframe
</div>
<Button
@ -49,7 +47,7 @@
<style>
.preview {
margin-bottom: var(--cds-spacing-09);
margin-bottom: var(--bx-spacing-09);
margin-left: -1rem;
margin-right: -1rem;
max-width: 66rem;
@ -60,14 +58,14 @@
}
.preview-viewer {
border: 1px solid var(--cds-ui-03);
border: 1px solid var(--bx-ui-03);
border-bottom: 0;
position: relative;
z-index: 9999;
}
.preview-viewer:not(.framed) {
padding: var(--cds-spacing-06) var(--cds-spacing-05);
padding: var(--bx-spacing-06) var(--bx-spacing-05);
}
.preview-viewer.framed {

16
docs/src/components/TileCard.svelte
View file

@ -35,9 +35,9 @@
<svelte:component
this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)"
style="fill: var(--bx-icon-01)"
/>
<Launch size="{20}" style="fill: var(--cds-icon-01)" />
<Launch size="{20}" style="fill: var(--bx-icon-01)" />
</div>
</div>
</svelte:component>
@ -51,11 +51,11 @@
}
.borderRight {
border-right: 1px solid var(--cds-ui-03);
border-right: 1px solid var(--bx-ui-03);
}
.borderBottom {
border-bottom: 1px solid var(--cds-ui-03);
border-bottom: 1px solid var(--bx-ui-03);
}
.card {
@ -72,19 +72,19 @@
}
.title {
margin-top: calc(-1 * var(--cds-spacing-02));
margin-bottom: var(--cds-spacing-01);
margin-top: calc(-1 * var(--bx-spacing-02));
margin-bottom: var(--bx-spacing-01);
}
.subtitle {
color: var(--cds-text-02);
color: var(--bx-text-02);
}
@media (max-width: 671px) {
.card-wrapper,
.borderRight {
border-right: 0;
border-bottom: 1px solid var(--cds-ui-03);
border-bottom: 1px solid var(--bx-ui-03);
}
}
</style>

162
docs/src/global.css
View file

@ -1,35 +1,35 @@
html[theme="g90"] .code-override {
border: 1px solid var(--cds-border-subtle-01);
border: 1px solid var(--bx-border-subtle-01);
}
.code-override .cds--snippet {
.code-override .bx--snippet {
max-width: none;
}
.code-override .cds--copy-btn,
.code-override .cds--snippet,
.code-override button.cds--btn.cds--snippet-btn--expand {
.code-override .bx--copy-btn,
.code-override .bx--snippet,
.code-override button.bx--btn.bx--snippet-btn--expand {
background-color: #262626;
color: #f4f4f4;
}
.code-override .cds--copy-btn:hover,
.code-override button.cds--btn.cds--snippet-btn--expand:hover {
.code-override .bx--copy-btn:hover,
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
background-color: #393939;
}
.code-override .cds--snippet__icon {
.code-override .bx--snippet__icon {
fill: #f4f4f4;
}
.code-override .cds--snippet-container pre {
font-size: var(--cds-code-02-font-size);
line-height: var(--cds-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing);
.code-override .bx--snippet-container pre {
font-size: var(--bx-code-02-font-size);
line-height: var(--bx-code-02-line-height);
letter-spacing: var(--bx-code-02-letter-spacing);
cursor: text;
}
.code-override .cds--snippet--multi .cds--snippet-container pre {
.code-override .bx--snippet--multi .bx--snippet-container pre {
overflow-x: auto;
}
@ -84,9 +84,9 @@ html[theme="g90"] .code-override {
color: #bebebe;
}
.override-tabs a.cds--tabs__nav-link,
.override-tabs a.cds--tabs__nav-link:focus,
.override-tabs a.cds--tabs__nav-link:active {
.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
width: auto !important;
}
@ -112,13 +112,13 @@ html[theme="g90"] .code-override {
}
}
.prose > p > .cds--link {
.prose > p > .bx--link {
font-size: inherit;
text-decoration: underline;
}
.prose .toc {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
.table {
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
max-height: calc(100vh - 3rem);
top: 3rem;
margin-top: -3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
padding-top: var(--bx-spacing-05);
padding-bottom: var(--bx-spacing-05);
padding-left: var(--bx-spacing-08);
overflow-y: auto;
}
@ -137,7 +137,7 @@ html[theme="g90"] .code-override {
display: flex;
}
[data-components] .cds--grid {
[data-components] .bx--grid {
width: 100%;
}
@ -147,9 +147,9 @@ html[theme="g90"] .code-override {
}
}
.preview-viewer > .cds--aspect-ratio,
.preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive);
outline: 1px solid var(--bx-interactive);
}
[data-outline] {
@ -157,100 +157,100 @@ html[theme="g90"] .code-override {
}
[data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08);
margin-top: var(--bx-spacing-08);
}
#select-theme {
width: auto;
}
.prose > p > .cds--link {
.prose > p > .bx--link {
font-size: inherit;
}
.prose .toc {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
.code-01 {
font-size: var(--cds-code-01-font-size);
font-weight: var(--cds-code-01-font-weight);
letter-spacing: var(--cds-code-01-letter-spacing);
line-height: var(--cds-code-01-line-height);
font-size: var(--bx-code-01-font-size);
font-weight: var(--bx-code-01-font-weight);
letter-spacing: var(--bx-code-01-letter-spacing);
line-height: var(--bx-code-01-line-height);
}
.body-compact-01 {
font-size: var(--cds-body-compact-01-font-size);
font-weight: var(--cds-body-compact-01-font-weight);
letter-spacing: var(--cds-body-compact-01-letter-spacing);
line-height: var(--cds-body-compact-01-line-height);
font-size: var(--bx-body-compact-01-font-size);
font-weight: var(--bx-body-compact-01-font-weight);
letter-spacing: var(--bx-body-compact-01-letter-spacing);
line-height: var(--bx-body-compact-01-line-height);
}
.cds--col > h1 {
font-size: var(--cds-fluid-heading-05-font-size);
font-weight: var(--cds-fluid-heading-05-font-weight);
letter-spacing: var(--cds-fluid-heading-05-letter-spacing);
line-height: var(--cds-fluid-heading-05-line-height);
margin-bottom: var(--cds-spacing-05);
.bx--col > h1 {
font-size: var(--bx-fluid-heading-05-font-size);
font-weight: var(--bx-fluid-heading-05-font-weight);
letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
line-height: var(--bx-fluid-heading-05-line-height);
margin-bottom: var(--bx-spacing-05);
}
.big-paragraph {
font-size: var(--cds-fluid-heading-03-font-size);
font-weight: var(--cds-fluid-heading-03-font-weight);
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
line-height: var(--cds-fluid-heading-03-line-height);
margin-top: var(--cds-spacing-07);
margin-bottom: var(--cds-spacing-12);
font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--bx-fluid-heading-03-line-height);
margin-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-12);
}
.big-link,
.cds--col > .big-paragraph > code {
font-size: var(--cds-fluid-heading-03-font-size);
font-weight: var(--cds-fluid-heading-03-font-weight);
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
line-height: var(--cds-fluid-heading-03-line-height);
.bx--col > .big-paragraph > code {
font-size: var(--bx-fluid-heading-03-font-size);
font-weight: var(--bx-fluid-heading-03-font-weight);
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
line-height: var(--bx-fluid-heading-03-line-height);
}
.cds--col > p {
.bx--col > p {
max-width: 44rem;
}
.cds--col > p > code {
font-size: var(--cds-code-02-font-size);
font-weight: var(--cds-code-02-font-weight);
line-height: var(--cds-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing);
background-color: var(--cds-layer-accent-01);
.bx--col > p > code {
font-size: var(--bx-code-02-font-size);
font-weight: var(--bx-code-02-font-weight);
line-height: var(--bx-code-02-line-height);
letter-spacing: var(--bx-code-02-letter-spacing);
background-color: var(--bx-layer-accent-01);
border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02);
padding: 0 var(--bx-spacing-02);
}
[class*="cds--col"] > h2,
.cds--tab-content > h2 {
font-size: var(--cds-fluid-heading-04-font-size);
font-weight: var(--cds-fluid-heading-04-font-weight);
letter-spacing: var(--cds-fluid-heading-04-letter-spacing);
line-height: var(--cds-fluid-heading-04-line-height);
padding-top: var(--cds-spacing-07);
margin-bottom: var(--cds-spacing-05);
[class*="bx--col"] > h2,
.bx--tab-content > h2 {
font-size: var(--bx-fluid-heading-04-font-size);
font-weight: var(--bx-fluid-heading-04-font-weight);
letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
line-height: var(--bx-fluid-heading-04-line-height);
padding-top: var(--bx-spacing-07);
margin-bottom: var(--bx-spacing-05);
}
.cds--col > h4 {
font-size: var(--cds-fluid-heading-02-font-size);
font-weight: var(--cds-fluid-heading-02-font-weight);
letter-spacing: var(--cds-fluid-heading-02-letter-spacing);
line-height: var(--cds-fluid-heading-02-line-height);
padding-top: var(--cds-spacing-09);
margin-bottom: var(--cds-spacing-05);
.bx--col > h4 {
font-size: var(--bx-fluid-heading-02-font-size);
font-weight: var(--bx-fluid-heading-02-font-weight);
letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
line-height: var(--bx-fluid-heading-02-line-height);
padding-top: var(--bx-spacing-09);
margin-bottom: var(--bx-spacing-05);
}
.cds--col > h2,
.cds--tab-content > h2,
.cds--col > h3,
.cds--col > h4 {
.bx--col > h2,
.bx--tab-content > h2,
.bx--col > h3,
.bx--col > h4 {
scroll-margin-top: 3rem;
}
.cds--col > p {
margin-bottom: var(--cds-spacing-06);
.bx--col > p {
margin-bottom: var(--bx-spacing-06);
}

12
docs/src/layouts/ComponentLayout.svelte
View file

@ -149,7 +149,7 @@
{#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" />
{/each}
<div slot="content" style="padding-top: var(--cds-spacing-06)">
<div slot="content" style="padding-top: var(--bx-spacing-06)">
{#each api_components as component (component.moduleName)}
<TabContent>
<ComponentApi component="{component}" />
@ -176,13 +176,13 @@
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-spacing-06);
border-bottom: 1px solid var(--cds-ui-03);
margin-bottom: var(--bx-spacing-06);
border-bottom: 1px solid var(--bx-ui-03);
}
:global(.toc h5) {
margin-top: var(--cds-spacing-06);
margin-bottom: var(--cds-spacing-03);
margin-top: var(--bx-spacing-06);
margin-bottom: var(--bx-spacing-03);
}
.toc.mobile {
@ -192,7 +192,7 @@
@media (max-width: 1056px) {
.toc.mobile {
display: block;
margin-bottom: var(--cds-spacing-09);
margin-bottom: var(--bx-spacing-09);
}
}
</style>

2
docs/src/pages/components/Breakpoint.svx
View file

@ -8,7 +8,7 @@
The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem>
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>

2
docs/src/pages/components/DataTable.svx
View file

@ -333,7 +333,7 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
<div class="body-short-01">Custom column widths do not work with a <a class="cds--link" href="#sticky-header">sticky header</a>.</div>
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div>
</InlineNotification>
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />

2
docs/src/pages/components/FileUploader.svx
View file

@ -44,7 +44,7 @@ See the [item examples below](#item-uploading) for different statuses.
There are two ways to clear files in `FileUploader`:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList>

36
docs/src/pages/components/Popover.svx
View file

@ -14,7 +14,7 @@ By default, the position of the popover component is absolute.
<div data-outline>
<Popover open>
Parent
<PopoverContent style="padding: var(--cds-spacing-05)">Content</PopoverContent>
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
</Popover>
</div>
@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline>
Parent
<Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline>
Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -49,67 +49,67 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover open align="top-left">
<div style="padding: var(--cds-spacing-05)">top-left</div>
<div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div>
<div style="padding: var(--bx-spacing-05)">top-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div>
<div style="padding: var(--bx-spacing-05)">bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-left">
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div>
<div style="padding: var(--bx-spacing-05)">left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-bottom">
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div>
<div style="padding: var(--bx-spacing-05)">left-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div>
<div style="padding: var(--bx-spacing-05)">right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-bottom">
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div>
<div style="padding: var(--bx-spacing-05)">right-top</div>
</Popover>
</div>
@ -118,7 +118,7 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -149,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>

2
docs/src/pages/components/StructuredList.svx
View file

@ -170,7 +170,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
/>
<StructuredListCell>
<CheckmarkFilled
class="cds--structured-list-svg"
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option"
/>

2
docs/src/pages/components/TreeView.svx
View file

@ -23,7 +23,7 @@ By default, each item renders the value of `node.text`. Use the data from `let:n
The destructured `let:node` contains the following properties:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem><strong>id</strong>: the node id</ListItem>
<ListItem><strong>text</strong>: the node text</ListItem>
<ListItem><strong>expanded</strong>: true if the node is expanded</ListItem>

2
docs/src/pages/components/Truncate.svx
View file

@ -4,7 +4,7 @@
import Preview from "../../components/Preview.svelte";
</script>
This utility component wraps the `.cds--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
This utility component wraps the `.bx--text-truncate-*` Sass mixins from [@carbon/styles](https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/utilities/_text-truncate.scss) for single-line text truncation.
## Default

4
docs/src/pages/framed/Breakpoint/Breakpoint.svelte
View file

@ -20,10 +20,10 @@
<style>
p,
h1 {
margin-bottom: var(--cds-spacing-08);
margin-bottom: var(--bx-spacing-08);
}
h6 {
margin-bottom: var(--cds-spacing-03);
margin-bottom: var(--bx-spacing-03);
}
</style>

2
docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
View file

@ -6,7 +6,7 @@
<Checkbox labelText="Label text" bind:checked="{checked}" />
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
</div>

2
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -9,7 +9,7 @@
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
{/each}
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div>

2
docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
View file

@ -11,6 +11,6 @@
bind:toggled="{toggled}"
size="sm"
labelText="Trigger snippet overflow"
style="margin-bottom: var(--cds-spacing-05)"
style="margin-bottom: var(--bx-spacing-05)"
/>
<CodeSnippet type="multi" code="{code}" />

2
docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
View file

@ -8,7 +8,7 @@
<Toggle
size="sm"
style="margin-bottom: var(--cds-spacing-05)"
style="margin-bottom: var(--bx-spacing-05)"
labelText="Show code snippets"
bind:toggled="{toggled}"
/>

2
docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
View file

@ -23,7 +23,7 @@
</ComboBox>
<style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto;
}
</style>

2
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

@ -37,6 +37,6 @@
<style>
div {
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

2
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
View file

@ -24,6 +24,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

6
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -51,11 +51,11 @@
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--bx-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
color: var(--bx-text-02);
}
</style>

6
docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
View file

@ -29,11 +29,11 @@
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--bx-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
color: var(--bx-text-02);
}
</style>

8
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -46,15 +46,15 @@
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--bx-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
color: var(--bx-text-02);
}
p {
outline: 1px solid var(--cds-interactive-01);
outline: 1px solid var(--bx-interactive-01);
}
</style>

8
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -51,15 +51,15 @@
<style>
div {
position: absolute;
width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--cds-spacing-06));
width: calc(100% - var(--bx-spacing-05));
height: calc(100% - var(--bx-spacing-06));
display: flex;
align-items: center;
justify-content: center;
color: var(--cds-text-02);
color: var(--bx-text-02);
}
p {
outline: 1px solid var(--cds-interactive-01);
outline: 1px solid var(--bx-interactive-01);
}
</style>

2
docs/src/pages/framed/Dropdown/DropdownSlot.svelte
View file

@ -23,7 +23,7 @@
</Dropdown>
<style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto;
}
</style>

2
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
View file

@ -37,6 +37,6 @@
<style>
div {
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

4
docs/src/pages/framed/Grid/PaddedGrid.svelte
View file

@ -43,7 +43,7 @@
<style>
div {
margin-top: var(--cds-spacing-05);
padding: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
padding: var(--bx-spacing-05);
}
</style>

4
docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
View file

@ -23,11 +23,11 @@
</MultiSelect>
<style>
:global(.cds--list-box__menu-item, .cds--list-box__menu-item__option) {
:global(.bx--list-box__menu-item, .bx--list-box__menu-item__option) {
height: auto;
}
:global(.cds--checkbox-label-text) {
:global(.bx--checkbox-label-text) {
display: block;
}
</style>

2
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
View file

@ -39,6 +39,6 @@
<style>
div {
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
}
</style>

2
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
View file

@ -6,7 +6,7 @@
<NumberInput allowEmpty bind:value="{value}" />
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (value = null)}">Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button>
</div>

2
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
View file

@ -6,7 +6,7 @@
<PaginationNav bind:page="{page}" />
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (page = 1)}" disabled="{page === 0}">
Set page to 1
</Button>

4
docs/src/pages/framed/Popover/WithButton.svelte
View file

@ -8,13 +8,13 @@
<div bind:this="{ref}" style:position="relative">
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
<Popover
bind:open
bind:open="{open}"
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
open = ref.contains(detail.target);
}}"
>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>

2
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
View file

@ -21,7 +21,7 @@
status="{status}"
/>
<ButtonSet style="margin-top: var(--cds-spacing-08)">
<ButtonSet style="margin-top: var(--bx-spacing-08)">
<Button
disabled="{value > 0}"
on:click="{() => {

2
docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
View file

@ -32,7 +32,7 @@
/>
</ProgressIndicator>
<div style="margin: var(--cds-spacing-06) 0">
<div style="margin: var(--bx-spacing-06) 0">
<Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
on:click="{() => {

2
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
View file

@ -20,7 +20,7 @@
{/each}
</RadioButtonGroup>
<div style="margin: var(--cds-layout-03) 0">
<div style="margin: var(--bx-layout-03) 0">
{#each plans as value (value)}
<Button
size="small"

2
docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
View file

@ -30,6 +30,6 @@
<style>
div {
margin: var(--cds-spacing-05) 0;
margin: var(--bx-spacing-05) 0;
}
</style>

2
docs/src/pages/framed/Search/SearchReactive.svelte
View file

@ -30,6 +30,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/Select/SelectReactive.svelte
View file

@ -11,7 +11,7 @@
<SelectItem value="g100" text="Gray 100" />
</Select>
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
Selected: <strong>{selected}</strong>
</div>

2
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -15,7 +15,7 @@
</svelte:fragment>
</Tabs>
<div style="margin: var(--cds-spacing-05) 0">
<div style="margin: var(--bx-spacing-05) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button>
</div>

2
docs/src/pages/framed/Toggle/ToggleReactive.svelte
View file

@ -17,6 +17,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

4
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -8,7 +8,7 @@
<p>Resources are provisioned based on your account's organization.</p>
</Tooltip>
<div style="margin-top: var(--cds-spacing-12);">
<div style="margin-top: var(--bx-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}">
{open ? "Close tooltip" : "Open tooltip"}
</Button>
@ -18,6 +18,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeView.svelte
View file

@ -60,6 +60,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewActive.svelte
View file

@ -60,6 +60,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
View file

@ -58,6 +58,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte
View file

@ -66,6 +66,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte
View file

@ -56,6 +56,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte
View file

@ -62,6 +62,6 @@
<style>
div {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewExpanded.svelte
View file

@ -63,6 +63,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -89,6 +89,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewMultiselect.svelte
View file

@ -60,6 +60,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/TreeView/TreeViewShowNode.svelte
View file

@ -28,7 +28,7 @@
];
</script>
<ButtonSet style="margin-bottom: var(--cds-spacing-05)">
<ButtonSet style="margin-bottom: var(--bx-spacing-05)">
{#each [nodeSpark, nodeBlockchain] as { id, text }}
<Button
on:click="{() => {

2
docs/src/pages/framed/TreeView/TreeViewSlot.svelte
View file

@ -53,7 +53,7 @@
let:node
>
<span
style:color="{node.selected ? "var(--cds-interactive-04)" : "inherit"}"
style:color="{node.selected ? "var(--bx-interactive-04)" : "inherit"}"
style:text-decoration="{node.disabled ? "inherit" : "underline"}"
>
{node.text} (id: {node.id})

2
docs/src/pages/framed/TreeView/TreeViewXs.svelte
View file

@ -61,6 +61,6 @@
<style>
div {
margin-top: var(--cds-spacing-05);
margin-top: var(--bx-spacing-05);
}
</style>

2
docs/src/pages/framed/UIShell/HeaderSearch.svelte
View file

@ -116,7 +116,7 @@
</p>
<div style="overflow-x: scroll;">
{#each events as { type, ...rest }}
<div style="display: block; margin-bottom: var(--cds-spacing-05)">
<div style="display: block; margin-bottom: var(--bx-spacing-05)">
<div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre>

8
docs/src/pages/framed/_reset.svelte
View file

@ -31,14 +31,14 @@
:global(body.framed) {
min-height: 100vh;
width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05);
padding: var(--bx-spacing-06) var(--bx-spacing-05);
}
:global(.framed :not(.cds--content) [class^="cds--col"]) {
outline: 1px solid var(--cds-interactive-04);
:global(.framed :not(.bx--content) [class^="bx--col"]) {
outline: 1px solid var(--bx-interactive-04);
}
:global(.framed .cds--content [class^="cds--col"]) {
:global(.framed .bx--content [class^="bx--col"]) {
outline: 0;
}
</style>

16
docs/src/pages/index.svelte
View file

@ -91,12 +91,12 @@
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-spacing-06)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-spacing-06)">Installation</h2>
<h2 style="margin-top: var(--bx-spacing-06)">Installation</h2>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-spacing-06)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column noGutter>
<Tabs>
<Tab label="NPM" />
@ -116,7 +116,7 @@
</Tabs>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-spacing-09)">
<Row style="margin-bottom: var(--bx-spacing-09)">
<Column>
<h2>Styling</h2>
<p>
@ -125,7 +125,7 @@
light, 2 dark).
</p>
<RadioButtonGroup
style="margin-top: var(--cds-spacing-08)"
style="margin-top: var(--bx-spacing-08)"
legendText="Carbon themes"
bind:selected="{$theme}"
>
@ -215,7 +215,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-spacing-06)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column>
<h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -247,7 +247,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-spacing-06)">
<Row style="margin-bottom: var(--bx-spacing-06)">
<Column>
<h2>Portfolio</h2>
<p>
@ -313,6 +313,6 @@
<style>
p {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>

30
docs/svelte.config.js
View file

@ -134,7 +134,7 @@ function plugin() {
function carbonify() {
return (tree) => {
visit(tree, "link", (node) => {
node.data = { hProperties: { class: "cds--link" } };
node.data = { hProperties: { class: "bx--link" } };
});
};
}
@ -188,31 +188,31 @@ export default {
code: content.replace(
"</Layout_MDSVEX_DEFAULT>",
`<div slot="aside">
<ul class="cds--list--unordered">
<ul class="bx--list--unordered">
${toc
.map(
(item) =>
`<li class="cds--list__item"><a class="cds--link" href="\#${item.id}">${item.text}</a></li>`
`<li class="bx--list__item"><a class="bx--link" href="\#${item.id}">${item.text}</a></li>`
)
.join("")}
<h5>Component API</h5>
<li class="cds--list__item">
<a class="cds--link" href="#props">Props</a>
<li class="bx--list__item">
<a class="bx--link" href="#props">Props</a>
</li>
<li class="cds--list__item">
<a class="cds--link" href="#typedefs">Typedefs</a>
<li class="bx--list__item">
<a class="bx--link" href="#typedefs">Typedefs</a>
</li>
<li class="cds--list__item">
<a class="cds--link" href="#slots">Slots</a>
<li class="bx--list__item">
<a class="bx--link" href="#slots">Slots</a>
</li>
<li class="cds--list__item">
<a class="cds--link" href="#forwarded-events">Forwarded events</a>
<li class="bx--list__item">
<a class="bx--link" href="#forwarded-events">Forwarded events</a>
</li>
<li class="cds--list__item">
<a class="cds--link" href="#dispatched-events">Dispatched events</a>
<li class="bx--list__item">
<a class="bx--link" href="#dispatched-events">Dispatched events</a>
</li>
<li class="cds--list__item">
<a class="cds--link" href="#rest-props">restProps</a>
<li class="bx--list__item">
<a class="bx--link" href="#rest-props">restProps</a>
</li>
</ul>
</div>