1- import React from "react" ;
1+ import React , { useState } from "react" ;
22import { navigate } from "gatsby" ;
33import { useLocation } from "@reach/router" ;
4-
54import { SistentLayout } from "../../sistent-layout" ;
5+ import { Col , Row } from "../../../../../reusecore/Layout" ;
66import Button from "../../../../../reusecore/Button" ;
7+ import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode" ;
8+
9+ import {
10+ styled ,
11+ Table ,
12+ TableContainer ,
13+ TableCell ,
14+ TableRow ,
15+ TableHead ,
16+ TableBody ,
17+ SistentThemeProvider ,
18+ CustomTooltip ,
19+ Box ,
20+ } from "@sistent/sistent" ;
21+ import { copyToClipboard } from "../../../../../components/CodeBlock/copy-to-clipboard.js" ;
22+
23+
24+ // Table data
25+ const spacingTokens = [
26+ { token : "spacing-00" , px : "0px (8 × 0)" , rem : "0rem" , size : 0 } ,
27+ { token : "spacing-01" , px : "2px (8 × 0.25)" , rem : "0.125rem" , size : 2 } ,
28+ { token : "spacing-02" , px : "4px (8 × 0.5)" , rem : "0.25rem" , size : 4 } ,
29+ { token : "spacing-03" , px : "8px (8 × 1)" , rem : "0.5rem" , size : 8 } ,
30+ { token : "spacing-04" , px : "16px (8 × 2)" , rem : "1rem" , size : 16 } ,
31+ { token : "spacing-05" , px : "24px (8 × 3)" , rem : "1.5rem" , size : 24 } ,
32+ { token : "spacing-06" , px : "32px (8 × 4)" , rem : "2rem" , size : 32 } ,
33+ { token : "spacing-07" , px : "40px (8 × 5)" , rem : "2.5rem" , size : 40 } ,
34+ { token : "spacing-08" , px : "48px (8 × 6)" , rem : "3rem" , size : 48 } ,
35+ { token : "spacing-09" , px : "56px (8 × 7)" , rem : "3.5rem" , size : 56 } ,
36+ { token : "spacing-10" , px : "64px (8 × 8)" , rem : "4rem" , size : 64 } ,
37+ { token : "spacing-11" , px : "72px (8 × 9)" , rem : "4.5rem" , size : 72 } ,
38+ { token : "spacing-12" , px : "80px (8 × 10)" , rem : "5rem" , size : 80 } ,
39+ ] ;
40+
41+ const CopyCell = ( { value } ) => {
42+ const [ copyText , setCopyText ] = useState ( "Copy" ) ;
43+
44+ const handleCopy = async ( ) => {
45+ await copyToClipboard ( value ) ;
46+ setCopyText ( "Copied" ) ;
47+ setTimeout ( ( ) => setCopyText ( "Copy" ) , 1000 ) ;
48+ } ;
49+
50+ return (
51+ < CustomTooltip
52+ title = { copyText === "Copied" ? "Copied" : "Copy" }
53+ enterDelay = { 800 }
54+ leaveDelay = { 10 }
55+ placement = "right"
56+ >
57+ < Box
58+ sx = { {
59+ position : "relative" ,
60+ display : "inline-flex" ,
61+ alignItems : "center" ,
62+ cursor : "pointer" ,
63+ padding : "2px 4px" ,
64+ borderRadius : "3px" ,
65+ transition : "background-color 0.2s ease" ,
66+ "&:hover" : {
67+ backgroundColor : ( theme ) =>
68+ theme . palette . action ?. hover || "rgba(0, 0, 0, 0.04)" ,
69+ } ,
70+ } }
71+ onClick = { handleCopy }
72+ >
73+ < span > { value } </ span >
74+ </ Box >
75+ </ CustomTooltip >
76+ ) ;
77+ } ;
78+
79+ const SpacingVisualBox = styled ( "div" ) ( ( { theme, size } ) => ( {
80+ backgroundColor : theme . palette . brand ?. default || "#00B39F" ,
81+ width : size === 0 ? "0px" : `${ Math . max ( size , 4 ) } ,
82+ height : "20px" ,
83+ borderRadius : "4px" ,
84+ border : size === 0 ? "none" : `1px solid ${ theme . palette . divider } ,
85+ minWidth : size === 0 ? "0px" : "4px" ,
86+ } ) ) ;
787
8- export const SpacingCode = ( ) => {
88+ const StyledTableRow = styled ( TableRow ) ( ( { theme } ) => ( {
89+ "&:nth-child(odd)" : {
90+ backgroundColor : theme . palette . background . default ,
91+ } ,
92+ "&:nth-child(even)" : {
93+ backgroundColor : theme . palette . background . secondary ,
94+ } ,
95+ } ) ) ;
96+
97+ const StyledTableContainer = styled ( TableContainer ) ( ( ) => ( {
98+ width : "100%" ,
99+ backgroundColor : "transparent" ,
100+ boxShadow : "none" ,
101+ padding : 0 ,
102+ } ) ) ;
103+
104+ const StyledTableCell = styled ( TableCell ) ( ( { theme } ) => ( {
105+ color : theme . palette . text . secondary ,
106+ fontSize : "0.975rem" ,
107+ padding : "0.75rem" ,
108+ borderBottom : `1px solid ${ theme . palette . divider } ,
109+ borderRadius : "4px" ,
110+ } ) ) ;
111+
112+ const StyledHeaderCell = styled ( StyledTableCell ) ( ( ) => ( {
113+ fontWeight : 600 ,
114+ } ) ) ;
115+
116+ const SpacingCode = ( ) => {
117+ const { isDark } = useStyledDarkMode ( ) ;
9118 const location = useLocation ( ) ;
10119
11120 return (
@@ -19,6 +128,7 @@ export const SpacingCode = () => {
19128 clear, concise, and consistent arrangement of interface elements
20129 across a screen.
21130 </ p >
131+
22132 < div className = "filterBtns" >
23133 < Button
24134 className = {
@@ -51,10 +161,84 @@ export const SpacingCode = () => {
51161 title = "Code"
52162 />
53163 </ div >
164+
54165 < div className = "main-content" >
55- < p > Sorry, this page is still under work</ p >
166+ < p >
167+ The spacing system uses standardized tokens to ensure consistent
168+ spatial relationships across all interface elements. These tokens
169+ are based on an 8-pixel grid system with additional fractional
170+ values for fine-grained control.
171+ </ p >
172+
173+ < a id = "Spacing Tokens" >
174+ < h2 > Spacing Tokens</ h2 >
175+ </ a >
176+
177+ < p >
178+ Spacing tokens provide a systematic approach to managing space in
179+ your designs. Built on multiples of 8 pixels, these tokens ensure
180+ visual harmony and consistency across all components and layouts.
181+ The system includes half-step (4px) and quarter-step (2px) values
182+ for precise spacing requirements.
183+ </ p >
184+
185+ < SistentThemeProvider initialMode = { isDark ? "dark" : "light" } >
186+ < Row className = "table-container" $Hcenter >
187+ < Col md = { 12 } sx = { { px : 0 } } >
188+ < StyledTableContainer >
189+ < Table size = "small" aria-label = "spacing-tokens" >
190+ < TableHead >
191+ < TableRow >
192+ < StyledHeaderCell > Token</ StyledHeaderCell >
193+ < StyledHeaderCell > Pixel Value</ StyledHeaderCell >
194+ < StyledHeaderCell > REM Value</ StyledHeaderCell >
195+ < StyledHeaderCell align = "center" > Visual</ StyledHeaderCell >
196+ </ TableRow >
197+ </ TableHead >
198+ < TableBody >
199+ { spacingTokens . map ( ( spacing ) => (
200+ < StyledTableRow key = { spacing . token } >
201+ < StyledTableCell sx = { { fontFamily : "monospace" } } >
202+ < CopyCell value = { spacing . token } />
203+ </ StyledTableCell >
204+ < StyledTableCell >
205+ < CopyCell value = { spacing . px } />
206+ </ StyledTableCell >
207+ < StyledTableCell >
208+ < CopyCell value = { spacing . rem } />
209+ </ StyledTableCell >
210+ < StyledTableCell align = "center" >
211+ < SpacingVisualBox size = { spacing . size } />
212+ </ StyledTableCell >
213+ </ StyledTableRow >
214+ ) ) }
215+ </ TableBody >
216+ </ Table >
217+ </ StyledTableContainer >
218+ </ Col >
219+ </ Row >
220+ </ SistentThemeProvider >
221+
222+ < a id = "Implementation" >
223+ < h2 > Implementation</ h2 >
224+ </ a >
225+ < p >
226+ These spacing tokens can be applied across three primary contexts:
227+ inset (padding), stack (vertical spacing), and inline (horizontal
228+ spacing). Each token maintains the 8-pixel grid relationship to
229+ ensure consistent alignment and visual rhythm throughout your
230+ interface.
231+ </ p >
232+ < p >
233+ When implementing spacing in code, reference these tokens by their
234+ semantic names rather than hardcoded pixel values. This approach
235+ maintains design system consistency and makes future updates more
236+ manageable across your entire application.
237+ </ p >
56238 </ div >
57239 </ div >
58240 </ SistentLayout >
59241 ) ;
60242} ;
243+
244+ export default SpacingCode ;
0 commit comments