Fix new semantic css names.

Author: koculu

frontend/purestack.studio/guides/semantic-tones.mdx

@@ -123,7 +123,7 @@ Keep fill, border, and text from the same role when you need a ready-made combin
 
 `spotlight` is for large areas such as feature bands, callouts, and showcase panels. It is a calm field with a soft light, without the gloss and edge shading of surfaces and buttons, so it stays calm at any size. It has no interaction states and pairs with the alternate surface border and text classes. Components accept it as `variant="spotlight"`, for example `<Panel tone="accent" variant="spotlight">`.
 
-Keep spotlights rare: one or two per page, for the pieces a visitor should notice first. Most surfaces should be quiet. `tone-fill-surface-flat`, `tone-fill-surface-alt-flat`, and `tone-fill-button-flat` paint a role's single color without the gradient chrome, with the same `-hover`, `-active`, `-disabled`, and `-all` forms as the gradient fills. Components accept them as `variant="flat"`, `variant="flatAlt"`, and `variant="flatSolid"`:
+Keep spotlights rare: one or two per page, for the pieces a visitor should notice first. Most surfaces should be quiet. `tone-fill-flat`, `tone-fill-flat-alt`, and `tone-fill-flat-solid` paint a role's single color without the gradient chrome, with the same `-hover`, `-active`, `-disabled`, and `-all` forms as the gradient fills. Components accept them as `variant="flat"`, `variant="flatAlt"`, and `variant="flatSolid"`:
 
 ```mdx
 <Panel tone="neutral" variant="flat">A quiet card</Panel>

packages/ts-components/src/standard/componentVariant.ts

@@ -49,11 +49,11 @@ const STATELESS_COMPONENT_VARIANT_CLASSES: Record<ComponentVariant, string> = {
     'b-1 rounded-md tone-fill-spotlight tone-border-surface-alt tone-text-surface-alt',
   glass:
     'b-1 rounded-md tone-fill-glass tone-border-surface-alt tone-text-surface-alt',
-  flat: 'b-1 rounded-md tone-fill-surface-flat tone-border-surface tone-text-surface',
+  flat: 'b-1 rounded-md tone-fill-flat tone-border-surface tone-text-surface',
   flatAlt:
-    'b-1 rounded-md tone-fill-surface-alt-flat tone-border-surface-alt tone-text-surface-alt',
+    'b-1 rounded-md tone-fill-flat-alt tone-border-surface-alt tone-text-surface-alt',
   flatSolid:
-    'b-1 rounded-md tone-fill-button-flat tone-border-button tone-text-button',
+    'b-1 rounded-md tone-fill-flat-solid tone-border-button tone-text-button',
   outlineFill: 'b-2 rounded-md tone-border-button tone-text',
   outline: 'b-2 rounded-md tone-text',
   subtle: 'b-0 rounded-md tone-text',
@@ -66,11 +66,11 @@ const STATELESS_COMPONENT_VARIANT_CLASSES: Record<ComponentVariant, string> = {
 }
 
 const STATEFUL_COMPONENT_VARIANT_CLASSES = {
-  flat: 'tone-fill-surface-flat-hover tone-fill-surface-flat-active tone-border-surface-hover tone-border-surface-active tone-text-surface-hover tone-text-surface-active',
+  flat: 'tone-fill-flat-hover tone-fill-flat-active tone-border-surface-hover tone-border-surface-active tone-text-surface-hover tone-text-surface-active',
   flatAlt:
-    'tone-fill-surface-alt-flat-hover tone-fill-surface-alt-flat-active tone-border-surface-alt-hover tone-border-surface-alt-active tone-text-surface-alt-hover tone-text-surface-alt-active',
+    'tone-fill-flat-alt-hover tone-fill-flat-alt-active tone-border-surface-alt-hover tone-border-surface-alt-active tone-text-surface-alt-hover tone-text-surface-alt-active',
   flatSolid:
-    'tone-fill-button-flat-hover tone-fill-button-flat-active tone-border-button-hover tone-border-button-active tone-text-button-hover tone-text-button-active',
+    'tone-fill-flat-solid-hover tone-fill-flat-solid-active tone-border-button-hover tone-border-button-active tone-text-button-hover tone-text-button-active',
   solid:
     'tone-fill-button-hover tone-fill-button-active tone-border-button-hover tone-border-button-active tone-text-button-hover tone-text-button-active',
   surface:

packages/ts-style/src/semanticPresets.ts

@@ -216,9 +216,9 @@ function createFills(
     },
     // Flat fills paint each role's single color, without the gradient
     // chrome, for the many quiet surfaces around a few spotlights.
-    'tone-fill-surface-flat': flatFill(current.surface),
-    'tone-fill-surface-alt-flat': flatFill(current.surfaceAlt),
-    'tone-fill-button-flat': flatFill(current.button),
+    'tone-fill-flat': flatFill(current.surface),
+    'tone-fill-flat-alt': flatFill(current.surfaceAlt),
+    'tone-fill-flat-solid': flatFill(current.button),
     'tone-fill-surface': {
       all: true,
       rest: {