diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 08a8ec772..d5c2067c3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -132,7 +132,7 @@ jobs: ${{ runner.os }}-yarn- - name: Run build run: | - npx playwright install && yarn build + yarn build - name: Upload build artifacts uses: actions/upload-artifact@v3 with: diff --git a/core/components/Buttons/CopyToClipboardButton.tsx b/core/components/Buttons/CopyToClipboardButton.tsx index e6662ad73..18c732948 100644 --- a/core/components/Buttons/CopyToClipboardButton.tsx +++ b/core/components/Buttons/CopyToClipboardButton.tsx @@ -56,7 +56,7 @@ const CopyToClipboardButton = (props: { text: string; title?: string }) => { setIsChecked(true); }} variant="icon" - size="small" + size="large" icon={ ( - + @@ -210,7 +206,7 @@ const LineChart = withTooltip( strokeOpacity={0.8} strokeLinecap="round" fill="none" - stroke="hsl(var(--palette-pink-50))" + stroke="var(--pink-300)" initial="initial" animate="animate" variants={pathVariants} diff --git a/core/components/Glow/Glow.tsx b/core/components/Glow/Glow.tsx index 38ad66975..a7b4f59b8 100644 --- a/core/components/Glow/Glow.tsx +++ b/core/components/Glow/Glow.tsx @@ -28,8 +28,8 @@ const StyledGlow = styled('div', { animation: `2.7s ease-in-out 0s infinite normal both running ${pulse}`, background: `linear-gradient( 91.83deg, - hsl(var(--palette-pink-50)) 2.26%, - hsl(var(--palette-indigo-30)) 145.81% + var(--pink-300) 2.26%, + var(--blue-800) 95.81% )`, filter: 'blur(1px)', borderRadius: 'var(--border-radius-1)', diff --git a/core/components/MDX/Widgets/AdvancedFramerMotion/FramerMotionPropagation.tsx b/core/components/MDX/Widgets/AdvancedFramerMotion/FramerMotionPropagation.tsx index 1e6668802..3b375e6b4 100644 --- a/core/components/MDX/Widgets/AdvancedFramerMotion/FramerMotionPropagation.tsx +++ b/core/components/MDX/Widgets/AdvancedFramerMotion/FramerMotionPropagation.tsx @@ -34,6 +34,7 @@ const CaptureLayer = styled(motion.div, { var(--maximeheckel-colors-emphasis) 5px, var(--maximeheckel-colors-emphasis) 10px )`, + opacity: 0.8, zIndex: '3', transformStyle: 'preserve-3d', @@ -80,11 +81,11 @@ const Card = styled('div', { display: 'flex', flexDirection: 'column', justifyContent: 'center', - background: 'hsla(var(--palette-gray-05), 0.55)', - boxShadow: Shadows[3], + background: 'hsl(from var(--gray-400) h s l / 50%)', + boxShadow: Shadows[2], height: '100%', div: { - color: '#4a4a4c', + color: 'var(--maximeheckel-colors-typeface-tertiary)', display: 'flex', justifyContent: 'center', alignItems: 'center', diff --git a/core/components/MDX/Widgets/BezierCurve.tsx b/core/components/MDX/Widgets/BezierCurve.tsx index d89f4a3cc..b6d91e1cd 100644 --- a/core/components/MDX/Widgets/BezierCurve.tsx +++ b/core/components/MDX/Widgets/BezierCurve.tsx @@ -283,8 +283,8 @@ const Cubic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-red-50))" - stroke="hsl(var(--palette-red-50))" + fill="var(--maximeheckel-colors-danger)" + stroke="var(--maximeheckel-colors-danger)" strokeWidth={3} transform={`translate(${scale(lerp1[activeStepIndex]?.x)}, ${scale( lerp1[activeStepIndex]?.y @@ -294,8 +294,8 @@ const Cubic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-red-50))" - stroke="hsl(var(--palette-red-50))" + fill="var(--maximeheckel-colors-danger)" + stroke="var(--maximeheckel-colors-danger)" strokeWidth={3} transform={`translate(${scale(lerp2[activeStepIndex]?.x)}, ${scale( lerp2[activeStepIndex]?.y @@ -305,8 +305,8 @@ const Cubic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-red-50))" - stroke="hsl(var(--palette-red-50))" + fill="var(--maximeheckel-colors-danger)" + stroke="var(--maximeheckel-colors-danger)" strokeWidth={3} transform={`translate(${scale(lerp3[activeStepIndex]?.x)}, ${scale( lerp3[activeStepIndex]?.y @@ -316,8 +316,8 @@ const Cubic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-green-50))" - stroke="hsl(var(--palette-green-50))" + fill="var(--maximeheckel-colors-success)" + stroke="var(--maximeheckel-colors-success)" strokeWidth={3} transform={`translate(${scale(lerp4[activeStepIndex]?.x)}, ${scale( lerp4[activeStepIndex]?.y @@ -327,8 +327,8 @@ const Cubic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-green-50))" - stroke="hsl(var(--palette-green-50))" + fill="var(--maximeheckel-colors-success)" + stroke="var(--maximeheckel-colors-success)" strokeWidth={3} transform={`translate(${scale(lerp5[activeStepIndex]?.x)}, ${scale( lerp5[activeStepIndex]?.y @@ -445,8 +445,8 @@ const Quadratic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-red-50))" - stroke="hsl(var(--palette-red-50))" + fill="var(--maximeheckel-colors-danger)" + stroke="var(--maximeheckel-colors-danger)" strokeWidth={3} transform={`translate(${scale(lerp1[activeStepIndex]?.x)}, ${scale( lerp1[activeStepIndex]?.y @@ -456,8 +456,8 @@ const Quadratic = (props: CurveProps) => { cx={0} cy={0} r={4} - fill="hsl(var(--palette-red-50))" - stroke="hsl(var(--palette-red-50))" + fill="var(--maximeheckel-colors-danger)" + stroke="var(--maximeheckel-colors-danger)" strokeWidth={3} transform={`translate(${scale(lerp2[activeStepIndex]?.x)}, ${scale( lerp2[activeStepIndex]?.y @@ -551,16 +551,8 @@ const Chart = (props: ChartProps) => { - - + + {type === 'linear' ? ( diff --git a/core/components/MDX/Widgets/CSSComposition/ThemePicker.tsx b/core/components/MDX/Widgets/CSSComposition/ThemePicker.tsx index 616c8c0c2..e114cd8dc 100644 --- a/core/components/MDX/Widgets/CSSComposition/ThemePicker.tsx +++ b/core/components/MDX/Widgets/CSSComposition/ThemePicker.tsx @@ -3,12 +3,12 @@ import { motion } from 'framer-motion'; import { AnimationCardContent } from '../Components'; const setVariableToGlobalStyles = (variable: string, value: string) => - document.documentElement.style.setProperty(variable, value); + document.body.style.setProperty(variable, value); const ThemeColor = styled(motion.button, { width: '50px', height: '50px', - background: 'hsl(var(--hue), calc(var(--saturation) * 1%), 50%)', + background: 'hsl(var(--hue), 89%, 50%)', borderRadius: '50px', boxShadow: 'none', border: 'none', @@ -55,7 +55,6 @@ const ThemePicker = () => { }} onClick={() => { setVariableToGlobalStyles('--base-hue', '203'); - setVariableToGlobalStyles('--base-saturation', '88'); }} variants={buttonVariants} whileHover="hover" @@ -74,7 +73,6 @@ const ThemePicker = () => { }} onClick={() => { setVariableToGlobalStyles('--base-hue', '38'); - setVariableToGlobalStyles('--base-saturation', '88'); }} variants={buttonVariants} whileHover="hover" @@ -93,7 +91,6 @@ const ThemePicker = () => { }} onClick={() => { setVariableToGlobalStyles('--base-hue', '342'); - setVariableToGlobalStyles('--base-saturation', '88'); }} variants={buttonVariants} whileHover="hover" diff --git a/core/components/MDX/Widgets/CubicBezierVisualizer.tsx b/core/components/MDX/Widgets/CubicBezierVisualizer.tsx index bb385f55f..4486a0832 100644 --- a/core/components/MDX/Widgets/CubicBezierVisualizer.tsx +++ b/core/components/MDX/Widgets/CubicBezierVisualizer.tsx @@ -278,8 +278,8 @@ const DragHandle = (props: DragHandleProps) => { y1={scale(originPoint.y)} x2={x} y2={y} - fill="hsl(var(--palette-gray-50))" - stroke="hsl(var(--palette-gray-50))" + fill="var(--gray-900)" + stroke="var(--gray-900)" strokeWidth={3} style={{ opacity: 0.5, @@ -289,7 +289,7 @@ const DragHandle = (props: DragHandleProps) => { cx={x} cy={y} r={10} - fill="hsl(var(--palette-gray-50))" + fill="var(--gray-900)" stroke={ isDragging ? 'var(--maximeheckel-colors-brand)' @@ -413,28 +413,12 @@ const Chart = (props: ChartProps) => { > - - + + - - + + @@ -443,8 +427,8 @@ const Chart = (props: ChartProps) => { y1={scale(0)} x2={scale(1)} y2={scale(1)} - fill="hsl(var(--palette-gray-50))" - stroke="hsl(var(--palette-gray-50))" + fill="var(--gray-900)" + stroke="var(--gray-900)" strokeWidth={6} strokeLinecap="round" style={{ diff --git a/core/components/MDX/Widgets/DesignSystem/ColorTokens.tsx b/core/components/MDX/Widgets/DesignSystem/ColorTokens.tsx index a9d2b798e..9412b63b8 100644 --- a/core/components/MDX/Widgets/DesignSystem/ColorTokens.tsx +++ b/core/components/MDX/Widgets/DesignSystem/ColorTokens.tsx @@ -20,120 +20,91 @@ const titles = [ ]; const step1ColorScale = { - gray: [{ color: '--palette-gray-50' }], - blue: [{ color: '--palette-blue-50' }], - red: [{ color: '--palette-red-50' }], + gray: [{ color: '--gray-800' }], + blue: [{ color: '--blue-800' }], + red: [{ color: '--red-800' }], }; const step2ColorScale = { gray: [ - { color: '--palette-gray-00' }, - { color: '--palette-gray-01' }, - { color: '--palette-gray-02' }, - { color: '--palette-gray-03' }, - { color: '--palette-gray-05' }, - { color: '--palette-gray-09' }, - { color: '--palette-gray-10' }, - { color: '--palette-gray-15' }, - { color: '--palette-gray-20' }, - { color: '--palette-gray-25' }, - { color: '--palette-gray-30' }, - { color: '--palette-gray-35' }, - { color: '--palette-gray-40' }, - { color: '--palette-gray-45' }, - { color: '--palette-gray-50' }, - { color: '--palette-gray-55' }, - { color: '--palette-gray-60' }, - { color: '--palette-gray-65' }, - { color: '--palette-gray-70' }, - { color: '--palette-gray-75' }, - { color: '--palette-gray-80' }, - { color: '--palette-gray-85' }, - { color: '--palette-gray-90' }, - { color: '--palette-gray-95' }, - { color: '--palette-gray-100' }, + { color: '--gray-100' }, + { color: '--gray-200' }, + { color: '--gray-300' }, + { color: '--gray-400' }, + { color: '--gray-500' }, + { color: '--gray-600' }, + { color: '--gray-700' }, + { color: '--gray-800' }, + { color: '--gray-900' }, + { color: '--gray-1000' }, + { color: '--gray-1100' }, + { color: '--gray-1200' }, ], blue: [ - { color: '--palette-blue-05' }, - { color: '--palette-blue-10' }, - { color: '--palette-blue-15' }, - { color: '--palette-blue-20' }, - { color: '--palette-blue-25' }, - { color: '--palette-blue-30' }, - { color: '--palette-blue-35' }, - { color: '--palette-blue-40' }, - { color: '--palette-blue-45' }, - { color: '--palette-blue-50' }, - { color: '--palette-blue-55' }, - { color: '--palette-blue-60' }, - { color: '--palette-blue-65' }, - { color: '--palette-blue-70' }, - { color: '--palette-blue-75' }, - { color: '--palette-blue-80' }, - { color: '--palette-blue-85' }, - { color: '--palette-blue-90' }, - { color: '--palette-blue-95' }, + { color: '--blue-100' }, + { color: '--blue-200' }, + { color: '--blue-300' }, + { color: '--blue-400' }, + { color: '--blue-500' }, + { color: '--blue-600' }, + { color: '--blue-700' }, + { color: '--blue-800' }, + { color: '--blue-900' }, + { color: '--blue-1000' }, + { color: '--blue-1100' }, + { color: '--blue-1200' }, ], red: [ - { color: '--palette-red-05' }, - { color: '--palette-red-10' }, - { color: '--palette-red-15' }, - { color: '--palette-red-20' }, - { color: '--palette-red-25' }, - { color: '--palette-red-30' }, - { color: '--palette-red-35' }, - { color: '--palette-red-40' }, - { color: '--palette-red-45' }, - { color: '--palette-red-50' }, - { color: '--palette-red-55' }, - { color: '--palette-red-60' }, - { color: '--palette-red-65' }, - { color: '--palette-red-70' }, - { color: '--palette-red-75' }, - { color: '--palette-red-80' }, - { color: '--palette-red-85' }, - { color: '--palette-red-90' }, - { color: '--palette-red-95' }, + { color: '--red-100' }, + { color: '--red-200' }, + { color: '--red-300' }, + { color: '--red-400' }, + { color: '--red-500' }, + { color: '--red-600' }, + { color: '--red-700' }, + { color: '--red-800' }, + { color: '--red-900' }, + { color: '--red-1000' }, + { color: '--red-1100' }, + { color: '--red-1200' }, ], }; const step3ColorScaleDark = { gray: [ - { color: '--palette-gray-20', label: '--font-tertiary' }, - { color: '--palette-gray-35', label: '--font-secondary' }, - { color: '--palette-gray-55', label: '--input-disabled' }, - { color: '--palette-gray-60', label: '--input-border' }, - { color: '--palette-gray-80', label: '--foreground' }, - { color: '--palette-gray-90', label: '--background' }, - { color: '--palette-gray-100', label: '--input-bckg' }, + { color: '--gray-1000', label: '--font-tertiary' }, + { color: '--gray-1100', label: '--font-secondary' }, + { color: '--gray-700', label: '--input-disabled' }, + { color: '--gray-600', label: '--input-border' }, + { color: '--gray-300', label: '--foreground' }, + { color: '--gray-100', label: '--background' }, ], blue: [ - { color: '--palette-blue-35', label: '--brand' }, - { color: '--palette-blue-50', label: '--input-focus' }, + { color: '--blue-800', label: '--brand' }, + { color: '--blue-900', label: '--input-focus' }, ], red: [ - { color: '--palette-red-20', label: '--font-danger' }, - { color: '--palette-red-30', label: '--danger' }, + { color: '--red-200', label: '--font-danger' }, + { color: '--red-300', label: '--danger' }, ], }; const step3ColorScaleLight = { gray: [ - { color: '--palette-gray-00', label: '--input-bckg' }, - { color: '--palette-gray-02', label: '--background' }, - { color: '--palette-gray-05', label: '--foreground' }, - { color: '--palette-gray-09', label: '--input-disabled' }, - { color: '--palette-gray-55', label: '--font-secondary' }, - { color: '--palette-gray-60', label: '--font-tertiary' }, + { color: '--gray-100', label: '--background' }, + { color: '--gray-200', label: '--foreground' }, + { color: '--gray-300', label: '--input-disabled' }, + { color: '--gray-1100', label: '--font-secondary' }, + { color: '--gray-1000', label: '--font-tertiary' }, + { color: '--gray-500', label: '--input-border' }, ], blue: [ - { color: '--palette-blue-10', label: '--input-border' }, - { color: '--palette-blue-40', label: '--input-focus' }, - { color: '--palette-blue-50', label: '--brand' }, + { color: '--blue-800', label: '--input-focus' }, + { color: '--blue-900', label: '--brand' }, ], red: [ - { color: '--palette-red-55', label: '--danger' }, - { color: '--palette-red-60', label: '--font-danger' }, + { color: '--red-900', label: '--danger' }, + { color: '--red-800', label: '--font-danger' }, ], }; @@ -185,10 +156,10 @@ const ColorGrid = (props) => { diff --git a/core/components/MDX/Widgets/DesignSystem/FlexGridShowcase.tsx b/core/components/MDX/Widgets/DesignSystem/FlexGridShowcase.tsx index 183ced208..8c2445b80 100644 --- a/core/components/MDX/Widgets/DesignSystem/FlexGridShowcase.tsx +++ b/core/components/MDX/Widgets/DesignSystem/FlexGridShowcase.tsx @@ -10,7 +10,7 @@ const StyledBox = () => ( borderRadius: 'var(--border-radius-2)', background: 'white', backgroundImage: - 'radial-gradient(at 30% 20%, hsl(var(--palette-indigo-20)) 0px, transparent 50%), radial-gradient(at 80% -10%, hsl(var(--palette-blue-40)) 0px, transparent 50%), radial-gradient(at 70% 50%, hsl(var(--palette-pink-25)) 0px, transparent 50%), radial-gradient(at -10% 90%, hsl(var(--palette-blue-25)) 0px, transparent 50%), radial-gradient(at 80% 110%, hsl(var(--palette-red-25)) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(var(--palette-red-25)) 0px, transparent 50%)', + 'radial-gradient(at 30% 20%, var(--blue-600) 0px, transparent 50%), radial-gradient(at 80% -10%, var(--blue-700) 0px, transparent 50%), radial-gradient(at 70% 50%, var(--pink-300) 0px, transparent 50%), radial-gradient(at -10% 90%, hsl(from var(--maximeheckel-colors-emphasis) h s l / 80%) 0px, transparent 50%), radial-gradient(at 80% 110%, hsl(from var(--maximeheckel-colors-danger-emphasis) h s l / 40%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(from var(--maximeheckel-colors-danger-emphasis) h s l / 60%) 0px, transparent 50%)', }} /> ); diff --git a/core/components/MDX/Widgets/FramerMotionLayoutAnimations/AdvanceReorderExample.tsx b/core/components/MDX/Widgets/FramerMotionLayoutAnimations/AdvanceReorderExample.tsx index 96a6ad2d1..a323464de 100644 --- a/core/components/MDX/Widgets/FramerMotionLayoutAnimations/AdvanceReorderExample.tsx +++ b/core/components/MDX/Widgets/FramerMotionLayoutAnimations/AdvanceReorderExample.tsx @@ -1,4 +1,5 @@ import { + css, Button, Card, Checkbox, @@ -8,17 +9,8 @@ import { Tooltip, } from '@maximeheckel/design-system'; import { AnimatePresence, LayoutGroup, motion, Reorder } from 'framer-motion'; -import { css, styled } from '@maximeheckel/design-system'; import React from 'react'; -const HR = styled('hr', { - height: '2px', - width: '100%', - background: 'hsl(var(--palette-gray-20))', - border: 'none', - marginBottom: '16px', -}); - const ITEMS = [ { text: 'Finish blog post ✍️', @@ -189,7 +181,6 @@ const AdvanceReorderExample = () => { -
Check items off the list when you're done! diff --git a/core/components/MDX/Widgets/FramerMotionLayoutAnimations/SharedLayoutAnimationDetails.tsx b/core/components/MDX/Widgets/FramerMotionLayoutAnimations/SharedLayoutAnimationDetails.tsx index a75753e5a..cc3c1c9a7 100644 --- a/core/components/MDX/Widgets/FramerMotionLayoutAnimations/SharedLayoutAnimationDetails.tsx +++ b/core/components/MDX/Widgets/FramerMotionLayoutAnimations/SharedLayoutAnimationDetails.tsx @@ -5,9 +5,9 @@ import { HighlightedValue } from '../Components'; const ITEMS = [1, 2, 3]; const COLORS = [ - 'hsl(var(--palette-blue-50))', - 'hsl(var(--palette-pink-50))', - 'hsl(var(--palette-orange-50))', + 'var(--maximeheckel-colors-brand)', + 'var(--pink-300)', + 'var(--orange-900)', ]; const SharedLayoutAnimationDetails = () => { diff --git a/core/components/MDX/Widgets/HeartRateWidget.tsx b/core/components/MDX/Widgets/HeartRateWidget.tsx index 102950af7..80317a13f 100644 --- a/core/components/MDX/Widgets/HeartRateWidget.tsx +++ b/core/components/MDX/Widgets/HeartRateWidget.tsx @@ -59,7 +59,7 @@ const Heart = ({ bpm }: { bpm: number }) => { width="20" height="20" viewBox="0 0 25 24" - fill="hsl(var(--palette-pink-50))" + fill="var(--pink-600)" xmlns="http://www.w3.org/2000/svg" initial={{ scale: 0.8 }} animate={{ diff --git a/core/components/MDX/Widgets/Raymarching/RaymarchingVisualizer/RaymarchingVisualizer.tsx b/core/components/MDX/Widgets/Raymarching/RaymarchingVisualizer/RaymarchingVisualizer.tsx index 0f87c76c0..56064152f 100644 --- a/core/components/MDX/Widgets/Raymarching/RaymarchingVisualizer/RaymarchingVisualizer.tsx +++ b/core/components/MDX/Widgets/Raymarching/RaymarchingVisualizer/RaymarchingVisualizer.tsx @@ -23,7 +23,7 @@ interface CellProps { const Cell = (props: CellProps) => { const { value, x, y } = props; - let color = 'black'; + let color = 'var(--gray-000)'; if (value > 0.002) { color = 'rgb(87, 134, 245)'; @@ -34,8 +34,8 @@ const Cell = (props: CellProps) => { alignItems="center" css={{ aspectRatio: '1 / 1', - borderBottom: '0.5px solid hsla(var(--palette-gray-20), 50%)', - borderLeft: '0.5px solid hsla(var(--palette-gray-20), 50%)', + borderBottom: '0.5px solid var(--gray-700)', + borderLeft: '0.5px solid var(--gray-700)', backgroundColor: color, overflow: 'hidden', }} @@ -116,8 +116,8 @@ const RaymarchingVisualizer = () => { > { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 129.267 75.1306)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 142.195 67.6677)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 155.093 60.2204)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 168.025 52.7546)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 142.187 82.5915)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 155.115 75.1267)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 168.013 67.6794)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 180.945 60.2146)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.427 60.2126)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.355 52.7487)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 129.253 45.3015)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 142.185 37.8356)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.347 67.6716)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 129.275 60.2087)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 142.173 52.7605)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 155.105 45.2946)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 25.8979 75.1345)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 38.8256 67.6716)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 51.7279 60.2224)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6557 52.7585)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 38.8178 82.5954)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 51.7455 75.1306)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6479 67.6814)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5756 60.2185)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 0.0580127 60.2165)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 12.9857 52.7526)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 25.8881 45.3034)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 38.8158 37.8396)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 12.9779 67.6755)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 25.9057 60.2126)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 38.808 52.7624)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 51.7357 45.2985)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5854 45.2937)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.5131 37.8298)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.412 30.3825)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.343 22.9167)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.5053 52.7526)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.433 45.2888)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.331 37.8415)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 129.263 30.3757)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 51.7455 30.3747)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6732 22.9108)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5717 15.4636)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.5033 7.99776)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6654 37.8337)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5932 30.3698)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.4916 22.9226)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.423 15.4567)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5795 104.972)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.5072 97.5095)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.41 90.0603)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.337 82.5954)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.4994 112.433)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.427 104.968)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 116.329 97.5192)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 129.257 90.0564)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 51.7397 90.0544)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6674 82.5915)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5697 75.1423)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.4975 67.6774)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 64.6596 97.5134)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 77.5873 90.0505)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 90.4897 82.6013)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { width="15.0633" height="15.0675" transform="matrix(0.866025 -0.5 0.866025 0.5 103.417 75.1364)" - stroke="var(--maximeheckel-colors-typeface-secondary)" + stroke="var(--gray-600)" strokeWidth="0.5" /> { { /> { /> { /> { /> { const { value, x, y } = props; - let color = 'rgba(0, 0, 0, 0.8)'; + let color = 'var(--gray-000)'; if (value > 0.1) { color = `rgba(87, 134, 245, ${value})`; @@ -34,8 +34,8 @@ const Cell = (props: CellProps) => { alignItems="center" css={{ aspectRatio: '1 / 1', - borderBottom: '0.5px solid hsla(var(--palette-gray-20), 50%)', - borderLeft: '0.5px solid hsla(var(--palette-gray-20), 50%)', + borderBottom: '0.5px solid var(--gray-700)', + borderLeft: '0.5px solid var(--gray-700)', backgroundColor: color, overflow: 'hidden', }} @@ -120,8 +120,8 @@ const VolumetricRaymarchingVisualizer = () => { > { fillRule="evenodd" clipRule="evenodd" d="M223.055 76.7371L243.747 88.4443L265.043 75.9002L244.35 64.193L223.055 76.7371ZM200.791 89.8514L221.483 101.559L242.779 89.0145L222.087 77.3073L200.791 89.8514ZM178.528 102.965L199.823 90.4216L220.515 102.129L199.22 114.673L199.22 114.673L178.528 102.965ZM177.559 103.536L177.493 103.498L177.493 103.498L156.198 116.042L176.956 127.787L198.252 115.243L177.559 103.536ZM155.836 91.2457L155.86 91.2591L155.93 91.2987L176.595 102.99L155.3 115.534L134.541 103.79L155.836 91.2457ZM134.207 79.0085L134.231 79.0219L134.301 79.0615L154.896 90.7137L133.601 103.258L112.912 91.5524L134.207 79.0085ZM112.578 66.7713L112.602 66.7847L112.672 66.8243L133.267 78.4765L111.972 91.0203L91.2828 79.3152L112.578 66.7713ZM90.8788 54.4945L90.9725 54.5475L111.638 66.2393L90.3424 78.7831L69.5836 67.0384L90.8788 54.4945ZM112.7 65.7218L112.676 65.7085L112.606 65.6688L91.9409 53.9771L113.236 41.4332L133.995 53.178L112.7 65.7218ZM134.329 77.959L134.305 77.9457L134.235 77.906L113.64 66.2539L134.935 53.71L155.624 65.4151L134.329 77.959ZM155.958 90.1962L155.934 90.1829L155.864 90.1432L135.269 78.4911L156.565 65.9472L177.253 77.6523L155.958 90.1962ZM198.886 89.8916L177.591 102.435L177.591 102.435L177.564 102.42L156.898 90.7283L178.194 78.1844L198.886 89.8916ZM221.15 76.7773L199.854 89.3214L179.162 77.6142L200.457 65.0701L221.15 76.7773ZM243.414 63.663L222.118 76.2071L201.425 64.4999L222.721 51.9558L243.414 63.663ZM265.784 50.486L244.382 63.0928L223.689 51.3856L245.091 38.7788L265.784 50.486ZM91.0706 53.4846L90.9769 53.4316L90.1153 53.9392L68.7132 66.5459L68.6068 66.6086L67.8516 67.0535L67.7452 67.1161L46.4495 79.6603L46.3431 79.7229L45.5879 80.1678L45.4815 80.2305L24.1858 92.7746L24.0794 92.8372L23.3242 93.2821L23.2178 93.3448L1.81575 105.952L0.954121 106.459L1.82448 106.952L22.5833 118.696L22.6533 118.736L23.4537 119.189L23.5237 119.228L44.2125 130.933L44.2825 130.973L45.0828 131.426L45.1529 131.466L65.8416 143.171L65.9117 143.21L66.712 143.663L66.782 143.703L87.5409 155.448L87.5681 155.463L88.4112 155.94L88.4385 155.955L109.197 167.7L109.267 167.74L110.068 168.193L110.138 168.232L130.826 179.937L130.896 179.977L131.697 180.43L131.767 180.469L152.456 192.175L152.526 192.214L153.326 192.667L153.396 192.707L174.155 204.451L175.025 204.944L175.887 204.436L197.289 191.829L197.395 191.767L198.151 191.322L198.257 191.259L219.553 178.715L219.659 178.652L220.414 178.208L220.521 178.145L241.816 165.601L241.923 165.538L242.678 165.093L242.784 165.031L264.08 152.487L264.941 151.979L286.343 139.372L286.45 139.31L287.205 138.865L287.311 138.802L308.607 126.258L308.713 126.195L309.469 125.751L309.575 125.688L330.871 113.144L330.977 113.081L331.732 112.636L331.839 112.574L353.241 99.9669L354.102 99.4593L353.232 98.9669L332.473 87.2221L332.403 87.1825L331.603 86.7297L331.533 86.6901L310.844 74.9849L310.774 74.9453L309.974 74.4925L309.904 74.4529L289.215 62.7477L289.145 62.7081L288.345 62.2553L288.274 62.2157L267.582 50.5084L267.516 50.4709L266.712 50.016L266.645 49.9785L245.953 38.2713L245.883 38.2316L245.082 37.7788L245.012 37.7392L224.324 26.0341L224.254 25.9944L223.453 25.5416L223.383 25.502L202.694 13.7969L202.624 13.7572L201.824 13.3044L201.754 13.2648L180.995 1.52003L180.125 1.02761L179.263 1.53515L157.861 14.1419L157.755 14.2046L157 14.6495L156.893 14.7121L135.598 27.2562L135.491 27.3189L134.736 27.7638L134.63 27.8264L113.334 40.3706L113.227 40.4332L112.472 40.8781L112.366 40.9408L91.0706 53.4846ZM266.72 51.016L287.413 62.7232L266.011 75.33L245.318 63.6228L266.72 51.016ZM287.64 87.5672L266.951 75.862L288.353 63.2553L309.042 74.9604L287.64 87.5672ZM288.58 88.0992L309.269 99.8044L330.671 87.1976L309.982 75.4925L288.58 88.0992ZM330.968 112.081L352.37 99.4744L331.612 87.7297L310.21 100.336L330.968 112.081ZM242.145 114.366L220.849 126.91L200.161 115.205L221.456 102.661L242.145 114.366ZM263.774 126.603L242.478 139.147L221.79 127.442L243.085 114.898L263.774 126.603ZM285.473 138.88L264.178 151.424L243.419 139.679L264.714 127.135L285.473 138.88ZM177.897 128.319L199.192 115.775L199.192 115.775L219.881 127.48L198.586 140.024L177.897 128.319ZM199.526 140.556L220.821 128.012L241.51 139.718L220.215 152.261L199.526 140.556ZM221.155 152.793L242.45 140.25L263.209 151.994L241.914 164.538L221.155 152.793ZM308.705 125.196L330 112.651L309.242 100.907L287.946 113.451L308.705 125.196ZM286.978 114.021L265.682 126.565L286.441 138.31L307.737 125.766L286.978 114.021ZM308.301 100.375L287.612 88.6694L266.317 101.214L287.005 112.919L308.301 100.375ZM286.037 113.489L264.742 126.033L244.053 114.328L265.349 101.784L286.037 113.489ZM265.376 100.682L286.672 88.1374L265.983 76.4322L244.687 88.9764L265.376 100.682ZM243.719 89.5465L264.408 101.252L243.113 113.796L222.424 102.091L243.719 89.5465ZM154.332 116.105L133.036 128.649L112.277 116.904L133.573 104.36L154.332 116.105ZM90.0137 130.018L111.309 117.474L132.068 129.219L110.773 141.763L90.0137 130.018ZM111.944 92.1226L132.633 103.828L111.337 116.372L90.6482 104.667L111.944 92.1226ZM89.0733 129.486L110.369 116.942L89.6803 105.237L68.3846 117.781L89.0733 129.486ZM111.004 91.5905L89.7078 104.135L69.0191 92.4295L90.3148 79.8854L111.004 91.5905ZM88.7399 104.705L68.0511 92.9997L46.7554 105.544L67.4442 117.249L88.7399 104.705ZM68.6156 67.6086L89.3744 79.3533L68.0787 91.8975L47.3199 80.1527L68.6156 67.6086ZM45.815 105.012L67.1107 92.4677L46.3519 80.7229L25.0562 93.267L45.815 105.012ZM88.4025 154.94L67.6437 143.195L89.0457 130.588L109.805 142.333L88.4025 154.94ZM67.4166 118.351L88.1053 130.056L66.7033 142.663L46.0145 130.958L67.4166 118.351ZM66.4762 117.819L45.7874 106.114L24.3853 118.721L45.0741 130.426L66.4762 117.819ZM23.4449 118.189L44.847 105.582L24.0882 93.8372L2.68611 106.444L23.4449 118.189ZM240.946 165.108L219.65 177.653L198.891 165.908L220.187 153.364L240.946 165.108ZM176.628 179.022L197.923 166.478L218.682 178.223L197.387 190.767L176.628 179.022ZM198.558 141.126L219.247 152.832L197.951 165.376L177.262 153.671L198.558 141.126ZM175.687 178.49L196.983 165.946L176.294 154.241L154.999 166.785L175.687 178.49ZM197.618 140.594L176.322 153.139L155.633 141.433L176.929 128.889L197.618 140.594ZM175.354 153.709L154.665 142.004L133.369 154.548L154.058 166.253L175.354 153.709ZM155.23 116.612L175.988 128.357L154.693 140.901L133.934 129.157L155.23 116.612ZM132.429 154.016L153.725 141.471L132.966 129.727L111.67 142.271L132.429 154.016ZM175.016 203.944L154.258 192.199L175.66 179.592L196.419 191.337L175.016 203.944ZM154.031 167.355L174.719 179.06L153.317 191.667L132.628 179.962L154.031 167.355ZM153.09 166.823L132.401 155.118L110.999 167.725L131.688 179.43L153.09 166.823ZM110.059 167.193L131.461 154.586L110.702 142.841L89.3001 155.448L110.059 167.193ZM180.134 2.02757L200.892 13.7723L179.49 26.3791L158.732 14.6343L180.134 2.02757ZM180.431 26.9112L201.12 38.6163L222.522 26.0095L201.833 14.3044L180.431 26.9112ZM222.749 50.8535L202.06 39.1484L223.462 26.5416L244.151 38.2467L222.749 50.8535ZM201.092 39.7186L221.781 51.4237L200.485 63.9678L179.796 52.2627L201.092 39.7186ZM178.221 77.0822L199.517 64.538L178.828 52.8329L157.533 65.377L178.221 77.0822ZM200.152 39.1865L178.856 51.7306L158.167 40.0255L179.463 27.4814L200.152 39.1865ZM177.888 52.3008L157.199 40.5957L135.903 53.1398L156.592 64.845L177.888 52.3008ZM157.764 15.2045L178.522 26.9493L157.227 39.4934L136.468 27.7487L157.764 15.2045ZM134.963 52.6078L156.259 40.0636L135.5 28.3189L114.204 40.863L134.963 52.6078Z" - fill="var(--maximeheckel-colors-typeface-secondary)" + fill="var(--gray-600)" fillOpacity={0.5} /> { - - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - // - - // - // - // - // - // - // ); }; diff --git a/core/components/MDX/Widgets/Scrollspy/ScrollSpyWidget.tsx b/core/components/MDX/Widgets/Scrollspy/ScrollSpyWidget.tsx index 737aa43fb..8b43ef958 100644 --- a/core/components/MDX/Widgets/Scrollspy/ScrollSpyWidget.tsx +++ b/core/components/MDX/Widgets/Scrollspy/ScrollSpyWidget.tsx @@ -149,7 +149,7 @@ const WidgetRoot = styled('div', { }, '&::-webkit-scrollbar-track': { - backgroundColor: 'hsla(var(--palette-gray-30), 0.2)', + backgroundColor: 'var(--maximeheckel-colors-foreground)', borderRadius: '8px', }, diff --git a/core/components/MDX/Widgets/SemanticSearch/DemoSearch.tsx b/core/components/MDX/Widgets/SemanticSearch/DemoSearch.tsx index 25952b041..59f93779d 100644 --- a/core/components/MDX/Widgets/SemanticSearch/DemoSearch.tsx +++ b/core/components/MDX/Widgets/SemanticSearch/DemoSearch.tsx @@ -125,7 +125,7 @@ const DemoSearch = () => { height: 275, width: '100%', padding: 'var(--space-3)', - background: 'hsla(var(--palette-gray-50), 0.05)', + background: 'hsl(from var(--gray-400) h s l / 30%)', position: 'relative', }} > diff --git a/core/components/MDX/Widgets/SemanticSearch/Formatting.tsx b/core/components/MDX/Widgets/SemanticSearch/Formatting.tsx index faa0a9308..87b28df34 100644 --- a/core/components/MDX/Widgets/SemanticSearch/Formatting.tsx +++ b/core/components/MDX/Widgets/SemanticSearch/Formatting.tsx @@ -144,7 +144,7 @@ const Formatting = () => { height: 275, width: '100%', padding: 'var(--space-3)', - background: 'hsla(var(--palette-gray-50), 0.05)', + background: 'hsl(from var(--gray-400) h s l / 30%)', }} > {streamData} @@ -157,7 +157,7 @@ const Formatting = () => { width: '100%', padding: 'var(--space-3)', overflowY: 'auto', - background: 'hsla(var(--palette-gray-50), 0.05)', + background: 'hsl(from var(--gray-400) h s l / 30%)', 'p, li, strong, em': { margin: '0px 0px 1rem', fontSize: 'var(--font-size-1)!important', diff --git a/core/components/MDX/Widgets/ShaderReactThreeFiber/FragmentShaderVisualizer.tsx b/core/components/MDX/Widgets/ShaderReactThreeFiber/FragmentShaderVisualizer.tsx index 658e91f7f..246062150 100644 --- a/core/components/MDX/Widgets/ShaderReactThreeFiber/FragmentShaderVisualizer.tsx +++ b/core/components/MDX/Widgets/ShaderReactThreeFiber/FragmentShaderVisualizer.tsx @@ -26,8 +26,8 @@ const Cell = (props: CellProps) => { css={{ aspectRatio: '1 / 1', cursor: 'pointer', - borderBottom: '0.5px solid hsla(var(--palette-gray-20), 50%)', - borderLeft: '0.5px solid hsla(var(--palette-gray-20), 50%)', + borderBottom: '0.5px solid var(--gray-700)', + borderLeft: '0.5px solid var(--gray-700)', backgroundColor: `rgb(${value * 255},${value * 255},${value * 255})`, overflow: 'hidden', }} @@ -250,8 +250,8 @@ const FragmentShaderVisualizer = () => { { cy.get('[data-testid="article-item"]').should('be.visible'); cy.get('[data-testid="article-link"]').eq(0).click(); cy.url().should('include', '/posts/'); - cy.get('[data-testid="hero"]').should('be.visible'); + cy.get('[data-testid="post-title"]').should('be.visible'); cy.wait(1000); }); it('It can go from an article to the landing page', () => { cy.visit('/posts/how-to-build-first-eslint-rule/'); + cy.get('[data-testid="post-title"]').should('be.visible'); cy.get('[data-testid="home-link"]').click(); cy.url().should('include', '/'); cy.get('[data-testid="article-list"]').should('be.visible'); cy.get('[data-testid="article-item"]').should('be.visible'); }); - it.skip('It shows the progress bar when scrolling', () => { - cy.visit('/'); - cy.get( - 'a[href="/posts/switching-off-the-lights-part-2-fixing-dark-mode-flashing-on-servered-rendered-website/"]' - ).click({ force: true }); - cy.url().should('include', '/posts/'); - cy.get('[data-testid="hero"]').should('be.visible'); - cy.get('[data-testid="progress-bar"]').should('not.be.visible'); - cy.scrollTo(0, 2000); - cy.get('[data-testid="progress-bar"]').should('be.visible'); - }); }); diff --git a/cypress/e2e/search.cy.js b/cypress/e2e/search.cy.js index 7668d8a5d..e1c258c97 100644 --- a/cypress/e2e/search.cy.js +++ b/cypress/e2e/search.cy.js @@ -56,7 +56,7 @@ describe('Search tests', () => { cy.get('[data-testid="search-result"]').should('be.visible').eq(0).click(); cy.url().should('include', '/posts/'); - cy.get('[data-testid="hero"]').should('be.visible'); + cy.get('[data-testid="post-title"]').should('be.visible'); // Arbitrary wait because other firefox will interrupt page load and cause some exception that Cypress will catch // and fail the test for. diff --git a/layouts/BlogPost.tsx b/layouts/BlogPost.tsx index d14b5c8b4..49eb8e775 100644 --- a/layouts/BlogPost.tsx +++ b/layouts/BlogPost.tsx @@ -136,7 +136,7 @@ const BlogLayout = ({ children, frontMatter, ogImage }: Props) => {

{title}

diff --git a/layouts/Signature/Signature.tsx b/layouts/Signature/Signature.tsx index aaa6a892a..148ca543f 100644 --- a/layouts/Signature/Signature.tsx +++ b/layouts/Signature/Signature.tsx @@ -5,7 +5,7 @@ import { useRef } from 'react'; // const NewsletterForm = dynamic(() => import('@core/components/NewsletterForm')); const StyledSection = styled('section', { - background: 'var(--maximeheckel-card-background-color)', + background: 'var(--maximeheckel-colors-foreground)', color: 'var(--maximeheckel-colors-typeface-primary)', paddingBottom: 48, paddingTop: 48, diff --git a/lib/tweets.ts b/lib/tweets.ts index 43daa8461..3fafb3e88 100644 --- a/lib/tweets.ts +++ b/lib/tweets.ts @@ -7,7 +7,7 @@ const fetchTweetData = async (ids: string[]): Promise => { // Note: if the URL breaks, you can find a new one by inspecting the // network tab in the browser dev tools when you load a tweet embed. const response = await fetch( - `https://cdn.syndication.twimg.com/tweet-result?features=tfw_timeline_list%3A%3Btfw_follower_count_sunset%3Atrue%3Btfw_tweet_edit_backend%3Aon%3Btfw_refsrc_session%3Aon%3Btfw_fosnr_soft_interventions_enabled%3Aon%3Btfw_mixed_media_15897%3Atreatment%3Btfw_experiments_cookie_expiration%3A1209600%3Btfw_show_birdwatch_pivots_enabled%3Aon%3Btfw_duplicate_scribes_to_settings%3Aon%3Btfw_use_profile_image_shape_enabled%3Aon%3Btfw_video_hls_dynamic_manifests_15082%3Atrue_bitrate%3Btfw_legacy_timeline_sunset%3Atrue%3Btfw_tweet_edit_frontend%3Aon&id=${id}&lang=en&token=434ts2qf9ae&7ff376=jd686m35gpde&d7bx8p=19ywn80rre4d&y0oda5=6lv8zc4av8oi&pjl0c8=1njzv8bkrlsq&motl31=201a8pipthnh` + `https://cdn.syndication.twimg.com/tweet-result?features=tfw_timeline_list%3A%3Btfw_follower_count_sunset%3Atrue%3Btfw_tweet_edit_backend%3Aon%3Btfw_refsrc_session%3Aon%3Btfw_fosnr_soft_interventions_enabled%3Aon%3Btfw_mixed_media_15897%3Atreatment%3Btfw_experiments_cookie_expiration%3A1209600%3Btfw_show_birdwatch_pivots_enabled%3Aon%3Btfw_duplicate_scribes_to_settings%3Aon%3Btfw_use_profile_image_shape_enabled%3Aon%3Btfw_video_hls_dynamic_manifests_15082%3Atrue_bitrate%3Btfw_legacy_timeline_sunset%3Atrue%3Btfw_tweet_edit_frontend%3Aon&id=${id}&lang=en&token=3cyaf2vcqn&eb3f6q=2588b53yicua&0eh2pi=1lfg9890gni9&gea2ck=67k8rdg7w11v&oexftn=b507q82p8zr&thcu8n=de2yw8ys85pr&nqstp6=6p8ocgf8lbcu` ); const tweet = (await response.json()) as NewTweet; diff --git a/package.json b/package.json index 4d90bb67c..597ed4e61 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ }, "dependencies": { "@codesandbox/sandpack-react": "1.18.4", - "@maximeheckel/design-system": "^1.5.2", + "@maximeheckel/design-system": "^2.0.0", "@supabase/supabase-js": "^2.12.0", "@vercel/analytics": "^0.1.5", "@vercel/edge": "^0.3.4", diff --git a/pages/design.tsx b/pages/design.tsx index a3ecaacac..b69bc8b73 100644 --- a/pages/design.tsx +++ b/pages/design.tsx @@ -52,9 +52,7 @@ const Search = dynamic(() => import('@core/components/Search'), { /** * TODO: * - Decouple Search in 2 components => Overlay + Dialog and Command Center - * - Rebuild/Rename Search component * - Define specific token for glass card background (foreground is not cutting it) - * -> hsla(var(--palette-gray-03), 0.2) like code snippet background */ // Grid examples @@ -137,9 +135,9 @@ const Search = dynamic(() => import('@core/components/Search'), { */ const HR = styled('hr', { - height: '2px', + height: '1px', width: '100%', - background: 'hsl(var(--palette-gray-20))', + background: 'var(--maximeheckel-border-color)', border: 'none', }); @@ -153,20 +151,22 @@ export default function Design(props: { tweets: Record }) { const [email, setEmail] = React.useState(''); const [rangeValue, setRangeValue] = React.useState(250); - const colorScaleNumbers = React.useMemo( - () => - Array.from(Array(19).keys()).map((items) => { - const num = (items + 1) * 5; - if (num === 5) { - return `0${num}`; - } + const colorScaleNumbers = [ + 100, + 200, + 300, + 400, + 500, + 600, + 700, + 800, + 900, + 1000, + 1100, + 1200, + ]; - return num.toString(); - }), - [] - ); - - const palette = ['gray', 'blue', 'red', 'orange', 'green', 'pink', 'indigo']; + const palette = ['gray', 'blue', 'red', 'orange', 'green', 'pink']; return ( @@ -329,7 +329,7 @@ export default function Design(props: { tweets: Record }) { }) { width: '44px', height: '44px', borderRadius: '50%', - background: `hsl(var(--palette-${paletteItem}-${shade}))`, + background: `var(--${paletteItem}-${shade})`, border: '2px solid var(--maximeheckel-border-color)', }} /> @@ -448,9 +448,9 @@ export default function Design(props: { tweets: Record }) { css={{ backgroundImage: `linear-gradient( 91.83deg, - hsl(var(--palette-pink-50)) -20.26%, - hsl(var(--palette-blue-20)) 20.55%, - hsl(var(--palette-indigo-30)) 60.81% + var(--pink-300) -20.26%, + var(--blue-600) 20.55%, + var(--blue-800) 60.81% )`, }} > @@ -670,20 +670,20 @@ export default function Design(props: { tweets: Record }) { - - - - @@ -121,7 +124,7 @@ const IndexPage = (props: Props) => { style={{ textDecoration: 'none' }} tabIndex={-1} > - @@ -228,7 +231,13 @@ const IndexPage = (props: Props) => { > {post.title} - + {post.subtitle} @@ -269,7 +278,6 @@ const IndexPage = (props: Props) => { css={{ listStyle: 'none', cursor: 'pointer', - marginBottom: 'calc(1.45rem / 2)', lineHeight: '1.9', letterSpacing: '0.3px', }} @@ -357,7 +365,7 @@ const Block = styled(Box, { paddingLeft: '10px', borderRadius: 'var(--border-radius-2)', marginLeft: '-10px', - height: '60px', + height: '54px', boxShadow: 'none', backgroundColor: 'var(--article-block-background-color, "transparent")', color: diff --git a/public/rss.xml b/public/rss.xml index 72a6e64a9..dbe6032c7 100644 --- a/public/rss.xml +++ b/public/rss.xml @@ -9,7 +9,7 @@ https://blog.maximeheckel.com RSS for Node - Sun, 12 Nov 2023 04:49:13 GMT + Thu, 14 Dec 2023 17:40:22 GMT diff --git a/yarn.lock b/yarn.lock index 6d06ef38b..2d508dd54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1143,10 +1143,10 @@ dependencies: "@lezer/common" "^0.15.0" -"@maximeheckel/design-system@^1.5.2": - version "1.5.2" - resolved "https://registry.yarnpkg.com/@maximeheckel/design-system/-/design-system-1.5.2.tgz#8d1752575026cf84ce94d8bd3da777d5dc9fab7d" - integrity sha512-rbiaDf7Ckb7+c+XF3PxTO0KUKmdgB9WtZla2jClK+RTrqXreQVbdcX/vmzlhngTPRBppLGEZpVjC4/sIN6Qe1Q== +"@maximeheckel/design-system@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@maximeheckel/design-system/-/design-system-2.0.0.tgz#9e8baa5fedee6bcb29fd17686339b74ac031fb26" + integrity sha512-Z70atzruZ5bNnihkeef+iSHyrjT9HWLlZ2KmLdaSbdZ8xHTxFsQpZoCthgXM3VkzAAoH67t0o6BcPSEc+hoO+g== dependencies: "@radix-ui/react-collapsible" "^1.0.1" "@radix-ui/react-tooltip" "1.0.0"