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: stick to bx instead of cds class prefix

Browse source
This commit is contained in:
Gregor Wassmann 2022-10-12 00:17:15 +02:00
commit 526c574dd2
56 changed files with 191 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,7 @@
); );
</script> </script>
<p style="margin-bottom: var(--cds-layout-02)"> <p style="margin-bottom: var(--bx-layout-02)">
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(--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' ? '01'
: '03'})" : '03'})"
> >
@ -134,7 +134,7 @@
{#if component.typedefs.length > 0} {#if component.typedefs.length > 0}
<CodeSnippet <CodeSnippet
style="margin-top: var(--cds-spacing-08)" style="margin-top: var(--bx-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(--cds-spacing-04); margin-bottom: var(--bx-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(--cds-spacing-02); margin-bottom: var(--bx-spacing-02);
} }
.overflow { .overflow {
@ -231,13 +231,13 @@
} }
:global(.my-layout-01-03) { :global(.my-layout-01-03) {
margin-top: var(--cds-layout-01); margin-top: var(--bx-layout-01);
margin-bottom: var(--cds-layout-03); margin-bottom: var(--bx-layout-03);
} }
:global(.overflow .bx--structured-list) { :global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01); margin-top: var(--bx-layout-01);
margin-bottom: var(--cds-layout-04); margin-bottom: var(--bx-layout-04);
} }
code { code {

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

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

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

@ -16,9 +16,7 @@
<div class="preview"> <div class="preview">
{#if framed} {#if framed}
<div class="framed-header"> <div class="framed-header">
<div <div style="margin-left: var(--bx-spacing-05); color: var(--bx-text-02)">
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
@ -49,7 +47,7 @@
<style> <style>
.preview { .preview {
margin-bottom: var(--cds-layout-04); margin-bottom: var(--bx-layout-04);
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
max-width: 66rem; max-width: 66rem;
@ -60,14 +58,14 @@
} }
.preview-viewer { .preview-viewer {
border: 1px solid var(--cds-ui-03); border: 1px solid var(--bx-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(--cds-spacing-06) var(--cds-spacing-05); padding: var(--bx-spacing-06) var(--bx-spacing-05);
} }
.preview-viewer.framed { .preview-viewer.framed {

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

@ -31,9 +31,9 @@
<svelte:component <svelte:component
this="{LogoGithub}" this="{LogoGithub}"
size="{32}" 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>
</div> </div>
</svelte:component> </svelte:component>
@ -47,11 +47,11 @@
} }
.borderRight { .borderRight {
border-right: 1px solid var(--cds-ui-03); border-right: 1px solid var(--bx-ui-03);
} }
.borderBottom { .borderBottom {
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
.card { .card {
@ -68,19 +68,19 @@
} }
.title { .title {
margin-top: calc(-1 * var(--cds-spacing-02)); margin-top: calc(-1 * var(--bx-spacing-02));
margin-bottom: var(--cds-spacing-01); margin-bottom: var(--bx-spacing-01);
} }
.subtitle { .subtitle {
color: var(--cds-text-02); color: var(--bx-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(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
} }
</style> </style>

106
docs/src/global.css
View file

@ -1,5 +1,5 @@
html[theme="g90"] .code-override { html[theme="g90"] .code-override {
border: 1px solid var(--cds-ui-03); border: 1px solid var(--bx-ui-03);
} }
.code-override .bx--snippet { .code-override .bx--snippet {
@ -23,9 +23,9 @@ html[theme="g90"] .code-override {
} }
.code-override .bx--snippet-container pre { .code-override .bx--snippet-container pre {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
cursor: text; cursor: text;
} }
@ -118,7 +118,7 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-layout-01);
} }
.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(--cds-spacing-05); padding-top: var(--bx-spacing-05);
padding-bottom: var(--cds-spacing-05); padding-bottom: var(--bx-spacing-05);
padding-left: var(--cds-spacing-08); padding-left: var(--bx-spacing-08);
overflow-y: auto; overflow-y: auto;
} }
@ -149,7 +149,7 @@ html[theme="g90"] .code-override {
.preview-viewer > .bx--aspect-ratio, .preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] { .preview-viewer [data-outline] {
outline: 1px solid var(--cds-interactive-04); outline: 1px solid var(--bx-interactive-04);
} }
[data-outline] { [data-outline] {
@ -157,7 +157,7 @@ html[theme="g90"] .code-override {
} }
[data-outline] ~ [data-outline] { [data-outline] ~ [data-outline] {
margin-top: var(--cds-spacing-08); margin-top: var(--bx-spacing-08);
} }
#select-theme { #select-theme {
@ -169,46 +169,46 @@ html[theme="g90"] .code-override {
} }
.prose .toc { .prose .toc {
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-layout-01);
} }
.code-01 { .code-01 {
font-size: var(--cds-code-01-font-size); font-size: var(--bx-code-01-font-size);
font-weight: var(--cds-code-01-font-weight); font-weight: var(--bx-code-01-font-weight);
letter-spacing: var(--cds-code-01-letter-spacing); letter-spacing: var(--bx-code-01-letter-spacing);
line-height: var(--cds-code-01-line-height); line-height: var(--bx-code-01-line-height);
} }
.body-short-01 { .body-short-01 {
font-size: var(--cds-body-short-01-font-size); font-size: var(--bx-body-short-01-font-size);
font-weight: var(--cds-body-short-01-font-weight); font-weight: var(--bx-body-short-01-font-weight);
letter-spacing: var(--cds-body-short-01-letter-spacing); letter-spacing: var(--bx-body-short-01-letter-spacing);
line-height: var(--cds-body-short-01-line-height); line-height: var(--bx-body-short-01-line-height);
} }
.bx--col > h1 { .bx--col > h1 {
font-size: var(--cds-expressive-heading-05-font-size); font-size: var(--bx-expressive-heading-05-font-size);
font-weight: var(--cds-expressive-heading-05-font-weight); font-weight: var(--bx-expressive-heading-05-font-weight);
letter-spacing: var(--cds-expressive-heading-05-letter-spacing); letter-spacing: var(--bx-expressive-heading-05-letter-spacing);
line-height: var(--cds-expressive-heading-05-line-height); line-height: var(--bx-expressive-heading-05-line-height);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-layout-01);
} }
.big-paragraph { .big-paragraph {
font-size: var(--cds-expressive-heading-03-font-size); font-size: var(--bx-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight); font-weight: var(--bx-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing); letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height); line-height: var(--bx-expressive-heading-03-line-height);
margin-top: var(--cds-layout-03); margin-top: var(--bx-layout-03);
margin-bottom: var(--cds-layout-06); margin-bottom: var(--bx-layout-06);
} }
.big-link, .big-link,
.bx--col > .big-paragraph > code { .bx--col > .big-paragraph > code {
font-size: var(--cds-expressive-heading-03-font-size); font-size: var(--bx-expressive-heading-03-font-size);
font-weight: var(--cds-expressive-heading-03-font-weight); font-weight: var(--bx-expressive-heading-03-font-weight);
letter-spacing: var(--cds-expressive-heading-03-letter-spacing); letter-spacing: var(--bx-expressive-heading-03-letter-spacing);
line-height: var(--cds-expressive-heading-03-line-height); line-height: var(--bx-expressive-heading-03-line-height);
} }
.bx--col > p { .bx--col > p {
@ -216,32 +216,32 @@ html[theme="g90"] .code-override {
} }
.bx--col > p > code { .bx--col > p > code {
font-size: var(--cds-code-02-font-size); font-size: var(--bx-code-02-font-size);
font-weight: var(--cds-code-02-font-weight); font-weight: var(--bx-code-02-font-weight);
line-height: var(--cds-code-02-line-height); line-height: var(--bx-code-02-line-height);
letter-spacing: var(--cds-code-02-letter-spacing); letter-spacing: var(--bx-code-02-letter-spacing);
background-color: var(--cds-ui-03); background-color: var(--bx-ui-03);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0 var(--cds-spacing-02); padding: 0 var(--bx-spacing-02);
} }
[class*="bx--col"] > h2, [class*="bx--col"] > h2,
.bx--tab-content > h2 { .bx--tab-content > h2 {
font-size: var(--cds-expressive-heading-04-font-size); font-size: var(--bx-expressive-heading-04-font-size);
font-weight: var(--cds-expressive-heading-04-font-weight); font-weight: var(--bx-expressive-heading-04-font-weight);
letter-spacing: var(--cds-expressive-heading-04-letter-spacing); letter-spacing: var(--bx-expressive-heading-04-letter-spacing);
line-height: var(--cds-expressive-heading-04-line-height); line-height: var(--bx-expressive-heading-04-line-height);
padding-top: var(--cds-layout-03); padding-top: var(--bx-layout-03);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-layout-01);
} }
.bx--col > h4 { .bx--col > h4 {
font-size: var(--cds-expressive-heading-02-font-size); font-size: var(--bx-expressive-heading-02-font-size);
font-weight: var(--cds-expressive-heading-02-font-weight); font-weight: var(--bx-expressive-heading-02-font-weight);
letter-spacing: var(--cds-expressive-heading-02-letter-spacing); letter-spacing: var(--bx-expressive-heading-02-letter-spacing);
line-height: var(--cds-expressive-heading-02-line-height); line-height: var(--bx-expressive-heading-02-line-height);
padding-top: var(--cds-layout-04); padding-top: var(--bx-layout-04);
margin-bottom: var(--cds-layout-01); margin-bottom: var(--bx-layout-01);
} }
.bx--col > h2, .bx--col > h2,
@ -252,5 +252,5 @@ html[theme="g90"] .code-override {
} }
.bx--col > p { .bx--col > p {
margin-bottom: var(--cds-layout-02); margin-bottom: var(--bx-layout-02);
} }

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

