mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #322 from IBM/css

Browse source 
css: upgrade carbon-components to 10.21, use white as the default Carbon theme
This commit is contained in:
Eric Liu 2020-10-10 13:39:17 -07:00 • committed by GitHub
commit add1a7638f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 1004 additions and 513 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/index.html
View file

@ -5,10 +5,6 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carbon Components Svelte</title> <title>Carbon Components Svelte</title>
<link
rel="stylesheet"
href="https://unpkg.com/carbon-components-svelte/css/all.css"
/>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

12
docs/package.json
View file

@ -6,25 +6,25 @@
"dev:svite": "svite", "dev:svite": "svite",
"build": "run-s build:*", "build": "run-s build:*",
"build:routify": "routify run -b", "build:routify": "routify run -b",
"build:svite": "svite build", "build:svite": "svite build"
"postbuild": "node scripts/postbuild"
}, },
"devDependencies": { "devDependencies": {
"@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1",
"carbon-components": "^10.21.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"playwright-aws-lambda": "^0.6.0", "postcss": "^8.1.1",
"playwright-core": "^1.4.2",
"polka": "^0.5.2",
"prettier": "^2.1.2", "prettier": "^2.1.2",
"prettier-plugin-svelte": "^1.4.0", "prettier-plugin-svelte": "^1.4.0",
"prism-svelte": "^0.4.7", "prism-svelte": "^0.4.7",
"prismjs": "^1.21.0", "prismjs": "^1.21.0",
"remark-slug": "^6.0.0", "remark-slug": "^6.0.0",
"sirv": "^1.0.6",
"svelte": "3.29.0", "svelte": "3.29.0",
"svelte-hmr": "0.11.1", "svelte-hmr": "0.11.1",
"svelte-preprocess": "^4.3.2", "svelte-preprocess": "^4.3.2",

108
docs/scripts/postbuild.js
View file

@ -1,108 +0,0 @@
const sirv = require("sirv");
const polka = require("polka");
const playwright = require("playwright-aws-lambda");
const fs = require("fs-extra");
const path = require("path");
const PORT = process.env.PORT || 3000;
const OUT_DIR = "dist";
async function scrape(page, url = "") {
await page.goto(`http://localhost:${PORT}/${url}`);
await page.waitForLoadState("networkidle");
const $html = await page.$("html");
const html = await page.evaluate(([html]) => html.innerHTML, [$html]);
await $html.dispose();
return html;
}
async function processHtml(html, { dir, outfilePath }) {
if (dir) {
await fs.ensureDir(outfilePath);
await fs.writeFile(
path.join(outfilePath, "index.html"),
await `<!DOCTYPE html><html lang="en">${html}</html>`
);
} else {
await fs.writeFile(
path.join(outfilePath),
await `<!DOCTYPE html><html lang="en">${html}</html>`
);
}
console.log("Prerendered path:", outfilePath);
}
const app = polka()
.use(sirv(OUT_DIR, { single: true }))
.listen(PORT, async (error) => {
if (error) {
console.log(error);
process.exit(1);
}
const browser = await playwright.launchChromium({ headless: true });
const context = await browser.newContext();
const page = await context.newPage();
const components = await fs.readdir("src/pages/components");
for await (const component of components) {
const [file] = component.split(".svx");
const filePath = `components/${file}`;
const result = await scrape(page, filePath);
await processHtml(result, {
dir: true,
outfilePath: `${OUT_DIR}/${filePath}`,
});
}
await fs.ensureDir(`${OUT_DIR}/framed/`);
const framed = [
{
folder: "Grid",
paths: fs.readdirSync("src/pages/framed/Grid"),
},
{
folder: "Loading",
paths: fs.readdirSync("src/pages/framed/Loading"),
},
{
folder: "Modal",
paths: fs.readdirSync("src/pages/framed/Modal"),
},
{
folder: "UIShell",
paths: fs.readdirSync("src/pages/framed/UIShell"),
},
];
for await (const frame of framed) {
const { folder, paths } = frame;
for await (framePath of paths) {
const { name } = path.parse(framePath);
await fs.ensureDir(`${OUT_DIR}/framed/${folder}/${name}`);
const filePath = `framed/${folder}/${name}`;
const result = await scrape(page, filePath);
await processHtml(result, {
dir: true,
outfilePath: `${OUT_DIR}/${filePath}`,
});
}
}
const __404 = await scrape(page, "404");
await processHtml(__404, { outfilePath: `${OUT_DIR}/404.html` });
const __index = await scrape(page);
await processHtml(__index, { outfilePath: `${OUT_DIR}/index.html` });
await browser.close();
await app.server.close();
process.exit(0);
});

40
docs/src/App.svelte
View file

@ -3,4 +3,44 @@
import { routes } from "../.routify/routes"; import { routes } from "../.routify/routes";
</script> </script>
<style lang="scss" global>
$feature-flags: (
enable-css-custom-properties: true,
grid-columns-16: true
);
@import "@carbon/themes/scss/themes";
:root {
@include carbon--theme($carbon--theme--white, true);
}
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true);
}
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true);
}
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true);
}
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/_css--reset.scss";
@import "carbon-components/scss/globals/scss/_css--font-face.scss";
@import "carbon-components/scss/globals/scss/_css--helpers.scss";
@import "carbon-components/scss/globals/scss/_css--body.scss";
@import "carbon-components/scss/globals/grid/_grid.scss";
@import "carbon-components/scss/globals/scss/styles.scss";
</style>
<Router routes="{routes}" /> <Router routes="{routes}" />

2
docs/src/pages/_layout.svelte
View file

@ -114,7 +114,7 @@
margin-bottom: var(--cds-layout-02); margin-bottom: var(--cds-layout-02);
} }
.bx--content { main.bx--content {
background: none; background: none;
} }

16
docs/svelte.config.js
View file

@ -7,6 +7,7 @@ const { format } = require("prettier");
const pkg = require("../package.json"); const pkg = require("../package.json");
const fs = require("fs"); const fs = require("fs");
const Prism = require("prismjs"); const Prism = require("prismjs");
const { replace, postcss } = require("svelte-preprocess");
require("prism-svelte"); require("prism-svelte");
function createImports(source) { function createImports(source) {
@ -126,11 +127,16 @@ module.exports = {
extensions: [".svelte", ".svx"], extensions: [".svelte", ".svx"],
hydratable: NODE_ENV === "production", hydratable: NODE_ENV === "production",
preprocess: [ preprocess: [
require("svelte-preprocess")({ require("svelte-preprocess")(),
sourcemap: false, replace([
replace: [ ["process.env.VERSION", JSON.stringify(pkg.version)],
["process.env.VERSION", JSON.stringify(pkg.version)], ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)], ]),
postcss({
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 1 version", "ie >= 11"],
}),
], ],
}), }),
mdsvex({ mdsvex({

7
docs/vercel.json Normal file
View file

@ -0,0 +1,7 @@
{
"version": 2,
"routes": [
{ "handle": "filesystem" },
{ "src": "/.*", "dest": "/index.html" }
]
}

1243
docs/yarn.lock
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -11,6 +11,7 @@
"start": "start-storybook -p 9090", "start": "start-storybook -p 9090",
"build": "build-storybook", "build": "build-storybook",
"prettier": "prettier --write './**/*.{svelte,js,md}'", "prettier": "prettier --write './**/*.{svelte,js,md}'",
"build:css": "node scripts/build-css",
"prepack": "node scripts/build-css && rollup -c", "prepack": "node scripts/build-css && rollup -c",
"publish-examples": "node scripts/publish-examples" "publish-examples": "node scripts/publish-examples"
}, },
@ -32,8 +33,7 @@
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"carbon-components-10.18": "npm:carbon-components@10.18", "carbon-components-10.21": "npm:carbon-components@10.21",
"carbon-components-10.19": "npm:carbon-components@10.19",
"comment-parser": "^0.7.5", "comment-parser": "^0.7.5",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"husky": "^4.3.0", "husky": "^4.3.0",

64
scripts/build-css.js
View file

@ -18,58 +18,14 @@ const shared = {
$css--default-type: true; $css--default-type: true;
$css--plex: true; $css--plex: true;
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--reset.scss"; @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--reset.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--font-face.scss"; @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--font-face.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--helpers.scss"; @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components-10.19/scss/globals/scss/_css--body.scss"; @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--body.scss";
@import "node_modules/carbon-components-10.19/scss/globals/grid/_grid.scss"; @import "node_modules/carbon-components-10.21/scss/globals/grid/_grid.scss";
`, @import "node_modules/carbon-components-10.21/scss/globals/scss/styles.scss";
components: `
@import "node_modules/carbon-components-10.19/scss/components/accordion/accordion";
@import "node_modules/carbon-components-10.19/scss/components/breadcrumb/breadcrumb";
@import "node_modules/carbon-components-10.19/scss/components/button/button";
@import "node_modules/carbon-components-10.19/scss/components/checkbox/checkbox";
@import "node_modules/carbon-components-10.19/scss/components/code-snippet/code-snippet";
@import "node_modules/carbon-components-10.19/scss/components/combo-box/combo-box";
@import "node_modules/carbon-components-10.19/scss/components/content-switcher/content-switcher";
@import "node_modules/carbon-components-10.19/scss/components/copy-button/copy-button";
@import "node_modules/carbon-components-10.19/scss/components/data-table/data-table";
@import "node_modules/carbon-components-10.19/scss/components/date-picker/date-picker";
@import "node_modules/carbon-components-10.19/scss/components/dropdown/dropdown";
@import "node_modules/carbon-components-10.19/scss/components/file-uploader/file-uploader";
@import "node_modules/carbon-components-10.19/scss/components/form/form";
@import "node_modules/carbon-components-10.19/scss/components/inline-loading/inline-loading";
@import "node_modules/carbon-components-10.19/scss/components/link/link";
@import "node_modules/carbon-components-10.19/scss/components/list/list";
@import "node_modules/carbon-components-10.19/scss/components/list-box/list-box";
@import "node_modules/carbon-components-10.19/scss/components/loading/loading";
@import "node_modules/carbon-components-10.19/scss/components/modal/modal";
@import "node_modules/carbon-components-10.19/scss/components/multi-select/multi-select";
@import "node_modules/carbon-components-10.19/scss/components/notification/inline-notification";
@import "node_modules/carbon-components-10.19/scss/components/notification/toast-notification";
@import "node_modules/carbon-components-10.19/scss/components/number-input/number-input";
@import "node_modules/carbon-components-10.19/scss/components/overflow-menu/overflow-menu";
@import "node_modules/carbon-components-10.19/scss/components/pagination/pagination";
@import "node_modules/carbon-components-10.19/scss/components/pagination-nav/pagination-nav";
@import "node_modules/carbon-components-10.19/scss/components/progress-indicator/progress-indicator";
@import "node_modules/carbon-components-10.19/scss/components/radio-button/radio-button";
@import "node_modules/carbon-components-10.19/scss/components/search/search";
@import "node_modules/carbon-components-10.19/scss/components/select/select";
@import "node_modules/carbon-components-10.19/scss/components/skeleton/skeleton";
@import "node_modules/carbon-components-10.19/scss/components/slider/slider";
@import "node_modules/carbon-components-10.19/scss/components/structured-list/structured-list";
@import "node_modules/carbon-components-10.19/scss/components/tag/tag";
@import "node_modules/carbon-components-10.19/scss/components/text-area/text-area";
@import "node_modules/carbon-components-10.19/scss/components/text-input/text-input";
@import "node_modules/carbon-components-10.19/scss/components/tile/tile";
@import "node_modules/carbon-components-10.19/scss/components/time-picker/time-picker";
@import "node_modules/carbon-components-10.19/scss/components/toggle/toggle";
@import "node_modules/carbon-components-10.19/scss/components/toolbar/toolbar";
@import "node_modules/carbon-components-10.19/scss/components/tooltip/tooltip";
@import "node_modules/carbon-components-10.19/scss/components/ui-shell/ui-shell";
@import "node_modules/carbon-components-10.18/scss/components/tabs/tabs";
`, `,
components: ``,
}; };
const themes = { const themes = {
@ -90,11 +46,11 @@ const themes = {
@include carbon--theme(); @include carbon--theme();
`, `,
all: ` all: `
:root[theme="white"] { :root {
@include carbon--theme($carbon--theme--white, true); @include carbon--theme($carbon--theme--white, true);
} }
:root { :root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true); @include carbon--theme($carbon--theme--g10, true);
} }

17
yarn.lock
View file

@ -3185,19 +3185,10 @@ capture-stack-trace@^1.0.0:
resolved "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" resolved "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw== integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
"carbon-components-10.18@npm:carbon-components@10.18": "carbon-components-10.21@npm:carbon-components@10.21":
version "10.18.0" version "10.21.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.18.0.tgz#23b61ecb7cba766f47c7e0e96278a4d4bb37e8f2" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316"
integrity sha512-BZE1PaWP8KrmbV1JSfPEsIWBeNz255eQ2hGP4Uo5Rh4uaL891BJjVTWjhnHEIeu1VXXjtxZ3Vk6qPcCGYL7brw== integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw==
dependencies:
flatpickr "4.6.1"
lodash.debounce "^4.0.8"
warning "^3.0.0"
"carbon-components-10.19@npm:carbon-components@10.19":
version "10.19.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.19.0.tgz#276924da9d8ba792d6f4c3964b77e26d1ee7619d"
integrity sha512-lQ3L9VyR8nYq+YkSBfH+b10TfTRrE7oamAaxcoKr2m2M0Mi6tW5jxZlxq86kIJxjdgY2LnzApP7rlra+Yq16fg==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"