feat: condensed design (#731)

Author: tenphi

.changeset/healthy-emus-smash.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+More condensed UI. New sizes: medium (40) -> large (40), small (32) -> medium (32), large (48) -> xlarge (48), small (28), xsmall (24).

.changeset/ten-rabbits-heal.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add size prop for TextInputMapper.

.cursor/rules/coding.mdc

@@ -2,10 +2,12 @@
 alwaysApply: true
 ---
 
-# Flow rules
+# Development flow rules
 - Don't respond with "You're right!", "Great idea!" and so on. Get straight to the point.
-- **Stop and describe the reason**, if you can't closely implement the task or need a different approach from what was asked.
+- **Stop and describe the reason**, if you can't closely implement the task, or need a different approach from what was asked, or noticed a critical mistake in the prompt.
 - Do not run tests if you only changed stories or documentation since the last test run.
+- If you need to move or rename a file: use command line tools for that.
+- If you need to move a part of code from one file to another: First, write the code at the new place, then delete the code in the original place.
 
 # Coding rules
 

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '279kB',
+    limit: '280kB',
   },
   {
     name: 'Tree shaking (just a Button)',

src/components/actions/Button/Button.docs.mdx

@@ -77,9 +77,11 @@ The `mods` prop accepts the following modifiers you can override:
 
 ### Sizes. `size` prop
 
-- `small` – Compact height (4×).
-- `medium` – Default height (5×).
-- `large` – Spacious height (6×).
+- `xsmall` – Extra compact height (24px).
+- `small` – Compact height (28px).
+- `medium` – Default height (32px).
+- `large` – Spacious height (40px).
+- `xlarge` – Extra spacious height (48px).
 
 ## Examples
 

src/components/actions/Button/Button.stories.tsx

@@ -29,7 +29,7 @@ export default {
       },
     },
     size: {
-      options: ['tiny', 'small', 'medium', 'large'],
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
       control: { type: 'radio' },
       description: 'Button size',
       table: {
@@ -115,15 +115,36 @@ const TemplateSizes: StoryFn<CubeButtonProps> = ({
   ...props
 }) => (
   <Space>
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="xsmall">
+      XSmall
+    </Button>
     <Button icon={icon} rightIcon={rightIcon} {...props} size="small">
-      {children}
+      Small
     </Button>
     <Button icon={icon} rightIcon={rightIcon} {...props} size="medium">
-      {children}
+      Medium
     </Button>
     <Button icon={icon} rightIcon={rightIcon} {...props} size="large">
-      {children}
+      Large
     </Button>
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="xlarge">
+      XLarge
+    </Button>
+  </Space>
+);
+
+const TemplateSizesOnlyIcon: StoryFn<CubeButtonProps> = ({
+  children,
+  icon,
+  rightIcon,
+  ...props
+}) => (
+  <Space>
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="xsmall" />
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="small" />
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="medium" />
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="large" />
+    <Button icon={icon} rightIcon={rightIcon} {...props} size="xlarge" />
   </Space>
 );
 
@@ -477,7 +498,7 @@ TwoIconsAndText.args = {
   rightIcon: <IconCaretDown />,
 };
 
-export const OnlyIcon = TemplateSizes.bind({});
+export const OnlyIcon = TemplateSizesOnlyIcon.bind({});
 OnlyIcon.args = {
   icon: <IconCoin />,
 };

src/components/actions/Button/Button.tsx

@@ -27,7 +27,7 @@ export interface CubeButtonProps extends CubeActionProps {
     | 'outline'
     | 'neutral'
     | (string & {});
-  size?: 'tiny' | 'small' | 'medium' | 'large' | (string & {});
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | (string & {});
 }
 
 export type ButtonVariant =
@@ -76,34 +76,38 @@ export const DEFAULT_BUTTON_STYLES = {
   flow: 'column',
   preset: {
     '': 't3m',
-    '[data-size="large"]': 't2m',
+    '[data-size="xsmall"]': 't4',
+    '[data-size="xlarge"]': 't2m',
   },
   textDecoration: 'none',
   transition: 'theme',
   reset: 'button',
   outlineOffset: 1,
   padding: {
-    '': '.5x (2x - 1bw)',
-    '[data-size="tiny"]': '.5x (1x - 1bw)',
-    '[data-size="small"]': '.5x (1x - 1bw)',
+    '': '.5x (1.5x - 1bw)',
+    '[data-size="small"] | [data-size="xsmall"]': '.5x (1x - 1bw)',
     '[data-size="medium"]': '.5x (1.5x - 1bw)',
-    '[data-size="large"]': '.5x (2.25x - 1bw)',
+    '[data-size="large"]': '.5x (2x - 1bw)',
+    '[data-size="xlarge"]': '.5x (2.25x - 1bw)',
     'single-icon-only | [data-type="link"]': 0,
   },
   width: {
     '': 'initial',
-    '[data-size="tiny"] & single-icon-only': '3.5x 3.5x',
-    '[data-size="small"] & single-icon-only': '4x 4x',
-    '[data-size="medium"] & single-icon-only': '5x 5x',
-    '[data-size="large"] & single-icon-only': '6x 6x',
+    '[data-size="xsmall"] & single-icon-only': '@size-xs @size-xs',
+    '[data-size="small"] & single-icon-only': '@size-sm @size-sm',
+    '[data-size="medium"] & single-icon-only': '@size-md @size-md',
+    '[data-size="large"] & single-icon-only': '@size-lg @size-lg',
+    '[data-size="xlarge"] & single-icon-only': '@size-xl @size-xl',
+    '[data-type="link"]': 'initial',
   },
   height: {
     '': 'initial',
-    '[data-size="tiny"]': '3.5x 3.5x',
-    '[data-size="small"]': '4x 4x',
-    '[data-size="medium"]': '5x 5x',
-    '[data-size="large"]': '6x 6x',
-    '[data-type="link"]': 'auto',
+    '[data-size="xsmall"]': '@size-xs @size-xs',
+    '[data-size="small"]': '@size-sm @size-sm',
+    '[data-size="medium"]': '@size-md @size-md',
+    '[data-size="large"]': '@size-lg @size-lg',
+    '[data-size="xlarge"]': '@size-xl @size-xl',
+    '[data-type="link"]': 'initial',
   },
   whiteSpace: 'nowrap',
   radius: {