Merge pull request #322 from IBM/css

css: upgrade carbon-components to 10.21, use white as the default Carbon theme
2025-09-14 18:01:06 +00:00 · 2020-10-10 13:39:17 -07:00 · 2020-10-10 13:39:17 -07:00 · add1a7638f
commit add1a7638f
parent 1518119c41 afb892f626
11 changed files with 1004 additions and 513 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -5,10 +5,6 @@
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carbon Components Svelte</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components-svelte/css/all.css"
-    />
  </head>
  <body>
    <div id="app"></div>
--- a/docs/package.json
+++ b/docs/package.json
@ -6,25 +6,25 @@
    "dev:svite": "svite",
    "build": "run-s build:*",
    "build:routify": "routify run -b",
-    "build:svite": "svite build",
-    "postbuild": "node scripts/postbuild"
+    "build:svite": "svite build"
  },
  "devDependencies": {
+    "@carbon/themes": "^10.20.0",
    "@sveltech/routify": "^1.9.9",
+    "autoprefixer": "^10.0.1",
+    "carbon-components": "^10.21.0",
    "carbon-components-svelte": "../",
    "clipboard-copy": "^3.1.0",
    "fs-extra": "^9.0.1",
    "mdsvex": "^0.8.8",
+    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
-    "playwright-aws-lambda": "^0.6.0",
-    "playwright-core": "^1.4.2",
-    "polka": "^0.5.2",
+    "postcss": "^8.1.1",
    "prettier": "^2.1.2",
    "prettier-plugin-svelte": "^1.4.0",
    "prism-svelte": "^0.4.7",
    "prismjs": "^1.21.0",
    "remark-slug": "^6.0.0",
-    "sirv": "^1.0.6",
    "svelte": "3.29.0",
    "svelte-hmr": "0.11.1",
    "svelte-preprocess": "^4.3.2",
--- a/docs/scripts/postbuild.js
+++ b/docs/scripts/postbuild.js
@ -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);
-  });
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@ -3,4 +3,44 @@
  import { routes } from "../.routify/routes";
 </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}" />
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -114,7 +114,7 @@
    margin-bottom: var(--cds-layout-02);
  }

-  .bx--content {
+  main.bx--content {
    background: none;
  }

--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@ -7,6 +7,7 @@ const { format } = require("prettier");
 const pkg = require("../package.json");
 const fs = require("fs");
 const Prism = require("prismjs");
+const { replace, postcss } = require("svelte-preprocess");
 require("prism-svelte");

 function createImports(source) {
@ -126,11 +127,16 @@ module.exports = {
  extensions: [".svelte", ".svx"],
  hydratable: NODE_ENV === "production",
  preprocess: [
-    require("svelte-preprocess")({
-      sourcemap: false,
-      replace: [
-        ["process.env.VERSION", JSON.stringify(pkg.version)],
-        ["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
+    require("svelte-preprocess")(),
+    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"],
+        }),
      ],
    }),
    mdsvex({
--- a/docs/vercel.json
+++ b/docs/vercel.json
@ -0,0 +1,7 @@
+{
+  "version": 2,
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "/.*", "dest": "/index.html" }
+  ]
+}
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
    "start": "start-storybook -p 9090",
    "build": "build-storybook",
    "prettier": "prettier --write './**/*.{svelte,js,md}'",
+    "build:css": "node scripts/build-css",
    "prepack": "node scripts/build-css && rollup -c",
    "publish-examples": "node scripts/publish-examples"
  },
@ -32,8 +33,7 @@
    "@tsconfig/svelte": "^1.0.10",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.0.6",
-    "carbon-components-10.18": "npm:carbon-components@10.18",
-    "carbon-components-10.19": "npm:carbon-components@10.19",
+    "carbon-components-10.21": "npm:carbon-components@10.21",
    "comment-parser": "^0.7.5",
    "gh-pages": "^3.1.0",
    "husky": "^4.3.0",
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@ -18,58 +18,14 @@ const shared = {
    $css--default-type: true;
    $css--plex: true;
    
-    @import "node_modules/carbon-components-10.19/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.19/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.19/scss/globals/grid/_grid.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";
+    @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--reset.scss";
+    @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--font-face.scss";
+    @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--helpers.scss";
+    @import "node_modules/carbon-components-10.21/scss/globals/scss/_css--body.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: ``,
 };

 const themes = {
@ -90,11 +46,11 @@ const themes = {
    @include carbon--theme();
  `,
  all: `
-    :root[theme="white"] {
+    :root {
      @include carbon--theme($carbon--theme--white, true);
    }
-    
-    :root {
+
+    :root[theme="g10"] {
      @include carbon--theme($carbon--theme--g10, true);
    }
    
--- a/yarn.lock
+++ b/yarn.lock
@ -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"
  integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==

-"carbon-components-10.18@npm:carbon-components@10.18":
-  version "10.18.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.18.0.tgz#23b61ecb7cba766f47c7e0e96278a4d4bb37e8f2"
-  integrity sha512-BZE1PaWP8KrmbV1JSfPEsIWBeNz255eQ2hGP4Uo5Rh4uaL891BJjVTWjhnHEIeu1VXXjtxZ3Vk6qPcCGYL7brw==
-  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==
+"carbon-components-10.21@npm:carbon-components@10.21":
+  version "10.21.0"
+  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316"
+  integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw==
  dependencies:
    flatpickr "4.6.1"
    lodash.debounce "^4.0.8"