feat(HotKeys): inherit type (#875)

Author: tenphi

.changeset/hotkeys-inherit-type.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Add `inherit` type to HotKeys component. The inherit type uses `currentColor` for both text and border, allowing the component to adapt to its parent's color context with a transparent background.

.cursor/rules/documentation.mdc

@@ -1,8 +1,7 @@
 ---
-globs: *.docs.mdx
+description: When updating the component documentation file *.docs.mdx
 alwaysApply: false
 ---
-
 # Component Documentation Guidelines
 
 This guide outlines the standards and structure for documenting components in the Cube UI Kit. Following these guidelines ensures consistency, clarity, and comprehensive coverage of component features.

.cursor/rules/storybook.mdc

@@ -1,5 +1,5 @@
 ---
-globs: *.stories.tsx,*.docs.mdx
+description: When updating storybook files and documentatino files *.stories.tsx, *.docs.mdx
 alwaysApply: false
 ---
 ## Imports

src/components/content/HotKeys/HotKeys.docs.mdx

@@ -43,6 +43,18 @@ Customizes the root element of the component (Space component).
 
 These properties allow direct style application without using the `styles` prop: `width`, `height`, `padding`, `margin`, `gap`, `flow`, `placeContent`, `placeItems`.
 
+#### type
+
+Defines the visual appearance of the keyboard shortcuts.
+
+**Type:** `'default' | 'primary' | 'inherit'`
+
+**Default:** `'default'`
+
+- `default` - Standard appearance with subtle background and border
+- `primary` - High contrast appearance with white text and border on transparent background
+- `inherit` - Adapts to parent's text color for both text and border, transparent background
+
 ### Accessibility Properties
 
 #### label
@@ -67,6 +79,50 @@ The `mods` property accepts standard Space component modifiers.
 <HotKeys>mod+k</HotKeys>
 ```
 
+### Types
+
+The HotKeys component supports different visual types:
+
+#### Default Type
+
+<Story of={HotKeysStories.Default} />
+
+```jsx
+<HotKeys>mod+k</HotKeys>
+```
+
+#### Primary Type
+
+<Story of={HotKeysStories.Primary} />
+
+```jsx
+<HotKeys type="primary" aria-label="Search">mod+k</HotKeys>
+```
+
+#### Inherit Type
+
+The `inherit` type uses the current text color for the border and text, making it adapt to its parent's color context.
+
+<Story of={HotKeysStories.Inherit} />
+
+```jsx
+<HotKeys type="inherit" aria-label="Search">mod+k</HotKeys>
+```
+
+#### Inherit Type in Context
+
+The inherit type is particularly useful when the HotKeys component needs to match the surrounding text color:
+
+<Story of={HotKeysStories.InheritInContext} />
+
+```jsx
+<div style={{ color: '#2563eb' }}>
+  <span>Press </span>
+  <HotKeys type="inherit" aria-label="Search">mod+k</HotKeys>
+  <span> to search</span>
+</div>
+```
+
 ### With Accessibility Labels
 
 <Story of={HotKeysStories.SingleKey} />

src/components/content/HotKeys/HotKeys.stories.tsx

@@ -15,6 +15,18 @@ export default {
         type: { summary: 'string' },
       },
     },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'primary', 'inherit'],
+      description:
+        'Visual appearance type: default (subtle), primary (high contrast), or inherit (adapts to parent color)',
+      table: {
+        type: { summary: "'default' | 'primary' | 'inherit'" },
+        defaultValue: { summary: 'default' },
+      },
+    },
     'aria-label': {
       control: {
         type: 'text',
@@ -118,3 +130,62 @@ WithCustomStyles.args = {
     radius: '1r',
   },
 };
+
+export const Primary: StoryFn<CubeHotKeysProps> = (args) => (
+  <div style={{ padding: '16px', background: '#1a1a1a', borderRadius: '8px' }}>
+    <HotKeys {...args} />
+  </div>
+);
+Primary.args = {
+  children: 'mod+k',
+  type: 'primary',
+  'aria-label': 'Search',
+};
+
+export const Inherit = Template.bind({});
+Inherit.args = {
+  children: 'mod+k',
+  type: 'inherit',
+  'aria-label': 'Search',
+};
+
+export const InheritInContext: StoryFn<CubeHotKeysProps> = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div style={{ color: '#2563eb' }}>
+      <span>Press </span>
+      <HotKeys type="inherit" aria-label="Search">
+        mod+k
+      </HotKeys>
+      <span> to search (blue context)</span>
+    </div>
+    <div style={{ color: '#dc2626' }}>
+      <span>Press </span>
+      <HotKeys type="inherit" aria-label="Delete">
+        delete
+      </HotKeys>
+      <span> to delete (red context)</span>
+    </div>
+    <div style={{ color: '#16a34a' }}>
+      <span>Press </span>
+      <HotKeys type="inherit" aria-label="Save">
+        mod+s
+      </HotKeys>
+      <span> to save (green context)</span>
+    </div>
+    <div style={{ color: '#9333ea' }}>
+      <span>Press </span>
+      <HotKeys type="inherit" aria-label="Command palette">
+        mod+shift+p
+      </HotKeys>
+      <span> for commands (purple context)</span>
+    </div>
+  </div>
+);
+InheritInContext.parameters = {
+  docs: {
+    description: {
+      story:
+        "The inherit type adapts to the parent element's text color, making it perfect for use within colored text contexts.",
+    },
+  },
+};

src/components/content/HotKeys/HotKeys.tsx

@@ -42,14 +42,16 @@ const KeyElement = tasty({
     color: {
       '': '#dark.65',
       'type=primary': '#white',
+      'type=inherit': 'currentColor',
     },
     fill: {
       '': '#dark.04',
-      'type=primary': '#clear',
+      'type=primary | type=inherit': '#clear',
     },
     border: {
       '': true,
       'type=primary': '#white',
+      'type=inherit': 'currentColor',
     },
   },
 });
@@ -58,7 +60,7 @@ export interface CubeHotKeysProps
   extends BasePropsWithoutChildren,
     ContainerStyleProps {
   children: string;
-  type?: 'default' | 'primary';
+  type?: 'default' | 'primary' | 'inherit';
 }
 
 function HotKeys(props: CubeHotKeysProps, ref) {