@cube-dev/ui-kit 0.199.1 → 0.200.0

package/tasty.config.ts

@@ -3,6 +3,9 @@
  *
  * This file configures the tasty VSCode extension for the @cube-dev/ui-kit project.
  * It provides token names, units, presets, and state aliases for validation and autocomplete.
+ * For `@tenphi/eslint-plugin-tasty`, it also lists the components consumers
+ * customize through their props rather than by restyling them
+ * (`protectedComponents`).
  *
  * Projects using @cube-dev/ui-kit can extend this config:
  * ```typescript
@@ -27,6 +30,153 @@ export default {
    */
   importSources: ['@cube-dev/ui-kit'],
 
+  /**
+   * Components a consumer customizes through their props (`type`, `theme`,
+   * `size`, …) rather than by restyling them. `tasty/no-protected-restyle`
+   * reports their instance `styles` and `*Styles` props, appearance style
+   * props, and `tasty()` wrappers that restyle them, so an intended override
+   * carries a reasoned disable. Every export is protected except the layout
+   * and typography primitives, the bases meant for extension and the icons,
+   * whose `styles` are their API. Style props that place or size the root
+   * stay allowed, and containers also keep the props that lay out their
+   * content. The first matching entry decides, so the last entry holds the
+   * rest. A sub-component such as `Layout.Content` counts as the export it
+   * hangs off, unless an entry names its member path, which then decides
+   * first. Our own source imports components by relative path, which never
+   * matches `source`, so the rule holds consumers only.
+   *
+   * Without `typeAwareJSX`, the rule reads any prop named like a Tasty style
+   * as one, so a component whose own prop shares such a name gets that name
+   * allowed in an entry of its own.
+   */
+  protectedComponents: [
+    // `direction` places a field's popover, `filter` matches its options and
+    // `resize` is a text field's resize handle. The fields share one entry, so
+    // a field without one of these props still gets its name, which is no
+    // plausible restyle of a field.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'ComboBox',
+        'SearchComboBox',
+        'Select',
+        'TagInput',
+        'CommandTextArea',
+        'CommandMenu',
+        'FilterListBox',
+        'FilterPicker',
+        'ListBox',
+        'Picker',
+        'Input',
+        'TextInputBase',
+        'TextInput',
+        'TextArea',
+        'PasswordInput',
+        'NumberInput',
+        'SearchInput',
+      ],
+      allowedStyleProps: [
+        'position',
+        'dimension',
+        'direction',
+        'filter',
+        'resize',
+      ],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['ColorSwatch'],
+      allowedStyleProps: ['position', 'dimension', 'color'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['AlertDialog'],
+      allowedStyleProps: ['position', 'dimension', 'content'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['Root'],
+      allowedStyleProps: ['position', 'dimension', 'font'],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      include: ['GridProvider'],
+      allowedStyleProps: ['position', 'dimension', 'gap'],
+    },
+    // Containers. `Layout` and `GridLayout` cover their sub-components, such
+    // as `Layout.Content`, whose `scrollbar` is their own prop;
+    // `ResizablePanel`'s `direction` is the side it resizes from.
+    {
+      source: '@cube-dev/ui-kit',
+      include: [
+        'Card',
+        'Panel',
+        'ResizablePanel',
+        'Content',
+        'Header',
+        'Footer',
+        'Layout',
+        'GridLayout',
+      ],
+      allowedStyleProps: [
+        'position',
+        'dimension',
+        'flow',
+        'gap',
+        'columnGap',
+        'rowGap',
+        'place',
+        'placeItems',
+        'placeContent',
+        'align',
+        'alignItems',
+        'alignContent',
+        'justify',
+        'justifyItems',
+        'justifyContent',
+        'gridColumns',
+        'gridRows',
+        'gridTemplate',
+        'gridAreas',
+        'gridAutoFlow',
+        'gridAutoColumns',
+        'gridAutoRows',
+        'padding',
+        'blockPadding',
+        'inlinePadding',
+        'overflow',
+        'scrollbar',
+        'direction',
+      ],
+    },
+    {
+      source: '@cube-dev/ui-kit',
+      // `*Icon` also matches `Icon`. `Button.Group` is `ButtonGroup`, a
+      // `Space`, and its member path decides before `Button` does.
+      exclude: [
+        'Element',
+        'Block',
+        'Flex',
+        'Flow',
+        'Grid',
+        'Space',
+        'ButtonGroup',
+        'Button.Group',
+        'Prefix',
+        'Suffix',
+        'Text',
+        'TextItem',
+        'Title',
+        'Paragraph',
+        'Typography',
+        'Action',
+        '*Icon',
+        'IconSwitch',
+      ],
+      allowedStyleProps: ['position', 'dimension'],
+    },
+  ],
+
   tokens: [
     // Declared in src/tasty-augment.d.ts but previously absent here, so the
     // ESLint plugin reported them as unknown once story files started being
@@ -56,8 +206,17 @@ export default {
     '#surface-2-text-soft',
     '#surface-3-text',
     '#surface-3-text-soft',
-    // Fixed-mode surface emitted by the special palette theme.
+    // Fixed-mode tokens emitted by the special palette theme.
     '#special-surface',
+    '#special-accent-disabled-surface',
+    '#special-accent-disabled-surface-text',
+    '#special-accent-surface',
+    '#special-accent-surface-2',
+    '#special-accent-surface-3',
+    '#special-accent-surface-border',
+    '#special-accent-surface-hover',
+    '#special-accent-surface-text',
+    '#special-accent-text',
 
     // ---- Glaze: accent system (default theme) ----
     '#accent-surface',
@@ -65,11 +224,13 @@ export default {
     '#accent-surface-3',
     '#accent-surface-hover',
     '#accent-surface-text',
+    '#accent-selected-fill',
     '#accent-text',
     '#accent-text-soft',
     '#accent-icon',
     '#accent-disabled-surface',
     '#accent-disabled-surface-text',
+    '#accent-disabled-text',
 
     // ---- Glaze: per-theme primary / purple (purple is alias of primary) ----
     '#primary',
@@ -82,18 +243,24 @@ export default {
     '#primary-desaturated',
     '#primary-surface',
     '#primary-surface-text',
+    '#primary-surface-text-soft',
+    '#primary-surface-text-soft-2',
     '#primary-accent-surface',
     '#primary-accent-surface-2',
     '#primary-accent-surface-3',
     '#primary-accent-surface-hover',
     '#primary-accent-surface-text',
+    '#primary-accent-selected-fill',
+    '#primary-accent-surface-border',
     '#primary-accent-text',
     '#primary-accent-text-soft',
     '#primary-accent-icon',
     '#primary-accent-disabled-surface',
     '#primary-accent-disabled-surface-text',
+    '#primary-accent-disabled-text',
     '#purple',
     '#purple-bg',
+    '#purple-border',
     '#purple-text',
     '#purple-text-soft',
     '#purple-icon',
@@ -101,16 +268,21 @@ export default {
     '#purple-disabled',
     '#purple-surface',
     '#purple-surface-text',
+    '#purple-surface-text-soft',
+    '#purple-surface-text-soft-2',
     '#purple-accent-surface',
     '#purple-accent-surface-2',
     '#purple-accent-surface-3',
     '#purple-accent-surface-hover',
     '#purple-accent-surface-text',
+    '#purple-accent-selected-fill',
+    '#purple-accent-surface-border',
     '#purple-accent-text',
     '#purple-accent-text-soft',
     '#purple-accent-icon',
     '#purple-accent-disabled-surface',
     '#purple-accent-disabled-surface-text',
+    '#purple-accent-disabled-text',
 
     // ---- Glaze: per-theme danger ----
     '#danger',
@@ -123,6 +295,8 @@ export default {
     '#danger-desaturated',
     '#danger-surface',
     '#danger-surface-text',
+    '#danger-surface-text-soft',
+    '#danger-surface-text-soft-2',
     '#danger-alert-surface',
     '#danger-alert-border',
     '#danger-accent-surface',
@@ -130,11 +304,14 @@ export default {
     '#danger-accent-surface-3',
     '#danger-accent-surface-hover',
     '#danger-accent-surface-text',
+    '#danger-accent-selected-fill',
+    '#danger-accent-surface-border',
     '#danger-accent-text',
     '#danger-accent-text-soft',
     '#danger-accent-icon',
     '#danger-accent-disabled-surface',
     '#danger-accent-disabled-surface-text',
+    '#danger-accent-disabled-text',
 
     // ---- Glaze: per-theme success ----
     '#success',
@@ -147,6 +324,8 @@ export default {
     '#success-desaturated',
     '#success-surface',
     '#success-surface-text',
+    '#success-surface-text-soft',
+    '#success-surface-text-soft-2',
     '#success-alert-surface',
     '#success-alert-border',
     '#success-accent-surface',
@@ -154,11 +333,14 @@ export default {
     '#success-accent-surface-3',
     '#success-accent-surface-hover',
     '#success-accent-surface-text',
+    '#success-accent-selected-fill',
+    '#success-accent-surface-border',
     '#success-accent-text',
     '#success-accent-text-soft',
     '#success-accent-icon',
     '#success-accent-disabled-surface',
     '#success-accent-disabled-surface-text',
+    '#success-accent-disabled-text',
 
     // ---- Glaze: per-theme warning ----
     '#warning',
@@ -171,6 +353,8 @@ export default {
     '#warning-desaturated',
     '#warning-surface',
     '#warning-surface-text',
+    '#warning-surface-text-soft',
+    '#warning-surface-text-soft-2',
     '#warning-alert-surface',
     '#warning-alert-border',
     '#warning-accent-surface',
@@ -178,11 +362,14 @@ export default {
     '#warning-accent-surface-3',
     '#warning-accent-surface-hover',
     '#warning-accent-surface-text',
+    '#warning-accent-selected-fill',
+    '#warning-accent-surface-border',
     '#warning-accent-text',
     '#warning-accent-text-soft',
     '#warning-accent-icon',
     '#warning-accent-disabled-surface',
     '#warning-accent-disabled-surface-text',
+    '#warning-accent-disabled-text',
 
     // ---- Glaze: per-theme note ----
     '#note',
@@ -195,6 +382,8 @@ export default {
     '#note-desaturated',
     '#note-surface',
     '#note-surface-text',
+    '#note-surface-text-soft',
+    '#note-surface-text-soft-2',
     '#note-alert-surface',
     '#note-alert-border',
     '#note-accent-surface',
@@ -202,11 +391,14 @@ export default {
     '#note-accent-surface-3',
     '#note-accent-surface-hover',
     '#note-accent-surface-text',
+    '#note-accent-selected-fill',
+    '#note-accent-surface-border',
     '#note-accent-text',
     '#note-accent-text-soft',
     '#note-accent-icon',
     '#note-accent-disabled-surface',
     '#note-accent-disabled-surface-text',
+    '#note-accent-disabled-text',
 
     // ---- Glaze: PrismCode syntax palette ----
     '#code-comment',
@@ -253,6 +445,11 @@ export default {
     '#disabled-surface-text',
     '#disabled-surface',
     '#disabled-opacity',
+    '#fixed-dark',
+    '#fixed-primary-text',
+
+    // ---- Context hooks (src/tokens/colors.ts) ----
+    '#current-fill',
 
     // ---- Component-local custom tokens ----
     '#scrollbar-thumb',
@@ -264,10 +461,10 @@ export default {
     '#slider-thumb',
     '#slider-thumb-hovered',
     // ColorPicker: the color being edited, and the black/white that reads on
-    // top of it. Both are set as inline custom properties per render.
+    // top of it. Both are passed through the `tokens` prop per render.
     '#color-picker',
     '#color-picker-contrast',
-    // ColorSwatchGroup: the color of an individual swatch, set inline per option.
+    // ColorSwatchGroup: the color of an individual swatch, a `tokens` value per option.
     '#color-swatch',
 
     // Custom Property Tokens (from src/tokens/base.ts)
@@ -279,6 +476,9 @@ export default {
     '$input-letter-spacing',
     '$disabled-opacity',
     '$stroke-width',
+    '$outline-offset',
+    '$ring-width',
+    '$item-gap',
     '$large-radius',
     '$card-radius',
     '$leaf-sharp-radius',
@@ -287,6 +487,8 @@ export default {
     '$disclosure-transition',
     '$tab-transition',
     '$fade-transition',
+    '$overlay-transition',
+    '$scrollbar-transition',
     '$scrollbar-width',
     '$scrollbar-outline-width',
     '$scrollbar-radius',
@@ -340,7 +542,7 @@ export default {
    * State alias names for autocomplete.
    * These are predefined responsive and theme states.
    */
-  states: ['@mobile', '@compact'],
+  states: ['@mobile', '@compact', '@dark', '@hc'],
 
   /**
    * Valid preset names for the `preset` style property.