chore: Update design system and use new color scale (#664)

MaximeHeckel · Dec 15, 2023 · 3eec7a3 · 3eec7a3 · vercel · Dec 15, 2023
1 parent d90657e
commit 3eec7a3
Show file tree

Hide file tree

Showing 31 changed files with 247 additions and 909 deletions.
diff --git 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
@@ -56,7 +56,7 @@ const CopyToClipboardButton = (props: { text: string; title?: string }) => {
  setIsChecked(true);
  }}
  variant="icon"
- size="small"
+ size="large"
  icon={
  <motion.svg
  initial="idle"

diff --git a/core/components/Charts/LineChart.tsx b/core/components/Charts/LineChart.tsx
@@ -162,14 +162,10 @@ const LineChart = withTooltip<LineChartProps, FormattedData>(
  <linearGradient id="hr" x1="0" y1="0" x2="0" y2="1">
  <stop
  offset="20%"
- stopColor="hsl(var(--palette-pink-50))"
+ stopColor="var(--pink-600)"
  stopOpacity={0.8}
  />
- <stop
- offset="99%"
- stopColor="hsl(var(--palette-pink-50))"
- stopOpacity={0}
- />
+ <stop offset="99%" stopColor="var(--pink-600)" stopOpacity={0} />
  </linearGradient>
  </defs>
  <ClipPath id="myClip">
@@ -210,7 +206,7 @@ const LineChart = withTooltip<LineChartProps, FormattedData>(
  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
@@ -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
@@ -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
@@ -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) => {
  <svg width={dimension} height={dimension} style={{ overflow: 'visible' }}>
  <defs>
  <linearGradient id="hr" x1="0" y1="0" x2="0" y2="1">
- <stop
- offset="20%"
- stopColor="hsl(var(--palette-pink-30))"
- stopOpacity={1}
- />
- <stop
- offset="99%"
- stopColor="hsl(var(--palette-indigo-30))"
- stopOpacity={1}
- />
+ <stop offset="20%" stopColor="var(--pink-300)" stopOpacity={1} />
+ <stop offset="99%" stopColor="var(--blue-800)" stopOpacity={1} />
  </linearGradient>
  </defs>
  {type === 'linear' ? (

diff --git 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
@@ -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) => {
  >
  <defs>
  <linearGradient id="motion" x1="0" y1="0" x2="0" y2="1">
- <stop
- offset="20%"
- stopColor="hsl(var(--palette-pink-30))"
- stopOpacity={1}
- />
- <stop
- offset="99%"
- stopColor="hsl(var(--palette-indigo-30))"
- stopOpacity={1}
- />
+ <stop offset="20%" stopColor="var(--pink-300)" stopOpacity={1} />
+ <stop offset="99%" stopColor="var(--blue-800)" stopOpacity={1} />
  </linearGradient>
  <linearGradient id="speed" x1="0" y1="0" x2="0" y2="1">
- <stop
- offset="1%"
- stopColor="hsl(var(--palette-green-50))"
- stopOpacity={1}
- />
- <stop
- offset="99%"
- stopColor="hsl(var(--palette-orange-50))"
- stopOpacity={1}
- />
+ <stop offset="1%" stopColor="var(--green-900)" stopOpacity={1} />
+ <stop offset="99%" stopColor="var(--orange-900)" stopOpacity={1} />
  </linearGradient>
  </defs>
  <Group>
@@ -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={{