Update remaining accent color usage and other theme / dark mode imp…

…rovements
techniq · Dec 13, 2023 · 0261a9f · 0261a9f
1 parent ffd9b25
commit 0261a9f
Show file tree

Hide file tree

Showing 25 changed files with 164 additions and 151 deletions.
diff --git a/packages/layerchart/src/lib/components/Highlight.svelte b/packages/layerchart/src/lib/components/Highlight.svelte
@@ -216,7 +216,7 @@
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
         radius={typeof bar === 'object' ? bar.radius : null}
         bar={$tooltip.data}
-        class={cls(!bar.fill && 'fill-accent-500', typeof bar === 'object' ? bar.class : null)}
+        class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
         on:click
       />
     </slot>
@@ -255,7 +255,7 @@
           {...typeof points === 'object' ? points : null}
           class={cls(
             'stroke-[6] stroke-white [paint-order:stroke] drop-shadow',
-            !fill && 'fill-accent-500',
+            !fill && 'fill-primary',
             typeof points === 'object' ? points.class : null
           )}
         />

diff --git a/packages/layerchart/src/lib/components/Link.svelte b/packages/layerchart/src/lib/components/Link.svelte
@@ -31,8 +31,8 @@
 
   /** Convenient property to swap x/y accessor logic */
   export let orientation: 'vertical' | 'horizontal' = sankey ? 'horizontal' : 'vertical';
-  export let x = sankey ? (d) => d[0] : (d) => (orientation === 'horizontal' ? d.y : d.x);
-  export let y = sankey ? (d) => d[1] : (d) => (orientation === 'horizontal' ? d.x : d.y);
+  export let x = (d) => (sankey ? d[0] : orientation === 'horizontal' ? d.y : d.x);
+  export let y = (d) => (sankey ? d[1] : orientation === 'horizontal' ? d.x : d.y);
   export let curve = orientation === 'horizontal' ? curveBumpX : curveBumpY;
 
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;

diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
@@ -83,11 +83,11 @@
       const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
       return {
         source: {
-          x: xMin + getOffset(xMin, offsetX, $xScale),
+          x: xMin + getOffset(xMin, offsetX, $xScale) + r,
           y,
         },
         target: {
-          x: xMax + getOffset(xMax, offsetX, $xScale),
+          x: xMax + getOffset(xMax, offsetX, $xScale) - r,
           y: y,
         },
       };
