@cube-dev/ui-kit 0.199.1 → 0.199.2

package/docs/components/content/Layout.md

@@ -394,14 +394,14 @@ A variant of Layout that enables CSS Grid for the content area.
 <GridLayout
   height="100dvh"
   columns="repeat(2, 1fr)"
-  rows="auto 1fr"
+  rows="auto auto 1fr"
   gap="2x"
   padding="2x"
 >
-  <Layout.Header title="Grid Dashboard" />
-  <div style={{ gridColumn: '1 / -1' }}>Full-width card</div>
-  <div>Left card</div>
-  <div>Right card</div>
+  <Layout.Header gridColumn="1 / 3" title="Grid Dashboard" />
+  <Card gridColumn="1 / 3">Full-width card</Card>
+  <Card>Left card</Card>
+  <Card>Right card</Card>
 </GridLayout>
 ```
 
@@ -764,9 +764,9 @@ To prevent dismissing the overlay by clicking, pressing Escape or moving focus t
   <Layout.Header title="Tiny Scrollbar" />
   <Layout.Content scrollbar="tiny">
     {Array.from({ length: 20 }, (_, i) => (
-      <div key={i} style={{ padding: '8px' }}>
+      <Block key={i} padding="1x">
         <Text>Line {i + 1}: Hover to reveal scrollbar indicator.</Text>
-      </div>
+      </Block>
     ))}
   </Layout.Content>
 </Layout>

package/docs/components/content/Text.md

@@ -51,7 +51,7 @@ These properties allow direct style application without using the `styles` prop:
 ```jsx
 <Text>Inline text</Text>
 
-<Text ellipsis style={{ maxWidth: 200 }}>
+<Text ellipsis styles={{ maxWidth: '25x' }}>
   Long text that will be truncated with ellipsis
 </Text>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.199.1",
+  "version": "0.199.2",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -97,7 +97,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.8.0",
+    "@tenphi/eslint-plugin-tasty": "^1.8.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",

package/tasty.config.ts

@@ -56,8 +56,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 +74,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 +93,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 +118,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 +145,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 +154,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 +174,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 +183,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 +203,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 +212,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 +232,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 +241,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 +295,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 +311,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)
@@ -287,6 +334,8 @@ export default {
     '$disclosure-transition',
     '$tab-transition',
     '$fade-transition',
+    '$overlay-transition',
+    '$scrollbar-transition',
     '$scrollbar-width',
     '$scrollbar-outline-width',
     '$scrollbar-radius',
@@ -340,7 +389,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.