feat(themes): v2

BREAKING CHANGE: - system light and dark are no longer supported - popover APIs now implement native HTML Popover APIs - modern light and default now defaults - components use new layer scale based system for accurate color contrast - fix broken label associations - upgrade to Lit 3.x - upgrade TypeScript 5.x - button expand rename action to orientation - button-icon-group removed in favor of button-group - default for button-icon is now filled, use action=“flat” for original flat style - layout module performance improvements with CSS vars. 3.2kb target bundle - popover types dialog, drawer and toast only anchor to the document window Signed-off-by: Cory Rylan <cory@coryrylan.com>
blueprintui · Jan 1, 2024 · 1d8a75c · 1d8a75c
1 parent 94669d4
commit 1d8a75c
Show file tree

Hide file tree

Showing 869 changed files with 12,007 additions and 16,257 deletions.
diff --git a/.commitlintrc.cjs b/.commitlintrc.cjs
@@ -12,7 +12,6 @@ module.exports = {
         'components',
         'crane',
         'grid',
-        'grid-pro',
         'icons',
         'layout',
         'themes',

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.8.0
+20.10.0
diff --git a/LICENSE.md b/LICENSE.md
@@ -15,8 +15,4 @@ Each licence can be found in the individual package/project.
 - [@blueprintui/icons (MIT)](https://github.com/blueprintui/blueprintui/blob/main/packages/icons/LICENSE.md)
 - [SVGs from Clarity Design Assets (MIT)](https://github.com/vmware/clarity-assets)
 
-## Commercial
-
-- [@blueprintui/grid-pro (Commercial)](https://github.com/blueprintui/blueprintui/blob/main/packages/grid-pro/LICENSE.md)
-
 These packages includes dependencies, each of which may have its own copyright notices and license terms. When using these dependencies, you must adhere to the terms and conditions of the corresponding license, which are detailed in the LICENSE file.
diff --git a/README.md b/README.md
@@ -47,14 +47,14 @@ To use components the base theme CSS file must be loaded into the page. This can
 
 ```css
 @import '@blueprintui/themes/index.min.css';
-@import '@blueprintui/themes/modern/index.min.css';
+@import '@blueprintui/themes/dark/index.min.css';
 ```
 
 or
 
 ```html
 <link rel="stylesheet" href="@blueprintui/themes/index.min.css"> 
-<link rel="stylesheet" href="@blueprintui/themes/modern/index.min.css"> 
+<link rel="stylesheet" href="@blueprintui/themes/dark/index.min.css"> 
 ```
 
 ## CDN
@@ -63,7 +63,7 @@ Blueprint UI Components can be used via CDNs for fast and easy prototyping.
 
 ```html
 <link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">
-<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/modern/index.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/dark/index.min.css">
 
 <script type="module">
   import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/alert.js/+esm';
@@ -79,7 +79,7 @@ import '@blueprintui/components/include/alert.js';
 ```
 
 ```html
-<body bp-theme="modern">
+<body bp-theme=" { theme: 'dark' });">
 
   <bp-alert status="success">hello there!</bp-alert>
 

diff --git a/docs/eleventy.config.js b/docs/eleventy.config.js
@@ -1,7 +1,6 @@
 import * as syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
 import headTag from './src/_includes/shortcodes/head-tag.js';
 import markdownIt from 'markdown-it';
-import decache from 'decache';
 
 export default function (config) {
   const md = markdownIt({
@@ -45,7 +44,7 @@ export default function (config) {
   md.renderer.rules.bullet_list_open = bpText;
 
   config.setLibrary('md', md);
-  config.addPlugin(syntaxHighlight);
+  config.addPlugin(syntaxHighlight.default);
   config.setDataDeepMerge(true);
   config.addPassthroughCopy('./src/index.js');
   config.addPassthroughCopy('./src/assets');
@@ -64,10 +63,6 @@ export default function (config) {
 
   headTag(config);
 
-  config.on('eleventy.beforeWatch', files => {
-    files.forEach(file => decache(file));
-  });
-
   return {
     dir: {
       input: 'src',

diff --git a/docs/package.json b/docs/package.json
@@ -3,13 +3,13 @@
   "version": "0.0.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "ci": "wireit",
     "start": "wireit",
     "build": "wireit",
     "build:11ty": "wireit",
     "start:rollup": "wireit",
-    "debug": "wireit",
     "deploy": "wireit"
   },
   "wireit": {
@@ -24,7 +24,10 @@
       "dependencies": [
         "build",
         "start:rollup"
-      ]
+      ],
+      "env": {
+        "WIREIT_LOGGER": "metrics"
+      }
     },
     "build": {
       "command": "rollup -c",
@@ -43,7 +46,7 @@
       ]
     },
     "build:11ty": {
-      "command": "NODE_ENV=production node -r esm ../node_modules/.bin/eleventy",
+      "command": "npx @11ty/eleventy",
       "files": [
         "./src/**/*",
         "./eleventy.config.js",
@@ -59,18 +62,15 @@
         "../packages/crane:drafter",
         "../packages/icons:drafter",
         "../packages/grid:drafter",
-        "../packages/grid-pro:drafter",
-        "../packages/typography:drafter"
+        "../packages/typography:drafter",
+        "../packages/typewriter:drafter"
       ]
     },
     "start:rollup": {
       "command": "rollup -c -w",
       "dependencies": [],
       "service": true
     },
-    "debug": {
-      "command": "DEBUG=* node -r esm node_modules/.bin/eleventy"
-    },
     "deploy": {
       "command": "firebase deploy --only hosting:blueprintui",
       "dependencies": [
@@ -90,15 +90,12 @@
     "url": "https://github.com/blueprintui/components/issues"
   },
   "devDependencies": {
-    "@11ty/eleventy": "2.0.0-canary.18",
-    "@11ty/eleventy-plugin-syntaxhighlight": "4.2.0",
+    "@11ty/eleventy": "3.0.0-alpha.3",
+    "@11ty/eleventy-plugin-syntaxhighlight": "5.0.0",
     "@rollup/plugin-alias": "4.0.3",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-terser": "0.4.0",
     "acorn-import-attributes": "1.9.2",
-    "cross-env": "7.0.3",
-    "decache": "4.6.1",
-    "esm": "3.2.25",
     "html-minifier": "4.0.0",
     "markdown-it": "13.0.2",
     "rollup": "3.29.3",

diff --git a/docs/src/_examples/tokens.examples.js b/docs/src/_examples/tokens.examples.js
@@ -1,4 +1,4 @@
-import json from '@blueprintui/themes/index.json';
+import json from '@blueprintui/themes/index.json' assert { type: 'json' };
 
 const tokens = flattenTokens(json);
 
@@ -22,9 +22,9 @@ function getToken(name, rawValue) {
   if (name.includes('color') || name.includes('background') || name.includes('status') || name.includes('object-opacity')) {
     return { name, value, example: `<bp-card style="--background: var(--bp-object-border-color-300); --height: 36px; --background: var(${name}); min-width: 100%;"></bp-card>` };
   } else if (name.includes('object-shadow')) {
-    return { name, value, example: `<bp-card style="--background: var(--bp-layer-canvas-background); --height: 36px; --box-shadow: var(${name}); min-width: 100%;"></bp-card>` };
+    return { name, value, example: `<bp-card style="--background: var(--bp-layer-background-100); --height: 36px; --box-shadow: var(${name}); min-width: 100%;"></bp-card>` };
   } else if (name.includes('object-border-radius')) {
-    return { name, value, example: `<bp-card style="--background: var(--bp-layer-canvas-background); --height: 36px; --border-radius: var(${name}); width: 100%;"></bp-card>` };
+    return { name, value, example: `<bp-card style="--background: var(--bp-layer-background-100); --height: 36px; --border-radius: var(${name}); width: 100%;"></bp-card>` };
   } else if (name.includes('text-size')) {
     return { name, value, example: `<p bp-text="content" style="font-size: var(${name}) !important;">${value}</p>` };
   } else if (name.includes('text-weight')) {
@@ -47,10 +47,11 @@ export function tokensTable(filter) {
   </bp-grid-header>
   ${Object.entries(tokens)
     .filter(([key]) => key.includes(filter))
+    .filter(([key]) => !key.endsWith('-0'))
     .map(v => getToken(...v)).map(token => `
 <bp-grid-row>
   <bp-grid-cell>
-    <bp-button-icon shape="copy" aria-label="copy token" title="copy"></bp-button-icon>
+    <bp-button-icon shape="copy" action="flat" aria-label="copy token" title="copy"></bp-button-icon>
   </bp-grid-cell>
   <bp-grid-cell><code>${token.name}</code></bp-grid-cell>
   <bp-grid-cell>${token.value}</bp-grid-cell>