mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23:02 +00:00
docs: remove svelte-preprocess from svelte.config.js
This commit is contained in:
parent
38f98042f4
commit
a76f209b33
8 changed files with 284 additions and 304 deletions
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<style global>
|
||||
<style>
|
||||
.preview {
|
||||
margin-bottom: var(--cds-layout-04);
|
||||
margin-left: -1rem;
|
||||
|
@ -55,91 +55,10 @@
|
|||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--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 {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator {
|
||||
color: #6ea6ff;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #9ef0f0;
|
||||
}
|
||||
|
||||
.token.token.language-javascript,
|
||||
.token.attr-value {
|
||||
color: #d4bbff; /* purple 30 */
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #a8a8a8; /* gray 40 */
|
||||
}
|
||||
|
||||
.token.script .token.language-javascript {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #fa75a6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #a7f0ba;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #bebebe;
|
||||
}
|
||||
|
||||
.code-override {
|
||||
border: 1px solid #262626;
|
||||
}
|
||||
|
||||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
border-bottom: 0;
|
||||
|
|
268
docs/src/global.css
Normal file
268
docs/src/global.css
Normal file
|
@ -0,0 +1,268 @@
|
|||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.code-override .bx--snippet {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--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 {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator {
|
||||
color: #6ea6ff;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #9ef0f0;
|
||||
}
|
||||
|
||||
.token.token.language-javascript,
|
||||
.token.attr-value {
|
||||
color: #d4bbff; /* purple 30 */
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #a8a8a8; /* gray 40 */
|
||||
}
|
||||
|
||||
.token.script .token.language-javascript {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #fa75a6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #a7f0ba;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
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 {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-viewer > .bx--aspect-ratio,
|
||||
.preview-viewer [data-outline] {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--cds-spacing-08);
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bx--side-nav__overlay-active {
|
||||
z-index: calc(10 + 1); /** supersede the z-index of code snippets */
|
||||
}
|
||||
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
font-weight: var(--cds-body-short-01-font-weight);
|
||||
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
||||
line-height: var(--cds-body-short-01-line-height);
|
||||
}
|
||||
|
||||
.bx--col > h1 {
|
||||
font-size: var(--cds-display-01-font-size);
|
||||
font-weight: var(--cds-display-01-font-weight);
|
||||
letter-spacing: var(--cds-display-01-letter-spacing);
|
||||
line-height: var(--cds-display-01-line-height);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
margin-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-06);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--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-ui-03);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.bx--col > h2 {
|
||||
font-size: var(--cds-expressive-heading-05-font-size);
|
||||
font-weight: var(--cds-expressive-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-05-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h3 {
|
||||
font-size: var(--cds-expressive-heading-04-font-size);
|
||||
font-weight: var(--cds-expressive-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-04-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--cds-expressive-heading-02-font-size);
|
||||
font-weight: var(--cds-expressive-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-02-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
main.bx--content {
|
||||
min-height: calc(100vh - 3rem - 3rem);
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.bx--side-nav ~ .bx--content {
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bx--side-nav--expanded ~ .bx--content {
|
||||
white-space: nowrap;
|
||||
min-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1057px) {
|
||||
.bx--side-nav__navigation {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||
max-height: 144rem;
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
import App from "./App.svelte";
|
||||
import "../../css/all.css";
|
||||
import "./global.css";
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
|
|
|
@ -149,36 +149,7 @@
|
|||
</Column>
|
||||
</Content>
|
||||
|
||||
<style global>
|
||||
.override-tabs a.bx--tabs__nav-link,
|
||||
.override-tabs a.bx--tabs__nav-link:focus,
|
||||
.override-tabs a.bx--tabs__nav-link:active {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -186,16 +157,6 @@
|
|||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
@ -205,25 +166,8 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-viewer > .bx--aspect-ratio,
|
||||
.preview-viewer [data-outline] {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--cds-spacing-08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -64,29 +64,7 @@
|
|||
</Column>
|
||||
</Content>
|
||||
|
||||
<style global>
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -94,16 +72,6 @@
|
|||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
@ -113,10 +81,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -146,105 +146,7 @@
|
|||
<slot />
|
||||
</Theme>
|
||||
|
||||
<style global>
|
||||
.bx--side-nav__overlay-active {
|
||||
z-index: calc(10 + 1); /** supersede the z-index of code snippets */
|
||||
}
|
||||
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
font-weight: var(--cds-body-short-01-font-weight);
|
||||
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
||||
line-height: var(--cds-body-short-01-line-height);
|
||||
}
|
||||
|
||||
.bx--col > h1 {
|
||||
font-size: var(--cds-display-01-font-size);
|
||||
font-weight: var(--cds-display-01-font-weight);
|
||||
letter-spacing: var(--cds-display-01-letter-spacing);
|
||||
line-height: var(--cds-display-01-line-height);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
margin-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-06);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--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-ui-03);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.bx--col > h2 {
|
||||
font-size: var(--cds-expressive-heading-05-font-size);
|
||||
font-weight: var(--cds-expressive-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-05-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h3 {
|
||||
font-size: var(--cds-expressive-heading-04-font-size);
|
||||
font-weight: var(--cds-expressive-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-04-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--cds-expressive-heading-02-font-size);
|
||||
font-weight: var(--cds-expressive-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-02-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
main.bx--content {
|
||||
min-height: calc(100vh - 3rem - 3rem);
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.bx--side-nav ~ .bx--content {
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bx--side-nav--expanded ~ .bx--content {
|
||||
white-space: nowrap;
|
||||
min-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
.platform-name {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
@ -264,14 +166,4 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1057px) {
|
||||
.bx--side-nav__navigation {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||
max-height: 144rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -128,20 +128,18 @@ const NODE_ENV = process.env.NODE_ENV || "production";
|
|||
module.exports = {
|
||||
extensions: [".svelte", ".svx"],
|
||||
preprocess: [
|
||||
require("svelte-preprocess")({
|
||||
typescript: false,
|
||||
replace: [
|
||||
["process.env.VERSION", JSON.stringify(pkg.version)],
|
||||
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
|
||||
],
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("autoprefixer")({
|
||||
overrideBrowserslist: ["last 1 version", "ie >= 11"],
|
||||
}),
|
||||
],
|
||||
{
|
||||
markup: ({ filename, content }) => {
|
||||
if (/node_modules/.test(filename) || !filename.endsWith(".svelte"))
|
||||
return;
|
||||
return {
|
||||
code: content.replace(
|
||||
/process.env.VERSION/g,
|
||||
JSON.stringify(pkg.version)
|
||||
),
|
||||
};
|
||||
},
|
||||
}),
|
||||
},
|
||||
mdsvex({
|
||||
remarkPlugins: [plugin, slug, carbonify],
|
||||
layout: {
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
export let status;
|
||||
export let error;
|
||||
|
||||
const dev = process.env.NODE_ENV === "development";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
@ -12,7 +10,3 @@
|
|||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{/if}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue