@fusion.dev/helix-styles 0.4.1 → 0.4.3

package/README.md

@@ -1,6 +1,6 @@
 # @fusion.dev/helix-styles
 
-Design tokens and the base layer. Pure CSS and a JSON copy of the tokens — no
+Design tokens and the base layer. Pure CSS and a JSON copy of the tokens. No
 JavaScript at all.
 
 ```sh
@@ -8,7 +8,7 @@ npm install @fusion.dev/helix-styles
 ```
 
 ```css
-@import '@fusion.dev/helix-styles/all.css';
+@import '@fusion.dev/helix-styles/helix.css';
 ```
 
 Or take the pieces:
@@ -18,7 +18,7 @@ Or take the pieces:
 | `tokens.css` | the custom properties, light and dark |
 | `base.css` | element defaults and the reset |
 | `primitives.css` | utility layer |
-| `all.css` | all three, in order |
+| `helix.css` | all four, in order |
 | `tokens.json` | the same token names for a build step that needs them |
 
 The tokens are the contract every Helix component reads, so overriding one here

package/dist/elements.css

@@ -0,0 +1,259 @@
+/* elements.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
+helix-accordion:not(:defined),
+helix-accordion-item:not(:defined),
+helix-announcement:not(:defined),
+helix-app-header:not(:defined),
+helix-aura:not(:defined),
+helix-avatar:not(:defined),
+helix-avatar-group:not(:defined),
+helix-badge:not(:defined),
+helix-bar-chart:not(:defined),
+helix-blockquote:not(:defined),
+helix-breadcrumb:not(:defined),
+helix-breadcrumbs:not(:defined),
+helix-button:not(:defined),
+helix-button-group:not(:defined),
+helix-callout:not(:defined),
+helix-card:not(:defined),
+helix-carousel:not(:defined),
+helix-chat:not(:defined),
+helix-chat-composer:not(:defined),
+helix-chat-message:not(:defined),
+helix-checkbox:not(:defined),
+helix-checkbox-group:not(:defined),
+helix-code:not(:defined),
+helix-code-block:not(:defined),
+helix-color-input:not(:defined),
+helix-color-picker:not(:defined),
+helix-combobox:not(:defined),
+helix-command:not(:defined),
+helix-copy-button:not(:defined),
+helix-data-table:not(:defined),
+helix-date-input:not(:defined),
+helix-date-picker:not(:defined),
+helix-dialog:not(:defined),
+helix-divider:not(:defined),
+helix-donut-chart:not(:defined),
+helix-drawer:not(:defined),
+helix-drilldown:not(:defined),
+helix-drilldown-item:not(:defined),
+helix-empty:not(:defined),
+helix-file-input:not(:defined),
+helix-flex:not(:defined),
+helix-format-date:not(:defined),
+helix-grid:not(:defined),
+helix-heatmap:not(:defined),
+helix-icon:not(:defined),
+helix-icon-button:not(:defined),
+helix-image:not(:defined),
+helix-input:not(:defined),
+helix-kbd:not(:defined),
+helix-legend:not(:defined),
+helix-line-chart:not(:defined),
+helix-list:not(:defined),
+helix-list-item:not(:defined),
+helix-listbox:not(:defined),
+helix-loader:not(:defined),
+helix-megamenu:not(:defined),
+helix-menu:not(:defined),
+helix-menu-item:not(:defined),
+helix-meter:not(:defined),
+helix-navigation:not(:defined),
+helix-notification:not(:defined),
+helix-notifications:not(:defined),
+helix-number-input:not(:defined),
+helix-option:not(:defined),
+helix-option-group:not(:defined),
+helix-outline:not(:defined),
+helix-pagination:not(:defined),
+helix-pagination-size:not(:defined),
+helix-pagination-summary:not(:defined),
+helix-pin-input:not(:defined),
+helix-popover:not(:defined),
+helix-progress:not(:defined),
+helix-qr-code:not(:defined),
+helix-quote:not(:defined),
+helix-radio:not(:defined),
+helix-radio-group:not(:defined),
+helix-rating:not(:defined),
+helix-sandbox:not(:defined),
+helix-sandbox-preview:not(:defined),
+helix-sandbox-source:not(:defined),
+helix-sandbox-status-bar:not(:defined),
+helix-sandbox-terminal:not(:defined),
+helix-sandbox-toolbar:not(:defined),
+helix-scroll-area:not(:defined),
+helix-select:not(:defined),
+helix-skeleton:not(:defined),
+helix-slider:not(:defined),
+helix-sparkline:not(:defined),
+helix-speed-dial:not(:defined),
+helix-speed-dial-item:not(:defined),
+helix-splitter:not(:defined),
+helix-stat:not(:defined),
+helix-stat-group:not(:defined),
+helix-step:not(:defined),
+helix-steps:not(:defined),
+helix-switch:not(:defined),
+helix-tab:not(:defined),
+helix-tab-panel:not(:defined),
+helix-table:not(:defined),
+helix-table-cell:not(:defined),
+helix-table-column:not(:defined),
+helix-table-row:not(:defined),
+helix-tabs:not(:defined),
+helix-tag:not(:defined),
+helix-text:not(:defined),
+helix-textarea:not(:defined),
+helix-time-input:not(:defined),
+helix-time-picker:not(:defined),
+helix-timeline:not(:defined),
+helix-timeline-item:not(:defined),
+helix-toast:not(:defined),
+helix-toast-item:not(:defined),
+helix-toggle:not(:defined),
+helix-toggle-group:not(:defined),
+helix-toolbar:not(:defined),
+helix-tooltip:not(:defined),
+helix-tour:not(:defined),
+helix-tour-stop:not(:defined),
+helix-tree:not(:defined),
+helix-tree-item:not(:defined),
+helix-trend:not(:defined),
+helix-video:not(:defined),
+helix-video-playlist:not(:defined),
+helix-video-playlist-item:not(:defined),
+helix-video-playlist-menu:not(:defined),
+helix-virtual-list:not(:defined) {
+  visibility: hidden;
+}
+:where(
+helix-accordion[align],
+helix-accordion-item[align],
+helix-announcement[align],
+helix-app-header[align],
+helix-aura[align],
+helix-avatar[align],
+helix-avatar-group[align],
+helix-badge[align],
+helix-bar-chart[align],
+helix-blockquote[align],
+helix-breadcrumb[align],
+helix-breadcrumbs[align],
+helix-button[align],
+helix-button-group[align],
+helix-callout[align],
+helix-card[align],
+helix-carousel[align],
+helix-chat[align],
+helix-chat-composer[align],
+helix-chat-message[align],
+helix-checkbox[align],
+helix-checkbox-group[align],
+helix-code[align],
+helix-code-block[align],
+helix-color-input[align],
+helix-color-picker[align],
+helix-combobox[align],
+helix-command[align],
+helix-copy-button[align],
+helix-data-table[align],
+helix-date-input[align],
+helix-date-picker[align],
+helix-dialog[align],
+helix-divider[align],
+helix-donut-chart[align],
+helix-drawer[align],
+helix-drilldown[align],
+helix-drilldown-item[align],
+helix-empty[align],
+helix-file-input[align],
+helix-flex[align],
+helix-format-date[align],
+helix-grid[align],
+helix-heatmap[align],
+helix-icon[align],
+helix-icon-button[align],
+helix-image[align],
+helix-input[align],
+helix-kbd[align],
+helix-legend[align],
+helix-line-chart[align],
+helix-list[align],
+helix-list-item[align],
+helix-listbox[align],
+helix-loader[align],
+helix-megamenu[align],
+helix-menu[align],
+helix-menu-item[align],
+helix-meter[align],
+helix-navigation[align],
+helix-notification[align],
+helix-notifications[align],
+helix-number-input[align],
+helix-option[align],
+helix-option-group[align],
+helix-outline[align],
+helix-pagination[align],
+helix-pagination-size[align],
+helix-pagination-summary[align],
+helix-pin-input[align],
+helix-popover[align],
+helix-progress[align],
+helix-qr-code[align],
+helix-quote[align],
+helix-radio[align],
+helix-radio-group[align],
+helix-rating[align],
+helix-sandbox[align],
+helix-sandbox-preview[align],
+helix-sandbox-source[align],
+helix-sandbox-status-bar[align],
+helix-sandbox-terminal[align],
+helix-sandbox-toolbar[align],
+helix-scroll-area[align],
+helix-select[align],
+helix-skeleton[align],
+helix-slider[align],
+helix-sparkline[align],
+helix-speed-dial[align],
+helix-speed-dial-item[align],
+helix-splitter[align],
+helix-stat[align],
+helix-stat-group[align],
+helix-step[align],
+helix-steps[align],
+helix-switch[align],
+helix-tab[align],
+helix-tab-panel[align],
+helix-table[align],
+helix-table-cell[align],
+helix-table-column[align],
+helix-table-row[align],
+helix-tabs[align],
+helix-tag[align],
+helix-text[align],
+helix-textarea[align],
+helix-time-input[align],
+helix-time-picker[align],
+helix-timeline[align],
+helix-timeline-item[align],
+helix-toast[align],
+helix-toast-item[align],
+helix-toggle[align],
+helix-toggle-group[align],
+helix-toolbar[align],
+helix-tooltip[align],
+helix-tour[align],
+helix-tour-stop[align],
+helix-tree[align],
+helix-tree-item[align],
+helix-trend[align],
+helix-video[align],
+helix-video-playlist[align],
+helix-video-playlist-item[align],
+helix-video-playlist-menu[align],
+helix-virtual-list[align]
+) {
+  text-align: inherit;
+}

package/dist/helix.css

@@ -0,0 +1,5 @@
+/* helix.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
+@import "./primitives.css";
+@import "./tokens.css";
+@import "./base.css";
+@import "./elements.css";

package/dist/tokens.css

@@ -1,6 +1,5 @@
 /* tokens.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
 :root {
-  color-scheme: light dark;
   --_helix-mode: light;
   --_helix-mode-inverted: dark;
   --_helix-shadow-ink-sm: light-dark(
@@ -15,6 +14,23 @@
     color-mix(in oklab, var(--_helix-neutral-950) 9%, transparent),
     color-mix(in oklab, var(--_helix-neutral-950) 14%, transparent)
   );
+  color-scheme: light dark;
+}
+[data-color-mode="light"] {
+  --_helix-mode: light;
+  --_helix-mode-inverted: dark;
+  color-scheme: light;
+}
+[data-color-mode="dark"] {
+  --_helix-mode: dark;
+  --_helix-mode-inverted: light;
+  color-scheme: dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --_helix-mode: dark;
+    --_helix-mode-inverted: light;
+  }
 }
 :root,
 [data-helix-theme] {
@@ -475,19 +491,3 @@
   --helix-layer-overlay: 1000;
   --helix-layer-toast: 1200;
 }
-[data-color-mode="light"] {
-  color-scheme: light;
-  --_helix-mode: light;
-  --_helix-mode-inverted: dark;
-}
-[data-color-mode="dark"] {
-  color-scheme: dark;
-  --_helix-mode: dark;
-  --_helix-mode-inverted: light;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --_helix-mode: dark;
-    --_helix-mode-inverted: light;
-  }
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -11,21 +11,23 @@
   },
   "type": "module",
   "exports": {
-    "./all.css": "./dist/all.css",
     "./base.css": "./dist/base.css",
+    "./elements.css": "./dist/elements.css",
+    "./helix.css": "./dist/helix.css",
     "./primitives.css": "./dist/primitives.css",
     "./tokens.css": "./dist/tokens.css",
-    "./tokens.json": "./tokens.json"
+    "./tokens.json": "./dist/tokens.json"
   },
   "files": [
-    "dist",
-    "tokens.json"
+    "dist"
   ],
   "sideEffects": true,
   "scripts": {
-    "build": "node scripts/build-styles-dist.mjs",
-    "styles-dist": "node scripts/build-styles-dist.mjs",
-    "token-layer": "bun scripts/build-token-layer.mjs"
+    "build": "bun run token-layer && bun run elements-css && bun scripts/build-styles-dist.mjs",
+    "elements-css": "build-elements-css",
+    "styles-dist": "bun scripts/build-styles-dist.mjs",
+    "token-layer": "bun scripts/build-token-layer.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "devDependencies": {

package/dist/all.css

@@ -1,4 +0,0 @@
-/* all.css from @fusion.dev/helix-styles. The source, with the reasoning in it, is in the repository. */
-@import "./primitives.css";
-@import "./tokens.css";
-@import "./base.css";