@@ -116,7 +116,11 @@
   {#if links}
     <g class="link-group">
       {#each _links as link}
-        <Link data={link} stroke="black" {...typeof links === 'object' ? links : null} />
+        <Link
+          data={link}
+          class="stroke-surface-content/50"
+          {...typeof links === 'object' ? links : null}
+        />
       {/each}
     </g>
   {/if}

diff --git a/packages/layerchart/src/lib/docs/Link.svelte b/packages/layerchart/src/lib/docs/Link.svelte
@@ -2,6 +2,6 @@
   // console.log($$props, $$slots);
 </script>
 
-<a class="text-accent-500 font-medium" {...$$restProps}>
+<a class="text-primary font-medium" {...$$restProps}>
   <slot />
 </a>
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -60,7 +60,7 @@
       <Svg>
         <Group center>
           {#key spring}
-            <LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 50%)']} vertical let:url>
+            <LinearGradient class="from-secondary to-primary" vertical let:url>
               <Arc
                 {value}
                 {domain}
@@ -74,7 +74,7 @@
                 let:value
                 let:boundingBox
                 fill={url}
-                track={{ fill: 'hsl(0 0% 0% / 6% )' }}
+                track={{ class: 'fill-surface-content/5' }}
               >
                 <Text
                   value={Math.round(value)}

diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -58,9 +58,9 @@
         <Axis placement="bottom" rule />
         <Area
           {curve}
-          line={showLine && { class: 'stroke-accent-500 stroke-2' }}
+          line={showLine && { class: 'stroke-primary stroke-2' }}
           {tweened}
-          class="fill-accent-500/30"
+          class="fill-primary/30"
         />
         {#if showPoints}
           <Points {tweened} />

diff --git a/packages/layerchart/src/routes/docs/components/Circle/+page.svelte b/packages/layerchart/src/routes/docs/components/Circle/+page.svelte
@@ -15,8 +15,8 @@
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Circle cx={100} cy={100} r={20} />
-        <Circle cx={200} cy={200} r={20} class="fill-accent-500" />
-        <Circle cx={300} cy={150} r={20} class="stroke-2 stroke-accent-500 fill-accent-100" />
+        <Circle cx={200} cy={200} r={20} class="fill-primary" />
+        <Circle cx={300} cy={150} r={20} class="stroke-2 stroke-primary fill-primary/10" />
       </Svg>
     </Chart>
   </div>

diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
@@ -144,7 +144,11 @@
     data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
     r="name"
     rScale={scaleOrdinal()}
-    rRange={['var(--color-blue-500)', 'var(--color-green-500)', 'var(--color-purple-500)']}
+    rRange={[
+      'oklch(var(--color-success))',
+      'oklch(var(--color-warning))',
+      'oklch(var(--color-error))',
+    ]}
   >
     <Legend title="I am Legend" />
   </Chart>
@@ -158,7 +162,11 @@
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
       r="name"
       rScale={scaleOrdinal()}
-      rRange={['var(--color-blue-500)', 'var(--color-green-500)', 'var(--color-purple-500)']}
+      rRange={[
+        'oklch(var(--color-success))',
+        'oklch(var(--color-warning))',
+        'oklch(var(--color-error))',
+      ]}
     >
       <Legend title="top-left" placement="top-left" />
       <Legend title="top" placement="top" />

diff --git a/packages/layerchart/src/routes/docs/components/Line/+page.svelte b/packages/layerchart/src/routes/docs/components/Line/+page.svelte
@@ -14,8 +14,8 @@
       <Svg>
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
-        <Line x1={100} y1={100} x2={200} y2={200} class="stroke-2 stroke-blue-500" />
-        <Line x1={50} y1={150} x2={400} y2={150} class="stroke-2 stroke-red-500" />
+        <Line x1={100} y1={100} x2={200} y2={200} class="stroke-2 stroke-primary" />
+        <Line x1={50} y1={150} x2={400} y2={150} class="stroke-2 stroke-secondary" />
       </Svg>
     </Chart>
   </div>

diff --git a/packages/layerchart/src/routes/docs/components/Point/+page.svelte b/packages/layerchart/src/routes/docs/components/Point/+page.svelte
@@ -24,7 +24,7 @@
           <circle cx={x} cy={y} r={10} />
         </Point>
         <Point d={{ x: 20, y: 20 }} let:x let:y>
-          <circle cx={x} cy={y} r={15} class="fill-accent-500" />
+          <circle cx={x} cy={y} r={15} class="fill-primary" />
         </Point>
       </Svg>
     </Chart>

diff --git a/packages/layerchart/src/routes/docs/components/Rect/+page.svelte b/packages/layerchart/src/routes/docs/components/Rect/+page.svelte
@@ -15,8 +15,8 @@
         <Axis placement="bottom" rule />
         <Axis placement="left" rule />
         <Rect x={50} y={50} width={100} height={150} />
-        <Rect x={90} y={80} width={200} height={100} class="fill-accent-500" />
-        <Rect x={125} y={40} width={200} height={100} class="stroke-accent-500 fill-none" />
+        <Rect x={90} y={80} width={200} height={100} class="fill-primary" />
+        <Rect x={125} y={40} width={200} height={100} class="stroke-primary fill-none" />
       </Svg>
     </Chart>
   </div>

diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -69,7 +69,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
-        <Spline {curve} {tweened} {draw} class="stroke-accent-500 stroke-2" />
+        <Spline {curve} {tweened} {draw} class="stroke-primary stroke-2" />
         {#if showPoints}
           <Points {tweened} />
         {/if}
@@ -99,7 +99,7 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} draw class="stroke-accent-500 stroke-2" />
+            <Spline {curve} draw class="stroke-primary stroke-2" />
           {/if}
         </Svg>
       </Chart>
@@ -126,7 +126,7 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} tweened class="stroke-accent-500 stroke-2" />
+            <Spline {curve} tweened class="stroke-primary stroke-2" />
           {/if}
         </Svg>
       </Chart>
@@ -153,9 +153,9 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} class="stroke-accent-500 stroke-2">
-              <circle slot="start" r={5} class="fill-accent-500" />
-              <circle slot="end" r={5} class="fill-accent-500" />
+            <Spline {curve} class="stroke-primary stroke-2">
+              <circle slot="start" r={5} class="fill-primary" />
+              <circle slot="end" r={5} class="fill-primary" />
             </Spline>
           {/if}
         </Svg>
@@ -183,14 +183,14 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} class="stroke-accent-500 stroke-2">
+            <Spline {curve} class="stroke-primary stroke-2">
               <svelte:fragment slot="start">
-                <circle r={5} class="fill-accent-500" />
+                <circle r={5} class="fill-primary" />
                 <Text value="start" textAnchor="end" verticalAnchor="middle" dx={-8} />
               </svelte:fragment>
 
               <svelte:fragment slot="end">
-                <circle r={5} class="fill-accent-500" />
+                <circle r={5} class="fill-primary" />
                 <Text value="end" verticalAnchor="middle" dx={8} />
               </svelte:fragment>
             </Spline>