@ -142,7 +142,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(--cds-spacing-06)"> <div slot="content" style="padding-top: var(--bx-spacing-06)">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<TabContent> <TabContent>
<ComponentApi component="{component}" /> <ComponentApi component="{component}" />
@ -169,13 +169,13 @@
.bar { .bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--cds-layout-02); margin-bottom: var(--bx-layout-02);
border-bottom: 1px solid var(--cds-ui-03); border-bottom: 1px solid var(--bx-ui-03);
} }
:global(.toc h5) { :global(.toc h5) {
margin-top: var(--cds-spacing-06); margin-top: var(--bx-spacing-06);
margin-bottom: var(--cds-spacing-03); margin-bottom: var(--bx-spacing-03);
} }
.toc.mobile { .toc.mobile {
@ -185,7 +185,7 @@
@media (max-width: 1056px) { @media (max-width: 1056px) {
.toc.mobile { .toc.mobile {
display: block; display: block;
margin-bottom: var(--cds-spacing-09); margin-bottom: var(--bx-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(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-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>

4
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(--cds-spacing-08)"> <UnorderedList svx-ignore style="margin-bottom: var(--bx-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>
@ -111,7 +111,7 @@ The following example accepts files smaller than 1 kB.
<FileUploaderDropContainer <FileUploaderDropContainer
multiple multiple
labelText="Drag and drop files here or click to upload" labelText="Drag and drop files here or click to upload"
validateFiles={files => { validateFiles={files => {
return files.filter(file => file.size < 1_024) return files.filter(file => file.size < 1_024)
}} }}

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

@ -10,7 +10,7 @@ By default, the position of the popover component is absolute.
<div data-outline> <div data-outline>
Parent Parent
<Popover open> <Popover open>
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -21,7 +21,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -32,7 +32,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -45,67 +45,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(--cds-spacing-05)">top-left</div> <div style="padding: var(--bx-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(--cds-spacing-05)">top-right</div> <div style="padding: var(--bx-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(--cds-spacing-05)">bottom</div> <div style="padding: var(--bx-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(--cds-spacing-05)">bottom-left</div> <div style="padding: var(--bx-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(--cds-spacing-05)">bottom-right</div> <div style="padding: var(--bx-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(--cds-spacing-05)">left</div> <div style="padding: var(--bx-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(--cds-spacing-05)">left-bottom</div> <div style="padding: var(--bx-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(--cds-spacing-05)">left-right</div> <div style="padding: var(--bx-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(--cds-spacing-05)">right</div> <div style="padding: var(--bx-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(--cds-spacing-05)">right-bottom</div> <div style="padding: var(--bx-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(--cds-spacing-05)">right-top</div> <div style="padding: var(--bx-spacing-05)">right-top</div>
</Popover> </Popover>
</div> </div>
@ -114,7 +114,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -127,7 +127,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -136,7 +136,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
@ -145,7 +145,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(--cds-spacing-05)">Content</div> <div style="padding: var(--bx-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

@ -37,6 +37,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-layout-01) 0 var(--bx-layout-03);
} }
</style> </style>

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

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

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

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

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

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

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

@ -37,6 +37,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-layout-01) 0 var(--bx-layout-03);
} }
</style> </style>

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

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

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

@ -39,6 +39,6 @@
<style> <style>
div { div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03); margin: var(--bx-layout-01) 0 var(--bx-layout-03);
} }
</style> </style>

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

@ -6,7 +6,7 @@
<NumberInput allowEmpty bind:value /> <NumberInput allowEmpty bind:value />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--bx-layout-01) 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,6 +17,6 @@
<style> <style>
div { div {
margin-top: var(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </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> <p>Resources are provisioned based on your account's organization.</p>
</Tooltip> </Tooltip>
<div style="margin-top: var(--cds-spacing-12);"> <div style="margin-top: var(--bx-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(--cds-spacing-05); margin-top: var(--bx-spacing-05);
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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(--cds-layout-01)"> <div style="display: block; margin-bottom: var(--bx-layout-01)">
<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>

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

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

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

@ -88,12 +88,12 @@
</p> </p>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-layout-02)">
<Column max="{10}" xlg="{10}"> <Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-layout-02)">Installation</h2> <h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-layout-02)">
<Column noGutter> <Column noGutter>
<Tabs> <Tabs>
<Tab label="Yarn" /> <Tab label="Yarn" />
@ -113,7 +113,7 @@
</Tabs> </Tabs>
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-04)"> <Row style="margin-bottom: var(--bx-layout-04)">
<Column> <Column>
<h2>Styling</h2> <h2>Styling</h2>
<p> <p>
@ -122,7 +122,7 @@
light, 3 dark). light, 3 dark).
</p> </p>
<RadioButtonGroup <RadioButtonGroup
style="margin-top: var(--cds-spacing-08)" style="margin-top: var(--bx-spacing-08)"
legendText="Carbon themes" legendText="Carbon themes"
bind:selected="{$theme}" bind:selected="{$theme}"
> >
@ -212,7 +212,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-layout-02)">
<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>
@ -244,7 +244,7 @@
</Column> </Column>
</Row> </Row>
<Row style="margin-bottom: var(--cds-layout-02)"> <Row style="margin-bottom: var(--bx-layout-02)">
<Column> <Column>
<h2>Portfolio</h2> <h2>Portfolio</h2>
<p> <p>
@ -310,6 +310,6 @@
<style> <style>
p { p {
margin-bottom: var(--cds-spacing-05); margin-bottom: var(--bx-spacing-05);
} }
</style> </style>

2
src/Theme/Theme.svelte
View file

@ -79,7 +79,7 @@
$: if (typeof window !== "undefined") { $: if (typeof window !== "undefined") {
Object.entries(tokens).forEach(([token, value]) => { Object.entries(tokens).forEach(([token, value]) => {
document.documentElement.style.setProperty(`--cds-${token}`, value); document.documentElement.style.setProperty(`--bx-${token}`, value);
}); });
if (theme in themes) { if (theme in themes) {

4
tests/AspectRatioColumns.test.svelte
View file

@ -6,13 +6,13 @@
<Row> <Row>
<Column <Column
aspectRatio="2x1" aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
2x1 2x1
</Column> </Column>
<Column <Column
aspectRatio="2x1" aspectRatio="2x1"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
2x1 2x1
</Column> </Column>

8
tests/CondensedGrid.test.svelte
View file

@ -4,9 +4,9 @@
<Grid condensed> <Grid condensed>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
</Row> </Row>
</Grid> </Grid>

8
tests/FullWidthGrid.test.svelte
View file

@ -4,9 +4,9 @@
<Grid fullWidth> <Grid fullWidth>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
</Row> </Row>
</Grid> </Grid>

8
tests/Grid.test.svelte
View file

@ -4,9 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
</Row> </Row>
</Grid> </Grid>

8
tests/NarrowGrid.test.svelte
View file

@ -4,9 +4,9 @@
<Grid narrow> <Grid narrow>
<Row> <Row>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column> <Column style="outline: 1px solid var(--bx-interactive-04)">Column</Column>
</Row> </Row>
</Grid> </Grid>

8
tests/OffsetColumns.test.svelte
View file

@ -6,25 +6,25 @@
<Row> <Row>
<Column <Column
sm="{{ span: 1, offset: 3 }}" sm="{{ span: 1, offset: 3 }}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
Offset 3 Offset 3
</Column> </Column>
<Column <Column
sm="{{ span: 2, offset: 2 }}" sm="{{ span: 2, offset: 2 }}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
Offset 2 Offset 2
</Column> </Column>
<Column <Column
sm="{{ span: 3, offset: 1 }}" sm="{{ span: 3, offset: 1 }}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
Offset 1 Offset 1
</Column> </Column>
<Column <Column
sm="{{ span: 4, offset: 0 }}" sm="{{ span: 4, offset: 0 }}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
Offset 0 Offset 0
</Column> </Column>

8
tests/PaddedGrid.test.svelte
View file

@ -4,16 +4,16 @@
<Grid padding> <Grid padding>
<Row padding> <Row padding>
<Column padding style="outline: 1px solid var(--cds-interactive-04)"> <Column padding style="outline: 1px solid var(--bx-interactive-04)">
Column Column
</Column> </Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)"> <Column padding style="outline: 1px solid var(--bx-interactive-04)">
Column Column
</Column> </Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)"> <Column padding style="outline: 1px solid var(--bx-interactive-04)">
Column Column
</Column> </Column>
<Column padding style="outline: 1px solid var(--cds-interactive-04)"> <Column padding style="outline: 1px solid var(--bx-interactive-04)">
Column Column
</Column> </Column>
</Row> </Row>

2
tests/Popover.test.svelte
View file

@ -16,5 +16,5 @@
console.log('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> </Popover>

8
tests/ResponsiveGrid.test.svelte
View file

@ -8,7 +8,7 @@
sm="{1}" sm="{1}"
md="{4}" md="{4}"
lg="{8}" lg="{8}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
sm: 1, md: 4, lg: 8 sm: 1, md: 4, lg: 8
</Column> </Column>
@ -16,7 +16,7 @@
sm="{1}" sm="{1}"
md="{2}" md="{2}"
lg="{2}" lg="{2}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
sm: 1, md: 2, lg: 2 sm: 1, md: 2, lg: 2
</Column> </Column>
@ -24,7 +24,7 @@
sm="{1}" sm="{1}"
md="{1}" md="{1}"
lg="{1}" lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
sm: 1, md: 1, lg: 1 sm: 1, md: 1, lg: 1
</Column> </Column>
@ -32,7 +32,7 @@
sm="{1}" sm="{1}"
md="{1}" md="{1}"
lg="{1}" lg="{1}"
style="outline: 1px solid var(--cds-interactive-04)" style="outline: 1px solid var(--bx-interactive-04)"
> >
sm: 1, md: 1, lg: 1 sm: 1, md: 1, lg: 1
</Column> </Column>