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: set up all component styles, fonts, and themes

Browse source 
- Adapt documentation to new styles
This commit is contained in:
Enrico Sacchetti 2024-01-10 15:32:56 -05:00
commit fc0d37cf33
58 changed files with 335 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/all.css Normal file
View file

File diff suppressed because one or more lines are too long

34
css/all.scss Normal file
View file

@ -0,0 +1,34 @@
// Use all Carbon themes
@use '@carbon/styles/scss/config' with (
$use-akamai-cdn: true
);
@use "@carbon/styles/scss/theme" as *;
@use "@carbon/styles/scss/themes" as *;
@use "@carbon/styles/scss/fonts";
@use "@carbon/styles/scss/utilities" as *;
:root {
@include theme($white);
}
[data-carbon-theme='g10'] {
@include theme($g10);
}
[data-carbon-theme='g90'] {
@include theme($g90);
}
[data-carbon-theme='g100'] {
@include theme($g100);
}
@import "@carbon/styles/scss/reset";
@import "@carbon/styles/scss/components";
.cds--text-truncate-end {
@include text-truncate-end;
}
.cds--text-truncate-front {
@include text-truncate-front;
}

12
docs/src/COMPONENT_API.json
View file

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

22
docs/src/carbon.scss
View file

@ -1,22 +0,0 @@
@use "@carbon/styles" with (
$prefix: "bx",
$use-flexbox-grid: true
);
@use "@carbon/themes";
@use "@ibm/plex/scss/ibm-plex" with (
$font-prefix: "@ibm/plex"
);
@use "@carbon/styles/scss/utilities" as *;
.bx--text-truncate-end {
@include text-truncate-end;
}
.bx--text-truncate-front {
@include text-truncate-front;
}
:root {
// Emit CSS Custom Properties for the current theme
@include themes.theme();
}

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

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

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

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

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

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

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

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

164
docs/src/global.css
View file

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

2
docs/src/index.js
View file

@ -1,5 +1,5 @@
import App from "./App.svelte"; import App from "./App.svelte";
import "./carbon.scss"; import "carbon-components-svelte/css/all.css";
import "./global.css"; import "./global.css";
const app = new App({ target: document.body }); const app = new App({ target: document.body });

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