@@ -220,8 +220,8 @@
           <Axis placement="left" grid rule />
           <Axis placement="bottom" rule />
           {#if show}
-            <Spline {curve} draw={{ duration: 3000 }} class="stroke-accent-500 stroke-2">
-              <circle slot="end" r={5} class="fill-accent-500" />
+            <Spline {curve} draw={{ duration: 3000 }} class="stroke-primary stroke-2">
+              <circle slot="end" r={5} class="fill-primary" />
             </Spline>
           {/if}
         </Svg>

diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -164,7 +164,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -191,7 +191,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip variant="light" let:data>
@@ -222,7 +222,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -249,7 +249,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip y="data" x="data" header={(data) => format(data.date, 'eee, MMMM do')} let:data>
@@ -278,7 +278,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines axis="both" />
       </Svg>
 
@@ -288,7 +288,7 @@
         anchor="right"
         contained={false}
         variant="none"
-        class="text-[10px] font-semibold text-accent-700 bg-accent-50 mt-[2px] px-1 py-[2px] border border-accent-500 rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {data.value}
@@ -299,7 +299,7 @@
         y={height}
         anchor="top"
         variant="none"
-        class="text-[10px] font-semibold text-accent-700 bg-accent-50 mt-[2px] px-2 py-[2px] border border-accent-500 rounded whitespace-nowrap"
+        class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {formatDate(data.date, PeriodType.Day)}
@@ -358,7 +358,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
       <Tooltip
@@ -402,7 +402,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Area class="fill-accent-500/30" line={{ class: 'stroke-accent-500 stroke-2' }} />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight
           points={charts.area.highlight.includes('points')}
           lines={charts.area.highlight.includes('lines')}
@@ -440,7 +440,11 @@
       r="key"
       rScale={scaleOrdinal()}
       rDomain={keys}
-      rRange={['var(--color-red-500)', 'var(--color-green-500)', 'var(--color-blue-500)']}
+      rRange={[
+        'oklch(var(--color-info))',
+        'oklch(var(--color-success))',
+        'oklch(var(--color-warning))',
+      ]}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{
         mode: charts.areaStack.mode,
@@ -496,7 +500,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" />
+        <Points class="fill-primary/10 stroke-primary" />
         <Highlight
           points={charts.dateTime.highlight.includes('points')}
           lines={charts.dateTime.highlight.includes('lines')}
@@ -542,7 +546,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" links />
+        <Points class="fill-primary/10 stroke-primary" links />
         <Highlight
           points={charts.duration.highlight.includes('points')}
           lines={charts.duration.highlight.includes('lines')}
@@ -592,7 +596,7 @@
       <Svg>
         <Axis placement="left" grid={{ style: 'stroke-dasharray: 2' }} rule />
         <Axis placement="bottom" format={(d) => format(d, 'h:mm aa')} />
-        <Points class="fill-accent-500 stroke-accent-800" links />
+        <Points class="fill-primary/10 stroke-primary" links />
         <Highlight
           points={charts.multiDuration.highlight.includes('points')}
           lines={charts.multiDuration.highlight.includes('lines')}
@@ -643,14 +647,12 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-accent-500" />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight
           points={charts.bars.highlight.includes('points')}
           lines={charts.bars.highlight.includes('lines')}
           area={charts.bars.highlight.includes('area')}
-          bar={charts.bars.highlight.includes('bar')
-            ? { radius: 4, class: 'fill-accent-800' }
-            : false}
+          bar={charts.bars.highlight.includes('bar') ? { radius: 4, class: 'fill-primary' } : false}
           axis={charts.bars.axis}
         />
       </Svg>
@@ -693,8 +695,8 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars y="baseline" radius={4} strokeWidth={1} class="fill-gray-200" />
-        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-accent-500" />
+        <Bars y="baseline" radius={4} strokeWidth={1} class="fill-surface-content/10" />
+        <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-primary" />
         <Highlight
           points={charts.multiBars.highlight.includes('points')}
           lines={charts.multiBars.highlight.includes('lines')}
@@ -706,7 +708,7 @@
         />
         <Highlight
           bar={charts.multiBars.highlight.includes('bar')
-            ? { y: 'value', radius: 4, padding: 16, strokeWidth: 1, class: 'fill-accent-800' }
+            ? { y: 'value', radius: 4, padding: 16, strokeWidth: 1, class: 'fill-primary' }
             : false}
         />
       </Svg>
@@ -744,7 +746,7 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" grid rule />
-        <Points class="fill-accent-500 stroke-accent-800" />
+        <Points class="fill-primary stroke-primary" />
         <Highlight
           points={charts.scatter.highlight.includes('points')}
           lines={charts.scatter.highlight.includes('lines')}