fix: style status property values

Author: junogueira

packages/notion-types/src/core.ts

@@ -43,6 +43,7 @@ export type PropertyType =
   | 'text'
   | 'number'
   | 'select'
+  | 'status'
   | 'multi_select'
   | 'date'
   | 'person'

packages/react-notion-x/src/styles.css

@@ -51,16 +51,38 @@
   --notion-brown_background_co: rgba(233, 229, 227, 0.3);
   --notion-gray_background_co: rgba(235, 236, 237, 0.3);
 
-  --notion-item-blue: rgba(0, 120, 223, 0.2);
-  --notion-item-orange: rgba(245, 93, 0, 0.2);
-  --notion-item-green: rgba(0, 135, 107, 0.2);
-  --notion-item-pink: rgba(221, 0, 129, 0.2);
-  --notion-item-brown: rgba(140, 46, 0, 0.2);
-  --notion-item-red: rgba(255, 0, 26, 0.2);
-  --notion-item-yellow: rgba(233, 168, 0, 0.2);
-  --notion-item-default: rgba(206, 205, 202, 0.5);
-  --notion-item-purple: rgba(103, 36, 222, 0.2);
-  --notion-item-gray: rgba(155, 154, 151, 0.4);
+  --notion-item-blue: rgb(211, 229, 239);
+  --notion-item-orange: rgb(250, 222, 201);
+  --notion-item-green: rgb(219, 237, 219);
+  --notion-item-pink: rgb(245, 224, 233);
+  --notion-item-brown: rgb(238, 224, 218);
+  --notion-item-red: rgb(255, 226, 221);
+  --notion-item-yellow: rgb(253, 236, 200);
+  --notion-item-default: rgba(227, 226, 224, 0.5);
+  --notion-item-purple: rgb(232, 222, 238);
+  --notion-item-gray: rgb(227, 226, 224);
+
+  --notion-item-text-blue: rgb(24, 51, 71);
+  --notion-item-text-orange: rgb(73, 41, 14);
+  --notion-item-text-green: rgb(28, 56, 41);
+  --notion-item-text-pink: rgb(76, 35, 55);
+  --notion-item-text-brown: rgb(68, 42, 30);
+  --notion-item-text-red: rgb(93, 23, 21);
+  --notion-item-text-yellow: rgb(64, 44, 27);
+  --notion-item-text-default: rgb(50, 48, 44);
+  --notion-item-text-purple: rgb(65, 36, 84);
+  --notion-item-text-gray: rgb(50, 48, 44);
+
+  --notion-item-bullet-blue: rgb(91, 151, 189);
+  --notion-item-bullet-orange: rgb(215, 129, 58);
+  --notion-item-bullet-green: rgb(108, 155, 125);
+  --notion-item-bullet-pink: rgb(205, 116, 159);
+  --notion-item-bullet-brown: rgb(187, 132, 108);
+  --notion-item-bullet-red: rgb(225, 111, 100);
+  --notion-item-bullet-yellow: rgb(203, 148, 51);
+  --notion-item-bullet-default: rgb(91, 151, 189);
+  --notion-item-bullet-purple: rgb(167, 130, 195);
+  --notion-item-bullet-gray: rgb(145, 145, 142);
 
   --notion-max-width: 720px;
   --notion-header-height: 45px;
@@ -371,33 +393,78 @@
 
 .notion-item-blue {
   background-color: var(--notion-item-blue);
+  color: var(--notion-item-text-blue);
 }
 .notion-item-orange {
   background-color: var(--notion-item-orange);
+  color: var(--notion-item-text-orange);
 }
 .notion-item-green {
   background-color: var(--notion-item-green);
+  color: var(--notion-item-text-green);
 }
 .notion-item-pink {
   background-color: var(--notion-item-pink);
+  color: var(--notion-item-text-pink);
 }
 .notion-item-brown {
   background-color: var(--notion-item-brown);
+  color: var(--notion-item-text-brown);
 }
 .notion-item-red {
   background-color: var(--notion-item-red);
+  color: var(--notion-item-text-red);
 }
 .notion-item-yellow {
   background-color: var(--notion-item-yellow);
+  color: var(--notion-item-text-yellow);
 }
-.notion-item-default {
+.notion-item-default,
+.notion-item-default-inferred {
   background-color: var(--notion-item-default);
+  color: var(--notion-item-text-default);
 }
 .notion-item-purple {
   background-color: var(--notion-item-purple);
+  color: var(--notion-item-text-purple);
 }
 .notion-item-gray {
   background-color: var(--notion-item-gray);
+  color: var(--notion-item-text-gray);
+}
+
+.notion-item-bullet-blue {
+  background-color: var(--notion-item-bullet-blue);
+}
+.notion-item-bullet-orange {
+  background-color: var(--notion-item-bullet-orange);
+}
+.notion-item-bullet-green {
+  background-color: var(--notion-item-bullet-green);
+}
+.notion-item-bullet-pink {
+  background-color: var(--notion-item-bullet-pink);
+}
+.notion-item-bullet-brown {
+  background-color: var(--notion-item-bullet-brown);
+}
+.notion-item-bullet-red {
+  background-color: var(--notion-item-bullet-red);
+}
+.notion-item-bullet-yellow {
+  background-color: var(--notion-item-bullet-yellow);
+}
+.notion-item-bullet-default {
+  background-color: var(--notion-item-bullet-default);
+}
+.notion-item-bullet-default-inferred {
+  background-color: var(--notion-item-bullet-gray);
+}
+.notion-item-bullet-purple {
+  background-color: var(--notion-item-bullet-purple);
+}
+.notion-item-bullet-gray {
+  background-color: var(--notion-item-bullet-gray);
 }
 
 .notion b {
@@ -1343,25 +1410,31 @@ svg.notion-page-icon {
 }
 
 .notion-property-select,
+.notion-property-status,
 .notion-property-multi_select {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
 .notion-property-select-item,
+.notion-property-status-item,
 .notion-property-multi_select-item {
   display: flex;
   align-items: center;
   padding: 0 6px;
   border-radius: 3px;
-  height: 18px;
+  height: 20px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 120%;
 }
 
+.notion-property-status-item {
+  border-radius: 20px;
+}
+
 .notion-property-file {
   display: flex;
   flex-wrap: wrap;

packages/react-notion-x/src/third-party/property.tsx

@@ -327,6 +327,45 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
         content = components.propertyTitleValue(props, renderTitleValue)
         break
 
+      case 'status': {
+        const value = data[0][0] || ''
+
+        const option = schema.options?.find((option) => value === option.value)
+
+        const color = option?.color || 'default-inferred'
+
+        content = components.propertySelectValue(
+          {
+            ...props,
+            value,
+            option,
+            color
+          },
+          () => (
+            <div
+              className={cs(
+                `notion-property-${schema.type}-item`,
+                color && `notion-item-${color}`
+              )}
+            >
+              <span
+                className={cs(`notion-item-bullet-${color}`)}
+                style={{
+                  marginRight: '5px',
+                  borderRadius: '100%',
+                  height: '8px',
+                  width: '8px',
+                  display: 'inline-flex',
+                  flexShrink: 0
+                }}
+              />
+              {value}
+            </div>
+          )
+        )
+        break
+      }
+
       case 'select':
       // intentional fallthrough
       case 'multi_select': {