Rebased on main

Author: benmerckx

apps/web/src/view/HomePage.schema.tsx

@@ -1,16 +1,18 @@
 import {Schema, type} from '@alinea/core'
 import {tab, tabs} from '@alinea/input.tabs'
 
-import {IcRoundInsertDriveFile} from '@alinea/ui/icons/IcRoundInsertDriveFile'
-import {IcRoundLink} from '@alinea/ui/icons/IcRoundLink'
+import {color} from '@alinea/input.color'
 import {link} from '@alinea/input.link'
 import {path} from '@alinea/input.path'
 import {text} from '@alinea/input.text'
+import {IcRoundInsertDriveFile} from '@alinea/ui/icons/IcRoundInsertDriveFile'
+import {IcRoundLink} from '@alinea/ui/icons/IcRoundLink'
 
 export const HomePageSchema = type(
   'Home',
   tabs(
     tab('Homepage', {
+      color: color('Color'),
       title: text('Title', {
         width: 0.5,
         multiline: true

packages/input/color/src/ColorField.tsx

@@ -1,4 +1,4 @@
-import {Field, Label, Value} from '@alinea/core'
+import {Field, Label, Shape} from '@alinea/core'
 
 /** Optional settings to configure a color field */
 export type ColorOptions = {
@@ -28,7 +28,7 @@ export function createColor(
   options: ColorOptions = {}
 ): ColorField {
   return {
-    type: Value.Scalar,
+    shape: Shape.Scalar(label),
     label,
     options
   }

packages/input/color/src/ColorInput.module.scss

@@ -13,7 +13,7 @@
       cursor: pointer;
 
       &.is-active {
-        border: 2px solid var(--fields-foreground);
+        border: 2px solid var(--alinea-fields-foreground);
       }
     }
 
@@ -33,12 +33,12 @@
     padding: 9px 16px;
     border-radius: 8px;
     line-height: 1.5;
-    background: var(--fields);
-    box-shadow: var(--fields-shadow);
+    background: var(--alinea-fields);
+    box-shadow: var(--alinea-fields-shadow);
 
     &:focus {
-      background: var(--fields-selected);
-      outline: 2px solid var(--fields-focus);
+      background: var(--alinea-fields-selected);
+      outline: 2px solid var(--alinea-fields-focus);
     }
   }
 }