[UIK-5637][card] Update styles

playground/utils/renderIcon.tsx

@@ -19,6 +19,10 @@ const SizeToIconMap = {
     before: <CheckM />,
     after: <ArrowRightM />,
   },
+  350: {
+    before: <CheckM />,
+    after: <ArrowRightM />,
+  },
   400: {
     before: <CheckM />,
     after: <ArrowRightM />,

semcore/base-components/__tests__/ellipsis.browser-test.tsx

@@ -27,6 +27,7 @@ test.describe(`${TAG.VISUAL}`, () => {
       { ellipsis: { 'ellipsis:cropPosition': 'middle', 'ellipsis:lastRequiredSymbols': 2 }, size: 100 },
       { ellipsis: { 'ellipsis:cropPosition': 'middle', 'ellipsis:lastRequiredSymbols': 7 }, size: 200 },
       { ellipsis: { 'ellipsis:cropPosition': 'middle' }, size: 300 },
+      { ellipsis: { 'ellipsis:cropPosition': 'middle' }, size: 350 },
       { ellipsis: { 'ellipsis:cropPosition': 'middle' }, size: 400 },
       { ellipsis: { 'ellipsis:cropPosition': 'middle' }, size: 500 },
       { ellipsis: { 'ellipsis:cropPosition': 'middle' }, size: 600 },

semcore/base-trigger/__tests__/link-trigger.browser-test.tsx

@@ -22,7 +22,7 @@ Visual states, hover and focus styles, paddings, margins, and snapshots.
 ===================================================== */
 test.describe(` ${TAG.VISUAL}`, () => {
   // Section 1: Size × addon position × ellipsis × addonType × color × use rotation
-  const sizes = [100, 200, 300, 400, 500, 600, 700, 800];
+  const sizes = [100, 200, 300, 400, 500, 600, 700, 800, 350];
   const longText = 'The quick brown fox jumps over the lazy dog and even more text to ensure truncation';
   const addonTypes = ['icon', 'badge', 'counter', 'tag'];
 

semcore/button/__tests__/button-link.browser-test.tsx

@@ -38,7 +38,7 @@ Visual states, hover and focus styles, paddings, margins, and snapshots.
 ===================================================== */
 test.describe(` ${TAG.VISUAL}`, () => {
   // Section 1: Size × addon position × ellipsis × addonType × color × use rotation
-  const sizes = [100, 200, 300, 400, 500, 600, 700, 800];
+  const sizes = [100, 200, 300, 400, 500, 600, 700, 800, 350];
   const longText = 'The quick brown fox jumps over the lazy dog and even more text to ensure truncation';
   const addonTypes = ['icon', 'badge', 'counter', 'spin'];
 

semcore/card/__tests__/card.browser-test.tsx

@@ -44,18 +44,18 @@ test.describe(`${TAG.VISUAL} `, () => {
     await test.step('Verify header paddings', async () => {
       await expect(header).toHaveCSS('padding-left', '20px');
       await expect(header).toHaveCSS('padding-right', '20px');
-      await expect(header).toHaveCSS('padding-top', '8px');
-      await expect(header).toHaveCSS('padding-bottom', '8px');
+      await expect(header).toHaveCSS('padding-top', '20px');
+      await expect(header).toHaveCSS('padding-bottom', '12px');
     });
 
     await test.step('Verify title styles', async () => {
       await expect(title).toHaveCSS('margin-right', '4px');
-      await expect(title).toHaveCSS('font-size', '16px');
-      await expect(title).toHaveCSS('font-weight', '700');
+      await expect(title).toHaveCSS('font-size', '18px');
+      await expect(title).toHaveCSS('font-weight', '600');
     });
 
     await test.step('Verify description margin', async () => {
-      await expect(description).toHaveCSS('margin-top', '8px');
+      await expect(description).toHaveCSS('margin-top', '0px');
     });
 
     await test.step('Verify body padding', async () => {

semcore/card/src/Card.tsx

@@ -51,7 +51,7 @@ function Title(
 
   return sstyled(styles)(
     <>
-      <STitle render={Text}>
+      <STitle render={Text} size={350} semibold use='primary'>
         <Children />
         {innerHint && (
           <SInfo>

semcore/card/src/style/card.shadow.css

@@ -2,19 +2,11 @@ SCard {
   box-sizing: border-box;
   background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   padding: 0;
-  border: none;
   border-radius: var(--intergalactic-surface-rounded, 8px);
-  box-shadow: var(
-    --intergalactic-box-shadow-card,
-    0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)
-  );
+  border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
 
   STitle {
-    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-    font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
-    font-weight: var(--intergalactic-bold, 700);
-    margin-right: var(--intergalactic-spacing-1x, 4px);
+    margin: 0 var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-1x, 4px) 0;
   }
 
   SInfoTrigger {
@@ -25,26 +17,21 @@ SCard {
 
   SDescription {
     display: block;
-    margin-bottom: 0;
-    margin-top: var(--intergalactic-spacing-2x, 8px);
+    margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
     font-size: var(--intergalactic-fs-200, 14px);
     line-height: var(--intergalactic-lh-200, 142%);
     color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   }
 
   SHeader {
-    padding-top: var(--intergalactic-spacing-2x, 8px);
-    padding-bottom: var(--intergalactic-spacing-2x, 8px);
-    padding-left: var(--intergalactic-spacing-5x, 20px);
-    padding-right: var(--intergalactic-spacing-5x, 20px);
-    box-shadow: inset 0 -1px 0 var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+    padding-top: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-medium, 12px);
+    padding-left: var(--intergalactic-spacing-content-padding-xlarge, 20px);
+    padding-right: var(--intergalactic-spacing-content-padding-xlarge, 20px);
   }
 
   SBody {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-    padding-bottom: var(--intergalactic-spacing-5x, 20px);
-    padding-left: var(--intergalactic-spacing-5x, 20px);
-    padding-right: var(--intergalactic-spacing-5x, 20px);
-    padding-top: var(--intergalactic-spacing-5x, 20px);
+    padding: var(--intergalactic-spacing-content-padding-xlarge, 20px);
   }
 }

semcore/link/__tests__/link.browser-test.tsx

@@ -54,7 +54,7 @@ Visual states, hover and focus styles, paddings, margins, and snapshots.
 ===================================================== */
 test.describe(` ${TAG.VISUAL}`, () => {
   // Section 1: Size * addon position * ellipsis * addonType * color * merged rotation
-  const sizes = [100, 200, 300, 400, 500, 600, 700, 800];
+  const sizes = [100, 200, 300, 400, 500, 600, 700, 800, 350];
   const addonTypes = ['icon', 'badge', 'counter', 'spin'];
 
   const addonCombos = [

semcore/typography/__tests__/typography.browser-test.tsx

@@ -154,6 +154,7 @@ test.describe(`${TAG.VISUAL}`, () => {
     // main coverage
     { bold: true, italic: false, size: 200, use: 'primary' },
     { bold: false, italic: true, size: 300 },
+    { size: 350 },
     { semibold: true, lowercase: true, size: 400 },
     { semibold: false, medium: true, size: 500 },
     { underline: true, lineThrough: false, size: 600 },

semcore/typography/src/components/Text/Text.type.ts

@@ -10,7 +10,7 @@ import type { Property } from 'csstype';
 declare namespace NSText {
   type BaseProps = {
     /** Font size and line-heights */
-    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+    size?: 100 | 200 | 300 | 350 | 400 | 500 | 600 | 700 | 800;
     /**
      * The text will not be wrapped on a new line and will be cut off with ellipsis
      * @deprecated use ellipsis prop instead

semcore/typography/src/style/text.shadow.css

@@ -376,6 +376,11 @@ SText[size='300'] {
   }
 }
 
+SText[size='350'] {
+  font-size: var(--intergalactic-fs-350, 18px);
+  line-height: var(--intergalactic-lh-350, 150%);
+}
+
 SText[size='400'] {
   font-size: var(--intergalactic-fs-400, 20px);
   line-height: var(--intergalactic-lh-400, 120%);

stories/components/base-components/ellipsis/tests/ellipsis.stories.tsx

@@ -49,7 +49,7 @@ const commonArgTypes = {
   },
   size: {
     control: { type: 'select' },
-    options: [undefined, 100, 200, 300, 400, 500, 600, 700, 800],
+    options: [undefined, 100, 200, 300, 350, 400, 500, 600, 700, 800],
   },
 } as const;
 

stories/components/base-trigger/tests/examples/link-trigger/link-trigger-different-sizes.tsx

@@ -16,6 +16,7 @@ const Demo = (props: LinkTriggerSizesProps) => {
     600,
     500,
     400,
+    350,
     300,
     200,
     100,

stories/components/base-trigger/tests/link-trigger.stories.tsx

@@ -7,7 +7,7 @@ import SelectExample, { linkTriggerSelectExampleProps } from './examples/link-tr
 const sharedArgTypes = {
   size: {
     control: { type: 'select' },
-    options: [100, 200, 300, 400, 500, 600, 700, 800, undefined],
+    options: [100, 200, 300, 350, 400, 500, 600, 700, 800, undefined],
   },
   active: { control: { type: 'boolean' } },
   empty: { control: { type: 'boolean' } },

stories/components/button/tests/button-link.stories.tsx

@@ -44,7 +44,7 @@ export const ButtonLinkBase: StoryObj<typeof defaultButtonLinkProps> = {
     },
     size: {
       control: { type: 'select' },
-      options: [100, 200, 300, 400, 500, 600, 700, 800],
+      options: [100, 200, 300, 350, 400, 500, 600, 700, 800],
     },
     showAddonLeft: {
       control: { type: 'boolean' },

stories/components/button/tests/examples/button-link/button-link-sizes-addons.tsx

@@ -17,6 +17,7 @@ const Demo = (props: ButtonLinkSizesProps) => {
     600,
     500,
     400,
+    350,
     300,
     200,
     100,

stories/components/button/tests/examples/button-link/button-link-sizes-wrap.tsx

@@ -2,7 +2,7 @@ import { ButtonLink } from '@semcore/ui/button';
 import React from 'react';
 
 const Demo = () => {
-  const sizes = [100, 200, 300, 400, 500, 600, 700, 800] as const;
+  const sizes = [100, 200, 300, 350, 400, 500, 600, 700, 800] as const;
   const w = [100, 150, 250];
   // const str = 'Ẩn bộ lọc và chế độ xem';
   // const str = 'Ocultar filtros y tipo de vista';

stories/components/card/docs/examples/card_layout_for_tables.tsx

@@ -14,7 +14,7 @@ const Demo = (props: TableInCardProps) => (
     <Card.Header>
       <Card.Title tag='h3'>Card Title</Card.Title>
     </Card.Header>
-    <Card.Body pt={0} px={0} pb={1}>
+    <Card.Body pt={2} px={0} pb={1}>
       <DataTable
         data={data}
         aria-label='Table in card'

stories/components/link/tests/examples/link-different-sizes.tsx

@@ -15,6 +15,7 @@ const Demo = (props: LinkSizesProps) => {
     600,
     500,
     400,
+    350,
     300,
     200,
     100,

stories/components/link/tests/link.stories.tsx

@@ -24,7 +24,7 @@ export const BasicUsage: StoryObj<typeof BasicUsageProps> = {
     },
     size: {
       control: { type: 'select' },
-      options: [100, 200, 300, 400, 500, 600, 700, 800],
+      options: [100, 200, 300, 350, 400, 500, 600, 700, 800],
     },
     disabled: {
       control: { type: 'boolean' },

stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx

@@ -38,6 +38,9 @@ const Demo = () => (
       <Text tag='p' mb={2} mt={0}>
         Paragraph example.
       </Text>
+      <Text size={350} tag='p' mb={2} mt={10}>
+        Text, 18px, --fs-350
+      </Text>
       <Text size={300} tag='h6' mb={1} mt={10}>
         H6, 16px, --fs-300
       </Text>

stories/components/typography/tests/typography.stories.tsx

@@ -18,7 +18,7 @@ function getCommonArgTypes() {
   return {
     size: {
       control: { type: 'select' },
-      options: ['100', '200', '300', '400', '500', '600', '700', '800'],
+      options: ['100', '200', '300', '350', '400', '500', '600', '700', '800'],
     },
     noWrap: { control: { type: 'boolean' } },
     bold: { control: { type: 'boolean' } },