@flood-md/tokens 0.2.3 → 0.2.5

package/README.md

@@ -1,6 +1,6 @@
 # @flood-md/tokens
 
-Typed reference values and semantic CSS roles for Flood **0.2.3**. Keep Flood
+Typed reference values and semantic CSS roles for Flood **0.2.5**. Keep Flood
 package versions aligned. Existing 0.1.1 installs use their earlier token contract.
 
 React consumers import @flood-md/react/styles.css and use FloodRoot. Token-only
@@ -30,3 +30,29 @@ overrides do not automatically change separately scoped foundations roles.
 
 Version 0.2.3 adds scrollbar size/inset/min-thumb roles and semantic thumb/hover
 colors, expanding the profile to 168 roles. Install matching package versions.
+
+
+Version 0.2.5 adds twenty-five semantic roles, bringing the dark profile
+to 193 roles. Existing role values remain unchanged:
+
+- sys.color.accent.content and sys.color.loading.placeholder separate accent text
+  and loading fills from focus and action states.
+- sys.color.indicator.track/fill/accent and sys.size.indicator.sm/md/lg control
+  bounded indicators without borrowing control or focus roles.
+- sys.color.action.danger.content styles destructive actions independently from
+  validation messages and keyboard focus.
+
+- sys.size.keycap.sm/md/lg provide independent relative heights for keyboard hints.
+
+- sys.size.container.sm/md/lg and sys.size.grid.min-item supply relative layout bounds.
+
+
+The unpublished 0.2.5 candidate separates floating surfaces from modal surfaces.
+The floating material uses nine of those new semantic roles; previous token
+values remain intact. surface.floating is the opaque fallback;
+surface.floating-translucent, border.floating, selection.floating, shadow.floating
+and effect.floating blur/saturation/shadow-offset/shadow-blur define the floating
+material. Select, Combobox, MultiSelect, Menu, Popover and Tooltip share it; Dialog
+and Drawer retain surface.overlay. Backdrop filtering is progressive enhancement;
+reduced transparency uses the opaque fill and forced colors use system colors.
+Keep text opaque and evaluate it against the actual composited background.

package/dist/foundations.css

@@ -5,6 +5,10 @@
   --flood-ref-color-feedback-info: rgb(140 187 255);
   --flood-ref-color-feedback-success: rgb(120 219 169);
   --flood-ref-color-feedback-warning: rgb(242 203 119);
+  --flood-ref-color-floating-active: rgb(255 255 255 / 0.06);
+  --flood-ref-color-floating-edge: rgb(255 255 255 / 0.07);
+  --flood-ref-color-floating-shadow: rgb(0 0 0 / 0.1);
+  --flood-ref-color-floating-translucent: rgb(56 56 56 / 0.88);
   --flood-ref-color-neutral-0: rgb(255 255 255);
   --flood-ref-color-neutral-100: rgb(237 237 237);
   --flood-ref-color-neutral-200: rgb(212 212 212);
@@ -60,13 +64,27 @@
   --flood-ref-control-xs-line-height: 1.3333333333333333;
   --flood-ref-control-xs-padding-inline: 0.75rem;
   --flood-ref-control-xs-text-size: 0.75rem;
+  --flood-ref-effect-floating-blur: 1rem;
+  --flood-ref-effect-floating-saturation: 1.05;
+  --flood-ref-effect-floating-shadow-blur: 0.5rem;
+  --flood-ref-effect-floating-shadow-offset: 0.125rem;
   --flood-ref-font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
   --flood-ref-font-sans: "Inter", "Arial", sans-serif;
+  --flood-ref-indicator-lg: 0.5rem;
+  --flood-ref-indicator-md: 0.375rem;
+  --flood-ref-indicator-sm: 0.25rem;
+  --flood-ref-keycap-lg: 1.75rem;
+  --flood-ref-keycap-md: 1.5rem;
+  --flood-ref-keycap-sm: 1.25rem;
   --flood-ref-layer-base: 0;
   --flood-ref-layer-modal: 30;
   --flood-ref-layer-popover: 20;
   --flood-ref-layer-sticky: 10;
   --flood-ref-layer-toast: 40;
+  --flood-ref-layout-container-lg: 80rem;
+  --flood-ref-layout-container-md: 64rem;
+  --flood-ref-layout-container-sm: 40rem;
+  --flood-ref-layout-grid-min-item: 16rem;
   --flood-ref-motion-duration-fast: 100ms;
   --flood-ref-motion-duration-normal: 160ms;
   --flood-ref-motion-duration-reduced: 0ms;
@@ -134,6 +152,8 @@
   --flood-ref-type-section-size: 1.25rem;
   --flood-ref-type-section-tracking: -0.015em;
   --flood-ref-type-section-weight: 500;
+  --flood-sys-color-accent-content: var(--flood-ref-color-accent-default);
+  --flood-sys-color-action-danger-content: var(--flood-ref-color-feedback-error);
   --flood-sys-color-action-ghost-content: var(--flood-ref-color-neutral-0);
   --flood-sys-color-action-ghost-disabled: var(--flood-ref-color-transparent);
   --flood-sys-color-action-ghost-disabled-content: var(--flood-ref-color-neutral-550);
@@ -160,6 +180,7 @@
   --flood-sys-color-action-subtle-rest: var(--flood-ref-color-neutral-900);
   --flood-sys-color-border-decorative: var(--flood-ref-color-neutral-750);
   --flood-sys-color-border-default: var(--flood-ref-color-neutral-650);
+  --flood-sys-color-border-floating: var(--flood-ref-color-floating-edge);
   --flood-sys-color-border-strong: var(--flood-ref-color-neutral-500);
   --flood-sys-color-content-default: var(--flood-ref-color-neutral-0);
   --flood-sys-color-content-helper: var(--flood-ref-color-neutral-100);
@@ -177,12 +198,20 @@
   --flood-sys-color-field-disabled-content: var(--flood-ref-color-neutral-550);
   --flood-sys-color-field-placeholder: var(--flood-ref-color-neutral-320);
   --flood-sys-color-focus-ring: var(--flood-ref-color-accent-default);
+  --flood-sys-color-indicator-accent: var(--flood-ref-color-accent-default);
+  --flood-sys-color-indicator-fill: var(--flood-ref-color-neutral-100);
+  --flood-sys-color-indicator-track: var(--flood-ref-color-neutral-750);
+  --flood-sys-color-loading-placeholder: var(--flood-ref-color-neutral-800);
   --flood-sys-color-scrollbar-thumb: var(--flood-ref-color-neutral-550);
   --flood-sys-color-scrollbar-thumb-hover: var(--flood-ref-color-neutral-320);
   --flood-sys-color-selection-background: var(--flood-ref-color-neutral-750);
   --flood-sys-color-selection-content: var(--flood-ref-color-neutral-0);
+  --flood-sys-color-selection-floating: var(--flood-ref-color-floating-active);
+  --flood-sys-color-shadow-floating: var(--flood-ref-color-floating-shadow);
   --flood-sys-color-surface-canvas: var(--flood-ref-color-neutral-950);
   --flood-sys-color-surface-default: var(--flood-ref-color-neutral-900);
+  --flood-sys-color-surface-floating: var(--flood-ref-color-neutral-750);
+  --flood-sys-color-surface-floating-translucent: var(--flood-ref-color-floating-translucent);
   --flood-sys-color-surface-overlay: var(--flood-ref-color-neutral-800);
   --flood-sys-color-surface-raised: var(--flood-ref-color-neutral-850);
   --flood-sys-control-2xl-gap: var(--flood-ref-control-2xl-gap);
@@ -227,6 +256,10 @@
   --flood-sys-control-xs-line-height: var(--flood-ref-control-xs-line-height);
   --flood-sys-control-xs-padding-inline: var(--flood-ref-control-xs-padding-inline);
   --flood-sys-control-xs-text-size: var(--flood-ref-control-xs-text-size);
+  --flood-sys-effect-floating-blur: var(--flood-ref-effect-floating-blur);
+  --flood-sys-effect-floating-saturation: var(--flood-ref-effect-floating-saturation);
+  --flood-sys-effect-floating-shadow-blur: var(--flood-ref-effect-floating-shadow-blur);
+  --flood-sys-effect-floating-shadow-offset: var(--flood-ref-effect-floating-shadow-offset);
   --flood-sys-focus-offset: var(--flood-ref-space-0);
   --flood-sys-focus-width: var(--flood-ref-stroke-width-2);
   --flood-sys-font-mono: var(--flood-ref-font-mono);
@@ -249,6 +282,16 @@
   --flood-sys-scrollbar-min-thumb: var(--flood-ref-scrollbar-min-thumb);
   --flood-sys-scrollbar-size: var(--flood-ref-scrollbar-size);
   --flood-sys-size-choice: var(--flood-ref-size-choice);
+  --flood-sys-size-container-lg: var(--flood-ref-layout-container-lg);
+  --flood-sys-size-container-md: var(--flood-ref-layout-container-md);
+  --flood-sys-size-container-sm: var(--flood-ref-layout-container-sm);
+  --flood-sys-size-grid-min-item: var(--flood-ref-layout-grid-min-item);
+  --flood-sys-size-indicator-lg: var(--flood-ref-indicator-lg);
+  --flood-sys-size-indicator-md: var(--flood-ref-indicator-md);
+  --flood-sys-size-indicator-sm: var(--flood-ref-indicator-sm);
+  --flood-sys-size-keycap-lg: var(--flood-ref-keycap-lg);
+  --flood-sys-size-keycap-md: var(--flood-ref-keycap-md);
+  --flood-sys-size-keycap-sm: var(--flood-ref-keycap-sm);
   --flood-sys-size-switch-height: var(--flood-ref-size-switch-height);
   --flood-sys-size-switch-thumb: var(--flood-ref-size-switch-thumb);
   --flood-sys-size-switch-width: var(--flood-ref-size-switch-width);

package/dist/foundations.d.ts

@@ -1,5 +1,15 @@
 /** Experimental token IDs and CSS variable names. */
 export declare const tokenNames: Readonly<{
+  readonly "ref.color.floating.active": "--flood-ref-color-floating-active";
+  readonly "ref.color.floating.edge": "--flood-ref-color-floating-edge";
+  readonly "ref.color.floating.shadow": "--flood-ref-color-floating-shadow";
+  readonly "ref.color.floating.translucent": "--flood-ref-color-floating-translucent";
+  readonly "ref.effect.floating.blur": "--flood-ref-effect-floating-blur";
+  readonly "ref.effect.floating.saturation": "--flood-ref-effect-floating-saturation";
+  readonly "ref.effect.floating.shadow-blur": "--flood-ref-effect-floating-shadow-blur";
+  readonly "ref.effect.floating.shadow-offset": "--flood-ref-effect-floating-shadow-offset";
+  readonly "sys.color.accent.content": "--flood-sys-color-accent-content";
+  readonly "sys.color.action.danger.content": "--flood-sys-color-action-danger-content";
   readonly "sys.color.action.ghost.content": "--flood-sys-color-action-ghost-content";
   readonly "sys.color.action.ghost.disabled": "--flood-sys-color-action-ghost-disabled";
   readonly "sys.color.action.ghost.disabled-content": "--flood-sys-color-action-ghost-disabled-content";
@@ -26,6 +36,7 @@ export declare const tokenNames: Readonly<{
   readonly "sys.color.action.subtle.rest": "--flood-sys-color-action-subtle-rest";
   readonly "sys.color.border.decorative": "--flood-sys-color-border-decorative";
   readonly "sys.color.border.default": "--flood-sys-color-border-default";
+  readonly "sys.color.border.floating": "--flood-sys-color-border-floating";
   readonly "sys.color.border.strong": "--flood-sys-color-border-strong";
   readonly "sys.color.content.default": "--flood-sys-color-content-default";
   readonly "sys.color.content.helper": "--flood-sys-color-content-helper";
@@ -43,12 +54,20 @@ export declare const tokenNames: Readonly<{
   readonly "sys.color.field.disabled-content": "--flood-sys-color-field-disabled-content";
   readonly "sys.color.field.placeholder": "--flood-sys-color-field-placeholder";
   readonly "sys.color.focus.ring": "--flood-sys-color-focus-ring";
+  readonly "sys.color.indicator.accent": "--flood-sys-color-indicator-accent";
+  readonly "sys.color.indicator.fill": "--flood-sys-color-indicator-fill";
+  readonly "sys.color.indicator.track": "--flood-sys-color-indicator-track";
+  readonly "sys.color.loading.placeholder": "--flood-sys-color-loading-placeholder";
   readonly "sys.color.scrollbar.thumb": "--flood-sys-color-scrollbar-thumb";
   readonly "sys.color.scrollbar.thumb-hover": "--flood-sys-color-scrollbar-thumb-hover";
   readonly "sys.color.selection.background": "--flood-sys-color-selection-background";
   readonly "sys.color.selection.content": "--flood-sys-color-selection-content";
+  readonly "sys.color.selection.floating": "--flood-sys-color-selection-floating";
+  readonly "sys.color.shadow.floating": "--flood-sys-color-shadow-floating";
   readonly "sys.color.surface.canvas": "--flood-sys-color-surface-canvas";
   readonly "sys.color.surface.default": "--flood-sys-color-surface-default";
+  readonly "sys.color.surface.floating": "--flood-sys-color-surface-floating";
+  readonly "sys.color.surface.floating-translucent": "--flood-sys-color-surface-floating-translucent";
   readonly "sys.color.surface.overlay": "--flood-sys-color-surface-overlay";
   readonly "sys.color.surface.raised": "--flood-sys-color-surface-raised";
   readonly "sys.control.2xl.gap": "--flood-sys-control-2xl-gap";
@@ -93,6 +112,10 @@ export declare const tokenNames: Readonly<{
   readonly "sys.control.xs.line-height": "--flood-sys-control-xs-line-height";
   readonly "sys.control.xs.padding-inline": "--flood-sys-control-xs-padding-inline";
   readonly "sys.control.xs.text-size": "--flood-sys-control-xs-text-size";
+  readonly "sys.effect.floating.blur": "--flood-sys-effect-floating-blur";
+  readonly "sys.effect.floating.saturation": "--flood-sys-effect-floating-saturation";
+  readonly "sys.effect.floating.shadow-blur": "--flood-sys-effect-floating-shadow-blur";
+  readonly "sys.effect.floating.shadow-offset": "--flood-sys-effect-floating-shadow-offset";
   readonly "sys.focus.offset": "--flood-sys-focus-offset";
   readonly "sys.focus.width": "--flood-sys-focus-width";
   readonly "sys.font.mono": "--flood-sys-font-mono";
@@ -115,6 +138,16 @@ export declare const tokenNames: Readonly<{
   readonly "sys.scrollbar.min-thumb": "--flood-sys-scrollbar-min-thumb";
   readonly "sys.scrollbar.size": "--flood-sys-scrollbar-size";
   readonly "sys.size.choice": "--flood-sys-size-choice";
+  readonly "sys.size.container.lg": "--flood-sys-size-container-lg";
+  readonly "sys.size.container.md": "--flood-sys-size-container-md";
+  readonly "sys.size.container.sm": "--flood-sys-size-container-sm";
+  readonly "sys.size.grid.min-item": "--flood-sys-size-grid-min-item";
+  readonly "sys.size.indicator.lg": "--flood-sys-size-indicator-lg";
+  readonly "sys.size.indicator.md": "--flood-sys-size-indicator-md";
+  readonly "sys.size.indicator.sm": "--flood-sys-size-indicator-sm";
+  readonly "sys.size.keycap.lg": "--flood-sys-size-keycap-lg";
+  readonly "sys.size.keycap.md": "--flood-sys-size-keycap-md";
+  readonly "sys.size.keycap.sm": "--flood-sys-size-keycap-sm";
   readonly "sys.size.switch-height": "--flood-sys-size-switch-height";
   readonly "sys.size.switch-thumb": "--flood-sys-size-switch-thumb";
   readonly "sys.size.switch-width": "--flood-sys-size-switch-width";

package/dist/foundations.js

@@ -1,5 +1,15 @@
 // Generated. Flood token API; role stability is recorded in the manifest.
 export const tokenNames = Object.freeze({
+  "ref.color.floating.active": "--flood-ref-color-floating-active",
+  "ref.color.floating.edge": "--flood-ref-color-floating-edge",
+  "ref.color.floating.shadow": "--flood-ref-color-floating-shadow",
+  "ref.color.floating.translucent": "--flood-ref-color-floating-translucent",
+  "ref.effect.floating.blur": "--flood-ref-effect-floating-blur",
+  "ref.effect.floating.saturation": "--flood-ref-effect-floating-saturation",
+  "ref.effect.floating.shadow-blur": "--flood-ref-effect-floating-shadow-blur",
+  "ref.effect.floating.shadow-offset": "--flood-ref-effect-floating-shadow-offset",
+  "sys.color.accent.content": "--flood-sys-color-accent-content",
+  "sys.color.action.danger.content": "--flood-sys-color-action-danger-content",
   "sys.color.action.ghost.content": "--flood-sys-color-action-ghost-content",
   "sys.color.action.ghost.disabled": "--flood-sys-color-action-ghost-disabled",
   "sys.color.action.ghost.disabled-content": "--flood-sys-color-action-ghost-disabled-content",
@@ -26,6 +36,7 @@ export const tokenNames = Object.freeze({
   "sys.color.action.subtle.rest": "--flood-sys-color-action-subtle-rest",
   "sys.color.border.decorative": "--flood-sys-color-border-decorative",
   "sys.color.border.default": "--flood-sys-color-border-default",
+  "sys.color.border.floating": "--flood-sys-color-border-floating",
   "sys.color.border.strong": "--flood-sys-color-border-strong",
   "sys.color.content.default": "--flood-sys-color-content-default",
   "sys.color.content.helper": "--flood-sys-color-content-helper",
@@ -43,12 +54,20 @@ export const tokenNames = Object.freeze({
   "sys.color.field.disabled-content": "--flood-sys-color-field-disabled-content",
   "sys.color.field.placeholder": "--flood-sys-color-field-placeholder",
   "sys.color.focus.ring": "--flood-sys-color-focus-ring",
+  "sys.color.indicator.accent": "--flood-sys-color-indicator-accent",
+  "sys.color.indicator.fill": "--flood-sys-color-indicator-fill",
+  "sys.color.indicator.track": "--flood-sys-color-indicator-track",
+  "sys.color.loading.placeholder": "--flood-sys-color-loading-placeholder",
   "sys.color.scrollbar.thumb": "--flood-sys-color-scrollbar-thumb",
   "sys.color.scrollbar.thumb-hover": "--flood-sys-color-scrollbar-thumb-hover",
   "sys.color.selection.background": "--flood-sys-color-selection-background",
   "sys.color.selection.content": "--flood-sys-color-selection-content",
+  "sys.color.selection.floating": "--flood-sys-color-selection-floating",
+  "sys.color.shadow.floating": "--flood-sys-color-shadow-floating",
   "sys.color.surface.canvas": "--flood-sys-color-surface-canvas",
   "sys.color.surface.default": "--flood-sys-color-surface-default",
+  "sys.color.surface.floating": "--flood-sys-color-surface-floating",
+  "sys.color.surface.floating-translucent": "--flood-sys-color-surface-floating-translucent",
   "sys.color.surface.overlay": "--flood-sys-color-surface-overlay",
   "sys.color.surface.raised": "--flood-sys-color-surface-raised",
   "sys.control.2xl.gap": "--flood-sys-control-2xl-gap",
@@ -93,6 +112,10 @@ export const tokenNames = Object.freeze({
   "sys.control.xs.line-height": "--flood-sys-control-xs-line-height",
   "sys.control.xs.padding-inline": "--flood-sys-control-xs-padding-inline",
   "sys.control.xs.text-size": "--flood-sys-control-xs-text-size",
+  "sys.effect.floating.blur": "--flood-sys-effect-floating-blur",
+  "sys.effect.floating.saturation": "--flood-sys-effect-floating-saturation",
+  "sys.effect.floating.shadow-blur": "--flood-sys-effect-floating-shadow-blur",
+  "sys.effect.floating.shadow-offset": "--flood-sys-effect-floating-shadow-offset",
   "sys.focus.offset": "--flood-sys-focus-offset",
   "sys.focus.width": "--flood-sys-focus-width",
   "sys.font.mono": "--flood-sys-font-mono",
@@ -115,6 +138,16 @@ export const tokenNames = Object.freeze({
   "sys.scrollbar.min-thumb": "--flood-sys-scrollbar-min-thumb",
   "sys.scrollbar.size": "--flood-sys-scrollbar-size",
   "sys.size.choice": "--flood-sys-size-choice",
+  "sys.size.container.lg": "--flood-sys-size-container-lg",
+  "sys.size.container.md": "--flood-sys-size-container-md",
+  "sys.size.container.sm": "--flood-sys-size-container-sm",
+  "sys.size.grid.min-item": "--flood-sys-size-grid-min-item",
+  "sys.size.indicator.lg": "--flood-sys-size-indicator-lg",
+  "sys.size.indicator.md": "--flood-sys-size-indicator-md",
+  "sys.size.indicator.sm": "--flood-sys-size-indicator-sm",
+  "sys.size.keycap.lg": "--flood-sys-size-keycap-lg",
+  "sys.size.keycap.md": "--flood-sys-size-keycap-md",
+  "sys.size.keycap.sm": "--flood-sys-size-keycap-sm",
   "sys.size.switch-height": "--flood-sys-size-switch-height",
   "sys.size.switch-thumb": "--flood-sys-size-switch-thumb",
   "sys.size.switch-width": "--flood-sys-size-switch-width",