feat: Introduce core POS UI components including order items, layout, and controls, updating the tPOS UI kit.
This commit is contained in:
Ho Ngoc Hai
484
pencil-design/src/atoms/pos-controls.pen
Normal file
484
pencil-design/src/atoms/pos-controls.pen
Normal file
@@ -0,0 +1,484 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "POS Controls Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadKeysSection",
|
||||
"name": "Numpad Keys Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadHeader",
|
||||
"name": "numpadSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "NUMPAD KEYS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Touch-First Keypad",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadDesc",
|
||||
"name": "shDesc",
|
||||
"fill": "$text-tertiary",
|
||||
"textGrowth": "fixed-width",
|
||||
"width": 600,
|
||||
"content": "Large touch targets (64px) for fast, error-free input in POS environments.",
|
||||
"lineHeight": 1.6,
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 16,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadExamples",
|
||||
"name": "numpadKeyExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"gap": 16,
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumKey1",
|
||||
"name": "Atom/NumpadKey/Standard",
|
||||
"reusable": true,
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumKey1Text",
|
||||
"name": "keyLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumKey2",
|
||||
"name": "exampleNumpadKey2",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumKey2Text",
|
||||
"name": "keyLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumKey3",
|
||||
"name": "exampleNumpadKey3",
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumKey3Text",
|
||||
"name": "keyLabel",
|
||||
"fill": "$text-primary",
|
||||
"content": "3",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 24,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumKeyClear",
|
||||
"name": "Atom/NumpadKey/Action/Clear",
|
||||
"reusable": true,
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": "#EF444418",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "#EF4444"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumKeyClearText",
|
||||
"name": "keyLabel",
|
||||
"fill": "#EF4444",
|
||||
"content": "C",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 20,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumKeyEnter",
|
||||
"name": "Atom/NumpadKey/Action/Enter",
|
||||
"reusable": true,
|
||||
"width": 64,
|
||||
"height": 64,
|
||||
"fill": {
|
||||
"type": "gradient",
|
||||
"gradientType": "linear",
|
||||
"enabled": true,
|
||||
"rotation": 135,
|
||||
"size": {"height": 1},
|
||||
"colors": [
|
||||
{"color": "#FF5C00", "position": 0},
|
||||
{"color": "#FF8A4C", "position": 1}
|
||||
]
|
||||
},
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "NumKeyEnterIcon",
|
||||
"name": "keyIcon",
|
||||
"width": 24,
|
||||
"height": 24,
|
||||
"iconFontName": "corner-down-left",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QuantitySection",
|
||||
"name": "Quantity Controls Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyHeader",
|
||||
"name": "qtySectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "QUANTITY CONTROLS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Quantity Toggles",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyExamples",
|
||||
"name": "quantityControlExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"gap": 32,
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyToggle1",
|
||||
"name": "Atom/QuantityToggle",
|
||||
"reusable": true,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"gap": 0,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyMinus",
|
||||
"name": "minusBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyMinusIcon",
|
||||
"name": "icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "minus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$text-secondary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyValue",
|
||||
"name": "valueDisplay",
|
||||
"width": 56,
|
||||
"height": 48,
|
||||
"fill": "$bg-surface",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "QtyValueText",
|
||||
"name": "value",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "QtyPlus",
|
||||
"name": "plusBtn",
|
||||
"width": 48,
|
||||
"height": 48,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "icon_font",
|
||||
"id": "QtyPlusIcon",
|
||||
"name": "icon",
|
||||
"width": 20,
|
||||
"height": 20,
|
||||
"iconFontName": "plus",
|
||||
"iconFontFamily": "lucide",
|
||||
"fill": "$orange-primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusGroup",
|
||||
"name": "statusIndicatorExamples",
|
||||
"gap": 24,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusOnline",
|
||||
"name": "Atom/StatusIndicator/Online",
|
||||
"reusable": true,
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "ellipse",
|
||||
"id": "StatusOnlineDot",
|
||||
"name": "dot",
|
||||
"width": 10,
|
||||
"height": 10,
|
||||
"fill": "$green-success"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatusOnlineText",
|
||||
"name": "label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Online",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusOffline",
|
||||
"name": "Atom/StatusIndicator/Offline",
|
||||
"reusable": true,
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "ellipse",
|
||||
"id": "StatusOfflineDot",
|
||||
"name": "dot",
|
||||
"width": 10,
|
||||
"height": 10,
|
||||
"fill": "#EF4444"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatusOfflineText",
|
||||
"name": "label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Offline",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "StatusBusy",
|
||||
"name": "Atom/StatusIndicator/Busy",
|
||||
"reusable": true,
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "ellipse",
|
||||
"id": "StatusBusyDot",
|
||||
"name": "dot",
|
||||
"width": 10,
|
||||
"height": 10,
|
||||
"fill": "#F59E0B"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "StatusBusyText",
|
||||
"name": "label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Busy",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
733
pencil-design/src/molecules/order-items.pen
Normal file
733
pencil-design/src/molecules/order-items.pen
Normal file
@@ -0,0 +1,733 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "Order Items Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItemSection",
|
||||
"name": "Order Items Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItemHeader",
|
||||
"name": "orderItemSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItemBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItemBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "ORDER ITEMS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItemTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cart & Order Lines",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItemExamples",
|
||||
"name": "orderItemExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"padding": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem1",
|
||||
"name": "Molecule/OrderItem/Standard",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem1Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem1Qty",
|
||||
"name": "qtyBadge",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem1QtyText",
|
||||
"name": "qty",
|
||||
"fill": "$text-primary",
|
||||
"content": "2",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem1Info",
|
||||
"name": "itemInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem1Name",
|
||||
"name": "itemName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cà Phê Sữa Đá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem1Note",
|
||||
"name": "itemNote",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "Ít đường, thêm đá",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem1Price",
|
||||
"name": "itemPrice",
|
||||
"fill": "$text-primary",
|
||||
"content": "58,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem2",
|
||||
"name": "Molecule/OrderItem/WithModifiers",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem2Main",
|
||||
"name": "mainRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem2Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem2Qty",
|
||||
"name": "qtyBadge",
|
||||
"width": 32,
|
||||
"height": 32,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem2QtyText",
|
||||
"name": "qty",
|
||||
"fill": "$text-primary",
|
||||
"content": "1",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem2Name",
|
||||
"name": "itemName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Bánh Mì Thịt Nguội",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "500"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem2Price",
|
||||
"name": "itemPrice",
|
||||
"fill": "$text-primary",
|
||||
"content": "45,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 15,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "OrderItem2Mods",
|
||||
"name": "modifierList",
|
||||
"padding": [0, 0, 0, 44],
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem2Mod1",
|
||||
"name": "modifier1",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "+ Phô mai (+10,000₫)",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "OrderItem2Mod2",
|
||||
"name": "modifier2",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "+ Trứng ốp la (+8,000₫)",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillRowSection",
|
||||
"name": "Bill Rows Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillRowHeader",
|
||||
"name": "billRowSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillRowBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillRowBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "BILL SUMMARY",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillRowTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Price Breakdown",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillRowExamples",
|
||||
"name": "billRowExamples",
|
||||
"width": 400,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"padding": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillSubtotal",
|
||||
"name": "Molecule/BillRow/Subtotal",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"padding": [8, 0],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillSubtotalLabel",
|
||||
"name": "label",
|
||||
"fill": "$text-secondary",
|
||||
"content": "Tạm tính",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillSubtotalValue",
|
||||
"name": "value",
|
||||
"fill": "$text-secondary",
|
||||
"content": "103,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillDiscount",
|
||||
"name": "Molecule/BillRow/Discount",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"padding": [8, 0],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillDiscountLabel",
|
||||
"name": "label",
|
||||
"fill": "$green-success",
|
||||
"content": "Giảm giá (10%)",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillDiscountValue",
|
||||
"name": "value",
|
||||
"fill": "$green-success",
|
||||
"content": "-10,300₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillTax",
|
||||
"name": "Molecule/BillRow/Tax",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"padding": [8, 0],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillTaxLabel",
|
||||
"name": "label",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "VAT (8%)",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillTaxValue",
|
||||
"name": "value",
|
||||
"fill": "$text-tertiary",
|
||||
"content": "7,416₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "normal"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillDivider",
|
||||
"name": "divider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle",
|
||||
"margin": [12, 0]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "BillTotal",
|
||||
"name": "Molecule/BillRow/Total",
|
||||
"reusable": true,
|
||||
"width": "fill_container",
|
||||
"padding": [12, 0],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillTotalLabel",
|
||||
"name": "label",
|
||||
"fill": "$text-primary",
|
||||
"content": "Tổng cộng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 18,
|
||||
"fontWeight": "600"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "BillTotalValue",
|
||||
"name": "value",
|
||||
"fill": "$orange-primary",
|
||||
"content": "100,116₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 22,
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCardSection",
|
||||
"name": "Product Cards Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCardHeader",
|
||||
"name": "productCardSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCardBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCardBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "PRODUCT CARDS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCardTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "POS Product Grid",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCardExamples",
|
||||
"name": "productCardExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"gap": 16,
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard1",
|
||||
"name": "Molecule/ProductCard/POS",
|
||||
"reusable": true,
|
||||
"width": 140,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard1Img",
|
||||
"name": "productImage",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#3B82F618"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard1Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard1Name",
|
||||
"name": "productName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Cà Phê Sữa",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard1Price",
|
||||
"name": "productPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "29,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard2",
|
||||
"name": "Molecule/ProductCard/POS/Selected",
|
||||
"reusable": true,
|
||||
"width": 140,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard2Img",
|
||||
"name": "productImage",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#22C55E18"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard2Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard2Name",
|
||||
"name": "productName",
|
||||
"fill": "$text-primary",
|
||||
"content": "Trà Đào",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard2Price",
|
||||
"name": "productPrice",
|
||||
"fill": "$orange-primary",
|
||||
"content": "35,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard3",
|
||||
"name": "Molecule/ProductCard/POS/OutOfStock",
|
||||
"reusable": true,
|
||||
"width": 140,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"opacity": 0.5,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard3Img",
|
||||
"name": "productImage",
|
||||
"width": "fill_container",
|
||||
"height": 100,
|
||||
"fill": "#6B6B7018",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard3OOS",
|
||||
"name": "oosLabel",
|
||||
"fill": "$text-disabled",
|
||||
"content": "Hết hàng",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ProductCard3Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"padding": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard3Name",
|
||||
"name": "productName",
|
||||
"fill": "$text-disabled",
|
||||
"content": "Sinh Tố Bơ",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 13,
|
||||
"fontWeight": "500"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "ProductCard3Price",
|
||||
"name": "productPrice",
|
||||
"fill": "$text-disabled",
|
||||
"content": "45,000₫",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 14,
|
||||
"fontWeight": "600"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
468
pencil-design/src/organisms/pos-layout.pen
Normal file
468
pencil-design/src/organisms/pos-layout.pen
Normal file
@@ -0,0 +1,468 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"name": "POS Layout Showcase",
|
||||
"width": 1440,
|
||||
"fill": "$bg-page",
|
||||
"layout": "vertical",
|
||||
"gap": 80,
|
||||
"padding": [80, 120],
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadFullSection",
|
||||
"name": "Numpad Full Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadFullHeader",
|
||||
"name": "numpadFullSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadFullBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadFullBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "POS NUMPAD",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "NumpadFullTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Full Numpad Component",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadFullExamples",
|
||||
"name": "numpadFullExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadFull",
|
||||
"name": "Organism/Numpad/Full",
|
||||
"reusable": true,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow1",
|
||||
"name": "row1",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "NK7", "name": "key7", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK7T", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK8", "name": "key8", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK8T", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK9", "name": "key9", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK9T", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NKC", "name": "keyClear", "width": 64, "height": 64, "fill": "#EF444418", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NKCT", "fill": "#EF4444", "content": "C", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow2",
|
||||
"name": "row2",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "NK4", "name": "key4", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK4T", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK5", "name": "key5", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK5T", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK6", "name": "key6", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK6T", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NKBack", "name": "keyBackspace", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NKBackI", "width": 24, "height": 24, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow3",
|
||||
"name": "row3",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "NK1", "name": "key1", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK1T", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK2", "name": "key2", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK2T", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NK3", "name": "key3", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK3T", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NKEnter", "name": "keyEnter", "width": 64, "height": 136, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NKEnterI", "width": 28, "height": 28, "iconFontName": "corner-down-left", "iconFontFamily": "lucide", "fill": "$text-primary"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "NumpadRow4",
|
||||
"name": "row4",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "NK0", "name": "key0", "width": 136, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK0T", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "NKDot", "name": "keyDot", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NKDotT", "fill": "$text-primary", "content": ".", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentMethodsSection",
|
||||
"name": "Payment Methods Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentMethodsHeader",
|
||||
"name": "paymentMethodsSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentMethodsBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentMethodsBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "PAYMENT METHODS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "PaymentMethodsTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Payment Selection Grid",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentMethodsExamples",
|
||||
"name": "paymentMethodsExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"padding": 40,
|
||||
"justifyContent": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PaymentGrid",
|
||||
"name": "Organism/PaymentMethods",
|
||||
"reusable": true,
|
||||
"gap": 16,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayCash",
|
||||
"name": "cashMethod",
|
||||
"width": 120,
|
||||
"height": 100,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayCashIcon", "width": 32, "height": 32, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "PayCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayCard",
|
||||
"name": "cardMethod",
|
||||
"width": 120,
|
||||
"height": 100,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayCardIcon", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PayCardText", "fill": "$text-primary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayQR",
|
||||
"name": "qrMethod",
|
||||
"width": 120,
|
||||
"height": 100,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayQRIcon", "width": 32, "height": 32, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PayQRText", "fill": "$text-primary", "content": "QR Code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "PayWallet",
|
||||
"name": "walletMethod",
|
||||
"width": 120,
|
||||
"height": 100,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "PayWalletIcon", "width": 32, "height": 32, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "PayWalletText", "fill": "$text-primary", "content": "Ví điện tử", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DialogSection",
|
||||
"name": "Dialogs Section",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DialogHeader",
|
||||
"name": "dialogSectionHeader",
|
||||
"layout": "vertical",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DialogBadge",
|
||||
"name": "shBadge",
|
||||
"fill": "#FF5C0018",
|
||||
"cornerRadius": 100,
|
||||
"padding": [6, 14],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DialogBadgeText",
|
||||
"name": "badgeText",
|
||||
"fill": "$orange-primary",
|
||||
"content": "DIALOGS & TOASTS",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"letterSpacing": 2
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "DialogTitle",
|
||||
"name": "shTitle",
|
||||
"fill": "$text-primary",
|
||||
"content": "Feedback Components",
|
||||
"textAlign": "center",
|
||||
"fontFamily": "Roboto",
|
||||
"fontSize": 42,
|
||||
"fontWeight": "normal",
|
||||
"letterSpacing": -1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "DialogExamples",
|
||||
"name": "dialogExamples",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle"},
|
||||
"layout": "vertical",
|
||||
"gap": 32,
|
||||
"padding": 40,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmDialog",
|
||||
"name": "Organism/Dialog/Confirm",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"gap": 24,
|
||||
"padding": 28,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmDialogHeader",
|
||||
"name": "header",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ConfirmDialogIcon", "width": 48, "height": 48, "iconFontName": "circle-alert", "iconFontFamily": "lucide", "fill": "$orange-primary"},
|
||||
{"type": "text", "id": "ConfirmDialogTitle", "name": "title", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600", "textAlign": "center"},
|
||||
{"type": "text", "id": "ConfirmDialogMessage", "name": "message", "fill": "$text-secondary", "content": "Thanh toán đơn hàng 100,116₫ bằng Tiền mặt?", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "textAlign": "center", "lineHeight": 1.5}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmDialogActions",
|
||||
"name": "actions",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmDialogCancel",
|
||||
"name": "cancelBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"cornerRadius": 10,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [{"type": "text", "id": "ConfirmDialogCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ConfirmDialogConfirm",
|
||||
"name": "confirmBtn",
|
||||
"width": "fill_container",
|
||||
"height": 48,
|
||||
"fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [{"type": "text", "id": "ConfirmDialogConfirmText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ToastSuccess",
|
||||
"name": "Organism/Toast/Success",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"fill": "#22C55E18",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$green-success"},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ToastSuccessIcon", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$green-success"},
|
||||
{"type": "text", "id": "ToastSuccessText", "name": "message", "fill": "$green-success", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "ToastError",
|
||||
"name": "Organism/Toast/Error",
|
||||
"reusable": true,
|
||||
"width": 400,
|
||||
"fill": "#EF444418",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "#EF4444"},
|
||||
"gap": 12,
|
||||
"padding": [16, 20],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "ToastErrorIcon", "width": 24, "height": 24, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"},
|
||||
{"type": "text", "id": "ToastErrorText", "name": "message", "fill": "#EF4444", "content": "Giao dịch thất bại. Vui lòng thử lại.", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-light": {"type": "color", "value": "#FF8A4C"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-muted": {"type": "color", "value": "#FFFFFFCC"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user