mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 19:01:05 +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 • committed by Enrico Sacchetti
commit f4ac33c93a
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
55 changed files with 190 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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`:
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
<UnorderedList svx-ignore style="margin-bottom: var(--bx-spacing-08)">
<ListItem>programmatically using the <strong>clearFiles</strong> accessor</ListItem>
<ListItem>two-way binding by setting <strong>files</strong> to <strong>[]</strong></ListItem>
</UnorderedList>
@ -111,7 +111,7 @@ The following example accepts files smaller than 1 kB.
<FileUploaderDropContainer
multiple
labelText="Drag and drop files here or click to upload"
labelText="Drag and drop files here or click to upload"
validateFiles={files => {
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>
Parent
<Popover open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -21,7 +21,7 @@ Set `relative` to `true` to use a relative position.
<div data-outline>
Parent
<Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -32,7 +32,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
<div data-outline>
Parent
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -45,67 +45,67 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover open align="top-left">
<div style="padding: var(--cds-spacing-05)">top-left</div>
<div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="top-right">
<div style="padding: var(--cds-spacing-05)">top-right</div>
<div style="padding: var(--bx-spacing-05)">top-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom">
<div style="padding: var(--cds-spacing-05)">bottom</div>
<div style="padding: var(--bx-spacing-05)">bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-left">
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-right">
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left">
<div style="padding: var(--cds-spacing-05)">left</div>
<div style="padding: var(--bx-spacing-05)">left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-bottom">
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-right">
<div style="padding: var(--cds-spacing-05)">left-right</div>
<div style="padding: var(--bx-spacing-05)">left-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right">
<div style="padding: var(--cds-spacing-05)">right</div>
<div style="padding: var(--bx-spacing-05)">right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-bottom">
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="right-top">
<div style="padding: var(--cds-spacing-05)">right-top</div>
<div style="padding: var(--bx-spacing-05)">right-top</div>
</Popover>
</div>
@ -114,7 +114,7 @@ The default `align` value is `"top"`.
<div data-outline>
Parent
<Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -127,7 +127,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -136,7 +136,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>
@ -145,7 +145,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div data-outline>
Parent
<Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
</div>

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

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

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

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

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

@ -9,7 +9,7 @@
<Checkbox bind:group labelText="{value}" value="{value}" />
{/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>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,7 +6,7 @@
<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 = 0)}">Set to 0</Button>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -28,11 +28,11 @@
:global(body.framed) {
min-height: 100vh;
width: 100%;
padding: var(--cds-spacing-06) var(--cds-spacing-05);
padding: var(--bx-spacing-06) var(--bx-spacing-05);
}
:global(.framed :not(.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"]) {

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

@ -92,12 +92,12 @@
</p>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Row style="margin-bottom: var(--bx-layout-02)">
<Column max="{10}" xlg="{10}">
<h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Row style="margin-bottom: var(--bx-layout-02)">
<Column noGutter>
<Tabs>
<Tab label="Yarn" />
@ -117,7 +117,7 @@
</Tabs>
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-04)">
<Row style="margin-bottom: var(--bx-layout-04)">
<Column>
<h2>Styling</h2>
<p>
@ -126,7 +126,7 @@
light, 3 dark).
</p>
<RadioButtonGroup
style="margin-top: var(--cds-spacing-08)"
style="margin-top: var(--bx-spacing-08)"
legendText="Carbon themes"
bind:selected="{$theme}"
>
@ -216,7 +216,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Row style="margin-bottom: var(--bx-layout-02)">
<Column>
<h2>Dynamic theming</h2>
<p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
@ -248,7 +248,7 @@
</Column>
</Row>
<Row style="margin-bottom: var(--cds-layout-02)">
<Row style="margin-bottom: var(--bx-layout-02)">
<Column>
<h2>Portfolio</h2>
<p>
@ -314,6 +314,6 @@
<style>
p {
margin-bottom: var(--cds-spacing-05);
margin-bottom: var(--bx-spacing-05);
}
</style>