@flood-md/tokens
Typed reference values and semantic CSS roles for Flood 0.2.14. 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 consumers import @flood-md/tokens/foundations.css and set both attributes on the same scope element: data-flood-foundations="neutral" data-flood-theme="dark". Only the neutral/dark foundations profile is supplied.
The 0.2.11 candidate adds base/filled contextual neutral recipes. Absolute material colors remain separate from inherited action, field, selection and supporting-element roles. React material owners establish the appropriate context; token-only hosts must apply their own scoped role mapping. See the foundations guide's material-context section and the generated manifest before overriding an elevated control recipe. Alpha fills need review over the actual backdrop; they do not establish accessibility by themselves.
Exports include ./foundations (typed tokenNames lookup), ./foundations.css, ./foundations.manifest.json and ./neutral.dark.tokens.json. Values are authored only in src/tokens.json. Generated artifacts must not be edited.
Roles cover surfaces/content, primary/subtle/contextual actions, fields, selection/feedback/focus, Inter typography, relative spacing/radii, control/icon sizes, motion and local layer order. Override public semantic --flood-sys-* roles on their scope; repeat both attributes for nested scopes. See the foundations guide for supported types and limits.
The React package bundles Inter and its OFL license. Token-only consumers provide 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.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.
Version 0.2.5 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.
Version 0.2.11 adds field-label, group-title and dialog-title type roles. They separate form hierarchy without changing generic body/label roles or the host root font. Runtime values are compiled only from src/tokens.json.