@flood-md/tokens 0.2.2 → 0.2.3

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.3**. 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,14 @@ 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.

package/dist/foundations.css

@@ -76,6 +76,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;
@@ -167,13 +170,15 @@
   --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-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,6 +245,9 @@
   --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-switch-height: var(--flood-ref-size-switch-height);
   --flood-sys-size-switch-thumb: var(--flood-ref-size-switch-thumb);

package/dist/foundations.d.ts

@@ -43,6 +43,8 @@ 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.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,6 +111,9 @@ 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.switch-height": "--flood-sys-size-switch-height";
   readonly "sys.size.switch-thumb": "--flood-sys-size-switch-thumb";

package/dist/foundations.js

@@ -43,6 +43,8 @@ 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.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,6 +111,9 @@ 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.switch-height": "--flood-sys-size-switch-height",
   "sys.size.switch-thumb": "--flood-sys-size-switch-thumb",

package/dist/foundations.manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "version": "0.2.2",
+  "version": "0.2.3",
   "status": "experimental",
   "contexts": [
     {
@@ -1114,29 +1114,29 @@
           "id": "sys.color.field.border",
           "type": "color",
           "cssName": "--flood-sys-color-field-border",
-          "description": "Quiet field outline; supplement with field.boundary when boundary is necessary",
+          "description": "Quiet default control outline; use field.boundary explicitly when a stronger recognition signal is required",
           "status": "experimental",
           "visibility": "public",
           "owner": "foundations",
           "since": "0.2.0",
           "usage": {
             "allowed": [
-              "Quiet field outline; supplement with field.boundary when boundary is necessary"
+              "Quiet default control outline; use field.boundary explicitly when a stronger recognition signal is required"
             ],
             "avoid": []
           },
           "value": {
             "colorSpace": "srgb",
             "components": [
-              0.2901960784313726,
-              0.2901960784313726,
-              0.2901960784313726
+              0.2196078431372549,
+              0.2196078431372549,
+              0.2196078431372549
             ],
             "alpha": 1
           },
-          "alias": "ref.color.neutral.650",
+          "alias": "ref.color.neutral.750",
           "dependencies": [
-            "ref.color.neutral.650"
+            "ref.color.neutral.750"
           ],
           "dependents": []
         },
@@ -1320,6 +1320,66 @@
           ],
           "dependents": []
         },
+        {
+          "id": "sys.color.scrollbar.thumb",
+          "type": "color",
+          "cssName": "--flood-sys-color-scrollbar-thumb",
+          "description": "Overlay scrollbar thumb",
+          "status": "experimental",
+          "visibility": "public",
+          "owner": "foundations",
+          "since": "0.2.3",
+          "usage": {
+            "allowed": [
+              "Overlay scrollbar thumb"
+            ],
+            "avoid": []
+          },
+          "value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.47843137254901963,
+              0.47843137254901963,
+              0.47843137254901963
+            ],
+            "alpha": 1
+          },
+          "alias": "ref.color.neutral.550",
+          "dependencies": [
+            "ref.color.neutral.550"
+          ],
+          "dependents": []
+        },
+        {
+          "id": "sys.color.scrollbar.thumb-hover",
+          "type": "color",
+          "cssName": "--flood-sys-color-scrollbar-thumb-hover",
+          "description": "Hovered or dragged overlay scrollbar thumb",
+          "status": "experimental",
+          "visibility": "public",
+          "owner": "foundations",
+          "since": "0.2.3",
+          "usage": {
+            "allowed": [
+              "Hovered or dragged overlay scrollbar thumb"
+            ],
+            "avoid": []
+          },
+          "value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.6980392156862745,
+              0.6980392156862745,
+              0.6980392156862745
+            ],
+            "alpha": 1
+          },
+          "alias": "ref.color.neutral.320",
+          "dependencies": [
+            "ref.color.neutral.320"
+          ],
+          "dependents": []
+        },
         {
           "id": "sys.color.selection.background",
           "type": "color",
@@ -2969,6 +3029,81 @@
           ],
           "dependents": []
         },
