[UIK-5690][fullscreen-modal] changed css tokens

semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx

@@ -48,9 +48,9 @@ test.describe(`${TAG.VISUAL} `, () => {
         });
 
       expect(paddingTop).toBe('24px');
-      expect(paddingRight).toBe('32px');
+      expect(paddingRight).toBe('40px');
       expect(paddingBottom).toBe('24px');
-      expect(paddingLeft).toBe('32px');
+      expect(paddingLeft).toBe('40px');
     });
 
     await test.step('Verify paddings for second section', async () => {

semcore/fullscreen-modal/src/FullscreenModal.jsx

@@ -142,15 +142,15 @@ function Title(props) {
 
 function Description(props) {
   const SDescription = Root;
-  return sstyled(props.styles)(<SDescription render={Text} tag='p' />);
+  return sstyled(props.styles)(<SDescription render={Text} tag='p' size={200} use='secondary' />);
 }
 
 function Back(props) {
   const SBack = Root;
   const { Children, styles } = props;
 
   return sstyled(styles)(
-    <SBack render={ButtonLink} color='text-hint' size={200} addonLeft={ArrowLeft}>
+    <SBack render={ButtonLink} use='secondary' size={200} addonLeft={ArrowLeft}>
       <ButtonLink.Text ellipsis>
         <Children />
       </ButtonLink.Text>

semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css

@@ -26,8 +26,7 @@ SFullscreenOverlay {
     position: absolute;
     z-index: 1;
     top: 8px;
-    left: 32px;
-    margin-bottom: var(--intergalactic-spacing-3x, 12px);
+    left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
   }
 
   STitle,
@@ -42,29 +41,26 @@ SFullscreenOverlay {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
-  SDescription {
-    font-size: var(--intergalactic-fs-100, 12px);
-    line-height: var(--intergalactic-lh-100, 133%);
-    color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-  }
-
   SHeader {
     display: flex;
     flex-direction: column;
-    gap: var(--intergalactic-spacing-2x, 8px);
+    gap: var(--intergalactic-spacing-content-gap-large, 8px);
     align-items: flex-start;
-    padding-left: var(--intergalactic-spacing-8x, 32px);
-    padding-bottom: var(--intergalactic-spacing-4x, 16px);
-    padding-right: calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));
-    padding-top: var(--intergalactic-spacing-10x, 40px);
-    box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-    box-sizing: border-box;
+
+    padding-left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-large, 16px);
+    padding-right: 72px;
+    padding-top: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 
   SFooter {
     min-height: 52px;
-    box-shadow: inset 0 1px 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-    box-sizing: border-box;
+    border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+    padding: var(--intergalactic-spacing-content-padding-medium, 12px) var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
   }
 
   SBody {
@@ -74,10 +70,10 @@ SFullscreenOverlay {
   }
 
   SSection {
-    padding-top: var(--intergalactic-spacing-6x, 24px);
-    padding-bottom: var(--intergalactic-spacing-6x, 24px);
-    padding-left: var(--intergalactic-spacing-8x, 32px);
-    padding-right: var(--intergalactic-spacing-8x, 32px);
+    padding-top: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+    padding-bottom: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+    padding-left: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
+    padding-right: var(--intergalactic-spacing-content-padding-xxlarge, 40px);
     flex: 1 1 auto;
   }
 

stories/components/fullscreen-modal/docs/examples/example_of_a_dual-zone_modal_window.tsx

@@ -53,13 +53,8 @@ const Demo = () => {
             </List>
           </FullscreenModal.Section>
         </FullscreenModal.Body>
-        <FullscreenModal.Footer
-          justifyContent='center'
-          alignItems='center'
-          gap={3}
-          py={3}
-        >
-          <Button size='l' theme='success' use='primary'>
+        <FullscreenModal.Footer>
+          <Button size='l' use='primary'>
             Submit
           </Button>
           <Button size='l'>

website/docs/style/design-tokens/design-tokens.json

@@ -3033,7 +3033,6 @@
       "dropdown",
       "dropdown-menu",
       "flags",
-      "fullscreen-modal",
       "pills",
       "slider",
       "switch",
@@ -3369,6 +3368,7 @@
       "button",
       "card",
       "dropdown",
+      "fullscreen-modal",
       "input",
       "input-tags",
       "modal",
@@ -3385,6 +3385,7 @@
     "components": [
       "bulk-textarea",
       "feature-popover",
+      "fullscreen-modal",
       "notice-bubble"
     ]
   },
@@ -3401,14 +3402,17 @@
     "name": "--intergalactic-spacing-content-padding-xlarge-extended",
     "value": "24px",
     "description": "Extended extra large padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "fullscreen-modal"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-xxlarge",
     "value": "40px",
     "description": "2x large padding for content inside controls and surfaces.",
     "components": [
       "feature-popover",
+      "fullscreen-modal",
       "modal",
       "notice-bubble"
     ]
@@ -3459,6 +3463,7 @@
       "checkbox",
       "date-picker",
       "dropdown",
+      "fullscreen-modal",
       "notice-bubble",
       "pagination",
       "radio",
@@ -3471,6 +3476,7 @@
     "value": "12px",
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
+      "fullscreen-modal",
       "notice-bubble",
       "pagination"
     ]