mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
This commit is contained in:
Enrico Sacchetti
parent
23d4bdec4e
commit
fc0d37cf33
58 changed files with 335 additions and 295 deletions
9
css/all.css
Normal file
9
css/all.css
Normal file
File diff suppressed because one or more lines are too long
34
css/all.scss
Normal file
34
css/all.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -337,7 +337,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
|
||||
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"cds--link\"; }}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
@ -8127,7 +8127,7 @@
|
|||
{
|
||||
"name": "menu",
|
||||
"default": false,
|
||||
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"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": "{}"
|
||||
}
|
||||
],
|
||||
|
|
@ -8264,7 +8264,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"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": "{}"
|
||||
}
|
||||
],
|
||||
|
|
@ -9365,8 +9365,8 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"fallback": "<p class:bx--progress-label=\"{true}\">{label}</p>",
|
||||
"slot_props": "{ props: { class: 'bx--progress-label' } }"
|
||||
"fallback": "<p class:cds--progress-label=\"{true}\">{label}</p>",
|
||||
"slot_props": "{ props: { class: 'cds--progress-label' } }"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
@ -12396,7 +12396,7 @@
|
|||
{
|
||||
"name": "__default__",
|
||||
"default": true,
|
||||
"slot_props": "{ props: { class: 'bx--tag__label' } }"
|
||||
"slot_props": "{ props: { class: 'cds--tag__label' } }"
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
);
|
||||
</script>
|
||||
|
||||
<p style="margin-bottom: var(--bx-spacing-06)">
|
||||
<p style="margin-bottom: var(--cds-spacing-06)">
|
||||
Source code:
|
||||
<OutboundLink size="lg" inline href="{source}">
|
||||
{component.filePath}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<InlineSnippet code="{prop.name}" />
|
||||
{#if prop.reactive}
|
||||
<div
|
||||
style="white-space: nowrap; margin-top: var(--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'
|
||||
: '03'})"
|
||||
>
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
{#if component.typedefs.length > 0}
|
||||
<CodeSnippet
|
||||
style="margin-top: var(--bx-spacing-08)"
|
||||
style="margin-top: var(--cds-spacing-08)"
|
||||
class="my-layout-01-03"
|
||||
type="multi"
|
||||
code="{component.typedefs.map((t) => t.ts).join(';\n\n')};"
|
||||
|
|
@ -216,14 +216,14 @@
|
|||
|
||||
<style>
|
||||
.description {
|
||||
margin-bottom: var(--bx-spacing-04);
|
||||
margin-bottom: var(--cds-spacing-04);
|
||||
}
|
||||
|
||||
.cell {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
min-height: 1.25rem;
|
||||
margin-bottom: var(--bx-spacing-02);
|
||||
margin-bottom: var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.overflow {
|
||||
|
|
@ -231,20 +231,20 @@
|
|||
}
|
||||
|
||||
:global(.my-layout-01-03) {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-07);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-07);
|
||||
}
|
||||
|
||||
:global(.overflow .bx--structured-list) {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
:global(.overflow .cds--structured-list) {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-09);
|
||||
}
|
||||
|
||||
code {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
<div class="preview">
|
||||
{#if framed}
|
||||
<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
|
||||
</div>
|
||||
<Button
|
||||
|
|
@ -31,7 +33,7 @@
|
|||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="preview-viewer" class:framed>
|
||||
<div class="preview-viewer" class:framed="{framed}">
|
||||
{#if framed}
|
||||
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
|
||||
{:else}
|
||||
|
|
@ -47,7 +49,7 @@
|
|||
|
||||
<style>
|
||||
.preview {
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
margin-bottom: var(--cds-spacing-09);
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
max-width: 66rem;
|
||||
|
|
@ -58,14 +60,14 @@
|
|||
}
|
||||
|
||||
.preview-viewer {
|
||||
border: 1px solid var(--bx-ui-03);
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@
|
|||
$: tileComponent = href ? ClickableTile : Tile;
|
||||
</script>
|
||||
|
||||
<div class="card-wrapper" class:borderRight class:borderBottom>
|
||||
<div
|
||||
class="card-wrapper"
|
||||
class:borderRight="{borderRight}"
|
||||
class:borderBottom="{borderBottom}"
|
||||
>
|
||||
<AspectRatio>
|
||||
<svelte:component
|
||||
this="{tileComponent}"
|
||||
|
|
@ -31,9 +35,9 @@
|
|||
<svelte:component
|
||||
this="{LogoGithub}"
|
||||
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>
|
||||
</svelte:component>
|
||||
|
|
@ -47,11 +51,11 @@
|
|||
}
|
||||
|
||||
.borderRight {
|
||||
border-right: 1px solid var(--bx-ui-03);
|
||||
border-right: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid var(--bx-ui-03);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -68,19 +72,19 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
margin-top: calc(-1 * var(--bx-spacing-02));
|
||||
margin-bottom: var(--bx-spacing-01);
|
||||
margin-top: calc(-1 * var(--cds-spacing-02));
|
||||
margin-bottom: var(--cds-spacing-01);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--bx-text-02);
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
|
||||
@media (max-width: 671px) {
|
||||
.card-wrapper,
|
||||
.borderRight {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--bx-ui-03);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
.code-override .cds--copy-btn,
|
||||
.code-override .cds--snippet,
|
||||
.code-override button.cds--btn.cds--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
.code-override .cds--copy-btn:hover,
|
||||
.code-override button.cds--btn.cds--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
.code-override .cds--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet-container pre {
|
||||
font-size: var(--bx-code-02-font-size);
|
||||
line-height: var(--bx-code-02-line-height);
|
||||
letter-spacing: var(--bx-code-02-letter-spacing);
|
||||
.code-override .cds--snippet-container pre {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||
.code-override .cds--snippet--multi .cds--snippet-container pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
|
@ -84,9 +84,9 @@ html[theme="g90"] .code-override {
|
|||
color: #bebebe;
|
||||
}
|
||||
|
||||
.override-tabs a.bx--tabs__nav-link,
|
||||
.override-tabs a.bx--tabs__nav-link:focus,
|
||||
.override-tabs a.bx--tabs__nav-link:active {
|
||||
.override-tabs a.cds--tabs__nav-link,
|
||||
.override-tabs a.cds--tabs__nav-link:focus,
|
||||
.override-tabs a.cds--tabs__nav-link:active {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
|
|
@ -112,13 +112,13 @@ html[theme="g90"] .code-override {
|
|||
}
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
.prose > p > .cds--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.table {
|
||||
|
|
@ -126,9 +126,9 @@ html[theme="g90"] .code-override {
|
|||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
margin-top: -3rem;
|
||||
padding-top: var(--bx-spacing-05);
|
||||
padding-bottom: var(--bx-spacing-05);
|
||||
padding-left: var(--bx-spacing-08);
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ html[theme="g90"] .code-override {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
[data-components] .cds--grid {
|
||||
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] {
|
||||
outline: 1px solid var(--bx-interactive-04);
|
||||
outline: 1px solid var(--cds-interactive);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
|
|
@ -157,100 +157,100 @@ html[theme="g90"] .code-override {
|
|||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--bx-spacing-08);
|
||||
margin-top: var(--cds-spacing-08);
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
.prose > p > .cds--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.code-01 {
|
||||
font-size: var(--bx-code-01-font-size);
|
||||
font-weight: var(--bx-code-01-font-weight);
|
||||
letter-spacing: var(--bx-code-01-letter-spacing);
|
||||
line-height: var(--bx-code-01-line-height);
|
||||
font-size: var(--cds-code-01-font-size);
|
||||
font-weight: var(--cds-code-01-font-weight);
|
||||
letter-spacing: var(--cds-code-01-letter-spacing);
|
||||
line-height: var(--cds-code-01-line-height);
|
||||
}
|
||||
|
||||
.body-short-01 {
|
||||
font-size: var(--bx-body-short-01-font-size);
|
||||
font-weight: var(--bx-body-short-01-font-weight);
|
||||
letter-spacing: var(--bx-body-short-01-letter-spacing);
|
||||
line-height: var(--bx-body-short-01-line-height);
|
||||
.body-compact-01 {
|
||||
font-size: var(--cds-body-compact-01-font-size);
|
||||
font-weight: var(--cds-body-compact-01-font-weight);
|
||||
letter-spacing: var(--cds-body-compact-01-letter-spacing);
|
||||
line-height: var(--cds-body-compact-01-line-height);
|
||||
}
|
||||
|
||||
.bx--col > h1 {
|
||||
font-size: var(--bx-fluid-heading-05-font-size);
|
||||
font-weight: var(--bx-fluid-heading-05-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-05-line-height);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
.cds--col > h1 {
|
||||
font-size: var(--cds-fluid-heading-05-font-size);
|
||||
font-weight: var(--cds-fluid-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-05-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-05-line-height);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--bx-fluid-heading-03-font-size);
|
||||
font-weight: var(--bx-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-03-line-height);
|
||||
margin-top: var(--bx-spacing-07);
|
||||
margin-bottom: var(--bx-spacing-12);
|
||||
font-size: var(--cds-fluid-heading-03-font-size);
|
||||
font-weight: var(--cds-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-03-line-height);
|
||||
margin-top: var(--cds-spacing-07);
|
||||
margin-bottom: var(--cds-spacing-12);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--bx-fluid-heading-03-font-size);
|
||||
font-weight: var(--bx-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-03-line-height);
|
||||
.cds--col > .big-paragraph > code {
|
||||
font-size: var(--cds-fluid-heading-03-font-size);
|
||||
font-weight: var(--cds-fluid-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-03-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
.cds--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--col > p > code {
|
||||
font-size: var(--bx-code-02-font-size);
|
||||
font-weight: var(--bx-code-02-font-weight);
|
||||
line-height: var(--bx-code-02-line-height);
|
||||
letter-spacing: var(--bx-code-02-letter-spacing);
|
||||
background-color: var(--bx-ui-03);
|
||||
.cds--col > p > code {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
font-weight: var(--cds-code-02-font-weight);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
background-color: var(--cds-layer-accent-01);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--bx-spacing-02);
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
[class*="bx--col"] > h2,
|
||||
.bx--tab-content > h2 {
|
||||
font-size: var(--bx-fluid-heading-04-font-size);
|
||||
font-weight: var(--bx-fluid-heading-04-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-04-line-height);
|
||||
padding-top: var(--bx-spacing-07);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
[class*="cds--col"] > h2,
|
||||
.cds--tab-content > h2 {
|
||||
font-size: var(--cds-fluid-heading-04-font-size);
|
||||
font-weight: var(--cds-fluid-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-04-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-04-line-height);
|
||||
padding-top: var(--cds-spacing-07);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--bx-fluid-heading-02-font-size);
|
||||
font-weight: var(--bx-fluid-heading-02-font-weight);
|
||||
letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
|
||||
line-height: var(--bx-fluid-heading-02-line-height);
|
||||
padding-top: var(--bx-spacing-09);
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
.cds--col > h4 {
|
||||
font-size: var(--cds-fluid-heading-02-font-size);
|
||||
font-weight: var(--cds-fluid-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-fluid-heading-02-letter-spacing);
|
||||
line-height: var(--cds-fluid-heading-02-line-height);
|
||||
padding-top: var(--cds-spacing-09);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
.bx--col > h2,
|
||||
.bx--tab-content > h2,
|
||||
.bx--col > h3,
|
||||
.bx--col > h4 {
|
||||
.cds--col > h2,
|
||||
.cds--tab-content > h2,
|
||||
.cds--col > h3,
|
||||
.cds--col > h4 {
|
||||
scroll-margin-top: 3rem;
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--bx-spacing-06);
|
||||
.cds--col > p {
|
||||
margin-bottom: var(--cds-spacing-06);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import App from "./App.svelte";
|
||||
import "./carbon.scss";
|
||||
import "carbon-components-svelte/css/all.css";
|
||||
import "./global.css";
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@
|
|||
{#each api_components as component (component.moduleName)}
|
||||
<Tab label="{component.moduleName}" />
|
||||
{/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)}
|
||||
<TabContent>
|
||||
<ComponentApi component="{component}" />
|
||||
|
|
@ -177,13 +177,13 @@
|
|||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--bx-spacing-06);
|
||||
border-bottom: 1px solid var(--bx-ui-03);
|
||||
margin-bottom: var(--cds-spacing-06);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
:global(.toc h5) {
|
||||
margin-top: var(--bx-spacing-06);
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
margin-top: var(--cds-spacing-06);
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
@media (max-width: 1056px) {
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
margin-bottom: var(--bx-spacing-09);
|
||||
margin-bottom: var(--cds-spacing-09);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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(--bx-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
|
||||
<ListItem><strong>Small</strong>: less than 672px</ListItem>
|
||||
<ListItem><strong>Medium</strong>: 672 - 1056px</ListItem>
|
||||
<ListItem><strong>Large</strong>: 1056 - 1312px</ListItem>
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@ Specify a `width` or `minWidth` property in the `headers` object to customize th
|
|||
A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths.
|
||||
|
||||
<InlineNotification svx-ignore lowContrast kind="warning" title="Note:" hideCloseButton>
|
||||
<div class="body-short-01">Custom column widths do not work with a <a class="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>
|
||||
|
||||
<FileSource src="/framed/DataTable/DataTableHeaderWidth" />
|
||||
|
|
|
|||
|
|
@ -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(--bx-spacing-08)">
|
||||
<UnorderedList svx-ignore style="margin-bottom: var(--cds-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>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ By default, the position of the popover component is absolute.
|
|||
<div data-outline>
|
||||
<Popover open>
|
||||
Parent
|
||||
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
|
||||
<PopoverContent style="padding: var(--cds-spacing-05)">Content</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover relative open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,67 +49,67 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-left">
|
||||
<div style="padding: var(--bx-spacing-05)">top-left</div>
|
||||
<div style="padding: var(--cds-spacing-05)">top-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom</div>
|
||||
<div style="padding: var(--cds-spacing-05)">bottom</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left">
|
||||
<div style="padding: var(--bx-spacing-05)">left</div>
|
||||
<div style="padding: var(--cds-spacing-05)">left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right">
|
||||
<div style="padding: var(--bx-spacing-05)">right</div>
|
||||
<div style="padding: var(--cds-spacing-05)">right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ The default `align` value is `"top"`.
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret align="top-left" open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover light open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
@ -149,7 +149,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
|
|||
<div data-outline>
|
||||
Parent
|
||||
<Popover highContrast open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
/>
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled
|
||||
class="bx--structured-list-svg"
|
||||
class="cds--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</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
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@
|
|||
let events = [];
|
||||
</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>
|
||||
<h6>Breakpoint size</h6>
|
||||
|
|
@ -17,10 +20,10 @@
|
|||
<style>
|
||||
p,
|
||||
h1 {
|
||||
margin-bottom: var(--bx-spacing-08);
|
||||
margin-bottom: var(--cds-spacing-08);
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: var(--bx-spacing-03);
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let checked = false;
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
</script>
|
||||
|
||||
{#each values as value}
|
||||
<Checkbox bind:group labelText="{value}" value="{value}" />
|
||||
<Checkbox bind:group="{group}" labelText="{value}" value="{value}" />
|
||||
{/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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
</script>
|
||||
|
||||
<Toggle
|
||||
bind:toggled
|
||||
bind:toggled="{toggled}"
|
||||
size="sm"
|
||||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
|
||||
<Toggle
|
||||
size="sm"
|
||||
style="margin-bottom: var(--bx-spacing-05)"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
bind:toggled
|
||||
bind:toggled="{toggled}"
|
||||
/>
|
||||
|
||||
{#if toggled}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</ComboBox>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let selectedIndex = 1;
|
||||
</script>
|
||||
|
||||
<ContentSwitcher bind:selectedIndex>
|
||||
<ContentSwitcher bind:selectedIndex="{selectedIndex}">
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
<Switch text="Recommended" />
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@
|
|||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
|
||||
<ContextMenuDivider />
|
||||
<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="txt" labelText="TXT" />
|
||||
<ContextMenuOption id="mp3" labelText="MP3" />
|
||||
|
|
@ -48,11 +51,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--bx-text-02);
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<ContextMenu>
|
||||
<ContextMenuOption indented labelText="Open" />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuRadioGroup bind:selectedId labelText="Radio group">
|
||||
<ContextMenuRadioGroup bind:selectedId="{selectedId}" labelText="Radio group">
|
||||
<ContextMenuOption id="0" labelText="Set as foreground" />
|
||||
<ContextMenuOption id="1" labelText="Set as background" />
|
||||
</ContextMenuRadioGroup>
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--bx-text-02);
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,15 +46,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--bx-text-02);
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,15 +51,15 @@
|
|||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--bx-spacing-05));
|
||||
height: calc(100% - var(--bx-spacing-06));
|
||||
width: calc(100% - var(--cds-spacing-05));
|
||||
height: calc(100% - var(--cds-spacing-06));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--bx-text-02);
|
||||
color: var(--cds-text-02);
|
||||
}
|
||||
|
||||
p {
|
||||
outline: 1px solid var(--bx-interactive-01);
|
||||
outline: 1px solid var(--cds-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</Dropdown>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
padding: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
padding: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
</MultiSelect>
|
||||
|
||||
<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;
|
||||
}
|
||||
|
||||
:global(.bx--checkbox-label-text) {
|
||||
:global(.cds--checkbox-label-text) {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--bx-spacing-05) 0 var(--bx-spacing-07);
|
||||
margin: var(--cds-spacing-05) 0 var(--cds-spacing-07);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let value = null;
|
||||
</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 = 0)}">Set to 0</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
let page = 2;
|
||||
</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}">
|
||||
Set page to 1
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
status="{status}"
|
||||
/>
|
||||
|
||||
<ButtonSet style="margin-top: var(--bx-spacing-08)">
|
||||
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
||||
<Button
|
||||
disabled="{value > 0}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
let thirdStepCurrent = false;
|
||||
</script>
|
||||
|
||||
<ProgressIndicator bind:currentIndex>
|
||||
<ProgressIndicator bind:currentIndex="{currentIndex}">
|
||||
<ProgressStep
|
||||
complete
|
||||
label="Step 1"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
/>
|
||||
</ProgressIndicator>
|
||||
|
||||
<div style="margin: var(--bx-spacing-06) 0">
|
||||
<div style="margin: var(--cds-spacing-06) 0">
|
||||
<Button
|
||||
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
|
||||
on:click="{() => {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
let selected = values[1];
|
||||
</script>
|
||||
|
||||
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
|
||||
<TileGroup
|
||||
legend="Service pricing tiers"
|
||||
name="plan"
|
||||
bind:selected="{selected}"
|
||||
>
|
||||
{#each values as value}
|
||||
<RadioTile value="{value}">{value}</RadioTile>
|
||||
{/each}
|
||||
|
|
@ -26,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--bx-spacing-05) 0;
|
||||
margin: var(--cds-spacing-05) 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let value = "";
|
||||
</script>
|
||||
|
||||
<Search bind:value />
|
||||
<Search bind:value="{value}" />
|
||||
|
||||
<div>
|
||||
<ButtonSet>
|
||||
|
|
@ -30,6 +30,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let selected = "g10";
|
||||
</script>
|
||||
|
||||
<Select labelText="Carbon theme" bind:selected>
|
||||
<Select labelText="Carbon theme" bind:selected="{selected}">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g80" text="Gray 80" />
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
||||
<div style="margin: var(--bx-spacing-05) 0">
|
||||
<div style="margin: var(--cds-spacing-05) 0">
|
||||
Selected: <strong>{selected}</strong>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let selected = 0;
|
||||
</script>
|
||||
|
||||
<Tabs bind:selected>
|
||||
<Tabs bind:selected="{selected}">
|
||||
<Tab label="Tab label 1" />
|
||||
<Tab label="Tab label 2" />
|
||||
<Tab label="Tab label 3" />
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</svelte:fragment>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let toggled = true;
|
||||
</script>
|
||||
|
||||
<Toggle labelText="Push notifications" bind:toggled />
|
||||
<Toggle labelText="Push notifications" bind:toggled="{toggled}" />
|
||||
|
||||
<div>
|
||||
<Button size="small" on:click="{() => (toggled = !toggled)}">
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
let open = true;
|
||||
</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>
|
||||
</Tooltip>
|
||||
|
||||
<div style="margin-top: var(--bx-spacing-12);">
|
||||
<div style="margin-top: var(--cds-spacing-12);">
|
||||
<Button size="small" on:click="{() => (open = !open)}">
|
||||
{open ? "Close tooltip" : "Open tooltip"}
|
||||
</Button>
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@
|
|||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
bind:expandedIds
|
||||
bind:expandedIds="{expandedIds}"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
/>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,13 +59,13 @@
|
|||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
bind:expandedIds
|
||||
bind:expandedIds="{expandedIds}"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
/>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,9 +49,9 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:expandedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
bind:expandedIds="{expandedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -63,6 +63,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -89,6 +89,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -60,6 +60,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,8 +49,8 @@
|
|||
size="xs"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
bind:activeId="{activeId}"
|
||||
bind:selectedIds="{selectedIds}"
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
|
|
@ -61,6 +61,6 @@
|
|||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--bx-spacing-05);
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,10 +71,10 @@
|
|||
</svelte:fragment>
|
||||
<HeaderUtilities>
|
||||
<HeaderSearch
|
||||
bind:ref
|
||||
bind:active
|
||||
bind:value
|
||||
bind:selectedResultIndex
|
||||
bind:ref="{ref}"
|
||||
bind:active="{active}"
|
||||
bind:value="{value}"
|
||||
bind:selectedResultIndex="{selectedResultIndex}"
|
||||
placeholder="Search services"
|
||||
results="{results}"
|
||||
on:active="{() => {
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
</p>
|
||||
<div style="overflow-x: scroll;">
|
||||
{#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>
|
||||
{#if Object.keys(rest).length > 0}
|
||||
<pre>{JSON.stringify(rest, null, 2)}</pre>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@
|
|||
// conflict with how the iframe is displayed in the docs.
|
||||
// Instead, we want the theme to be overridden in the standalone page.
|
||||
if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
|
||||
document.documentElement.setAttribute("theme", current_theme)
|
||||
document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
|
||||
document.documentElement.setAttribute("theme", current_theme);
|
||||
document.documentElement.style.setProperty(
|
||||
"color-scheme",
|
||||
["white", "g10"].includes(current_theme) ? "light" : "dark"
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -28,14 +31,14 @@
|
|||
:global(body.framed) {
|
||||
min-height: 100vh;
|
||||
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"]) {
|
||||
outline: 1px solid var(--bx-interactive-04);
|
||||
:global(.framed :not(.cds--content) [class^="cds--col"]) {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
|
||||
:global(.framed .bx--content [class^="bx--col"]) {
|
||||
:global(.framed .cds--content [class^="cds--col"]) {
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -92,45 +92,45 @@
|
|||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<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>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<Column noGutter>
|
||||
<Tabs>
|
||||
<Tab label="Yarn" />
|
||||
<Tab label="NPM" />
|
||||
<Tab label="pnpm" />
|
||||
<Tab label="Yarn" />
|
||||
<div slot="content" style="margin: 1rem -1rem">
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installYarn}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installNpm}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installPnpm}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CodeSnippet code="{installYarn}" />
|
||||
</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row style="margin-bottom: var(--bx-spacing-09)">
|
||||
<Row style="margin-bottom: var(--cds-spacing-09)">
|
||||
<Column>
|
||||
<h2>Styling</h2>
|
||||
<p>
|
||||
Before importing components, you will need to first apply Carbon
|
||||
component styles. The Carbon Design System supports five themes (2
|
||||
light, 3 dark).
|
||||
component styles. The Carbon Design System supports four themes (2
|
||||
light, 2 dark).
|
||||
</p>
|
||||
<RadioButtonGroup
|
||||
style="margin-top: var(--bx-spacing-08)"
|
||||
style="margin-top: var(--cds-spacing-08)"
|
||||
legendText="Carbon themes"
|
||||
bind:selected="{$theme}"
|
||||
>
|
||||
{#each ["white", "g10", "g80", "g90", "g100"] as value}
|
||||
{#each ["white", "g10", "g90", "g100"] as value}
|
||||
<RadioButton labelText="{themes[value]}" value="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row style="margin-bottom: var(--bx-spacing-06)">
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<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(--bx-spacing-06)">
|
||||
<Row style="margin-bottom: var(--cds-spacing-06)">
|
||||
<Column>
|
||||
<h2>Portfolio</h2>
|
||||
<p>
|
||||
|
|
@ -314,6 +314,6 @@
|
|||
|
||||
<style>
|
||||
p {
|
||||
margin-bottom: var(--bx-spacing-05);
|
||||
margin-bottom: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ function plugin() {
|
|||
function carbonify() {
|
||||
return (tree) => {
|
||||
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(
|
||||
"</Layout_MDSVEX_DEFAULT>",
|
||||
`<div slot="aside">
|
||||
<ul class="bx--list--unordered">
|
||||
<ul class="cds--list--unordered">
|
||||
${toc
|
||||
.map(
|
||||
(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("")}
|
||||
<h5>Component API</h5>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#props">Props</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#props">Props</a>
|
||||
</li>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#typedefs">Typedefs</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#typedefs">Typedefs</a>
|
||||
</li>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#slots">Slots</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#slots">Slots</a>
|
||||
</li>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#forwarded-events">Forwarded events</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#forwarded-events">Forwarded events</a>
|
||||
</li>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#dispatched-events">Dispatched events</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#dispatched-events">Dispatched events</a>
|
||||
</li>
|
||||
<li class="bx--list__item">
|
||||
<a class="bx--link" href="#rest-props">restProps</a>
|
||||
<li class="cds--list__item">
|
||||
<a class="cds--link" href="#rest-props">restProps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue