@flood-md/tokens 0.2.2 → 0.2.4

package/README.md

@@ -1,6 +1,6 @@
 # @flood-md/tokens
 
-Typed reference values and semantic CSS roles for Flood **0.2.2**. Keep Flood
+Typed reference values and semantic CSS roles for Flood **0.2.4**. 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
@@ -19,9 +19,29 @@ on their scope; repeat both attributes for nested scopes. See the
 [foundations guide](../../docs/foundations.md) for supported types and limits.
 
 The React package bundles Inter and its OFL license. Token-only consumers provide
-their own font setup. Quiet field outlines need their separate necessary
-boundary signal; decorative line contrast is distinct from text accessibility.
+their own font setup. Version 0.2.3 maps the quiet field.border role to the
+container-outline tone. field.boundary remains a stronger opt-in; the quiet
+default does not establish 3:1 non-text contrast. Evaluate actual recognition
+and accessibility for the host composition.
 
 Legacy ./tokens.css and JSON retain the earlier shared/light/dark contract and
 --flood-* names. Legacy controls outside FloodRoot remain compatible; legacy
 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.4 adds sixteen semantic roles, bringing the dark profile
+to 184 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.

package/dist/foundations.css

@@ -62,11 +62,21 @@
   --flood-ref-control-xs-text-size: 0.75rem;
   --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;
@@ -76,6 +86,9 @@
   --flood-ref-radius-field: 1rem;
   --flood-ref-radius-indicator: 0.375rem;
   --flood-ref-radius-surface: 2rem;
+  --flood-ref-scrollbar-inset: 0.25rem;
+  --flood-ref-scrollbar-min-thumb: 1.5rem;
+  --flood-ref-scrollbar-size: 0.375rem;
   --flood-ref-size-choice: 1.125rem;
   --flood-ref-size-switch-height: 1.375rem;
   --flood-ref-size-switch-thumb: 1rem;
@@ -131,6 +144,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);
@@ -167,13 +182,19 @@
   --flood-sys-color-feedback-success: var(--flood-ref-color-feedback-success);
   --flood-sys-color-feedback-warning: var(--flood-ref-color-feedback-warning);
   --flood-sys-color-field-background: var(--flood-ref-color-neutral-850);
-  --flood-sys-color-field-border: var(--flood-ref-color-neutral-650);
+  --flood-sys-color-field-border: var(--flood-ref-color-neutral-750);
   --flood-sys-color-field-boundary: var(--flood-ref-color-neutral-500);
   --flood-sys-color-field-content: var(--flood-ref-color-neutral-0);
   --flood-sys-color-field-disabled: var(--flood-ref-color-neutral-900);
   --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-surface-canvas: var(--flood-ref-color-neutral-950);
@@ -240,7 +261,20 @@
   --flood-sys-radius-field: var(--flood-ref-radius-field);
   --flood-sys-radius-indicator: var(--flood-ref-radius-indicator);
   --flood-sys-radius-surface: var(--flood-ref-radius-surface);
+  --flood-sys-scrollbar-inset: var(--flood-ref-scrollbar-inset);
+  --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,7 @@
 /** Experimental token IDs and CSS variable names. */
 export declare const tokenNames: Readonly<{
+  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";
@@ -43,6 +45,12 @@ 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.surface.canvas": "--flood-sys-color-surface-canvas";
@@ -109,7 +117,20 @@ export declare const tokenNames: Readonly<{
   readonly "sys.radius.field": "--flood-sys-radius-field";
   readonly "sys.radius.indicator": "--flood-sys-radius-indicator";
   readonly "sys.radius.surface": "--flood-sys-radius-surface";
+  readonly "sys.scrollbar.inset": "--flood-sys-scrollbar-inset";
+  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,7 @@
 // Generated. Flood token API; role stability is recorded in the manifest.
 export const tokenNames = Object.freeze({
+  "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",
@@ -43,6 +45,12 @@ 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.surface.canvas": "--flood-sys-color-surface-canvas",
@@ -109,7 +117,20 @@ export const tokenNames = Object.freeze({
   "sys.radius.field": "--flood-sys-radius-field",
   "sys.radius.indicator": "--flood-sys-radius-indicator",
   "sys.radius.surface": "--flood-sys-radius-surface",
+  "sys.scrollbar.inset": "--flood-sys-scrollbar-inset",
+  "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",