refactor: style layer border custom property

src/features/canvas/canvas.ts

@@ -1,6 +1,6 @@
 import {builtIn} from '@websqnl/elements/shared'
 import {Layer} from '@features/layers'
-import {Vector2} from '@shared/utils'
+import {getCustomProperty, Vector2} from '@shared/utils'
 
 @builtIn('canvas', 'cf-canvas')
 class Canvas extends HTMLCanvasElement {
@@ -157,7 +157,10 @@ class Canvas extends HTMLCanvasElement {
     path.rect(x, y, width, height)
 
     this.context!.lineWidth = 2
-    this.context!.strokeStyle = 'rgba(255, 13, 233, 0.4)'
+
+    const style = `rgba(${getCustomProperty('--cf-primary-rgb')}, 0.4)`
+    this.context!.strokeStyle = style
+
     this.context!.stroke(path)
   }
 }

src/shared/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './iterators';
 export * from './loaders';
 export * from './math';
+export * from './styles';
 export * from './async';
 export * from './form-value';
 export * from './serialize';

src/shared/utils/styles/get-custom-property.ts

@@ -0,0 +1,6 @@
+type CustomProperty = `--cf-primary-rgb` | `--cf-onprimary-rgb` | `--cf-surface-rgb` | `--cf-onsurface-rgb`
+
+export const getCustomProperty = (property: CustomProperty) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(property)
+
+}

src/shared/utils/styles/index.ts

@@ -0,0 +1 @@
+export * from './get-custom-property';