IBX-10191: Update various variables and names to match figma changes (#7)

GrabowskiM · web-flow · commit 723ad59e73aa · 2025-06-26T09:43:05.000+02:00
diff --git a/packages/assets/src/scss/_buttons.scss b/packages/assets/src/scss/_buttons.scss
@@ -94,7 +94,7 @@ $btns-types: (
             transparent,
         ),
     ),
-    'black-secondary': (
+    'secondary-alt': (
         'default': (
             $color-neutral-240,
             transparent,
@@ -122,7 +122,7 @@ $btns-types: (
             $color-neutral-60,
         ),
     ),
-    'black-tertiary': (
+    'tertiary-alt': (
         'default': (
             $color-neutral-240,
             transparent,
@@ -153,7 +153,7 @@ $btns-types: (
 );
 
 $btns-sizes: (
-    'large': calculateRem(14px) calculateRem(18px) calculateRem(11px) calculateRem(12px),
+    'medium': calculateRem(14px) calculateRem(18px) calculateRem(11px) calculateRem(12px),
     'small': calculateRem(14px) calculateRem(18px) calculateRem(7px) calculateRem(16px),
     'extra-small': calculateRem(10px) calculateRem(15px) calculateRem(4px) calculateRem(8px),
 );
diff --git a/packages/assets/src/scss/_icons.scss b/packages/assets/src/scss/_icons.scss
@@ -3,18 +3,19 @@
 @use 'mixins/icons' as mixins;
 
 $icons-sizes:
-    'tiny' calculateRem(8px),
-    'tiny-small' calculateRem(12px),
-    'small' calculateRem(16px),
-    'small-medium' calculateRem(20px),
-    'medium' calculateRem(24px),
-    'medium-large' calculateRem(38px),
-    'large' calculateRem(48px),
-    'extra-large' calculateRem(64px);
+    'tiny' calculateRem(12px),
+    'tiny-small' calculateRem(16px),
+    'small' calculateRem(20px),
+    'small-medium' calculateRem(24px),
+    'medium' calculateRem(28px),
+    'medium-large' calculateRem(32px),
+    'large' calculateRem(36px),
+    'large-huge' calculateRem(48px),
+    'huge' calculateRem(64px);
 
 .ids-icon {
-    width: calculateRem(32px);
-    height: calculateRem(32px);
+    width: calculateRem(16px);
+    height: calculateRem(16px);
     transition: fill 0.3s $transition-timing-function;
 
     @each $name, $size in $icons-sizes {
diff --git a/packages/assets/src/scss/_variables.scss b/packages/assets/src/scss/_variables.scss
@@ -13,5 +13,6 @@ $base-line-height: 1.5 !default;
 
 // Various component variables
 $border-radius-medium: calculateRem(8px) !default;
+$border-radius-large: calculateRem(12px) !default;
 
 $assets-base-path: '/' !default;
diff --git a/packages/assets/src/scss/mixins/_headers.scss b/packages/assets/src/scss/mixins/_headers.scss
@@ -1,36 +1,36 @@
-@use 'variables';
+@use 'variables' as *;
 
 %heading {
-    font-family: variables.$font-family-headings;
+    font-family: $font-family-alt;
     font-weight: 600;
 }
 
 @mixin h1 {
     @extend %heading;
-    font-size: variables.$h1-font-size;
+    font-size: $text-font-size-3xl;
 }
 
 @mixin h2 {
     @extend %heading;
-    font-size: variables.$h2-font-size;
+    font-size: $text-font-size-2xl;
 }
 
 @mixin h3 {
     @extend %heading;
-    font-size: variables.$h3-font-size;
+    font-size: $text-font-size-xl;
 }
 
 @mixin h4 {
     @extend %heading;
-    font-size: variables.$h4-font-size;
+    font-size: $text-font-size-l;
 }
 
 @mixin h5 {
     @extend %heading;
-    font-size: variables.$h5-font-size;
+    font-size: $text-font-size-m;
 }
 
 @mixin h6 {
     @extend %heading;
-    font-size: variables.$h6-font-size;
+    font-size: $text-font-size-s;
 }
diff --git a/packages/assets/src/scss/variables/_typography.scss b/packages/assets/src/scss/variables/_typography.scss
@@ -24,4 +24,4 @@ $font-family:
     'Helvetica Neue',
     Arial,
     sans-serif !default;
-$font-family-headings: 'Work Sans', sans-serif !default;
+$font-family-alt: 'Work Sans', 'Futura', 'Avenir Next', 'Trebuchet MS', 'Verdana', sans-serif !default;
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
@@ -95,7 +95,7 @@ export const SecondaryWithExtraAria: Story = {
 export const BlackSecondary: Story = {
     name: 'Black Secondary',
     args: {
-        type: 'black-secondary',
+        type: 'secondary-alt',
         children: 'Button label',
         disabled: false,
     },
@@ -104,7 +104,7 @@ export const BlackSecondary: Story = {
 export const BlackSecondarySmall: Story = {
     name: 'Black Secondary (Small)',
     args: {
-        type: 'black-secondary',
+        type: 'secondary-alt',
         children: 'Button label',
         size: 'small',
     },
@@ -113,7 +113,7 @@ export const BlackSecondarySmall: Story = {
 export const BlackSecondaryExtraSmall: Story = {
     name: 'Black Secondary (Extra Small)',
     args: {
-        type: 'black-secondary',
+        type: 'secondary-alt',
         children: 'Button label',
         size: 'extra-small',
     },
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
@@ -11,16 +11,16 @@ const Button = ({
     disabled = false,
     extraAria = {},
     extraClasses = '',
-    size = 'large',
+    size = 'medium',
     title = '',
     type = 'primary',
 }: ButtonProps) => {
     const classes = createCssClassNames({
         'ids-btn': true,
-        [`ids-btn--${type}`]: !!type,
-        [`ids-btn--${size}`]: !!size,
+        [`ids-btn--${type}`]: true,
+        [`ids-btn--${size}`]: true,
         'ids-btn--disabled': disabled,
-        [extraClasses]: true,
+        [extraClasses]: !!extraClasses,
     });
     const btnAriaLabel = ariaLabel ?? (typeof children === 'string' ? children : undefined);
 
diff --git a/packages/components/src/Button/Button.types.ts b/packages/components/src/Button/Button.types.ts
@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 
 import { BaseComponentAriaAttributes } from '@ids-types/general';
 
-export const BUTTON_SIZE_VALUES = ['large', 'small', 'extra-small'] as const;
-export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'black-secondary', 'black-tertiary'] as const;
+export const BUTTON_SIZE_VALUES = ['medium', 'small', 'extra-small'] as const;
+export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'secondary-alt', 'tertiary-alt'] as const;
 
 export type ButtonSizeType = (typeof BUTTON_SIZE_VALUES)[number];
 export type ButtonTypesType = (typeof BUTTON_TYPE_VALUES)[number];
diff --git a/packages/components/src/Expander/Expander.tsx b/packages/components/src/Expander/Expander.tsx
@@ -40,7 +40,7 @@ const Expander = ({ onClick, collapseLabel = '', expandLabel = '', hasIcon = tru
                 onClick(!isExpanded);
             }}
             size="small"
-            type="black-tertiary"
+            type="tertiary-alt"
         >
             {label}
             {renderExpanderIcon()}
diff --git a/packages/components/src/Icon/Icon.stories.tsx b/packages/components/src/Icon/Icon.stories.tsx
@@ -93,11 +93,19 @@ export const IconLarge: Story = {
     },
 };
 
-export const IconExtraLarge: Story = {
-    name: 'Icon Extra-Large',
+export const IconLargeHuge: Story = {
+    name: 'Icon Large-Huge',
     args: {
         name: 'bookmark',
-        size: 'extra-large',
+        size: 'large-huge',
+    },
+};
+
+export const IconHuge: Story = {
+    name: 'Icon Huge',
+    args: {
+        name: 'bookmark',
+        size: 'huge',
     },
 };
 
diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
@@ -6,11 +6,11 @@ import { createCssClassNames } from '@ids-internal/shared/css.class.names';
 
 import { IconProps } from './Icon.types';
 
-const Icon = ({ cssClass = '', name, customPath, size = undefined }: IconProps) => {
+const Icon = ({ cssClass = '', name, customPath, size = 'small' }: IconProps) => {
     const { getIconPath }: { getIconPath: GetIconPathType } = useContext<AssetsType>(AssetsContext);
     const classes = createCssClassNames({
         'ids-icon': true,
-        [`ids-icon--${size ?? ''}`]: !!size,
+        [`ids-icon--${size}`]: true,
         [cssClass]: !!cssClass,
     });
     const linkHref = customPath ?? getIconPath(name);
diff --git a/packages/components/src/Icon/Icon.types.ts b/packages/components/src/Icon/Icon.types.ts
@@ -1,10 +1,20 @@
-export const ICON_SIZE_VALUES = ['tiny', 'tiny-small', 'small', 'small-medium', 'medium', 'medium-large', 'large', 'extra-large'] as const;
+export const ICON_SIZE_VALUES = [
+    'tiny',
+    'tiny-small',
+    'small',
+    'small-medium',
+    'medium',
+    'medium-large',
+    'large',
+    'large-huge',
+    'huge',
+] as const;
 
 export type IconSizeType = (typeof ICON_SIZE_VALUES)[number];
 
 interface IconSharedProps {
     cssClass?: string;
-    size: (typeof ICON_SIZE_VALUES)[number] | undefined;
+    size?: (typeof ICON_SIZE_VALUES)[number];
 }
 interface IconCustomPathProps extends IconSharedProps {
     customPath: string;
diff --git a/packages/components/src/Label/Label.tsx b/packages/components/src/Label/Label.tsx
@@ -9,7 +9,7 @@ const Label = ({ children, htmlFor, error = false, extraClasses = '', required =
         'ids-label': true,
         'ids-label--error': error,
         'ids-label--required': required,
-        [extraClasses]: true,
+        [extraClasses]: !!extraClasses,
     });
 
     return (
diff --git a/packages/components/src/internal/partials/BaseInput/BaseInput.tsx b/packages/components/src/internal/partials/BaseInput/BaseInput.tsx
@@ -24,12 +24,12 @@ const BaseInput = ({
     const componentId = id ?? `${INPUT_ID_PREFIX}${componentGeneratedNumberId.toString()}`;
     const classes = createCssClassNames({
         'ids-input': true,
-        [`ids-input--${type}`]: !!type,
-        [`ids-input--${size}`]: !!size,
+        [`ids-input--${type}`]: true,
+        [`ids-input--${size}`]: true,
         'ids-input--disabled': disabled,
         'ids-input--error': error,
         'ids-input--required': required,
-        [extraClasses]: true,
+        [extraClasses]: !!extraClasses,
     });
 
     return (

Original file line number	Diff line number	Diff line change
`@@ -1,36 +1,36 @@`
`1`		`-@use 'variables';`
	`1`	`+@use 'variables' as *;`
`2`	`2`
`3`	`3`	`%heading {`
`4`		`- font-family: variables.$font-family-headings;`
	`4`	`+ font-family: $font-family-alt;`
`5`	`5`	`font-weight: 600;`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`@mixin h1 {`
`9`	`9`	`@extend %heading;`
`10`		`- font-size: variables.$h1-font-size;`
	`10`	`+ font-size: $text-font-size-3xl;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`@mixin h2 {`
`14`	`14`	`@extend %heading;`
`15`		`- font-size: variables.$h2-font-size;`
	`15`	`+ font-size: $text-font-size-2xl;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`@mixin h3 {`
`19`	`19`	`@extend %heading;`
`20`		`- font-size: variables.$h3-font-size;`
	`20`	`+ font-size: $text-font-size-xl;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`@mixin h4 {`
`24`	`24`	`@extend %heading;`
`25`		`- font-size: variables.$h4-font-size;`
	`25`	`+ font-size: $text-font-size-l;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`@mixin h5 {`
`29`	`29`	`@extend %heading;`
`30`		`- font-size: variables.$h5-font-size;`
	`30`	`+ font-size: $text-font-size-m;`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`@mixin h6 {`
`34`	`34`	`@extend %heading;`
`35`		`- font-size: variables.$h6-font-size;`
	`35`	`+ font-size: $text-font-size-s;`
`36`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ const Expander = ({ onClick, collapseLabel = '', expandLabel = '', hasIcon = tru`
`40`	`40`	`onClick(!isExpanded);`
`41`	`41`	`}}`
`42`	`42`	`size="small"`
`43`		`- type="black-tertiary"`
	`43`	`+ type="tertiary-alt"`
`44`	`44`	`>`
`45`	`45`	`{label}`
`46`	`46`	`{renderExpanderIcon()}`