+        {
+          "id": "sys.scrollbar.inset",
+          "type": "dimension",
+          "cssName": "--flood-sys-scrollbar-inset",
+          "description": "Overlay scrollbar inset",
+          "status": "experimental",
+          "visibility": "public",
+          "owner": "foundations",
+          "since": "0.2.3",
+          "usage": {
+            "allowed": [
+              "Overlay scrollbar inset"
+            ],
+            "avoid": []
+          },
+          "value": {
+            "value": 0.25,
+            "unit": "rem"
+          },
+          "alias": "ref.scrollbar.inset",
+          "dependencies": [
+            "ref.scrollbar.inset"
+          ],
+          "dependents": []
+        },
+        {
+          "id": "sys.scrollbar.min-thumb",
+          "type": "dimension",
+          "cssName": "--flood-sys-scrollbar-min-thumb",
+          "description": "Overlay scrollbar min-thumb",
+          "status": "experimental",
+          "visibility": "public",
+          "owner": "foundations",
+          "since": "0.2.3",
+          "usage": {
+            "allowed": [
+              "Overlay scrollbar min-thumb"
+            ],
+            "avoid": []
+          },
+          "value": {
+            "value": 1.5,
+            "unit": "rem"
+          },
+          "alias": "ref.scrollbar.min-thumb",
+          "dependencies": [
+            "ref.scrollbar.min-thumb"
+          ],
+          "dependents": []
+        },
+        {
+          "id": "sys.scrollbar.size",
+          "type": "dimension",
+          "cssName": "--flood-sys-scrollbar-size",
+          "description": "Overlay scrollbar size",
+          "status": "experimental",
+          "visibility": "public",
+          "owner": "foundations",
+          "since": "0.2.3",
+          "usage": {
+            "allowed": [
+              "Overlay scrollbar size"
+            ],
+            "avoid": []
+          },
+          "value": {
+            "value": 0.375,
+            "unit": "rem"
+          },
+          "alias": "ref.scrollbar.size",
+          "dependencies": [
+            "ref.scrollbar.size"
+          ],
+          "dependents": []
+        },
         {
           "id": "sys.size.choice",
           "type": "dimension",

package/dist/neutral.dark.tokens.json

@@ -1763,6 +1763,74 @@
         }
       }
     },
+    "scrollbar": {
+      "inset": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.25,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar inset",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "internal",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar inset"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      },
+      "min-thumb": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar min-thumb",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "internal",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar min-thumb"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      },
+      "size": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.375,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar size",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "internal",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar size"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      }
+    },
     "size": {
       "choice": {
         "$type": "dimension",
@@ -3965,13 +4033,13 @@
           "$value": {
             "colorSpace": "srgb",
             "components": [
-              0.2901960784313726,
-              0.2901960784313726,
-              0.2901960784313726
+              0.2196078431372549,
+              0.2196078431372549,
+              0.2196078431372549
             ],
             "alpha": 1
           },
-          "$description": "Quiet field outline; supplement with field.boundary when boundary is necessary",
+          "$description": "Quiet default control outline; use field.boundary explicitly when a stronger recognition signal is required",
           "$extensions": {
             "md.flood": {
               "status": "experimental",
@@ -3980,7 +4048,7 @@
               "since": "0.2.0",
               "usage": {
                 "allowed": [
-                  "Quiet field outline; supplement with field.boundary when boundary is necessary"
+                  "Quiet default control outline; use field.boundary explicitly when a stronger recognition signal is required"
                 ],
                 "avoid": []
               }
@@ -4152,6 +4220,62 @@
           }
         }
       },
+      "scrollbar": {
+        "thumb": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.47843137254901963,
+              0.47843137254901963,
+              0.47843137254901963
+            ],
+            "alpha": 1
+          },
+          "$description": "Overlay scrollbar thumb",
+          "$extensions": {
+            "md.flood": {
+              "status": "experimental",
+              "visibility": "public",
+              "owner": "foundations",
+              "since": "0.2.3",
+              "usage": {
+                "allowed": [
+                  "Overlay scrollbar thumb"
+                ],
+                "avoid": []
+              }
+            }
+          }
+        },
+        "thumb-hover": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [
+              0.6980392156862745,
+              0.6980392156862745,
+              0.6980392156862745
+            ],
+            "alpha": 1
+          },
+          "$description": "Hovered or dragged overlay scrollbar thumb",
+          "$extensions": {
+            "md.flood": {
+              "status": "experimental",
+              "visibility": "public",
+              "owner": "foundations",
+              "since": "0.2.3",
+              "usage": {
+                "allowed": [
+                  "Hovered or dragged overlay scrollbar thumb"
+                ],
+                "avoid": []
+              }
+            }
+          }
+        }
+      },
       "selection": {
         "background": {
           "$type": "color",
@@ -5634,6 +5758,74 @@
         }
       }
     },
+    "scrollbar": {
+      "inset": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.25,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar inset",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "public",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar inset"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      },
+      "min-thumb": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar min-thumb",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "public",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar min-thumb"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      },
+      "size": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.375,
+          "unit": "rem"
+        },
+        "$description": "Overlay scrollbar size",
+        "$extensions": {
+          "md.flood": {
+            "status": "experimental",
+            "visibility": "public",
+            "owner": "foundations",
+            "since": "0.2.3",
+            "usage": {
+              "allowed": [
+                "Overlay scrollbar size"
+              ],
+              "avoid": []
+            }
+          }
+        }
+      }
+    },
     "size": {
       "choice": {
         "$type": "dimension",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/tokens",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "description": "Flood semantic design tokens and light/dark themes.",
   "license": "MIT",