@fluixi-ui/tokens 0.4.0-alpha.16 → 0.4.0-alpha.18

package/dist/css/button.css

@@ -1,152 +0,0 @@
-@layer flx.components {
-/* ----------------------------------------------------------------------------
- * Button (and any [data-variant] control, e.g. dialog triggers). Badges also
- * carry [data-variant], so every rule here excludes [data-badge] — a badge must
- * never pick up button sizing/colour.
- * ------------------------------------------------------------------------- */
-
-/* Tone (data-tone) is orthogonal to variant: it remaps the button's own
- * `--flx-ui-color-primary*` to a semantic colour, so every variant (solid/outline/
- * ghost/soft) renders in that tone AND skins follow (they read color-primary). The
- * hover/active steps are derived (the semantic tokens only ship solid/subtle/fg). */
-:where([data-tone='danger']) {
-  --flx-ui-color-primary: var(--flx-ui-color-danger);
-  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-danger) 88%, #000);
-  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-danger) 78%, #000);
-  --flx-ui-color-primary-fg: var(--flx-ui-color-danger-fg);
-  --flx-ui-color-primary-subtle: var(--flx-ui-color-danger-subtle);
-}
-:where([data-tone='success']) {
-  --flx-ui-color-primary: var(--flx-ui-color-success);
-  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-success) 88%, #000);
-  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-success) 78%, #000);
-  --flx-ui-color-primary-fg: var(--flx-ui-color-success-fg);
-  --flx-ui-color-primary-subtle: var(--flx-ui-color-success-subtle);
-}
-:where([data-tone='warning']) {
-  --flx-ui-color-primary: var(--flx-ui-color-warning);
-  --flx-ui-color-primary-hover: color-mix(in oklab, var(--flx-ui-color-warning) 88%, #000);
-  --flx-ui-color-primary-active: color-mix(in oklab, var(--flx-ui-color-warning) 78%, #000);
-  --flx-ui-color-primary-fg: var(--flx-ui-color-warning-fg);
-  --flx-ui-color-primary-subtle: var(--flx-ui-color-warning-subtle);
-}
-:where([data-tone='neutral']) {
-  --flx-ui-color-primary: var(--flx-ui-color-fg-muted);
-  --flx-ui-color-primary-hover: var(--flx-ui-color-fg);
-  --flx-ui-color-primary-active: var(--flx-ui-color-fg);
-  --flx-ui-color-primary-fg: var(--flx-ui-color-bg);
-  --flx-ui-color-primary-subtle: var(--flx-ui-color-bg-muted);
-}
-:where([data-variant]:not([data-badge])) {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--flx-ui-space-2);
-  font: inherit;
-  font-weight: var(--flx-ui-ctl-font);
-  letter-spacing: var(--flx-ui-letter-spacing-tight);
-  line-height: var(--flx-ui-line-height-none);
-  cursor: pointer;
-  user-select: none;
-  /* Transparent base so `ghost` (and any variant that sets no background) doesn't
-     fall back to the native button UA background — visible on dark surfaces. */
-  background: transparent;
-  border: var(--flx-ui-border-width-thin) solid transparent;
-  border-radius: var(--flx-ui-radius-md);
-  height: var(--flx-ui-size-md);
-  /* Never narrower than tall, so an icon-only button (a close ×, a chevron)
-     stays square instead of collapsing to its glyph width. */
-  min-width: var(--flx-ui-size-md);
-  padding: 0 var(--flx-ui-space-4);
-  color: var(--flx-ui-color-fg);
-  transition:
-    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
-    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
-    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
-}
-:where([data-variant]:not([data-badge])[data-size='sm']) {
-  height: var(--flx-ui-size-sm);
-  min-width: var(--flx-ui-size-sm);
-  padding: 0 var(--flx-ui-space-3);
-  font-size: var(--flx-ui-font-size-sm);
-}
-:where([data-variant]:not([data-badge])[data-size='lg']) {
-  height: var(--flx-ui-size-lg);
-  min-width: var(--flx-ui-size-lg);
-  padding: 0 var(--flx-ui-space-5);
-  font-size: var(--flx-ui-font-size-lg);
-}
-
-/* Solid: the primary action — a flat, confident accent. Depth comes from the
-   color step change on interaction, not from shadow or sheen. */
-:where([data-variant='solid']:not([data-badge])) {
-  background: var(--flx-ui-color-primary);
-  color: var(--flx-ui-color-primary-fg);
-}
-:where([data-variant='solid']:not([data-badge]):hover:not([data-disabled])) {
-  background: var(--flx-ui-color-primary-hover);
-}
-:where([data-variant='solid']:not([data-badge]):active:not([data-disabled])) {
-  background: var(--flx-ui-color-primary-active);
-}
-
-/* Soft: a tinted, low-key primary. Deepened a touch over the bare subtle tint so
-   it carries enough weight to read as a control, then steps up on hover. */
-:where([data-variant='soft']:not([data-badge])) {
-  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 10%);
-  color: var(--flx-ui-color-primary-active);
-}
-:where([data-variant='soft']:not([data-badge]):hover:not([data-disabled])) {
-  background: color-mix(in oklab, var(--flx-ui-color-primary-subtle), var(--flx-ui-color-primary) 20%);
-}
-
-/* Outline: a flat hairline-bordered control. */
-:where([data-variant='outline']:not([data-badge])) {
-  border-color: var(--flx-ui-color-border-strong);
-  background: var(--flx-ui-color-bg);
-}
-:where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) {
-  background: var(--flx-ui-color-bg-subtle);
-  border-color: var(--flx-ui-color-fg-muted);
-}
-
-/* Ghost: text-only until hovered. */
-:where([data-variant='ghost']:not([data-badge])) {
-  color: var(--flx-ui-color-fg);
-}
-:where([data-variant='ghost']:not([data-badge]):hover:not([data-disabled])) {
-  background: var(--flx-ui-color-bg-muted);
-}
-
-:where([data-disabled]) {
-  opacity: var(--flx-ui-opacity-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-/* Buttons get a flat, neutral disabled instead of a dimmed accent (which reads
-   muddy). Filled variants drop to a grey fill; outline/ghost stay flat. */
-:where([data-variant]:not([data-badge])[data-disabled]) {
-  opacity: 1;
-  box-shadow: none;
-  color: var(--flx-ui-color-fg-muted);
-}
-:where([data-variant='solid']:not([data-badge])[data-disabled]),
-:where([data-variant='soft']:not([data-badge])[data-disabled]) {
-  background: var(--flx-ui-color-bg-muted);
-  border-color: transparent;
-}
-:where([data-variant='outline']:not([data-badge])[data-disabled]) {
-  background: transparent;
-  border-color: var(--flx-ui-color-border);
-}
-:where([data-variant='ghost']:not([data-badge])[data-disabled]) {
-  background: transparent;
-}
-
-/* The signature focus ring: a surface-colored gap then an accent halo. */
-:where([data-variant]:not([data-badge]):focus-visible) {
-  outline: none;
-  box-shadow: var(--flx-ui-ctl-ring);
-}
-}

package/dist/css/button.css.js

@@ -1,8 +0,0 @@
-const href = new URL('./button.css', import.meta.url).href;
-if (typeof document !== 'undefined' && !document.querySelector(`link[data-flx-ui="${href}"]`)) {
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = href;
-  link.dataset.flxUi = href;
-  document.head.appendChild(link);
-}

package/dist/preset.css

@@ -1,80 +0,0 @@
-/*
- * @fluixi-ui/tokens/preset.css — the default fluixi skin, aggregated.
- *
- * GENERATED from the per-component slices in ./css/* (the source of truth).
- * Edit a component's styles in its slice, then run
- * `pnpm --filter @fluixi-ui/tokens build:css`. Bundlers inline these @imports;
- * non-bundler consumers get every component's CSS in one import.
- */
-
-@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
-
-@import './css/base.css';
-@import './css/layout.css';
-@import './css/text.css';
-@import './css/scroll-area.css';
-@import './css/page.css';
-@import './css/splitter.css';
-@import './css/dnd.css';
-@import './css/button.css';
-@import './css/icon-button.css';
-@import './css/fab.css';
-@import './css/speed-dial.css';
-@import './css/badge.css';
-@import './css/chip.css';
-@import './css/toggle.css';
-@import './css/toolbar.css';
-@import './css/theme.css';
-@import './css/avatar.css';
-@import './css/field.css';
-@import './css/input.css';
-@import './css/number-field.css';
-@import './css/pin-input.css';
-@import './css/tags-input.css';
-@import './css/image.css';
-@import './css/file-upload.css';
-@import './css/slider.css';
-@import './css/hover-card.css';
-@import './css/alert.css';
-@import './css/skeleton.css';
-@import './css/kbd.css';
-@import './css/empty.css';
-@import './css/statistic.css';
-@import './css/descriptions.css';
-@import './css/switch.css';
-@import './css/checkbox-radio.css';
-@import './css/rating.css';
-@import './css/tabs.css';
-@import './css/accordion.css';
-@import './css/progress.css';
-@import './css/spinner.css';
-@import './css/separator.css';
-@import './css/breadcrumb.css';
-@import './css/pagination.css';
-@import './css/timeline.css';
-@import './css/surface.css';
-@import './css/card.css';
-@import './css/glow.css';
-@import './css/aspect-ratio.css';
-@import './css/carousel.css';
-@import './css/stepper.css';
-@import './css/select-combobox.css';
-@import './css/field-variants.css';
-@import './css/parts/listbox.css';
-@import './css/parts/overlays.css';
-@import './css/drawer.css';
-@import './css/bottom-sheet.css';
-@import './css/parts/menu.css';
-@import './css/menubar.css';
-@import './css/navigation-menu.css';
-@import './css/sidenav.css';
-@import './css/tree-view.css';
-@import './css/toast.css';
-@import './css/command.css';
-@import './css/tooltip.css';
-@import './css/table.css';
-@import './css/parts/motion.css';
-@import './css/calendar.css';
-@import './css/date-field.css';
-@import './css/date-picker.css';
-@import './css/bulk-editor.css';