@ -150,7 +150,7 @@
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" /> <Tab label="{component.moduleName}" />
{/each} {/each}
<div slot="content" style="padding-top: var(--bx-spacing-06)"> <div slot="content" style="padding-top: var(--cds-spacing-06)">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<TabContent> <TabContent>
<ComponentApi component="{component}" /> <ComponentApi component="{component}" />
@ -177,13 +177,13 @@
.bar { .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--bx-spacing-06); margin-bottom: var(--cds-spacing-06);
border-bottom: 1px solid var(--bx-ui-03); border-bottom: 1px solid var(--cds-ui-03);
} }
:global(.toc h5) { :global(.toc h5) {
margin-top: var(--bx-spacing-06); margin-top: var(--cds-spacing-06);
margin-bottom: var(--bx-spacing-03); margin-bottom: var(--cds-spacing-03);
} }
.toc.mobile { .toc.mobile {
@ -193,7 +193,7 @@
@media (max-width: 1056px) { @media (max-width: 1056px) {
.toc.mobile { .toc.mobile {
display: block; display: block;
margin-bottom: var(--bx-spacing-09); margin-bottom: var(--cds-spacing-09);
} }
} }
</style> </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: 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(--bx-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem><strong>Small</strong>: less than 672px</ListItem> <ListItem><strong>Small</strong>: less than 672px</ListItem>
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem> <ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
<ListItem><strong>Large</strong>: 1056 - 1312px</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. 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> <InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
<div class="body-short-01">Custom column widths do not work with a <a class="bx--link" href="#sticky-header">sticky header</a>.</div> <div class="body-short-01">Custom column widths do not work with a <a class="cds--link" href="#sticky-header">sticky header</a>.</div>
</InlineNotification> </InlineNotification>
<FileSource src="/framed/DataTable/DataTableHeaderWidth" /> <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`: There are two ways to clear files in `FileUploader`:
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem> <ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem> <ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList> </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> <div data-outline>
<Popover open> <Popover open>
Parent Parent
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent> <PopoverContent style="padding: var(--cds-spacing-05)">Content</PopoverContent>
</Popover> </Popover>
</div> </div>
@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline> <div data-outline>
Parent Parent
<Popover relative open> <Popover relative open>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline> <div data-outline>
Parent Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}> <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -49,67 +49,67 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-left"> <Popover open align="top-left">
<div style="padding: var(--bx-spacing-05)">top-left</div> <div style="padding: var(--cds-spacing-05)">top-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="top-right"> <Popover open align="top-right">
<div style="padding: var(--bx-spacing-05)">top-right</div> <div style="padding: var(--cds-spacing-05)">top-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom"> <Popover open align="bottom">
<div style="padding: var(--bx-spacing-05)">bottom</div> <div style="padding: var(--cds-spacing-05)">bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-left"> <Popover open align="bottom-left">
<div style="padding: var(--bx-spacing-05)">bottom-left</div> <div style="padding: var(--cds-spacing-05)">bottom-left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="bottom-right"> <Popover open align="bottom-right">
<div style="padding: var(--bx-spacing-05)">bottom-right</div> <div style="padding: var(--cds-spacing-05)">bottom-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left"> <Popover open align="left">
<div style="padding: var(--bx-spacing-05)">left</div> <div style="padding: var(--cds-spacing-05)">left</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-bottom"> <Popover open align="left-bottom">
<div style="padding: var(--bx-spacing-05)">left-bottom</div> <div style="padding: var(--cds-spacing-05)">left-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="left-right"> <Popover open align="left-right">
<div style="padding: var(--bx-spacing-05)">left-right</div> <div style="padding: var(--cds-spacing-05)">left-right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right"> <Popover open align="right">
<div style="padding: var(--bx-spacing-05)">right</div> <div style="padding: var(--cds-spacing-05)">right</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-bottom"> <Popover open align="right-bottom">
<div style="padding: var(--bx-spacing-05)">right-bottom</div> <div style="padding: var(--cds-spacing-05)">right-bottom</div>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline>
Parent Parent
<Popover open align="right-top"> <Popover open align="right-top">
<div style="padding: var(--bx-spacing-05)">right-top</div> <div style="padding: var(--cds-spacing-05)">right-top</div>
</Popover> </Popover>
</div> </div>
@ -118,7 +118,7 @@ The default `align` value is `"top"`.
<div data-outline> <div data-outline>
Parent Parent
<Popover caret open> <Popover caret open>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover caret align="top-left" open> <Popover caret align="top-left" open>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover light open> <Popover light open>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -149,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline> <div data-outline>
Parent Parent
<Popover highContrast open> <Popover highContrast open>
<div style="padding: var(--bx-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>

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

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

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

@ -4,7 +4,7 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
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. 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.
## Default ## Default

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

@ -5,7 +5,10 @@
let events = []; let events = [];
</script> </script>
<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" /> <Breakpoint
bind:size="{size}"
on:change="{(e) => (events = [...events, e.detail])}"
/>
<p>Resize the width of your browser.</p> <p>Resize the width of your browser.</p>
<h6>Breakpoint size</h6> <h6>Breakpoint size</h6>
@ -17,10 +20,10 @@
<style> <style>
p, p,
h1 { h1 {
margin-bottom: var(--bx-spacing-08); margin-bottom: var(--cds-spacing-08);
} }
h6 { h6 {
margin-bottom: var(--bx-spacing-03); margin-bottom: var(--cds-spacing-03);
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
let selectedIndex = 1; let selectedIndex = 1;
</script> </script>
<ContentSwitcher bind:selectedIndex> <ContentSwitcher bind:selectedIndex="{selectedIndex}">
<Switch text="Latest news" /> <Switch text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
<Switch text="Recommended" /> <Switch text="Recommended" />
@ -24,6 +24,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -23,7 +23,10 @@
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" /> <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds> <ContextMenuGroup
labelText="Export options"
bind:selectedIds="{selectedIds}"
>
<ContextMenuOption id="pdf" labelText="PDF" /> <ContextMenuOption id="pdf" labelText="PDF" />
<ContextMenuOption id="txt" labelText="TXT" /> <ContextMenuOption id="txt" labelText="TXT" />
<ContextMenuOption id="mp3" labelText="MP3" /> <ContextMenuOption id="mp3" labelText="MP3" />
@ -48,11 +51,11 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--bx-spacing-05)); width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--bx-spacing-06)); height: calc(100% - var(--cds-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--bx-text-02); color: var(--cds-text-02);
} }
</style> </style>

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

@ -14,7 +14,7 @@
<ContextMenu> <ContextMenu>
<ContextMenuOption indented labelText="Open" /> <ContextMenuOption indented labelText="Open" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group"> <ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
<ContextMenuOption id="0" labelText="Set as foreground" /> <ContextMenuOption id="0" labelText="Set as foreground" />
<ContextMenuOption id="1" labelText="Set as background" /> <ContextMenuOption id="1" labelText="Set as background" />
</ContextMenuRadioGroup> </ContextMenuRadioGroup>
@ -29,11 +29,11 @@
<style> <style>
div { div {
position: absolute; position: absolute;
width: calc(100% - var(--bx-spacing-05)); width: calc(100% - var(--cds-spacing-05));
height: calc(100% - var(--bx-spacing-06)); height: calc(100% - var(--cds-spacing-06));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--bx-text-02); color: var(--cds-text-02);
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -9,7 +9,7 @@
let thirdStepCurrent = false; let thirdStepCurrent = false;
</script> </script>
<ProgressIndicator bind:currentIndex> <ProgressIndicator bind:currentIndex="{currentIndex}">
<ProgressStep <ProgressStep
complete complete
label="Step 1" label="Step 1"
@ -32,7 +32,7 @@
/> />
</ProgressIndicator> </ProgressIndicator>
<div style="margin: var(--bx-spacing-06) 0"> <div style="margin: var(--cds-spacing-06) 0">
<Button <Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}" kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
on:click="{() => { on:click="{() => {

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

@ -6,7 +6,11 @@
let selected = values[1]; let selected = values[1];
</script> </script>
<TileGroup legend="Service pricing tiers" name="plan" bind:selected> <TileGroup
legend="Service pricing tiers"
name="plan"
bind:selected="{selected}"
>
{#each values as value} {#each values as value}
<RadioTile value="{value}">{value}</RadioTile> <RadioTile value="{value}">{value}</RadioTile>
{/each} {/each}
@ -26,6 +30,6 @@
<style> <style>
div { div {
margin: var(--bx-spacing-05) 0; margin: var(--cds-spacing-05) 0;
} }
</style> </style>

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

@ -4,7 +4,7 @@
let value = ""; let value = "";
</script> </script>
<Search bind:value /> <Search bind:value="{value}" />
<div> <div>
<ButtonSet> <ButtonSet>
@ -30,6 +30,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -4,7 +4,7 @@
let selected = "g10"; let selected = "g10";
</script> </script>
<Select labelText="Carbon theme" bind:selected> <Select labelText="Carbon theme" bind:selected="{selected}">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" /> <SelectItem value="g80" text="Gray 80" />
@ -12,7 +12,7 @@
<SelectItem value="g100" text="Gray 100" /> <SelectItem value="g100" text="Gray 100" />
</Select> </Select>
<div style="margin: var(--bx-spacing-05) 0"> <div style="margin: var(--cds-spacing-05) 0">
Selected: <strong>{selected}</strong> Selected: <strong>{selected}</strong>
</div> </div>

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

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

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

@ -4,7 +4,7 @@
let toggled = true; let toggled = true;
</script> </script>
<Toggle labelText="Push notifications" bind:toggled /> <Toggle labelText="Push notifications" bind:toggled="{toggled}" />
<div> <div>
<Button size="small" on:click="{() => (toggled = !toggled)}"> <Button size="small" on:click="{() => (toggled = !toggled)}">
@ -17,6 +17,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -4,11 +4,11 @@
let open = true; let open = true;
</script> </script>
<Tooltip bind:open triggerText="Resource list" align="start"> <Tooltip bind:open="{open}" triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>
</Tooltip> </Tooltip>
<div style="margin-top: var(--bx-spacing-12);"> <div style="margin-top: var(--cds-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}"> <Button size="small" on:click="{() => (open = !open)}">
{open ? "Close tooltip" : "Open tooltip"} {open ? "Close tooltip" : "Open tooltip"}
</Button> </Button>
@ -18,6 +18,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -51,13 +51,13 @@
<TreeView <TreeView
bind:this="{treeview}" bind:this="{treeview}"
bind:expandedIds bind:expandedIds="{expandedIds}"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
/> />
<style> <style>
div { div {
margin-bottom: var(--bx-spacing-05); margin-bottom: var(--cds-spacing-05);
} }
</style> </style>

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

@ -59,13 +59,13 @@
<TreeView <TreeView
bind:this="{treeview}" bind:this="{treeview}"
bind:expandedIds bind:expandedIds="{expandedIds}"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
/> />
<style> <style>
div { div {
margin-bottom: var(--bx-spacing-05); margin-bottom: var(--cds-spacing-05);
} }
</style> </style>

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

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

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

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

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

@ -49,9 +49,9 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
bind:expandedIds bind:expandedIds="{expandedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -63,6 +63,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -77,8 +77,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -89,6 +89,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -48,8 +48,8 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -60,6 +60,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -49,8 +49,8 @@
size="xs" size="xs"
labelText="Cloud Products" labelText="Cloud Products"
children="{children}" children="{children}"
bind:activeId bind:activeId="{activeId}"
bind:selectedIds bind:selectedIds="{selectedIds}"
on:select="{({ detail }) => console.log('select', detail)}" on:select="{({ detail }) => console.log('select', detail)}"
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle="{({ detail }) => console.log('toggle', detail)}"
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus="{({ detail }) => console.log('focus', detail)}"
@ -61,6 +61,6 @@
<style> <style>
div { div {
margin-top: var(--bx-spacing-05); margin-top: var(--cds-spacing-05);
} }
</style> </style>

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

@ -71,10 +71,10 @@
</svelte:fragment> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderSearch <HeaderSearch
bind:ref bind:ref="{ref}"
bind:active bind:active="{active}"
bind:value bind:value="{value}"
bind:selectedResultIndex bind:selectedResultIndex="{selectedResultIndex}"
placeholder="Search services" placeholder="Search services"
results="{results}" results="{results}"
on:active="{() => { on:active="{() => {
@ -116,7 +116,7 @@
</p> </p>
<div style="overflow-x: scroll;"> <div style="overflow-x: scroll;">
{#each events as { type, ...rest }} {#each events as { type, ...rest }}
<div style="display: block; margin-bottom: var(--bx-spacing-05)"> <div style="display: block; margin-bottom: var(--cds-spacing-05)">
<div><strong>on:{type}</strong></div> <div><strong>on:{type}</strong></div>
{#if Object.keys(rest).length > 0} {#if Object.keys(rest).length > 0}
<pre>{JSON.stringify(rest, null, 2)}</pre> <pre>{JSON.stringify(rest, null, 2)}</pre>

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

@ -16,8 +16,11 @@
// conflict with how the iframe is displayed in the docs. // conflict with how the iframe is displayed in the docs.
// Instead, we want the theme to be overridden in the standalone page. // Instead, we want the theme to be overridden in the standalone page.
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) { if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
document.documentElement.setAttribute("theme", current_theme) document.documentElement.setAttribute("theme", current_theme);
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark"); document.documentElement.style.setProperty(
"color-scheme",
["white", "g10"].includes(current_theme) ? "light" : "dark"
);
} }
} }
</script> </script>
@ -28,14 +31,14 @@
:global(body.framed) { :global(body.framed) {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
padding: var(--bx-spacing-06) var(--bx-spacing-05); padding: var(--cds-spacing-06) var(--cds-spacing-05);
} }
:global(.framed :not(.bx--content) [class^="bx--col"]) { :global(.framed :not(.cds--content) [class^="cds--col"]) {
outline: 1px solid var(--bx-interactive-04); outline: 1px solid var(--cds-interactive-04);
} }
:global(.framed .bx--content [class^="bx--col"]) { :global(.framed .cds--content [class^="cds--col"]) {
outline: 0; outline: 0;
} }
</style> </style>

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

@ -92,45 +92,45 @@
</p> </p>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--bx-spacing-06)"> <Row style="margin-bottom: var(--cds-spacing-06)">
<Column max="{10}" xlg="{10}"> <Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--bx-spacing-06)">Installation</h2> <h2 style="margin-top: var(--cds-spacing-06)">Installation</h2>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--bx-spacing-06)"> <Row style="margin-bottom: var(--cds-spacing-06)">
<Column noGutter> <Column noGutter>
<Tabs> <Tabs>
<Tab label="Yarn" />
<Tab label="NPM" /> <Tab label="NPM" />
<Tab label="pnpm" /> <Tab label="pnpm" />
<Tab label="Yarn" />
<div slot="content" style="margin: 1rem -1rem"> <div slot="content" style="margin: 1rem -1rem">
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installNpm}" /> <CodeSnippet code="{installNpm}" />
</TabContent> </TabContent>
<TabContent> <TabContent>
<CodeSnippet code="{installPnpm}" /> <CodeSnippet code="{installPnpm}" />
</TabContent> </TabContent>
<TabContent>
<CodeSnippet code="{installYarn}" />
</TabContent>
</div> </div>
</Tabs> </Tabs>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--bx-spacing-09)"> <Row style="margin-bottom: var(--cds-spacing-09)">
<Column> <Column>
<h2>Styling</h2> <h2>Styling</h2>
<p> <p>
Before importing components, you will need to first apply Carbon Before importing components, you will need to first apply Carbon
component styles. The Carbon Design System supports five themes (2 component styles. The Carbon Design System supports four themes (2
light, 3 dark). light, 2 dark).
</p> </p>
<RadioButtonGroup <RadioButtonGroup
style="margin-top: var(--bx-spacing-08)" style="margin-top: var(--cds-spacing-08)"
legendText="Carbon themes" legendText="Carbon themes"
bind:selected="{$theme}" bind:selected="{$theme}"
> >
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g90", "g100"] as value}
<RadioButton labelText="{themes[value]}" value="{value}" /> <RadioButton labelText="{themes[value]}" value="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
@ -216,7 +216,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--bx-spacing-06)"> <Row style="margin-bottom: var(--cds-spacing-06)">
<Column> <Column>
<h2>Dynamic theming</h2> <h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p> <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -248,7 +248,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--bx-spacing-06)"> <Row style="margin-bottom: var(--cds-spacing-06)">
<Column> <Column>
<h2>Portfolio</h2> <h2>Portfolio</h2>
<p> <p>
@ -314,6 +314,6 @@
<style> <style>
p { p {
margin-bottom: var(--bx-spacing-05); margin-bottom: var(--cds-spacing-05);
} }
</style> </style>

30
docs/svelte.config.js
View file

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