From 81d244e78baf40a8e64964e7caf5289c445c0d5f Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Sat, 31 Jan 2026 20:43:53 +0700 Subject: [PATCH] feat: Introduce core POS UI components including order items, layout, and controls, updating the tPOS UI kit. --- pencil-design/src/atoms/pos-controls.pen | 484 +++++ pencil-design/src/components/tPOS-ui-kit.pen | 1947 ++++++++++++++++++ pencil-design/src/molecules/order-items.pen | 733 +++++++ pencil-design/src/organisms/pos-layout.pen | 468 +++++ 4 files changed, 3632 insertions(+) create mode 100644 pencil-design/src/atoms/pos-controls.pen create mode 100644 pencil-design/src/molecules/order-items.pen create mode 100644 pencil-design/src/organisms/pos-layout.pen diff --git a/pencil-design/src/atoms/pos-controls.pen b/pencil-design/src/atoms/pos-controls.pen new file mode 100644 index 00000000..b13d909d --- /dev/null +++ b/pencil-design/src/atoms/pos-controls.pen @@ -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"} + } +} diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen index c83b028b..bcc0b181 100644 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ b/pencil-design/src/components/tPOS-ui-kit.pen @@ -362,6 +362,415 @@ } ] }, + { + "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": "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": "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": "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" + } + ] + } + ] + } + ] + }, { "type": "frame", "id": "Cfoh0", @@ -540,6 +949,676 @@ } ] }, + { + "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": "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\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + }, + { + "type": "text", + "id": "OrderItem1Note", + "name": "itemNote", + "fill": "$text-tertiary", + "content": "\u00cdt \u0111\u01b0\u1eddng, th\u00eam \u0111\u00e1", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "text", + "id": "OrderItem1Price", + "name": "itemPrice", + "fill": "$text-primary", + "content": "58,000\u20ab", + "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\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "OrderItem2Price", + "name": "itemPrice", + "fill": "$text-primary", + "content": "45,000\u20ab", + "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\u00f4 mai (+10,000\u20ab)", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "OrderItem2Mod2", + "name": "modifier2", + "fill": "$text-tertiary", + "content": "+ Tr\u1ee9ng \u1ed1p la (+8,000\u20ab)", + "fontFamily": "Roboto", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "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": "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\u1ea1m t\u00ednh", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "BillSubtotalValue", + "name": "value", + "fill": "$text-secondary", + "content": "103,000\u20ab", + "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\u1ea3m gi\u00e1 (10%)", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "BillDiscountValue", + "name": "value", + "fill": "$green-success", + "content": "-10,300\u20ab", + "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\u20ab", + "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\u1ed5ng c\u1ed9ng", + "fontFamily": "Roboto", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "text", + "id": "BillTotalValue", + "name": "value", + "fill": "$orange-primary", + "content": "100,116\u20ab", + "fontFamily": "Roboto", + "fontSize": 22, + "fontWeight": "700" + } + ] + } + ] + }, + { + "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": "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\u00e0 Ph\u00ea S\u1eefa", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ProductCard1Price", + "name": "productPrice", + "fill": "$orange-primary", + "content": "29,000\u20ab", + "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\u00e0 \u0110\u00e0o", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ProductCard2Price", + "name": "productPrice", + "fill": "$orange-primary", + "content": "35,000\u20ab", + "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\u1ebft h\u00e0ng", + "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\u1ed1 B\u01a1", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "ProductCard3Price", + "name": "productPrice", + "fill": "$text-disabled", + "content": "45,000\u20ab", + "fontFamily": "Roboto", + "fontSize": 14, + "fontWeight": "600" + } + ] + } + ] + } + ] + }, { "type": "frame", "id": "WocUJ", @@ -2338,6 +3417,874 @@ ] } ] + }, + { + "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": "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": "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": "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\u1ec1n m\u1eb7t", + "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\u1ebb", + "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\u00ed \u0111i\u1ec7n t\u1eed", + "fontFamily": "Roboto", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "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": "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\u00e1c nh\u1eadn thanh to\u00e1n", + "fontFamily": "Roboto", + "fontSize": 20, + "fontWeight": "600", + "textAlign": "center" + }, + { + "type": "text", + "id": "ConfirmDialogMessage", + "name": "message", + "fill": "$text-secondary", + "content": "Thanh to\u00e1n \u0111\u01a1n h\u00e0ng 100,116\u20ab b\u1eb1ng Ti\u1ec1n m\u1eb7t?", + "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\u1ee7y", + "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\u00e1c nh\u1eadn", + "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\u00e1n th\u00e0nh c\u00f4ng!", + "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\u1ecbch th\u1ea5t b\u1ea1i. Vui l\u00f2ng th\u1eed l\u1ea1i.", + "fontFamily": "Roboto", + "fontSize": 15, + "fontWeight": "500" + } + ] + } + ] } ] } diff --git a/pencil-design/src/molecules/order-items.pen b/pencil-design/src/molecules/order-items.pen new file mode 100644 index 00000000..6caf3547 --- /dev/null +++ b/pencil-design/src/molecules/order-items.pen @@ -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"} + } +} diff --git a/pencil-design/src/organisms/pos-layout.pen b/pencil-design/src/organisms/pos-layout.pen new file mode 100644 index 00000000..41e7c708 --- /dev/null +++ b/pencil-design/src/organisms/pos-layout.pen @@ -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"} + } +}